diff --git a/apps/canonical-bridge-server/src/main.ts b/apps/canonical-bridge-server/src/main.ts
index 7968ee17..793c8338 100644
--- a/apps/canonical-bridge-server/src/main.ts
+++ b/apps/canonical-bridge-server/src/main.ts
@@ -38,8 +38,8 @@ async function bootstrap() {
     logger.log('Listening on port', SERVER_PORT);
   });
 
-  server.keepAliveTimeout = 61 * 1000;
-  server.headersTimeout = 62 * 1000;
+  server.keepAliveTimeout = 121 * 1000;
+  server.headersTimeout = 122 * 1000;
 }
 
 bootstrap();
diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
index 5e900bfb..36882505 100644
--- a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
+++ b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -24,6 +24,326 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
       global: ({ colorMode }: { colorMode: ColorMode }) => ({
         body: {
           bg: theme.colors[colorMode].background[3],
+          '.bccb-widget-transfer-widget-wrapper': {
+            bg: '#123456',
+            borderRadius: '10px',
+            padding: '100px 20px',
+          },
+          '.bccb-widget-route-wrapper': {
+            background: '#8C8F9B',
+            padding: '20px',
+            borderWidth: '5px',
+            borderRadius: '20px',
+            color: '#fff',
+          },
+          '.bccb-widget-transfer-widget-title': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: 'red',
+          },
+          '.bccb-widget-route-container-inner': {
+            borderColor: 'orange',
+          },
+          '.bccb-widget-route-estimated-time, .bccb-widget-route-fee-info, .bccb-widget-allowed-send-amount':
+            {
+              color: 'orange',
+              fontWeight: 700,
+              fontSize: '20px',
+            },
+          '.bccb-widget-route-info-tooltip-fee, .bccb-widget-route-token-tooltip-content, .bccb-widget-route-token-tooltip-content .tooltip-arrow, .bccb-widget-route-token-tooltip-body':
+            {
+              background: 'pink',
+              fontWeight: 700,
+              fontSize: '20px',
+              borderRadius: '20px',
+            },
+          '.bccb-widget-route-token-tooltip-body > div, .bccb-widget-route-info-tooltip-fee > div, .bccb-widget-route-token-tooltip > div':
+            {
+              fontWeight: 700,
+              fontSize: '20px',
+            },
+          '.bccb-widget-info-tooltip': {
+            background: 'orange',
+            borderRadius: '20px',
+            shadowBox: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+          },
+          '.bccb-widget-info-tooltip .chakra-tooltip__arrow': { background: 'orange !important' },
+          '.bccb-widget-route-name-tag-bestTime, .bccb-widget-route-name-tag-bestReturn': {
+            color: 'grey',
+            fontSize: '20px',
+          },
+          '.bccb-widget-route-token-amount': {
+            color: '#123456',
+          },
+          '.bccb-widget-received-info-container p': {
+            color: 'yellow',
+            fontSize: '20px',
+          },
+          '.bccb-widget-token-list-item': {
+            bg: 'brown',
+            border: '3px solid red',
+            padding: '30px',
+            borderRadius: '20px',
+            '&:hover': {
+              bg: 'green',
+            },
+            '> img, .default-icon': {
+              width: '50px',
+              height: '50px',
+              transform: 'rotate(125deg)',
+            },
+          },
+          '.bccb-widget-token-list-item-disabled': {
+            bg: '#fff1af',
+            opacify: 0.1,
+            border: '3px solid purple',
+            padding: '30px',
+            borderRadius: '20px',
+            '&:hover': {
+              bg: 'green',
+            },
+          },
+          '.bccb-widget-token-list-address > p': {
+            color: 'purple',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-token-list-token-balance': {
+            fontSize: '20px',
+            color: '#83a6ac',
+          },
+          '.bccb-widget-token-list-symbol': {
+            fontSize: '20px',
+            color: '#83a6ac',
+          },
+          '.bccb-widget-select-list-item-tag': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: '#83a6ac',
+          },
+          '.bccb-widget-from-network-modal-content': {
+            background: 'pink',
+            borderRadius: '20px',
+            padding: '20px',
+            width: '700px',
+          },
+          '.bccb-widget-token-modal-search > input, .bccb-widget-token-modal-header-search > input, .bccb-widget-from-network-modal-search > input':
+            {
+              fontSize: '35px',
+              color: 'red',
+              borderColor: '#83a6ac',
+            },
+          '.bccb-widget-token-address-link .token-name': {
+            color: 'black',
+            bg: 'white',
+          },
+          '.bccb-widget-select-list-wrapper': {
+            paddingBottom: '30px',
+          },
+          '.bccb-widget-transfer-max .max-text': {
+            fontSize: '20px',
+            color: 'red',
+          },
+          '.bccb-widget-modal-no-result-found, .bccb-widget-modal-no-result-found-text': {
+            fontSize: '25px',
+            fontWeight: 700,
+            color: 'green',
+            '& svg': {
+              width: '70px',
+              height: '70px',
+            },
+          },
+          '.bccb-widget-token-modal-search svg': {
+            height: '50px',
+            width: '50px',
+          },
+          '.bccb-widget-token-modal-header': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: '#83a6ac',
+          },
+          '.bccb-widget-transfer-input-container': {
+            '& > div': {
+              marginBottom: '20px',
+            },
+            '& .input-header-label': {
+              color: '#83a6ac',
+              fontSize: '20px',
+              fontWeight: 700,
+            },
+            '.bccb-widget-transfer-input-wrapper': {
+              '&:hover': {
+                borderColor: 'yellow',
+                borderWidth: '5px',
+                borderRadius: '4px',
+              },
+            },
+            '& input': {
+              fontSize: '15px',
+              fontWeight: 400,
+              color: 'pink',
+              borderColor: '#83a6ac',
+
+              '&:hover': {
+                borderColor: 'red',
+              },
+            },
+          },
+          '.bccb-widget-token-select-button': {
+            borderRadius: '2px',
+            height: '50px',
+            bg: 'pink',
+            color: '#83a6ac',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-route-error': {
+            '& .error-text': {
+              color: 'green',
+              fontSize: '20px',
+              fontWeight: 700,
+            },
+            '& svg': {
+              width: '20px',
+              height: '20px',
+            },
+          },
+          '.bccb-widget-route-name-text': {
+            color: 'white',
+            fontSize: '24px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-network-button': {
+            bg: '#83a6ac',
+            color: 'white',
+            borderRadius: '20px',
+            padding: '10px 20px',
+            borderWidth: '5px',
+            '& .bccb-widget-network-name > p': {
+              fontSize: '18px',
+              fontWeight: 700,
+            },
+          },
+          '.bccb-widget-transfer-input-error': {
+            color: 'pink',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-from-network-list-item, .bccb-widget-to-network-list-item ': {
+            p: '30px',
+            bg: 'red',
+            borderRadius: '20px',
+            fontWeight: 700,
+            color: 'black',
+            fontSize: '20px',
+            '&:hover': {
+              bg: 'orange',
+            },
+          },
+          '.bccb-widget-from-network-list-item-active, .bccb-widget-to-network-list-item-active': {
+            borderColor: 'green',
+            borderWidth: '5px',
+            bg: '#83a6ac',
+          },
+          '.bccb-widget-transfer-button button': {
+            fontSize: '20px',
+            fontWeight: 700,
+            borderRadius: '30px',
+            borderWidth: '1px',
+            borderColor: 'red',
+          },
+          '.bccb-widget-network-title > p': {
+            color: 'pink',
+          },
+          '.bccb-widget-wallet-connect-button, .bccb-widget-switch-network-button, .bccb-widget-transfer-button':
+            {
+              fontWeight: 700,
+              fontSize: '27px',
+              borderRadius: '2px',
+              padding: '10px 20px',
+            },
+          '.bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-submitted-modal, .bccb-widget-transaction-failed-modal, .bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-approve-modal':
+            {
+              maxWidth: '700px',
+              borderRadius: '2px',
+              '& .bccb-widget-modal-body ': {
+                bg: 'pink',
+                '& svg': {
+                  height: '20px',
+                  width: '20px',
+                },
+              },
+              '.bccb-widget-modal-main-button': {
+                padding: '30px',
+                fontWeight: 700,
+                fontSize: '25px',
+              },
+            },
+          '.bccb-widget-route-header': {
+            fontWeight: 700,
+            fontSize: '20px',
+          },
+          '.bccb-widget-refreshing-button svg': {
+            width: '20px',
+            height: '20px',
+          },
+          '.bccb-widget-header-menu-list': {
+            padding: '20px',
+            '& .bccb-widget-header-menu-item': {
+              fontSize: '20px',
+              fontWeight: 700,
+              color: 'pink',
+              '&:hover': {
+                bg: 'orange',
+              },
+            },
+            '& .bccb-widget-header-menu-item-selected': {
+              bg: 'orange',
+            },
+          },
+          '.bccb-widget-header-menu-button, .bccb-widget-header-network-status-network, .bccb-widget-header-dropdown-button, .bccb-widget-header-dropdown-button-not-connect, .bccb-widget-header-profile-button':
+            {
+              color: 'pink',
+              borderRadius: '2px',
+              outlineColor: 'red',
+              '& button, & .profile-address': {
+                fontWeight: 700,
+                fontSize: '30px',
+              },
+              '& p': {
+                color: 'red',
+              },
+            },
+          '.bccb-widget-header-network-status': {
+            '& .bccb-widget-switch-network-button': {
+              fontSize: '10px',
+              borderRadius: '5px',
+              bg: 'white',
+            },
+          },
+          '.bccb-widget-header-network-status-title': {
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-header-dropdown-button': {
+            fontWeight: 700,
+            fontSize: '30px',
+            color: 'green',
+            ' & .chain-name p': {
+              fontSize: '20px',
+            },
+          },
+          '.bccb-widget-header-profile-list': {
+            color: 'red',
+          },
+          '.bccb-widget-header-profile-balance': {
+            color: '#d7877d',
+          },
+          '.bccb-widget-header-profile-disconnect-link > div': {
+            bg: 'orange',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
         },
       }),
     },
