diff --git a/packages/maps/src/components/basic/GeoDistanceDropdown.js b/packages/maps/src/components/basic/GeoDistanceDropdown.js
index 09ecf9445b..34e751cb1f 100644
--- a/packages/maps/src/components/basic/GeoDistanceDropdown.js
+++ b/packages/maps/src/components/basic/GeoDistanceDropdown.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import Downshift from 'downshift';
 import { withTheme } from 'emotion-theming';
diff --git a/packages/maps/src/components/basic/GeoDistanceSlider.js b/packages/maps/src/components/basic/GeoDistanceSlider.js
index c194a4bb12..a222c1b206 100644
--- a/packages/maps/src/components/basic/GeoDistanceSlider.js
+++ b/packages/maps/src/components/basic/GeoDistanceSlider.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import Downshift from 'downshift';
 import { withTheme } from 'emotion-theming';
diff --git a/packages/maps/src/components/result/GoogleMapMarker.js b/packages/maps/src/components/result/GoogleMapMarker.js
index 3dbe840fd5..9573fc44f0 100644
--- a/packages/maps/src/components/result/GoogleMapMarker.js
+++ b/packages/maps/src/components/result/GoogleMapMarker.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import React from 'react';
 
diff --git a/packages/maps/src/components/result/ReactiveOpenStreetMap.js b/packages/maps/src/components/result/ReactiveOpenStreetMap.js
index e9b9b8f31a..782081bc42 100644
--- a/packages/maps/src/components/result/ReactiveOpenStreetMap.js
+++ b/packages/maps/src/components/result/ReactiveOpenStreetMap.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import { Component } from 'react';
 import ReactDOMServer from 'react-dom/server';
diff --git a/packages/web/src/components/basic/NumberBox.js b/packages/web/src/components/basic/NumberBox.js
index ad7c463496..4b029278d5 100644
--- a/packages/web/src/components/basic/NumberBox.js
+++ b/packages/web/src/components/basic/NumberBox.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import React, { Component } from 'react';
 
