diff --git a/.eslintrc.json b/.eslintrc.json
index 489d2bbd7c..a7d4434586 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -76,7 +76,19 @@
         "singleReturnOnly": false
       }
     ],
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [{
+          "name": "styled-components",
+          "message": "Please import from styled-components/macro to enable dev tooling."
+        }],
+        "patterns": [
+          "!styled-components/macro"
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": {
diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
new file mode 100644
index 0000000000..93d54ab1de
--- /dev/null
+++ b/babel-plugin-macros.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  styledComponents: {
+    displayName: process.env.NODE_ENV !== 'production'
+  }
+}
\ No newline at end of file
diff --git a/src/Providers.tsx b/src/Providers.tsx
index 4d523643ed..03585fc080 100644
--- a/src/Providers.tsx
+++ b/src/Providers.tsx
@@ -30,7 +30,7 @@ import { UIProvider } from 'contexts/UI';
 import { ValidatorsProvider } from 'contexts/Validators';
 import { withProviders } from 'library/Hooks';
 import Router from 'Router';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components/macro';
 import { EntryWrapper as Wrapper } from 'Wrappers';
 
 // `polkadot-dashboard-ui` theme classes are inserted here.
diff --git a/src/Wrappers.tsx b/src/Wrappers.tsx
index cfb02df285..1bba88dfdd 100644
--- a/src/Wrappers.tsx
+++ b/src/Wrappers.tsx
@@ -9,7 +9,7 @@ import {
   SideMenuStickyThreshold,
 } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundGradient,
   backgroundPrimary,
diff --git a/src/library/Account/Wrapper.ts b/src/library/Account/Wrapper.ts
index 80242433a1..251dad9b1d 100644
--- a/src/library/Account/Wrapper.ts
+++ b/src/library/Account/Wrapper.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, borderSecondary, textSecondary } from 'theme';
 
 export const Wrapper = styled(motion.button)<any>`
diff --git a/src/library/ErrorBoundary/Wrapper.ts b/src/library/ErrorBoundary/Wrapper.ts
index e3bde58786..ca4acaeb70 100644
--- a/src/library/ErrorBoundary/Wrapper.ts
+++ b/src/library/ErrorBoundary/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/EstimatedTxFee/Wrapper.tsx b/src/library/EstimatedTxFee/Wrapper.tsx
index 5448f0866c..1d3d94ed33 100644
--- a/src/library/EstimatedTxFee/Wrapper.tsx
+++ b/src/library/EstimatedTxFee/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/Filter/Wrappers.ts b/src/library/Filter/Wrappers.ts
index 3b2fd16554..115f5d9302 100644
--- a/src/library/Filter/Wrappers.ts
+++ b/src/library/Filter/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   buttonPrimaryBackground,
diff --git a/src/library/Form/AccountDropdown/Wrappers.ts b/src/library/Form/AccountDropdown/Wrappers.ts
index 8d8129cbe0..75a1f55275 100644
--- a/src/library/Form/AccountDropdown/Wrappers.ts
+++ b/src/library/Form/AccountDropdown/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   borderPrimary,
diff --git a/src/library/Form/AccountSelect/Wrappers.ts b/src/library/Form/AccountSelect/Wrappers.ts
index a19c2ec6b0..f4843786dd 100644
--- a/src/library/Form/AccountSelect/Wrappers.ts
+++ b/src/library/Form/AccountSelect/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundToggle, borderPrimary, textPrimary } from 'theme';
 
 export const StyledDownshift = styled.div<any>`
