diff --git a/cysync/src/constants/routes.ts b/cysync/src/constants/routes.ts
index ead25673..bd09d0d6 100644
--- a/cysync/src/constants/routes.ts
+++ b/cysync/src/constants/routes.ts
@@ -26,6 +26,9 @@ const routes = {
   },
   tutorial: {
     index: '/tutorial'
+  },
+  swap: {
+    index: '/swap'
   }
 };
 
diff --git a/cysync/src/designSystem/iconGroups/changelly.tsx b/cysync/src/designSystem/iconGroups/changelly.tsx
new file mode 100644
index 00000000..1a665c4d
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/changelly.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const Changelly = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={28}
+    height={25}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.907 21.018a4.69 4.69 0 0 1-.65.536c-.451.339-.92.625-1.426.893-.993.5-2.04.875-3.14 1.089-.272.053-.542.107-.813.143l-.415.053-.199.018-.199.018-.415.036-.415.018c-.27.017-.56.017-.83.035-.813 0-1.625-.035-2.437-.107.09-.125.18-.268.27-.41a14 14 0 0 0 .704-1.25c.398-.858.704-1.75.957-2.643.235-.875.524-1.715.849-2.572a20.6 20.6 0 0 1 1.137-2.482c-.307.34-.578.714-.83 1.107-.253.375-.506.786-.723 1.179-.45.803-.848 1.66-1.155 2.518-.325.839-.668 1.678-1.083 2.446-.415.768-.92 1.482-1.498 2.16L0 24.519l.939.125c1.155.16 2.328.25 3.502.214.289-.018.596-.018.884-.053l.434-.036.433-.054c.289-.035.577-.107.866-.142.29-.072.578-.125.867-.215.289-.071.56-.178.848-.268.271-.107.56-.214.83-.339a10.065 10.065 0 0 0 1.553-.857 8.056 8.056 0 0 0 1.354-1.125c.397-.429.758-.875 1.01-1.393-.198.25-.396.464-.613.643Zm6.463-15.41c.325-.322.758-.5 1.227-.5.452 0 .885.16 1.228.5.668.678.668 1.75 0 2.428-.668.66-1.77.66-2.455 0a1.692 1.692 0 0 1-.506-1.215c0-.464.18-.892.506-1.214Zm1.227 3.963c.722 0 1.426-.267 1.968-.803a2.76 2.76 0 0 0 0-3.91 2.81 2.81 0 0 0-3.935 0 2.727 2.727 0 0 0-.813 1.946c0 .732.29 1.428.813 1.946a2.731 2.731 0 0 0 1.967.821Zm.813 3.965c-3.99 3.482-5.65 3.803-7.311 3.053l1.805-2.25c.27-.321.451-.714.56-1.125l.722-3.018-3.033.715a2.934 2.934 0 0 0-1.138.553l-2.274 1.786c-.776-1.643-.433-3.286 3.069-7.232 3.321-3.732 10.325-4.59 12.402-4.768-.163 2.054-1.03 9-4.802 12.286Zm-2.654 5.393a.646.646 0 0 1-.27.41c-.416.286-1.066.679-1.643 1.036l.036-.107c.27-1.09.27-1.929 0-2.5.758-.232 1.57-.643 2.49-1.268-.234.84-.487 1.84-.613 2.429Zm-6.3-1.947a1.187 1.187 0 0 1-.993.447h-.921l3.141-3.75-3.79 3.107v-.911c-.019-.375.144-.75.45-.982l3.322-2.607c.217-.161.47-.286.722-.357l1.354-.322-.325 1.34c-.072.267-.18.517-.36.732l-2.6 3.303ZM7.04 10.518l-.108.036a30.54 30.54 0 0 1 1.029-1.625.654.654 0 0 1 .415-.268 75.867 75.867 0 0 0 2.455-.59c-.632.911-1.047 1.733-1.281 2.483-.56-.322-1.409-.322-2.51-.036ZM26.771.16c-.379.018-9.55.428-13.756 5.16-.397.447-.776.911-1.155 1.375-.614.161-2.744.733-3.682.929-.434.09-.83.34-1.084.714-.65.929-1.769 2.84-1.805 2.911l-.812 1.375 1.48-.643c.975-.41 2.6-.84 3.177-.5.09.054.199.16.217.429.018.678.199 1.339.541 2l-.198.16a2.216 2.216 0 0 0-.849 1.84v2.553h2.582a2.26 2.26 0 0 0 1.86-.839l.162-.196c.668.339 1.336.535 2.022.535.27.018.36.108.433.215.36.571-.072 2.196-.506 3.16l-.65 1.465 1.39-.804c.09-.053 2.004-1.16 2.943-1.803.361-.25.614-.625.704-1.072.199-.928.776-3.053.939-3.66.433-.34.884-.733 1.372-1.161 4.765-4.161 5.199-13.25 5.217-13.625l.018-.572-.56.054Z"
+      fill="#10D078"
+    />
+  </svg>
+);
+
+export default Changelly;
diff --git a/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx b/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx
new file mode 100644
index 00000000..f7698e5d
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/checkmarkSuccess.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+const checkmarkSuccess = () => (
+  <g>
+    <rect width={20} height={20} rx={10} fill="#2D3236" />
+    <path
+      d="M13.56 6.32a.65.65 0 0 0-.9.192l-3.646 5.62-1.778-1.644a.651.651 0 0 0-.884.956l2.335 2.158s.067.058.098.078a.649.649 0 0 0 .9-.192l4.067-6.268a.65.65 0 0 0-.192-.9Z"
+      fill="#65D023"
+    />
+  </g>
+);
+
+export default checkmarkSuccess;
diff --git a/cysync/src/designSystem/iconGroups/download.tsx b/cysync/src/designSystem/iconGroups/download.tsx
new file mode 100644
index 00000000..faf8f6a6
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/download.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const Download = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={18}
+    height={17}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2.4 10.82a5.6 5.6 0 1 1 9.368-5.52H13.2a3.6 3.6 0 0 1 2 6.594M8.8 8.5v7.2m-3.2-3.2 3.2 3.2 3.2-3.2"
+      stroke="#C78D4E"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Download;
diff --git a/cysync/src/designSystem/iconGroups/swap.tsx b/cysync/src/designSystem/iconGroups/swap.tsx
new file mode 100644
index 00000000..22f0a492
--- /dev/null
+++ b/cysync/src/designSystem/iconGroups/swap.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const swap = (props: { color: string }) => {
+  return (
+    <g>
+      <path
+        d="M12.032 1.59998V8.09998C12.032 8.36519 11.9266 8.61955 11.7391 8.80708C11.5516 8.99462 11.2972 9.09998 11.032 9.09998H5.03198V10.1C5.03229 10.1987 5.00337 10.2953 4.94887 10.3776C4.89438 10.4599 4.81673 10.5242 4.72573 10.5625C4.66406 10.587 4.59834 10.5997 4.53198 10.6C4.39921 10.5994 4.27171 10.548 4.17573 10.4562L2.67573 8.95623C2.58184 8.86143 2.52917 8.7334 2.52917 8.59998C2.52917 8.46655 2.58184 8.33852 2.67573 8.24373L4.17573 6.74373C4.24803 6.6759 4.33805 6.62992 4.43538 6.61112C4.53271 6.59231 4.63338 6.60145 4.72573 6.63748C4.81673 6.67573 4.89438 6.74006 4.94887 6.82236C5.00337 6.90467 5.03229 7.00126 5.03198 7.09998V8.09998H11.032V1.59998H4.03198V2.09998C4.03198 2.23258 3.9793 2.35976 3.88554 2.45353C3.79177 2.5473 3.66459 2.59998 3.53198 2.59998C3.39937 2.59998 3.2722 2.5473 3.17843 2.45353C3.08466 2.35976 3.03198 2.23258 3.03198 2.09998V1.59998C3.03198 1.33476 3.13734 1.08041 3.32488 0.892869C3.51241 0.705332 3.76677 0.599976 4.03198 0.599976H11.032C11.2972 0.599976 11.5516 0.705332 11.7391 0.892869C11.9266 1.08041 12.032 1.33476 12.032 1.59998ZM8.53198 10.6C8.39937 10.6 8.2722 10.6527 8.17843 10.7464C8.08466 10.8402 8.03198 10.9674 8.03198 11.1V11.6H1.03198V5.09998H7.03198V6.09998C7.03248 6.19851 7.06173 6.29475 7.11613 6.3769C7.17052 6.45906 7.24771 6.52355 7.33823 6.56248C7.39991 6.58697 7.46562 6.59969 7.53198 6.59998C7.66475 6.59941 7.79225 6.54797 7.88823 6.45623L9.38823 4.95623C9.48212 4.86143 9.53479 4.7334 9.53479 4.59998C9.53479 4.46655 9.48212 4.33852 9.38823 4.24373L7.88823 2.74373C7.81676 2.67455 7.72669 2.62767 7.62903 2.60881C7.53137 2.58994 7.43033 2.5999 7.33823 2.63748C7.24723 2.67573 7.16959 2.74006 7.11509 2.82236C7.06059 2.90467 7.03167 3.00126 7.03198 3.09998V4.09998H1.03198C0.766766 4.09998 0.512412 4.20533 0.324876 4.39287C0.137339 4.58041 0.0319824 4.83476 0.0319824 5.09998V11.6C0.0319824 11.8652 0.137339 12.1195 0.324876 12.3071C0.512412 12.4946 0.766766 12.6 1.03198 12.6H8.03198C8.2972 12.6 8.55155 12.4946 8.73909 12.3071C8.92663 12.1195 9.03198 11.8652 9.03198 11.6V11.1C9.03198 10.9674 8.9793 10.8402 8.88554 10.7464C8.79177 10.6527 8.66459 10.6 8.53198 10.6Z"
+        fill={props.color}
+      />
+    </g>
+  );
+};
+
+export default swap;
diff --git a/cysync/src/pages/mainApp/index.tsx b/cysync/src/pages/mainApp/index.tsx
index f843238e..aa096baf 100644
--- a/cysync/src/pages/mainApp/index.tsx
+++ b/cysync/src/pages/mainApp/index.tsx
@@ -13,6 +13,7 @@ import Navbar from './navbar';
 import Sidebar from './sidebar';
 import Portfolio from './sidebar/portfolio';
 import Settings from './sidebar/settings';
