diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
index 451ab52a5..0a241e243 100644
--- a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
+++ b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks/useTokenBalance';
 import {
   SwapFormKeyHelper,
-  SwapFormTypeProps
+  SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format';
 import {
   SwapMaxAmountTypography,
-  SwapPriceTypography
+  SwapPriceTypography,
 } from './SwapInputAdornment.style';
 
 export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
@@ -92,8 +92,8 @@ const SwapPrice: React.FC<SwapFormTypeProps & { price?: string }> = ({
 
   return (
     <SwapPriceTypography variant="body2" color="text.secondary">
-      {t(`swap.price`, {
-        price: formatTokenPrice(value, price),
+      {t(`swap.approximateCurrency`, {
+        value: formatTokenPrice(value, price),
       })}
     </SwapPriceTypography>
   );
diff --git a/packages/widget/src/components/SwapRoute/SwapRoute.tsx b/packages/widget/src/components/SwapRoute/SwapRoute.tsx
index 3fd623991..1585d2ad1 100644
--- a/packages/widget/src/components/SwapRoute/SwapRoute.tsx
+++ b/packages/widget/src/components/SwapRoute/SwapRoute.tsx
@@ -1,9 +1,10 @@
 import { Route, StepType } from '@lifinance/sdk';
-import { Box, Typography } from '@mui/material';
+import { formatTokenAmount } from '@lifinance/widget/utils/format';
+import { Box, Skeleton, Stack as MuiStack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useChains, useSwapRoutes } from '../../hooks';
-import { SwapStepper } from '../SwapStepper';
-import { AnimatedWaitIcon } from './SwapRoute.style';
+import { SwapRouteCard } from '../SwapRouteCard';
 
 const parsedStepTypes: {
   [K in StepType]: string;
@@ -13,26 +14,44 @@ const parsedStepTypes: {
   swap: 'Dex',
 };
 
+const Stack = styled(MuiStack)(({ theme }) => ({
+  alignItems: 'stretch',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  padding: theme.spacing(2, 0),
+}));
+
 export const SwapRoute: React.FC = () => {
   const { t } = useTranslation();
   const { getChainById } = useChains();
   const { routes, isFetching, isFetched } = useSwapRoutes();
   const renderRoutesLoading = () => {
     return (
-      <Box
-        sx={{
-          py: 8,
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <AnimatedWaitIcon />
-        <Typography variant="subtitle1" color="text.primary">
-          {t('swap.requestingRoutes')}
-        </Typography>
-      </Box>
+      // <Box
+      //   sx={{
+      //     py: 8,
+      //     width: '100%',
+      //     display: 'flex',
+      //     justifyContent: 'center',
+      //     alignItems: 'center',
+      //   }}
+      // >
+      //   <AnimatedWaitIcon />
+      //   <Typography variant="subtitle1" color="text.primary">
+      //     {t('swap.requestingRoutes')}
+      //   </Typography>
+      // </Box>
+      <Stack direction="row" sx={{ padding: '0 0 24px' }} spacing={2}>
+        <Skeleton
+          variant="rectangular"
+          width={200}
+          height={195}
+          sx={{ borderRadius: 1 }}
+        />
+      </Stack>
     );
   };
 
@@ -51,82 +70,97 @@ export const SwapRoute: React.FC = () => {
   };
 
   const renderRouteDisplay = (route: Route) => (
-    <Box
-      py={2}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        justifyContent: 'flex-end',
-      }}
-    >
-      <SwapStepper
-        steps={[
-          {
-            label: route.fromToken.symbol,
-            sublabel: getChainById(route.fromChainId)!.name,
-          },
-          ...route.steps.map((step) => {
-            return { label: parsedStepTypes[step.type], sublabel: step.tool };
-          }),
-          {
-            label: route.toToken.symbol,
-            sublabel: getChainById(route.toChainId)!.name,
-          },
-        ]}
+    // <Box
+    //   py={2}
+    //   sx={{
+    //     display: 'flex',
+    //     flexDirection: 'column',
+    //     flex: 1,
+    //     justifyContent: 'flex-end',
+    //   }}
+    // >
+    //   <SwapStepper
+    //     steps={[
+    //       {
+    //         label: route.fromToken.symbol,
+    //         sublabel: getChainById(route.fromChainId)!.name,
+    //       },
+    //       ...route.steps.map((step) => {
+    //         return { label: parsedStepTypes[step.type], sublabel: step.tool };
+    //       }),
+    //       {
+    //         label: route.toToken.symbol,
+    //         sublabel: getChainById(route.toChainId)!.name,
+    //       },
+    //     ]}
+    //   />
+    //   <Box
+    //     mt={2}
+    //     sx={{
+    //       display: 'flex',
+    //       justifyContent: 'space-between',
+    //       alignItems: 'center',
+    //     }}
+    //   >
+    //     <Typography
+    //       variant="subtitle1"
+    //       color="text.secondary"
+    //       sx={{ alignSelf: 'end' }}
+    //     >
+    //       {t(`swap.gas`)}
+    //     </Typography>
+    //     <Typography
+    //       ml={2}
+    //       variant="subtitle1"
+    //       color="text.primary"
+    //       sx={{ alignSelf: 'end' }}
+    //     >
+    //       {t(`swap.approximateCurrency`, { value: route.gasCostUSD })}
+    //     </Typography>
+    //   </Box>
+    //   <Box
+    //     sx={{
+    //       display: 'flex',
+    //       justifyContent: 'space-between',
+    //       alignItems: 'center',
+    //     }}
+    //   >
+    //     <Typography
+    //       variant="subtitle1"
+    //       color="text.secondary"
+    //       sx={{ alignSelf: 'end' }}
+    //     >
+    //       {t(`swap.minutes`)}
+    //     </Typography>
+    //     <Typography
+    //       ml={2}
+    //       variant="subtitle1"
+    //       color="text.primary"
+    //       sx={{ alignSelf: 'end' }}
+    //     >
+    //       {`${(
+    //         route.steps
+    //           .map((step) => step.estimate.executionDuration)
+    //           .reduce((cumulated, x) => cumulated + x) / 60
+    //       ).toFixed(1)} min`}
+    //     </Typography>
+    //   </Box>
+    // </Box>
+    <Stack direction="row" sx={{ padding: '0 0 24px' }} spacing={2}>
+      <SwapRouteCard
+        width={200}
+        amount={formatTokenAmount(route.toAmount, route.toToken.decimals)}
+        token={route.toToken.name}
+        gas={t(`swap.currency`, { value: route.gasCostUSD })}
+        time={(
+          route.steps
+            .map((step) => step.estimate.executionDuration)
+            .reduce((cumulated, x) => cumulated + x) / 60
+        ).toFixed(0)}
+        type="recommended"
+        active
       />
-      <Box
-        mt={2}
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Typography
-          variant="subtitle1"
-          color="text.secondary"
-          sx={{ alignSelf: 'end' }}
-        >
-          {t(`swap.gas`)}
-        </Typography>
-        <Typography
-          ml={2}
-          variant="subtitle1"
-          color="text.primary"
-          sx={{ alignSelf: 'end' }}
-        >
-          {t(`swap.price`, { price: route.gasCostUSD })}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Typography
-          variant="subtitle1"
-          color="text.secondary"
-          sx={{ alignSelf: 'end' }}
-        >
-          {t(`swap.waitingTime`)}
-        </Typography>
-        <Typography
-          ml={2}
-          variant="subtitle1"
-          color="text.primary"
-          sx={{ alignSelf: 'end' }}
-        >
-          {`${(
-            route.steps
-              .map((step) => step.estimate.executionDuration)
-              .reduce((cumulated, x) => cumulated + x) / 60
-          ).toFixed(1)} min`}
-        </Typography>
-      </Box>
-    </Box>
+    </Stack>
   );
 
   if (routes && routes.length > 0) {
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
new file mode 100644
index 000000000..42c167e94
--- /dev/null
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
@@ -0,0 +1,35 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Card = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>(({ theme, active }) => ({
+  padding: theme.spacing(2),
+  border: `2px solid ${
+    active ? theme.palette.primary.main : theme.palette.grey[200]
+  }`,
+  borderRadius: theme.shape.borderRadius,
+  boxSizing: 'border-box',
+  // maxWidth: '50%',
+  // flexBasis: '50%',
+  // flexGrow: 0,
+  // flexShrink: 0,
+}));
+
+export const Label = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>(({ theme, active }) => ({
+  backgroundColor: active
+    ? theme.palette.primary.main
+    : theme.palette.common.white,
+  border: '1px solid',
+  borderColor: active ? theme.palette.primary.main : theme.palette.common.black,
+  borderRadius: 4,
+  color: active ? theme.palette.common.white : theme.palette.common.black,
+  padding: theme.spacing(0.5, 0.75),
+  fontSize: 12,
+  fontWeight: '600',
+  letterSpacing: '0.05rem',
+  textTransform: 'uppercase',
+  display: 'inline-flex',
+}));
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
new file mode 100644
index 000000000..2631cee9f
--- /dev/null
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -0,0 +1,53 @@
+import { Box, BoxProps, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card, Label } from './SwapRouteCard.style';
+import { SwapRouteCardProps } from './types';
+
+export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
+  amount,
+  token,
+  time,
+  gas,
+  active,
+  type,
+  ...other
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Card active={active} {...other}>
+      <Label active={active} mb={2}>
+        {type}
+      </Label>
+      <Typography fontSize={32} fontWeight="bold" lineHeight="normal">
+        {amount}
+      </Typography>
+      <Typography fontSize={14} mb={2} color="text.secondary">
+        {token}
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Box>
+          <Typography fontSize={18} fontWeight="500">
+            {gas}
+          </Typography>
+          <Typography fontSize={12} color="text.secondary">
+            {t(`swap.gas`)}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography fontSize={18} fontWeight="500">
+            ~{time}
+          </Typography>
+          <Typography fontSize={12} color="text.secondary">
+            {t(`swap.minutes`)}
+          </Typography>
+        </Box>
+      </Box>
+    </Card>
+  );
+};
diff --git a/packages/widget/src/components/SwapRouteCard/index.ts b/packages/widget/src/components/SwapRouteCard/index.ts
new file mode 100644
index 000000000..85eeb2d8f
--- /dev/null
+++ b/packages/widget/src/components/SwapRouteCard/index.ts
@@ -0,0 +1 @@
+export * from './SwapRouteCard';
diff --git a/packages/widget/src/components/SwapRouteCard/types.ts b/packages/widget/src/components/SwapRouteCard/types.ts
new file mode 100644
index 000000000..48bde1fc1
--- /dev/null
+++ b/packages/widget/src/components/SwapRouteCard/types.ts
@@ -0,0 +1,8 @@
+export interface SwapRouteCardProps {
+  amount: string | number;
+  token: string;
+  time: string;
+  gas: string;
+  type: 'recommended' | 'fastest' | 'cheapest';
+  active?: boolean;
+}
diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
index 4d9680a92..61f482fde 100644
--- a/packages/widget/src/i18n/en/translation.json
+++ b/packages/widget/src/i18n/en/translation.json
@@ -15,12 +15,13 @@
     "enterAmount": "Enter amount",
     "max": "Max",
     "maxAmount": "({{amount}})",
-    "price": "\u2248 {{price, currency(currency: USD)}}",
+    "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
+    "currency": "{{value, currency(currency: USD)}}",
     "sendToRecipient": "Send to recipient",
     "recipientsAddress": "Recipient's {{chain}} address",
     "addressConfirmation": "I confirm that the address above is correct",
-    "gas": "Gas:",
-    "waitingTime": "Waiting time:",
+    "gas": "gas fee",
+    "minutes": "mins",
     "tokenSearch": "Search your token",
     "selectChain": "Select Chain",
     "selectToken": "Select Token",
diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
index 1a5c28691..ea1637005 100644
--- a/packages/widget/src/pages/SwapPage/SwapPage.tsx
+++ b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -20,7 +20,6 @@ import {
   SwapFormKeyHelper,
 } from '../../providers/SwapFormProvider';
 import { ElementId } from '../../utils/elements';
-import { SendToRecipientForm } from './SendToRecipientForm';
 import { FormBox, FormContainer } from './SwapPage.style';
 import { SwapPageProps } from './types';
 
@@ -56,15 +55,15 @@ export const SwapPage: React.FC<SwapPageProps> = ({ settingsRef }) => {
           </Typography>
           <SwapVertIcon sx={{ alignSelf: 'center', padding: '0 16px' }} />
         </Box>
-        <Box mb={3}>
+        <Box pb={3}>
           <SwapChainButton onClick={handleChainButton} formType="to" />
           <SwapInput formType="to" />
         </Box>
-        <SendToRecipientForm />
+        {/* <SendToRecipientForm /> */}
         {/* <RoutePrioritySelect /> */}
         <SwapRoute />
       </FormBox>
-      <Box px={3} pt={1} pb={3}>
+      <Box px={3} pb={3}>
         <SwapButton drawerRef={selectWalletDrawerRef} />
       </Box>
       <SelectWalletDrawer ref={selectWalletDrawerRef} />
diff --git a/packages/widget/src/utils/format.ts b/packages/widget/src/utils/format.ts
index 84fbd65ea..b23dd697d 100644
--- a/packages/widget/src/utils/format.ts
+++ b/packages/widget/src/utils/format.ts
@@ -10,9 +10,16 @@ Big.NE = -21;
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export const formatTokenAmount = (amount: string = '0') => {
-  const parsedAmount = parseFloat(amount);
-  if (parsedAmount === 0 || isNaN(Number(amount))) {
+export const formatTokenAmount = (
+  amount: string = '0',
+  decimals: number = 0,
+) => {
+  let shiftedAmount = amount;
+  if (decimals) {
+    shiftedAmount = (Number(amount) / 10 ** decimals).toString();
+  }
+  const parsedAmount = parseFloat(shiftedAmount);
+  if (parsedAmount === 0 || isNaN(Number(shiftedAmount))) {
     return '0';
   }