diff --git a/src/library/Form/CreatePoolStatusBar/Wrapper.ts b/src/library/Form/CreatePoolStatusBar/Wrapper.ts
index 129cac11fd..dd55309089 100644
--- a/src/library/Form/CreatePoolStatusBar/Wrapper.ts
+++ b/src/library/Form/CreatePoolStatusBar/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/Form/NominateStatusBar/Wrapper.ts b/src/library/Form/NominateStatusBar/Wrapper.ts
index 79d239b2ce..e1545fe451 100644
--- a/src/library/Form/NominateStatusBar/Wrapper.ts
+++ b/src/library/Form/NominateStatusBar/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/Form/Warning/Wrapper.ts b/src/library/Form/Warning/Wrapper.ts
index d31a020a64..6e5a7f0ce4 100644
--- a/src/library/Form/Warning/Wrapper.ts
+++ b/src/library/Form/Warning/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/Form/Wrappers.ts b/src/library/Form/Wrappers.ts
index 0a7cfb6d03..3be26e44da 100644
--- a/src/library/Form/Wrappers.ts
+++ b/src/library/Form/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textSecondary } from 'theme';
 
 export const Spacer = styled.div`
diff --git a/src/library/GenerateNominations/Wrappers.ts b/src/library/GenerateNominations/Wrappers.ts
index 2f89a27d49..3d321f601d 100644
--- a/src/library/GenerateNominations/Wrappers.ts
+++ b/src/library/GenerateNominations/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SectionFullWidthThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const GenerateOptionsWrapper = styled.div`
   width: 100%;
diff --git a/src/library/Graphs/Wrappers.ts b/src/library/Graphs/Wrappers.ts
index 5d7f62d454..ed6de7f4d1 100644
--- a/src/library/Graphs/Wrappers.ts
+++ b/src/library/Graphs/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SideMenuStickyThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundSecondary,
   borderPrimary,
diff --git a/src/library/Headers/Spinner.tsx b/src/library/Headers/Spinner.tsx
index ff6b2934e9..a60cd3aebb 100644
--- a/src/library/Headers/Spinner.tsx
+++ b/src/library/Headers/Spinner.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundPrimary } from 'theme';
 
 const StyledSpinner = styled.div`
diff --git a/src/library/Headers/Wrappers.ts b/src/library/Headers/Wrappers.ts
index cfab928162..c5656a5df3 100644
--- a/src/library/Headers/Wrappers.ts
+++ b/src/library/Headers/Wrappers.ts
@@ -6,7 +6,7 @@ import {
   SideMenuStickyThreshold,
 } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   buttonSecondaryBackground,
diff --git a/src/library/Help/Wrappers.ts b/src/library/Help/Wrappers.ts
index 2d67d6a246..488841fd05 100644
--- a/src/library/Help/Wrappers.ts
+++ b/src/library/Help/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   helpButton,
   modalOverlayBackground,
diff --git a/src/library/Identicon/index.tsx b/src/library/Identicon/index.tsx
index a5bf94f492..13d997537e 100644
--- a/src/library/Identicon/index.tsx
+++ b/src/library/Identicon/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Identicon as IdenticonDefault } from '@polkadot/react-identicon';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundIdenticon } from 'theme';
 import { IdenticonProps } from './types';
 
diff --git a/src/library/List/index.ts b/src/library/List/index.ts
index e8a695ae7c..9b9d3275ba 100644
--- a/src/library/List/index.ts
+++ b/src/library/List/index.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, networkColor, textPrimary, textSecondary } from 'theme';
 import { ListProps, PaginationWrapperProps } from './types';
 
diff --git a/src/library/ListItem/Labels/Select.tsx b/src/library/ListItem/Labels/Select.tsx
index 1e2edd54b4..c8c4aa638b 100644
--- a/src/library/ListItem/Labels/Select.tsx
+++ b/src/library/ListItem/Labels/Select.tsx
@@ -5,7 +5,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SelectSingleWrapper, SelectWrapper } from 'library/ListItem/Wrappers';
-import { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components/macro';
 import { defaultThemes } from 'theme/default';
 import { useList } from '../../List/context';
 import { SelectProps } from '../types';
diff --git a/src/library/ListItem/Wrappers.ts b/src/library/ListItem/Wrappers.ts
index 23c04f7437..7455974926 100644
--- a/src/library/ListItem/Wrappers.ts
+++ b/src/library/ListItem/Wrappers.ts
@@ -3,7 +3,7 @@
 
 import { SmallFontSizeMaxWidth } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   backgroundModalItem,
diff --git a/src/library/Menu/Wrappers.ts b/src/library/Menu/Wrappers.ts
index b188a9883b..ca39b3b831 100644
--- a/src/library/Menu/Wrappers.ts
+++ b/src/library/Menu/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FloatingMenuWidth } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, modalBackground, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/Modal/Wrappers.tsx b/src/library/Modal/Wrappers.tsx
index 6a93b3c0a8..4dd4241398 100644
--- a/src/library/Modal/Wrappers.tsx
+++ b/src/library/Modal/Wrappers.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textPrimary, textSecondary } from 'theme';
 
 export const TitleWrapper = styled.div<{ fixed: boolean }>`