+import Swap from './sidebar/swap';
 import Transaction from './sidebar/transaction';
 import Tutorial from './sidebar/tutorial';
 import Wallet from './sidebar/wallet';
@@ -127,6 +128,8 @@ const MainApp: React.FC = () => {
                     element={<Wallet />}
                   />
 
+                  <Route path={RouteLinks.swap.index} element={<Swap />} />
+
                   <Route
                     path={RouteLinks.transactions.index}
                     element={<Transaction />}
diff --git a/cysync/src/pages/mainApp/sidebar/index.tsx b/cysync/src/pages/mainApp/sidebar/index.tsx
index 86616588..9987b3ef 100644
--- a/cysync/src/pages/mainApp/sidebar/index.tsx
+++ b/cysync/src/pages/mainApp/sidebar/index.tsx
@@ -25,6 +25,7 @@ import colors from '../../../designSystem/designConstants/colors';
 import LastTransaction from '../../../designSystem/iconGroups/lastTransaction';
 import Portfolio from '../../../designSystem/iconGroups/portfolio';
 import Settings from '../../../designSystem/iconGroups/settings';
+import Swap from '../../../designSystem/iconGroups/swap';
 import Tutorial from '../../../designSystem/iconGroups/tutorial';
 import Wallet from '../../../designSystem/iconGroups/wallet';
 import { useFeedback, useWallets } from '../../../store/provider';
@@ -184,6 +185,10 @@ const TabValues = [
     tab: 2,
     route: Routes.wallet.index
   },
+  {
+    tab: 10, // this is a dummy value for the Swap tab
+    route: Routes.swap.index //TODO: Update the route
+  },
   {
     tab: 5,
     route: Routes.transactions.index
@@ -259,7 +264,6 @@ const Sidebar = () => {
   const handleChange = (_event: React.ChangeEvent | undefined, val: number) => {
     setValue(val);
     const tab = TabValues.find(elem => elem.tab === val);
-
     if (tab) {
       // If wallet tab is selected, route to the first wallet
       if (tab.tab === 2 && walletData && walletData.length > 0) {
@@ -376,6 +380,19 @@ const Sidebar = () => {
             </div>
           </CustomCollapse>
           <CustomDivider value={4} className={classes.divider} />
+          <Tab
+            label="Swap"
+            wrapped={true}
+            value={10} //TODO: Update with the true value
+            icon={
+              <Icon
+                size={21}
+                viewBox="0 0 24 21"
+                iconGroup={<Swap color="white" />} //TODO: Update the icon
+              />
+            }
+          />
+          <CustomDivider value={4} className={classes.divider} />
           <Tab
             label="Transactions"
             wrapped={true}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
new file mode 100644
index 00000000..cac9647a
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/HorizontalTabs.tsx
@@ -0,0 +1,57 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React, { useState } from 'react';
+
+import ExchangePanel from './panels/exchange';
+import HistoryPanel from './panels/history';
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export default function HorizontalTabs() {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          textColor="secondary"
+          indicatorColor="secondary"
+          aria-label="basic tabs example"
+        >
+          <Tab label="Exchange" />
+          <Tab label="History" />
+        </Tabs>
+      </Box>
+      <TabPanel value={value} index={0}>
+        <ExchangePanel />
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <HistoryPanel />
+      </TabPanel>
+    </Box>
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
new file mode 100644
index 00000000..4a141a33
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/index.tsx
@@ -0,0 +1,118 @@
+import Grid from '@mui/material/Grid';
+import { styled, useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Routes from '../../../../constants/routes';
+import CustomButton from '../../../../designSystem/designComponents/buttons/button';
+import { useWallets } from '../../../../store/provider';
+
+import HorizontalTabs from './HorizontalTabs';
+
+const PREFIX = 'Swap';
+
+const classes = {
+  root: `${PREFIX}-root`,
+  tab: `${PREFIX}-tab`,
+  loaderContainer: `${PREFIX}-loaderContainer`
+};
+
+const Root = styled(Grid)(({ theme }) => ({
+  [`& .${classes.root}`]: {
+    flexGrow: 1,
+    background: theme.palette.primary.main,
+    borderBottom: `1px solid ${theme.palette.primary.light}`
+  },
+  [`& .${classes.tab}`]: {
+    color: theme.palette.text.primary,
+    textTransform: 'none'
+  },
+  [`& .${classes.loaderContainer}`]: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: '4rem'
+  }
+}));
+
+const Swap = () => {
+  const { allWallets } = useWallets();
+
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(true);
+  const onAddWallet = () => {
+    setOpen(false);
+    navigate(Routes.wallet.index + '?openImportWalletForm=true');
+  };
+
+  useEffect(() => {
+    if (allWallets[0]._id === '') setOpen(true);
+    else {
+      setOpen(false);
+    }
+  }, [allWallets]);
+  return (
+    <Root container>
+      {open && (
+        <div
+          style={{
+            width: '80%',
+            height: '88%',
+            position: 'absolute',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 100,
+            display: 'flex'
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              width: '101%',
+              height: '101%',
+              backdropFilter: 'blur(5px)'
+            }}
+          />
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              zIndex: 100
+            }}
+          >
+            <Typography
+              variant="h2"
+              color="textPrimary"
+              style={{ marginBottom: '2rem' }}
+            >
+              Import a wallet account from X1 wallet
+            </Typography>
+            <CustomButton
+              style={{ padding: '0.5rem 2rem ' }}
+              onClick={onAddWallet}
+            >
+              Import Wallet
+            </CustomButton>
+          </div>
+        </div>
+      )}
+      <Grid item xs={12}>
+        <Typography
+          variant="h2"
+          style={{ color: theme.palette.secondary.dark }}
+          gutterBottom
+        >
+          Swap
+        </Typography>
+      </Grid>
+      <HorizontalTabs />
+    </Root>
+  );
+};
+
+export default Swap;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx
new file mode 100644
index 00000000..f60a7c5b
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/dialogs/received.tsx
@@ -0,0 +1,161 @@
+import { CallReceived, ContentCopy } from '@mui/icons-material';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+
+import Button from '../../../../../../designSystem/designComponents/buttons/button';
+import CustomDialog from '../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Eth from '../../../../../../designSystem/iconGroups/eth';
+
+const receivedContent = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid container width={'570px'} spacing={'20px'}>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                11/10/2022
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                16:01:23
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textPrimary">
+                Wallet
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                PRASHANT
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Action
+              </Typography>
+              <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+                <Icon
+                  size={16}
+                  viewBox="0 0 30 30"
+                  iconGroup={<CallReceived />}
+                />
+                RESEND
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Status
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'secondary.dark' }}>
+                Success
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Amount
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                <Icon size={30} viewBox="0 0 30 30" iconGroup={<Eth />} />
+                USDC 1.28258 ($ 1.28)
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Fee
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                <Icon size={30} viewBox="0 0 30 30" iconGroup={<Eth />} />
+                ETH 0.00163 ($ 2.09)
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="body2" color="textSecondary">
+                Sender
+              </Typography>
+              <Typography variant="body2" color="textPrimary">
+                1.0xf0e0987897sf6097sd23q3erer45334a USDC 0
+              </Typography>
+            </Grid>
+            <Grid item xs={6} textAlign={'right'}>
+              <Typography variant="body2" color="textSecondary">
+                Receiver
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'secondary.dark' }}>
+                1.0xf0e0987897sf6097sd23q3erer45334a USDC 0
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography variant="body2" color="textSecondary">
+            Transaction Hash
+            <Icon
+              size={16}
+              viewBox="0 0 30 30"
+              iconGroup={<ContentCopy color="secondary" />}
+            />
+          </Typography>
+          <Typography variant="body2" color="textPrimary">
+            0x30a0db8796142rhj1260712g10912631fsd-01273
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid
+            container
+            justifyContent={'center'}
+            alignContent={'center'}
+            alignItems={'center'}
+          >
+            <Grid item>
+              <Button>
+                <Typography
+                  variant="h6"
+                  color="white"
+                  sx={{ padding: '5px 30px' }}
+                >
+                  Exchange
+                </Typography>
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default function received() {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={isOpen}
+      handleClose={onClose}
+      isClosePresent={false}
+      disableEscapeKeyDown
+      restComponents={receivedContent()}
+    />
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
new file mode 100644
index 00000000..b164ee9e
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/NetworkFeeDetails.tsx
@@ -0,0 +1,183 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Divider, Grid, Link, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Changelly from '../../../../../../designSystem/iconGroups/changelly';
+import formatDisplayAmount from '../../../../../../utils/formatDisplayAmount';
+
+type FeeDetailsProps = {
+  fromToken: string;
+  toToken: string;
+  fees: string;
+  exchangeRate: string;
+  result: number;
+  price: number;
+};
+
+const NetworkFeeDetails: React.FC<FeeDetailsProps> = ({
+  fromToken,
+  toToken,
+  fees,
+  exchangeRate,
+  result,
+  price
+}) => {
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={12} sx={{ marginTop: '30px' }}>
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="h5" color="textSecondary">
+                NETWORK FEES
+              </Typography>
+            </Grid>
+            <Grid item xs={6}>
+              <Grid container direction="row" textAlign={'right'}>
+                <Typography
+                  variant="body1"
+                  color="textSecondary"
+                  display={'inline'}
+                >
+                  Medium &nbsp; &#x2022; &nbsp;
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  display={'inline'}
+                >
+                  {`${formatDisplayAmount(fees, 5, true)} ${fromToken}`}
+                  <Link
+                    href="#"
+                    color="secondary"
+                    underline="hover"
+                    padding={1}
+                  >
+                    Change
+                  </Link>
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Divider />
+        </Grid>
+        <Grid item xs={12} sx={{ marginTop: '20px' }}>
+          <Grid container>
+            <Grid item xs={5}>
+              <Typography variant="body1" color="textSecondary">
+                Provider
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+            <Grid item xs={4}>
+              <Typography variant="body1" color="textSecondary">
+                Exchange Rate
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+            <Grid item xs={3}>
+              <Typography
+                variant="body1"
+                color="textSecondary"
+                textAlign={'right'}
+              >
+                Receive
+                <Icon
+                  size={16}
+                  viewBox="0 0 24 21"
+                  iconGroup={<InfoOutlined />}
+                  color="textSecondary"
+                />
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12} paddingTop={2}>
+          <Grid
+            container
+            sx={{
+              padding: '9px 17px',
+              background: '#1F1D1B',
+              border: '0.5px solid #5F5143',
+              borderRadius: '10px'
+            }}
+          >
+            <Grid item xs={5}>
+              <Grid
+                container
+                display={'flex'}
+                alignItems={'center'}
+                spacing={2}
+              >
+                <Grid item>
+                  <Changelly />
+                </Grid>
+                <Grid item>
+                  <Typography variant="body1" color="textPrimary">
+                    Changelly
+                  </Typography>
+                  <Typography variant="body2" color="textSecondary">
+                    No registration required
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={4}>
+              <Grid item>
+                <Typography variant="body1" color="textPrimary">
+                  {`1 ${fromToken} = ${parseFloat(exchangeRate).toFixed(
+                    6
+                  )} ${toToken}`}
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  Fixed
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid item xs={3}>
+              <Grid item>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  textAlign={'right'}
+                >
+                  {`${formatDisplayAmount(result, 5, true)} ${toToken}`}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="textSecondary"
+                  textAlign={'right'}
+                >
+                  {`$${(price * result).toFixed(2)}`}
+                </Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+NetworkFeeDetails.propTypes = {
+  fromToken: PropTypes.string.isRequired,
+  toToken: PropTypes.string.isRequired,
+  fees: PropTypes.string.isRequired,
+  exchangeRate: PropTypes.string.isRequired,
+  result: PropTypes.number.isRequired,
+  price: PropTypes.number.isRequired
+};
+
+export default NetworkFeeDetails;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
new file mode 100644
index 00000000..84629879
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/SwapDetailsForm.tsx
@@ -0,0 +1,308 @@
+import { COINS } from '@cypherock/communication';
+import { SwapVerticalCircle } from '@mui/icons-material';
+import {
+  Box,
+  Chip,
+  FormControl,
+  Grid,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import SwitchButton from '../../../../../../designSystem/designComponents/buttons/switchButton';
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import Input from '../../../../../../designSystem/designComponents/input/input';
+import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import { Wallet } from '../../../../../../store/database';
+import { DisplayCoin } from '../../../../../../store/hooks';
+
+const trimString = (str: string, length: number) => {
+  if (str.length > length) {
+    return str.substring(0, length - 3) + '...';
+  }
+  return str;
+};
+
+type SwapDetailsFormProps = {
+  fromToken: DisplayCoin;
+  setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  toToken: DisplayCoin;
+  setToToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  amountToSend: string;
+  handleChangeAmountToSend: (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
+  classesForm: string;
+  allWallets: Wallet[];
+  amountToReceive: string;
+  price: number;
+  toWallet: Wallet;
+  setToWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWallet: Wallet;
+  setFromWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWalletCoinData: DisplayCoin[];
+  toWalletCoinData: DisplayCoin[];
+};
+
+const SwapDetailsForm: React.FC<SwapDetailsFormProps> = ({
+  fromToken,
+  setFromToken,
+  toToken,
+  setToToken,
+  amountToSend,
+  setAmountToSend,
+  handleChangeAmountToSend,
+  classesForm,
+  allWallets,
+  amountToReceive,
+  price,
+  toWallet,
+  setToWallet,
+  fromWallet,
+  setFromWallet,
+  fromWalletCoinData,
+  toWalletCoinData
+}) => {
+  const [isAmountToSendMax, setIsAmountToSendMax] = useState(false);
+  const [fromTokenSlug, setFromTokenSlug] = useState('');
+  const [toTokenSlug, setToTokenSlug] = useState('');
+
+  const handleChangeFromToken = (event: SelectChangeEvent) => {
+    setFromTokenSlug(event.target.value);
+    setFromToken(
+      fromWalletCoinData.find(coin => coin.slug === event.target.value)
+    );
+  };
+  const handleChangeToToken = (event: SelectChangeEvent) => {
+    setToTokenSlug(event.target.value);
+    setToToken(toWalletCoinData.find(coin => coin.slug === event.target.value));
+  };
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <Box display="flex" gap={1}>
+            <Typography variant="h6" color="textSecondary">
+              From
+            </Typography>
+            {allWallets.map(wallet => (
+              <Tooltip title={wallet.name} key={wallet._id}>
+                <Chip
+                  sx={{ fontSize: '10px', width: '50px' }}
+                  size="small"
+                  color="secondary"
+                  variant={
+                    fromWallet?._id === wallet._id ? 'filled' : 'outlined'
+                  }
+                  label={trimString(wallet.name, 6)}
+                  onClick={() => {
+                    setFromWallet(wallet);
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </Box>
+          <FormControl fullWidth className={classesForm}>
+            <InputLabel id="select-source-helper-label" shrink={false}>
+              {fromToken ? '' : 'Select Source'}
+            </InputLabel>
+            <Select
+              value={fromTokenSlug}
+              onChange={handleChangeFromToken}
+              variant="outlined"
+              labelId="select-source-helper-label"
+            >
+              {fromWalletCoinData
+                .filter(coin => coin.totalBalance !== '0')
+                .map(coin => {
+                  const coinSlugName = coin.slug.toUpperCase();
+                  const coinName = COINS[coin.slug]?.name;
+                  return (
+                    <MenuItem value={coin.slug} key={`from-${coin.slug}`}>
+                      <CoinIcons
+                        initial={coinSlugName}
+                        style={{ marginRight: '10px' }}
+                      />
+                      <ListItemText
+                        primary={coinName}
+                        secondary={`${coin.displayBalance} ${coinSlugName}`}
+                      />
+                    </MenuItem>
+                  );
+                })}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={6}>
+          <Grid container>
+            <Grid
+              container
+              display={'flex'}
+              justifyContent={'flex-end'}
+              alignContent={'center'}
+              alignItems={'center'}
+              gap={2}
+            >
+              <Grid item>
+                <Typography variant="h6" color="textSecondary">
+                  Max
+                </Typography>
+              </Grid>
+              <Grid item>
+                <SwitchButton
+                  completed={isAmountToSendMax}
+                  disabled={fromTokenSlug === ''}
+                  handleChange={() => {
+                    setIsAmountToSendMax(currVal => !currVal);
+                    setAmountToSend(fromToken?.totalBalance || '0');
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Input
+            fullWidth
+            type="number"
+            placeholder="0"
+            value={amountToSend}
+            onChange={handleChangeAmountToSend}
+            className={classesForm}
+          />
+        </Grid>
+      </Grid>
+      <Typography
+        variant="h6"
+        textAlign={'center'}
+        color="textSecondary"
+        gutterBottom
+        sx={{ marginTop: '10px' }}
+      >
+        <Icon
+          size={40}
+          color="textSecondary"
+          viewBox="0 0 40 40"
+          iconGroup={<SwapVerticalCircle />}
+        />
+      </Typography>
+      <Grid container spacing={2} sx={{ marginTop: '-45px' }}>
+        <Grid item xs={6}>
+          <Box display="flex" gap={1}>
+            <Typography variant="h6" color="textSecondary">
+              To
+            </Typography>
+            {allWallets.map(wallet => (
+              <Tooltip title={wallet.name} key={wallet._id}>
+                <Chip
+                  sx={{ fontSize: '10px', width: '50px' }}
+                  size="small"
+                  color="secondary"
+                  variant={toWallet?._id === wallet._id ? 'filled' : 'outlined'}
+                  label={trimString(wallet.name, 6)}
+                  onClick={() => {
+                    setToWallet(wallet);
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </Box>
+          <FormControl fullWidth className={classesForm}>
+            <InputLabel id="select-target-helper-label" shrink={false}>
+              {toToken ? '' : 'Select Target'}
+            </InputLabel>
+            <Select
+              value={toTokenSlug}
+              onChange={handleChangeToToken}
+              labelId="select-target-helper-label"
+              variant="outlined"
+            >
+              {toWalletCoinData.map(coin => {
+                const coinSlugName = coin.slug.toUpperCase();
+                const coinName = COINS[coin.slug]?.name;
+                return (
+                  <MenuItem value={coin.slug} key={`to-${coin.slug}`}>
+                    <CoinIcons
+                      initial={coinSlugName}
+                      style={{ marginRight: '10px' }}
+                    />
+                    <ListItemText primary={coinName} secondary={coinSlugName} />
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={6}>
+          <Grid container>
+            <Grid
+              container
+              display={'flex'}
+              justifyContent={'flex-end'}
+              alignContent={'center'}
+              alignItems={'center'}
+              gap={2}
+            >
+              <Grid item>
+                <Typography variant="h6" color="textSecondary">
+                  Max
+                </Typography>
+              </Grid>
+              <Grid item>
+                <SwitchButton
+                  completed={false}
+                  handleChange={() => {
+                    //   empty
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Box
+            border={'0.5px solid #CDCDCD'}
+            borderRadius="5px"
+            marginTop="10px"
+            padding="5px 10px"
+            textAlign="right"
+          >
+            <Typography variant="body1" color="textSecondary">
+              {amountToReceive}
+            </Typography>
+            <Typography variant="body2" color="textSecondary">
+              $ {(+amountToReceive * price).toFixed(2)}
+            </Typography>
+          </Box>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+SwapDetailsForm.propTypes = {
+  fromToken: PropTypes.any,
+  setFromToken: PropTypes.func.isRequired,
+  toToken: PropTypes.any,
+  setToToken: PropTypes.func.isRequired,
+  amountToSend: PropTypes.string.isRequired,
+  handleChangeAmountToSend: PropTypes.func.isRequired,
+  setAmountToSend: PropTypes.func.isRequired,
+  classesForm: PropTypes.string.isRequired,
+  allWallets: PropTypes.array.isRequired,
+  amountToReceive: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+  toWallet: PropTypes.any,
+  setToWallet: PropTypes.func.isRequired,
+  fromWallet: PropTypes.any,
+  setFromWallet: PropTypes.func.isRequired,
+  fromWalletCoinData: PropTypes.array.isRequired,
+  toWalletCoinData: PropTypes.array.isRequired
+};
+
+export default SwapDetailsForm;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
new file mode 100644
index 00000000..4d476223
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/SwapCompletedDialog.tsx
@@ -0,0 +1,130 @@
+import SecurityTwoToneIcon from '@mui/icons-material/SecurityTwoTone';
+import { Grid, Link, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { shell } from 'electron';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
+import CheckmarkSuccess from '../../../../../../../designSystem/iconGroups/checkmarkSuccess';
+
+const CHANGELLY_TRACKING_URL = 'https://changelly.com/track';
+
+type SwapCompletedDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  toTokenName: string;
+  transactionId: string;
+};
+
+const getSwapCompletedDialogContent = (
+  toTokenName: string,
+  transactionId: string
+) => {
+  const openChangellyTracking = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    shell.openExternal(`${CHANGELLY_TRACKING_URL}/${transactionId}`);
+  };
+
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      padding={'70px 70px 50px 70px'}
+    >
+      <Box width={'460px'}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignContent="center"
+          alignItems="center"
+          sx={{ background: '#1C1F22', padding: '12px' }}
+        >
+          <Icon
+            size={50}
+            viewBox="0 0 30 30"
+            iconGroup={<CheckmarkSuccess />}
+          />
+          <Typography variant="h4" sx={{ color: 'secondary.dark' }}>
+            Pending Operation
+          </Typography>
+          <Typography variant="body2" color="textSecondary" marginTop={'10px'}>
+            Your Swap operation has been sent to the network for confirmation.
+            It may take up to an hour before you receive your {toTokenName}.
+          </Typography>
+        </Box>
+        <Grid container marginTop="50px">
+          <Grid
+            item
+            xs={8}
+            display="flex"
+            alignItems="center"
+            alignContent="center"
+            justifyContent={'space-between'}
+          >
+            <Icon
+              size={80}
+              viewBox="0 0 30 30"
+              iconGroup={<SecurityTwoToneIcon />}
+            />
+            <Typography variant="body2" color="textPrimary">
+              Take note of your Swap ID number in case you'd need assistance
+              from
+              <Link
+                href="#"
+                onClick={openChangellyTracking}
+                color="secondary"
+                underline="hover"
+                padding={1}
+              >
+                Track your transaction.
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item xs={4} display="flex" justifyContent={'flex-end'}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                sx={{
+                  background: '#2D3236',
+                  borderRadius: '27px',
+                  padding: '4px 8px'
+                }}
+              >
+                {transactionId}
+              </Typography>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+const SwapCompletedDialog: React.FC<SwapCompletedDialogProps> = ({
+  open,
+  onClose,
+  toTokenName,
+  transactionId
+}) => {
+  return (
+    <CustomDialog
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      disableEscapeKeyDown
+      restComponents={getSwapCompletedDialogContent(toTokenName, transactionId)}
+    />
+  );
+};
+
+SwapCompletedDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  toTokenName: PropTypes.string.isRequired,
+  transactionId: PropTypes.string.isRequired
+};
+
+export default SwapCompletedDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
new file mode 100644
index 00000000..d627c6cc
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySendAddressDialog.tsx
@@ -0,0 +1,81 @@
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Box, Typography } from '@mui/material';
+import { shell } from 'electron';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Button from '../../../../../../../designSystem/designComponents/buttons/button';
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const getVerifySendAddressDialogContent = (
+  url: string,
+  onVerify: () => void
+): JSX.Element => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      padding={'70px 70px 50px 70px'}
+    >
+      <Box
+        width={'400px'}
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <CheckCircleOutlinedIcon color="secondary" fontSize="large" />
+        <Typography variant="h4" sx={{ color: 'secondary.dark' }}>
+          Verify Send Address
+        </Typography>
+        <Typography variant="body2" color="textSecondary" marginTop={'10px'}>
+          Visit the changelly website to verify the address you are sending to.
+        </Typography>
+        <Button
+          onClick={() => {
+            shell.openExternal(url);
+            onVerify();
+          }}
+          sx={{ marginTop: '20px' }}
+        >
+          <Typography
+            variant="body1"
+            color="textPrimary"
+            sx={{ padding: '5px 10px' }}
+          >
+            Visit Website <OpenInNewIcon fontSize="inherit" />
+          </Typography>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+type VerifySendAddressDialogProps = {
+  open: boolean;
+  onVerify: () => void;
+  url: string;
+};
+
+const VerifySendAddressDialog: React.FC<VerifySendAddressDialogProps> = ({
+  open,
+  onVerify,
+  url
+}): JSX.Element => {
+  return (
+    <CustomDialog
+      open={open}
+      handleClose={onVerify}
+      isClosePresent={true}
+      restComponents={getVerifySendAddressDialogContent(url, onVerify)}
+    />
+  );
+};
+
+VerifySendAddressDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onVerify: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired
+};
+
+export default VerifySendAddressDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
new file mode 100644
index 00000000..6168202a
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/dialogs/VerifySwapDetailsDialog.tsx
@@ -0,0 +1,303 @@
+import { InfoOutlined, OpenInNew } from '@mui/icons-material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import LoadingIcon from '@mui/icons-material/Loop';
+import { Grid, Link, Typography } from '@mui/material';
+import { Box, keyframes } from '@mui/system';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+import Icon from '../../../../../../../designSystem/designComponents/icons/Icon';
+import CoinIcons from '../../../../../../../designSystem/genericComponents/coinIcons';
+import Changelly from '../../../../../../../designSystem/iconGroups/changelly';
+import {
+  ReceiveFlowSteps,
+  SendFlowSteps
+} from '../../../../../../../store/hooks/helper/FlowSteps';
+
+const rotateKeyframe = keyframes`
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(-360deg);
+  }
+`;
+
+const receiveFlowStepsMessages: {
+  [key in ReceiveFlowSteps]: string;
+} = {
+  [ReceiveFlowSteps.EnterPinAndTapCard]: 'Pin entered and card tapped',
+  [ReceiveFlowSteps.VerifyReceiveAddress]: 'Receive address verified',
+  [ReceiveFlowSteps.Completed]: 'Receive flow completed'
+};
+
+const sendFlowStepsMessages: {
+  [key in SendFlowSteps]: string;
+} = {
+  [SendFlowSteps.Waiting]: 'Waiting for receive flow',
+  [SendFlowSteps.VerifySendAddress]: 'Verify sending address',
+  [SendFlowSteps.EnterPin]: 'Pin entered',
+  [SendFlowSteps.TapCard]: 'Card tapped',
+  [SendFlowSteps.SignTransaction]: 'Signing transaction',
+  [SendFlowSteps.Completed]: 'Send flow completed'
+};
+
+function getFlowSteps<Type extends number>(
+  currentStep: Type,
+  lastStep: Type,
+  messages: {
+    [key in Type]: string;
+  }
+): JSX.Element {
+  return (
+    <Box>
+      <Typography
+        variant="body1"
+        color="textPrimary"
+        marginTop="20px"
+        display={'flex'}
+        alignItems={'center'}
+        gap={1}
+      >
+        {currentStep === lastStep ? (
+          <CheckCircleOutlineIcon color="success" />
+        ) : (
+          <LoadingIcon
+            sx={{
+              animation: `${rotateKeyframe} 1500ms linear infinite`
+            }}
+          />
+        )}
+        {messages[currentStep]}
+      </Typography>
+    </Box>
+  );
+}
+
+type VerifySwapDetailsDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  amountToSend: string;
+  amountToReceive: string;
+  networkFees: string;
+  sourceCoinSlug: string;
+  sourceCoinName: string;
+  targetCoinSlug: string;
+  targetCoinName: string;
+  receiveAddress: string;
+  receiveFlowStep: ReceiveFlowSteps;
+  sendFlowStep: SendFlowSteps;
+};
+
+const VerifySwapDetailsDialog: React.FC<VerifySwapDetailsDialogProps> = ({
+  open,
+  onClose,
+  amountToSend,
+  amountToReceive,
+  networkFees,
+  sourceCoinSlug,
+  sourceCoinName,
+  targetCoinSlug,
+  targetCoinName,
+  receiveAddress,
+  receiveFlowStep,
+  sendFlowStep
+}) => {
+  const getVerifySwapDetailsDialogContent = () => {
+    return (
+      <Box
+        display="flex"
+        justifyContent={'center'}
+        padding={'70px 70px 50px 70px'}
+      >
+        <Box width={'460px'}>
+          <Box display="flex" sx={{ background: '#1C1F22', padding: '12px' }}>
+            <Icon
+              size={70}
+              viewBox="0 0 30 30"
+              iconGroup={<InfoOutlined />}
+              color="textPrimary"
+            />
+            <Typography variant="body1">
+              Verify the Swap details on your device before sending it. The
+              addresses are exchanged securely so you don't have to verify them.
+              <Link href="#" color="secondary" underline="hover" padding={1}>
+                Learn more <OpenInNew fontSize="inherit" />
+              </Link>
+            </Typography>
+          </Box>
+          <Grid container>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Amount to send
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {amountToSend} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Amount to receive
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {amountToReceive} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Provider
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <Changelly />
+                Changelly
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Network Fees
+              </Typography>
+              <Typography variant="body1" color="textPrimary">
+                {networkFees} {sourceCoinSlug}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Source account
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <CoinIcons initial={sourceCoinSlug} size="sm" />
+                {sourceCoinName}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              display="flex"
+              justifyContent={'space-between'}
+              marginTop="20px"
+            >
+              <Typography variant="body1" color="textSecondary">
+                Target account
+              </Typography>
+              <Typography
+                variant="body1"
+                color="textPrimary"
+                display={'flex'}
+                alignItems={'center'}
+                gap={1}
+              >
+                <CoinIcons initial={targetCoinSlug} size="sm" />
+                {targetCoinName}
+              </Typography>
+            </Grid>
+            {receiveAddress && (
+              <Grid
+                item
+                xs={12}
+                display="flex"
+                justifyContent={'space-between'}
+                marginTop="20px"
+              >
+                <Typography variant="body1" color="textSecondary">
+                  Receiving address
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="textPrimary"
+                  display={'flex'}
+                  alignItems={'center'}
+                  gap={1}
+                >
+                  {receiveAddress}
+                </Typography>
+              </Grid>
+            )}
+          </Grid>
+          {getFlowSteps<ReceiveFlowSteps>(
+            receiveFlowStep,
+            ReceiveFlowSteps.Completed,
+            receiveFlowStepsMessages
+          )}
+          {getFlowSteps<SendFlowSteps>(
+            sendFlowStep,
+            SendFlowSteps.Completed,
+            sendFlowStepsMessages
+          )}
+        </Box>
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      <CustomDialog
+        open={open}
+        handleClose={onClose}
+        isClosePresent={true}
+        disableEscapeKeyDown
+        restComponents={getVerifySwapDetailsDialogContent()}
+      />
+    </>
+  );
+};
+
+VerifySwapDetailsDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  amountToSend: PropTypes.string.isRequired,
+  amountToReceive: PropTypes.string.isRequired,
+  networkFees: PropTypes.string.isRequired,
+  sourceCoinSlug: PropTypes.string.isRequired,
+  sourceCoinName: PropTypes.string.isRequired,
+  targetCoinSlug: PropTypes.string.isRequired,
+  targetCoinName: PropTypes.string.isRequired,
+  receiveAddress: PropTypes.string,
+  receiveFlowStep: PropTypes.number.isRequired,
+  sendFlowStep: PropTypes.number.isRequired
+};
+
+export default VerifySwapDetailsDialog;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
new file mode 100644
index 00000000..85bbae2d
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/exchange/index.tsx
@@ -0,0 +1,198 @@
+import { COINS } from '@cypherock/communication';
+import { Grid, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+
+import Button from '../../../../../../designSystem/designComponents/buttons/button';
+import { useExchange } from '../../../../../../store/hooks';
+import { ReceiveFlowSteps } from '../../../../../../store/hooks/helper/FlowSteps';
+
+import SwapCompletedDialog from './dialogs/SwapCompletedDialog';
+import VerifySendAddressDialog from './dialogs/VerifySendAddressDialog';
+import VerifySwapDetailsDialog from './dialogs/VerifySwapDetailsDialog';
+import NetworkFeeDetails from './NetworkFeeDetails';
+import SwapDetailsForm from './SwapDetailsForm';
+
+const PREFIX = 'ExchangePanel';
+
+const classes = {
+  form: `${PREFIX}-form`
+};
+
+const Root = styled('div')(() => ({
+  [`& .${classes.form}`]: {
+    marginTop: '10px',
+    border: '0.5px solid #CDCDCD',
+    borderRadius: '5px',
+    '& .MuiSelect-select': {
+      display: 'flex',
+      alignItems: 'center',
+      alignContents: 'center',
+      width: '250px',
+      height: '20px'
+    },
+    '& .MuiOutlinedInput-input': {
+      textAlign: 'right'
+    }
+  }
+}));
+
+const ExchangePanel = () => {
+  const {
+    fromToken,
+    setFromToken,
+    toToken,
+    setToToken,
+    amountToSend,
+    setAmountToSend,
+    exchangeRate,
+    fees,
+    amountToReceive,
+    startReceiveFlow,
+    cancelSwapTransaction,
+    receiveFlowStep,
+    sendFlowStep,
+    receiveAddress,
+    isSwapCompleted,
+    swapTransaction,
+    handleUserVerifiedSendAddress,
+    toWallet,
+    setToWallet,
+    fromWallet,
+    setFromWallet,
+    fromWalletCoinData,
+    toWalletCoinData,
+    allWallets
+  } = useExchange();
+
+  const [showSwapCompletedDialog, setSwapCompletedDialog] = useState(false);
+  const [showSendAddressVerifyDialog, setShowSendAddressVerifyDialog] =
+    useState(false);
+  const [showSwapDetailsVerifyDialog, setShowSwapDetailsVerifyDialog] =
+    useState(false);
+
+  useEffect(() => {
+    if (isSwapCompleted) {
+      setShowSwapDetailsVerifyDialog(false);
+      setSwapCompletedDialog(true);
+    }
+  }, [isSwapCompleted]);
+
+  useEffect(() => {
+    if (
+      swapTransaction.payinAddress &&
+      receiveFlowStep === ReceiveFlowSteps.Completed
+    ) {
+      setShowSendAddressVerifyDialog(true);
+    }
+  }, [swapTransaction, receiveFlowStep]);
+
+  const handleChangeAmountToSend = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setAmountToSend(event.target.value);
+  };
+
+  return (
+    <Root>
+      {
+        <SwapDetailsForm
+          fromToken={fromToken}
+          setFromToken={setFromToken}
+          toToken={toToken}
+          setToToken={setToToken}
+          amountToSend={amountToSend}
+          setAmountToSend={setAmountToSend}
+          handleChangeAmountToSend={handleChangeAmountToSend}
+          classesForm={classes.form}
+          allWallets={allWallets}
+          amountToReceive={amountToReceive || '0'}
+          price={toToken?.price || 0}
+          toWallet={toWallet}
+          setToWallet={setToWallet}
+          fromWallet={fromWallet}
+          fromWalletCoinData={fromWalletCoinData}
+          toWalletCoinData={toWalletCoinData}
+          setFromWallet={setFromWallet}
+        />
+      }
+      {amountToReceive && (
+        <>
+          {
+            <NetworkFeeDetails
+              fromToken={fromToken.slug.toUpperCase()}
+              toToken={toToken.slug.toUpperCase()}
+              fees={fees}
+              exchangeRate={exchangeRate}
+              result={+amountToReceive}
+              price={toToken.price}
+            />
+          }
+          <Grid
+            container
+            justifyContent={'center'}
+            alignContent={'center'}
+            alignItems={'center'}
+            paddingTop={3}
+          >
+            <Grid item>
+              <Button
+                onClick={() => {
+                  setShowSwapDetailsVerifyDialog(true);
+                  startReceiveFlow();
+                }}
+              >
+                <Typography
+                  variant="h5"
+                  color="textPrimary"
+                  sx={{ padding: '5px 30px' }}
+                >
+                  Exchange
+                </Typography>
+              </Button>
+            </Grid>
+          </Grid>
+        </>
+      )}
+      {showSwapDetailsVerifyDialog && (
+        <VerifySwapDetailsDialog
+          open={showSwapDetailsVerifyDialog}
+          onClose={() => {
+            cancelSwapTransaction();
+            setShowSwapDetailsVerifyDialog(false);
+          }}
+          amountToSend={amountToSend}
+          amountToReceive={amountToReceive}
+          networkFees={fees}
+          sourceCoinSlug={fromToken.slug.toUpperCase()}
+          sourceCoinName={COINS[fromToken.slug]?.name}
+          targetCoinSlug={toToken.slug.toUpperCase()}
+          targetCoinName={COINS[toToken.slug]?.name}
+          receiveAddress={receiveAddress}
+          receiveFlowStep={receiveFlowStep}
+          sendFlowStep={sendFlowStep}
+        />
+      )}
+      {showSwapCompletedDialog && (
+        <SwapCompletedDialog
+          open={showSwapCompletedDialog}
+          onClose={() => {
+            setSwapCompletedDialog(false);
+          }}
+          toTokenName={COINS[toToken.slug]?.name}
+          transactionId={swapTransaction.id}
+        />
+      )}
+      <VerifySendAddressDialog
+        open={showSendAddressVerifyDialog}
+        onVerify={() => {
+          handleUserVerifiedSendAddress();
+          setShowSendAddressVerifyDialog(false);
+        }}
+        url={`https://changelly.com/track/${swapTransaction.id}`}
+      />
+    </Root>
+  );
+};
+
+export default ExchangePanel;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
new file mode 100644
index 00000000..dc111689
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/ExchangeProgress.tsx
@@ -0,0 +1,177 @@
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import DownloadIcon from '@mui/icons-material/Download';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import LoadingIcon from '@mui/icons-material/Loop';
+import { Grid, Link, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import LinearProgress from '@mui/material/LinearProgress';
+import withStyles from '@mui/styles/withStyles';
+import { Box } from '@mui/system';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const CustomLinearProgress = withStyles(() => ({
+  root: {
+    height: 8,
+    borderRadius: 5
+  }
+}))(LinearProgress);
+
+const steps = [
+  {
+    icon: <CheckCircleIcon fontSize="inherit" />,
+    title: 'Confirmation in progress',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          Once USDC is confirmed in the blockchain. we'll start exchanging it in
+          ETH.
+        </Typography>
+        <Box display="flex" alignItems="center" padding={0}>
+          <Typography variant="body2">
+            <Link href="#" color="secondary" underline="hover" padding={1}>
+              See input hash in explorer
+            </Link>
+          </Typography>
+          <HelpOutlineIcon
+            sx={{
+              color: 'textSecondary',
+              height: '18px',
+              width: '18px'
+            }}
+          />
+        </Box>
+      </>
+    )
+  },
+  {
+    icon: <LoadingIcon fontSize="inherit" />,
+    title: 'Exchanging USDC to ETH',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          The process will take a few minutes. Please wait.
+        </Typography>
+      </>
+    )
+  },
+  {
+    icon: <DownloadIcon fontSize="inherit" />,
+    title: 'Sending funds to your wallet',
+    component: (
+      <>
+        <Typography variant="body2" color="textSecondary">
+          Once the transaction is completed, your ETH will be sent to your
+          crypto wallet. Typically, it takes a few minutes for your funds to
+          show up.
+        </Typography>
+      </>
+    )
+  }
+];
+
+const getExchangeProgressContent = (currrentStatus: number): JSX.Element => {
+  const [progress, setProgress] = useState(0);
+  const totalStatus = steps.length;
+
+  useEffect(() => {
+    setProgress(+((currrentStatus / totalStatus) * 100).toFixed(0));
+  }, [currrentStatus]);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid container width={'570px'} spacing={'20px'}>
+        <Grid item xs={12}>
+          <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
+            Exchange
+          </Typography>
+          <CustomLinearProgress
+            variant="determinate"
+            value={+progress}
+            style={{ width: '100%' }}
+            color="secondary"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={3}>
+            {steps.map((step, index) => (
+              <Grid
+                item
+                xs={12}
+                display="flex"
+                gap={1}
+                key={`exchangeProgess-${index}`}
+              >
+                <Typography
+                  variant="h1"
+                  color={
+                    index <= currrentStatus ? 'textPrimary' : 'textSecondary'
+                  }
+                  display="flex"
+                  alignItems="center"
+                >
+                  {index === currrentStatus ? (
+                    <CircularProgress
+                      color="success"
+                      size={30}
+                      sx={{ marginLeft: '6px', marginRight: '4px' }}
+                    />
+                  ) : (
+                    { ...step.icon }
+                  )}
+                </Typography>
+                <Box>
+                  <Typography
+                    variant="h6"
+                    color={
+                      index <= currrentStatus ? 'textPrimary' : 'textSecondary'
+                    }
+                  >
+                    {step.title}
+                  </Typography>
+                  {step.component}
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+type ExchangeProgressProps = {
+  open: boolean;
+  onClose: () => void;
+  progress: number;
+};
+
+const ExchangeProgress: React.FC<ExchangeProgressProps> = ({
+  open,
+  onClose,
+  progress
+}) => {
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={open}
+      handleClose={onClose}
+      isClosePresent={true}
+      restComponents={getExchangeProgressContent(progress)}
+    />
+  );
+};
+
+ExchangeProgress.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  progress: PropTypes.number.isRequired
+};
+
+export default ExchangeProgress;
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
new file mode 100644
index 00000000..911d14b7
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/dialogs/TransactionDetails.tsx
@@ -0,0 +1,98 @@
+import { Divider, Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+
+import CustomDialog from '../../../../../../../designSystem/designComponents/dialog/dialogBox';
+
+const transactionDetailsContent = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent={'center'}
+      margin={'70px 70px 50px 70px'}
+    >
+      <Grid
+        container
+        width={'470px'}
+        spacing={'20px'}
+        display="flex"
+        flexDirection="column"
+      >
+        <Typography variant="h5" sx={{ color: 'secondary.dark' }}>
+          Transaction Details
+        </Typography>
+        <Divider
+          variant="middle"
+          style={{ margin: '20px 0px', background: 'secondary.dark' }}
+        />
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Transaction ID
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              dym93xarif1oh5qw
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              You Sent
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              18 USDC
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Changelly address (USDC)
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              0xd46-087324h28323h2sacr4w5
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Recipient
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              0xfj3490had97634fd012-y31sfsd812
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Divider
+              variant="middle"
+              style={{ background: 'secondary.dark' }}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body2" color="textSecondary">
+              Exchange Rate
+            </Typography>
+            <Typography variant="h5" color="textPrimary">
+              1 USDC ~ 0.00076757 ETH
+            </Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default function transactionDetails() {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <CustomDialog
+      maxWidth={'lg'}
+      open={isOpen}
+      handleClose={onClose}
+      isClosePresent={false}
+      disableEscapeKeyDown
+      restComponents={transactionDetailsContent()}
+    />
+  );
+}
diff --git a/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
new file mode 100644
index 00000000..26f0e924
--- /dev/null
+++ b/cysync/src/pages/mainApp/sidebar/swap/panels/history/index.tsx
@@ -0,0 +1,387 @@
+import { COINS } from '@cypherock/communication';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Button, Grid, Typography } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import Icon from '../../../../../../designSystem/designComponents/icons/Icon';
+import DropMenu from '../../../../../../designSystem/designComponents/menu/DropMenu';
+import colors from '../../../../../../designSystem/designConstants/colors';
+import CoinIcons from '../../../../../../designSystem/genericComponents/coinIcons';
+import Download from '../../../../../../designSystem/iconGroups/download';
+import Swap from '../../../../../../designSystem/iconGroups/swap';
+import { useExchange } from '../../../../../../store/hooks';
+import { useWallets } from '../../../../../../store/provider';
+import csvDownloader from '../../../../../../utils/csvDownloader';
+
+import ExchangeProgress from './dialogs/ExchangeProgress';
+
+type HistoryItem = {
+  date: string;
+  txns: Array<{
+    id: string;
+    time: string;
+    currencyFrom: string;
+    currencyTo: string;
+    amount: string;
+    fees: string;
+    status: string;
+  }>;
+};
+
+// tslint:disable-next-line: no-any
+const formatRawTransactions = (rawTransactions: any[], columns: string[]) => {
+  const formattedRawTransactions = rawTransactions.map(
+    // tslint:disable-next-line: no-any
+    (rawTransaction: any) => {
+      const txn: {
+        [key in string]: string | number | null;
+      } = {};
+      columns.forEach(key => (txn[key] = rawTransaction[key]));
+      return txn;
+    }
+  );
+
+  const headers: { [key in string]: string } = {};
+  columns.forEach(key => (headers[key] = key));
+
+  formattedRawTransactions.unshift(headers);
+  return formattedRawTransactions;
+};
+
+const groupTransactionsByDate = (
+  transactions: Array<{
+    date: string;
+    walletId: string;
+    id: string;
+    time: string;
+    currencyFrom: string;
+    currencyTo: string;
+    amountExpectedFrom: string;
+    changellyFee: string;
+    status: string;
+  }>
+) => {
+  const groupedTransactions: HistoryItem[] = [];
+  transactions.forEach(transaction => {
+    const date = transaction.date;
+    const newTxn = {
+      id: transaction.id,
+      time: transaction.time,
+      currencyFrom: transaction.currencyFrom,
+      currencyTo: transaction.currencyTo,
+      amount: transaction.amountExpectedFrom,
+      fees: transaction.changellyFee,
+      status: transaction.status
+    };
+    const index = groupedTransactions.findIndex(
+      groupedTransaction => groupedTransaction.date === date
+    );
+
+    if (index === -1) {
+      groupedTransactions.push({
+        date,
+        txns: [newTxn]
+      });
+    } else {
+      groupedTransactions[index].txns.push(newTxn);
+    }
+  });
+  return groupedTransactions;
+};
+
+const HistoryPanel = () => {
+  const { allWallets, isLoading } = useWallets();
+  const { getSwapTransactions } = useExchange();
+  const [rawTransactions, setRawTransactions] = useState([]);
+  const [selectedWalletIndex, setSelectedWalletIndex] = useState(0);
+  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
+  const [transactionProgress, setTransactionProgress] = useState(0);
+  const [isExchangeProgressOpen, setIsExchangeProgressOpen] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    const getTransactions = async (walletIds: string[]) => {
+      // tslint:disable-next-line: no-any
+      const txns: any[] = [];
+      for (const walletId of walletIds) {
+        const transactions = await getSwapTransactions(walletId);
+        /* tslint:disable-next-line */
+        const newTxns = transactions.map(
+          ({ createdAt, ...transaction }: any) => {
+            const txnCreatedAt = new Date(createdAt * 1000);
+            const date = txnCreatedAt.toLocaleDateString();
+            const time = txnCreatedAt.toLocaleTimeString();
+            return {
+              date,
+              time,
+              ...transaction
+            };
+          }
+        );
+        txns.push(...newTxns);
+      }
+      setRawTransactions(txns);
+      setHistoryItems(groupTransactionsByDate(txns));
+    };
+
+    if (isLoading) return;
+
+    if (selectedWalletIndex === 0)
+      getTransactions(allWallets.map(wallet => wallet._id));
+    else getTransactions([allWallets[selectedWalletIndex - 1]._id]);
+  }, [isLoading, allWallets, selectedWalletIndex]);
+
+  const handleWalletChange = (selectedIndex: number) => {
+    setSelectedWalletIndex(selectedIndex);
+  };
+
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={12}>
+          <Grid
+            container
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item>
+              {allWallets[0].name !== '' && (
+                <DropMenu
+                  options={[
+                    'All Wallets',
+                    ...allWallets.map(wallet => wallet.name)
+                  ]}
+                  handleMenuItemSelectionChange={handleWalletChange}
+                  index={selectedWalletIndex}
+                  bg={false}
+                  style={{ marginRight: '10px' }}
+                />
+              )}
+            </Grid>
+            <Grid item>
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'secondary.dark'
+                }}
+                textAlign={'right'}
+              >
+                <Button
+                  startIcon={<Download />}
+                  color="secondary"
+                  onClick={() => {
+                    csvDownloader(
+                      formatRawTransactions(rawTransactions, [
+                        'id',
+                        'createdAt',
+                        'moneyReceived',
+                        'moneySent',
+                        'rate',
+                        'status',
+                        'currencyFrom',
+                        'currencyTo',
+                        'payinAddress',
+                        'payoutAddress',
+                        'amountExpectedFrom',
+                        'amountExpectedTo',
+                        'networkFee',
+                        'changellyFee'
+                      ]),
+                      `CySync-Swap-History-${new Date().toLocaleDateString()}.csv`
+                    );
+                  }}
+                  sx={{
+                    borderRadius: '40px',
+                    padding: '10px 20px'
+                  }}
+                >
+                  {/* <Download /> */}
+                  &nbsp; Export operations
+                </Button>
+              </Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            marginTop: '13px',
+            padding: '12px 0px 12px 12px',
+            alignItems: 'center',
+            background: '#1C1F22',
+            display: 'flex'
+          }}
+        >
+          <Icon
+            size={20}
+            viewBox="0 0 30 30"
+            iconGroup={<InfoOutlinedIcon color="secondary" />}
+          />
+          <Typography variant="body1" sx={{ color: 'secondary.dark' }}>
+            Your swap desktop transactions are not synchronized with the Ledger
+            Live mobile application
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid
+            container
+            marginTop={'40px'}
+            sx={{ maxHeight: '45vh', overflow: 'auto' }}
+          >
+            {historyItems.map((item, index) => (
+              <Grid
+                item
+                xs={12}
+                key={index}
+                marginTop={'20px'}
+                sx={{ cursor: 'pointer' }}
+              >
+                <Typography variant="body1" color="textSecondary">
+                  {item.date}
+                </Typography>
+                {item.txns.map(txn => (
+                  <Grid
+                    key={txn.id}
+                    item
+                    xs={12}
+                    marginTop={'20px'}
+                    onClick={() => {
+                      // Possible Changelly status from:
+                      // https://github.com/changelly/api-changelly#getting-exchange-status
+                      switch (txn.status) {
+                        case 'finished':
+                          setTransactionProgress(2);
+                          break;
+                        case 'sending' || 'exchanging':
+                          setTransactionProgress(3);
+                          break;
+                        default:
+                          setTransactionProgress(0);
+                      }
+                      setIsExchangeProgressOpen(true);
+                    }}
+                  >
+                    <Grid
+                      container
+                      display={'flex'}
+                      justifyContent="space-around"
+                      sx={{
+                        border: '0.5px solid #433F3B',
+                        borderRadius: '10px',
+                        padding: '9px 17px 8px'
+                      }}
+                    >
+                      <Grid
+                        item
+                        xs={3}
+                        display="flex"
+                        alignContent={'center'}
+                        alignItems={'center'}
+                      >
+                        <Icon
+                          size={20}
+                          viewBox="0 0 16 15"
+                          iconGroup={<Swap color={colors.text.secondary} />}
+                        />
+                        <Grid item>
+                          <Typography variant="body1" color="textPrimary">
+                            Changelly
+                          </Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            {txn.time}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                      <Grid
+                        item
+                        xs={6}
+                        display="flex"
+                        alignContent={'center'}
+                        alignItems={'center'}
+                      >
+                        <Grid
+                          container
+                          display={'flex'}
+                          justifyContent={'space-around'}
+                        >
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                          >
+                            <CoinIcons
+                              initial={txn.currencyFrom.toUpperCase()}
+                              style={{ marginRight: '10px' }}
+                            />
+                            <Typography variant="body1" color="textPrimary">
+                              {COINS[txn.currencyFrom]?.name}
+                            </Typography>
+                          </Grid>
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                            marginLeft={'5px'}
+                          >
+                            <ArrowForwardIcon
+                              sx={{ color: 'text.secondary' }}
+                            />
+                          </Grid>
+                          <Grid
+                            item
+                            display={'flex'}
+                            alignContent={'center'}
+                            alignItems={'center'}
+                          >
+                            <CoinIcons
+                              initial={txn.currencyTo.toUpperCase()}
+                              style={{ marginRight: '10px' }}
+                            />
+                            <Typography variant="body1" color="textPrimary">
+                              {COINS[txn.currencyTo]?.name}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item xs={3}>
+                        <Grid
+                          container
+                          display={'flex'}
+                          justifyContent={'flex-end'}
+                        >
+                          <Grid item textAlign={'right'}>
+                            <Typography
+                              variant="body1"
+                              sx={{ color: '#16953A' }}
+                            >
+                              +{txn.amount}
+                            </Typography>
+                            <Typography variant="body2" color="textSecondary">
+                              -{txn.fees} {txn.currencyFrom.toUpperCase()}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                ))}
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+      <ExchangeProgress
+        open={isExchangeProgressOpen}
+        onClose={() => setIsExchangeProgressOpen(false)}
+        progress={transactionProgress}
+      />
+    </>
+  );
+};
+
+export default HistoryPanel;
diff --git a/cysync/src/store/hooks/helper/FlowSteps.ts b/cysync/src/store/hooks/helper/FlowSteps.ts
new file mode 100644
index 00000000..5444519f
--- /dev/null
+++ b/cysync/src/store/hooks/helper/FlowSteps.ts
@@ -0,0 +1,14 @@
+export enum ReceiveFlowSteps {
+  EnterPinAndTapCard,
+  VerifyReceiveAddress,
+  Completed
+}
+
+export enum SendFlowSteps {
+  Waiting,
+  VerifySendAddress,
+  EnterPin,
+  TapCard,
+  SignTransaction,
+  Completed
+}
diff --git a/cysync/src/store/hooks/index.ts b/cysync/src/store/hooks/index.ts
index 8745efe1..3c4432d3 100644
--- a/cysync/src/store/hooks/index.ts
+++ b/cysync/src/store/hooks/index.ts
@@ -7,3 +7,4 @@ export * from './useToken';
 export * from './useCustomAccount';
 export * from './useTransactionData';
 export * from './useWalletData';
+export * from './useExchange';
diff --git a/cysync/src/store/hooks/useExchange.ts b/cysync/src/store/hooks/useExchange.ts
new file mode 100644
index 00000000..9727feea
--- /dev/null
+++ b/cysync/src/store/hooks/useExchange.ts
@@ -0,0 +1,361 @@
+import { COINS } from '@cypherock/communication';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
+import logger from '../../mainProcess/logger';
+import { coinDb, customAccountDb, Wallet } from '../database';
+import {
+  changeFormatOfOutputList,
+  DisplayCoin,
+  useReceiveTransaction,
+  useSendTransaction,
+  useWalletData
+} from '../hooks';
+import { useConnection, useWallets } from '../provider';
+
+import { ReceiveFlowSteps, SendFlowSteps } from './helper/FlowSteps';
+
+// TODO: get the base URL from the config
+const baseUrl = 'http://localhost:5000/swap';
+
+export interface UseExchangeValues {
+  fromToken: DisplayCoin;
+  setFromToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  toToken: DisplayCoin;
+  setToToken: React.Dispatch<React.SetStateAction<DisplayCoin>>;
+  amountToSend: string;
+  setAmountToSend: React.Dispatch<React.SetStateAction<string>>;
+  exchangeRate: string;
+  fees: string;
+  amountToReceive: string;
+  receiveAddress: string;
+  // tslint:disable-next-line: no-any
+  getSwapTransactions: (walletId: string) => Promise<any>;
+  startReceiveFlow: () => void;
+  generateSwapTransaction: () => Promise<void>;
+  startSendFlow: () => void;
+  cancelSwapTransaction: () => void;
+  isSwapCompleted: boolean;
+  // tslint:disable-next-line: no-any
+  swapTransaction: any;
+  handleUserVerifiedSendAddress: () => void;
+  toWallet: Wallet;
+  setToWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWallet: Wallet;
+  setFromWallet: React.Dispatch<React.SetStateAction<Wallet>>;
+  fromWalletCoinData: DisplayCoin[];
+  toWalletCoinData: DisplayCoin[];
+  allWallets: Wallet[];
+  receiveFlowStep: ReceiveFlowSteps;
+  sendFlowStep: SendFlowSteps;
+}
+
+export type UseExchange = () => UseExchangeValues;
+
+export const useExchange: UseExchange = () => {
+  const { allWallets, isLoading: isWalletLoading } = useWallets();
+  const { getCoinsWithPrices } = useWalletData();
+
+  const { deviceConnection, deviceSdkVersion, setIsInFlow } = useConnection();
+  const receiveTransaction = useReceiveTransaction();
+  const sendTransaction = useSendTransaction();
+
+  const [fromToken, setFromToken] = useState<DisplayCoin>();
+  const [toToken, setToToken] = useState<DisplayCoin>();
+  const [toWallet, setToWallet] = useState<Wallet>();
+  const [fromWallet, setFromWallet] = useState<Wallet>();
+  const [fromWalletCoinData, setFromWalletCoinData] = useState<DisplayCoin[]>(
+    []
+  );
+  const [toWalletCoinData, setToWalletCoinData] = useState<DisplayCoin[]>([]);
+  const [amountToSend, setAmountToSend] = useState('');
+  const [fees, setFees] = useState('');
+  const [amountToReceive, setAmountToReceive] = useState('');
+  const [exchangeRate, setExchangeRate] = useState('');
+  const [receiveAddress, setReceiveAddress] = useState('');
+  const [isSwapCompleted, setIsSwapCompleted] = useState(false);
+  const [swapTransaction, setSwapTransaction] = useState({
+    id: '',
+    payinAddress: ''
+  });
+  const [receiveFlowStep, setReceiveFlowStep] = useState<ReceiveFlowSteps>(
+    ReceiveFlowSteps.EnterPinAndTapCard
+  );
+  const [sendFlowStep, setSendFlowStep] = useState<SendFlowSteps>(
+    SendFlowSteps.Waiting
+  );
+
+  // Fetch the coins from the database when the source wallet changes
+  useEffect(() => {
+    const setCoinListFromWallet = async () => {
+      const coins = await getAllCoinsFromWallet(fromWallet?._id);
+      setFromWalletCoinData(coins);
+    };
+    setCoinListFromWallet();
+  }, [fromWallet]);
+
+  // Fetch the coins from the database when the destination wallet changes
+  useEffect(() => {
+    const setCoinListToWallet = async () => {
+      const coins = await getAllCoinsFromWallet(toWallet?._id);
+      setToWalletCoinData(coins);
+    };
+    setCoinListToWallet();
+  }, [toWallet]);
+
+  // Set the first wallet as the default from and to wallet
+  useEffect(() => {
+    if (!isWalletLoading) {
+      setFromWallet(allWallets[0]);
+      setToWallet(allWallets[0]);
+    }
+  }, [isWalletLoading, allWallets]);
+
+  // Set the receive address once the card is tapped
+  useEffect(() => {
+    if (receiveTransaction.cardTapped) {
+      setReceiveFlowStep(ReceiveFlowSteps.VerifyReceiveAddress);
+      setReceiveAddress(receiveTransaction?.receiveAddress);
+    }
+  }, [receiveTransaction.cardTapped]);
+
+  useEffect(() => {
+    if (receiveTransaction.verified) {
+      setReceiveFlowStep(ReceiveFlowSteps.Completed);
+      setSendFlowStep(SendFlowSteps.VerifySendAddress);
+    }
+  }, [receiveTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.verified) {
+      setSendFlowStep(SendFlowSteps.EnterPin);
+    }
+  }, [sendTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.pinEntered) {
+      setSendFlowStep(SendFlowSteps.TapCard);
+    }
+  }, [sendTransaction.pinEntered]);
+
+  useEffect(() => {
+    if (sendTransaction.cardsTapped) {
+      setSendFlowStep(SendFlowSteps.SignTransaction);
+    }
+  }, [sendTransaction.cardsTapped]);
+
+  useEffect(() => {
+    if (fromToken && toToken && amountToSend) {
+      getCurrentExchangeRate();
+    }
+  }, [fromToken, toToken, amountToSend]);
+
+  useEffect(() => {
+    if (receiveTransaction.verified) {
+      generateSwapTransaction();
+    }
+  }, [receiveTransaction.verified]);
+
+  useEffect(() => {
+    if (sendTransaction.signedTxn) {
+      setIsSwapCompleted(true);
+    }
+  }, [sendTransaction.signedTxn]);
+
+  /**
+   * Fetches the rate of exchanging tokens from `fromToken` to `toToken` for an
+   * amount of `amountToSend`. Also updates the `fees` and `amountToReceive`.
+   */
+  const getCurrentExchangeRate = async () => {
+    const { data } = await axios.get(`${baseUrl}/exchangeDetails`, {
+      params: { from: fromToken.slug, to: toToken.slug, amount: amountToSend }
+    });
+    setExchangeRate(data.message.result[0].rate);
+    setFees(data.message.result[0].fee);
+    setAmountToReceive(data.message.result[0].result);
+  };
+
+  /**
+   *  Creates a swap transaction between `fromToken` and `toToken` for an amount
+   *
+   * @param walletId The wallet to use for the swap
+   * @returns The transaction ID to later check the status of the swap and the
+   * payment address to send the tokens to.
+   */
+  const createSwapTransaction = async (walletId: string) => {
+    const { data } = await axios.get(`${baseUrl}/transaction`, {
+      params: {
+        walletId,
+        from: fromToken.slug,
+        to: toToken.slug,
+        amount: amountToSend,
+        address: receiveAddress
+      }
+    });
+    return {
+      id: data.message.result.id,
+      payinAddress: data.message.result.payinAddress
+    };
+  };
+
+  /**
+   * Fetches all the transactions for a given wallet.
+   *
+   * @param walletId The wallet to fetch the transactions for.
+   * @returns An array of transactions.
+   */
+  const getSwapTransactions = async (walletId: string) => {
+    const { data } = await axios.get(`${baseUrl}/transactions`, {
+      params: { walletId }
+    });
+    return data.message.result;
+  };
+
+  /**
+   * Starts the first part of the swap process i.e the receive flow.
+   */
+  const startReceiveFlow = () => {
+    receiveTransaction
+      .handleReceiveTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: toWallet._id,
+        coinType: toToken.slug,
+        coinName: COINS[toToken.slug]?.name,
+        xpub: toToken.xpub,
+        zpub: toToken.zpub,
+        passphraseExists: toWallet.passphraseSet
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Receive Flow Started');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Receive Flow Failed', err);
+      });
+  };
+
+  /**
+   * Creates a swap transaction with the toWallet id as the receiving wallet.
+   */
+  const generateSwapTransaction = async () => {
+    const sendDetails = await createSwapTransaction(toWallet?._id);
+    setSwapTransaction(sendDetails);
+  };
+
+  /**
+   * Starts the second part of the swap process i.e the send flow.
+   */
+  const startSendFlow = async () => {
+    logger.info('Swap Transaction: Swap Transaction Created', swapTransaction);
+
+    let customAccount: string | undefined;
+
+    if (fromToken.slug === 'near') {
+      const customAccounts = await customAccountDb.getAll({
+        coin: fromToken.slug,
+        walletId: fromToken.walletId
+      });
+      customAccount = customAccounts[0].name;
+    }
+
+    const recipientData = {
+      id: 0,
+      recipient: swapTransaction.payinAddress,
+      amount: amountToSend,
+      errorRecipient: '',
+      errorAmount: ''
+    };
+
+    sendTransaction
+      .handleSendTransaction({
+        connection: deviceConnection,
+        sdkVersion: deviceSdkVersion,
+        setIsInFlow,
+        walletId: fromWallet?._id,
+        xpub: fromToken.xpub,
+        zpub: fromToken.zpub,
+        coinType: fromToken.slug,
+        fees: +fees,
+        pinExists: fromWallet?.passwordSet,
+        passphraseExists: fromWallet?.passphraseSet,
+        customAccount,
+        newAccountId: null,
+        outputList: changeFormatOfOutputList(
+          [recipientData],
+          fromToken.slug,
+          undefined
+        ),
+        data: {},
+        isSendAll: false
+      })
+      .then(() => {
+        logger.info('Swap Transaction: Send Flow Completed');
+      })
+      .catch(err => {
+        logger.error('Swap Transaction: Send Flow Failed', err);
+      });
+  };
+
+  /**
+   * Cancel the receive and send flow.
+   */
+  const cancelSwapTransaction = () => {
+    receiveTransaction.cancelReceiveTxn(deviceConnection);
+    logger.info('Swap Transaction: Receive Flow Cancelled');
+
+    sendTransaction.cancelSendTxn(deviceConnection);
+    logger.info('Swap Transaction: Send Flow Cancelled');
+  };
+
+  /**
+   * Start the send flow once the user verifies the send address.
+   */
+  const handleUserVerifiedSendAddress = () => {
+    startSendFlow();
+  };
+
+  /**
+   * Get all the coins that are added to a wallet.
+   *
+   * @param walletId The wallet to fetch the coins for.
+   * @returns A promise that resolves to an array of DisplayCoins.
+   */
+  const getAllCoinsFromWallet = async (
+    walletId: string
+  ): Promise<DisplayCoin[]> => {
+    const res = await coinDb.getAll({ walletId });
+    const unsortedCoins = await getCoinsWithPrices(res);
+    return unsortedCoins;
+  };
+
+  return {
+    fromToken,
+    setFromToken,
+    toToken,
+    setToToken,
+    amountToSend,
+    setAmountToSend,
+    exchangeRate,
+    fees,
+    amountToReceive,
+    receiveAddress,
+    getSwapTransactions,
+    startReceiveFlow,
+    generateSwapTransaction,
+    startSendFlow,
+    cancelSwapTransaction,
+    isSwapCompleted,
+    swapTransaction,
+    handleUserVerifiedSendAddress,
+    toWallet,
+    setToWallet,
+    fromWallet,
+    setFromWallet,
+    fromWalletCoinData,
+    toWalletCoinData,
+    allWallets,
+    receiveFlowStep,
+    sendFlowStep
+  };
+};
diff --git a/cysync/src/store/hooks/useWalletData.ts b/cysync/src/store/hooks/useWalletData.ts
index 13a7f27f..679173ee 100644
--- a/cysync/src/store/hooks/useWalletData.ts
+++ b/cysync/src/store/hooks/useWalletData.ts
@@ -31,6 +31,7 @@ export interface UseWalletDataValues {
   setSortIndex: React.Dispatch<React.SetStateAction<number>>;
   sortCoinData: (coins: DisplayCoin[], index: number) => void;
   sortCoinsByIndex: (index: number) => void;
+  getCoinsWithPrices: (coins: Coin[]) => Promise<DisplayCoin[]>;
 }
 
 export type UseWalletData = () => UseWalletDataValues;
@@ -253,6 +254,7 @@ export const useWalletData: UseWalletData = () => {
     sortIndex,
     setSortIndex,
     sortCoinData,
-    sortCoinsByIndex
+    sortCoinsByIndex,
+    getCoinsWithPrices
   };
 };
diff --git a/cysync/src/utils/csvDownloader.ts b/cysync/src/utils/csvDownloader.ts
new file mode 100644
index 00000000..cfcde4ac
--- /dev/null
+++ b/cysync/src/utils/csvDownloader.ts
@@ -0,0 +1,34 @@
+// tslint:disable-next-line: no-any
+const jsonToCSV = (objArray: any) => {
+  const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
+  let str = '';
+
+  for (let i = 0; i < array.length; i++) {
+    let line = '';
+    for (const index of Object.keys(array[i])) {
+      if (line !== '') line += ',';
+
+      line += array[i][index];
+    }
+
+    str += line + '\r\n';
+  }
+
+  return str;
+};
+
+// tslint:disable-next-line: no-any
+export default function csvDownloader(data: any, filename: string) {
+  const csvContent = jsonToCSV(data);
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  if (link.download !== undefined) {
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}