136 files changed, 164 insertions, 217 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index 057631708..dc727a196 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -74,6 +74,7 @@ module.exports = {
         'react/button-has-type': 0,
         'react/forbid-prop-types': 0,
         'react/jsx-curly-newline': 0,
+        'react/react-in-jsx-scope': 0,
         'react/jsx-no-bind': 0,
         'react/jsx-no-target-blank': 0,
         'react/jsx-props-no-spreading': 0,
@@ -151,6 +152,7 @@ module.exports = {
     'react/forbid-prop-types': 1,
     'react/destructuring-assignment': 0,
     'react/jsx-curly-newline': 0,
+    'react/react-in-jsx-scope': 0,
     'react/jsx-filename-extension': 1,
     'react/jsx-one-expression-per-line': 0,
     'react/jsx-no-bind': 1,
diff --git a/babel.config.json b/babel.config.json
index 03f768c6c..7ef38a9a8 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -8,7 +8,7 @@
         }
       }
     ],
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
     [
diff --git a/package-lock.json b/package-lock.json
index 5ff1d8988..66c375eb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7809,9 +7809,9 @@
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "@types/react": {
-      "version": "16.14.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.6.tgz",
-      "integrity": "sha512-Ol/aFKune+P0FSFKIgf+XbhGzYGyz0p7g5befSt4rmbzfGLaZR0q7jPew9k7d3bvrcuaL8dPy9Oz3XGZmf9n+w==",
+      "version": "17.0.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.27.tgz",
+      "integrity": "sha512-zgiJwtsggVGtr53MndV7jfiUESTqrbxOcBvwfe6KS/9bzaVPCTDieTWnFNecVNx6EAaapg5xsLLWFfHHR437AA==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -7819,12 +7819,12 @@
       }
     },
     "@types/react-dom": {
-      "version": "16.9.13",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.13.tgz",
-      "integrity": "sha512-34Hr3XnmUSJbUVDxIw/e7dhQn2BJZhJmlAaPyPwfTQyuVS9mV/CeyghFcXyvkJXxI7notQJz8mF8FeCVvloJrA==",
+      "version": "17.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz",
+      "integrity": "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==",
       "dev": true,
       "requires": {
-        "@types/react": "^16"
+        "@types/react": "*"
       }
     },
     "@types/route-parser": {
@@ -26307,25 +26307,12 @@
       }
     },
     "react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        }
+        "object-assign": "^4.1.1"
       }
     },
     "react-addons-css-transition-group": {
@@ -26345,26 +26332,13 @@
       }
     },
     "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        }
+        "scheduler": "^0.20.2"
       }
     },
     "react-dropzone": {
@@ -27645,9 +27619,9 @@
       }
     },
     "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/package.json b/package.json
index 176e59be1..e2ddee394 100644
--- a/package.json
+++ b/package.json
@@ -107,10 +107,10 @@
     "os-name": "4.0.1",
     "pretty-bytes": "5.6.0",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-addons-css-transition-group": "15.6.2",
     "react-confetti": "6.0.1",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.2",
     "react-dropzone": "11.3.4",
     "react-electron-web-view": "2.0.1",
     "react-intl": "5.20.10",
@@ -149,8 +149,8 @@
     "@types/mocha": "9.0.0",
     "@types/ms": "0.7.31",
     "@types/node": "14.17.6",
-    "@types/react": "16.14.6",
-    "@types/react-dom": "16.9.13",
+    "@types/react": "17.0.27",
+    "@types/react-dom": "17.0.9",
     "@types/route-parser": "0.1.3",
     "@types/tar": "4.0.5",
     "@types/uuid": "8.3.1",
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 5676ed6c3..f073221bc 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -29,11 +29,5 @@
     "csstype": "3.0.8",
     "react-loader": "2.4.7"
   },
-  "peerDependencies": {
-    "classnames": "2.3.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-jss": "8.6.1"
-  },
   "gitHead": "00db2bddccb8bb8ad7d29b8d032876c798b8bbf3"
 }
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index c9ae47d55..d9f372c4b 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,7 +1,7 @@
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import React, { Component } from 'react';
+import { Component, MouseEvent } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
 
