diff --git a/src/components/connections/Details.tsx b/src/components/connections/Details.tsx
index ba63973..9f08045 100644
--- a/src/components/connections/Details.tsx
+++ b/src/components/connections/Details.tsx
@@ -10,7 +10,7 @@ import { vars } from "../../theme/variables.ts";
 import PopulationDisplay from "./PopulationDisplay.tsx";
 import CommonAccordion from "../common/Accordion.tsx";
 import CommonChip from "../common/CommonChip.tsx";
-import { ArrowOutward, HelpCircle } from "../../icons";
+import { ArrowOutward, HelpCircle } from "../icons";
 
 const { gray500, gray700, gray800} = vars;
 
diff --git a/src/components/connections/PopulationDisplay.tsx b/src/components/connections/PopulationDisplay.tsx
index 1a0b627..7c3763d 100644
--- a/src/components/connections/PopulationDisplay.tsx
+++ b/src/components/connections/PopulationDisplay.tsx
@@ -64,7 +64,7 @@ const PopulationDisplay = () => {
         </Tabs>
       </Stack>
       <CustomTabPanel value={value} index={0}>
-        <Box sx={{height: '800px', width: '100%'}}>
+        <Box sx={{height: '50rem', width: '100%', background: '#EDEFF2'}}>
           <GraphDiagram origins={MOCKED_composerStatement.origins} vias={MOCKED_composerStatement.vias}
                         destinations={MOCKED_composerStatement.destinations}/>
         </Box>
diff --git a/src/components/connections/SummaryHeader.tsx b/src/components/connections/SummaryHeader.tsx
index 3731694..b104295 100644
--- a/src/components/connections/SummaryHeader.tsx
+++ b/src/components/connections/SummaryHeader.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Box, Button, ButtonGroup, Divider, Typography, Stack, Link } from "@mui/material";
 import { vars } from "../../theme/variables";
 import IconButton from "@mui/material/IconButton";
-import { ArrowDown, ArrowRight, ArrowUp, HelpCircle } from "../../icons";
+import { ArrowDown, ArrowRight, ArrowUp, HelpCircle } from "../icons";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 
 const { gray100, primaryPurple600, gray600A, gray500 } = vars;
diff --git a/src/components/graphDiagram/InfoMenu.tsx b/src/components/graphDiagram/InfoMenu.tsx
index 6e40147..ca83a91 100644
--- a/src/components/graphDiagram/InfoMenu.tsx
+++ b/src/components/graphDiagram/InfoMenu.tsx
@@ -1,85 +1,96 @@
-import {Stack, Typography} from "@mui/material";
+import {Divider, Stack, Typography} from "@mui/material";
 import {
     DestinationInfoIcon,
+    ForwardConnectionIcon,
     OriginInfoIcon,
     ViaInfoIcon,
-} from "../../icons";
+} from "../icons";
 import {DiagramEngine} from "@projectstorm/react-diagrams-core";
 
 
 interface InfoMenuProps {
     engine: DiagramEngine;
+    forwardConnection: boolean;
 }
 const InfoMenu = (props: InfoMenuProps) => {
-    const {engine} = props
+    const {engine, forwardConnection} = props
     return engine ? (
         <Stack
             direction="row"
             spacing="1rem"
+            alignItems='center'
             sx={{
                 borderRadius: "1.75rem",
-                border: "1px solid #F2F4F7",
-                background: "#FFFFFF7F",
-                backgroundFilter: "blur(4px)",
+                border: "0.0394rem solid #EDEFF2",
+                background: "rgba(255, 255, 255, 0.5)",
                 width: "fit-content",
                 boxShadow:
-                    "0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)",
-                padding: "0.75rem 1.25rem",
+                    "0rem 0.1567rem 0.235rem -0.0783rem rgba(16, 24, 40, 0.03), 0rem 0.47rem 0.6267rem -0.1567rem rgba(16, 24, 40, 0.08)",
+                padding: "0 1.25rem",
+                height: '3.625rem',
                 position: "absolute",
-                left: 8,
-                bottom: 8,
+                left: '1.25rem',
+                bottom: '1.25rem',
                 zIndex: 10,
 
-                "& .MuiSvgIcon-root": {
-                    color: "#475467",
-                },
-
                 "& .MuiDivider-root": {
-                    borderColor: "#EAECF0",
-                    borderWidth: 0.5,
-                },
-                "& .MuiButtonBase-root": {
-                    padding: 0,
-
-                    "&:hover": {
-                        backgroundColor: "transparent",
-                    },
+                    width: '0.0313rem',
+                    height: '1.5rem',
+                    background: '#D2D7DF'
                 },
             }}
         >
-            <Stack direction="row" alignItems="center">
+            <Stack direction="row" gap={1} alignItems="center">
                 <OriginInfoIcon/>
                 <Typography
                     sx={{
-                        color: "#039855",
+                        color: "#4A4C4F",
                         fontWeight: 500,
+                        lineHeight: 1,
                     }}
                 >
                     Origins
                 </Typography>
             </Stack>
-            <Stack direction="row" alignItems="center">
+            <Divider />
+            <Stack direction="row" gap={1} alignItems="center">
                 <ViaInfoIcon/>
                 <Typography
                     sx={{
-                        color: "#0E9384",
+                        color: "#4A4C4F",
                         fontWeight: 500,
+                        lineHeight: 1,
                     }}
                 >
                     Via
                 </Typography>
             </Stack>
-            <Stack direction="row" alignItems="center">
+            <Divider />
+            <Stack direction="row" gap={1} alignItems="center">
                 <DestinationInfoIcon/>
                 <Typography
                     sx={{
-                        color: "#088AB2",
+                        color: "#4A4C4F",
+                        lineHeight: 1,
                         fontWeight: 500,
                     }}
                 >
                     Destination
                 </Typography>
             </Stack>
+            { forwardConnection && (<><Divider />
+            <Stack direction="row" gap={1} alignItems="center">
+                <ForwardConnectionIcon />
+                <Typography
+                    sx={{
+                        color: "#4A4C4F",
+                        lineHeight: 1,
+                        fontWeight: 500,
+                    }}
+                >
+                    Forward connection
+                </Typography>
+            </Stack></>) }
         </Stack>
     ) : null;
 };