diff --git a/src/library/NetworkBar/Wrappers.ts b/src/library/NetworkBar/Wrappers.ts
index e9344b20eb..7ef0ffcf90 100644
--- a/src/library/NetworkBar/Wrappers.ts
+++ b/src/library/NetworkBar/Wrappers.ts
@@ -3,7 +3,7 @@
 
 import { SideMenuStickyThreshold } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundNetworkBar, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled(motion.div)`
diff --git a/src/library/Notifications/Wrapper.ts b/src/library/Notifications/Wrapper.ts
index 0bf779ba8d..f5304ea770 100644
--- a/src/library/Notifications/Wrapper.ts
+++ b/src/library/Notifications/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundError,
   backgroundSuccess,
diff --git a/src/library/OpenHelpIcon/Wrapper.tsx b/src/library/OpenHelpIcon/Wrapper.tsx
index 9813ba04ef..33c3b5dc52 100644
--- a/src/library/OpenHelpIcon/Wrapper.tsx
+++ b/src/library/OpenHelpIcon/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   buttonHelpBackground,
   buttonPrimaryBackground,
diff --git a/src/library/Overlay/Wrappers.tsx b/src/library/Overlay/Wrappers.tsx
index 3e82460990..8126e92f82 100644
--- a/src/library/Overlay/Wrappers.tsx
+++ b/src/library/Overlay/Wrappers.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   buttonPrimaryBackground,
   cardShadow,
diff --git a/src/library/PoolAccount/Wrapper.ts b/src/library/PoolAccount/Wrapper.ts
index da26d1fd17..9a8a8558ca 100644
--- a/src/library/PoolAccount/Wrapper.ts
+++ b/src/library/PoolAccount/Wrapper.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderSecondary, textSecondary } from 'theme';
 import { WrapperProps } from './types';
 
diff --git a/src/library/SetupSteps/Footer/Wrapper.ts b/src/library/SetupSteps/Footer/Wrapper.ts
index a32d2eb414..bea6f34f6b 100644
--- a/src/library/SetupSteps/Footer/Wrapper.ts
+++ b/src/library/SetupSteps/Footer/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   width: 100%;
diff --git a/src/library/SetupSteps/Header/Wrapper.ts b/src/library/SetupSteps/Header/Wrapper.ts
index 30c6b0e608..9214be9f70 100644
--- a/src/library/SetupSteps/Header/Wrapper.ts
+++ b/src/library/SetupSteps/Header/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/library/SideMenu/Heading/Wrapper.tsx b/src/library/SideMenu/Heading/Wrapper.tsx
index d34f657216..7e6b715103 100644
--- a/src/library/SideMenu/Heading/Wrapper.tsx
+++ b/src/library/SideMenu/Heading/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div<{ minimised: number }>`
diff --git a/src/library/SideMenu/Primary/Wrappers.tsx b/src/library/SideMenu/Primary/Wrappers.tsx
index 2881ad28b1..382cb81065 100644
--- a/src/library/SideMenu/Primary/Wrappers.tsx
+++ b/src/library/SideMenu/Primary/Wrappers.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   highlightPrimary,
   highlightSecondary,