@@ -22,9 +22,7 @@ interface IProps extends IFormField, IWithStyle {
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
   onClick: (
-    event:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLAnchorElement>,
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
   ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index 243321d97..8439bfc8b 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -1,5 +1,5 @@
 import { Classes } from 'jss';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectSheet from 'react-jss';
 
 import styles from './styles';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 41751710a..0b16fe688 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -1,7 +1,7 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { Component, createRef, InputHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -18,7 +18,7 @@ interface IData {
 }
 
 interface IProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     IWithStyle {
   focus?: boolean;
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index ad503b785..4d86f23f7 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -1,15 +1,13 @@
 import classnames from 'classnames';
 import { Classes } from 'jss';
-import React, { Component } from 'react';
+import { Component, LabelHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel
-  extends IFormField,
-    React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 7806baa2a..d965d3c93 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -5,7 +5,7 @@ import {
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { ChangeEvent, Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -33,7 +33,7 @@ interface IProps extends IFormField, IWithStyle {
   name: string;
   options: IOptions;
   value: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   showSearch: boolean;
   data: IData;
 }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index 2d89d1c9f..1b16698eb 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { Component, createRef, TextareaHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -15,7 +15,7 @@ interface IData {
 }
 
 interface IProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
     IFormField,
     IWithStyle {
   focus?: boolean;
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index bdf1d22cf..f9ef5775a 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import React, { Component } from 'react';
+import { Component, InputHTMLAttributes } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -11,7 +11,7 @@ import { Label } from '../label';
 import { Wrapper } from '../wrapper';
 
 interface IProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     IWithStyle {
   className?: string;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index 3ae551e2c..ffcd6fe0b 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,10 +1,10 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   identifier: string;
   noMargin?: boolean;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 23af393f5..0de76a98b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,11 +27,5 @@
     "@meetfranz/theme": "file:../theme",
     "react-loader": "2.4.7"
   },
-  "peerDependencies": {
-    "classnames": "2.3.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-jss": "8.6.1"
-  },
   "gitHead": "254da30f801169fac376bda1439b46cabbb491ad"
 }
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 63d5d673a..be7ed8e58 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,6 +1,6 @@
 import { mdiStar } from '@mdi/js';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle from 'react-jss';
 
 import { Badge, Icon } from '..';
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 5dd735879..a8f3ebcbf 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
@@ -8,7 +8,7 @@ import { IWithStyle } from '../typings/generic';
 interface IProps extends IWithStyle {
   type: string;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const badgeStyles = (theme: Theme) => {
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index bf3d4418c..b534a6298 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, createElement, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
@@ -8,7 +8,7 @@ import { IWithStyle, Omit } from '../typings/generic';
 interface IProps extends IWithStyle {
   level?: number;
   className?: string;
-  children: string | React.ReactNode;
+  children: string | ReactNode;
   id?: string;
 }
 
@@ -39,7 +39,7 @@ class HeadlineComponent extends Component<IProps> {
   render() {
     const { classes, level, className, children, id } = this.props;
 
-    return React.createElement(
+    return createElement(
       `h${level}`,
       {
         id,
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index b644a9234..9753b399c 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,6 +1,6 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 88cfdb620..7bad4a1f2 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,6 +1,6 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Icon } from '..';
@@ -16,7 +16,7 @@ interface IProps extends IWithStyle {
   ctaOnClick?: () => void;
   ctaLabel?: string;
   ctaLoading?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   className: string;
 }
 
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 244aa9dc9..0607bd48b 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import ReactLoader from 'react-loader';
 
diff --git a/src/I18n.js b/src/I18n.js
index 6fb4cdc61..2a50050ee 100644
--- a/src/I18n.js
+++ b/src/I18n.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { IntlProvider } from 'react-intl';
diff --git a/src/app.js b/src/app.js
index 8a1f99320..aea57a673 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,5 @@
 import { webFrame } from 'electron';
 
-import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
index 47b730bde..3f2b1ae95 100644
--- a/src/components/AppUpdateInfoBar.js
+++ b/src/components/AppUpdateInfoBar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 17ac221a2..00eded728 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { TitleBar } from 'electron-react-titlebar/renderer';
@@ -87,7 +87,7 @@ class AuthLayout extends Component {
           )}
           <div className="auth__layout">
             {/* Inject globalError into children  */}
-            {React.cloneElement(children, {
+            {cloneElement(children, {
               error,
             })}
           </div>
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index b98fb50f7..9aeebc5c8 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 44cb7e791..fe2fe9872 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index df8980314..dd71c2450 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index a507ba140..5b36b9fc2 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -1,5 +1,5 @@
 import { systemPreferences } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 2f9986858..9f3f636e3 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 3e678f638..d5bc7fa80 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 299c40c63..d0efd6361 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 816a49669..00625a3ac 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 2d2e2ab28..809ec67a7 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 0a65dcffa..9c1dbf139 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 87233f7ca..76edcf2e1 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 423edb3c7..236d2739b 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -78,7 +78,7 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  inputRef = React.createRef();
+  inputRef = createRef();
 
   render() {
     const { classes, name, reload } = this.props;
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index b00db8c3f..5c93de80f 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index e59ed58bd..476b23235 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 81401b1d2..8e44efc5f 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { observer, inject } from 'mobx-react';
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index d3170be53..b60ed3267 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { observable, reaction } from 'mobx';
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index fb43fb816..1edf31bd3 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index a332602be..3607435b3 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 1a389991d..146cd93eb 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 2474682df..d789b6425 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,5 +1,5 @@
 import { Menu, dialog, app } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index a77799819..4ab0e8611 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 71250bd4d..be11fdb8e 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 544821e9a..686501267 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 72c7faa66..18a71fdeb 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index ca188aa99..1e910e6dc 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 44f5bc39a..0c521319a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 22089ec45..fd3c4a176 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index d16d76db2..6dd53a102 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 4916e4ecc..e08b9af1f 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index bb52db97f..aae6eb855 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 123ab4c2d..063bf7b15 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -1,5 +1,5 @@
 import { systemPreferences } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
index f24e4bd62..b906df5c8 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { BrowserWindow } from '@electron/remote';
 import InfoBar from '../../ui/InfoBar';
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 06f244997..4a1a02571 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index adc107ccc..55883e65f 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index fa4a719ab..e00960200 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index f6c9fd3d3..67c801d98 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
index a3aa06bc9..55fe97e82 100644
--- a/src/components/ui/FAB.js
+++ b/src/components/ui/FAB.js
@@ -1,7 +1,7 @@
 /**
  * Floating Action Button (FAB)
  */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index ab5e2f365..f5943f3f3 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet, { withTheme } from 'react-jss';
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 49aff389b..c51d39a9b 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index dc6be10da..3311a949f 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 9e34bf110..b88b01bd8 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 43fab10ee..8d37d7a05 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 94db3f842..40766c984 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index 46c1390bf..71c6b9552 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Loader from 'react-loader';
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 3c7c66c59..c4e47748a 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index 65a777ff1..5354dbfe1 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 2d760beab..2e8793a2b 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index 5ac7ddd6d..a560da332 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
@@ -24,7 +24,7 @@ class Select extends Component {
   constructor(props) {
     super(props);
 
-    this.element = React.createRef();
+    this.element = createRef();
   }
 
   multipleChange() {
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index b2dadeac3..2e9312d27 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index 6f17eae00..dea6e0563 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index ff4e8c795..38b436742 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index bd613ddc7..9fcc3c41e 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1,3 +1 @@
-import React from 'react';
-
 export const TabItem = ({ children }) => <>{children}</>;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 195398708..77803974b 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -36,7 +36,7 @@ class Tab extends Component {
     return (
       <div className="content-tabs">
         <div className="content-tabs__tabs">
-          {React.Children.map(children, (child, i) => (
+          {Children.map(children, (child, i) => (
             <button
               key="{i}"
               className={classnames({
@@ -51,7 +51,7 @@ class Tab extends Component {
           ))}
         </div>
         <div className="content-tabs__content">
-          {React.Children.map(children, (child, i) => (
+          {Children.map(children, (child, i) => (
             <div
               key="{i}"
               className={classnames({
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index bd7bc242d..dfc319735 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 1fde879ac..74292a870 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -1,7 +1,7 @@
 /**
  * "Raw" Toggle - for usage without a MobX Form element
  */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 8f4499e7b..8d4513172 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
index 183181f8f..fc319fe28 100644
--- a/src/components/ui/effects/Appear.js
+++ b/src/components/ui/effects/Appear.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index 9c789e981..cddcd91c2 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 7673ab9c7..aa36e3969 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
diff --git a/src/containers/auth/ChangeServerScreen.js b/src/containers/auth/ChangeServerScreen.js
index a8910e7b1..dcc913c39 100644
--- a/src/containers/auth/ChangeServerScreen.js
+++ b/src/containers/auth/ChangeServerScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
index ce786bdb8..46e2d41f0 100644
--- a/src/containers/auth/ImportScreen.js
+++ b/src/containers/auth/ImportScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index d9d52a57c..e252242ae 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
diff --git a/src/containers/auth/LockedScreen.js b/src/containers/auth/LockedScreen.js
index a49549731..945e41284 100644
--- a/src/containers/auth/LockedScreen.js
+++ b/src/containers/auth/LockedScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Locked from '../../components/auth/Locked';
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
index cab73316b..3f8c67fa8 100644
--- a/src/containers/auth/LoginScreen.js
+++ b/src/containers/auth/LoginScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Login from '../../components/auth/Login';
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
index 86a746b9b..836d4cc88 100644
--- a/src/containers/auth/PasswordScreen.js
+++ b/src/containers/auth/PasswordScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Password from '../../components/auth/Password';
diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
index efda2e9d2..8cdd95a88 100644
--- a/src/containers/auth/SetupAssistantScreen.js
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-await-in-loop */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index b20a7fd62..3b19f3c50 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
index d169e5f0f..7a23d9ba9 100644
--- a/src/containers/auth/WelcomeScreen.js
+++ b/src/containers/auth/WelcomeScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 3e92b0610..ae4cc8b63 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
@@ -168,7 +168,7 @@ class AppLayoutContainer extends Component {
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
         >
-          {React.Children.count(children) > 0 ? children : null}
+          {Children.count(children) > 0 ? children : null}
         </AppLayout>
       </ThemeProvider>
     );
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 1515fc22b..f7c9b8164 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index dee7e7cff..85af0334d 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 1b05644f9..4b59442cb 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index ca1363c59..1dc0aa8e6 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index bf393f42f..592b4b11c 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 2e60ceefa..832c2db10 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,5 +1,5 @@
 import { readJsonSync } from 'fs-extra';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index c9dfc68d0..a657b6e6c 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index e03c4c1d2..35db3a434 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
diff --git a/src/containers/settings/SupportScreen.js b/src/containers/settings/SupportScreen.js
index 646f672ce..d3600f8ea 100644
--- a/src/containers/settings/SupportScreen.js
+++ b/src/containers/settings/SupportScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index ea447469b..928262a59 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index 3cf937f98..652233e55 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { observer } from 'mobx-react';
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index 814d529d9..98a7cb5a2 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 5b5036752..d3751b63d 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -1,7 +1,7 @@
 import { H1 } from '@meetfranz/ui';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import { state as ModalState } from './store';
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index f21db0ebd..76b3c9b4b 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -1,4 +1,4 @@
-import React, { Component, createRef } from 'react';
+import { Component, createRef } from 'react';
 import { getCurrentWindow } from '@electron/remote';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 2dc30cdf2..b31c7d858 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index d05e24e56..c2b6a5af4 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 97fa20dcc..8261ede2b 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -121,7 +121,7 @@ class WebControls extends Component {
     }
   }
 
-  inputRef = React.createRef();
+  inputRef = createRef();
 
   state = {
     inputUrl: '',
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 0273bb13e..6fba5db86 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index c9b05b87f..c93f8f6f7 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index f562733dd..1bd06c4b2 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 3dac77bc2..54e74fdf5 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 4afb9c108..237f9488b 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -1,5 +1,5 @@
 import { Menu } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index ec7b19add..ff3f69dd9 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
index f6e2a2786..c06f3c61c 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 33a82cf4b..187b6a516 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 49552df6b..78b758e7d 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index ba7606031..bd9e235e3 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 4828658f9..2ba3784cb 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
diff --git a/src/routes.js b/src/routes.js
index 502ea86f5..9891e5d43 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { Router, Route, IndexRedirect } from 'react-router';
diff --git a/tsconfig.json b/tsconfig.json
index 25ac51709..6dcf49291 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "target": "esnext",
     "lib": ["esnext", "dom"],
     "module": "CommonJS",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "typeRoots": ["@types", "node_modules/@types"],
     "moduleResolution": "node",
     "types": ["node", "mocha"],
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 970cb40e3..26e0f5b96 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -1,7 +1,6 @@
 import { Property } from 'csstype';
 import { Classes } from 'jss';
 import { observer } from 'mobx-react';
-import React from 'react';
 import injectSheet from 'react-jss';
 
 import { theme, ThemeType } from '@meetfranz/theme';
diff --git a/uidev/src/index.tsx b/uidev/src/index.tsx
index 5aa3979c8..c996d9f69 100644
--- a/uidev/src/index.tsx
+++ b/uidev/src/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 import { App } from './app';
 
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx
index d7b4d55b5..05fa4617b 100644
--- a/uidev/src/stories/badge.stories.tsx
+++ b/uidev/src/stories/badge.stories.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Badge, ProBadge } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index 5ca657238..e948e8ca4 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -1,7 +1,7 @@
 import { mdiInformation } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import React from 'react';
+import * as React from 'react';
 import injectSheet from 'react-jss';
 
 import { Button, Input } from '@meetfranz/forms';
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
index 320ac832f..1f1ab2036 100644
--- a/uidev/src/stories/headline.stories.tsx
+++ b/uidev/src/stories/headline.stories.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { H1, H2, H3, H4 } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
index f9aa1635b..12c08fd57 100644
--- a/uidev/src/stories/icon.stories.tsx
+++ b/uidev/src/stories/icon.stories.tsx
@@ -1,5 +1,4 @@
 import { mdiAccountCircle } from '@mdi/js';
-import React from 'react';
 
 import { Icon } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index fe4aaab06..166150606 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -1,7 +1,7 @@
 import { mdiEarth } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import React from 'react';
+import * as React from 'react';
 
 import { Infobox } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index c92ebb36a..2a252ee66 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Input } from '@meetfranz/forms';
 import { v4 as uuid } from 'uuid';
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
index 50eb7b9e1..ad38dffe8 100644
--- a/uidev/src/stories/loader.stories.tsx
+++ b/uidev/src/stories/loader.stories.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Loader } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
index 93e072cd9..26189afb8 100644
--- a/uidev/src/stories/select.stories.tsx
+++ b/uidev/src/stories/select.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { Select } from '@meetfranz/forms';
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx
index 09b9fef70..5c2b61798 100644
--- a/uidev/src/stories/textarea.stories.tsx
+++ b/uidev/src/stories/textarea.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { Textarea } from '@meetfranz/forms';
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
index f54e67596..021658d21 100644
--- a/uidev/src/stories/toggle.stories.tsx
+++ b/uidev/src/stories/toggle.stories.tsx
@@ -1,6 +1,5 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { Toggle } from '@meetfranz/forms';
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 4ef649367..5184ff340 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -1,6 +1,6 @@
 import { theme, Theme, ThemeType } from '@meetfranz/theme';
 import { Classes } from 'jss';
-import React from 'react';
+import * as React from 'react';
 import injectSheet, { ThemeProvider } from 'react-jss';
 
 const defaultTheme = {