diff --git a/src/components/graphDiagram/widgets/DestinationNodeWidget.tsx b/src/components/graphDiagram/widgets/DestinationNodeWidget.tsx
index 27e4ea3..ee781a0 100644
--- a/src/components/graphDiagram/widgets/DestinationNodeWidget.tsx
+++ b/src/components/graphDiagram/widgets/DestinationNodeWidget.tsx
@@ -7,7 +7,7 @@ import Chip from "@mui/material/Chip";
 import {CustomNodeModel} from "../models/CustomNodeModel.tsx";
 import {DiagramEngine} from "@projectstorm/react-diagrams-core";
 import {NodeTypes} from "../../../models/composer.ts";
-import {DestinationIcon, OriginIcon, ViaIcon} from "../../../icons";
+import {DestinationIcon, OriginIcon, ViaIcon} from "../../icons";
 import {vars} from "../../../theme/variables.ts";
 
 interface DestinationNodeProps {
diff --git a/src/components/graphDiagram/widgets/OriginNodeWidget.tsx b/src/components/graphDiagram/widgets/OriginNodeWidget.tsx
index 45a78bb..c711eb5 100644
--- a/src/components/graphDiagram/widgets/OriginNodeWidget.tsx
+++ b/src/components/graphDiagram/widgets/OriginNodeWidget.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import {PortWidget} from "@projectstorm/react-diagrams";
 import {Typography, Box} from "@mui/material";
-import {DestinationIcon, OriginIcon, ViaIcon} from "../../../icons";
+import {DestinationIcon, OriginIcon, ViaIcon} from "../../icons";
 import Stack from "@mui/material/Stack";
 import Divider from "@mui/material/Divider";
 import {CustomNodeModel} from "../models/CustomNodeModel.tsx";
diff --git a/src/components/graphDiagram/widgets/ViaNodeWidget.tsx b/src/components/graphDiagram/widgets/ViaNodeWidget.tsx
index 04b3a47..0b32d20 100644
--- a/src/components/graphDiagram/widgets/ViaNodeWidget.tsx
+++ b/src/components/graphDiagram/widgets/ViaNodeWidget.tsx
@@ -2,7 +2,7 @@ import React, {useState} from "react";
 import {PortWidget} from "@projectstorm/react-diagrams";
 import {Typography, Box} from "@mui/material";
 import Stack from "@mui/material/Stack";
-import {DestinationIcon, OriginIcon, ViaIcon} from "../../../icons";
+import {DestinationIcon, OriginIcon, ViaIcon} from "../../icons";
 import Divider from "@mui/material/Divider";
 import Chip from "@mui/material/Chip";
 import {CustomNodeModel} from "../models/CustomNodeModel.tsx";
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index 3c6d6f4..405971d 100644
--- a/src/components/icons/index.tsx
+++ b/src/components/icons/index.tsx
@@ -1,56 +1,498 @@
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
-export const MinusIcon = () => (
-    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.91663 13H17.0833" stroke="#4A4C4F" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-</svg>
-)
-
-export const PlusIcon = () => (
-    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 8.91675V17.0834M8.91663 13.0001H17.0833" stroke="#4A4C4F" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-</svg>
-)
-
-export const UncheckedItemIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props} viewBox="0 0 16 16" sx={{ width: 16, height: 16 }}>
-    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="white" />
-    <rect
-      x="0.5"
-      y="0.5"
-      width="15"
-      height="15"
-      rx="3.5"
-      stroke="#B4BCCA"
-      fill="none"
-    />
-  </SvgIcon>
-);
-
-export const CheckedItemIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props} viewBox="0 0 16 16" sx={{ width: 16, height: 16 }}>
-    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#8300BF" />
-    <path
-      d="M12 5L6.5 10.5L4 8"
-      stroke="#fff"
-      strokeWidth="1.6666"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-    />
-    <rect
-      x="0.5"
-      y="0.5"
-      width="15"
-      height="15"
-      rx="3.5"
-      stroke="#8300BF"
-      fill="none"
-    />
-  </SvgIcon>
-);
-
-export const ArrowRightIcon = () => (
-  <svg width="44" height="36" viewBox="0 0 44 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.3335 18H28.6668M28.6668 18L23.6668 13M28.6668 18L23.6668 23" stroke="#4A4C4F" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
+import { SvgIcon } from "@mui/material";
+import {SvgIconProps} from "@mui/material/SvgIcon";
+
+export const ArrowUp = () => (
+  <SvgIcon viewBox="0 0 20 20">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15 12.5L10 7.5L5 12.5" stroke="#606E85" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  </SvgIcon>
+);
+
+export const ArrowDown = () => (
+  <SvgIcon viewBox="0 0 20 20">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5 7.5L10 12.5L15 7.5" stroke="#606E85" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  </SvgIcon>
+);
+
+export const ArrowRight = () => (
+  <SvgIcon viewBox="0 0 16 16">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6 12L10 8L6 4" stroke="#C7CBD1" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </SvgIcon>
+);
+export const ArrowOutward = () => (
+  <SvgIcon viewBox="0 0 20 20">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.83301 14.1666L14.1663 5.83325M14.1663 5.83325H5.83301M14.1663 5.83325V14.1666" stroke="#6C707A" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  </SvgIcon>
+);
+export const HelpCircle = () => (
+  <SvgIcon viewBox="0 0 16 16">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_1279_11461)">
+        <path d="M6.05967 5.99992C6.21641 5.55436 6.52578 5.17866 6.93298 4.93934C7.34018 4.70002 7.81894 4.61254 8.28446 4.69239C8.74998 4.77224 9.17222 5.01427 9.47639 5.3756C9.78057 5.73694 9.94705 6.19427 9.94634 6.66659C9.94634 7.99992 7.94634 8.66659 7.94634 8.66659M7.99967 11.3333H8.00634M14.6663 7.99992C14.6663 11.6818 11.6816 14.6666 7.99967 14.6666C4.31778 14.6666 1.33301 11.6818 1.33301 7.99992C1.33301 4.31802 4.31778 1.33325 7.99967 1.33325C11.6816 1.33325 14.6663 4.31802 14.6663 7.99992Z" stroke="#8A92A3" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_1279_11461">
+          <rect width="16" height="16" fill="white"/>
+        </clipPath>
+      </defs>
+    </svg>
+  </SvgIcon>
+);
+
+export const ArrowDownwardIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="0 0 16 16" {...props}>
+    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.2747 9.99967L16.0997 8.82467L11.4414 13.4747V3.33301H9.77474V13.4747L5.12474 8.81634L3.94141 9.99967L10.6081 16.6663L17.2747 9.99967Z" fill="#BF00FC"/>
+    </svg>
+  </SvgIcon>
+);
+
+export const OriginInfoIcon = () => (
+    // <SvgIcon
+    //     {...props}
+    //     viewBox="0 0 36 26"
+    //     sx={{
+    //         width: props.width ? props.width : 36,
+    //         height: props.height ? props.height : 36,
+    //     }}
+    // >
+    //     <g filter="url(#filter0_di_3328_77745)">
+    //         <rect x="6" y="2" width="24" height="24" rx="12" fill="#ECFDF3" />
+    //         <rect
+    //             x="7"
+    //             y="3"
+    //             width="22"
+    //             height="22"
+    //             rx="11"
+    //             stroke="#039855"
+    //             stroke-width="2"
+    //         />
+    //     </g>
+    //     <defs>
+    //         <filter
+    //             id="filter0_di_3328_77745"
+    //             x="0"
+    //             y="0"
+    //             width="36"
+    //             height="36"
+    //             filterUnits="userSpaceOnUse"
+    //             color-interpolation-filters="sRGB"
+    //         >
+    //             <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feMorphology
+    //                 radius="4"
+    //                 operator="erode"
+    //                 in="SourceAlpha"
+    //                 result="effect1_dropShadow_3328_77745"
+    //             />
+    //             <feOffset dy="4" />
+    //             <feGaussianBlur stdDeviation="5" />
+    //             <feComposite in2="hardAlpha" operator="out" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.0121568 0 0 0 0 0.595686 0 0 0 0 0.333098 0 0 0 0.2 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="BackgroundImageFix"
+    //                 result="effect1_dropShadow_3328_77745"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in="SourceGraphic"
+    //                 in2="effect1_dropShadow_3328_77745"
+    //                 result="shape"
+    //             />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feOffset />
+    //             <feGaussianBlur stdDeviation="13" />
+    //             <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.65098 0 0 0 0 0.956863 0 0 0 0 0.772549 0 0 0 1 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="shape"
+    //                 result="effect2_innerShadow_3328_77745"
+    //             />
+    //         </filter>
+    //     </defs>
+    // </SvgIcon>
+
+    <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.626667" y="1.59737" width="22.7467" height="22.7467" rx="11.3733" fill="#F6F7F9"/>
+      <rect x="0.626667" y="1.59737" width="22.7467" height="22.7467" rx="11.3733" stroke="#6C707A" stroke-width="1.25333"/>
+    </svg>
+);
+export const ViaInfoIcon = () => (
+    // <SvgIcon
+    //     {...props}
+    //     viewBox="0 0 36 26"
+    //     sx={{
+    //         width: props.width ? props.width : 36,
+    //         height: props.height ? props.height : 36,
+    //     }}
+    // >
+    //     <g filter="url(#filter0_di_3328_77749)">
+    //         <rect x="6" y="2" width="24" height="24" rx="8" fill="#F0FDF9" />
+    //         <rect
+    //             x="7"
+    //             y="3"
+    //             width="22"
+    //             height="22"
+    //             rx="7"
+    //             stroke="#0E9384"
+    //             stroke-width="2"
+    //         />
+    //     </g>
+    //     <defs>
+    //         <filter
+    //             id="filter0_di_3328_77749"
+    //             x="0"
+    //             y="0"
+    //             width="36"
+    //             height="36"
+    //             filterUnits="userSpaceOnUse"
+    //             color-interpolation-filters="sRGB"
+    //         >
+    //             <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feMorphology
+    //                 radius="4"
+    //                 operator="erode"
+    //                 in="SourceAlpha"
+    //                 result="effect1_dropShadow_3328_77749"
+    //             />
+    //             <feOffset dy="4" />
+    //             <feGaussianBlur stdDeviation="5" />
+    //             <feComposite in2="hardAlpha" operator="out" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.054902 0 0 0 0 0.576471 0 0 0 0 0.517647 0 0 0 0.2 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="BackgroundImageFix"
+    //                 result="effect1_dropShadow_3328_77749"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in="SourceGraphic"
+    //                 in2="effect1_dropShadow_3328_77749"
+    //                 result="shape"
+    //             />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feOffset />
+    //             <feGaussianBlur stdDeviation="13" />
+    //             <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.6 0 0 0 0 0.964706 0 0 0 0 0.878431 0 0 0 1 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="shape"
+    //                 result="effect2_innerShadow_3328_77749"
+    //             />
+    //         </filter>
+    //     </defs>
+    // </SvgIcon>
+    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1.12667" y="1.59737" width="22.7467" height="22.7467" rx="1.37333" fill="#F6F7F9"/>
+      <rect x="1.12667" y="1.59737" width="22.7467" height="22.7467" rx="1.37333" stroke="#6C707A" stroke-width="1.25333"/>
+    </svg>
+);
+export const DestinationInfoIcon = () => (
+    // <SvgIcon
+    //     {...props}
+    //     viewBox="0 0 36 26"
+    //     sx={{
+    //         width: props.width ? props.width : 36,
+    //         height: props.height ? props.height : 36,
+    //     }}
+    // >
+    //     <g filter="url(#filter0_di_3328_77753)">
+    //         <rect x="6" y="2" width="24" height="24" rx="4" fill="#ECFDFF" />
+    //         <rect
+    //             x="7"
+    //             y="3"
+    //             width="22"
+    //             height="22"
+    //             rx="3"
+    //             stroke="#088AB2"
+    //             stroke-width="2"
+    //         />
+    //     </g>
+    //     <defs>
+    //         <filter
+    //             id="filter0_di_3328_77753"
+    //             x="0"
+    //             y="0"
+    //             width="36"
+    //             height="36"
+    //             filterUnits="userSpaceOnUse"
+    //             color-interpolation-filters="sRGB"
+    //         >
+    //             <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feMorphology
+    //                 radius="4"
+    //                 operator="erode"
+    //                 in="SourceAlpha"
+    //                 result="effect1_dropShadow_3328_77753"
+    //             />
+    //             <feOffset dy="4" />
+    //             <feGaussianBlur stdDeviation="5" />
+    //             <feComposite in2="hardAlpha" operator="out" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.0313726 0 0 0 0 0.541176 0 0 0 0 0.698039 0 0 0 0.2 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="BackgroundImageFix"
+    //                 result="effect1_dropShadow_3328_77753"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in="SourceGraphic"
+    //                 in2="effect1_dropShadow_3328_77753"
+    //                 result="shape"
+    //             />
+    //             <feColorMatrix
+    //                 in="SourceAlpha"
+    //                 type="matrix"
+    //                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    //                 result="hardAlpha"
+    //             />
+    //             <feOffset />
+    //             <feGaussianBlur stdDeviation="13" />
+    //             <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+    //             <feColorMatrix
+    //                 type="matrix"
+    //                 values="0 0 0 0 0.647059 0 0 0 0 0.941176 0 0 0 0 0.988235 0 0 0 1 0"
+    //             />
+    //             <feBlend
+    //                 mode="normal"
+    //                 in2="shape"
+    //                 result="effect2_innerShadow_3328_77753"
+    //             />
+    //         </filter>
+    //     </defs>
+    // </SvgIcon>
+    <svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.886241" y="17.0659" width="22.7467" height="22.7467" rx="1.37333" transform="rotate(-45 0.886241 17.0659)" fill="#F6F7F9"/>
+      <rect x="0.886241" y="17.0659" width="22.7467" height="22.7467" rx="1.37333" transform="rotate(-45 0.886241 17.0659)" stroke="#6C707A" stroke-width="1.25333"/>
+    </svg>
+);
+
+export const ForwardConnectionIcon = () => (
+  <svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3303_11348)">
+      <rect x="0.441162" y="16.9688" width="24" height="24" rx="2" transform="rotate(-45 0.441162 16.9688)" fill="#F6F7F9"/>
+      <path d="M25.4117 16.9688L24.0017 15.5588L18.4117 21.1388V8.96875H16.4117V21.1388L10.8317 15.5488L9.41174 16.9688L17.4117 24.9688L25.4117 16.9688Z" fill="#6C707A"/>
+    </g>
+    <rect x="1.3274" y="16.9688" width="22.7467" height="22.7467" rx="1.37333" transform="rotate(-45 1.3274 16.9688)" stroke="#6C707A" stroke-width="1.25333"/>
+    <defs>
+      <clipPath id="clip0_3303_11348">
+        <rect x="0.441162" y="16.9688" width="24" height="24" rx="2" transform="rotate(-45 0.441162 16.9688)" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export const ViaIcon = (props: SvgIconProps) => (
+    <SvgIcon
+        {...props}
+        viewBox="0 0 24 24"
+        sx={{
+            width: props.width ? props.width : 24,
+            height: props.height ? props.height : 24,
+        }}
+    >
+        <g clip-path="url(#clip0_2956_213155)">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M17.149 19.7649C17.4753 20.1473 18.0499 20.1927 18.4323 19.8664L21.6056 16.6193C21.988 16.293 22.0335 15.7184 21.7071 15.336C21.3808 14.9536 20.8062 14.9081 20.4238 15.2345L18.6426 17.2934C18.4845 17.085 18.2382 16.9459 17.9563 16.9337C17.7129 16.9232 17.4877 17.0093 17.3177 17.158L15.3358 15.2379C15.0095 14.8555 14.4349 14.81 14.0525 15.1364C13.6701 15.4627 13.6246 16.0373 13.951 16.4197L17.149 19.7649ZM17.9738 16.0863C18.4765 16.0847 18.8828 15.6759 18.8812 15.1731C18.8785 14.3243 18.8559 13.3981 18.7989 12.455C18.7686 11.9532 18.3372 11.5709 17.8354 11.6012C17.3336 11.6316 16.9514 12.0629 16.9817 12.5648C17.0361 13.4663 17.058 14.3571 17.0606 15.1789C17.0622 15.6817 17.4711 16.0879 17.9738 16.0863ZM17.7574 10.7566C18.2546 10.6824 18.5976 10.2192 18.5234 9.72196C18.3786 8.75184 18.1769 7.80622 17.8949 6.96589C17.735 6.48926 17.219 6.23251 16.7424 6.39242C16.2658 6.55233 16.009 7.06835 16.1689 7.54498C16.4061 8.25191 16.5877 9.08585 16.7227 9.99069C16.7969 10.4879 17.2602 10.8309 17.7574 10.7566ZM12.4025 5.5875C12.7154 5.98096 13.2881 6.04623 13.6816 5.73329C13.9241 5.54041 14.1606 5.45746 14.4262 5.46184C14.6769 5.46598 14.8935 5.54675 15.1044 5.7143C15.498 6.02704 16.0707 5.96148 16.3834 5.56785C16.6961 5.17423 16.6306 4.6016 16.237 4.28886C15.7387 3.89296 15.1406 3.65281 14.4563 3.64151C13.7196 3.62934 13.0803 3.88526 12.5483 4.30843C12.1548 4.62138 12.0896 5.19403 12.4025 5.5875Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M3.08635 6.75923C3.58662 6.70945 3.95181 6.26355 3.90203 5.76328C3.86241 5.3651 3.83397 5.0442 3.81548 4.82361C3.80624 4.71333 3.7995 4.62817 3.79509 4.571L3.79022 4.50662L3.78907 4.49086L3.7888 4.48721C3.7532 3.98573 3.31776 3.60727 2.81628 3.64287C2.3148 3.67847 1.93713 4.11386 1.97273 4.61534L1.97324 4.62243L1.9746 4.6409L1.97989 4.7109C1.98459 4.7719 1.99166 4.8611 2.00126 4.97561C2.02044 5.2046 2.04974 5.53498 2.0904 5.94355C2.14018 6.44382 2.58608 6.80901 3.08635 6.75923Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M7.48023 17.918C7.37154 17.9257 7.21585 17.8954 6.98538 17.6816C6.61678 17.3397 6.04082 17.3614 5.69894 17.73C5.35707 18.0986 5.37873 18.6746 5.74733 19.0164C6.23373 19.4676 6.86205 19.7872 7.60964 19.7339C8.44648 19.6743 9.04651 19.1778 9.45543 18.583C9.74025 18.1687 9.6353 17.602 9.22101 17.3172C8.80674 17.0324 8.24001 17.1373 7.95519 17.5516C7.7435 17.8595 7.58759 17.9103 7.48023 17.918Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M5.36647 16.9617C5.83443 16.778 6.06486 16.2497 5.88114 15.7817C5.60624 15.0815 5.35947 14.2667 5.14021 13.392C5.01796 12.9044 4.52354 12.6082 4.03589 12.7304C3.54824 12.8527 3.25202 13.3471 3.37427 13.8348C3.60552 14.7572 3.87422 15.6517 4.18648 16.4471C4.3702 16.915 4.8985 17.1455 5.36647 16.9617Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M3.874 11.9457C4.36867 11.8559 4.69694 11.3822 4.60722 10.8875C4.44765 10.0078 4.3147 9.13942 4.20555 8.33856C4.13766 7.84042 3.67881 7.49164 3.18068 7.55953C2.68254 7.62742 2.33376 8.08627 2.40165 8.58441C2.51362 9.406 2.6506 10.3013 2.81586 11.2124C2.90559 11.7071 3.37933 12.0354 3.874 11.9457Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M9.47756 16.2656C9.9693 16.3702 10.4527 16.0564 10.5573 15.5646C10.7484 14.6665 10.9012 13.6711 11.0466 12.6718C11.1189 12.1743 10.7743 11.7123 10.2768 11.64C9.7793 11.5676 9.31733 11.9122 9.24496 12.4097C9.09966 13.4086 8.95402 14.3516 8.77657 15.1859C8.67197 15.6776 8.98582 16.161 9.47756 16.2656Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+            <path
+                d="M10.4223 10.5945C10.9182 10.6774 11.3873 10.3425 11.4702 9.84668C11.635 8.86005 11.8209 7.94144 12.0562 7.14817C12.1992 6.66619 11.9244 6.15955 11.4425 6.01656C10.9605 5.87357 10.4538 6.14837 10.3108 6.63034C10.0443 7.52877 9.84402 8.53197 9.67448 9.54663C9.59162 10.0425 9.92643 10.5116 10.4223 10.5945Z"
+                fill={props.fill ? props.fill : "#344054"}
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_2956_213155">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </SvgIcon>
+);
+export const DestinationIcon = (props: SvgIconProps) => (
+    <SvgIcon
+        {...props}
+        viewBox="0 0 24 24"
+        sx={{
+            width: props.width ? props.width : 24,
+            height: props.height ? props.height : 24,
+        }}
+    >
+        <path
+            d="M2 10.6374C2.56711 10.6374 4.35539 10.6374 4.35539 10.6374C4.71223 7.09492 6.77671 3.90601 9.92162 2.14095C10.452 1.84351 11.1222 2.03227 11.4196 2.56181C11.717 3.09157 11.5283 3.76213 10.9987 4.05957C8.22365 5.61673 6.49995 8.55858 6.49995 11.7374C6.49995 14.9159 8.22365 17.8578 10.9983 19.4149C11.5281 19.7126 11.7166 20.3827 11.4189 20.9129C11.2174 21.2724 10.8439 21.4748 10.4589 21.4748C10.2767 21.4748 10.0919 21.4295 9.92162 21.3338C6.77671 19.5689 4.71223 16.3798 4.35539 12.8374C4.35539 12.8374 2.56711 12.8374 2 12.8374C1.43289 12.8374 1 12.4747 1 11.7374C1 11 1.43289 10.6374 2 10.6374Z"
+            fill={props.fill ? props.fill : "#0C2751"}
+        />
+        <path
+            d="M22.5605 12H19.0605"
+            stroke={props.fill ? props.fill : "#0C2751"}
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <rect
+            x="-1"
+            y="1"
+            width="8"
+            height="8"
+            rx="4"
+            transform="matrix(-1 0 0 1 17.5605 7)"
+            stroke={props.fill ? props.fill : "#0C2751"}
+            stroke-width="2"
+            fill="#fff"
+        />
+    </SvgIcon>
+);
+
+export const ArrowRightIcon = () => (
+    <svg width="44" height="36" viewBox="0 0 44 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3335 18H28.6668M28.6668 18L23.6668 13M28.6668 18L23.6668 23" stroke="#4A4C4F" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+);
+
+export const UncheckedItemIcon = (props: SvgIconProps) => (
+  <SvgIcon {...props} viewBox="0 0 16 16" sx={{ width: 16, height: 16 }}>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="white" />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="3.5"
+      stroke="#B4BCCA"
+      fill="none"
+    />
+  </SvgIcon>
+);
+
+export const CheckedItemIcon = (props: SvgIconProps) => (
+  <SvgIcon {...props} viewBox="0 0 16 16" sx={{ width: 16, height: 16 }}>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#8300BF" />
+    <path
+      d="M12 5L6.5 10.5L4 8"
+      stroke="#fff"
+      strokeWidth="1.6666"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="3.5"
+      stroke="#8300BF"
+      fill="none"
+    />
+  </SvgIcon>
+);
+
+export const MinusIcon = () => (
+  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.91663 13H17.0833" stroke="#4A4C4F" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+export const PlusIcon = () => (
+  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 8.91675V17.0834M8.91663 13.0001H17.0833" stroke="#4A4C4F" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+export const OriginIcon = (props: SvgIconProps) => (
+  <SvgIcon
+      {...props}
+      viewBox="0 0 24 24"
+      sx={{
+          width: props.width ? props.width : 24,
+          height: props.height ? props.height : 24,
+      }}
+  >
+      <path
+          d="M12 22C15 22 21 16.246 21 10.8298C21 5.41358 17.1951 1 12 1C6.80486 1 3 5.41358 3 10.8298C3 16.246 9 22 12 22ZM12 2.96596C16.158 2.96596 19.2857 6.49485 19.2857 10.8298C19.2857 15.1647 14.1429 19.766 12 19.766C9.85714 19.766 4.71429 15.1647 4.71429 10.8298C4.71429 6.49485 7.842 2.96596 12 2.96596Z"
+          fill={props.fill ? props.fill : "#344054"}
+      />
+      <circle
+          cx="12"
+          cy="11"
+          r="3"
+          stroke={props.fill ? props.fill : "#344054"}
+          stroke-width="2"
+          fill="#fff"
+      />
+  </SvgIcon>
 );