diff --git a/src/library/SideMenu/Secondary/Wrappers.tsx b/src/library/SideMenu/Secondary/Wrappers.tsx
index cc3ebd7427..e3eb75fe8d 100644
--- a/src/library/SideMenu/Secondary/Wrappers.tsx
+++ b/src/library/SideMenu/Secondary/Wrappers.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   highlightPrimary,
diff --git a/src/library/SideMenu/Wrapper.ts b/src/library/SideMenu/Wrapper.ts
index 15253ed017..be165262f4 100644
--- a/src/library/SideMenu/Wrapper.ts
+++ b/src/library/SideMenu/Wrapper.ts
@@ -6,7 +6,7 @@ import {
   SideMenuMinimisedWidth,
   SideMenuStickyThreshold,
 } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundOverlay,
   borderPrimary,
diff --git a/src/library/Stat/Wrapper.ts b/src/library/Stat/Wrapper.ts
index cb1455f2ba..a3f1554d98 100644
--- a/src/library/Stat/Wrapper.ts
+++ b/src/library/Stat/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   padding: 0.15rem 0.25rem;
diff --git a/src/library/StatBoxList/Wrapper.ts b/src/library/StatBoxList/Wrapper.ts
index 2b42fe51b5..4764358938 100644
--- a/src/library/StatBoxList/Wrapper.ts
+++ b/src/library/StatBoxList/Wrapper.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import {
   backgroundSecondary,
diff --git a/src/library/StatusButton/Wrapper.ts b/src/library/StatusButton/Wrapper.ts
index 1d843e6731..2b97b681cb 100644
--- a/src/library/StatusButton/Wrapper.ts
+++ b/src/library/StatusButton/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { buttonPrimaryBackground, textPrimary, textSecondary } from 'theme';
 
 export const Wrapper = styled.button`
diff --git a/src/library/StatusLabel/Wrapper.ts b/src/library/StatusLabel/Wrapper.ts
index 7d10b36b9d..8b228425c4 100644
--- a/src/library/StatusLabel/Wrapper.ts
+++ b/src/library/StatusLabel/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, textSecondary } from 'theme';
 import { WrapperProps } from './types';
 
diff --git a/src/library/SubscanButton/index.tsx b/src/library/SubscanButton/index.tsx
index 188f18a4f7..572c9515e9 100644
--- a/src/library/SubscanButton/index.tsx
+++ b/src/library/SubscanButton/index.tsx
@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useApi } from 'contexts/Api';
 import { useTheme } from 'contexts/Themes';
 import { useUi } from 'contexts/UI';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { defaultThemes, networkColors } from 'theme/default';
 import { WrapperProps } from './types';
 
diff --git a/src/library/Tips/Wrappers.ts b/src/library/Tips/Wrappers.ts
index d9c0014780..bb43d73b55 100644
--- a/src/library/Tips/Wrappers.ts
+++ b/src/library/Tips/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { helpButton, textPrimary, textSecondary } from 'theme';
 
 export const TipWrapper = styled(motion.div)`
diff --git a/src/library/Tooltip/Wrapper.ts b/src/library/Tooltip/Wrapper.ts
index a749509778..936c769077 100644
--- a/src/library/Tooltip/Wrapper.ts
+++ b/src/library/Tooltip/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textInvert, tooltipBackground } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/AccountPoolRoles/Wrappers.ts b/src/modals/AccountPoolRoles/Wrappers.ts
index 5e41493bb2..360cab6f9c 100644
--- a/src/modals/AccountPoolRoles/Wrappers.ts
+++ b/src/modals/AccountPoolRoles/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundSecondary,
   backgroundToggle,
