diff --git a/packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css b/packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css
index b570970..5785b50 100644
--- a/packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css
+++ b/packages/widget-react/src/pages/bridge/BridgePreviewRoute.module.css
@@ -3,6 +3,21 @@
   gap: 12px;
 }
 
+.toggle {
+  display: flex;
+  gap: 4px;
+  background-color: var(--gray-6);
+  width: fit-content;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 600;
+
+  &:hover {
+    background-color: var(--gray-5);
+  }
+}
+
 .route {
   background: var(--gray-8);
   border: 1px solid var(--gray-5);
diff --git a/packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx b/packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx
index ad6d1da..a2b4784 100644
--- a/packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx
+++ b/packages/widget-react/src/pages/bridge/BridgePreviewRoute.tsx
@@ -2,10 +2,9 @@ import { zipObj } from "ramda"
 import { useToggle } from "react-use"
 import { Collapsible } from "radix-ui"
 import { useAccount } from "wagmi"
-import { IconWallet } from "@initia/icons-react"
+import { IconList, IconMinus, IconWallet } from "@initia/icons-react"
 import { AddressUtils } from "@/public/utils"
 import AsyncBoundary from "@/components/AsyncBoundary"
-import CheckboxButton from "@/components/CheckboxButton"
 import Image from "@/components/Image"
 import type { RouterOperationJson } from "./data/simulate"
 import { useBridgePreviewState } from "./data/tx"
@@ -112,7 +111,17 @@ const BridgePreviewRoute = ({ addressList }: Props) => {
     <Collapsible.Root className={styles.root} open={showAll} onOpenChange={toggleShowAll}>
       {canToggleShowAll && (
         <Collapsible.Trigger asChild>
-          <CheckboxButton checked={showAll} onClick={toggleShowAll} label="Show details" />
+          <button className={styles.toggle} onClick={toggleShowAll}>
+            {showAll ? (
+              <>
+                <IconMinus size={12} /> Hide detail
+              </>
+            ) : (
+              <>
+                <IconList size={12} /> Show detail
+              </>
+            )}
+          </button>
         </Collapsible.Trigger>
       )}
 
@@ -131,7 +140,7 @@ const BridgePreviewRoute = ({ addressList }: Props) => {
           ))}
         </Collapsible.Content>
 
-        <OperationItem {...lastOperationProps} />
+        <OperationItem {...lastOperationProps} onClick={showAll ? undefined : toggleShowAll} />
       </div>
     </Collapsible.Root>
   )
diff --git a/packages/widget-react/src/pages/bridge/OperationItem.module.css b/packages/widget-react/src/pages/bridge/OperationItem.module.css
index 681ac9d..468e83f 100644
--- a/packages/widget-react/src/pages/bridge/OperationItem.module.css
+++ b/packages/widget-react/src/pages/bridge/OperationItem.module.css
@@ -29,19 +29,22 @@
     justify-content: center;
     align-items: center;
 
-    background-color: var(--border);
+    background-color: var(--gray-8);
     border-radius: 4px;
     color: var(--dimmed);
-    cursor: default;
     width: 24px;
     height: 24px;
     z-index: 1;
 
     transition: color var(--transition) ease;
+
+    &:hover {
+      color: var(--gray-1);
+    }
   }
 
-  button.type:hover {
-    color: var(--gray-1);
+  button.type {
+    background-color: var(--border);
   }
 }
 
diff --git a/packages/widget-react/src/pages/bridge/OperationItem.tsx b/packages/widget-react/src/pages/bridge/OperationItem.tsx
index f479e1e..cff1a57 100644
--- a/packages/widget-react/src/pages/bridge/OperationItem.tsx
+++ b/packages/widget-react/src/pages/bridge/OperationItem.tsx
@@ -16,7 +16,7 @@ interface ComponentProps extends Props {
 }
 
 const OperationItemComponent = (props: ComponentProps) => {
-  const { source, type, amount, denom, chainId, address, walletIcon } = props
+  const { source, type, onClick, amount, denom, chainId, address, walletIcon } = props
   const { symbol = truncate(denom), decimals = 0, logo_uri = placeholder } = props
   const { chain_name, pretty_name } = useSkipChain(chainId)
 
@@ -27,14 +27,14 @@ const OperationItemComponent = (props: ComponentProps) => {
           <div className={styles.divider} />
           {type ? (
             <WidgetTooltip label={type}>
-              <button className={styles.type}>
+              <span className={styles.type}>
                 <IconChevronDown size={16} />
-              </button>
+              </span>
             </WidgetTooltip>
           ) : (
-            <span className={styles.type}>
+            <button onClick={onClick} className={styles.type}>
               <IconChevronDown size={16} />
-            </span>
+            </button>
           )}
         </div>
       )}
@@ -75,6 +75,7 @@ const OperationItemComponent = (props: ComponentProps) => {
 interface Props {
   source?: boolean
   type?: string
+  onClick?: () => void
   amount: string
   denom: string
   chainId: string