diff --git a/package.json b/package.json
index 39d7cb4c..df4bdc64 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",
diff --git a/src/components/AccountSetUpModal/Generate/index.js b/src/components/AccountSetUpModal/Generate/index.js
index e4b6f6c1..6b260494 100644
--- a/src/components/AccountSetUpModal/Generate/index.js
+++ b/src/components/AccountSetUpModal/Generate/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import WalletConnectors from 'components/WalletConnectors';
 
-export default ({ generate, isCreation }) => {
+export default ({ next, isCreation }) => {
   return (
     <Container>
       <Description>
@@ -12,7 +12,7 @@ export default ({ generate, isCreation }) => {
           : 'Select the wallet you used to create your zkAccount'
         }
       </Description>
-      <WalletConnectors callback={generate} />
+      <WalletConnectors callback={next} />
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/Sign/index.js b/src/components/AccountSetUpModal/Sign/index.js
index 41599dd1..d953ab84 100644
--- a/src/components/AccountSetUpModal/Sign/index.js
+++ b/src/components/AccountSetUpModal/Sign/index.js
@@ -1,18 +1,32 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 
 import Spinner from 'components/Spinner';
+import Button from 'components/Button';
+
+export default ({ isCreation, sign }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClick = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await sign();
+    } catch (error) {
+      console.error(error);
+    }
+    setIsLoading(false);
+  }, [sign]);
 
-export default ({ isCreation }) => {
   return (
     <Container>
-      <Spinner />
+      {isLoading && <Spinner />}
       <Note>
         {isCreation
           ? 'Your zkAccount is being created based on the connected wallet.'
           : 'Accessing your zkAccount with your connected wallet.'
         }
       </Note>
+      {!isLoading && <Button onClick={onClick}>Sign the message</Button>}
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index 611a469f..34d89813 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -103,20 +103,12 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
   }, []);
 
   const generate = useCallback(async () => {
-    const nextStep = step === STEP.CREATE_WITH_WALLET
-      ? STEP.SING_MESSAGE_TO_CREATE
-      : STEP.SING_MESSAGE_TO_RESTORE;
-    setStep(nextStep);
-    try {
-      const message = 'Access zkBob account.\n\nOnly sign this message for a trusted client!';
-      const signedMessage = await signMessageAsync({ message });
-      const newMnemonic = ethers.utils.entropyToMnemonic(md5.array(signedMessage));
-      setConfirmedMnemonic(newMnemonic);
-      setStep(STEP.CREATE_PASSWORD);
-    } catch (error) {
-      setStep(step);
-    }
-  }, [signMessageAsync, step]);
+    const message = 'Access zkBob account.\n\nOnly sign this message for a trusted client!';
+    const signedMessage = await signMessageAsync({ message });
+    const newMnemonic = ethers.utils.entropyToMnemonic(md5.array(signedMessage));
+    setConfirmedMnemonic(newMnemonic);
+    setStep(STEP.CREATE_PASSWORD);
+  }, [signMessageAsync]);
 
   const confirmPassword = useCallback(password => {
     const isNewAccount = !!newMnemonic;
@@ -148,7 +140,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.CREATE_WITH_WALLET:
       title = 'Create new zkAccount';
-      component = <Generate generate={generate} />;
+      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:
@@ -158,7 +150,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.RESTORE_WITH_WALLET:
       title = 'Login to your zkAccount';
-      component = <Generate generate={generate} />;
+      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_RESTORE)} />;
       prevStep = STEP.RESTORE_OPTIONS;
       break;
     case STEP.RESTORE_WITH_SECRET:
@@ -173,13 +165,13 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.SING_MESSAGE_TO_CREATE:
       title = 'Sign the message to create your zkAccount';
-      component = <Sign isCreation />;
-      prevStep = null;
+      component = <Sign isCreation sign={generate} />;
+      prevStep = STEP.CREATE_WITH_WALLET;
       break;
     case STEP.SING_MESSAGE_TO_RESTORE:
       title = 'Sign the message to login to your zkAccount';