diff --git a/src/modals/Bio/Wrapper.ts b/src/modals/Bio/Wrapper.ts
index 9dabeed715..d8c4fcfcca 100644
--- a/src/modals/Bio/Wrapper.ts
+++ b/src/modals/Bio/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textPrimary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/ChangePoolRoles/Wrapper.ts b/src/modals/ChangePoolRoles/Wrapper.ts
index e35c90c006..a99614dc2c 100644
--- a/src/modals/ChangePoolRoles/Wrapper.ts
+++ b/src/modals/ChangePoolRoles/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/ConnectAccounts/ReadOnly/Wrapper.ts b/src/modals/ConnectAccounts/ReadOnly/Wrapper.ts
index efdf8d2ced..efe7c68bb4 100644
--- a/src/modals/ConnectAccounts/ReadOnly/Wrapper.ts
+++ b/src/modals/ConnectAccounts/ReadOnly/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   borderSecondary,
diff --git a/src/modals/ConnectAccounts/ReadOnlyInput/Wrapper.ts b/src/modals/ConnectAccounts/ReadOnlyInput/Wrapper.ts
index 77ab4ac652..4b4cbd16d1 100644
--- a/src/modals/ConnectAccounts/ReadOnlyInput/Wrapper.ts
+++ b/src/modals/ConnectAccounts/ReadOnlyInput/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textDanger, textSecondary, textSuccess } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/ConnectAccounts/Wrappers.ts b/src/modals/ConnectAccounts/Wrappers.ts
index 8673cc2c57..799df39415 100644
--- a/src/modals/ConnectAccounts/Wrappers.ts
+++ b/src/modals/ConnectAccounts/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundToggle,
   borderPrimary,
diff --git a/src/modals/JoinPool/Wrapper.ts b/src/modals/JoinPool/Wrapper.ts
index 8694a143dc..00d157ccba 100644
--- a/src/modals/JoinPool/Wrapper.ts
+++ b/src/modals/JoinPool/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const ContentWrapper = styled.div`
   width: 100%;
diff --git a/src/modals/LeavePool/Wrapper.ts b/src/modals/LeavePool/Wrapper.ts
index 8694a143dc..00d157ccba 100644
--- a/src/modals/LeavePool/Wrapper.ts
+++ b/src/modals/LeavePool/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const ContentWrapper = styled.div`
   width: 100%;
diff --git a/src/modals/ManagePool/Wrappers.ts b/src/modals/ManagePool/Wrappers.ts
index ff71fc3170..7de69ff72f 100644
--- a/src/modals/ManagePool/Wrappers.ts
+++ b/src/modals/ManagePool/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundToggle, buttonPrimaryBackground, textPrimary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/Networks/Wrapper.ts b/src/modals/Networks/Wrapper.ts
index 36f5a8fef7..b6de8f02f2 100644
--- a/src/modals/Networks/Wrapper.ts
+++ b/src/modals/Networks/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundToggle,
   borderPrimary,
diff --git a/src/modals/NominateFromFavorites/Wrappers.ts b/src/modals/NominateFromFavorites/Wrappers.ts
index 5692daea1a..a9162c7aad 100644
--- a/src/modals/NominateFromFavorites/Wrappers.ts
+++ b/src/modals/NominateFromFavorites/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { networkColor, textSecondary } from 'theme';
 
 export const ListWrapper = styled.div`
diff --git a/src/modals/PoolNominations/Wrappers.ts b/src/modals/PoolNominations/Wrappers.ts
index 5692daea1a..a9162c7aad 100644
--- a/src/modals/PoolNominations/Wrappers.ts
+++ b/src/modals/PoolNominations/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { networkColor, textSecondary } from 'theme';
 
 export const ListWrapper = styled.div`
