diff --git a/packages/widget/src/components/SmallAvatar.tsx b/packages/widget/src/components/SmallAvatar.tsx
new file mode 100644
index 000000000..2dbe33278
--- /dev/null
+++ b/packages/widget/src/components/SmallAvatar.tsx
@@ -0,0 +1,9 @@
+import { Avatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 16,
+  height: 16,
+  border: `2px solid ${theme.palette.background.paper}`,
+}));
diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
index 5293a9961..867b792c2 100644
--- a/packages/widget/src/components/StepActions/StepActions.style.tsx
+++ b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -44,8 +44,8 @@ export const StepLabel = styled(MuiStepLabel, {
 })(({ theme }) => ({
   padding: 0,
   [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(1.25),
-    paddingRight: theme.spacing(3.25),
+    paddingLeft: theme.spacing(0.75),
+    paddingRight: theme.spacing(2.75),
   },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'inherit',
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
index fa52f0f44..8eda8aeef 100644
--- a/packages/widget/src/components/StepActions/StepActions.tsx
+++ b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -1,15 +1,21 @@
 import { LifiStep, Step } from '@lifi/sdk';
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
-import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
+import {
+  Box,
+  Step as MuiStep,
+  StepIconProps,
+  Stepper,
+  Typography,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
+import { ReactComponent as LiFiToolLogo } from '../../icons/LiFiToolLogo.svg';
 import { formatTokenAmount } from '../../utils';
-import { LiFiLogo } from '../LiFiLogo';
+import { SmallAvatar } from '../SmallAvatar';
 import {
   StepAvatar,
   StepConnector,
   StepContent,
-  StepIcon,
   StepLabel,
 } from './StepActions.style';
 import { StepActionsProps } from './types';
@@ -24,18 +30,36 @@ export const StepActions: React.FC<StepActionsProps> = ({
       ? CrossStepDetailsLabel
       : SwapStepDetailsLabel;
   const isFullView = !dense && (step as LifiStep).includedSteps?.length > 1;
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const StepIconComponent = ({ icon }: StepIconProps) => {
+    const tool = (step as LifiStep).includedSteps?.[Number(icon) - 1];
+
+    return tool ? (
+      <SmallAvatar
+        src={tool.toolDetails.logoURI}
+        alt={tool.toolDetails.name}
+        sx={{
+          boxSizing: 'content-box',
+        }}
+      >
+        {tool.toolDetails.name[0]}
+      </SmallAvatar>
+    ) : null;
+  };
+
   return (
     <Box {...other}>
       <Box
         sx={{ display: 'flex', alignItems: 'center' }}
-        mb={isFullView ? 1 : 0}
+        mb={isFullView ? 1.5 : 0}
       >
         <StepAvatar
           variant={step.type === 'lifi' ? 'square' : 'circular'}
           src={step.type !== 'lifi' ? step.toolDetails.logoURI : undefined}
           alt={step.toolDetails.name}
         >
-          {step.type === 'lifi' ? <LiFiLogo /> : step.toolDetails.name[0]}
+          {step.type === 'lifi' ? <LiFiToolLogo /> : step.toolDetails.name[0]}
         </StepAvatar>
         <Typography
           ml={2}
@@ -56,7 +80,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
         >
           {(step as LifiStep).includedSteps.map((step) => (
             <MuiStep key={step.id} expanded>
-              <StepLabel StepIconComponent={StepIcon}>
+              <StepLabel StepIconComponent={StepIconComponent}>
                 {step.type === 'cross' || step.type === 'lifi' ? (
                   <CrossStepDetailsLabel step={step} />
                 ) : (
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
index bd76dc8a5..48516780b 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { StepActions } from '../StepActions';
-import { StepToken } from '../StepToken';
+import { Token } from '../Token';
 import { Card, Label } from './SwapRouteCard.style';
 import { SwapRouteCardProps } from './types';
 
@@ -28,10 +28,7 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
         >
           <Label active={active}>{label}</Label>
         </Box>
-        <StepToken
-          token={{ ...route.toToken, amount: route.toAmount }}
-          mb={2}
-        />
+        <Token token={{ ...route.toToken, amount: route.toAmount }} mb={2} />
         {!dense
           ? route.steps.map((step) => (
               <StepActions key={step.id} step={step} mb={2} />
diff --git a/packages/widget/src/components/StepToken.tsx b/packages/widget/src/components/Token.tsx
similarity index 67%
rename from packages/widget/src/components/StepToken.tsx
rename to packages/widget/src/components/Token.tsx
index ca9bd43b4..e2434126a 100644
--- a/packages/widget/src/components/StepToken.tsx
+++ b/packages/widget/src/components/Token.tsx
@@ -1,14 +1,18 @@
 /* eslint-disable react/no-array-index-key */
 import { TokenAmount } from '@lifi/sdk';
 import { Box, BoxProps, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useChains } from '../hooks';
 import { formatTokenAmount } from '../utils';
 import { TextFitter } from './TextFitter';
 import { TokenAvatar } from './TokenAvatar';
 
-export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
+export const Token: React.FC<{ token: TokenAmount } & BoxProps> = ({
   token,
   ...other
 }) => {
+  const { t } = useTranslation();
+  const { getChainById } = useChains();
   return (
     <Box flex={1} {...other}>
       <Box display="flex" flex={1}>
@@ -23,14 +27,16 @@ export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
         </TextFitter>
       </Box>
       <Typography
-        fontSize={14}
+        fontSize={12}
         lineHeight={1}
         fontWeight="500"
         color="text.secondary"
-        mr={1}
         ml={6}
       >
-        {token.symbol}
+        {t(`swap.tokenOnChain`, {
+          tokenSymbol: token.symbol,
+          chainName: getChainById(token.chainId)?.name,
+        })}
       </Typography>
     </Box>
   );
diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
index 5a33df0fc..5cd877434 100644
--- a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
+++ b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
@@ -1,15 +1,8 @@
-import { Avatar, AvatarGroup } from '@mui/material';
+import { AvatarGroup } from '@mui/material';
 import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 
-export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  width: 16,
-  height: 16,
-  border: `2px solid ${theme.palette.background.paper}`,
-}));
-
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${avatarClasses.root}`]: {
     background: theme.palette.background.paper,
diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
index f5fa2531b..f3e87c56a 100644
--- a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
+++ b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
@@ -1,7 +1,7 @@
 import { Token } from '@lifi/sdk';
 import { Avatar, Badge, SxProps, Theme } from '@mui/material';
 import { useChain } from '../../hooks';
-import { SmallAvatar } from './TokenAvatar.style';
+import { SmallAvatar } from '../SmallAvatar';
 
 export const TokenAvatar: React.FC<{
   token: Token;
diff --git a/packages/widget/src/icons/LiFiToolLogo.svg b/packages/widget/src/icons/LiFiToolLogo.svg
new file mode 100644
index 000000000..7087bf599
--- /dev/null
+++ b/packages/widget/src/icons/LiFiToolLogo.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="16" fill="#F5B5FF"/>
+  <path d="M15.5031 19.2031L10.1691 20.4379C9.97453 20.4867 9.82861 20.6816 9.82861 20.8766V24.5486C9.82861 24.8573 10.0718 25.0523 10.3798 24.9873L17.8215 23.265C18.1296 23.2 18.2593 22.9076 18.1296 22.6314L16.7839 19.853C16.5731 19.4143 16.7839 18.9594 17.2541 18.8619L22.1179 17.692C22.4584 17.6108 22.7502 17.2534 22.7502 16.8959V13.5001C22.7502 13.1914 22.507 12.9802 22.199 13.0614L15.1788 14.735C14.7411 14.8324 14.5465 15.2549 14.7411 15.6611L15.9733 18.212C16.184 18.6507 15.9733 19.0893 15.5031 19.2031Z" fill="black"/>
+  <path d="M11.985 10.0233L13.3793 12.8829C13.5577 13.2566 13.3793 13.6466 12.974 13.7278L10.3962 14.329C10.0719 14.4102 9.8125 14.7352 9.8125 15.0601V18.1309C9.8125 18.6509 10.234 18.9758 10.7366 18.8621L13.1361 18.3097C13.4604 18.2447 13.7198 17.9035 13.7198 17.5785L13.736 14.4265C13.736 13.9878 14.0927 13.5491 14.5142 13.4516L22.3774 11.5669C22.572 11.5181 22.7179 11.3231 22.7179 11.1282V7.45618C22.7179 7.14747 22.4747 6.93625 22.1666 7.01749L12.2931 9.38966C11.985 9.45465 11.8553 9.74711 11.985 10.0233Z" fill="black"/>
+</svg>
diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
index 45ed4c348..69d7367e1 100644
--- a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
+++ b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -9,7 +9,7 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BottomSheet, BottomSheetBase } from '../../components/BottomSheet';
-import { StepToken } from '../../components/StepToken';
+import { Token } from '../../components/Token';
 import { useChains, useTokenBalance } from '../../hooks';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
 import { RouteExecution } from '../../stores';
@@ -116,7 +116,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
             {title}
           </Typography>
           {status === 'success' ? (
-            <StepToken
+            <Token
               token={{
                 ...route.toToken,
                 amount:
diff --git a/packages/widget/src/pages/SwapPage/StepItem.tsx b/packages/widget/src/pages/SwapPage/StepItem.tsx
index f489440a3..072f054c7 100644
--- a/packages/widget/src/pages/SwapPage/StepItem.tsx
+++ b/packages/widget/src/pages/SwapPage/StepItem.tsx
@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
-import { StepToken } from '../../components/StepToken';
+import { Token } from '../../components/Token';
 import { ExecutionItem } from './ExecutionItem';
 import { StepTimer } from './StepTimer';
 
@@ -46,12 +46,12 @@ export const StepItem: React.FC<{
         </CardTitle>
       </Box>
       <Box py={1}>
-        {fromToken ? <StepToken token={fromToken} px={2} py={1} /> : null}
+        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
         <StepActions step={step} px={2} py={1} dense />
         {step.execution?.process.map((process, index) => (
           <ExecutionItem key={index} step={step} process={process} />
         ))}
-        {toToken ? <StepToken token={toToken} px={2} py={1} /> : null}
+        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
       </Box>
     </CardContainer>
   );