diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
index 36882505..1b622616 100644
--- a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
+++ b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -133,6 +133,12 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
               color: 'red',
               borderColor: '#83a6ac',
             },
+          '.bccb-widget-from-network-modal-search, .bccb-widget-token-modal-header-search': {
+            '& svg': {
+              width: '30px',
+              height: '30px',
+            },
+          },
           '.bccb-widget-token-address-link .token-name': {
             color: 'black',
             bg: 'white',
diff --git a/packages/canonical-bridge-widget/docs/Custom Themes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md
index 4199a76a..e0e65840 100644
--- a/packages/canonical-bridge-widget/docs/Custom Themes.md	
+++ b/packages/canonical-bridge-widget/docs/Custom Themes.md	
@@ -71,8 +71,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-network-title
 - bccb-widget-network-row
 - bccb-widget-network-from
+- bccb-widget-network-from-title
 - bccb-widget-network-button
 - bccb-widget-network-to
+- bccb-widget-network-to-title
 - bccb-widget-network-name
 
 3. Bridge Route Section
@@ -199,6 +201,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 
 - bccb-widget-modal-close-button
 - bccb-widget-modal-main-button
+- bccb-widget-modal-secondary-button
 - bccb-widget-modal-second-button
 - bccb-widget-modal-body
 - bccb-widget-modal-body-icon
diff --git a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
index e083b1bb..7fe16fd3 100644
--- a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
@@ -152,6 +152,7 @@ export function StateModal(props: StateModalProps) {
               closeButton
             ) : (
               <Button
+                className="bccb-widget-modal-second-button"
                 size="lg"
                 w={'100%'}
                 fontSize={'16px'}
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 6aad3a0c..be731198 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-header"
+      className="bccb-widget-token-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
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 a96a7adc..ebe40451 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
@@ -23,6 +23,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
     incompatibleTooltip,
 
     _hover,
+    className,
     ...restProps
   } = props;
 
@@ -31,9 +32,9 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box className={`bccb-widget-select-list-wrapper`} ref={ref} p="0 20px 8px">
+    <Box className={`${className}-wrapper`} ref={ref} p="0 20px 8px">
       <Flex
-        className={`bccb-widget-select-list` + isDisabled ? '-disabled' : ''}
+        className={`${className}` + isDisabled ? '-disabled' : ''}
         borderRadius={'8px'}
         px={'12px'}
         py="8px"
@@ -66,7 +67,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
-            className={`bccb-widget-select-list-item-tag`}
+            className={`${className}-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 d79169a9..7b86d6e9 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
@@ -23,7 +23,7 @@ export function FromSection() {
       h={'48px'}
     >
       <Flex
-        className="bccb-widget-network-title"
+        className="bccb-widget-network-from-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
index c3f60f5a..fef0c67e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
@@ -22,7 +22,7 @@ export function ToSection() {
       h={'48px'}
     >
       <Flex
-        className="bccb-widget-network-title"
+        className="bccb-widget-network-to-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
index 21b4e4a4..31bf4703 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
@@ -19,13 +19,14 @@ export function ConnectButton(props: ConnectButtonProps) {
 
   return (
     <Flex
-      className="bccb-widget-header-wallet-connect-button"
+      className="bccb-widget-header-wallet-connect"
       alignItems="center"
       gap={'16px'}
       {...restProps}
     >
       {!isConnected && (
         <Button
+          className="bccb-widget-header-wallet-connect-button"
           variant="outline"
           h={'40px'}
           px={'16px'}