diff --git a/src/modals/SelectFavorites/Wrappers.ts b/src/modals/SelectFavorites/Wrappers.ts
index 559575732e..df10b04c6a 100644
--- a/src/modals/SelectFavorites/Wrappers.ts
+++ b/src/modals/SelectFavorites/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { networkColor, textSecondary } from 'theme';
 
 export const ListWrapper = styled.div`
diff --git a/src/modals/UnlockChunks/Wrappers.ts b/src/modals/UnlockChunks/Wrappers.ts
index 81a7b744fd..ddc4968a24 100644
--- a/src/modals/UnlockChunks/Wrappers.ts
+++ b/src/modals/UnlockChunks/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { buttonPrimaryBackground, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/UpdateBond/Wrappers.ts b/src/modals/UpdateBond/Wrappers.ts
index 8c03217174..a8ff5b4780 100644
--- a/src/modals/UpdateBond/Wrappers.ts
+++ b/src/modals/UpdateBond/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundToggle, buttonPrimaryBackground, textPrimary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/modals/UpdateController/Wrapper.ts b/src/modals/UpdateController/Wrapper.ts
index ea69b145b9..ea34cdc37b 100644
--- a/src/modals/UpdateController/Wrapper.ts
+++ b/src/modals/UpdateController/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   display: flex;
diff --git a/src/modals/Wrappers.ts b/src/modals/Wrappers.ts
index 4a67829378..17a3970c79 100644
--- a/src/modals/Wrappers.ts
+++ b/src/modals/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   cardBorder,
diff --git a/src/pages/Community/Wrappers.ts b/src/pages/Community/Wrappers.ts
index 022c22db50..f40366e96e 100644
--- a/src/pages/Community/Wrappers.ts
+++ b/src/pages/Community/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   backgroundSecondary,
diff --git a/src/pages/Feedback/Wrappers.ts b/src/pages/Feedback/Wrappers.ts
index c94710cdc0..c19e3528cb 100644
--- a/src/pages/Feedback/Wrappers.ts
+++ b/src/pages/Feedback/Wrappers.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/pages/Nominate/Active/Controller/Wrapper.ts b/src/pages/Nominate/Active/Controller/Wrapper.ts
index 61a0742d5d..179a9feaaf 100644
--- a/src/pages/Nominate/Active/Controller/Wrapper.ts
+++ b/src/pages/Nominate/Active/Controller/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 interface WrapperProps {
   paddingLeft: boolean;
diff --git a/src/pages/Nominate/Active/Nominations/Wrapper.tsx b/src/pages/Nominate/Active/Nominations/Wrapper.tsx
index b17ab85fb0..ef20af8399 100644
--- a/src/pages/Nominate/Active/Nominations/Wrapper.tsx
+++ b/src/pages/Nominate/Active/Nominations/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   flex: 1;
diff --git a/src/pages/Nominate/Setup/Payee/Wrappers.tsx b/src/pages/Nominate/Setup/Payee/Wrappers.tsx
index 5d0afb628c..1adbe5a6dc 100644
--- a/src/pages/Nominate/Setup/Payee/Wrappers.tsx
+++ b/src/pages/Nominate/Setup/Payee/Wrappers.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SectionFullWidthThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   buttonPrimaryBackground,
diff --git a/src/pages/Nominate/Setup/Summary/Wrapper.tsx b/src/pages/Nominate/Setup/Summary/Wrapper.tsx
index 55a444ef5e..d578697d8c 100644
--- a/src/pages/Nominate/Setup/Summary/Wrapper.tsx
+++ b/src/pages/Nominate/Setup/Summary/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, networkColor, textSecondary } from 'theme';
 
 export const SummaryWrapper = styled.div`