\ No newline at end of file
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
deleted file mode 100644
index 3d0c863..0000000
--- a/src/icons/index.tsx
+++ /dev/null
@@ -1,405 +0,0 @@
-import { SvgIcon } from "@mui/material";
-import {SvgIconProps} from "@mui/material/SvgIcon";
-
-export const ArrowUp = () => (
-  <SvgIcon viewBox="0 0 20 20">
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M15 12.5L10 7.5L5 12.5" stroke="#606E85" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-    </svg>
-  </SvgIcon>
-);
-
-export const ArrowDown = () => (
-  <SvgIcon viewBox="0 0 20 20">
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5 7.5L10 12.5L15 7.5" stroke="#606E85" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-    </svg>
-  </SvgIcon>
-);
-
-export const ArrowRight = () => (
-  <SvgIcon viewBox="0 0 16 16">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M6 12L10 8L6 4" stroke="#C7CBD1" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  </SvgIcon>
-);
-export const ArrowOutward = () => (
-  <SvgIcon viewBox="0 0 20 20">
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5.83301 14.1666L14.1663 5.83325M14.1663 5.83325H5.83301M14.1663 5.83325V14.1666" stroke="#6C707A" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-    </svg>
-  </SvgIcon>
-);
-export const HelpCircle = () => (
-  <SvgIcon viewBox="0 0 16 16">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_1279_11461)">
-        <path d="M6.05967 5.99992C6.21641 5.55436 6.52578 5.17866 6.93298 4.93934C7.34018 4.70002 7.81894 4.61254 8.28446 4.69239C8.74998 4.77224 9.17222 5.01427 9.47639 5.3756C9.78057 5.73694 9.94705 6.19427 9.94634 6.66659C9.94634 7.99992 7.94634 8.66659 7.94634 8.66659M7.99967 11.3333H8.00634M14.6663 7.99992C14.6663 11.6818 11.6816 14.6666 7.99967 14.6666C4.31778 14.6666 1.33301 11.6818 1.33301 7.99992C1.33301 4.31802 4.31778 1.33325 7.99967 1.33325C11.6816 1.33325 14.6663 4.31802 14.6663 7.99992Z" stroke="#8A92A3" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
-      </g>
-      <defs>
-        <clipPath id="clip0_1279_11461">
-          <rect width="16" height="16" fill="white"/>
-        </clipPath>
-      </defs>
-    </svg>
-  </SvgIcon>
-);
-
-export const OriginInfoIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 36 26"
-        sx={{
-            width: props.width ? props.width : 36,
-            height: props.height ? props.height : 36,
-        }}
-    >
-        <g filter="url(#filter0_di_3328_77745)">
-            <rect x="6" y="2" width="24" height="24" rx="12" fill="#ECFDF3" />
-            <rect
-                x="7"
-                y="3"
-                width="22"
-                height="22"
-                rx="11"
-                stroke="#039855"
-                stroke-width="2"
-            />
-        </g>
-        <defs>
-            <filter
-                id="filter0_di_3328_77745"
-                x="0"
-                y="0"
-                width="36"
-                height="36"
-                filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB"
-            >
-                <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feMorphology
-                    radius="4"
-                    operator="erode"
-                    in="SourceAlpha"
-                    result="effect1_dropShadow_3328_77745"
-                />
-                <feOffset dy="4" />
-                <feGaussianBlur stdDeviation="5" />
-                <feComposite in2="hardAlpha" operator="out" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.0121568 0 0 0 0 0.595686 0 0 0 0 0.333098 0 0 0 0.2 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="BackgroundImageFix"
-                    result="effect1_dropShadow_3328_77745"
-                />
-                <feBlend
-                    mode="normal"
-                    in="SourceGraphic"
-                    in2="effect1_dropShadow_3328_77745"
-                    result="shape"
-                />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feOffset />
-                <feGaussianBlur stdDeviation="13" />
-                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.65098 0 0 0 0 0.956863 0 0 0 0 0.772549 0 0 0 1 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="shape"
-                    result="effect2_innerShadow_3328_77745"
-                />
-            </filter>
-        </defs>
-    </SvgIcon>
-);
-export const ViaInfoIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 36 26"
-        sx={{
-            width: props.width ? props.width : 36,
-            height: props.height ? props.height : 36,
-        }}
-    >
-        <g filter="url(#filter0_di_3328_77749)">
-            <rect x="6" y="2" width="24" height="24" rx="8" fill="#F0FDF9" />
-            <rect
-                x="7"
-                y="3"
-                width="22"
-                height="22"
-                rx="7"
-                stroke="#0E9384"
-                stroke-width="2"
-            />
-        </g>
-        <defs>
-            <filter
-                id="filter0_di_3328_77749"
-                x="0"
-                y="0"
-                width="36"
-                height="36"
-                filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB"
-            >
-                <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feMorphology
-                    radius="4"
-                    operator="erode"
-                    in="SourceAlpha"
-                    result="effect1_dropShadow_3328_77749"
-                />
-                <feOffset dy="4" />
-                <feGaussianBlur stdDeviation="5" />
-                <feComposite in2="hardAlpha" operator="out" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.054902 0 0 0 0 0.576471 0 0 0 0 0.517647 0 0 0 0.2 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="BackgroundImageFix"
-                    result="effect1_dropShadow_3328_77749"
-                />
-                <feBlend
-                    mode="normal"
-                    in="SourceGraphic"
-                    in2="effect1_dropShadow_3328_77749"
-                    result="shape"
-                />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feOffset />
-                <feGaussianBlur stdDeviation="13" />
-                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.6 0 0 0 0 0.964706 0 0 0 0 0.878431 0 0 0 1 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="shape"
-                    result="effect2_innerShadow_3328_77749"
-                />
-            </filter>
-        </defs>
-    </SvgIcon>
-);
-export const DestinationInfoIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 36 26"
-        sx={{
-            width: props.width ? props.width : 36,
-            height: props.height ? props.height : 36,
-        }}
-    >
-        <g filter="url(#filter0_di_3328_77753)">
-            <rect x="6" y="2" width="24" height="24" rx="4" fill="#ECFDFF" />
-            <rect
-                x="7"
-                y="3"
-                width="22"
-                height="22"
-                rx="3"
-                stroke="#088AB2"
-                stroke-width="2"
-            />
-        </g>
-        <defs>
-            <filter
-                id="filter0_di_3328_77753"
-                x="0"
-                y="0"
-                width="36"
-                height="36"
-                filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB"
-            >
-                <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feMorphology
-                    radius="4"
-                    operator="erode"
-                    in="SourceAlpha"
-                    result="effect1_dropShadow_3328_77753"
-                />
-                <feOffset dy="4" />
-                <feGaussianBlur stdDeviation="5" />
-                <feComposite in2="hardAlpha" operator="out" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.0313726 0 0 0 0 0.541176 0 0 0 0 0.698039 0 0 0 0.2 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="BackgroundImageFix"
-                    result="effect1_dropShadow_3328_77753"
-                />
-                <feBlend
-                    mode="normal"
-                    in="SourceGraphic"
-                    in2="effect1_dropShadow_3328_77753"
-                    result="shape"
-                />
-                <feColorMatrix
-                    in="SourceAlpha"
-                    type="matrix"
-                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                    result="hardAlpha"
-                />
-                <feOffset />
-                <feGaussianBlur stdDeviation="13" />
-                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-                <feColorMatrix
-                    type="matrix"
-                    values="0 0 0 0 0.647059 0 0 0 0 0.941176 0 0 0 0 0.988235 0 0 0 1 0"
-                />
-                <feBlend
-                    mode="normal"
-                    in2="shape"
-                    result="effect2_innerShadow_3328_77753"
-                />
-            </filter>
-        </defs>
-    </SvgIcon>
-);
-
-export const ViaIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 24 24"
-        sx={{
-            width: props.width ? props.width : 24,
-            height: props.height ? props.height : 24,
-        }}
-    >
-        <g clip-path="url(#clip0_2956_213155)">
-            <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M17.149 19.7649C17.4753 20.1473 18.0499 20.1927 18.4323 19.8664L21.6056 16.6193C21.988 16.293 22.0335 15.7184 21.7071 15.336C21.3808 14.9536 20.8062 14.9081 20.4238 15.2345L18.6426 17.2934C18.4845 17.085 18.2382 16.9459 17.9563 16.9337C17.7129 16.9232 17.4877 17.0093 17.3177 17.158L15.3358 15.2379C15.0095 14.8555 14.4349 14.81 14.0525 15.1364C13.6701 15.4627 13.6246 16.0373 13.951 16.4197L17.149 19.7649ZM17.9738 16.0863C18.4765 16.0847 18.8828 15.6759 18.8812 15.1731C18.8785 14.3243 18.8559 13.3981 18.7989 12.455C18.7686 11.9532 18.3372 11.5709 17.8354 11.6012C17.3336 11.6316 16.9514 12.0629 16.9817 12.5648C17.0361 13.4663 17.058 14.3571 17.0606 15.1789C17.0622 15.6817 17.4711 16.0879 17.9738 16.0863ZM17.7574 10.7566C18.2546 10.6824 18.5976 10.2192 18.5234 9.72196C18.3786 8.75184 18.1769 7.80622 17.8949 6.96589C17.735 6.48926 17.219 6.23251 16.7424 6.39242C16.2658 6.55233 16.009 7.06835 16.1689 7.54498C16.4061 8.25191 16.5877 9.08585 16.7227 9.99069C16.7969 10.4879 17.2602 10.8309 17.7574 10.7566ZM12.4025 5.5875C12.7154 5.98096 13.2881 6.04623 13.6816 5.73329C13.9241 5.54041 14.1606 5.45746 14.4262 5.46184C14.6769 5.46598 14.8935 5.54675 15.1044 5.7143C15.498 6.02704 16.0707 5.96148 16.3834 5.56785C16.6961 5.17423 16.6306 4.6016 16.237 4.28886C15.7387 3.89296 15.1406 3.65281 14.4563 3.64151C13.7196 3.62934 13.0803 3.88526 12.5483 4.30843C12.1548 4.62138 12.0896 5.19403 12.4025 5.5875Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M3.08635 6.75923C3.58662 6.70945 3.95181 6.26355 3.90203 5.76328C3.86241 5.3651 3.83397 5.0442 3.81548 4.82361C3.80624 4.71333 3.7995 4.62817 3.79509 4.571L3.79022 4.50662L3.78907 4.49086L3.7888 4.48721C3.7532 3.98573 3.31776 3.60727 2.81628 3.64287C2.3148 3.67847 1.93713 4.11386 1.97273 4.61534L1.97324 4.62243L1.9746 4.6409L1.97989 4.7109C1.98459 4.7719 1.99166 4.8611 2.00126 4.97561C2.02044 5.2046 2.04974 5.53498 2.0904 5.94355C2.14018 6.44382 2.58608 6.80901 3.08635 6.75923Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M7.48023 17.918C7.37154 17.9257 7.21585 17.8954 6.98538 17.6816C6.61678 17.3397 6.04082 17.3614 5.69894 17.73C5.35707 18.0986 5.37873 18.6746 5.74733 19.0164C6.23373 19.4676 6.86205 19.7872 7.60964 19.7339C8.44648 19.6743 9.04651 19.1778 9.45543 18.583C9.74025 18.1687 9.6353 17.602 9.22101 17.3172C8.80674 17.0324 8.24001 17.1373 7.95519 17.5516C7.7435 17.8595 7.58759 17.9103 7.48023 17.918Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M5.36647 16.9617C5.83443 16.778 6.06486 16.2497 5.88114 15.7817C5.60624 15.0815 5.35947 14.2667 5.14021 13.392C5.01796 12.9044 4.52354 12.6082 4.03589 12.7304C3.54824 12.8527 3.25202 13.3471 3.37427 13.8348C3.60552 14.7572 3.87422 15.6517 4.18648 16.4471C4.3702 16.915 4.8985 17.1455 5.36647 16.9617Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M3.874 11.9457C4.36867 11.8559 4.69694 11.3822 4.60722 10.8875C4.44765 10.0078 4.3147 9.13942 4.20555 8.33856C4.13766 7.84042 3.67881 7.49164 3.18068 7.55953C2.68254 7.62742 2.33376 8.08627 2.40165 8.58441C2.51362 9.406 2.6506 10.3013 2.81586 11.2124C2.90559 11.7071 3.37933 12.0354 3.874 11.9457Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M9.47756 16.2656C9.9693 16.3702 10.4527 16.0564 10.5573 15.5646C10.7484 14.6665 10.9012 13.6711 11.0466 12.6718C11.1189 12.1743 10.7743 11.7123 10.2768 11.64C9.7793 11.5676 9.31733 11.9122 9.24496 12.4097C9.09966 13.4086 8.95402 14.3516 8.77657 15.1859C8.67197 15.6776 8.98582 16.161 9.47756 16.2656Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-            <path
-                d="M10.4223 10.5945C10.9182 10.6774 11.3873 10.3425 11.4702 9.84668C11.635 8.86005 11.8209 7.94144 12.0562 7.14817C12.1992 6.66619 11.9244 6.15955 11.4425 6.01656C10.9605 5.87357 10.4538 6.14837 10.3108 6.63034C10.0443 7.52877 9.84402 8.53197 9.67448 9.54663C9.59162 10.0425 9.92643 10.5116 10.4223 10.5945Z"
-                fill={props.fill ? props.fill : "#344054"}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_2956_213155">
-                <rect width="24" height="24" fill="white" />
-            </clipPath>
-        </defs>
-    </SvgIcon>
-);
-export const DestinationIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 24 24"
-        sx={{
-            width: props.width ? props.width : 24,
-            height: props.height ? props.height : 24,
-        }}
-    >
-        <path
-            d="M2 10.6374C2.56711 10.6374 4.35539 10.6374 4.35539 10.6374C4.71223 7.09492 6.77671 3.90601 9.92162 2.14095C10.452 1.84351 11.1222 2.03227 11.4196 2.56181C11.717 3.09157 11.5283 3.76213 10.9987 4.05957C8.22365 5.61673 6.49995 8.55858 6.49995 11.7374C6.49995 14.9159 8.22365 17.8578 10.9983 19.4149C11.5281 19.7126 11.7166 20.3827 11.4189 20.9129C11.2174 21.2724 10.8439 21.4748 10.4589 21.4748C10.2767 21.4748 10.0919 21.4295 9.92162 21.3338C6.77671 19.5689 4.71223 16.3798 4.35539 12.8374C4.35539 12.8374 2.56711 12.8374 2 12.8374C1.43289 12.8374 1 12.4747 1 11.7374C1 11 1.43289 10.6374 2 10.6374Z"
-            fill={props.fill ? props.fill : "#0C2751"}
-        />
-        <path
-            d="M22.5605 12H19.0605"
-            stroke={props.fill ? props.fill : "#0C2751"}
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <rect
-            x="-1"
-            y="1"
-            width="8"
-            height="8"
-            rx="4"
-            transform="matrix(-1 0 0 1 17.5605 7)"
-            stroke={props.fill ? props.fill : "#0C2751"}
-            stroke-width="2"
-            fill="#fff"
-        />
-    </SvgIcon>
-);
-export const OriginIcon = (props: SvgIconProps) => (
-    <SvgIcon
-        {...props}
-        viewBox="0 0 24 24"
-        sx={{
-            width: props.width ? props.width : 24,
-            height: props.height ? props.height : 24,
-        }}
-    >
-        <path
-            d="M12 22C15 22 21 16.246 21 10.8298C21 5.41358 17.1951 1 12 1C6.80486 1 3 5.41358 3 10.8298C3 16.246 9 22 12 22ZM12 2.96596C16.158 2.96596 19.2857 6.49485 19.2857 10.8298C19.2857 15.1647 14.1429 19.766 12 19.766C9.85714 19.766 4.71429 15.1647 4.71429 10.8298C4.71429 6.49485 7.842 2.96596 12 2.96596Z"
-            fill={props.fill ? props.fill : "#344054"}
-        />
-        <circle
-            cx="12"
-            cy="11"
-            r="3"
-            stroke={props.fill ? props.fill : "#344054"}
-            stroke-width="2"
-            fill="#fff"
-        />
-    </SvgIcon>
-);
\ No newline at end of file