diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
index da5d2ddc2..73194e1f1 100644
--- a/packages/widget-embedded/src/App.tsx
+++ b/packages/widget-embedded/src/App.tsx
@@ -49,7 +49,7 @@ export const App = () => {
   const [primary, setPrimaryColor] = useState('#3F49E1');
   const [secondary, setSecondaryColor] = useState('#F5B5FF');
 
-  const [expandableRoutesView, setExpandableRoutesView] = useState(false);
+  const [expandableRoutesView, setExpandableRoutesView] = useState(true);
   const [darkMode, setDarkMode] = useState(prefersDarkMode);
   const [systemColor, setSystemColor] = useState(true);
   const [theme, setTheme] = useState(() =>
@@ -103,7 +103,7 @@ export const App = () => {
           fontFamily,
         },
       },
-      expandableRoutesView,
+      variant: expandableRoutesView ? 'expandable' : 'default',
     }));
   }, [
     borderRadius,
@@ -338,15 +338,7 @@ export const App = () => {
             </Box>
           </Box>
         </Drawer>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flex: 1,
-            margin: 'auto',
-          }}
-        >
+        <Box flex={1} margin="auto">
           {drawer ? (
             <LiFiWidgetDrawer config={config} open />
           ) : (
diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts
index 706635dda..a7b692a93 100644
--- a/packages/widget-embedded/src/config.ts
+++ b/packages/widget-embedded/src/config.ts
@@ -9,7 +9,7 @@ export const widgetDrawerConfig: WidgetConfig = {
   // fromAmount: '10',
   // disableColorSchemes: true,
   disableTelemetry: true,
-  // expandableRoutesView: true,
+  variant: 'expandable',
   integrator: 'li.fi-playground',
   disabledChains: [],
   chains: {
diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
index c70c6f572..0420e83d3 100644
--- a/packages/widget/src/App.tsx
+++ b/packages/widget/src/App.tsx
@@ -1,22 +1,16 @@
-import { useRoutes } from 'react-router-dom';
 import type { AppProps } from './AppProvider';
 import { AppProvider } from './AppProvider';
-import { AppContainer, FlexContainer } from './components/AppContainer';
+import { AppRoutes } from './AppRoutes';
+import {
+  AppContainer,
+  AppExpandedContainer,
+  FlexContainer,
+} from './components/AppContainer';
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
-import { NotFound } from './components/NotFound';
 import { PoweredBy } from './components/PoweredBy';
-import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
-import { MainPage } from './pages/MainPage';
-import { SelectChainPage } from './pages/SelectChainPage';
-import { SelectTokenPage } from './pages/SelectTokenPage';
-import { SelectWalletPage } from './pages/SelectWalletPage';
-import { SettingsPage } from './pages/SettingsPage';
-import { SwapDetailsPage } from './pages/SwapDetailsPage';
-import { SwapHistoryPage } from './pages/SwapHistoryPage';
-import { SwapPage } from './pages/SwapPage';
-import { SwapRoutesPage } from './pages/SwapRoutesPage';
-import { navigationRoutes } from './utils';
+import { SwapRoutesExpanded } from './components/SwapRoutes';
+import { useWidgetConfig } from './providers';
 
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
@@ -27,86 +21,19 @@ export const App: React.FC<AppProps> = ({ config }) => {
 };
 
 export const AppDefault = () => {
+  const { variant } = useWidgetConfig();
+
   return (
-    <AppContainer>
-      <Header />
-      <FlexContainer disableGutters>
-        <AppRoutes />
-      </FlexContainer>
-      <PoweredBy />
-      <Initializer />
-    </AppContainer>
+    <AppExpandedContainer>
+      <AppContainer>
+        <Header />
+        <FlexContainer disableGutters>
+          <AppRoutes />
+        </FlexContainer>
+        <PoweredBy />
+        <Initializer />
+      </AppContainer>
+      {variant === 'expandable' ? <SwapRoutesExpanded /> : null}
+    </AppExpandedContainer>
   );
 };
-
-const AppRoutes = () => {
-  const element = useRoutes([
-    {
-      path: '/',
-      element: <MainPage />,
-    },
-    {
-      path: navigationRoutes.settings,
-      element: <SettingsPage />,
-    },
-    {
-      path: navigationRoutes.fromToken,
-      element: <SelectTokenPage formType="from" />,
-    },
-    {
-      path: navigationRoutes.toToken,
-      element: <SelectTokenPage formType="to" />,
-    },
-    ...[
-      navigationRoutes.fromChain,
-      `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
-    ].map((path) => ({
-      path,
-      element: <SelectChainPage formType="from" />,
-    })),
-    ...[
-      navigationRoutes.toChain,
-      `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
-    ].map((path) => ({
-      path,
-      element: <SelectChainPage formType="to" />,
-    })),
-    {
-      path: navigationRoutes.swapRoutes,
-      element: <SwapRoutesPage />,
-    },
-    {
-      path: navigationRoutes.activeSwaps,
-      element: <ActiveSwapsPage />,
-    },
-    {
-      path: navigationRoutes.swapHistory,
-      element: <SwapHistoryPage />,
-    },
-    {
-      path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
-      element: <SwapDetailsPage />,
-    },
-    ...[
-      navigationRoutes.selectWallet,
-      `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-    ].map((path) => ({
-      path,
-      element: <SelectWalletPage />,
-    })),
-    ...[
-      navigationRoutes.swapExecution,
-      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
-      `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
-    ].map((path) => ({
-      path,
-      element: <SwapPage />,
-    })),
-    {
-      path: '*',
-      element: <NotFound />,
-    },
-  ]);
-  return element;
-};
diff --git a/packages/widget/src/AppRoutes.tsx b/packages/widget/src/AppRoutes.tsx
new file mode 100644
index 000000000..8f47d2d86
--- /dev/null
+++ b/packages/widget/src/AppRoutes.tsx
@@ -0,0 +1,85 @@
+import { useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
+import { MainPage } from './pages/MainPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { SwapDetailsPage } from './pages/SwapDetailsPage';
+import { SwapHistoryPage } from './pages/SwapHistoryPage';
+import { SwapPage } from './pages/SwapPage';
+import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { navigationRoutes } from './utils';
+
+export const AppRoutes = () => {
+  const element = useRoutes([
+    {
+      path: '/',
+      element: <MainPage />,
+    },
+    {
+      path: navigationRoutes.settings,
+      element: <SettingsPage />,
+    },
+    {
+      path: navigationRoutes.fromToken,
+      element: <SelectTokenPage formType="from" />,
+    },
+    {
+      path: navigationRoutes.toToken,
+      element: <SelectTokenPage formType="to" />,
+    },
+    ...[
+      navigationRoutes.fromChain,
+      `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
+    ].map((path) => ({
+      path,
+      element: <SelectChainPage formType="from" />,
+    })),
+    ...[
+      navigationRoutes.toChain,
+      `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
+    ].map((path) => ({
+      path,
+      element: <SelectChainPage formType="to" />,
+    })),
+    {
+      path: navigationRoutes.swapRoutes,
+      element: <SwapRoutesPage />,
+    },
+    {
+      path: navigationRoutes.activeSwaps,
+      element: <ActiveSwapsPage />,
+    },
+    {
+      path: navigationRoutes.swapHistory,
+      element: <SwapHistoryPage />,
+    },
+    {
+      path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+      element: <SwapDetailsPage />,
+    },
+    ...[
+      navigationRoutes.selectWallet,
+      `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+    ].map((path) => ({
+      path,
+      element: <SelectWalletPage />,
+    })),
+    ...[
+      navigationRoutes.swapExecution,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+      `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
+    ].map((path) => ({
+      path,
+      element: <SwapPage />,
+    })),
+    {
+      path: '*',
+      element: <NotFound />,
+    },
+  ]);
+  return element;
+};
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
index 2ddb98d96..4901d6619 100644
--- a/packages/widget/src/components/AppContainer.tsx
+++ b/packages/widget/src/components/AppContainer.tsx
@@ -1,19 +1,22 @@
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import type { PropsWithChildren, RefObject } from 'react';
-import { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../providers';
 import type { WidgetVariant } from '../types';
 import { ElementId } from '../utils';
 
-const maxHeight = 640;
+export const maxHeight = 680;
 
-const ExpandedContainer = styled(Box)(({ theme }) => ({
+const ExpandedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ variant }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'start',
   flex: 1,
+  height: variant === 'drawer' ? 'none' : maxHeight,
 }));
 
 const RelativeContainer = styled(Box, {
@@ -31,13 +34,6 @@ const RelativeContainer = styled(Box, {
   zIndex: 0,
 }));
 
-const ScrollableContainer = styled(Box)({
-  overflowY: 'auto',
-  height: '100%',
-  flex: 1,
-  display: 'flex',
-});
-
 const CssBaselineContainer = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ variant }) => ({
@@ -52,23 +48,24 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
 
 export const FlexContainer = styled(Container)({
   display: 'flex',
-  flexBasis: 'auto',
   flexDirection: 'column',
-  flexShrink: 0,
-  flexGrow: 1,
+  flex: 1,
 });
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
-  const ref = useRef<HTMLElement>(null);
+  // const ref = useRef<HTMLDivElement>(null);
   const { containerStyle, variant } = useWidgetConfig();
   return (
     <RelativeContainer sx={containerStyle} variant={variant}>
-      <ScrollableContainer id={ElementId.ScrollableContainer} ref={ref}>
-        <CssBaselineContainer variant={variant} enableColorScheme>
-          <FlexContainer disableGutters>{children}</FlexContainer>
-        </CssBaselineContainer>
-      </ScrollableContainer>
-      <ScrollToLocation elementRef={ref} />
+      <CssBaselineContainer
+        variant={variant}
+        id={ElementId.ScrollableContainer}
+        // ref={ref}
+        enableColorScheme
+      >
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
     </RelativeContainer>
   );
 };
diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx
index ac69fa698..3770d685e 100644
--- a/packages/widget/src/components/Card/Card.tsx
+++ b/packages/widget/src/components/Card/Card.tsx
@@ -5,52 +5,72 @@ import type { MouseEventHandler } from 'react';
 
 type CardVariant = 'default' | 'selected' | 'error';
 
-const getBackgroundColor = (theme: Theme, variant?: CardVariant) =>
+const getBackgroundColor = (
+  theme: Theme,
+  variant?: CardVariant,
+  selectionColor?: 'primary' | 'secondary',
+) =>
   variant === 'selected'
-    ? theme.palette.mode === 'light'
-      ? alpha(theme.palette.primary.main, 0.04)
-      : alpha(theme.palette.primary.main, 0.42)
+    ? selectionColor === 'primary'
+      ? theme.palette.mode === 'light'
+        ? alpha(theme.palette.primary.main, 0.04)
+        : alpha(theme.palette.primary.main, 0.42)
+      : alpha(theme.palette.secondary.main, 0.08)
     : theme.palette.background.paper;
 
 export const Card = styled(Box, {
   shouldForwardProp: (prop) =>
-    !['dense', 'variant', 'indented'].includes(prop as string),
+    !['dense', 'variant', 'indented', 'selectionColor'].includes(
+      prop as string,
+    ),
 })<{
   variant?: CardVariant;
+  selectionColor?: 'primary' | 'secondary';
   dense?: boolean;
   indented?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
-}>(({ theme, variant, dense, indented, onClick }) => {
-  const backgroundColor = getBackgroundColor(theme, variant);
-  return {
-    backgroundColor,
-    border: `1px solid`,
-    borderColor:
-      variant === 'error'
-        ? theme.palette.error.main
-        : variant === 'selected'
-        ? theme.palette.primary.main
-        : theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    borderRadius: dense
-      ? theme.shape.borderRadiusSecondary
-      : theme.shape.borderRadius,
-    overflow: 'hidden',
-    position: 'relative',
-    padding: indented ? theme.spacing(2) : 0,
-    boxSizing: 'border-box',
-    '&:hover': {
-      cursor: onClick ? 'pointer' : 'default',
-      backgroundColor: onClick
-        ? theme.palette.mode === 'light'
-          ? darken(backgroundColor, 0.02)
-          : lighten(backgroundColor, 0.02)
-        : theme.palette.background.paper,
-    },
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  };
-});
+}>(
+  ({
+    theme,
+    variant,
+    selectionColor = 'primary',
+    dense,
+    indented,
+    onClick,
+  }) => {
+    const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+    return {
+      backgroundColor,
+      border: `1px solid`,
+      borderColor:
+        variant === 'error'
+          ? theme.palette.error.main
+          : variant === 'selected'
+          ? selectionColor === 'primary'
+            ? theme.palette.primary.main
+            : alpha(theme.palette.secondary.main, 0.48)
+          : theme.palette.mode === 'light'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[800],
+      borderRadius: dense
+        ? theme.shape.borderRadiusSecondary
+        : theme.shape.borderRadius,
+      overflow: 'hidden',
+      position: 'relative',
+      padding: indented ? theme.spacing(2) : 0,
+      boxSizing: 'border-box',
+      '&:hover': {
+        cursor: onClick ? 'pointer' : 'default',
+        backgroundColor: onClick
+          ? theme.palette.mode === 'light'
+            ? darken(backgroundColor, 0.02)
+            : lighten(backgroundColor, 0.02)
+          : backgroundColor,
+      },
+      transition: theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+      }),
+    };
+  },
+);
diff --git a/packages/widget/src/components/ChainSelect/ChainSelect.tsx b/packages/widget/src/components/ChainSelect/ChainSelect.tsx
index 11ab57949..f16ef1aea 100644
--- a/packages/widget/src/components/ChainSelect/ChainSelect.tsx
+++ b/packages/widget/src/components/ChainSelect/ChainSelect.tsx
@@ -5,7 +5,7 @@ import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import type { SwapFormTypeProps } from '../../providers';
 import { SwapFormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores/chains';
+import { maxChainToOrder } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ChainCard, ChainContainer } from './ChainSelect.style';
 import { useChainSelect } from './useChainSelect';
diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts
index 005b57090..ed43728d1 100644
--- a/packages/widget/src/components/ChainSelect/useChainSelect.ts
+++ b/packages/widget/src/components/ChainSelect/useChainSelect.ts
@@ -3,7 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { useChains } from '../../hooks';
 import type { SwapFormType } from '../../providers';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
-import { useChainOrder } from '../../stores/chains';
+import { useChainOrder } from '../../stores';
 
 export const useChainSelect = (formType: SwapFormType) => {
   const { setValue } = useFormContext();
diff --git a/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx b/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx
index 1f87edb14..dab575b99 100644
--- a/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx
+++ b/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx
@@ -1,10 +1,10 @@
-/* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
 import { WarningAmber as WarningIcon } from '@mui/icons-material';
 import type { BoxProps } from '@mui/material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';
+import { useSelectedRouteStore } from '../../stores';
 import { CardTitle } from '../Card';
 import { MessageCard } from './GasSufficiencyMessage.style';
 
@@ -13,7 +13,10 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
-  const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
+  const selectedRoute = useSelectedRouteStore((state) => state.selectedRoute);
+  const { insufficientFunds, insufficientGas } = useGasSufficiency(
+    route ?? selectedRoute,
+  );
 
   if (!insufficientFunds && !insufficientGas?.length) {
     return null;
@@ -51,6 +54,7 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
         {insufficientGas?.length
           ? insufficientGas.map((item, index) => (
               <Typography
+                // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 variant="body2"
                 px={2}
diff --git a/packages/widget/src/components/SendToWallet/store.ts b/packages/widget/src/components/SendToWallet/store.ts
index 37374bf4d..02afccd32 100644
--- a/packages/widget/src/components/SendToWallet/store.ts
+++ b/packages/widget/src/components/SendToWallet/store.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import create from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import type { SendToWalletStore } from './types';
diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
index 867b792c2..0ca469fd4 100644
--- a/packages/widget/src/components/StepActions/StepActions.style.tsx
+++ b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -70,7 +70,6 @@ export const StepContent = styled(MuiStepContent, {
 }));
 
 export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
-  color:
-    variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+  color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }));
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
index 3e024f5d0..9eb93db87 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
@@ -1,5 +1,5 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { IconButton as MuiIconButton, Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
 import { getContrastTextColor } from '../../utils';
 
 export const Label = styled(Typography, {
@@ -10,8 +10,8 @@ export const Label = styled(Typography, {
   borderColor: active
     ? theme.palette.secondary.main
     : theme.palette.mode === 'light'
-    ? theme.palette.grey[500]
-    : theme.palette.grey[600],
+    ? theme.palette.grey[300]
+    : theme.palette.grey[700],
   borderRadius: theme.shape.borderRadiusSecondary,
   color: active
     ? getContrastTextColor(theme, theme.palette.secondary.main)
@@ -26,3 +26,18 @@ export const Label = styled(Typography, {
   display: 'inline-flex',
   userSelect: 'none',
 }));
+
+export const IconButton = styled(MuiIconButton, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>(({ theme, active }) => {
+  const backgroundColor =
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white;
+  return {
+    backgroundColor: alpha(backgroundColor, 0.04),
+    '&:hover': {
+      backgroundColor: alpha(backgroundColor, 0.08),
+    },
+  };
+});
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
index ea7cf69cf..2e52fc0b0 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -1,87 +1,137 @@
+import {
+  AccessTime as AccessTimeIcon,
+  EvStationOutlined as EvStationIcon,
+  ExpandLess as ExpandLessIcon,
+  ExpandMore as ExpandMoreIcon,
+  LayersOutlined as LayersIcon,
+} from '@mui/icons-material';
 import type { BoxProps } from '@mui/material';
-import { Box, Typography } from '@mui/material';
+import { Box, Collapse, Typography } from '@mui/material';
+import type { MouseEventHandler } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
-import { Label } from './SwapRouteCard.style';
-import type { SwapRouteCardProps } from './types';
+import { IconButton, Label } from './SwapRouteCard.style';
+import type { SwapRouteCardEssentialsProps, SwapRouteCardProps } from './types';
 
 export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
   route,
   active,
-  dense,
+  variant = 'default',
   ...other
 }) => {
   const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(variant === 'default');
   const alternativeTag = t(`swap.tags.ALTERNATIVE`);
   const label = route.tags?.length
     ? t(`swap.tags.${route.tags[0]}` as any)
     : alternativeTag;
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setExpanded((expanded) => !expanded);
+  };
   return (
-    <Card dense={dense} indented {...other}>
+    <Card
+      dense={variant === 'dense'}
+      variant={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      indented
+      {...other}
+    >
       <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
         mb={2}
       >
         <Label active={active ?? label !== alternativeTag}>{label}</Label>
+        {variant === 'extended' ? (
+          <SwapRouteCardEssentials route={route} />
+        ) : null}
       </Box>
-      <Token token={{ ...route.toToken, amount: route.toAmount }} mb={2} />
-      {!dense
-        ? route.steps.map((step) => (
-            <StepActions key={step.id} step={step} mb={2} />
-          ))
-        : null}
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Box>
-          <Typography fontSize={18} fontWeight="500" lineHeight={1} pt={0.25}>
-            {t(`swap.currency`, { value: route.gasCostUSD ?? 0 })}
-          </Typography>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            lineHeight={1}
-            mt={0.5}
-          >
-            {t(`swap.gas`)}
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Token
+          token={{ ...route.toToken, amount: route.toAmount }}
+          step={variant === 'extended' ? route.steps[0] : undefined}
+        />
+        {variant === 'extended' ? (
+          <IconButton onClick={handleExpand} size="small">
+            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        ) : null}
+      </Box>
+      <Collapse mountOnEnter unmountOnExit in={expanded}>
+        {route.steps.map((step) => (
+          <StepActions key={step.id} step={step} mt={2} />
+        ))}
+      </Collapse>
+      {variant !== 'extended' ? (
+        <SwapRouteCardEssentials route={route} dense />
+      ) : null}
+    </Card>
+  );
+};
+
+export const SwapRouteCardEssentials: React.FC<
+  SwapRouteCardEssentialsProps
+> = ({ route, dense }) => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      display="flex"
+      justifyContent={dense ? 'space-between' : 'flex-end'}
+      flex={1}
+      pl={dense ? 0 : 2}
+      mt={dense ? 2 : 0}
+    >
+      <Box display="flex" alignItems="center" pr={dense ? 0 : 2}>
+        <Typography lineHeight={0} mr={0.5} color="grey.500">
+          <EvStationIcon fontSize={dense ? 'medium' : 'small'} />
+        </Typography>
+        <Typography
+          fontSize={14}
+          color="text.primary"
+          fontWeight="500"
+          lineHeight={1}
+        >
+          {t(`swap.currency`, { value: route.gasCostUSD ?? 0 })}
+        </Typography>
+      </Box>
+      <Box display="flex" alignItems="center" pr={dense ? 0 : 2}>
+        <Typography lineHeight={0} mr={0.5} color="grey.500">
+          <AccessTimeIcon fontSize={dense ? 'medium' : 'small'} />
+        </Typography>
+        <Typography
+          fontSize={14}
+          color="text.primary"
+          fontWeight="500"
+          lineHeight={1}
+        >
+          {`${(
+            route.steps
+              .map((step) => step.estimate.executionDuration)
+              .reduce((duration, x) => duration + x) / 60
+          ).toFixed(0)}m`}
+        </Typography>
+      </Box>
+      {!dense ? (
+        <Box display="flex" alignItems="center">
+          <Typography lineHeight={0} mr={0.5} color="grey.500">
+            <LayersIcon fontSize={dense ? 'medium' : 'small'} />
           </Typography>
-        </Box>
-        <Box>
           <Typography
-            fontSize={18}
+            fontSize={14}
+            color="text.primary"
             fontWeight="500"
-            display="flex"
-            justifyContent="flex-end"
             lineHeight={1}
-            pt={0.25}
           >
-            ~
-            {(
-              route.steps
-                .map((step) => step.estimate.executionDuration)
-                .reduce((duration, x) => duration + x) / 60
-            ).toFixed(0)}
-          </Typography>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            textAlign="end"
-            lineHeight={1}
-            mt={0.5}
-          >
-            {t(`swap.minutes`)}
+            {route.steps.length}
           </Typography>
         </Box>
-      </Box>
-    </Card>
+      ) : null}
+    </Box>
   );
 };
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
index 346803f9f..0aed60917 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
@@ -5,57 +5,64 @@ import type { SwapRouteCardSkeletonProps } from './types';
 
 export const SwapRouteCardSkeleton: React.FC<
   SwapRouteCardSkeletonProps & BoxProps
-> = ({ dense, ...other }) => {
+> = ({ variant, ...other }) => {
   return (
-    <Card dense={dense} indented {...other}>
-      <Skeleton
-        variant="rectangular"
-        width={120}
-        height={24}
-        sx={{ borderRadius: 0.5 }}
-      />
-      <Box my={2}>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
+    <Card dense={variant === 'dense'} indented {...other}>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Skeleton
+          variant="rectangular"
+          width={118}
+          height={24}
+          sx={{ borderRadius: 0.5 }}
+        />
+        {variant === 'extended' ? (
+          <Box display="flex">
+            <Skeleton
+              variant="text"
+              width={52}
+              height={24}
+              sx={{ marginRight: 2 }}
+            />
+            <Skeleton
+              variant="text"
+              width={44}
+              height={24}
+              sx={{ marginRight: 2 }}
+            />
+            <Skeleton variant="text" width={32} height={24} />
+          </Box>
+        ) : null}
+      </Box>
+      <Box mt={2}>
+        <Box display="flex" alignItems="center">
           <Box mr={2}>
             <Skeleton variant="circular" width={32} height={32} />
           </Box>
           <Skeleton variant="text" width={96} height={32} />
         </Box>
-        <Box ml={6}>
+        <Box ml={6} display="flex" alignItems="center">
           <Skeleton
             variant="text"
             width={102}
             height={16}
             sx={{ borderRadius: 0.5 }}
           />
+          {variant === 'extended' ? (
+            <Skeleton
+              variant="text"
+              width={72}
+              height={16}
+              sx={{ marginLeft: 1 }}
+            />
+          ) : null}
         </Box>
       </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Box>
-          <Skeleton variant="text" width={56} height={20} />
-          <Skeleton variant="text" width={52} height={16} />
+      {variant !== 'extended' ? (
+        <Box mt={2} display="flex" justifyContent="space-between">
+          <Skeleton variant="text" width={48} height={24} />
+          <Skeleton variant="text" width={48} height={24} />
         </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'flex-end',
-            flexDirection: 'column',
-          }}
-        >
-          <Skeleton variant="text" width={40} height={20} />
-          <Skeleton variant="text" width={48} height={16} />
-        </Box>
-      </Box>
+      ) : null}
     </Card>
   );
 };
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteNotFoundCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteNotFoundCard.tsx
index 8995a244d..d407d6fc4 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteNotFoundCard.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteNotFoundCard.tsx
@@ -1,12 +1,8 @@
 import { Route as RouteIcon } from '@mui/icons-material';
-import type { BoxProps } from '@mui/material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import type { SwapRouteCardSkeletonProps } from './types';
 
-export const SwapRouteNotFoundCard: React.FC<
-  SwapRouteCardSkeletonProps & BoxProps
-> = ({ dense, ...other }) => {
+export const SwapRouteNotFoundCard: React.FC = () => {
   const { t } = useTranslation();
   return (
     <Box
diff --git a/packages/widget/src/components/SwapRouteCard/types.ts b/packages/widget/src/components/SwapRouteCard/types.ts
index 63bb039e0..059867ed9 100644
--- a/packages/widget/src/components/SwapRouteCard/types.ts
+++ b/packages/widget/src/components/SwapRouteCard/types.ts
@@ -2,10 +2,15 @@ import type { Route } from '@lifi/sdk';
 
 export interface SwapRouteCardProps {
   route: Route;
-  dense?: boolean;
+  variant?: 'default' | 'extended' | 'dense';
   active?: boolean;
 }
 
-export interface SwapRouteCardSkeletonProps {
+export interface SwapRouteCardEssentialsProps {
+  route: Route;
   dense?: boolean;
 }
+
+export interface SwapRouteCardSkeletonProps {
+  variant?: 'default' | 'extended' | 'dense';
+}
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.style.ts b/packages/widget/src/components/SwapRoutes/SwapRoutes.style.ts
new file mode 100644
index 000000000..decbbc7c7
--- /dev/null
+++ b/packages/widget/src/components/SwapRoutes/SwapRoutes.style.ts
@@ -0,0 +1,51 @@
+import { Box, Stack as MuiStack } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { maxHeight } from '../AppContainer';
+
+export const Stack = styled(MuiStack)(({ theme }) => ({
+  alignItems: 'stretch',
+  display: 'flex',
+  flex: 1,
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+  borderRight: `solid ${
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800]
+  }`,
+  width: 'calc(100% - 48px)',
+}));
+
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+  height: maxHeight,
+}));
+
+export const ScrollableContainer = styled(Box)({
+  overflowY: 'auto',
+  height: '100%',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Container = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto',
+  width: 436,
+  maxHeight,
+  marginLeft: theme.spacing(3),
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+export const Header = styled(Box)(({ theme }) => ({
+  backgroundColor: alpha(theme.palette.background.default, 0.84),
+  backdropFilter: 'blur(12px)',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(1.5, 3),
+  position: 'sticky',
+  top: 0,
+  zIndex: 1200,
+}));
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
new file mode 100644
index 000000000..b0f60f579
--- /dev/null
+++ b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -0,0 +1,130 @@
+import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import type { BoxProps } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardTitle } from '../../components/Card';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
+import {
+  SwapRouteCard,
+  SwapRouteCardSkeleton,
+  SwapRouteNotFoundCard,
+} from '../../components/SwapRouteCard';
+import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSelectedRouteStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Stack } from './SwapRoutes.style';
+
+export const SwapRoutes: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const { variant } = useWidgetConfig();
+  const navigate = useNavigate();
+  const { isValid, isValidating } = useFormState();
+  const setSelectedRoute = useSelectedRouteStore(
+    (state) => state.setSelectedRoute,
+  );
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useSwapRoutes();
+
+  const currentRoute = routes?.[0];
+
+  useEffect(() => {
+    setSelectedRoute(!isFetching ? currentRoute : undefined);
+    return () => setSelectedRoute(undefined);
+  }, [currentRoute, isFetching, setSelectedRoute]);
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null;
+  }
+
+  const handleCardClick = () => {
+    navigate(navigationRoutes.swapRoutes);
+  };
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching;
+
+  if (variant === 'expandable') {
+    return null;
+  }
+
+  return (
+    <Card {...props}>
+      <CardTitle>{t('swap.routes')}</CardTitle>
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+      <Box sx={{ display: 'flex' }}>
+        <Stack
+          direction="row"
+          spacing={2}
+          my={2}
+          ml={2}
+          mr={routeNotFound ? 2 : 1}
+          sx={{
+            borderWidth:
+              !routeNotFound && (isFetching || (routes && routes.length > 1))
+                ? 1
+                : 0,
+          }}
+        >
+          {isLoading || isFetching ? (
+            <>
+              <SwapRouteCardSkeleton minWidth="80%" variant="dense" />
+              <SwapRouteCardSkeleton minWidth="80%" variant="dense" />
+            </>
+          ) : !currentRoute ? (
+            <SwapRouteNotFoundCard />
+          ) : (
+            <>
+              <SwapRouteCard
+                minWidth={routes.length > 1 ? '80%' : '100%'}
+                route={currentRoute}
+                variant="dense"
+                active
+              />
+              {routes.length > 1 ? (
+                <SwapRouteCard
+                  minWidth="80%"
+                  route={routes[1]}
+                  variant="dense"
+                />
+              ) : null}
+            </>
+          )}
+        </Stack>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          {!routeNotFound ? (
+            <Box py={1} pr={1}>
+              <IconButton
+                onClick={handleCardClick}
+                size="medium"
+                aria-label="swap-routes"
+                disabled={isValidating || !isValid}
+              >
+                <KeyboardArrowRightIcon />
+              </IconButton>
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+    </Card>
+  );
+};
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx
new file mode 100644
index 000000000..dd39694a4
--- /dev/null
+++ b/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx
@@ -0,0 +1,109 @@
+/* eslint-disable react/no-array-index-key */
+import type { Route } from '@lifi/sdk';
+import { Collapse, Grow, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute } from '../../stores';
+import { navigationRoutes, navigationRoutesValues } from '../../utils';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import {
+  SwapRouteCard,
+  SwapRouteCardSkeleton,
+  SwapRouteNotFoundCard,
+} from '../SwapRouteCard';
+import {
+  CollapseContainer,
+  Container,
+  Header,
+  ScrollableContainer,
+} from './SwapRoutes.style';
+
+export const SwapRoutesExpanded = () => {
+  const { t } = useTranslation();
+  const { containerStyle } = useWidgetConfig();
+  const navigate = useNavigate();
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useSwapRoutes();
+
+  const setExecutableRoute = useSetExecutableRoute();
+
+  const { pathname } = useLocation();
+  const cleanedPathname = pathname.endsWith('/')
+    ? pathname.slice(0, -1)
+    : pathname;
+  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
+  const hasPath = navigationRoutesValues.includes(path);
+
+  const handleRouteClick = (route: Route) => {
+    setExecutableRoute(route);
+    navigate(navigationRoutes.swapExecution, {
+      state: { routeId: route.id },
+    });
+  };
+
+  const currentRoute = routes?.[0];
+
+  const expanded =
+    Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
+
+  return (
+    <CollapseContainer>
+      <Collapse appear timeout={225} in={expanded} orientation="horizontal">
+        <Grow appear timeout={225} in={expanded}>
+          <Container sx={containerStyle}>
+            <ScrollableContainer>
+              <Header>
+                <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
+                  {t('swap.routes')}
+                </Typography>
+                <ProgressToNextUpdate
+                  updatedAt={dataUpdatedAt || new Date().getTime()}
+                  timeToUpdate={refetchTime}
+                  isLoading={isFetching}
+                  onClick={() => refetch()}
+                  sx={{ marginRight: -1 }}
+                />
+              </Header>
+              <Stack
+                direction="column"
+                spacing={2}
+                flex={1}
+                paddingX={3}
+                paddingBottom={3}
+              >
+                {routeNotFound ? (
+                  <SwapRouteNotFoundCard />
+                ) : isLoading || isFetching ? (
+                  Array.from({ length: 3 }).map((_, index) => (
+                    <SwapRouteCardSkeleton key={index} variant="extended" />
+                  ))
+                ) : (
+                  routes?.map((route: Route, index: number) => (
+                    <SwapRouteCard
+                      key={route.id}
+                      route={route}
+                      onClick={() => handleRouteClick(route)}
+                      active={index === 0}
+                      variant="extended"
+                    />
+                  ))
+                )}
+              </Stack>
+            </ScrollableContainer>
+          </Container>
+        </Grow>
+      </Collapse>
+    </CollapseContainer>
+  );
+};
diff --git a/packages/widget/src/components/SwapRoutes/index.ts b/packages/widget/src/components/SwapRoutes/index.ts
new file mode 100644
index 000000000..dc9ebb9cc
--- /dev/null
+++ b/packages/widget/src/components/SwapRoutes/index.ts
@@ -0,0 +1,2 @@
+export * from './SwapRoutes';
+export * from './SwapRoutesExpanded';
diff --git a/packages/widget/src/components/Token/Token.style.tsx b/packages/widget/src/components/Token/Token.style.tsx
index ef293c0a4..f9fdb039a 100644
--- a/packages/widget/src/components/Token/Token.style.tsx
+++ b/packages/widget/src/components/Token/Token.style.tsx
@@ -20,6 +20,8 @@ export const TextSecondary = styled(Typography, {
   padding: connected
     ? theme.spacing(0, 0, 0, 3.875)
     : theme.spacing(0, 0, 0, 0),
+  display: 'flex',
+  alignItems: 'flex-start',
 }));
 
 export const TokenDivider = styled(Box)(({ theme }) => ({
diff --git a/packages/widget/src/components/Token/Token.tsx b/packages/widget/src/components/Token/Token.tsx
index bbf2e7bcf..98e393ec0 100644
--- a/packages/widget/src/components/Token/Token.tsx
+++ b/packages/widget/src/components/Token/Token.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable react/no-array-index-key */
-import type { TokenAmount } from '@lifi/sdk';
+import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary } from './Token.style';
 
 export const Token: React.FC<
-  { token: TokenAmount; connected?: boolean } & BoxProps
-> = ({ token, connected, ...other }) => {
+  { token: TokenAmount; connected?: boolean; step?: Step } & BoxProps
+> = ({ token, connected, step, ...other }) => {
   const { t } = useTranslation();
   const { getChainById } = useChains();
   return (
@@ -27,12 +28,47 @@ export const Token: React.FC<
           {formatTokenAmount(token.amount, token.decimals)}
         </TextFitter>
       </Box>
-      <TextSecondary connected={connected}>
-        {t(`swap.tokenOnChain`, {
-          tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
-        })}
-      </TextSecondary>
+      <Box display="flex">
+        <TextSecondary connected={connected}>
+          {t(`swap.tokenOnChain`, {
+            tokenSymbol: token.symbol,
+            chainName: getChainById(token.chainId)?.name,
+          })}
+        </TextSecondary>
+        {step ? (
+          <Box display="flex" alignItems="flex-end" height={12} mt={0.5}>
+            <Typography
+              fontSize={12}
+              lineHeight={1}
+              fontWeight={500}
+              color="text.secondary"
+              px={1}
+            >
+              &#x2022;
+            </Typography>
+            <Box pr={0.75}>
+              <SmallAvatar
+                src={step.toolDetails.logoURI}
+                alt={step.toolDetails.name}
+                sx={{
+                  border: 0,
+                  marginBottom: -0.25,
+                }}
+              >
+                {step.toolDetails.name[0]}
+              </SmallAvatar>
+            </Box>
+            <Typography
+              fontSize={12}
+              lineHeight={1}
+              fontWeight={500}
+              color="text.secondary"
+            >
+              {step.toolDetails.name}
+            </Typography>
+          </Box>
+        ) : null}
+      </Box>
     </Box>
   );
 };
diff --git a/packages/widget/src/hooks/useChains.ts b/packages/widget/src/hooks/useChains.ts
index 98ae3acb6..46b243d76 100644
--- a/packages/widget/src/hooks/useChains.ts
+++ b/packages/widget/src/hooks/useChains.ts
@@ -7,7 +7,7 @@ import {
   useLiFi,
   useWidgetConfig,
 } from '../providers';
-import { useChainOrderStore } from '../stores/chains';
+import { useChainOrderStore } from '../stores';
 
 export const useChains = () => {
   const { disabledChains, chains } = useWidgetConfig();
diff --git a/packages/widget/src/hooks/useRouteExecution.ts b/packages/widget/src/hooks/useRouteExecution.ts
index 868c65cfb..82b4c222d 100644
--- a/packages/widget/src/hooks/useRouteExecution.ts
+++ b/packages/widget/src/hooks/useRouteExecution.ts
@@ -8,7 +8,7 @@ import {
   isRouteActive,
   isRouteCompleted,
   isRouteFailed,
-  useRouteStore,
+  useRouteExecutionStore,
 } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
@@ -22,14 +22,17 @@ export const useRouteExecution = (
   const { account, switchChain } = useWallet();
   const resumedAfterMount = useRef(false);
   const emitter = useWidgetEvents();
-  const routeExecution = useRouteStore((state) => state.routes[routeId]);
-  const [updateRoute, restartRoute, deleteRoute] = useRouteStore(
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[routeId],
+  );
+  const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
     (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
     shallow,
   );
 
   const updateCallback = (updatedRoute: Route) => {
-    const routeExecution = useRouteStore.getState().routes[updatedRoute.id];
+    const routeExecution =
+      useRouteExecutionStore.getState().routes[updatedRoute.id];
     if (!routeExecution) {
       return;
     }
@@ -173,7 +176,7 @@ export const useRouteExecution = (
 
   useEffect(() => {
     return () => {
-      const route = useRouteStore.getState().routes[routeId]?.route;
+      const route = useRouteExecutionStore.getState().routes[routeId]?.route;
       if (!route || !isRouteActive(route)) {
         return;
       }
diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx
index 56f90cf8c..dd7962337 100644
--- a/packages/widget/src/pages/MainPage/MainPage.tsx
+++ b/packages/widget/src/pages/MainPage/MainPage.tsx
@@ -1,14 +1,15 @@
 import { Box } from '@mui/material';
 import { ActiveSwaps } from '../../components/ActiveSwaps';
+import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import {
   SendToWallet,
   SendToWalletButton,
 } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
+import { SwapRoutes } from '../../components/SwapRoutes';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
-import { SwapRoutes } from './SwapRoutes';
 
 export const MainPage: React.FC = () => {
   return (
@@ -19,6 +20,7 @@ export const MainPage: React.FC = () => {
         <SwapInput formType="from" />
       </Box>
       <SwapRoutes mx={3} mb={3} />
+      <GasSufficiencyMessage mx={3} mb={3} />
       <Box mx={3} mb={1}>
         <SendToWallet mb={3} />
         <Box sx={{ display: 'flex' }}>
diff --git a/packages/widget/src/pages/MainPage/SwapRoutes.style.ts b/packages/widget/src/pages/MainPage/SwapRoutes.style.ts
deleted file mode 100644
index 6370d1f2f..000000000
--- a/packages/widget/src/pages/MainPage/SwapRoutes.style.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Stack as MuiStack } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const Stack = styled(MuiStack)(({ theme }) => ({
-  alignItems: 'stretch',
-  display: 'flex',
-  flex: 1,
-  flexWrap: 'nowrap',
-  overflow: 'hidden',
-  borderRight: `solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-  width: 'calc(100% - 48px)',
-}));
diff --git a/packages/widget/src/pages/MainPage/SwapRoutes.tsx b/packages/widget/src/pages/MainPage/SwapRoutes.tsx
deleted file mode 100644
index 6846c5b89..000000000
--- a/packages/widget/src/pages/MainPage/SwapRoutes.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import type { BoxProps } from '@mui/material';
-import { Box, IconButton } from '@mui/material';
-import { useCallback } from 'react';
-import { useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Card, CardTitle } from '../../components/Card';
-import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import {
-  SwapRouteCard,
-  SwapRouteCardSkeleton,
-  SwapRouteNotFoundCard,
-} from '../../components/SwapRouteCard';
-import { useSwapRoutes } from '../../hooks';
-import { navigationRoutes } from '../../utils';
-import { Stack } from './SwapRoutes.style';
-
-export const SwapRoutes: React.FC<BoxProps> = (props) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { isValid, isValidating } = useFormState();
-  const {
-    routes,
-    isLoading,
-    isFetching,
-    isFetched,
-    dataUpdatedAt,
-    refetchTime,
-    refetch,
-  } = useSwapRoutes();
-
-  const handleCardClick = useCallback(() => {
-    navigate(navigationRoutes.swapRoutes);
-  }, [navigate]);
-
-  const currentRoute = routes?.[0];
-
-  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
-    return null;
-  }
-
-  const routeNotFound = !currentRoute && !isLoading && !isFetching;
-
-  return (
-    <>
-      <Card {...props}>
-        <CardTitle>{t('swap.routes')}</CardTitle>
-        <ProgressToNextUpdate
-          updatedAt={dataUpdatedAt || new Date().getTime()}
-          timeToUpdate={refetchTime}
-          isLoading={isFetching}
-          onClick={() => refetch()}
-          sx={{
-            position: 'absolute',
-            top: 8,
-            right: 8,
-          }}
-        />
-        <Box sx={{ display: 'flex' }}>
-          <Stack
-            direction="row"
-            spacing={2}
-            my={2}
-            ml={2}
-            mr={routeNotFound ? 2 : 1}
-            sx={{
-              borderWidth:
-                !routeNotFound && (isFetching || (routes && routes.length > 1))
-                  ? 1
-                  : 0,
-            }}
-          >
-            {isLoading || isFetching ? (
-              <>
-                <SwapRouteCardSkeleton minWidth="80%" dense />
-                <SwapRouteCardSkeleton minWidth="80%" dense />
-              </>
-            ) : !currentRoute ? (
-              <SwapRouteNotFoundCard minWidth="100%" dense />
-            ) : (
-              <>
-                <SwapRouteCard
-                  minWidth={routes.length > 1 ? '80%' : '100%'}
-                  route={currentRoute}
-                  active
-                  dense
-                />
-                {routes.length > 1 ? (
-                  <SwapRouteCard minWidth="80%" route={routes[1]} dense />
-                ) : null}
-              </>
-            )}
-          </Stack>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            {!routeNotFound ? (
-              <Box py={1} pr={1}>
-                <IconButton
-                  onClick={handleCardClick}
-                  size="medium"
-                  aria-label="swap-routes"
-                  disabled={isValidating || !isValid}
-                >
-                  <KeyboardArrowRightIcon />
-                </IconButton>
-              </Box>
-            ) : null}
-          </Box>
-        </Box>
-      </Card>
-      <GasSufficiencyMessage
-        route={!isFetching ? currentRoute : undefined}
-        {...props}
-      />
-    </>
-  );
-};
diff --git a/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx b/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
index 4033e7999..2dd017504 100644
--- a/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
+++ b/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
@@ -22,14 +22,14 @@ import { useHeaderActionStore } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { useNavigateBack } from '../../hooks';
-import { useRouteStore } from '../../stores';
+import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 
 export const SwapDetailsPage: React.FC = () => {
   const { t } = useTranslation();
   const { navigateBack } = useNavigateBack();
   const { state }: any = useLocation();
-  const [routeExecution, deleteRoute] = useRouteStore(
+  const [routeExecution, deleteRoute] = useRouteExecutionStore(
     (store) => [store.routes[state?.routeId], store.deleteRoute],
     shallow,
   );
diff --git a/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx b/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx
index 73253dc95..e2d95abd2 100644
--- a/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx
+++ b/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx
@@ -14,8 +14,8 @@ import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { useHeaderActionStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useRouteStore } from '../../stores';
-import { useSwapHistory } from '../../stores/route';
+import { useRouteExecutionStore } from '../../stores';
+import { useSwapHistory } from '../../stores/routes';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';
 import { SwapHistoryItem } from './SwapHistoryItem';
 
@@ -23,7 +23,7 @@ export const SwapHistoryPage: React.FC = () => {
   const { t } = useTranslation();
   const { account } = useWallet();
   const swaps = useSwapHistory(account.address);
-  const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
+  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
   const [open, setOpen] = useState(false);
 
   const toggleDialog = useCallback(() => {
diff --git a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx
index a93a4bb9d..ab00e1cfa 100644
--- a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx
+++ b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx
@@ -68,11 +68,12 @@ export const SwapRoutesPage: React.FC<BoxProps> = () => {
           <SwapRouteCardSkeleton key={index} />
         ))
       ) : (
-        swapRoutes?.map((route: Route) => (
+        swapRoutes?.map((route: Route, index: number) => (
           <SwapRouteCard
             key={route.id}
             route={route}
             onClick={() => handleRouteClick(route)}
+            active={index === 0}
           />
         ))
       )}
diff --git a/packages/widget/src/providers/WalletProvider/WalletProvider.tsx b/packages/widget/src/providers/WalletProvider/WalletProvider.tsx
index bd43fdcfa..1bbc702e7 100644
--- a/packages/widget/src/providers/WalletProvider/WalletProvider.tsx
+++ b/packages/widget/src/providers/WalletProvider/WalletProvider.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useChainOrderStore } from '../../stores/chains';
+import { useChainOrderStore } from '../../stores';
 import { SwapFormKey } from '../SwapFormProvider';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 import type { WalletAccount, WalletContextProps } from './types';
diff --git a/packages/widget/src/stores/index.ts b/packages/widget/src/stores/index.ts
index 55f7b4eec..65dcfd428 100644
--- a/packages/widget/src/stores/index.ts
+++ b/packages/widget/src/stores/index.ts
@@ -1,2 +1,3 @@
-export * from './route';
+export * from './chains';
+export * from './routes';
 export * from './settings';
diff --git a/packages/widget/src/stores/route/useSetExecutableRoute.ts b/packages/widget/src/stores/route/useSetExecutableRoute.ts
deleted file mode 100644
index 1189b3529..000000000
--- a/packages/widget/src/stores/route/useSetExecutableRoute.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useRouteStore } from './useRouteStore';
-
-export const useSetExecutableRoute = () => {
-  return useRouteStore((state) => state.setExecutableRoute);
-};
diff --git a/packages/widget/src/stores/route/index.ts b/packages/widget/src/stores/routes/index.ts
similarity index 66%
rename from packages/widget/src/stores/route/index.ts
rename to packages/widget/src/stores/routes/index.ts
index 4e2c0e89a..2bcb65a43 100644
--- a/packages/widget/src/stores/route/index.ts
+++ b/packages/widget/src/stores/routes/index.ts
@@ -1,6 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRouteStore';
+export * from './useRouteExecutionStore';
+export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';
diff --git a/packages/widget/src/stores/route/types.ts b/packages/widget/src/stores/routes/types.ts
similarity index 81%
rename from packages/widget/src/stores/route/types.ts
rename to packages/widget/src/stores/routes/types.ts
index 9aa16a84b..449184e30 100644
--- a/packages/widget/src/stores/route/types.ts
+++ b/packages/widget/src/stores/routes/types.ts
@@ -15,3 +15,8 @@ export interface RouteExecution {
   route: Route;
   status: RouteExecutionStatus;
 }
+
+export interface SelectedRouteStore {
+  selectedRoute?: Route;
+  setSelectedRoute: (route?: Route) => void;
+}
diff --git a/packages/widget/src/stores/route/useExecutingRoutesIds.ts b/packages/widget/src/stores/routes/useExecutingRoutesIds.ts
similarity index 86%
rename from packages/widget/src/stores/route/useExecutingRoutesIds.ts
rename to packages/widget/src/stores/routes/useExecutingRoutesIds.ts
index 0bb7ef2d5..878b4a652 100644
--- a/packages/widget/src/stores/route/useExecutingRoutesIds.ts
+++ b/packages/widget/src/stores/routes/useExecutingRoutesIds.ts
@@ -1,9 +1,9 @@
 import shallow from 'zustand/shallow';
 import type { RouteExecution } from './types';
-import { useRouteStore } from './useRouteStore';
+import { useRouteExecutionStore } from './useRouteExecutionStore';
 
 export const useExecutingRoutesIds = (address?: string) => {
-  return useRouteStore(
+  return useRouteExecutionStore(
     (state) =>
       (Object.values(state.routes) as RouteExecution[])
         .filter(
diff --git a/packages/widget/src/stores/route/useRouteStore.ts b/packages/widget/src/stores/routes/useRouteExecutionStore.ts
similarity index 97%
rename from packages/widget/src/stores/route/useRouteStore.ts
rename to packages/widget/src/stores/routes/useRouteExecutionStore.ts
index 9acf161e0..77505f9aa 100644
--- a/packages/widget/src/stores/route/useRouteStore.ts
+++ b/packages/widget/src/stores/routes/useRouteExecutionStore.ts
@@ -5,7 +5,7 @@ import { immer } from 'zustand/middleware/immer';
 import type { RouteExecutionStore } from './types';
 import { isRouteCompleted, isRouteFailed } from './utils';
 
-export const useRouteStore = create<RouteExecutionStore>()(
+export const useRouteExecutionStore = create<RouteExecutionStore>()(
   persist(
     immer((set) => ({
       routes: {},
diff --git a/packages/widget/src/stores/routes/useSelectedRouteStore.ts b/packages/widget/src/stores/routes/useSelectedRouteStore.ts
new file mode 100644
index 000000000..53a91f2a2
--- /dev/null
+++ b/packages/widget/src/stores/routes/useSelectedRouteStore.ts
@@ -0,0 +1,14 @@
+import type { Route } from '@lifi/sdk';
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import type { SelectedRouteStore } from './types';
+
+export const useSelectedRouteStore = create<SelectedRouteStore>()(
+  immer((set) => ({
+    setSelectedRoute: (route?: Route) => {
+      set((state) => {
+        state.selectedRoute = route;
+      });
+    },
+  })),
+);
diff --git a/packages/widget/src/stores/routes/useSetExecutableRoute.ts b/packages/widget/src/stores/routes/useSetExecutableRoute.ts
new file mode 100644
index 000000000..64f82f955
--- /dev/null
+++ b/packages/widget/src/stores/routes/useSetExecutableRoute.ts
@@ -0,0 +1,5 @@
+import { useRouteExecutionStore } from './useRouteExecutionStore';
+
+export const useSetExecutableRoute = () => {
+  return useRouteExecutionStore((state) => state.setExecutableRoute);
+};
diff --git a/packages/widget/src/stores/route/useSwapHistory.ts b/packages/widget/src/stores/routes/useSwapHistory.ts
similarity index 84%
rename from packages/widget/src/stores/route/useSwapHistory.ts
rename to packages/widget/src/stores/routes/useSwapHistory.ts
index 4000868b4..aedfd5769 100644
--- a/packages/widget/src/stores/route/useSwapHistory.ts
+++ b/packages/widget/src/stores/routes/useSwapHistory.ts
@@ -1,9 +1,9 @@
 import shallow from 'zustand/shallow';
 import type { RouteExecution } from './types';
-import { useRouteStore } from './useRouteStore';
+import { useRouteExecutionStore } from './useRouteExecutionStore';
 
 export const useSwapHistory = (address?: string) => {
-  return useRouteStore(
+  return useRouteExecutionStore(
     (state) =>
       Object.values(state.routes)
         .filter(
diff --git a/packages/widget/src/stores/route/utils.ts b/packages/widget/src/stores/routes/utils.ts
similarity index 100%
rename from packages/widget/src/stores/route/utils.ts
rename to packages/widget/src/stores/routes/utils.ts
diff --git a/packages/widget/src/utils/navigationRoutes.ts b/packages/widget/src/utils/navigationRoutes.ts
index 777c1c126..9b469ae86 100644
--- a/packages/widget/src/utils/navigationRoutes.ts
+++ b/packages/widget/src/utils/navigationRoutes.ts
@@ -16,29 +16,29 @@ export const navigationRoutes = {
 export const navigationRoutesValues = Object.values(navigationRoutes);
 
 export const stickyHeaderRoutes = [
-  navigationRoutes.selectWallet,
+  navigationRoutes.activeSwaps,
   navigationRoutes.fromChain,
-  navigationRoutes.toChain,
+  navigationRoutes.selectWallet,
   navigationRoutes.settings,
-  navigationRoutes.swapRoutes,
+  navigationRoutes.swapDetails,
   navigationRoutes.swapExecution,
   navigationRoutes.swapHistory,
-  navigationRoutes.activeSwaps,
-  navigationRoutes.swapDetails,
+  navigationRoutes.swapRoutes,
+  navigationRoutes.toChain,
 ];
 
 export const backButtonRoutes = [
+  navigationRoutes.activeSwaps,
+  navigationRoutes.fromChain,
+  navigationRoutes.fromToken,
   navigationRoutes.selectWallet,
   navigationRoutes.settings,
+  navigationRoutes.swapDetails,
+  navigationRoutes.swapExecution,
   navigationRoutes.swapHistory,
-  navigationRoutes.activeSwaps,
-  navigationRoutes.fromToken,
-  navigationRoutes.toToken,
-  navigationRoutes.fromChain,
-  navigationRoutes.toChain,
   navigationRoutes.swapRoutes,
-  navigationRoutes.swapExecution,
-  navigationRoutes.swapDetails,
+  navigationRoutes.toChain,
+  navigationRoutes.toToken,
 ];
 
 export type NavigationRouteType = keyof typeof navigationRoutes;