diff --git a/src/pages/Nominate/Wrappers.tsx b/src/pages/Nominate/Wrappers.tsx
index 78f9f136eb..db69c3abd7 100644
--- a/src/pages/Nominate/Wrappers.tsx
+++ b/src/pages/Nominate/Wrappers.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/pages/Overview/NetworkSats/Wrappers.ts b/src/pages/Overview/NetworkSats/Wrappers.ts
index 834cca5eaa..72e2997782 100644
--- a/src/pages/Overview/NetworkSats/Wrappers.ts
+++ b/src/pages/Overview/NetworkSats/Wrappers.ts
@@ -3,7 +3,7 @@
 
 import { SmallFontSizeMaxWidth } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`
diff --git a/src/pages/Overview/Tips/Wrappers.tsx b/src/pages/Overview/Tips/Wrappers.tsx
index 3561507d85..9e6416ea84 100644
--- a/src/pages/Overview/Tips/Wrappers.tsx
+++ b/src/pages/Overview/Tips/Wrappers.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundLabel,
   networkColor,
diff --git a/src/pages/Overview/Wrappers.ts b/src/pages/Overview/Wrappers.ts
index b7d4e01252..561a85145b 100644
--- a/src/pages/Overview/Wrappers.ts
+++ b/src/pages/Overview/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { MediumFontSizeMaxWidth, SmallFontSizeMaxWidth } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   borderSecondary,
diff --git a/src/pages/Payouts/Wrappers.ts b/src/pages/Payouts/Wrappers.ts
index f6d90e4fcc..2e718528ec 100644
--- a/src/pages/Payouts/Wrappers.ts
+++ b/src/pages/Payouts/Wrappers.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   borderPrimary,
diff --git a/src/pages/Pools/Create/Summary/Wrapper.ts b/src/pages/Pools/Create/Summary/Wrapper.ts
index 55a444ef5e..d578697d8c 100644
--- a/src/pages/Pools/Create/Summary/Wrapper.ts
+++ b/src/pages/Pools/Create/Summary/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, networkColor, textSecondary } from 'theme';
 
 export const SummaryWrapper = styled.div`
diff --git a/src/pages/Pools/Home/ManagePool/Wrappers.tsx b/src/pages/Pools/Home/ManagePool/Wrappers.tsx
index b9e1e688c7..4ca93e92ea 100644
--- a/src/pages/Pools/Home/ManagePool/Wrappers.tsx
+++ b/src/pages/Pools/Home/ManagePool/Wrappers.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SectionFullWidthThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary } from 'theme';
 
 export const RolesWrapper = styled.div`
diff --git a/src/pages/Pools/Home/PoolStats/Wrappers.ts b/src/pages/Pools/Home/PoolStats/Wrappers.ts
index 2ffe5e915e..109c39e31f 100644
--- a/src/pages/Pools/Home/PoolStats/Wrappers.ts
+++ b/src/pages/Pools/Home/PoolStats/Wrappers.ts
@@ -3,7 +3,7 @@
 
 import { SmallFontSizeMaxWidth } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   networkColor,
diff --git a/src/pages/Pools/Home/Status/Membership/Wrapper.ts b/src/pages/Pools/Home/Status/Membership/Wrapper.ts
index ff20c16876..9443a76d08 100644
--- a/src/pages/Pools/Home/Status/Membership/Wrapper.ts
+++ b/src/pages/Pools/Home/Status/Membership/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 interface WrapperProps {
   paddingLeft: boolean;
diff --git a/src/pages/Pools/PoolAccount/Wrapper.tsx b/src/pages/Pools/PoolAccount/Wrapper.tsx
index 9d04e4de23..dad9863d6a 100644
--- a/src/pages/Pools/PoolAccount/Wrapper.tsx
+++ b/src/pages/Pools/PoolAccount/Wrapper.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textPrimary, textSecondary } from 'theme';
 
 export const Wrapper = styled.div<{ last?: boolean }>`
diff --git a/src/pages/Pools/Roles/RoleEditInput/Wrapper.ts b/src/pages/Pools/Roles/RoleEditInput/Wrapper.ts
index 77ab4ac652..4b4cbd16d1 100644
--- a/src/pages/Pools/Roles/RoleEditInput/Wrapper.ts
+++ b/src/pages/Pools/Roles/RoleEditInput/Wrapper.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textDanger, textSecondary, textSuccess } from 'theme';
 
 export const Wrapper = styled.div`