diff --git a/apps/canonical-bridge-ui/pages/mainnet/index.tsx b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
index f9f48ec2..e7088d95 100644
--- a/apps/canonical-bridge-ui/pages/mainnet/index.tsx
+++ b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
@@ -24,6 +24,7 @@ export const bridgeConfig: ICanonicalBridgeConfig = {
     theme: {
       dark: dark,
       light: light,
+      fontFamily: 'Georgia',
     },
   },
   wallet: {
diff --git a/packages/canonical-bridge-widget/docs/Custom Themes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md
index aeed5b5b..4199a76a 100644
--- a/packages/canonical-bridge-widget/docs/Custom Themes.md	
+++ b/packages/canonical-bridge-widget/docs/Custom Themes.md	
@@ -58,6 +58,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 1. Widget Main
 
 - bccb-widget-transfer-widget
+- bccb-widget-transfer-widget-wrapper
 - bccb-widget-transfer-widget-title
 - bccb-widget-exchange-chain-icon
 - bccb-widget-copy-address
@@ -80,6 +81,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-route-bottom
 - bccb-widget-route-wrapper
 - bccb-widget-route-container
+- bccb-widget-route-container-inner
 - bccb-widget-route-name
 - bccb-widget-route-name-text
 - bccb-widget-route-name-tag-bestTime
@@ -110,11 +112,15 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-header-wallet-connect-button
 - bccb-widget-header-menu-button
 - bccb-widget-header-menu-item
+- bccb-widget-header-profile-balance
 - bccb-widget-header-profile-list
 - bccb-widget-header-profile-disconnect-link
 - bccb-widget-header-profile-button
 - bccb-widget-header-switching-tips-modal
 - bccb-widget-header-preventing-modal
+- bccb-widget-header-network-status
+- bccb-widget-header-network-status-title
+- bccb-widget-header-network-status-network
 
 5. Token Selection Modal
 
@@ -122,8 +128,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-token-modal-content
 - bccb-widget-token-virtual-list
 - bccb-widget-token-list-address
+- bccb-widget-token-list-symbol
 - bccb-widget-token-address-link
 - bccb-widget-token-list-item
+- bccb-widget-token-list-item-disabled
 - bccb-widget-token-list-token-balance
 
 6. From Network Selection
@@ -153,6 +161,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 9. Send Amount Input
 
 - bccb-widget-transfer-input-container
+- bccb-widget-transfer-input-wrapper
 - bccb-widget-transfer-input
 - bccb-widget-transfer-max
 - bccb-widget-transfer-input-error
diff --git a/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx b/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
index e1059b55..88398828 100644
--- a/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
@@ -19,6 +19,7 @@ export function IconImage(props: IconImageProps) {
     <>
       {isError ? (
         <Circle
+          className="default-icon"
           size={boxSize}
           {...restProps}
           bg={fallbackBgColor ?? theme.colors[colorMode].support.primary[1]}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
index 8d132958..6aad3a0c 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -57,7 +57,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
   return (
     <BaseModal
-      className="bccb-widget-token-modal"
+      className="bccb-widget-token-modal-header"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
@@ -66,6 +66,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
       isNoResult={isNoResult}
     >
       <Flex
+        className="bccb-widget-token-modal-header"
         fontSize={'14px'}
         fontWeight={400}
         lineHeight="16px"
@@ -87,7 +88,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
             return (
               <ListItem
-                className="bccb-widget-token-list-item"
+                className={`bccb-widget-token-list-item` + (isDisabled ? '-disabled' : '')}
                 key={item.address}
                 iconUrl={item.icon}
                 isActive={isActive}
@@ -114,7 +115,9 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
               >
                 <Flex alignItems="center" justifyContent="space-between" w="100%" gap={'12px'}>
                   <Flex flex={1} minW={0} flexDir="column" gap={'4px'}>
-                    <Text isTruncated>{item.displaySymbol}</Text>
+                    <Text className="bccb-widget-token-list-symbol" isTruncated>
+                      {item.displaySymbol}
+                    </Text>
 
                     {isMobile && !isNative && (
                       <TokenAddress
@@ -135,6 +138,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                         >
                           {(!isActive || isNative) && (
                             <Text
+                              className="token-name"
                               isTruncated
                               flexShrink={0}
                               fontSize="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
index 3fc1f776..dc22a491 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -53,7 +53,9 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
-            className="bccb-widget-to-network-list-item"
+            className={
+              'bccb-widget-to-network-list-item' + (toChain?.id === item.id ? '-active' : '')
+            }
             key={item.id}
             iconUrl={item.icon}
             isActive={toChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
index 934180bc..9758fc16 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -54,7 +54,9 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
-            className="bccb-widget-from-network-list-item"
+            className={
+              'bccb-widget-from-network-list-item' + (fromChain?.id === item.id ? '-active' : '')
+            }
             key={item.id}
             iconUrl={item.icon}
             isActive={fromChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index 4311eb1f..342f5b5c 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -60,6 +60,7 @@ export function BaseModal(props: BaseModalProps) {
           <Flex boxSize={'24px'}></Flex>
           {title}
           <CloseIcon
+            className={`${className}-close-button`}
             boxSize={'24px'}
             onClick={onClose}
             cursor="pointer"
@@ -72,7 +73,7 @@ export function BaseModal(props: BaseModalProps) {
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
           <Flex px={'20px'} mb={'24px'}>
             <SearchInput
-              className="bccb-widget-modal-search"
+              className={`${className}-search`}
               onChange={onSearch}
               placeholder={placeholder}
             />
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index a9a2bf9e..a96a7adc 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -31,8 +31,9 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box ref={ref} p="0 20px 8px">
+    <Box className={`bccb-widget-select-list-wrapper`} ref={ref} p="0 20px 8px">
       <Flex
+        className={`bccb-widget-select-list` + isDisabled ? '-disabled' : ''}
         borderRadius={'8px'}
         px={'12px'}
         py="8px"
@@ -65,7 +66,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
-            className="bccb-widget-select-list-item-tag"
+            className={`bccb-widget-select-list-item-tag`}
             alignItems="center"
             flexShrink={0}
             fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
index 64bdd6a1..d79169a9 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
@@ -14,7 +14,14 @@ export function FromSection() {
   const theme = useTheme();
 
   return (
-    <Flex className="bccb-widget-network-from" flexDir="column" gap={'8px'} w={'100%'} flex={1} h={'48px'}>
+    <Flex
+      className="bccb-widget-network-from"
+      flexDir="column"
+      gap={'8px'}
+      w={'100%'}
+      flex={1}
+      h={'48px'}
+    >
       <Flex
         className="bccb-widget-network-title"
         alignItems="center"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index b7b00b87..9bc31e2e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
@@ -10,9 +10,19 @@ export const NetWorkSection = () => {
   const theme = useTheme();
 
   return (
-    <Flex className="bccb-widget-network" flexDir={'column'} gap={'8px'} mb={{ base: 0, md: theme.sizes['2'] }}>
+    <Flex
+      className="bccb-widget-network"
+      flexDir={'column'}
+      gap={'8px'}
+      mb={{ base: 0, md: theme.sizes['2'] }}
+    >
       <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
-        <Flex className="bccb-widget-network-title" alignItems="center" justifyContent={'space-between'} flex={1}>
+        <Flex
+          className="bccb-widget-network-title"
+          alignItems="center"
+          justifyContent={'space-between'}
+          flex={1}
+        >
           <Typography variant="label" size={'md'} color={theme.colors[colorMode].text.placeholder}>
             {formatMessage({ id: 'from.section.title' })}
           </Typography>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
index 255938f8..8b2efa50 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
@@ -46,6 +46,7 @@ export const MaxLink: React.FC = () => {
     <Flex className="bccb-widget-transfer-max" alignItems={'center'}>
       {showBalance ? (
         <Box
+          className="max-text"
           onClick={setMaxAmount}
           color={theme.colors[colorMode].text.tertiary}
           textDecoration={'underline'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
index 79f82753..53e54eed 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
@@ -102,12 +102,18 @@ export const SendInput: React.FC = () => {
   return (
     <Flex className="bccb-widget-transfer-input-container" flexDir={'column'} position={'relative'}>
       <Flex flexDir={'row'} justifyContent={'space-between'}>
-        <Typography color={theme.colors[colorMode].text.placeholder} variant={'label'} size={'md'}>
+        <Typography
+          className="input-header-label"
+          color={theme.colors[colorMode].text.placeholder}
+          variant={'label'}
+          size={'md'}
+        >
           {formatMessage({ id: 'you.send.title' })}
         </Typography>
         <MaxLink />
       </Flex>
       <Flex
+        className="bccb-widget-transfer-input-wrapper"
         flex={1}
         mt={'8px'}
         flexDir={'row'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
index a1611361..e0ce85ce 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
@@ -35,7 +35,11 @@ export const TransferButtonGroup = () => {
 
   return (
     <>
-      <Flex className="bccb-widget-transfer-button-container" gap={'4px'} mt={{ base: '8px', md: '16px' }}>
+      <Flex
+        className="bccb-widget-transfer-button-container"
+        gap={'4px'}
+        mt={{ base: '8px', md: '16px' }}
+      >
         <WalletButtonWrapper>
           <TransferButton
             onOpenSubmittedModal={onOpenSubmittedModal}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
index 28c38597..5fe1823b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
@@ -25,8 +25,15 @@ export const OtherRouteError = ({ bridgeType }: OtherRouteErrorProps) => {
         },
       }}
     >
-      <InfoCircleIcon display={'inline'} w={'16px'} h={'16px'} />
-      <Box ml={'4px'} display={'inline'} lineHeight={'16px'} fontSize={'14px'} fontWeight={400}>
+      <InfoCircleIcon className="error-icon" display={'inline'} w={'16px'} h={'16px'} />
+      <Box
+        className="error-text"
+        ml={'4px'}
+        display={'inline'}
+        lineHeight={'16px'}
+        fontSize={'14px'}
+        fontWeight={400}
+      >
         {routeError[bridgeType]}
       </Box>
     </Box>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
index fc177be7..e1c7642b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
@@ -38,14 +38,20 @@ export const TokenInfoTooltip = ({
           <PopoverTrigger>{children}</PopoverTrigger>
           <Portal>
             <PopoverContent
+              className="bccb-widget-route-token-tooltip-content"
               borderRadius={'4px'}
               maxW={'280px'}
               marginLeft={isReceiveArea ? '-36px' : ''}
               marginBottom={isReceiveArea ? '-4px' : ''}
             >
-              <PopoverArrow />
-              <PopoverBody px={'8px'} py={'7px'} onClick={(e) => e.stopPropagation()}>
-                <Box>
+              <PopoverArrow className="tooltip-arrow" />
+              <PopoverBody
+                className="bccb-widget-route-token-tooltip-body"
+                px={'8px'}
+                py={'7px'}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <>
                   <Box color={theme.colors.light.text.primary} fontSize={'12px'} fontWeight={400}>
                     {nativeToken ? 'Native token' : 'Token address:'}
                   </Box>
@@ -72,7 +78,7 @@ export const TokenInfoTooltip = ({
                       )}
                     </Box>
                   )}
-                </Box>
+                </>
               </PopoverBody>
             </PopoverContent>
           </Portal>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index b22ad7f2..3a881218 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -117,7 +117,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       w={'100%'}
       overflow={['auto', 'auto', 'auto', 'hidden']}
     >
-      <Flex flexDir={'column'} gap={'12px'}>
+      <Flex className="bccb-widget-route-container-inner" flexDir={'column'} gap={'12px'}>
         <Flex
           className="bccb-widget-route-header"
           display={{ base: 'none', lg: 'flex' }}
@@ -176,7 +176,13 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       transition={'width 0.15s'}
     >
       {cBridgeSupport && <CBridgeSendMaxMin />}
-      <Flex className="bccb-widget-route" flexDir={'column'} gap={'12px'} ml={{ base: 0, lg: '24px' }} w={'100%'}>
+      <Flex
+        className="bccb-widget-route"
+        flexDir={'column'}
+        gap={'12px'}
+        ml={{ base: 0, lg: '24px' }}
+        w={'100%'}
+      >
         {!routeContentBottom ? (
           content
         ) : (
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index 9fa24d14..4457a707 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -43,7 +43,7 @@ export function TransferWidget() {
         justifyContent={'center'}
       >
         <Flex
-          className="bccb-widget-transfer-widget-title"
+          className="bccb-widget-transfer-widget-wrapper"
           flexDir="column"
           background={['none', 'none', theme.colors[colorMode].layer[2].default]}
           color={theme.colors[colorMode].text.primary}
@@ -58,6 +58,7 @@ export function TransferWidget() {
         >
           {appearance.bridgeTitle && (
             <Typography
+              className="bccb-widget-transfer-widget-title"
               variant={'heading'}
               size={{ base: 'xs', md: 'sm' }}
               as="h1"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
index 2600d205..c0be2c6d 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
@@ -28,7 +28,6 @@ export function DropdownButton(props: DropdownButtonProps) {
 
   return (
     <MenuButton
-      className="bccb-widget-header-menu-button"
       h={'40px'}
       minW={'40px'}
       pl="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
index 40c12131..40d5c122 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
@@ -3,14 +3,14 @@ import { MenuItemProps, MenuItem, useTheme, useColorMode } from '@bnb-chain/spac
 interface DropdownItemProps extends MenuItemProps {}
 
 export function DropdownItem(props: DropdownItemProps) {
-  const { ...restProps } = props;
+  const { className, ...restProps } = props;
 
   const theme = useTheme();
   const { colorMode } = useColorMode();
 
   return (
     <MenuItem
-      className="bccb-widget-header-menu-item"
+      className={className}
       px="16px"
       h="40px"
       alignItems="center"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
index 45b4c9bf..d85bf3ec 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
@@ -44,6 +44,7 @@ export function NetworkStatus() {
     <DropdownList className="bccb-widget-header-network-status" maxW={'240px'}>
       <Flex flexDir={'column'} alignItems={'center'} padding={'16px'} gap={'8px'}>
         <Typography
+          className="bccb-widget-header-network-status-title"
           color={theme.colors[colorMode].text.secondary}
           variant={'label'}
           size={'md'}
@@ -57,6 +58,7 @@ export function NetworkStatus() {
         <TransferToIcon w={'24px'} h={'24px'} transform={'rotate(90deg)'} />
 
         <Flex
+          className="bccb-widget-header-network-status-network"
           maxW={'100%'}
           borderRadius={'24px'}
           padding={'4px'}
@@ -101,7 +103,7 @@ export function NetworkStatus() {
           return (
             <>
               <DropdownButton
-                className="bccb-widget-header-dropdown-button"
+                className="bccb-widget-header-dropdown-button-not-connect"
                 bgColor={theme.colors[colorMode].layer[3].default}
                 isActive={isOpen}
                 isWarning={isOpen}
@@ -147,6 +149,7 @@ export function NetworkStatus() {
         return (
           <>
             <DropdownButton
+              className="bccb-widget-header-dropdown-button"
               bgColor={theme.colors[colorMode].layer[3].default}
               isActive={isOpen}
               isWarning={isOpen && isWrongNetwork}
@@ -159,7 +162,13 @@ export function NetworkStatus() {
               ) : (
                 <IconImage src={iconUrl} boxSize="24px" />
               )}
-              <Flex flexDir="column" gap="0" alignItems="flex-start" textAlign="left">
+              <Flex
+                className="chain-name"
+                flexDir="column"
+                gap="0"
+                alignItems="flex-start"
+                textAlign="left"
+              >
                 <Text fontSize="14px" noOfLines={1}>
                   {chain.name}
                 </Text>
@@ -175,6 +184,7 @@ export function NetworkStatus() {
 
                   return (
                     <DropdownItem
+                      className={`bccb-widget-header-menu-item` + (isSelected ? '-selected' : '')}
                       key={item.id}
                       color={
                         isSelected
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
index eb2b06a3..3316bb03 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
@@ -56,7 +56,13 @@ export const ProfileMenu = () => {
               </Center>
             )}
             <Box display={{ base: 'none', md: 'block' }}>
-              <Typography as={'span'} variant={'label'} size={'md'} fontWeight={500}>
+              <Typography
+                className="profile-address"
+                as={'span'}
+                variant={'label'}
+                size={'md'}
+                fontWeight={500}
+              >
                 {formatAppAddress({ address })}
               </Typography>
             </Box>
@@ -81,7 +87,10 @@ export const ProfileMenu = () => {
                     <CopyAddress boxSize={'20px'} content={address} />
                   </Flex>
                   {!!balance?.formatted && (
-                    <Flex color={theme.colors[colorMode].text.secondary}>
+                    <Flex
+                      className="bccb-widget-header-profile-balance"
+                      color={theme.colors[colorMode].text.secondary}
+                    >
                       {formatNumber(Number(balance?.formatted), 4)} {balance?.symbol}
                     </Flex>
                   )}