diff --git a/packages/web/src/components/basic/SelectedFilters.js b/packages/web/src/components/basic/SelectedFilters.js
index fabc68c174..ec89c2cce4 100644
--- a/packages/web/src/components/basic/SelectedFilters.js
+++ b/packages/web/src/components/basic/SelectedFilters.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/list/ToggleButton.js b/packages/web/src/components/list/ToggleButton.js
index 24a67aae35..758322507d 100644
--- a/packages/web/src/components/list/ToggleButton.js
+++ b/packages/web/src/components/list/ToggleButton.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/list/TreeList/index.js b/packages/web/src/components/list/TreeList/index.js
index d7dd90026f..2ccf9b1f5f 100644
--- a/packages/web/src/components/list/TreeList/index.js
+++ b/packages/web/src/components/list/TreeList/index.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import {
 	componentTypes,
diff --git a/packages/web/src/components/range/DynamicRangeSlider.js b/packages/web/src/components/range/DynamicRangeSlider.js
index e912c0c3d2..53c038b0a8 100644
--- a/packages/web/src/components/range/DynamicRangeSlider.js
+++ b/packages/web/src/components/range/DynamicRangeSlider.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/range/RangeSlider.js b/packages/web/src/components/range/RangeSlider.js
index fe1ae78304..91c96430e1 100644
--- a/packages/web/src/components/range/RangeSlider.js
+++ b/packages/web/src/components/range/RangeSlider.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/range/RatingsFilter.js b/packages/web/src/components/range/RatingsFilter.js
index f15ebc40cf..29b09b7cff 100644
--- a/packages/web/src/components/range/RatingsFilter.js
+++ b/packages/web/src/components/range/RatingsFilter.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/range/addons/HistogramContainer.js b/packages/web/src/components/range/addons/HistogramContainer.js
index 1dcc37846a..96ba3341f7 100644
--- a/packages/web/src/components/range/addons/HistogramContainer.js
+++ b/packages/web/src/components/range/addons/HistogramContainer.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import types from '@appbaseio/reactivecore/lib/utils/types';
diff --git a/packages/web/src/components/range/addons/StarRating.js b/packages/web/src/components/range/addons/StarRating.js
index 494edd2bfd..78550b4eb2 100644
--- a/packages/web/src/components/range/addons/StarRating.js
+++ b/packages/web/src/components/range/addons/StarRating.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React from 'react';
diff --git a/packages/web/src/components/result/ReactiveList.js b/packages/web/src/components/result/ReactiveList.js
index 58a7b00ec3..3797c8494e 100644
--- a/packages/web/src/components/result/ReactiveList.js
+++ b/packages/web/src/components/result/ReactiveList.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React, { Component } from 'react';
diff --git a/packages/web/src/components/result/addons/Pagination.js b/packages/web/src/components/result/addons/Pagination.js
index 739b8422e1..8364675e6c 100644
--- a/packages/web/src/components/result/addons/Pagination.js
+++ b/packages/web/src/components/result/addons/Pagination.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import React from 'react';
diff --git a/packages/web/src/components/search/CategorySearch.js b/packages/web/src/components/search/CategorySearch.js
index efcebaafa7..3bf0c2a32e 100644
--- a/packages/web/src/components/search/CategorySearch.js
+++ b/packages/web/src/components/search/CategorySearch.js
@@ -1,5 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import React, { Component } from 'react';
 import Downshift from 'downshift';
diff --git a/packages/web/src/components/search/DataSearch.js b/packages/web/src/components/search/DataSearch.js
index 000d06d430..aa80557431 100644
--- a/packages/web/src/components/search/DataSearch.js
+++ b/packages/web/src/components/search/DataSearch.js
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-/** @jsxImportSource @emotion/react */
-
+// /** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import React, { Component } from 'react';
 import Downshift from 'downshift';
diff --git a/packages/web/src/components/search/SearchBox.js b/packages/web/src/components/search/SearchBox.js
index 9e77d65f07..c3996d82c1 100644
--- a/packages/web/src/components/search/SearchBox.js
+++ b/packages/web/src/components/search/SearchBox.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import {
 	componentTypes,
diff --git a/packages/web/src/components/search/addons/Highlight.js b/packages/web/src/components/search/addons/Highlight.js
index acf091f142..52eb45b13d 100644
--- a/packages/web/src/components/search/addons/Highlight.js
+++ b/packages/web/src/components/search/addons/Highlight.js
@@ -1,4 +1,4 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 
diff --git a/packages/web/src/components/search/addons/Mic.js b/packages/web/src/components/search/addons/Mic.js
index 7cdd67af39..6116282a58 100644
--- a/packages/web/src/components/search/addons/Mic.js
+++ b/packages/web/src/components/search/addons/Mic.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import types from '@appbaseio/reactivecore/lib/utils/types';
 import {
diff --git a/packages/web/src/components/search/addons/SuggestionItem.js b/packages/web/src/components/search/addons/SuggestionItem.js
index ed0cb65366..7ece562347 100644
--- a/packages/web/src/components/search/addons/SuggestionItem.js
+++ b/packages/web/src/components/search/addons/SuggestionItem.js
@@ -1,7 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
-
-
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Flex from '../../../styles/Flex';
 import Highlight from './Highlight';
 
diff --git a/packages/web/src/components/search/addons/SuggestionWrapper.js b/packages/web/src/components/search/addons/SuggestionWrapper.js
index bd774eedd4..3a362ed4bc 100644
--- a/packages/web/src/components/search/addons/SuggestionWrapper.js
+++ b/packages/web/src/components/search/addons/SuggestionWrapper.js
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
-
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { getClassName } from '@appbaseio/reactivecore/lib/utils/helper';
 import types from '@appbaseio/reactivecore/lib/utils/types';
 import { noSuggestions } from '../../../styles/Input';
@@ -10,10 +9,7 @@ const SuggestionWrapper = ({
 }) => (
 	<div
 		css={noSuggestions(themePreset, theme)}
-		className={getClassName(
-			innerClass,
-			innerClassName || '',
-		)}
+		className={getClassName(innerClass, innerClassName || '')}
 	>
 		<li>{children}</li>
 	</div>
diff --git a/packages/web/src/components/shared/Dropdown.js b/packages/web/src/components/shared/Dropdown.js
index 89423daf14..ed2d732d53 100644
--- a/packages/web/src/components/shared/Dropdown.js
+++ b/packages/web/src/components/shared/Dropdown.js
@@ -1,4 +1,5 @@
-/** @jsxImportSource @emotion/react */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 
 import { Component } from 'react';
diff --git a/yarn.lock b/yarn.lock
index 45ec055283..c07178af39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -74,10 +74,10 @@
   dependencies:
     cross-fetch "^3.0.4"
 
-"@appbaseio/designkit@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@appbaseio/designkit/-/designkit-0.13.0.tgz#79e184cb7ed283c7a07ccc7c75d8a3236a58b7ea"
-  integrity sha512-qZSXG1vrhUflrQUFhEDxT/iAdBZc75YNhyEg69nzQipRkDJVvj0cRo2D4CSLHWBjznKB9eMAY8oNq/LmFAMBJQ==
+"@appbaseio/designkit@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@appbaseio/designkit/-/designkit-0.11.0.tgz#6f0fce707239a8255ef3127b5889703368773cb8"
+  integrity sha512-qX5Ych7sgPKl4IP7jWiT7ISalDpky7IMS9fNxDH/M9rDsJ46AZABaC8xnuODWQPWtA0qHbW35TWltFxjfQ5TJA==
   dependencies:
     "@storybook/react" "^3.2.19"
     prop-types "^15.6.0"
@@ -31654,7 +31654,7 @@ react-responsive-modal@^4.0.1:
     prop-types "^15.6.2"
     react-transition-group "^4.0.0"
 
-react-router-dom@^4.2.2, react-router-dom@^4.3.1:
+react-router-dom@4.3.1, react-router-dom@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
   integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==
@@ -38862,11 +38862,6 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
-yarn@^1.22.18:
-  version "1.22.19"
-  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
-
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"