-      component = <Sign />;
-      prevStep = null;
+      component = <Sign sign={generate} />;
+      prevStep = STEP.RESTORE_WITH_WALLET;
       break;
     case STEP.CREATE_PASSWORD:
       title = 'Create password';
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 39eb351a..a2b49a6e 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -4,15 +4,16 @@ import styled from 'styled-components';
 import SpinnerDefault from 'components/Spinner';
 
 export default props => {
+  const { loading, ...otherProps } = props;
   switch(props.type) {
     case 'link':
-      return <TransparentButton {...props} />;
+      return <TransparentButton {...otherProps} />;
     case 'pripary':
     default:
       return (
-        <Button {...props}>
-          {props.$loading &&
-            <Spinner $small={props.small} $contrast={props.$contrast} size={props.small ? 16 : 24} />
+        <Button {...otherProps} >
+          {loading &&
+            <Spinner $small={props.small} $contrast={props.contrast} size={props.small ? 16 : 24} />
           }
           {props.children}
         </Button>
@@ -22,9 +23,9 @@ export default props => {
 
 const Button = styled.button`
   background: ${props =>
-    props.theme.button.primary.background[props.disabled ? (props.$contrast ? 'contrast' : 'disabled') : 'default']
+    props.theme.button.primary.background[props.disabled ? (props.contrast ? 'contrast' : 'disabled') : 'default']
   };
-  color: ${props => props.theme.button.primary.text.color[props.disabled && props.$contrast ? 'contrast' : 'default']};
+  color: ${props => props.theme.button.primary.text.color[props.disabled && props.contrast ? 'contrast' : 'default']};
   font-size: ${props => props.theme.button.primary.text.size[props.small ? 'small' : 'default']};
   font-weight: ${props => props.theme.button.primary.text.weight[props.small ? 'small' : 'default']};
   padding: ${props => props.small ? '8px 16px' : '0'};
diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
index 824704c7..0ea41c30 100644
--- a/src/components/Dropdown/index.js
+++ b/src/components/Dropdown/index.js
@@ -5,6 +5,7 @@ import 'rc-tooltip/assets/bootstrap.css';
 
 const GlobalStyle = createGlobalStyle`
   .dropdown {
+    top: 55px !important;
     @media only screen and (max-width: 560px) {
       left: calc(100% - 58px) !important;
       transform: translateX(-100%) !important;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 2df1662c..b14ed5d5 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -18,8 +18,8 @@ export default () => {
 
   const resources = [
     { icon: TwitterIcon, href: 'https://twitter.com/zkBob_' },
-    { icon: TelegramIcon, href: 'https://t.me/zkbob_news' },
-    { icon: MirrorIcon, href: 'https://mirror.xyz/0x6132eB883e88CD4E007552b871A6444Bfc34E837' },
+    { icon: TelegramIcon, href: 'https://t.me/zkbobcommunity' },
+    { icon: MirrorIcon, href: 'https://blog.zkbob.com/' },
     { icon: GithubIcon, href: 'https://github.com/zkBob' },
   ];
 
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 7c77146e..03d9fb6e 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -151,8 +151,8 @@ export default ({
         ) : (
           <Button
             small
-            $loading={isLoadingZkAccount}
-            $contrast
+            loading={isLoadingZkAccount}
+            contrast
             disabled={isLoadingZkAccount}
             onClick={openAccountSetUpModal}
           >
diff --git a/src/components/RedeemGiftCardModal/index.js b/src/components/RedeemGiftCardModal/index.js
index 9ee59b38..2cc9c329 100644
--- a/src/components/RedeemGiftCardModal/index.js
+++ b/src/components/RedeemGiftCardModal/index.js
@@ -1,20 +1,26 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { BigNumber } from 'ethers';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import ButtonDefault from 'components/Button';
 import Modal from 'components/Modal';
+import Link from 'components/Link';
 import Spinner from 'components/Spinner';
+import Tooltip from 'components/Tooltip';
 
 import { formatNumber } from 'utils';
 
 import { ReactComponent as BobTokenDefault } from 'assets/bob.svg';
-import { ReactComponent as CheckIconDefault } from 'assets/check-circle.svg';
+import { ReactComponent as CheckCircleIconDefault } from 'assets/check-circle.svg';
 import { ReactComponent as CrossIconDefault } from 'assets/cross-circle.svg';
+import { ReactComponent as CopyIconDefault } from 'assets/copy.svg';
+import { ReactComponent as CheckIconDefault } from 'assets/check.svg';
 
 import config from 'config';
 import { NETWORKS } from 'constants';
 
+const LOADING = 0;
 const CREATE_ACCOUNT = 1;
 const SWITCH_NETWORK = 2;
 const START = 3;
@@ -22,14 +28,41 @@ const IN_PROGRESS = 4;
 const COMPLETED = 5;
 const FAILED = 6;
 
-const texts = [
-  <>Transferring tokens<br/> to your account</>,
-  <>Making magic</>,
-  <>Just a few seconds more,<br /> almost done</>,
-];
-
 const gradient = 'linear-gradient(150deg, rgba(251, 237, 206, 0.8) 10%, rgba(250, 243, 230, 0.5) 50%, rgba(251, 237, 206, 0.8) 100%)';
 
+const SupportId = ({ supportId }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onCopy = useCallback((text, result) => {
+    if (result) {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    }
+  }, []);
+
+  return (
+    <CopyToClipboard text={supportId} onCopy={onCopy}>
+      <SupportIdContainer>
+        <Description style={{ marginRight: 8 }}>
+          Support ID: {supportId}
+        </Description>
+        <Tooltip content="Copied" placement="right" visible={isCopied}>
+          {isCopied ? <CheckIcon /> : <CopyIcon />}
+        </Tooltip>
+      </SupportIdContainer>
+    </CopyToClipboard>
+  );
+};
+
+const LoadingScreen = () => (
+  <>
+    <SpinnerContainer>
+      <Spinner />
+    </SpinnerContainer>
+    <StatusTitle>Preparing your gift card</StatusTitle>
+  </>
+);
+
 const CreateAccountScreen = ({ openCreateAccount }) => (
   <>
     <StatusTitle>
@@ -66,58 +99,90 @@ const StartScreen = ({ giftCard, redeem, isLoadingZkAccount }) => (
       <BobToken />
       <Amount>{formatNumber(giftCard?.balance || BigNumber.from('0'))}</Amount>
     </BalanceContainer>
-    <Button onClick={redeem} disabled={isLoadingZkAccount}>
-      Claim BOB
-    </Button>
+    {isLoadingZkAccount ? (
+      <Button loading contrast disabled>Loading...</Button>
+    ) : (
+      <Button onClick={redeem}>Claim BOB</Button>
+    )}
   </>
 );
 
-const InProgressScreen = () => {
-  const [text, setText] = useState(texts[0]);
+const InProgressScreen = ({ supportId }) => {
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
-    let counter = 0;
     const intervalId = setInterval(() => {
-      counter++;
-      const index = counter % texts.length;
-      setText(texts[index]);
-    }, 5000); // 5 seconds
+      setProgress(progress => progress + 1);
+    }, 600);
     return () => clearInterval(intervalId);
   }, []);
 
   return (
     <>
-      <StatusTitle>{text}</StatusTitle>
-      <Spinner />
+      <SpinnerContainer>
+        <Spinner />
+        <ProgressText>{Math.min(progress, 99)}%</ProgressText>
+      </SpinnerContainer>
+      <StatusTitle style={{ marginBottom: 16, marginTop: 0 }}>
+        Transferring tokens to your zkAccount
+      </StatusTitle>
+      {progress > 99 && (
+        <>
+          <Description style={{ marginBottom: 16 }}>
+            The process takes longer than usual. If the process does not complete within a few seconds,{' '}
+            contact our <Link size={16} href="https://zkbob.canny.io/report-issue/">support team</Link>
+          </Description>
+          <SupportId supportId={supportId} />
+        </>
+      )}
     </>
   );
 }
 
-const CompletedScreen = () => (
+const CompletedScreen = ({ close }) => (
   <>
-    <StatusTitle>
-      Your BOB tokens were claimed.<br />
-      Check your account balance.
+    <CheckCircleIcon />
+    <StatusTitle style={{ marginBottom: 16, marginTop: 0 }}>
+     Your BOB is on the way
     </StatusTitle>
-    <CheckIcon />
+    <Description>
+      Your tokens will be delivered during the next 1-2 minutes.{' '}
+      Check the transaction status on the History tab
+    </Description>
+    <Button onClick={close}>Got it</Button>
   </>
 );
 
-const FailedScreen = () => (
-  <>
-    <StatusTitle>
-      The tokens have already<br /> been claimed
-    </StatusTitle>
-    <CrossIcon />
-  </>
-);
+const FailedScreen = ({ error, supportId }) => {
+  const isClaimed = error?.message?.includes('Insufficient funds');
+  return (
+    <>
+      <CrossIcon />
+      <StatusTitle style={{ marginBottom: 16, marginTop: 0 }}>
+        {isClaimed ? 'This gift card has already been used' : 'Something went wrong'}
+      </StatusTitle>
+      {!isClaimed &&
+        <Description style={{ marginBottom: 16 }}>
+          Please contact our support team to resolve this problem. Use Support ID in your request.
+        </Description>
+      }
+      <SupportId supportId={supportId} />
+      {!isClaimed &&
+        <Button onClick={() => window.open('https://zkbob.canny.io/report-issue/', '_blank')}>
+          Contact support
+        </Button>
+      }
+    </>
+  );
+};
 
 export default ({
   isOpen, onClose, giftCard, redeemGiftCard,
-  zkAccount, isLoadingZkAccount,
+  zkAccount, isLoadingZkAccount, supportId,
   setUpAccount, isNewUser, currentPool,
 }) => {
   const [step, setStep] = useState(START);
+  const [error, setError] = useState(null);
 
   const redeem = useCallback(async () => {
     setStep(IN_PROGRESS);
@@ -125,6 +190,7 @@ export default ({
       await redeemGiftCard();
       setStep(COMPLETED);
     } catch (error) {
+      setError(error);
       setStep(FAILED);
     }
   }, [redeemGiftCard]);
@@ -140,8 +206,12 @@ export default ({
   useEffect(() => {
     if (isOpen && !zkAccount && !isLoadingZkAccount) {
       setStep(CREATE_ACCOUNT);
+    } else if (isOpen && !giftCard && ![COMPLETED, FAILED].includes(step)) {
+      setStep(LOADING);
+    } else if (isOpen && giftCard && step === LOADING) {
+      setStep(START);
     }
-  }, [isOpen, zkAccount, isLoadingZkAccount]);
+  }, [isOpen, zkAccount, isLoadingZkAccount, giftCard, step]);
 
   const openCreateAccount = useCallback(() => {
     setUpAccount();
@@ -156,11 +226,13 @@ export default ({
   return (
     <Modal
       isOpen={isOpen}
-      onClose={step !== IN_PROGRESS ? clearStateAndClose : null}
+      onClose={step === FAILED ? clearStateAndClose : null}
       style={{ background: step === START ? gradient : '#FFF'}}
     >
       {(() => {
         switch(step) {
+          case LOADING:
+            return <LoadingScreen />;
           case CREATE_ACCOUNT:
             return <CreateAccountScreen openCreateAccount={openCreateAccount} />;
           case SWITCH_NETWORK:
@@ -173,11 +245,11 @@ export default ({
               isLoadingZkAccount={isLoadingZkAccount}
             />;
           case IN_PROGRESS:
-            return <InProgressScreen />;
+            return <InProgressScreen supportId={supportId} />;
           case COMPLETED:
-            return <CompletedScreen />;
+            return <CompletedScreen close={clearStateAndClose} />;
           case FAILED:
-            return <FailedScreen />;
+            return <FailedScreen error={error} supportId={supportId} />;
         }
       })()}
     </Modal>
@@ -235,15 +307,53 @@ const StatusTitle = styled.span`
   text-align: center;
 `;
 
-const CheckIcon = styled(CheckIconDefault)`
-  margin-bottom: 16px;
+const CheckCircleIcon = styled(CheckCircleIconDefault)`
+  margin-bottom: 20px;
+  margin-top: -24px;
 `;
 
 const CrossIcon = styled(CrossIconDefault)`
-  margin-bottom: 16px;
+  margin-bottom: 20px;
+  margin-top: -24px;
 `;
 
 const Button = styled(ButtonDefault)`
   width: 100%;
   margin-top: 20px;
 `;
+
+const SpinnerContainer = styled.div`
+  position: relative;
+  margin-bottom: 20px;
+  margin-top: -24px;
+`;
+
+const ProgressText = styled.span`
+  font-size: 20px;
+  color: ${({ theme }) => theme.text.color.primary};
+  font-weight: ${({ theme }) => theme.text.weight.bold};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const CopyIcon = styled(CopyIconDefault)`
+  width: 16px;
+  height: 16px;
+`;
+
+const CheckIcon = styled(CheckIconDefault)`
+  width: 16px;
+  height: 16px;
+`;
+
+const SupportIdContainer = styled.div`
+  text-align: center;
+  cursor: pointer;
+  &:hover ${CopyIcon} {
+    path {
+      fill: ${props => props.theme.color.purple};
+    }
+  }
+`;
diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
index 20e8e620..520394a0 100644
--- a/src/components/Tabs/index.js
+++ b/src/components/Tabs/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export default ({ tabs, activeTab, onTabClick }) => {
+export default ({ tabs, activeTab, onTabClick, showBadge }) => {
   return (
     <Tabs>
       {tabs.map((tab, index) =>
@@ -9,7 +9,8 @@ export default ({ tabs, activeTab, onTabClick }) => {
           key={index}
           active={activeTab === index}
           onClick={() => onTabClick(index)}
-        >{tab}</Tab>
+          $showBadge={showBadge && tab.badge}
+        >{tab.name}</Tab>
       )}
     </Tabs>
   );
@@ -37,6 +38,7 @@ const Tabs = styled.div`
 `;
 
 const Tab = styled.div`
+  position: relative;
   border-radius: 10px;
   padding: 8px 16px;
   background-color: ${props => props.theme.tab.background[props.active ? 'active' : 'default']};
@@ -50,4 +52,14 @@ const Tab = styled.div`
     padding: 8px 10px;
     text-align: center;
   }
+  &::after {
+    content: '';
+    display: ${props => props.$showBadge ? 'block' : 'none'};
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #E53E3E;
 `;
diff --git a/src/config/index.js b/src/config/index.js
index 5b4a3663..134f56e2 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -86,4 +86,4 @@ const config = {
   }
 };
 
-export default config[process.env.REACT_APP_CONFIG];
+export default config[process.env.REACT_APP_CONFIG || 'dev'];
diff --git a/src/containers/AccountSetUpButton/index.js b/src/containers/AccountSetUpButton/index.js
index 5c1453a4..eb251160 100644
--- a/src/containers/AccountSetUpButton/index.js
+++ b/src/containers/AccountSetUpButton/index.js
@@ -9,8 +9,8 @@ export default () => {
   const { isLoadingZkAccount } = useContext(ZkAccountContext);
   return (
     <Button
-      $loading={isLoadingZkAccount}
-      $contrast
+      loading={isLoadingZkAccount}
+      contrast
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
     >
diff --git a/src/containers/RedeemGiftCardModal/index.js b/src/containers/RedeemGiftCardModal/index.js
index 406c6d99..0ce5eec3 100644
--- a/src/containers/RedeemGiftCardModal/index.js
+++ b/src/containers/RedeemGiftCardModal/index.js
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useCallback, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
-import { ModalContext, PoolContext, ZkAccountContext } from 'contexts';
+import { ModalContext, PoolContext, ZkAccountContext, SupportIdContext } from 'contexts';
 import RedeemGiftCardModal from 'components/RedeemGiftCardModal';
 
 export default () => {
@@ -19,35 +19,43 @@ export default () => {
     openAccountSetUpModal,
     isTermsModalOpen,
   } = useContext(ModalContext);
+  const { supportId } = useContext(SupportIdContext);
   const history = useHistory();
   const location = useLocation();
+  const [giftCode, setGiftCode] = useState(null);
   const [isNewUser, setIsNewUser] = useState(false);
 
   useEffect(() => {
-    if (giftCard && !isPasswordModalOpen && !isAccountSetUpModalOpen && !isTermsModalOpen) {
+    if ((giftCode || giftCard) && !isPasswordModalOpen && !isAccountSetUpModalOpen && !isTermsModalOpen) {
       openRedeemGiftCardModal();
     }
   }, [
-    giftCard, openRedeemGiftCardModal, isPasswordModalOpen,
+    giftCode, giftCard, openRedeemGiftCardModal, isPasswordModalOpen,
     isAccountSetUpModalOpen, isTermsModalOpen,
   ]);
 
   useEffect(() => {
-    async function init() {
+    async function init(code) {
       if (!window.localStorage.getItem('seed')) {
         setIsNewUser(true);
       }
-      const result = await initializeGiftCard(code);
-      if (result) {
-        queryParams.delete('gift-code');
-        history.replace({ search: queryParams.toString() });
-      }
+      setGiftCode(code);
+      queryParams.delete('gift-code');
+      history.replace({ search: queryParams.toString() });
     }
     const queryParams = new URLSearchParams(location.search);
     const code = queryParams.get('gift-code');
-    if (code) init();
+    if (code) init(code);
   }, [history, location, initializeGiftCard]);
 
+  useEffect(() => {
+    async function init() {
+      const result = await initializeGiftCard(giftCode);
+      if (result) setGiftCode(null);
+    }
+    if (giftCode) init();
+  }, [giftCode, initializeGiftCard]);
+
   const onClose = useCallback(() => {
     deleteGiftCard();
     closeRedeemGiftCardModal();
@@ -70,6 +78,7 @@ export default () => {
       switchToPool={switchToPool}
       setUpAccount={setUpAccount}
       isNewUser={isNewUser}
+      supportId={supportId}
     />
   );
 }
diff --git a/src/containers/Tabs/index.js b/src/containers/Tabs/index.js
index 95ed0c52..f435efb2 100644
--- a/src/containers/Tabs/index.js
+++ b/src/containers/Tabs/index.js
@@ -1,30 +1,38 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useContext } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+
 import Tabs from 'components/Tabs';
 
+import { ZkAccountContext } from 'contexts';
+
 const tabs = [
   { name: 'Deposit', path: '/deposit' },
   { name: 'Transfer', path: '/transfer' },
   { name: 'Withdraw', path: '/withdraw' },
-  { name: 'History', path: '/history' },
+  { name: 'History', path: '/history', badge: true },
 ]
 
 export default () => {
+  const { isPendingIncoming } = useContext(ZkAccountContext);
   const history = useHistory();
   const location = useLocation();
   const [activeTab, setActiveTab] = useState(null);
+
   const handleTabClick = useCallback(index => {
     history.push(tabs[index].path + location.search);
   }, [history, location]);
+
   useEffect(() => {
     setActiveTab(tabs.findIndex(item => item.path === location.pathname));
   }, [location]);
+
   return (
     <>
       <Tabs
-        tabs={tabs.map(tab => tab.name)}
+        tabs={tabs}
         activeTab={activeTab}
         onTabClick={handleTabClick}
+        showBadge={isPendingIncoming}
       />
     </>
   );
diff --git a/src/contexts/ZkAccountContext/index.js b/src/contexts/ZkAccountContext/index.js
index 70a37f1f..748d3528 100644
--- a/src/contexts/ZkAccountContext/index.js
+++ b/src/contexts/ZkAccountContext/index.js
@@ -9,6 +9,7 @@ import {
   HistoryRecordState, HistoryTransactionType,
 } from 'zkbob-client-js';
 import { ProverMode } from 'zkbob-client-js/lib/config';
+import { toast } from 'react-toastify';
 
 import {
   TransactionModalContext, ModalContext, PoolContext,
@@ -69,6 +70,7 @@ export const ZkAccountContextProvider = ({ children }) => {
   const [relayerVersion, setRelayerVersion] = useState(null);
   const [isDemo, setIsDemo] = useState(false);
   const [giftCard, setGiftCard] = useState(null);
+  const [giftCardTxHash, setGiftCardTxHash] = useState(null);
 
   useEffect(() => {
     if (zkClient || !supportId || !currentPool) return;
@@ -432,7 +434,8 @@ export const ZkAccountContextProvider = ({ children }) => {
         birthindex: Number(giftCard.birthIndex),
         proverMode: proverExists ? ProverMode.DelegatedWithFallback : ProverMode.Local,
       });
-      await zkClient.waitJobTxHash(jobId);
+      const txHash = await zkClient.waitJobTxHash(jobId);
+      setGiftCardTxHash(txHash);
       deleteGiftCard();
       updatePoolData();
     } catch (error) {
@@ -491,6 +494,7 @@ export const ZkAccountContextProvider = ({ children }) => {
 
   const removeZkAccountMnemonic = useCallback(async () => {
     if (zkAccount) {
+      await zkClient.cleanState();
       await zkClient.logout();
     }
     window.localStorage.removeItem('seed');
@@ -517,7 +521,19 @@ export const ZkAccountContextProvider = ({ children }) => {
   }, [updateMaxTransferable, balance, currentPool]);
 
   useEffect(() => {
-    if (isPending || isPendingIncoming) {
+    if (isPending || isPendingIncoming || giftCardTxHash) {
+      if (giftCardTxHash) {
+        const tx = history.find(item => item.txHash === giftCardTxHash);
+        if (tx && tx.state !== HistoryRecordState.Pending) {
+          setGiftCardTxHash(null);
+          toast.success(
+            <span>
+              <b>The operation has been completed.</b><br />
+              Check the history tab or your zkAccount balance to get more information.
+            </span>
+          );
+        }
+      }
       const interval = 5000; // 5 seconds
       const intervalId = setInterval(() => {
         updatePoolData();
@@ -525,7 +541,7 @@ export const ZkAccountContextProvider = ({ children }) => {
       }, interval);
       return () => clearInterval(intervalId);
     }
-  }, [isPending, isPendingIncoming, updatePoolData, updateTokenBalance]);
+  }, [isPending, isPendingIncoming, updatePoolData, updateTokenBalance, giftCardTxHash, history]);
 
   useEffect(() => {
     loadRelayerVersion();
@@ -559,7 +575,7 @@ export const ZkAccountContextProvider = ({ children }) => {
         removeZkAccountMnemonic, updatePoolData, minTxAmount, loadingPercentage,
         estimateFee, maxTransferable, isLoadingLimits, limits, changePassword, verifyPassword,
         verifyShieldedAddress, decryptMnemonic, relayerVersion, isDemo, updateLimits, lockAccount,
-        switchToPool, giftCard, initializeGiftCard, deleteGiftCard, redeemGiftCard,
+        switchToPool, giftCard, initializeGiftCard, deleteGiftCard, redeemGiftCard, isPendingIncoming,
       }}
     >
       {children}
diff --git a/src/pages/Deposit/index.js b/src/pages/Deposit/index.js
index 84e5c0f4..6f829fb3 100644
--- a/src/pages/Deposit/index.js
+++ b/src/pages/Deposit/index.js
@@ -84,7 +84,7 @@ export default () => {
           if (!zkAccount && !isLoadingZkAccount) return <AccountSetUpButton />
           else if (!account) return <Button onClick={openWalletModal}>Connect wallet</Button>
           if (!zkAccount) return <AccountSetUpButton />
-          else if (isLoadingState || isLoadingLimits) return <Button $loading $contrast disabled>Loading...</Button>
+          else if (isLoadingState || isLoadingLimits) return <Button loading contrast disabled>Loading...</Button>
           else if (amount.isZero()) return <Button disabled>Enter amount</Button>
           else if (amount.lt(minTxAmount)) return <Button disabled>Min amount is {formatNumber(minTxAmount)} {tokenSymbol()}</Button>
           else if (amount.gt(balance)) return <Button disabled>Insufficient {tokenSymbol()} balance</Button>
diff --git a/src/pages/Transfer/MultiTransfer/index.js b/src/pages/Transfer/MultiTransfer/index.js
index 6f5121e1..d8326423 100644
--- a/src/pages/Transfer/MultiTransfer/index.js
+++ b/src/pages/Transfer/MultiTransfer/index.js
@@ -156,7 +156,7 @@ export default forwardRef((props, ref) => {
       }
       {(() => {
           if (!zkAccount) return <AccountSetUpButton />
-          else if (isLoadingState) return <Button $loading $contrast disabled>Loading...</Button>
+          else if (isLoadingState) return <Button loading contrast disabled>Loading...</Button>
           else if (!data) return <Button disabled>Proceed</Button>
           else return <Button onClick={validate}>Proceed</Button>;
         })()}
diff --git a/src/pages/Transfer/SingleTransfer/index.js b/src/pages/Transfer/SingleTransfer/index.js
index 50cfcd97..7710dc8f 100644
--- a/src/pages/Transfer/SingleTransfer/index.js
+++ b/src/pages/Transfer/SingleTransfer/index.js
@@ -56,7 +56,7 @@ export default () => {
   let button = null;
   if (zkAccount) {
     if (isLoadingState) {
-      button = <Button $loading $contrast disabled>Loading...</Button>;
+      button = <Button loading contrast disabled>Loading...</Button>;
     } else if (amount.isZero()) {
       button = <Button disabled>Enter amount</Button>;
     } else if (amount.lt(minTxAmount)) {
diff --git a/src/pages/Withdraw/index.js b/src/pages/Withdraw/index.js
index 1f8311e8..32f39ab2 100644
--- a/src/pages/Withdraw/index.js
+++ b/src/pages/Withdraw/index.js
@@ -66,7 +66,7 @@ export default () => {
   let button = null;
   if (zkAccount) {
     if (isLoadingState || isLoadingLimits) {
-      button = <Button $loading $contrast disabled>Loading...</Button>;
+      button = <Button loading contrast disabled>Loading...</Button>;
     } else if (amount.isZero()) {
       button = <Button disabled>Enter amount</Button>;
     } else if (amount.lt(minTxAmount)) {
diff --git a/src/pages/index.js b/src/pages/index.js
index 7f604b40..973f419a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -86,7 +86,7 @@ const Routes = ({ showWelcome, params }) => (
     <SentryRoute exact strict path="/history">
       <History />
     </SentryRoute>
-    <Redirect to={'/deposit' + params} />
+    <Redirect to={'/transfer' + params} />
   </Switch>
 );