diff --git a/CHANGELOG.md b/CHANGELOG.md
index 528a63dd4..387f9aef2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
+## [[v2.24.4]](https://github.com/multiversx/mx-sdk-dapp/pull/983)] - 2023-12-11
+- [Add entire dappConfig into redux store](https://github.com/multiversx/mx-sdk-dapp/pull/982)
+- [Fix CSS injection on SSR/Client side](https://github.com/multiversx/mx-sdk-dapp/pull/981)
 ## [[v2.24.3]](https://github.com/multiversx/mx-sdk-dapp/pull/979)] - 2023-11-29
 
 - [Removed `senderUsername` and `receiverUsername` for `SetGuardian` tx](https://github.com/multiversx/mx-sdk-dapp/pull/978)
diff --git a/package.json b/package.json
index cc8f5f25b..bd4d4e93a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.24.3",
+  "version": "2.24.4",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
diff --git a/src/UI/CopyButton/CopyButton.tsx b/src/UI/CopyButton/CopyButton.tsx
index de1069cbc..cff2218d4 100644
--- a/src/UI/CopyButton/CopyButton.tsx
+++ b/src/UI/CopyButton/CopyButton.tsx
@@ -60,5 +60,6 @@ const CopyButtonComponent = ({
 };
 
 export const CopyButton = withStyles(CopyButtonComponent, {
-  local: () => import('UI/CopyButton/copyButton.styles.scss')
+  ssrStyles: () => import('UI/CopyButton/copyButton.styles.scss'),
+  clientStyles: () => require('UI/CopyButton/copyButton.styles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModal.tsx b/src/UI/DappModal/components/DappModal.tsx
index 1b13c8a4c..2fa02a407 100644
--- a/src/UI/DappModal/components/DappModal.tsx
+++ b/src/UI/DappModal/components/DappModal.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
+import { useState } from 'react';
+import { useEffect } from 'react';
 import classNames from 'classnames';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { DataTestIdsEnum } from 'constants/index';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { WithClassnameType } from '../../types';
@@ -36,6 +38,12 @@ const DappModalComponent = ({
   visible,
   styles
 }: DappModalPropsType & WithStylesImportType) => {
+  const [isBrowser, setIsBrowser] = useState(false);
+
+  useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+
   if (!visible) {
     return null;
   }
@@ -56,41 +64,56 @@ const DappModalComponent = ({
     customModalFooter
   } = config;
 
-  return ReactDOM.createPortal(
-    <div
-      id={id}
-      role='dialog'
-      aria-modal='true'
-      className={classNames(modalDialogClassName, styles?.dappModal, className)}
-      data-testid={dataTestId}
-    >
-      <div
-        className={classNames(styles?.dappModalContent, modalContentClassName)}
-      >
-        <DappModalHeader
-          visible={showHeader}
-          headerText={headerText}
-          customHeader={customModalHeader}
-          className={modalHeaderClassName}
-          headerTextClassName={modalHeaderTextClassName}
-          closeButtonClassName={modalCloseButtonClassName}
-          onHide={onHide}
-        />
+  return (
+    <>
+      {isBrowser &&
+        createPortal(
+          <div
+            id={id}
+            role='dialog'
+            aria-modal='true'
+            className={classNames(
+              modalDialogClassName,
+              styles?.dappModal,
+              className
+            )}
+            data-testid={dataTestId}
+          >
+            <div
+              className={classNames(
+                styles?.dappModalContent,
+                modalContentClassName
+              )}
+            >
+              <DappModalHeader
+                visible={showHeader}
+                headerText={headerText}
+                customHeader={customModalHeader}
+                className={modalHeaderClassName}
+                headerTextClassName={modalHeaderTextClassName}
+                closeButtonClassName={modalCloseButtonClassName}
+                onHide={onHide}
+              />
 
-        <DappModalBody className={modalBodyClassName}>{children}</DappModalBody>
+              <DappModalBody className={modalBodyClassName}>
+                {children}
+              </DappModalBody>
 
-        <DappModalFooter
-          visible={showFooter}
-          customFooter={customModalFooter}
-          footerText={footerText}
-          className={modalFooterClassName}
-        />
-      </div>
-    </div>,
-    parentElement ?? document?.body
+              <DappModalFooter
+                visible={showFooter}
+                customFooter={customModalFooter}
+                footerText={footerText}
+                className={modalFooterClassName}
+              />
+            </div>
+          </div>,
+          parentElement ?? document?.body
+        )}
+    </>
   );
 };
 
 export const DappModal = withStyles(DappModalComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalBody.tsx b/src/UI/DappModal/components/DappModalBody.tsx
index 48881abfe..34793839a 100644
--- a/src/UI/DappModal/components/DappModalBody.tsx
+++ b/src/UI/DappModal/components/DappModalBody.tsx
@@ -20,5 +20,6 @@ const DappModalBodyComponent = ({
 };
 
 export const DappModalBody = withStyles(DappModalBodyComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalFooter.tsx b/src/UI/DappModal/components/DappModalFooter.tsx
index 681425da2..800561f8c 100644
--- a/src/UI/DappModal/components/DappModalFooter.tsx
+++ b/src/UI/DappModal/components/DappModalFooter.tsx
@@ -28,5 +28,6 @@ const DappModalFooterComponent = ({
 };
 
 export const DappModalFooter = withStyles(DappModalFooterComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/DappModal/components/DappModalHeader.tsx b/src/UI/DappModal/components/DappModalHeader.tsx
index 755c778b7..327b820b3 100644
--- a/src/UI/DappModal/components/DappModalHeader.tsx
+++ b/src/UI/DappModal/components/DappModalHeader.tsx
@@ -57,5 +57,6 @@ const DappModalHeaderComponent = ({
 };
 
 export const DappModalHeader = withStyles(DappModalHeaderComponent, {
-  local: () => import('UI/DappModal/dappModalStyles.scss')
+  ssrStyles: () => import('UI/DappModal/dappModalStyles.scss'),
+  clientStyles: () => require('UI/DappModal/dappModalStyles.scss').default
 });
diff --git a/src/UI/ExplorerLink/ExplorerLink.tsx b/src/UI/ExplorerLink/ExplorerLink.tsx
index 080dc8275..70ee6e146 100644
--- a/src/UI/ExplorerLink/ExplorerLink.tsx
+++ b/src/UI/ExplorerLink/ExplorerLink.tsx
@@ -56,5 +56,6 @@ const ExplorerLinkComponent = ({
 };
 
 export const ExplorerLink = withStyles(ExplorerLinkComponent, {
-  local: () => import('UI/ExplorerLink/explorerLinkStyles.scss')
+  ssrStyles: () => import('UI/ExplorerLink/explorerLinkStyles.scss'),
+  clientStyles: () => require('UI/ExplorerLink/explorerLinkStyles.scss').default
 });
diff --git a/src/UI/FormatAmount/FormatAmount.tsx b/src/UI/FormatAmount/FormatAmount.tsx
index f78c430cb..7ca27af5d 100644
--- a/src/UI/FormatAmount/FormatAmount.tsx
+++ b/src/UI/FormatAmount/FormatAmount.tsx
@@ -129,5 +129,6 @@ const FormatAmountWrapper = (
 };
 
 export const FormatAmount = withStyles(FormatAmountWrapper, {
-  local: () => import('UI/FormatAmount/formatAmountStyles.scss')
+  ssrStyles: () => import('UI/FormatAmount/formatAmountStyles.scss'),
+  clientStyles: () => require('UI/FormatAmount/formatAmountStyles.scss').default
 });
diff --git a/src/UI/LoadingDots/LoadingDots.tsx b/src/UI/LoadingDots/LoadingDots.tsx
index 89f29a68d..44aac73b8 100644
--- a/src/UI/LoadingDots/LoadingDots.tsx
+++ b/src/UI/LoadingDots/LoadingDots.tsx
@@ -23,5 +23,6 @@ const LoadingDotsComponent = ({
 );
 
 export const LoadingDots = withStyles(LoadingDotsComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/LoginButton/LoginButton.tsx b/src/UI/LoginButton/LoginButton.tsx
index e8180cf72..8ee24fc7d 100644
--- a/src/UI/LoginButton/LoginButton.tsx
+++ b/src/UI/LoginButton/LoginButton.tsx
@@ -54,5 +54,6 @@ const LoginButtonComponent = ({
 };
 
 export const LoginButton = withStyles(LoginButtonComponent, {
-  local: () => import('UI/LoginButton/loginButtonStyles.scss')
+  ssrStyles: () => import('UI/LoginButton/loginButtonStyles.scss'),
+  clientStyles: () => require('UI/LoginButton/loginButtonStyles.scss').default
 });
diff --git a/src/UI/LoginButton/index.ts b/src/UI/LoginButton/index.ts
new file mode 100644
index 000000000..076da3b46
--- /dev/null
+++ b/src/UI/LoginButton/index.ts
@@ -0,0 +1 @@
+export * from './LoginButton';
diff --git a/src/UI/PageState/PageState.tsx b/src/UI/PageState/PageState.tsx
index abd0eb8f8..9dc5ff34c 100644
--- a/src/UI/PageState/PageState.tsx
+++ b/src/UI/PageState/PageState.tsx
@@ -71,5 +71,6 @@ const PageStateComponent = ({
 };
 
 export const PageState = withStyles(PageStateComponent, {
-  local: () => import('UI/PageState/pageState.styles.scss')
+  ssrStyles: () => import('UI/PageState/pageState.styles.scss'),
+  clientStyles: () => require('UI/PageState/pageState.styles.scss').default
 });
diff --git a/src/UI/Progress/index.tsx b/src/UI/Progress/index.tsx
index bfa4cd1c7..689e4578b 100644
--- a/src/UI/Progress/index.tsx
+++ b/src/UI/Progress/index.tsx
@@ -186,5 +186,6 @@ const ProgressComponent = ({
 };
 
 export const Progress = withStyles(ProgressComponent, {
-  local: () => import('UI/Progress/progressStyles.scss')
+  ssrStyles: () => import('UI/Progress/progressStyles.scss'),
+  clientStyles: () => require('UI/Progress/progressStyles.scss').default
 });
diff --git a/src/UI/ProgressSteps/Dot.tsx b/src/UI/ProgressSteps/Dot.tsx
index c09b4ec92..e1cc0675d 100644
--- a/src/UI/ProgressSteps/Dot.tsx
+++ b/src/UI/ProgressSteps/Dot.tsx
@@ -21,5 +21,6 @@ const DotComponent = ({
 );
 
 export const Dot = withStyles(DotComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/ProgressSteps/index.tsx b/src/UI/ProgressSteps/index.tsx
index 1b79384fe..5fdda5389 100644
--- a/src/UI/ProgressSteps/index.tsx
+++ b/src/UI/ProgressSteps/index.tsx
@@ -66,5 +66,6 @@ const ProgressStepsComponent = ({
 };
 
 export const ProgressSteps = withStyles(ProgressStepsComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
diff --git a/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx b/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx
index 51d1a8492..1928013a1 100644
--- a/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx
+++ b/src/UI/ScamPhishingAlert/ScamPhishingAlert.tsx
@@ -77,5 +77,7 @@ const ScamPhishingAlertComponent = (
 };
 
 export const ScamPhishingAlert = withStyles(ScamPhishingAlertComponent, {
-  local: () => import('UI/ScamPhishingAlert/scamPhishingStyles.scss')
+  ssrStyles: () => import('UI/ScamPhishingAlert/scamPhishingStyles.scss'),
+  clientStyles: () =>
+    require('UI/ScamPhishingAlert/scamPhishingStyles.scss').default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx
index 80cca2a91..8c192a027 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx
@@ -225,8 +225,11 @@ const SignStepComponent = (props: SignStepType & WithStylesImportType) => {
 };
 
 export const SignStep = withStyles(SignStepComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx
index 1110aac83..4e0e248ec 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx
@@ -79,8 +79,11 @@ const SignWithDeviceModalComponent = ({
 };
 
 export const SignWithDeviceModal = withStyles(SignWithDeviceModalComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx
index dbbd8161d..f6838c1ed 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/ProgressHeader.tsx
@@ -75,8 +75,11 @@ const ProgressHeaderComponent = (
 };
 
 export const ProgressHeader = withStyles(ProgressHeaderComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/progressHeaderStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/ProgressHeader/progressHeaderStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx
index e346b104d..89376fcee 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/SignStepBody.tsx
@@ -186,8 +186,11 @@ const SignStepBodyComponent = ({
 };
 
 export const SignStepBody = withStyles(SignStepBodyComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/signStepBodyStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/signStepBodyStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
index 1f9534a9a..fd07d121a 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
@@ -56,8 +56,11 @@ const ConfirmAmountComponent = ({
 };
 
 export const ConfirmAmount = withStyles(ConfirmAmountComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/confirmAmountStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/confirmAmountStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx
index 27c2a2616..eba0d2a61 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx
@@ -67,8 +67,11 @@ const ConfirmFeeComponent = ({
 };
 
 export const ConfirmFee = withStyles(ConfirmFeeComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/confirmFeeStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/confirmFeeStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx
index 6278ecadf..9b3389e2f 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx
@@ -84,8 +84,11 @@ const ConfirmReceiverComponent = ({
 };
 
 export const ConfirmReceiver = withStyles(ConfirmReceiverComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/confirmReceiverStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/confirmReceiverStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx
index d88a3f75c..33fa7c297 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/ReceiverSubValue.tsx
@@ -53,8 +53,11 @@ const ReceiverSubValueComponent = ({
 };
 
 export const ReceiverSubValue = withStyles(ReceiverSubValueComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/receiverSubValueStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverSubValue/receiverSubValueStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx
index d49514afd..5533c15f8 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/ReceiverValue.tsx
@@ -46,8 +46,11 @@ const ReceiverValueComponent = ({
 };
 
 export const ReceiverValue = withStyles(ReceiverValueComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/receiverValueStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/components/ReceiverValue/receiverValueStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx
index 670e13994..4fd059f2b 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.tsx
@@ -71,8 +71,11 @@ export const NftSftPreview = ({
 };
 
 export const NftSftPreviewComponent = withStyles(NftSftPreview, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/NftSftPreviewComponent/NftSftPreviewComponent.styles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx
index 03c0ffafd..14fcc304e 100644
--- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx
+++ b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/TokenAvatar.tsx
@@ -49,8 +49,11 @@ const TokenAvatarComponent = (
 };
 
 export const TokenAvatar = withStyles(TokenAvatarComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/tokenAvatarStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithDeviceModal/components/components/TokenAvatar/tokenAvatarStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx b/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx
index 2f64f9d54..f0feb6725 100644
--- a/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx
+++ b/src/UI/SignTransactionsModals/SignWithOperaModal/SignWithOperaModal.tsx
@@ -77,8 +77,11 @@ const SignWithOperaModalComponent = ({
 };
 
 export const SignWithOperaModal = withStyles(SignWithOperaModalComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/SignTransactionsModals/SignWithOperaModal/signWithOperaModalStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/SignTransactionsModals/SignWithOperaModal/signWithOperaModalStyles.scss')
+      .default
 });
diff --git a/src/UI/SignTransactionsModals/SignWithWalletConnectModal/SignWithWalletConnectModal.tsx b/src/UI/SignTransactionsModals/SignWithWalletConnectModal/SignWithWalletConnectModal.tsx
index 9f3c31168..72cdf86a2 100644
--- a/src/UI/SignTransactionsModals/SignWithWalletConnectModal/SignWithWalletConnectModal.tsx
+++ b/src/UI/SignTransactionsModals/SignWithWalletConnectModal/SignWithWalletConnectModal.tsx
@@ -106,9 +106,12 @@ const SignWithWalletConnectModalComponent = ({
 export const SignWithWalletConnectModal = withStyles(
   SignWithWalletConnectModalComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/SignTransactionsModals/SignWithWalletConnectModal/signWithWalletConnectModalStyles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/SignTransactionsModals/SignWithWalletConnectModal/signWithWalletConnectModalStyles.scss')
+        .default
   }
 );
diff --git a/src/UI/SignTransactionsModals/components/SignWaitingScreenModal/SignWaitingScreenModal.tsx b/src/UI/SignTransactionsModals/components/SignWaitingScreenModal/SignWaitingScreenModal.tsx
index 10bd48dc6..5491645b3 100644
--- a/src/UI/SignTransactionsModals/components/SignWaitingScreenModal/SignWaitingScreenModal.tsx
+++ b/src/UI/SignTransactionsModals/components/SignWaitingScreenModal/SignWaitingScreenModal.tsx
@@ -79,9 +79,12 @@ const SignWaitingScreenModalComponent = ({
 export const SignWaitingScreenModal = withStyles(
   SignWaitingScreenModalComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/SignTransactionsModals/components/SignWaitingScreenModal/signWaitingScreenModal.styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/SignTransactionsModals/components/SignWaitingScreenModal/signWaitingScreenModal.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TimeAgo/TimeAgo.tsx b/src/UI/TimeAgo/TimeAgo.tsx
index 0f2739799..4ce8c4746 100644
--- a/src/UI/TimeAgo/TimeAgo.tsx
+++ b/src/UI/TimeAgo/TimeAgo.tsx
@@ -36,6 +36,9 @@ const TimeAgoComponent = ({
 };
 
 export const TimeAgo = withStyles(TimeAgoComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TokenDetails/TokenSymbol/index.tsx b/src/UI/TokenDetails/TokenSymbol/index.tsx
index 79f8de39f..9db06953a 100644
--- a/src/UI/TokenDetails/TokenSymbol/index.tsx
+++ b/src/UI/TokenDetails/TokenSymbol/index.tsx
@@ -42,9 +42,13 @@ const CombinedComponent = ({
 );
 
 export const Simple = withStyles(SimpleComponent, {
-  local: () => import('UI/TokenDetails/TokenSymbol/tokenSymbol.scss')
+  ssrStyles: () => import('UI/TokenDetails/TokenSymbol/tokenSymbol.scss'),
+  clientStyles: () =>
+    require('UI/TokenDetails/TokenSymbol/tokenSymbol.scss').default
 });
 
 export const Combined = withStyles(CombinedComponent, {
-  local: () => import('UI/TokenDetails/TokenSymbol/tokenSymbol.scss')
+  ssrStyles: () => import('UI/TokenDetails/TokenSymbol/tokenSymbol.scss'),
+  clientStyles: () =>
+    require('UI/TokenDetails/TokenSymbol/tokenSymbol.scss').default
 });
diff --git a/src/UI/TokenDetails/index.tsx b/src/UI/TokenDetails/index.tsx
index 1c0181ef7..2208f5e8f 100644
--- a/src/UI/TokenDetails/index.tsx
+++ b/src/UI/TokenDetails/index.tsx
@@ -44,7 +44,8 @@ function getIconComponent({
 }
 
 const getIcon = withStyles(getIconComponent, {
-  local: () => import('UI/TokenDetails/tokenDetailsStyles.scss')
+  ssrStyles: () => import('UI/TokenDetails/tokenDetailsStyles.scss'),
+  clientStyles: () => require('UI/TokenDetails/tokenDetailsStyles.scss').default
 });
 
 const getDetails = (token: string, tokenAvatar?: string): TokenIconType => {
diff --git a/src/UI/TransactionData/TransactionData.tsx b/src/UI/TransactionData/TransactionData.tsx
index 89e06c416..f0a2b588f 100644
--- a/src/UI/TransactionData/TransactionData.tsx
+++ b/src/UI/TransactionData/TransactionData.tsx
@@ -144,5 +144,7 @@ const TransactionDataComponent = ({
 };
 
 export const TransactionData = withStyles(TransactionDataComponent, {
-  local: () => import('UI/TransactionData/TransactionDataStyles.scss')
+  ssrStyles: () => import('UI/TransactionData/TransactionDataStyles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionData/TransactionDataStyles.scss').default
 });
diff --git a/src/UI/TransactionDetails/TransactionDetails.tsx b/src/UI/TransactionDetails/TransactionDetails.tsx
index cbc35deca..e1b82d604 100644
--- a/src/UI/TransactionDetails/TransactionDetails.tsx
+++ b/src/UI/TransactionDetails/TransactionDetails.tsx
@@ -63,5 +63,8 @@ const TransactionDetailsComponent = ({
 };
 
 export const TransactionDetails = withStyles(TransactionDetailsComponent, {
-  local: () => import('UI/TransactionDetails/transactionDetails.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionDetails/transactionDetails.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionDetails/transactionDetails.styles.scss').default
 });
diff --git a/src/UI/TransactionDetails/components/TransactionDetailsBody.tsx b/src/UI/TransactionDetails/components/TransactionDetailsBody.tsx
index 6cf29fe53..d521f6946 100644
--- a/src/UI/TransactionDetails/components/TransactionDetailsBody.tsx
+++ b/src/UI/TransactionDetails/components/TransactionDetailsBody.tsx
@@ -89,6 +89,9 @@ const TransactionDetailsBodyComponent = ({
 export const TransactionDetailsBody = withStyles(
   TransactionDetailsBodyComponent,
   {
-    local: () => import('UI/TransactionDetails/transactionDetails.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionDetails/transactionDetails.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionDetails/transactionDetails.styles.scss').default
   }
 );
diff --git a/src/UI/TransactionInfo/components/AddressDetailItem/AddressDetailitem.tsx b/src/UI/TransactionInfo/components/AddressDetailItem/AddressDetailitem.tsx
index 8a4127d92..be3903ed4 100644
--- a/src/UI/TransactionInfo/components/AddressDetailItem/AddressDetailitem.tsx
+++ b/src/UI/TransactionInfo/components/AddressDetailItem/AddressDetailitem.tsx
@@ -33,6 +33,9 @@ const AddressDetailItemComponent = ({
 );
 
 export const AddressDetailItem = withStyles(AddressDetailItemComponent, {
-  local: () =>
-    import('UI/TransactionInfo/components/AddressDetailItem/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/AddressDetailItem/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/AddressDetailItem/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/DataDecode/DataDecode.tsx b/src/UI/TransactionInfo/components/DataDecode/DataDecode.tsx
index 98b8de573..5e74c727c 100644
--- a/src/UI/TransactionInfo/components/DataDecode/DataDecode.tsx
+++ b/src/UI/TransactionInfo/components/DataDecode/DataDecode.tsx
@@ -59,5 +59,8 @@ const DataDecodeComponent = (
 };
 
 export const DataDecode = withStyles(DataDecodeComponent, {
-  local: () => import('UI/TransactionInfo/components/DataDecode/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/DataDecode/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/DataDecode/styles.scss').default
 });
diff --git a/src/UI/TransactionInfo/components/DataField/DataField.tsx b/src/UI/TransactionInfo/components/DataField/DataField.tsx
index e31f3d624..0cca2233f 100644
--- a/src/UI/TransactionInfo/components/DataField/DataField.tsx
+++ b/src/UI/TransactionInfo/components/DataField/DataField.tsx
@@ -76,6 +76,9 @@ const DataFieldComponent = ({
 };
 
 export const DataField = withStyles(DataFieldComponent, {
-  local: () =>
-    import('UI/TransactionInfo/components/DataField/dataField.module.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/DataField/dataField.module.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/DataField/dataField.module.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/DetailItem/index.tsx b/src/UI/TransactionInfo/components/DetailItem/index.tsx
index 834c39a40..726ba4c20 100644
--- a/src/UI/TransactionInfo/components/DetailItem/index.tsx
+++ b/src/UI/TransactionInfo/components/DetailItem/index.tsx
@@ -50,6 +50,9 @@ const DetailItemComponent = ({
 );
 
 export const DetailItem = withStyles(DetailItemComponent, {
-  local: () =>
-    import('UI/TransactionInfo/components/DetailItem/detailItem.module.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/DetailItem/detailItem.module.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/DetailItem/detailItem.module.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/EventsList/EventsList.tsx b/src/UI/TransactionInfo/components/EventsList/EventsList.tsx
index 5d4466121..28fde8880 100644
--- a/src/UI/TransactionInfo/components/EventsList/EventsList.tsx
+++ b/src/UI/TransactionInfo/components/EventsList/EventsList.tsx
@@ -143,5 +143,8 @@ const EventsListComponent = ({
 };
 
 export const EventsList = withStyles(EventsListComponent, {
-  local: () => import('UI/TransactionInfo/components/EventsList/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/EventsList/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/EventsList/styles.scss').default
 });
diff --git a/src/UI/TransactionInfo/components/OperationsList/components/OperationBlock.tsx b/src/UI/TransactionInfo/components/OperationsList/components/OperationBlock.tsx
index acbbea7f4..ee7db4937 100644
--- a/src/UI/TransactionInfo/components/OperationsList/components/OperationBlock.tsx
+++ b/src/UI/TransactionInfo/components/OperationsList/components/OperationBlock.tsx
@@ -96,6 +96,8 @@ const OperationBlockComponent = ({
 };
 
 export const OperationBlock = withStyles(OperationBlockComponent, {
-  local: () =>
-    import('UI/TransactionInfo/components/OperationsList/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/OperationsList/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/OperationsList/styles.scss').default
 });
diff --git a/src/UI/TransactionInfo/components/ScResultsList/ScResultsList.tsx b/src/UI/TransactionInfo/components/ScResultsList/ScResultsList.tsx
index 2a787aa11..18e9f09e5 100644
--- a/src/UI/TransactionInfo/components/ScResultsList/ScResultsList.tsx
+++ b/src/UI/TransactionInfo/components/ScResultsList/ScResultsList.tsx
@@ -113,5 +113,8 @@ const ScResultsListComponent = ({
 };
 
 export const ScResultsList = withStyles(ScResultsListComponent, {
-  local: () => import('UI/TransactionInfo/components/ScResultsList/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/ScResultsList/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/ScResultsList/styles.scss').default
 });
diff --git a/src/UI/TransactionInfo/components/ScResultsList/components/ResultHash/ResultHash.tsx b/src/UI/TransactionInfo/components/ScResultsList/components/ResultHash/ResultHash.tsx
index b767097fc..a0cc3f350 100644
--- a/src/UI/TransactionInfo/components/ScResultsList/components/ResultHash/ResultHash.tsx
+++ b/src/UI/TransactionInfo/components/ScResultsList/components/ResultHash/ResultHash.tsx
@@ -31,7 +31,8 @@ const ResultHashComponent = ({
 );
 
 const ResultHash = withStyles(ResultHashComponent, {
-  local: () => import('UI/LoadingDots/loadingDotsStyle.scss')
+  ssrStyles: () => import('UI/LoadingDots/loadingDotsStyle.scss'),
+  clientStyles: () => require('UI/LoadingDots/loadingDotsStyle.scss').default
 });
 
 export default ResultHash;
diff --git a/src/UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/ResultReceiver.tsx b/src/UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/ResultReceiver.tsx
index d8d41781d..1ea9ead05 100644
--- a/src/UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/ResultReceiver.tsx
+++ b/src/UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/ResultReceiver.tsx
@@ -29,10 +29,13 @@ const ResultReceiverComponent = ({
 );
 
 export const ResultReceiver = withStyles(ResultReceiverComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/ScResultsList/components/ResultReceiver/styles.scss')
+      .default
 });
 
 export default ResultReceiver;
diff --git a/src/UI/TransactionInfo/components/ScResultsList/components/ResultSender/ResultSender.tsx b/src/UI/TransactionInfo/components/ScResultsList/components/ResultSender/ResultSender.tsx
index 679ceb9e2..8ea282fb0 100644
--- a/src/UI/TransactionInfo/components/ScResultsList/components/ResultSender/ResultSender.tsx
+++ b/src/UI/TransactionInfo/components/ScResultsList/components/ResultSender/ResultSender.tsx
@@ -29,10 +29,13 @@ const ResultSenderComponent = ({
 );
 
 const ResultSender = withStyles(ResultSenderComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/ScResultsList/components/ResultSender/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/ScResultsList/components/ResultSender/styles.scss')
+      .default
 });
 
 export default ResultSender;
diff --git a/src/UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/ResultWrapper.tsx b/src/UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/ResultWrapper.tsx
index ad81bd09b..0f2ef9a2c 100644
--- a/src/UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/ResultWrapper.tsx
+++ b/src/UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/ResultWrapper.tsx
@@ -25,10 +25,13 @@ const ResultWrapperComponent = ({
 );
 
 const ResultWrapper = withStyles(ResultWrapperComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/ScResultsList/components/ResultWrapper/styles.scss')
+      .default
 });
 
 export default ResultWrapper;
diff --git a/src/UI/TransactionInfo/components/ScrDetailItem/ScrDetailItem.tsx b/src/UI/TransactionInfo/components/ScrDetailItem/ScrDetailItem.tsx
index bd6d41100..dd4a27983 100644
--- a/src/UI/TransactionInfo/components/ScrDetailItem/ScrDetailItem.tsx
+++ b/src/UI/TransactionInfo/components/ScrDetailItem/ScrDetailItem.tsx
@@ -32,5 +32,8 @@ const ScrDetailItemComponent = ({
 );
 
 export const ScrDetailItem = withStyles(ScrDetailItemComponent, {
-  local: () => import('UI/TransactionInfo/components/ScrDetailItem/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/ScrDetailItem/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/ScrDetailItem/styles.scss').default
 });
diff --git a/src/UI/TransactionInfo/components/TransactionAction/TransactionAction.tsx b/src/UI/TransactionInfo/components/TransactionAction/TransactionAction.tsx
index 9ae71e9ee..0a668bc6a 100644
--- a/src/UI/TransactionInfo/components/TransactionAction/TransactionAction.tsx
+++ b/src/UI/TransactionInfo/components/TransactionAction/TransactionAction.tsx
@@ -36,6 +36,9 @@ export const TransactionActionComponent = ({
 };
 
 export const TransactionAction = withStyles(TransactionActionComponent, {
-  local: () =>
-    import('UI/TransactionInfo/components/TransactionAction/styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionInfo/components/TransactionAction/styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/TransactionAction/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/TransactionAction/components/ActionText/index.tsx b/src/UI/TransactionInfo/components/TransactionAction/components/ActionText/index.tsx
index 04ff1fbfc..617a515f0 100644
--- a/src/UI/TransactionInfo/components/TransactionAction/components/ActionText/index.tsx
+++ b/src/UI/TransactionInfo/components/TransactionAction/components/ActionText/index.tsx
@@ -177,8 +177,11 @@ const ActionTextComponent = ({
 };
 
 export const ActionText = withStyles(ActionTextComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/TransactionAction/components/ActionText/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/TransactionAction/components/ActionText/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/TransactionAction/components/ActionToken.tsx b/src/UI/TransactionInfo/components/TransactionAction/components/ActionToken.tsx
index 78fb025f8..5fa07e262 100644
--- a/src/UI/TransactionInfo/components/TransactionAction/components/ActionToken.tsx
+++ b/src/UI/TransactionInfo/components/TransactionAction/components/ActionToken.tsx
@@ -89,8 +89,11 @@ const ActionTokenComponent = ({
 };
 
 export const ActionToken = withStyles(ActionTokenComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/TransactionAction/components/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/TransactionAction/components/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionCollection.tsx b/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionCollection.tsx
index 0be254b7a..657ad06b9 100644
--- a/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionCollection.tsx
+++ b/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionCollection.tsx
@@ -44,9 +44,12 @@ const TransactionActionCollectionComponent = ({
 export const TransactionActionCollection = withStyles(
   TransactionActionCollectionComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionNft.tsx b/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionNft.tsx
index 4b1baaf98..09a56c441 100644
--- a/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionNft.tsx
+++ b/src/UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/components/TransactionActionNft.tsx
@@ -79,8 +79,11 @@ const TransactionActionNftComponent = ({
 };
 
 export const TransactionActionNft = withStyles(TransactionActionNftComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/TransactionAction/components/TransactionActionBlock/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/TransactionInfoEgldPrice.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/TransactionInfoEgldPrice.tsx
index 7e9165257..225256c4c 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/TransactionInfoEgldPrice.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/TransactionInfoEgldPrice.tsx
@@ -25,9 +25,12 @@ const TransactionInfoEgldPriceComponent = ({
 export const TransactionInfoEgldPrice = withStyles(
   TransactionInfoEgldPriceComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoEgldPrice/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/TransactionInfoFee.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/TransactionInfoFee.tsx
index 667c182ab..a70d5bf34 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/TransactionInfoFee.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/TransactionInfoFee.tsx
@@ -57,8 +57,11 @@ const TransactionInfoFeeComponent = ({
 };
 
 export const TransactionInfoFee = withStyles(TransactionInfoFeeComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFee/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/TransactionInfoFrom.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/TransactionInfoFrom.tsx
index e8abf8743..3c78b65c1 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/TransactionInfoFrom.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/TransactionInfoFrom.tsx
@@ -55,8 +55,11 @@ const TransactionInfoFromComponent = ({
 );
 
 export const TransactionInfoFrom = withStyles(TransactionInfoFromComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoFrom/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/TransactionInfoGasLimit.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/TransactionInfoGasLimit.tsx
index 013cba1d1..3003380be 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/TransactionInfoGasLimit.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/TransactionInfoGasLimit.tsx
@@ -24,9 +24,12 @@ const TransactionInfoGasLimitComponent = ({
 export const TransactionInfoGasLimit = withStyles(
   TransactionInfoGasLimitComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasLimit/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/TransactionInfoGasPrice.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/TransactionInfoGasPrice.tsx
index 7723af1bc..3a2d78211 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/TransactionInfoGasPrice.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/TransactionInfoGasPrice.tsx
@@ -24,9 +24,12 @@ const TransactionInfoGasPriceComponent = ({
 export const TransactionInfoGasPrice = withStyles(
   TransactionInfoGasPriceComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasPrice/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/TransactionInfoGasUsed.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/TransactionInfoGasUsed.tsx
index c5ba950c3..5e801dfa6 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/TransactionInfoGasUsed.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/TransactionInfoGasUsed.tsx
@@ -28,9 +28,12 @@ const TransactionInfoGasUsedComponent = ({
 export const TransactionInfoGasUsed = withStyles(
   TransactionInfoGasUsedComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoGasUsed/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/TransactionInfoHash.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/TransactionInfoHash.tsx
index e2b1348f5..3d931035d 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/TransactionInfoHash.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/TransactionInfoHash.tsx
@@ -22,8 +22,11 @@ const TransactionInfoHashComponent = ({
 );
 
 export const TransactionInfoHash = withStyles(TransactionInfoHashComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoHash/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/TransactionInfoMiniblock.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/TransactionInfoMiniblock.tsx
index 128dc1cd6..d9d6e6d9c 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/TransactionInfoMiniblock.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/TransactionInfoMiniblock.tsx
@@ -42,9 +42,12 @@ const TransactionInfoMiniblockComponent = ({
 export const TransactionInfoMiniblock = withStyles(
   TransactionInfoMiniblockComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoMiniblock/styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/TransactionInfoTo.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/TransactionInfoTo.tsx
index 1c6f07bbe..8113ef7fb 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/TransactionInfoTo.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/TransactionInfoTo.tsx
@@ -102,8 +102,11 @@ const TransactionInfoToComponent = ({
 };
 
 export const TransactionInfoTo = withStyles(TransactionInfoToComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoTo/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/TransactionInfoValue.tsx b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/TransactionInfoValue.tsx
index a88b8a4bb..99445970f 100644
--- a/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/TransactionInfoValue.tsx
+++ b/src/UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/TransactionInfoValue.tsx
@@ -45,8 +45,11 @@ const TransactionInfoValueComponent = ({
 };
 
 export const TransactionInfoValue = withStyles(TransactionInfoValueComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionInfo/components/transactionInfoFields/TransactionInfoValue/styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/TransactionsTable.tsx b/src/UI/TransactionsTable/TransactionsTable.tsx
index ae9ca09ab..c5d6f1982 100644
--- a/src/UI/TransactionsTable/TransactionsTable.tsx
+++ b/src/UI/TransactionsTable/TransactionsTable.tsx
@@ -103,6 +103,9 @@ const TransactionsTableComponent = ({
 };
 
 export const TransactionsTable = withStyles(TransactionsTableComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionDirectionBadge.tsx b/src/UI/TransactionsTable/components/TransactionDirectionBadge.tsx
index 576659e9d..801bb1165 100644
--- a/src/UI/TransactionsTable/components/TransactionDirectionBadge.tsx
+++ b/src/UI/TransactionsTable/components/TransactionDirectionBadge.tsx
@@ -23,7 +23,10 @@ const TransactionDirectionBadgeComponent = ({
 export const TransactionDirectionBadge = withStyles(
   TransactionDirectionBadgeComponent,
   {
-    local: () =>
-      import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionsTable/components/TransactionHash.tsx b/src/UI/TransactionsTable/components/TransactionHash.tsx
index e65a31572..871e9bafe 100644
--- a/src/UI/TransactionsTable/components/TransactionHash.tsx
+++ b/src/UI/TransactionsTable/components/TransactionHash.tsx
@@ -50,6 +50,9 @@ export const TransactionHashComponent = ({
 };
 
 export const TransactionHash = withStyles(TransactionHashComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionMethod.tsx b/src/UI/TransactionsTable/components/TransactionMethod.tsx
index eb396a700..687d520e5 100644
--- a/src/UI/TransactionsTable/components/TransactionMethod.tsx
+++ b/src/UI/TransactionsTable/components/TransactionMethod.tsx
@@ -48,6 +48,9 @@ const TransactionMethodComponent = ({
 );
 
 export const TransactionMethod = withStyles(TransactionMethodComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionReceiver.tsx b/src/UI/TransactionsTable/components/TransactionReceiver.tsx
index 360a0ce26..66f34671e 100644
--- a/src/UI/TransactionsTable/components/TransactionReceiver.tsx
+++ b/src/UI/TransactionsTable/components/TransactionReceiver.tsx
@@ -75,6 +75,9 @@ const TransactionReceiverComponent = ({
 };
 
 export const TransactionReceiver = withStyles(TransactionReceiverComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionRow.tsx b/src/UI/TransactionsTable/components/TransactionRow.tsx
index 5e18e0d7d..f072e74f1 100644
--- a/src/UI/TransactionsTable/components/TransactionRow.tsx
+++ b/src/UI/TransactionsTable/components/TransactionRow.tsx
@@ -72,6 +72,9 @@ export const TransactionRowComponent = ({
 );
 
 export const TransactionRow = withStyles(TransactionRowComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionSender.tsx b/src/UI/TransactionsTable/components/TransactionSender.tsx
index 8d2ffa446..07a172b92 100644
--- a/src/UI/TransactionsTable/components/TransactionSender.tsx
+++ b/src/UI/TransactionsTable/components/TransactionSender.tsx
@@ -79,6 +79,9 @@ export const TransactionSenderComponent = ({
 };
 
 export const TransactionSender = withStyles(TransactionSenderComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsTable/components/TransactionShardsTransition.tsx b/src/UI/TransactionsTable/components/TransactionShardsTransition.tsx
index d156d0f70..adaa510a8 100644
--- a/src/UI/TransactionsTable/components/TransactionShardsTransition.tsx
+++ b/src/UI/TransactionsTable/components/TransactionShardsTransition.tsx
@@ -57,7 +57,10 @@ const TransactionShardsTransitionComponent = ({
 export const TransactionShardsTransition = withStyles(
   TransactionShardsTransitionComponent,
   {
-    local: () =>
-      import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionsTable/components/TransactionValue/TransactionValue.tsx b/src/UI/TransactionsTable/components/TransactionValue/TransactionValue.tsx
index c30b730fe..d60a1d922 100644
--- a/src/UI/TransactionsTable/components/TransactionValue/TransactionValue.tsx
+++ b/src/UI/TransactionsTable/components/TransactionValue/TransactionValue.tsx
@@ -42,8 +42,11 @@ const TokenWrapperComponent = ({
 );
 
 const TokenWrapper = withStyles(TokenWrapperComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
 
 const TransactionValueComponent = ({
@@ -96,6 +99,9 @@ const TransactionValueComponent = ({
 };
 
 export const TransactionValue = withStyles(TransactionValueComponent, {
-  local: () =>
-    import('UI/TransactionsTable/components/transactionsTable.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsTable/components/transactionsTable.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsTable/components/transactionsTable.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/TransactionsToastList.tsx b/src/UI/TransactionsToastList/TransactionsToastList.tsx
index 3cac609c5..b1df50b4e 100644
--- a/src/UI/TransactionsToastList/TransactionsToastList.tsx
+++ b/src/UI/TransactionsToastList/TransactionsToastList.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
@@ -53,6 +59,7 @@ export const TransactionsToastListComponent = ({
   children,
   styles
 }: TransactionsToastListPropsType & WithStylesImportType) => {
+  const [isBrowser, setIsBrowser] = useState(false);
   const customToasts = useSelector(customToastsSelector);
   const transactionsToasts = useSelector(transactionToastsSelector);
   const dispatch = useDispatch();
@@ -174,6 +181,8 @@ export const TransactionsToastListComponent = ({
   };
 
   useEffect(() => {
+    setIsBrowser(true);
+
     window?.addEventListener(
       'beforeunload',
       clearNotPendingTransactionsFromStorage
@@ -187,20 +196,28 @@ export const TransactionsToastListComponent = ({
     };
   }, []);
 
-  return createPortal(
-    <div className={classNames(styles?.toasts, className)}>
-      {customToastsList}
-      {MemoizedTransactionsToastsList}
-      {children}
-    </div>,
-    parentElement || document?.body
+  return (
+    <>
+      {isBrowser &&
+        createPortal(
+          <div className={classNames(styles?.toasts, className)}>
+            {customToastsList}
+            {MemoizedTransactionsToastsList}
+            {children}
+          </div>,
+          parentElement || document?.body
+        )}
+    </>
   );
 };
 
 export const TransactionsToastList = withStyles(
   TransactionsToastListComponent,
   {
-    local: () =>
-      import('UI/TransactionsToastList/transactionsToastList.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionsToastList/transactionsToastList.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionsToastList/transactionsToastList.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/CustomComponentToast.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/CustomComponentToast.tsx
index 4ea2d2962..e400ee40e 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/CustomComponentToast.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/CustomComponentToast.tsx
@@ -33,6 +33,9 @@ const CustomComponentToastComponent = ({
 };
 
 export const CustomComponentToast = withStyles(CustomComponentToastComponent, {
-  local: () =>
-    import('UI/TransactionsToastList/transactionsToastList.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsToastList/transactionsToastList.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsToastList/transactionsToastList.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/IconToast.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/IconToast.tsx
index 471ffcabf..9eb4c7b61 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/IconToast.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/IconToast.tsx
@@ -52,8 +52,11 @@ const IconToastComponent = (
 };
 
 export const IconToast = withStyles(IconToastComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/MessageIconToastFooter.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/MessageIconToastFooter.tsx
index d6ccb4567..2ae96cb8c 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/MessageIconToastFooter.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/MessageIconToastFooter.tsx
@@ -21,6 +21,9 @@ const MessageIconToastFooterComponent = (
 export const MessageIconToastFooter = withStyles(
   MessageIconToastFooterComponent,
   {
-    local: () => import('UI/TransactionDetails/transactionDetails.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionDetails/transactionDetails.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionDetails/transactionDetails.styles.scss').default
   }
 );
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/SharedToastFooter.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/SharedToastFooter.tsx
index 583b4fc9f..5287d88c2 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/SharedToastFooter.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/SharedToastFooter.tsx
@@ -9,8 +9,11 @@ const SharedToastFooterComponent = ({
 };
 
 export const SharedToastFooter = withStyles(SharedToastFooterComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/TransactionToastFooter.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/TransactionToastFooter.tsx
index 5f955f271..416c00376 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/TransactionToastFooter.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/IconToast/components/IconToastFooter/components/TransactionToastFooter.tsx
@@ -41,6 +41,9 @@ const TransactionToastFooterComponent = (
 export const TransactionToastFooter = withStyles(
   TransactionToastFooterComponent,
   {
-    local: () => import('UI/TransactionDetails/transactionDetails.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionDetails/transactionDetails.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionDetails/transactionDetails.styles.scss').default
   }
 );
diff --git a/src/UI/TransactionsToastList/components/CustomToast/components/SimpleToast.tsx b/src/UI/TransactionsToastList/components/CustomToast/components/SimpleToast.tsx
index 550ab4955..9ba73ae03 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/components/SimpleToast.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/components/SimpleToast.tsx
@@ -33,6 +33,9 @@ const SimpleToastComponent = ({
 };
 
 export const SimpleToast = withStyles(SimpleToastComponent, {
-  local: () =>
-    import('UI/TransactionsToastList/transactionsToastList.styles.scss')
+  ssrStyles: () =>
+    import('UI/TransactionsToastList/transactionsToastList.styles.scss'),
+  clientStyles: () =>
+    require('UI/TransactionsToastList/transactionsToastList.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/components/CustomToast/helpers/useMemoizedCloseButton.tsx b/src/UI/TransactionsToastList/components/CustomToast/helpers/useMemoizedCloseButton.tsx
index 534e973be..042b4ace5 100644
--- a/src/UI/TransactionsToastList/components/CustomToast/helpers/useMemoizedCloseButton.tsx
+++ b/src/UI/TransactionsToastList/components/CustomToast/helpers/useMemoizedCloseButton.tsx
@@ -13,10 +13,13 @@ export const useMemoizedCloseButton = ({
   onDelete
 }: MemoizedCloseButtonPropsType) => {
   const { styles } = useStyles({
-    localImportCallback: () =>
+    ssrImportCallback: () =>
       import(
         'UI/TransactionsToastList/components/CustomToast/customToast.styles.scss'
-      )
+      ),
+    clientImportCallback: () =>
+      require('UI/TransactionsToastList/components/CustomToast/customToast.styles.scss')
+        .default
   });
 
   const closeButton = useMemo(() => {
diff --git a/src/UI/TransactionsToastList/components/TransactionToast/TransactionToast.tsx b/src/UI/TransactionsToastList/components/TransactionToast/TransactionToast.tsx
index a3d633cf2..ad44a3b24 100644
--- a/src/UI/TransactionsToastList/components/TransactionToast/TransactionToast.tsx
+++ b/src/UI/TransactionsToastList/components/TransactionToast/TransactionToast.tsx
@@ -77,8 +77,11 @@ const TransactionToastComponent = ({
 };
 
 export const TransactionToast = withStyles(TransactionToastComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss')
+      .default
 });
diff --git a/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastContent.tsx b/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastContent.tsx
index f2ff3a5f1..5088b46c4 100644
--- a/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastContent.tsx
+++ b/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastContent.tsx
@@ -91,9 +91,12 @@ const TransactionToastContentComponent = ({
 export const TransactionToastContent = withStyles(
   TransactionToastContentComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastWrapper.tsx b/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastWrapper.tsx
index 13ea28dfb..541b69cee 100644
--- a/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastWrapper.tsx
+++ b/src/UI/TransactionsToastList/components/TransactionToast/components/TransactionToastWrapper.tsx
@@ -29,7 +29,10 @@ const TransactionToastWrapperComponent = ({
 export const TransactionToastWrapper = withStyles(
   TransactionToastWrapperComponent,
   {
-    local: () =>
-      import('UI/TransactionsToastList/transactionsToastList.styles.scss')
+    ssrStyles: () =>
+      import('UI/TransactionsToastList/transactionsToastList.styles.scss'),
+    clientStyles: () =>
+      require('UI/TransactionsToastList/transactionsToastList.styles.scss')
+        .default
   }
 );
diff --git a/src/UI/TransactionsToastList/components/TransactionToast/hooks/useTransactionToast.ts b/src/UI/TransactionsToastList/components/TransactionToast/hooks/useTransactionToast.ts
index 937ba6f19..3c3ffd879 100644
--- a/src/UI/TransactionsToastList/components/TransactionToast/hooks/useTransactionToast.ts
+++ b/src/UI/TransactionsToastList/components/TransactionToast/hooks/useTransactionToast.ts
@@ -25,10 +25,13 @@ export const useTransactionToast = ({
   onDelete
 }: TransactionToastDefaultProps) => {
   const { styles } = useStyles({
-    localImportCallback: () =>
+    ssrImportCallback: () =>
       import(
         'UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss'
-      )
+      ),
+    clientImportCallback: () =>
+      require('UI/TransactionsToastList/components/TransactionToast/transactionToast.styles.scss')
+        .default
   });
 
   const transactionDisplayInfo = useGetTransactionDisplayInfo(toastId);
diff --git a/src/UI/Trim/Trim.tsx b/src/UI/Trim/Trim.tsx
index a4df4d511..148eba011 100644
--- a/src/UI/Trim/Trim.tsx
+++ b/src/UI/Trim/Trim.tsx
@@ -84,5 +84,6 @@ const TrimComponent = ({
 };
 
 export const Trim = withStyles(TrimComponent, {
-  local: () => import('UI/Trim/trim.styles.scss')
+  ssrStyles: () => import('UI/Trim/trim.styles.scss'),
+  clientStyles: () => require('UI/Trim/trim.styles.scss').default
 });
diff --git a/src/UI/extension/ExtensionLoginButton/ExtensionLoginButton.tsx b/src/UI/extension/ExtensionLoginButton/ExtensionLoginButton.tsx
index b6dd4f6e8..99e38b27e 100644
--- a/src/UI/extension/ExtensionLoginButton/ExtensionLoginButton.tsx
+++ b/src/UI/extension/ExtensionLoginButton/ExtensionLoginButton.tsx
@@ -93,6 +93,11 @@ const ExtensionLoginButtonComponent: (
 };
 
 export const ExtensionLoginButton = withStyles(ExtensionLoginButtonComponent, {
-  local: () =>
-    import('UI/extension/ExtensionLoginButton/extensionLoginButton.styles.scss')
+  ssrStyles: () =>
+    import(
+      'UI/extension/ExtensionLoginButton/extensionLoginButton.styles.scss'
+    ),
+  clientStyles: () =>
+    require('UI/extension/ExtensionLoginButton/extensionLoginButton.styles.scss')
+      .default
 });
diff --git a/src/UI/extension/ExtensionLoginButton/index.tsx b/src/UI/extension/ExtensionLoginButton/index.ts
similarity index 100%
rename from src/UI/extension/ExtensionLoginButton/index.tsx
rename to src/UI/extension/ExtensionLoginButton/index.ts
diff --git a/src/UI/ledger/LedgerLoginContainer/AddressRow/AddressRow.tsx b/src/UI/ledger/LedgerLoginContainer/AddressRow/AddressRow.tsx
index 8edaa887c..b70625aa4 100644
--- a/src/UI/ledger/LedgerLoginContainer/AddressRow/AddressRow.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/AddressRow/AddressRow.tsx
@@ -86,6 +86,9 @@ const AddressRowComponent = ({
 };
 
 export const AddressRow = withStyles(AddressRowComponent, {
-  local: () =>
-    import('UI/ledger/LedgerLoginContainer/AddressRow/addressRowStyles.scss')
+  ssrStyles: () =>
+    import('UI/ledger/LedgerLoginContainer/AddressRow/addressRowStyles.scss'),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/AddressRow/addressRowStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx b/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx
index 3f9a3037e..ecf8b0609 100644
--- a/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx
@@ -258,8 +258,11 @@ const AddressTableComponent = ({
 };
 
 export const AddressTable = withStyles(AddressTableComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/ledger/LedgerLoginContainer/AddressTable/addressTableStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/AddressTable/addressTableStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx
index 797945f9f..a2898772e 100644
--- a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx
@@ -139,8 +139,11 @@ const ConfirmAddressComponent = ({
 };
 
 export const ConfirmAddress = withStyles(ConfirmAddressComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/ledger/LedgerLoginContainer/ConfirmAddress/confirmAddressStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/ConfirmAddress/confirmAddressStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/LedgerConnect/LedgerConnect.tsx b/src/UI/ledger/LedgerLoginContainer/LedgerConnect/LedgerConnect.tsx
index 3db13b44a..077b91918 100644
--- a/src/UI/ledger/LedgerLoginContainer/LedgerConnect/LedgerConnect.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/LedgerConnect/LedgerConnect.tsx
@@ -137,8 +137,11 @@ const LedgerConnectComponent = ({
 };
 
 export const LedgerConnect = withStyles(LedgerConnectComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/ledger/LedgerLoginContainer/LedgerConnect/ledgerConnectStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/LedgerConnect/ledgerConnectStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/LedgerLoading/LedgerLoading.tsx b/src/UI/ledger/LedgerLoginContainer/LedgerLoading/LedgerLoading.tsx
index 21f8f6741..5bb1ea9ac 100644
--- a/src/UI/ledger/LedgerLoginContainer/LedgerLoading/LedgerLoading.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/LedgerLoading/LedgerLoading.tsx
@@ -76,8 +76,11 @@ const LedgerLoadingComponent = ({
 };
 
 export const LedgerLoading = withStyles(LedgerLoadingComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/ledger/LedgerLoginContainer/LedgerLoading/ledgerLoadingStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/LedgerLoading/ledgerLoadingStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/LedgerLoginContainer.tsx b/src/UI/ledger/LedgerLoginContainer/LedgerLoginContainer.tsx
index f038c5ed7..cf27c1e43 100644
--- a/src/UI/ledger/LedgerLoginContainer/LedgerLoginContainer.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/LedgerLoginContainer.tsx
@@ -64,6 +64,9 @@ const LedgerLoginContainerComponent = (
 };
 
 export const LedgerLoginContainer = withStyles(LedgerLoginContainerComponent, {
-  local: () =>
-    import('UI/ledger/LedgerLoginContainer/ledgerLoginContainerStyles.scss')
+  ssrStyles: () =>
+    import('UI/ledger/LedgerLoginContainer/ledgerLoginContainerStyles.scss'),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/ledgerLoginContainerStyles.scss')
+      .default
 });
diff --git a/src/UI/ledger/LedgerLoginContainer/LedgerProgressBar/LedgerProgressBar.tsx b/src/UI/ledger/LedgerLoginContainer/LedgerProgressBar/LedgerProgressBar.tsx
index 1698f2682..b1f50d4cd 100644
--- a/src/UI/ledger/LedgerLoginContainer/LedgerProgressBar/LedgerProgressBar.tsx
+++ b/src/UI/ledger/LedgerLoginContainer/LedgerProgressBar/LedgerProgressBar.tsx
@@ -72,8 +72,11 @@ const LedgerProgressBarComponent = ({
 };
 
 export const LedgerProgressBar = withStyles(LedgerProgressBarComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/ledger/LedgerLoginContainer/LedgerProgressBar/progressBarStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/ledger/LedgerLoginContainer/LedgerProgressBar/progressBarStyles.scss')
+      .default
 });
diff --git a/src/UI/pages/UnlockPage/index.tsx b/src/UI/pages/UnlockPage/index.tsx
index 39c36861e..5b8a46633 100644
--- a/src/UI/pages/UnlockPage/index.tsx
+++ b/src/UI/pages/UnlockPage/index.tsx
@@ -110,5 +110,7 @@ const UnlockPageComponent = ({
 };
 
 export const UnlockPage = withStyles(UnlockPageComponent, {
-  local: () => import('UI/pages/UnlockPage/unlockPageStyles.scss')
+  ssrStyles: () => import('UI/pages/UnlockPage/unlockPageStyles.scss'),
+  clientStyles: () =>
+    require('UI/pages/UnlockPage/unlockPageStyles.scss').default
 });
diff --git a/src/UI/walletConnect/WalletConnectLoginContainer/PairingList/PairingList.tsx b/src/UI/walletConnect/WalletConnectLoginContainer/PairingList/PairingList.tsx
index b75c6bc18..fc847c55b 100644
--- a/src/UI/walletConnect/WalletConnectLoginContainer/PairingList/PairingList.tsx
+++ b/src/UI/walletConnect/WalletConnectLoginContainer/PairingList/PairingList.tsx
@@ -141,8 +141,11 @@ const PairinglistComponent = ({
 };
 
 export const Pairinglist = withStyles(PairinglistComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss')
+      .default
 });
diff --git a/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx b/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx
index d47ac2a11..db774016a 100644
--- a/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx
+++ b/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx
@@ -70,9 +70,12 @@ const WalletConnectLoginContainerComponent = (
 export const WalletConnectLoginContainer = withStyles(
   WalletConnectLoginContainerComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss')
+        .default
   }
 );
diff --git a/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx b/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx
index c60ea845b..d2e8db6b3 100644
--- a/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx
+++ b/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx
@@ -215,9 +215,12 @@ const WalletConnectLoginContentComponent = ({
 export const WalletConnectLoginContent = withStyles(
   WalletConnectLoginContentComponent,
   {
-    local: () =>
+    ssrStyles: () =>
       import(
         'UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss'
-      )
+      ),
+    clientStyles: () =>
+      require('UI/walletConnect/WalletConnectLoginContainer/walletConnectLoginContainerStyles.scss')
+        .default
   }
 );
diff --git a/src/components/TransactionStatusToast/StatusIcon.tsx b/src/components/TransactionStatusToast/StatusIcon.tsx
index ba805db75..50b45cff2 100644
--- a/src/components/TransactionStatusToast/StatusIcon.tsx
+++ b/src/components/TransactionStatusToast/StatusIcon.tsx
@@ -58,8 +58,11 @@ const StatusIconComponent = ({
 };
 
 export const StatusIcon = withStyles(StatusIconComponent, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'components/TransactionStatusToast/transactionStatusToastStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('components/TransactionStatusToast/transactionStatusToastStyles.scss')
+      .default
 });
diff --git a/src/components/TransactionStatusToast/StatusMessageComponent.tsx b/src/components/TransactionStatusToast/StatusMessageComponent.tsx
index e4a91c36b..f5edf1de7 100644
--- a/src/components/TransactionStatusToast/StatusMessageComponent.tsx
+++ b/src/components/TransactionStatusToast/StatusMessageComponent.tsx
@@ -20,8 +20,11 @@ const StatusMessage = ({
 );
 
 export const StatusMessageComponent = withStyles(StatusMessage, {
-  local: () =>
+  ssrStyles: () =>
     import(
       'components/TransactionStatusToast/transactionStatusToastStyles.scss'
-    )
+    ),
+  clientStyles: () =>
+    require('components/TransactionStatusToast/transactionStatusToastStyles.scss')
+      .default
 });
diff --git a/src/hocs/useStyles.ts b/src/hocs/useStyles.ts
index d99269fac..efac3148a 100644
--- a/src/hocs/useStyles.ts
+++ b/src/hocs/useStyles.ts
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { isSSR } from 'utils/isSSR';
 
 type StylesType = typeof import('*.scss');
 
@@ -7,31 +8,43 @@ export type WithStylesImportType = {
   styles?: Record<any, any>;
 };
 
+const defaultServerGlobalImport = async () =>
+  await import('assets/sass/main.scss');
+const defaultClientGlobalImport = () =>
+  require('assets/sass/main.scss').default;
+
+const ssr = isSSR();
 export function useStyles({
-  globalImportCallback,
-  localImportCallback
+  ssrGlobalImportCallback,
+  ssrImportCallback,
+  clientImportCallback
 }: {
-  globalImportCallback?: () => Promise<StylesType>;
-  localImportCallback?: () => Promise<StylesType>;
+  ssrGlobalImportCallback?: () => Promise<StylesType>;
+  ssrImportCallback?: () => Promise<StylesType>;
+  clientImportCallback?: () => StylesType;
 }) {
-  const [globalStyles, setGlobalStyles] = React.useState<Record<any, any>>();
-  const [styles, setStyles] = React.useState<Record<any, any>>();
-
-  const defaultGlobalImport = async () => await import('assets/sass/main.scss');
+  const [globalStyles, setGlobalStyles] = React.useState<Record<any, any>>(
+    ssr ? undefined : defaultClientGlobalImport()
+  );
+  const [styles, setStyles] = React.useState<Record<any, any> | undefined>(
+    ssr ? undefined : clientImportCallback?.()
+  );
 
   const importStyles = async () => {
-    (globalImportCallback
-      ? globalImportCallback()
-      : defaultGlobalImport()
+    (ssrGlobalImportCallback
+      ? ssrGlobalImportCallback()
+      : defaultServerGlobalImport()
     ).then((styles: StylesType) => setGlobalStyles(styles.default));
 
-    localImportCallback?.().then((styles: StylesType) =>
+    ssrImportCallback?.().then((styles: StylesType) =>
       setStyles(styles.default)
     );
   };
 
   useEffect(() => {
-    importStyles();
+    if (ssr) {
+      importStyles();
+    }
   }, []);
 
   return {
diff --git a/src/hocs/withStyles.tsx b/src/hocs/withStyles.tsx
index 3140e458e..efc6aaed5 100644
--- a/src/hocs/withStyles.tsx
+++ b/src/hocs/withStyles.tsx
@@ -11,14 +11,16 @@ export type WithStylesImportType = {
 export function withStyles<TProps>(
   Component: FunctionComponent<TProps & WithStylesImportType>,
   imports: {
-    global?: () => Promise<StylesType>;
-    local?: () => Promise<StylesType>;
+    ssrGlobalStyles?: () => Promise<StylesType>;
+    ssrStyles?: () => Promise<StylesType>;
+    clientStyles?: () => StylesType;
   }
 ) {
   return (props: TProps) => {
     const { globalStyles, styles } = useStyles({
-      globalImportCallback: imports.global,
-      localImportCallback: imports.local
+      ssrGlobalImportCallback: imports.ssrGlobalStyles,
+      ssrImportCallback: imports.ssrStyles,
+      clientImportCallback: imports.clientStyles
     });
 
     return (
diff --git a/src/reduxStore/slices/dappConfigSlice.ts b/src/reduxStore/slices/dappConfigSlice.ts
index 325d0fb6b..df919a8d2 100644
--- a/src/reduxStore/slices/dappConfigSlice.ts
+++ b/src/reduxStore/slices/dappConfigSlice.ts
@@ -11,22 +11,9 @@ export const dappConfigSlice = createSlice({
   initialState,
   reducers: {
     setDappConfig: (
-      state: DappConfigSliceStateType,
+      _state: DappConfigSliceStateType,
       action: PayloadAction<DappConfigSliceStateType>
-    ) => {
-      if (state && action.payload) {
-        const {
-          logoutRoute,
-          shouldUseWebViewProvider,
-          cancelTransactionToastDuration
-        } = action.payload;
-        state.logoutRoute = logoutRoute;
-        state.shouldUseWebViewProvider = shouldUseWebViewProvider;
-        state.cancelTransactionToastDuration = cancelTransactionToastDuration;
-      } else {
-        state = action.payload;
-      }
-    }
+    ) => action.payload
   },
   extraReducers: (builder) => {
     builder.addCase(logoutAction, () => {
diff --git a/src/setupTests.js b/src/setupTests.js
index f19096ac4..e3f010902 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -61,7 +61,9 @@ jest.mock(
 );
 
 jest.mock('react-redux/lib/utils/Subscription', () => {
-  const { createSubscription } = require('./__mocks__');
+  const {
+    createSubscription
+  } = require('./__mocks__/packages/createSubscription');
   return {
     __esModule: true,
     createSubscription
diff --git a/src/utils/isSSR.ts b/src/utils/isSSR.ts
new file mode 100644
index 000000000..c18902f18
--- /dev/null
+++ b/src/utils/isSSR.ts
@@ -0,0 +1,3 @@
+import { isWindowAvailable } from './isWindowAvailable';
+
+export const isSSR = () => !isWindowAvailable();
diff --git a/src/wrappers/AppInitializer.tsx b/src/wrappers/AppInitializer.tsx
index c6dd8260c..457d812be 100644
--- a/src/wrappers/AppInitializer.tsx
+++ b/src/wrappers/AppInitializer.tsx
@@ -75,7 +75,9 @@ export const useAppInitializer = ({
   }
 
   async function initializeApp() {
-    dispatch(setDappConfig(memoizedDappConfig));
+    if (memoizedDappConfig) {
+      dispatch(setDappConfig(memoizedDappConfig));
+    }
     dispatch(setLogoutRoute(logoutRoute));
     await initializeNetwork();