diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
new file mode 100644
index 0000000..4c913cb
--- /dev/null
+++ b/src/components/LanguageSelector.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="language-selector">
+    <earth-icon class="icon" size="32" />
+    <t-select borderless auto-width :value="locale" @change="handleLocaleChange">
+      <t-option
+        v-for="option in localeOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </t-select>
+  </div>
+</template>
+
+<script setup>
+import { useLocale } from '@/utils/i18n'
+import { EarthIcon } from 'tdesign-icons-vue-next'
+
+const { locale, localeOptions, changeLocale } = useLocale()
+
+function handleLocaleChange(newLocale) {
+  changeLocale(newLocale)
+}
+</script>
+
+<style scoped>
+.language-selector {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.language-selector .icon {
+  color: var(--td-brand-color);
+}
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8df3d4c..d7735e0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -29,7 +29,7 @@
               :max-height="400"
               direction="left"
             >
-              <t-avatar class="user-avatar" :size="32">
+              <t-avatar class="user-avatar" size="32">
                 <template #icon>
                   <UserIcon />
                 </template>
@@ -50,6 +50,13 @@
                   <span>{{ $t('navbar.item.dashboard') }}</span>
                 </t-dropdown-item>
 
+                <t-dropdown-item value="language" @click="languageDialogVisible = true">
+                  <template #prefixIcon>
+                    <TranslateIcon />
+                  </template>
+                  <span>{{ $t('navbar.item.language') }}</span>
+                </t-dropdown-item>
+
                 <t-dropdown-item
                   value="logout"
                   theme="error"
@@ -71,15 +78,38 @@
         </div>
       </template>
     </t-head-menu>
+
+    <t-dialog
+      v-model:visible="languageDialogVisible"
+      :header="$t('navbar.item.language')"
+      :close-btn="true"
+      :footer="false"
+      attach="body"
+      width="360px"
+    >
+      <div class="language-dialog-content">
+        <LanguageSelector />
+      </div>
+    </t-dialog>
   </t-header>
 </template>
 
 <script setup>
-import { UserIcon, LoginIcon, LogoutIcon, Dashboard1Icon } from 'tdesign-icons-vue-next'
+import { ref } from 'vue'
+import {
+  UserIcon,
+  LoginIcon,
+  LogoutIcon,
+  Dashboard1Icon,
+  TranslateIcon,
+} from 'tdesign-icons-vue-next'
 import { useAuthStore } from '@/stores/auth'
 import { MessagePlugin } from 'tdesign-vue-next'
+import LanguageSelector from '@/components/LanguageSelector.vue'
 
 const authStore = useAuthStore()
+
+const languageDialogVisible = ref(false)
 </script>
 
 <style scoped>
@@ -93,6 +123,8 @@ const authStore = useAuthStore()
 }
 
 .nav-bar {
+  width: 100%;
+  box-sizing: border-box;
   background-color: transparent;
 }
 
@@ -117,4 +149,11 @@ const authStore = useAuthStore()
 .user-avatar {
   cursor: pointer;
 }
+
+.language-dialog-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+}
 </style>
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index b150bd0..68f49f4 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -26,17 +26,7 @@
     <div class="footer-bottom">
       <span>© {{ currentYear }} NettedX {{ t('footer.rights') }}</span>
 
-      <div class="language-selector">
-        <earth-icon class="icon" size="32" />
-        <t-select borderless auto-width :value="locale" @change="handleLocaleChange">
-          <t-option
-            v-for="option in localeOptions"
-            :key="option.value"
-            :label="option.label"
-            :value="option.value"
-          />
-        </t-select>
-      </div>
+      <LanguageSelector />
     </div>
 
     <div class="language-wrapper"></div>
@@ -46,14 +36,10 @@
 <script setup>
 import { computed } from 'vue'
 import { useLocale } from '@/utils/i18n'
-import { EarthIcon } from 'tdesign-icons-vue-next'
-const { locale, t, localeOptions, changeLocale } = useLocale()
+import LanguageSelector from '@/components/LanguageSelector.vue'
+const { t } = useLocale()
 
 const currentYear = computed(() => new Date().getFullYear())
-
-function handleLocaleChange(newLocale) {
-  changeLocale(newLocale)
-}
 </script>
 
 <style scoped>
@@ -137,15 +123,4 @@ function handleLocaleChange(newLocale) {
   padding: 1rem 0;
   box-sizing: border-box;
 }
-
-.language-selector {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.language-selector .icon {
-  color: var(--td-brand-color);
-}
 </style>
diff --git a/src/components/SiderBar.vue b/src/components/SiderBar.vue
new file mode 100644
index 0000000..58bde63
--- /dev/null
+++ b/src/components/SiderBar.vue
@@ -0,0 +1,71 @@
+<template>
+  <t-aside style="border-top: 1px solid var(--component-border)">
+    <t-menu theme="light" v-model="selectedValue" style="margin-right: 50px" height="550px">
+      <t-menu-item v-for="item in menuItems" :key="item.value" :value="item.value" :to="item.path">
+        <template #icon>
+          <t-icon :name="item.icon" />
+        </template>
+        {{ item.label }}
+      </t-menu-item>
+    </t-menu>
+  </t-aside>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useLocale } from '@/utils/i18n'
+import { useRoute } from 'vue-router'
+
+const { t } = useLocale()
+
+const route = useRoute()
+
+const selectedValue = ref('dashboard')
+
+const menuItems = computed(() => [
+  {
+    value: 'dashboard',
+    label: t('menu.dashboard'),
+    icon: 'dashboard',
+    path: '/dashboard',
+  },
+  {
+    value: 'send',
+    label: t('menu.send'),
+    icon: 'send',
+    path: '/send',
+  },
+  {
+    value: 'transactions',
+    label: t('menu.transactions'),
+    icon: 'tree-list',
+    path: '/transactions',
+  },
+  {
+    value: 'verify',
+    label: t('menu.verify'),
+    icon: 'verified',
+    path: '/verify',
+  },
+  {
+    value: 'account',
+    label: t('menu.account'),
+    icon: 'user',
+    path: '/account',
+  },
+])
+
+// 根据route的路径来设置选中的菜单项
+watch(
+  () => route.path,
+  (newPath) => {
+    const selectedItem = menuItems.value.find((item) => newPath.startsWith(item.path))
+    if (selectedItem) {
+      selectedValue.value = selectedItem.value
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped></style>
diff --git a/src/components/TradeVisual.vue b/src/components/TradeVisual.vue
new file mode 100644
index 0000000..d8234ff
--- /dev/null
+++ b/src/components/TradeVisual.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="trade-visual">
+    <div class="trade-party you">
+      <div class="trade-party__avatar">
+        <BuildingIcon size="28px" />
+      </div>
+      <div class="trade-party__name">{{ fromName }}</div>
+      <div class="trade-party__role">{{ fromRole }}</div>
+    </div>
+
+    <div class="trade-center">
+      <div class="trade-chip trade-chip--out">
+        <span class="trade-chip__label">{{ sendLabel }}</span>
+        <span class="trade-chip__asset">{{ getAssetName(sendAsset, sendAssetName) }}</span>
+        <span class="trade-chip__value">
+          {{ formatAmount(sendAmount, sendAsset, amountInBaseUnits) }}
+          {{ getAssetSymbol(sendAsset, sendAssetSymbol) }}
+        </span>
+      </div>
+      <ArrowLeftRight1Icon size="32px" class="trade-center__icon" />
+      <div class="trade-chip trade-chip--in">
+        <span class="trade-chip__label">{{ receiveLabel }}</span>
+        <span class="trade-chip__asset">{{ getAssetName(receiveAsset, receiveAssetName) }}</span>
+        <span class="trade-chip__value">
+          {{ formatAmount(receiveAmount, receiveAsset, amountInBaseUnits) }}
+          {{ getAssetSymbol(receiveAsset, receiveAssetSymbol) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="trade-party">
+      <div class="trade-party__avatar">
+        <BuildingIcon size="28px" />
+      </div>
+      <div class="trade-party__name">{{ toName || toPlaceholder }}</div>
+      <div class="trade-party__role">{{ toRole }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BuildingIcon, ArrowLeftRight1Icon } from 'tdesign-icons-vue-next'
+import { ASSETS, formatAssetAmount } from '@/utils/assets'
+
+defineProps({
+  fromName: { type: String, default: '-' },
+  fromRole: { type: String, default: '' },
+  toName: { type: String, default: '' },
+  toPlaceholder: { type: String, default: '' },
+  toRole: { type: String, default: '' },
+  sendAsset: { type: String, default: '' },
+  sendAssetName: { type: String, default: '' },
+  sendAssetSymbol: { type: String, default: '' },
+  sendAmount: { type: [Number, String, null], default: null },
+  sendLabel: { type: String, default: '' },
+  receiveAsset: { type: String, default: '' },
+  receiveAssetName: { type: String, default: '' },
+  receiveAssetSymbol: { type: String, default: '' },
+  receiveAmount: { type: [Number, String, null], default: null },
+  receiveLabel: { type: String, default: '' },
+  amountInBaseUnits: { type: Boolean, default: true },
+})
+
+function formatAmount(amount, assetCode, amountInBaseUnits) {
+  if (!amountInBaseUnits) {
+    if (amount === null || amount === undefined || amount === '') {
+      return '-'
+    }
+    return Number(amount).toLocaleString()
+  }
+  return formatAssetAmount(amount, assetCode)
+}
+
+function getAssetName(code, override) {
+  return override || ASSETS[code]?.name || code || '-'
+}
+
+function getAssetSymbol(code, override) {
+  return override || ASSETS[code]?.symbol || code || ''
+}
+</script>
+
+<style scoped>
+.trade-visual {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.trade-party {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+
+.trade-party__avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background-color: var(--td-bg-color-secondarycontainer);
+  color: var(--td-brand-color);
+}
+
+.trade-party.you .trade-party__avatar {
+  background-color: var(--td-brand-color);
+  color: var(--td-text-color-anti);
+}
+
+.trade-party__name {
+  width: 100%;
+  overflow: hidden;
+  font: var(--td-font-title-medium);
+  color: var(--td-text-color-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trade-party__role {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.trade-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  flex-shrink: 0;
+}
+
+.trade-center__icon {
+  color: var(--td-text-color-placeholder);
+}
+
+.trade-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 12px;
+  background-color: var(--td-bg-color-secondarycontainer);
+  min-width: 110px;
+}
+
+.trade-chip__label {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.trade-chip__asset {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-secondary);
+}
+
+.trade-chip--out .trade-chip__value {
+  font: var(--td-font-body-medium);
+  color: var(--td-error-color);
+}
+
+.trade-chip--in .trade-chip__value {
+  font: var(--td-font-body-medium);
+  color: var(--td-success-color);
+}
+</style>
diff --git a/src/components/TransactionDetailPanel.vue b/src/components/TransactionDetailPanel.vue
new file mode 100644
index 0000000..9b3a91b
--- /dev/null
+++ b/src/components/TransactionDetailPanel.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="transaction-detail">
+    <t-skeleton
+      v-if="loading"
+      theme="paragraph"
+      animation="gradient"
+      :row-col="[{ width: '100%' }, { width: '88%' }, { width: '76%' }, { width: '60%' }]"
+    />
+
+    <div v-else-if="!transaction" class="transaction-empty-container">
+      <t-empty :description="t('transactionDetail.notFound')" />
+    </div>
+
+    <div v-else class="transaction-detail__body">
+      <div v-if="showVerifiedStamp" class="verified-stamp">
+        <CheckCircleFilledIcon size="36px" />
+        <span>{{ t('verify.stamp') }}</span>
+      </div>
+
+      <div class="transaction-detail__layout">
+        <div class="transaction-detail__card transaction-detail__card--visual">
+          <div class="transaction-detail__card-title">{{ t('transactionDetail.parties') }}</div>
+
+          <TradeVisual
+            :from-name="transaction.senderOrganization?.name"
+            :from-role="t('transactionDetail.fields.sender')"
+            :to-name="transaction.receiverOrganization?.name"
+            :to-role="t('transactionDetail.fields.receiver')"
+            :send-asset="transaction.send?.asset?.code || transaction.send?.asset?.symbol"
+            :send-asset-name="transaction.send?.asset?.name"
+            :send-asset-symbol="transaction.send?.asset?.symbol"
+            :send-amount="transaction.send?.amount"
+            :send-label="t('transactionDetail.fields.send')"
+            :receive-asset="transaction.receive?.asset?.code || transaction.receive?.asset?.symbol"
+            :receive-asset-name="transaction.receive?.asset?.name"
+            :receive-asset-symbol="transaction.receive?.asset?.symbol"
+            :receive-amount="transaction.receive?.amount"
+            :receive-label="t('transactionDetail.fields.receive')"
+          />
+        </div>
+
+        <div class="transaction-detail__card transaction-detail__card--progress">
+          <div class="transaction-detail__card-title">{{ t('transactionDetail.progress') }}</div>
+          <t-steps :current="progressCurrent" class="transaction-progress" layout="horizontal">
+            <t-step-item :title="t('transactionDetail.steps.submitted')">
+              <template #icon>
+                <TimeFilledIcon class="progress-step-icon" />
+              </template>
+            </t-step-item>
+            <t-step-item
+              :title="
+                transaction.status === 'failed'
+                  ? t('transactionDetail.steps.failed')
+                  : t('transactionDetail.steps.settled')
+              "
+              :status="transaction.status === 'failed' ? 'error' : 'finish'"
+            >
+              <template #icon>
+                <ErrorCircleFilledIcon
+                  v-if="transaction.status === 'failed'"
+                  class="progress-step-icon progress-step-icon--failed"
+                />
+                <CheckCircleFilledIcon
+                  v-else
+                  class="progress-step-icon progress-step-icon--success"
+                />
+              </template>
+            </t-step-item>
+          </t-steps>
+        </div>
+
+        <div class="transaction-detail__card">
+          <div class="transaction-detail__card-title">{{ t('transactionDetail.basicInfo') }}</div>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.id') }}</span>
+              <span class="detail-item__value">#{{ transaction.id }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.status') }}</span>
+              <span class="detail-item__value">
+                <t-tag
+                  :theme="statusTheme(transaction.status)"
+                  variant="light-outline"
+                  shape="round"
+                >
+                  {{ t(`transactions.status.${transaction.status}`) }}
+                </t-tag>
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.createdBy') }}</span>
+              <span class="detail-item__value">{{
+                formatOrganization(transaction.createdBy)
+              }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.chainId') }}</span>
+              <span class="detail-item__value">{{ transaction.chainId }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.windowId') }}</span>
+              <span class="detail-item__value">{{ transaction.windowId }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.createdAt') }}</span>
+              <span class="detail-item__value">{{ formatDateTime(transaction.createdAt) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('transactionDetail.fields.settledAt') }}</span>
+              <span class="detail-item__value">
+                {{ transaction.settledAt ? formatDateTime(transaction.settledAt) : '-' }}
+              </span>
+            </div>
+            <div v-if="transaction.status === 'failed'" class="detail-item detail-item--full">
+              <span class="detail-item__label">{{
+                t('transactionDetail.fields.failureReason')
+              }}</span>
+              <span class="detail-item__value">{{ transaction.failureReason || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="transaction-detail__card">
+          <div class="transaction-detail__card-title">{{ t('transactionDetail.hashInfo') }}</div>
+          <div class="detail-grid detail-grid--single">
+            <div class="detail-item">
+              <span class="detail-item__label">{{
+                t('transactionDetail.fields.submissionHash')
+              }}</span>
+              <span
+                class="detail-item__value detail-item__value-with-action detail-item__value--mono"
+              >
+                <span>{{ transaction.submissionHash || '-' }}</span>
+                <t-tooltip :content="t('transactionDetail.copy')">
+                  <t-button
+                    variant="text"
+                    theme="default"
+                    size="small"
+                    :disabled="!transaction.submissionHash"
+                    @click="
+                      copyField(
+                        transaction.submissionHash,
+                        t('transactionDetail.fields.submissionHash'),
+                      )
+                    "
+                  >
+                    <template #icon>
+                      <CopyIcon />
+                    </template>
+                  </t-button>
+                </t-tooltip>
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{
+                t('transactionDetail.fields.settlementHash')
+              }}</span>
+              <span
+                class="detail-item__value detail-item__value-with-action detail-item__value--mono"
+              >
+                <span>{{ transaction.settlementHash || '-' }}</span>
+                <t-tooltip :content="t('transactionDetail.copy')">
+                  <t-button
+                    variant="text"
+                    theme="default"
+                    size="small"
+                    :disabled="!transaction.settlementHash"
+                    @click="
+                      copyField(
+                        transaction.settlementHash,
+                        t('transactionDetail.fields.settlementHash'),
+                      )
+                    "
+                  >
+                    <template #icon>
+                      <CopyIcon />
+                    </template>
+                  </t-button>
+                </t-tooltip>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import {
+  CheckCircleFilledIcon,
+  CopyIcon,
+  ErrorCircleFilledIcon,
+  TimeFilledIcon,
+} from 'tdesign-icons-vue-next'
+import { MessagePlugin } from 'tdesign-vue-next'
+import api from '@/utils/api'
+import { useLocale } from '@/utils/i18n'
+import TradeVisual from '@/components/TradeVisual.vue'
+
+const props = defineProps({
+  transactionId: { type: [String, Number], default: null },
+  transaction: { type: Object, default: null },
+  showVerifiedStamp: { type: Boolean, default: false },
+})
+
+const { t } = useLocale()
+
+const fetchedTransaction = ref(null)
+const transaction = computed(() => props.transaction ?? fetchedTransaction.value)
+const loading = ref(false)
+const progressCurrent = computed(() => (transaction.value?.status === 'submitted' ? 0 : 1))
+
+function formatOrganization(org) {
+  if (!org) {
+    return '-'
+  }
+  return org.name || org.code || '-'
+}
+
+function formatDateTime(timestamp) {
+  if (!timestamp) {
+    return '-'
+  }
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+function statusTheme(status) {
+  switch (status) {
+    case 'settled':
+      return 'success'
+    case 'failed':
+      return 'danger'
+    default:
+      return 'warning'
+  }
+}
+
+async function copyField(value, label) {
+  if (!value) {
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(String(value))
+    MessagePlugin.success(t('transactionDetail.copySuccess', { label }))
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('transactionDetail.copyFailed'))
+  }
+}
+
+async function fetchTransaction() {
+  if (!props.transactionId) {
+    return
+  }
+  loading.value = true
+  try {
+    const res = await api({
+      method: 'get',
+      url: `/transactions/${props.transactionId}`,
+    })
+    if (res.data.code === 200) {
+      fetchedTransaction.value = res.data.data
+    } else {
+      throw new Error(res.data.msg)
+    }
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('transactionDetail.msg.fetchFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (!props.transaction) {
+    fetchTransaction()
+  }
+})
+</script>
+
+<style scoped>
+.transaction-empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.transaction-detail__body {
+  position: relative;
+}
+
+.verified-stamp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  position: absolute;
+  z-index: 1;
+  top: 1.5rem;
+  left: 50%;
+  width: fit-content;
+  padding: 0.75rem 2.5rem;
+  border: 6px double var(--td-success-color);
+  border-radius: 12px;
+  color: var(--td-success-color);
+  font: var(--td-font-headline-medium);
+  font-weight: 700;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  transform: translateX(-50%) rotate(-4deg);
+  opacity: 0.85;
+  user-select: none;
+  pointer-events: none;
+}
+
+.transaction-detail__layout {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.transaction-detail__card {
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(from var(--td-bg-color-container) r g b / 0.98),
+    rgba(from var(--td-bg-color-container) r g b / 0.92)
+  );
+  padding: 1.5rem;
+}
+
+.transaction-detail__card--visual {
+  grid-column: 1 / -1;
+}
+
+.transaction-detail__card--progress {
+  grid-column: 1 / -1;
+}
+
+.transaction-detail__card-title {
+  margin: 0 0 0.875rem;
+  font: var(--td-font-title-medium);
+  color: var(--td-text-color-primary);
+}
+
+.transaction-progress {
+  padding: 0.25rem 0;
+}
+
+.progress-step-icon {
+  color: var(--td-brand-color);
+}
+
+.progress-step-icon--success {
+  color: var(--td-success-color);
+}
+
+.progress-step-icon--failed {
+  color: var(--td-error-color);
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.detail-grid--single {
+  grid-template-columns: 1fr;
+}
+
+.detail-item {
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--td-component-border);
+  border-radius: 14px;
+  background: var(--td-bg-color-page);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item--full {
+  grid-column: 1 / -1;
+}
+
+.detail-item__label {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-secondary);
+}
+
+.detail-item__value {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  word-break: break-word;
+}
+
+.detail-item__value-with-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.detail-item__value--mono {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .transaction-detail__layout {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 9616bfe..b9f2ae9 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1,6 +1,99 @@
 {
   "dashboard": {
-    "title": "Dashboard"
+    "title": "Dashboard",
+    "subtitle": "Real-time monitoring of the settlement window and target block",
+    "forecast": {
+      "title": "Settlement Window Forecast",
+      "desc": "Stay ahead of settlement and plan your funding with confidence",
+      "refresh": "Refresh",
+      "active": "Active",
+      "windowId": "Pending Window ID",
+      "settlementBlock": "Target Settlement Block",
+      "blocksRemaining": "Blocks Remaining",
+      "blocksUnit": "blocks",
+      "reached": "Target block reached",
+      "lastUpdated": {
+        "label": "Last updated at {time}",
+        "justNow": "just now",
+        "minutesAgo": "{minutes} minutes ago",
+        "hoursAgo": "{hours} hours ago",
+        "daysAgo": "{days} days ago"
+      },
+      "msg": {
+        "fetchFailed": "Failed to fetch settlement window forecast"
+      }
+    },
+    "overview": {
+      "msg": {
+        "fetchFailed": "Failed to fetch dashboard overview"
+      }
+    },
+    "accountBalances": {
+      "title": "Account Balances",
+      "desc": "See the available assets in your account at a glance",
+      "balance": "Balance",
+      "empty": "No account balances"
+    },
+    "cumulativeTradeCount": {
+      "title": "Total Trades",
+      "desc": "Track the total trading activity linked to your account",
+      "label": "Trades"
+    },
+    "asset": "Asset Address",
+    "settlementNetAmounts": {
+      "title": "Settlement Net Amounts",
+      "desc": "See how your funds will change after this settlement",
+      "payable": "Payable Amount",
+      "receivable": "Receivable Amount",
+      "amount": "Net Amount",
+      "empty": "No net settlement obligations",
+      "msg": {
+        "fetchFailed": "Failed to fetch net settlement positions"
+      }
+    },
+    "cumulativeTradeAmounts": {
+      "title": "Total Trade Amounts",
+      "desc": "Review the total value of trades linked to your account",
+      "amount": "Cumulative Gross Amount",
+      "empty": "No cumulative gross trade amounts",
+      "msg": {
+        "fetchFailed": "Failed to fetch settlement asset requirements"
+      }
+    },
+    "liquidityBufferDebts": {
+      "title": "Liquidity Buffer Balance",
+      "desc": "Keep track of funding support that is still to be repaid",
+      "required": "Debt Amount",
+      "available": "Available Balance",
+      "borrow": "Debt Amount",
+      "amount": "Debt Amount",
+      "empty": "No liquidity buffer balance",
+      "msg": {
+        "fetchFailed": "Failed to fetch liquidity shortfalls"
+      }
+    }
+  },
+  "account": {
+    "title": "Account",
+    "subtitle": "View your account and organization profile",
+    "profileCardTitle": "Profile",
+    "organizationCardTitle": "Organization",
+    "actions": {
+      "copy": "Copy"
+    },
+    "msg": {
+      "copySuccess": "{label} copied",
+      "copyFailed": "Copy failed"
+    },
+    "fields": {
+      "displayName": "Display Name",
+      "role": "Role",
+      "accountId": "Account ID",
+      "organizationCode": "Organization Code",
+      "organizationId": "Organization ID",
+      "organizationName": "Organization Name",
+      "walletAddress": "Wallet Address"
+    }
   },
   "footer": {
     "product": "Product",
@@ -224,7 +317,8 @@
     },
     "item": {
       "logout": "Logout",
-      "dashboard": "Dashboard"
+      "dashboard": "Dashboard",
+      "language": "Language"
     }
   },
   "notFound": {
@@ -243,5 +337,145 @@
       "failedVerify": "Failed to verify.",
       "success": "Login success"
     }
+  },
+  "menu": {
+    "dashboard": "Dashboard",
+    "account": "Account",
+    "records": "Records",
+    "send": "Send",
+    "transactions": "Transactions",
+    "verify": "Verify"
+  },
+  "send": {
+    "title": "Send Transaction",
+    "subtitle": "Choose a counterparty and assets to submit a netting settlement transaction",
+    "form": {
+      "title": "Transaction Details",
+      "desc": "The transaction will enter the next settlement window once submitted",
+      "counterparty": "Counterparty",
+      "counterpartyPlaceholder": "Search and select an organization",
+      "counterpartyEmpty": "No tradable organizations available",
+      "youSend": "You Send",
+      "youReceive": "You Receive",
+      "asset": "Asset",
+      "amount": "Amount",
+      "amountPlaceholder": "Enter an amount",
+      "submit": "Submit Transaction",
+      "reset": "Reset"
+    },
+    "visual": {
+      "title": "Transaction Preview",
+      "desc": "See the counterparties and asset flow at a glance",
+      "you": "Initiator (You)",
+      "counterparty": "Recipient",
+      "counterpartyPlaceholder": "Select a counterparty",
+      "send": "Send",
+      "receive": "Receive"
+    },
+    "msg": {
+      "fetchOrganizationsFailed": "Failed to fetch tradable organizations",
+      "submitFailed": "Failed to submit transaction, please try again later",
+      "validation": {
+        "counterparty": "Please select a counterparty",
+        "sendAmount": "Please enter a valid send amount",
+        "receiveAmount": "Please enter a valid receive amount"
+      }
+    },
+    "errors": {
+      "4001": "The receiving organization does not exist or is unavailable",
+      "4002": "You cannot trade with your own organization"
+    },
+    "success": {
+      "title": "Transaction Submitted",
+      "desc": "The transaction has been submitted to the settlement window",
+      "transactionId": "Transaction ID",
+      "again": "Send Another",
+      "viewDetail": "View Transaction Details"
+    },
+    "failure": {
+      "title": "Transaction Failed",
+      "close": "Close",
+      "retry": "Retry"
+    }
+  },
+  "transactions": {
+    "title": "Transactions",
+    "subtitle": "View all platform transactions and track settlement status in real time",
+    "filter": {
+      "all": "All Transactions",
+      "related": "Related to Me"
+    },
+    "table": {
+      "id": "Transaction ID",
+      "createdBy": "Submitted By",
+      "sender": "Sender",
+      "send": "Sent Asset",
+      "receiver": "Receiver",
+      "receive": "Received Asset",
+      "status": "Status",
+      "chainId": "Chain",
+      "windowId": "Settlement Window",
+      "createdAt": "Created At",
+      "settledAt": "Settled At",
+      "operation": "Action"
+    },
+    "status": {
+      "submitted": "Submitted",
+      "settled": "Settled",
+      "failed": "Failed"
+    },
+    "action": {
+      "view": "View"
+    },
+    "empty": "No transactions yet",
+    "msg": {
+      "fetchFailed": "Failed to fetch transactions"
+    }
+  },
+  "transactionDetail": {
+    "title": "Transaction Detail",
+    "subtitle": "View the full details and settlement status of this transaction",
+    "back": "Back to Transactions",
+    "parties": "Parties",
+    "progress": "Transaction Progress",
+    "basicInfo": "Basic Information",
+    "hashInfo": "On-chain Hashes",
+    "copy": "Copy",
+    "copySuccess": "{label} copied",
+    "copyFailed": "Copy failed",
+    "notFound": "Transaction not found or not accessible",
+    "steps": {
+      "submitted": "Submitted",
+      "settled": "Settled",
+      "failed": "Settlement Failed"
+    },
+    "fields": {
+      "id": "Transaction ID",
+      "status": "Status",
+      "createdBy": "Submitted By",
+      "sender": "Sender",
+      "receiver": "Receiver",
+      "send": "Send",
+      "receive": "Receive",
+      "chainId": "Chain",
+      "windowId": "Settlement Window",
+      "createdAt": "Created At",
+      "settledAt": "Settled At",
+      "failureReason": "Failure Reason",
+      "submissionHash": "Submission Hash",
+      "settlementHash": "Settlement Hash"
+    },
+    "msg": {
+      "fetchFailed": "Failed to fetch transaction detail"
+    }
+  },
+  "verify": {
+    "title": "Verify Transaction",
+    "subtitle": "Enter an on-chain transaction hash to verify whether it truly exists",
+    "placeholder": "Enter transaction hash (starting with 0x)",
+    "button": "Verify",
+    "invalidHash": "Please enter a valid transaction hash",
+    "failDescription": "No matching transaction found, verification failed",
+    "stamp": "Verified"
   }
 }
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 91f2c94..2ab6f0d 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1,6 +1,99 @@
 {
   "dashboard": {
-    "title": "仪表板"
+    "title": "仪表板",
+    "subtitle": "实时监控净额结算窗口与目标结算区块",
+    "forecast": {
+      "title": "结算窗口预测",
+      "desc": "掌握本轮结算进度，提前做好资金安排",
+      "refresh": "刷新",
+      "active": "活跃中",
+      "windowId": "待结算窗口 ID",
+      "settlementBlock": "目标结算区块",
+      "blocksRemaining": "剩余区块数",
+      "blocksUnit": "个区块",
+      "reached": "已到达目标区块",
+      "lastUpdated": {
+        "label": "最后更新于 {time}",
+        "justNow": "刚刚",
+        "minutesAgo": "{minutes} 分钟前",
+        "hoursAgo": "{hours} 小时前",
+        "daysAgo": "{days} 天前"
+      },
+      "msg": {
+        "fetchFailed": "获取结算窗口预测失败"
+      }
+    },
+    "overview": {
+      "msg": {
+        "fetchFailed": "获取仪表板概览失败"
+      }
+    },
+    "accountBalances": {
+      "title": "账户余额",
+      "desc": "实时掌握账户中各项资产的可用余额",
+      "balance": "余额",
+      "empty": "当前无账户余额"
+    },
+    "cumulativeTradeCount": {
+      "title": "累计交易笔数",
+      "desc": "了解账户累计参与的交易规模",
+      "label": "交易笔数"
+    },
+    "asset": "资产地址",
+    "settlementNetAmounts": {
+      "title": "结算净额",
+      "desc": "一目了然地了解本轮结算后的资金变化",
+      "payable": "应付数量",
+      "receivable": "应收数量",
+      "amount": "净额",
+      "empty": "当前没有净结算义务",
+      "msg": {
+        "fetchFailed": "获取净结算头寸失败"
+      }
+    },
+    "cumulativeTradeAmounts": {
+      "title": "累计交易金额",
+      "desc": "汇总查看账户参与的累计交易金额",
+      "amount": "累计原始金额",
+      "empty": "当前没有累计原始交易金额",
+      "msg": {
+        "fetchFailed": "获取结算资产需求失败"
+      }
+    },
+    "liquidityBufferDebts": {
+      "title": "流动性缓冲欠款",
+      "desc": "及时了解待归还的流动性支持金额",
+      "required": "欠款金额",
+      "available": "当前余额",
+      "borrow": "欠款金额",
+      "amount": "欠款金额",
+      "empty": "当前没有流动性缓冲欠款",
+      "msg": {
+        "fetchFailed": "获取流动性缺口失败"
+      }
+    }
+  },
+  "account": {
+    "title": "账户中心",
+    "subtitle": "查看当前账户与所属机构信息",
+    "profileCardTitle": "账户资料",
+    "organizationCardTitle": "机构信息",
+    "actions": {
+      "copy": "复制"
+    },
+    "msg": {
+      "copySuccess": "{label} 已复制",
+      "copyFailed": "复制失败"
+    },
+    "fields": {
+      "displayName": "显示名称",
+      "role": "角色",
+      "accountId": "账户 ID",
+      "organizationCode": "机构代码",
+      "organizationId": "机构 ID",
+      "organizationName": "机构名称",
+      "walletAddress": "钱包地址"
+    }
   },
   "footer": {
     "product": "产品",
@@ -224,7 +317,8 @@
     },
     "item": {
       "logout": "注销",
-      "dashboard": "仪表板"
+      "dashboard": "仪表板",
+      "language": "语言"
     }
   },
   "notFound": {
@@ -241,5 +335,145 @@
       "failedVerify": "验证失败。",
       "success": "登录成功"
     }
+  },
+  "menu": {
+    "dashboard": "仪表板",
+    "account": "帐户",
+    "records": "交易记录",
+    "send": "发起交易",
+    "transactions": "交易",
+    "verify": "验证"
+  },
+  "send": {
+    "title": "发起交易",
+    "subtitle": "选择交易对象与资产，提交一笔净额结算交易",
+    "form": {
+      "title": "交易信息",
+      "desc": "交易提交后将进入下一个结算窗口，等待净额结算完成",
+      "counterparty": "交易对象",
+      "counterpartyPlaceholder": "搜索并选择机构",
+      "counterpartyEmpty": "暂无可交易机构",
+      "youSend": "您发送",
+      "youReceive": "您收到",
+      "asset": "资产",
+      "amount": "数量",
+      "amountPlaceholder": "请输入数量",
+      "submit": "提交交易",
+      "reset": "重置"
+    },
+    "visual": {
+      "title": "交易预览",
+      "desc": "交易双方与资产流向一目了然",
+      "you": "发起方（我方）",
+      "counterparty": "接收方",
+      "counterpartyPlaceholder": "请选择交易对象",
+      "send": "发送",
+      "receive": "接收"
+    },
+    "msg": {
+      "fetchOrganizationsFailed": "获取可交易机构列表失败",
+      "submitFailed": "提交交易失败，请稍后重试",
+      "validation": {
+        "counterparty": "请选择交易对象",
+        "sendAmount": "请输入有效的发送数量",
+        "receiveAmount": "请输入有效的接收数量"
+      }
+    },
+    "errors": {
+      "4001": "接收方机构不存在或不可用",
+      "4002": "不能与当前所属机构进行交易"
+    },
+    "success": {
+      "title": "交易提交成功",
+      "desc": "交易已提交到结算窗口，等待结算完成",
+      "transactionId": "交易 ID",
+      "again": "继续填写下一个",
+      "viewDetail": "查看交易详情"
+    },
+    "failure": {
+      "title": "交易提交失败",
+      "close": "关闭",
+      "retry": "重试"
+    }
+  },
+  "transactions": {
+    "title": "交易",
+    "subtitle": "查看平台全部交易记录，实时追踪结算状态",
+    "filter": {
+      "all": "全部交易",
+      "related": "与我相关"
+    },
+    "table": {
+      "id": "交易 ID",
+      "createdBy": "提交机构",
+      "sender": "发送方",
+      "send": "发送资产",
+      "receiver": "接收方",
+      "receive": "接收资产",
+      "status": "状态",
+      "chainId": "区块链网络",
+      "windowId": "结算窗口",
+      "createdAt": "创建时间",
+      "settledAt": "结算时间",
+      "operation": "操作"
+    },
+    "status": {
+      "submitted": "已提交",
+      "settled": "已结算",
+      "failed": "结算失败"
+    },
+    "action": {
+      "view": "查看"
+    },
+    "empty": "暂无交易记录",
+    "msg": {
+      "fetchFailed": "获取交易记录失败"
+    }
+  },
+  "transactionDetail": {
+    "title": "交易详情",
+    "subtitle": "查看该笔交易的完整信息与结算状态",
+    "back": "返回交易列表",
+    "parties": "交易双方",
+    "progress": "交易进度",
+    "basicInfo": "基本信息",
+    "hashInfo": "链上哈希",
+    "copy": "复制",
+    "copySuccess": "{label} 已复制",
+    "copyFailed": "复制失败",
+    "notFound": "交易记录不存在或无权查看",
+    "steps": {
+      "submitted": "已提交",
+      "settled": "已结算",
+      "failed": "结算失败"
+    },
+    "fields": {
+      "id": "交易 ID",
+      "status": "状态",
+      "createdBy": "提交机构",
+      "sender": "发送方",
+      "receiver": "接收方",
+      "send": "发送",
+      "receive": "接收",
+      "chainId": "区块链网络",
+      "windowId": "结算窗口",
+      "createdAt": "创建时间",
+      "settledAt": "结算时间",
+      "failureReason": "失败原因",
+      "submissionHash": "提交交易哈希",
+      "settlementHash": "结算交易哈希"
+    },
+    "msg": {
+      "fetchFailed": "获取交易详情失败"
+    }
+  },
+  "verify": {
+    "title": "交易验证",
+    "subtitle": "输入链上交易哈希，验证该交易是否真实存在",
+    "placeholder": "请输入交易哈希（0x开头）",
+    "button": "验证",
+    "invalidHash": "请输入有效的交易哈希",
+    "failDescription": "未找到对应交易，验证失败",
+    "stamp": "验证通过"
   }
 }
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index 9feb361..78d90ea 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -1,6 +1,99 @@
 {
   "dashboard": {
-    "title": "儀表板"
+    "title": "儀表板",
+    "subtitle": "即時監控淨額結算窗口與目標結算區塊",
+    "forecast": {
+      "title": "結算窗口預測",
+      "desc": "掌握本輪結算進度，提前做好資金安排",
+      "refresh": "刷新",
+      "active": "活躍中",
+      "windowId": "待結算窗口 ID",
+      "settlementBlock": "目標結算區塊",
+      "blocksRemaining": "剩餘區塊數",
+      "blocksUnit": "個區塊",
+      "reached": "已到達目標區塊",
+      "lastUpdated": {
+        "label": "最後更新於 {time}",
+        "justNow": "剛剛",
+        "minutesAgo": "{minutes} 分鐘前",
+        "hoursAgo": "{hours} 小時前",
+        "daysAgo": "{days} 天前"
+      },
+      "msg": {
+        "fetchFailed": "獲取結算窗口預測失敗"
+      }
+    },
+    "overview": {
+      "msg": {
+        "fetchFailed": "獲取儀表板概覽失敗"
+      }
+    },
+    "accountBalances": {
+      "title": "帳戶餘額",
+      "desc": "即時掌握帳戶中各項資產的可用餘額",
+      "balance": "餘額",
+      "empty": "目前無帳戶餘額"
+    },
+    "cumulativeTradeCount": {
+      "title": "累計交易筆數",
+      "desc": "了解帳戶累計參與的交易規模",
+      "label": "交易筆數"
+    },
+    "asset": "資產地址",
+    "settlementNetAmounts": {
+      "title": "結算淨額",
+      "desc": "一目了然地了解本輪結算後的資金變化",
+      "payable": "應付數量",
+      "receivable": "應收數量",
+      "amount": "淨額",
+      "empty": "目前沒有淨結算義務",
+      "msg": {
+        "fetchFailed": "獲取淨結算頭寸失敗"
+      }
+    },
+    "cumulativeTradeAmounts": {
+      "title": "累計交易金額",
+      "desc": "彙總查看帳戶參與的累計交易金額",
+      "amount": "累計原始金額",
+      "empty": "目前沒有累計原始交易金額",
+      "msg": {
+        "fetchFailed": "獲取結算資產需求失敗"
+      }
+    },
+    "liquidityBufferDebts": {
+      "title": "流動性緩衝欠款",
+      "desc": "及時了解待歸還的流動性支援金額",
+      "required": "欠款金額",
+      "available": "目前餘額",
+      "borrow": "欠款金額",
+      "amount": "欠款金額",
+      "empty": "目前沒有流動性緩衝欠款",
+      "msg": {
+        "fetchFailed": "獲取流動性缺口失敗"
+      }
+    }
+  },
+  "account": {
+    "title": "帳戶中心",
+    "subtitle": "檢視目前帳戶與所屬機構資訊",
+    "profileCardTitle": "帳戶資料",
+    "organizationCardTitle": "機構資訊",
+    "actions": {
+      "copy": "複製"
+    },
+    "msg": {
+      "copySuccess": "{label} 已複製",
+      "copyFailed": "複製失敗"
+    },
+    "fields": {
+      "displayName": "顯示名稱",
+      "role": "角色",
+      "accountId": "帳戶 ID",
+      "organizationCode": "機構代碼",
+      "organizationId": "機構 ID",
+      "organizationName": "機構名稱",
+      "walletAddress": "錢包地址"
+    }
   },
   "footer": {
     "product": "產品",
@@ -224,7 +317,8 @@
     },
     "item": {
       "logout": "註銷",
-      "dashboard": "儀表板"
+      "dashboard": "儀表板",
+      "language": "語言"
     }
   },
   "notFound": {
@@ -241,5 +335,145 @@
       "failedVerify": "驗證失敗。",
       "success": "登入成功"
     }
+  },
+  "menu": {
+    "dashboard": "儀表板",
+    "account": "帳戶",
+    "records": "交易記錄",
+    "send": "發起交易",
+    "transactions": "交易",
+    "verify": "驗證"
+  },
+  "send": {
+    "title": "發起交易",
+    "subtitle": "選擇交易對象與資產，提交一筆淨額結算交易",
+    "form": {
+      "title": "交易資訊",
+      "desc": "交易提交後將進入下一個結算窗口，等待淨額結算完成",
+      "counterparty": "交易對象",
+      "counterpartyPlaceholder": "搜尋並選擇機構",
+      "counterpartyEmpty": "暫無可交易機構",
+      "youSend": "您發送",
+      "youReceive": "您收到",
+      "asset": "資產",
+      "amount": "數量",
+      "amountPlaceholder": "請輸入數量",
+      "submit": "提交交易",
+      "reset": "重置"
+    },
+    "visual": {
+      "title": "交易預覽",
+      "desc": "交易雙方與資產流向一目了然",
+      "you": "發起方（我方）",
+      "counterparty": "接收方",
+      "counterpartyPlaceholder": "請選擇交易對象",
+      "send": "發送",
+      "receive": "接收"
+    },
+    "msg": {
+      "fetchOrganizationsFailed": "獲取可交易機構列表失敗",
+      "submitFailed": "提交交易失敗，請稍後重試",
+      "validation": {
+        "counterparty": "請選擇交易對象",
+        "sendAmount": "請輸入有效的發送數量",
+        "receiveAmount": "請輸入有效的接收數量"
+      }
+    },
+    "errors": {
+      "4001": "接收方機構不存在或不可用",
+      "4002": "不能與當前所屬機構進行交易"
+    },
+    "success": {
+      "title": "交易提交成功",
+      "desc": "交易已提交到結算窗口，等待結算完成",
+      "transactionId": "交易 ID",
+      "again": "繼續填寫下一個",
+      "viewDetail": "查看交易詳情"
+    },
+    "failure": {
+      "title": "交易提交失敗",
+      "close": "關閉",
+      "retry": "重試"
+    }
+  },
+  "transactions": {
+    "title": "交易",
+    "subtitle": "查看平台全部交易記錄，即時追蹤結算狀態",
+    "filter": {
+      "all": "全部交易",
+      "related": "與我相關"
+    },
+    "table": {
+      "id": "交易 ID",
+      "createdBy": "提交機構",
+      "sender": "發送方",
+      "send": "發送資產",
+      "receiver": "接收方",
+      "receive": "接收資產",
+      "status": "狀態",
+      "chainId": "區塊鏈網路",
+      "windowId": "結算窗口",
+      "createdAt": "建立時間",
+      "settledAt": "結算時間",
+      "operation": "操作"
+    },
+    "status": {
+      "submitted": "已提交",
+      "settled": "已結算",
+      "failed": "結算失敗"
+    },
+    "action": {
+      "view": "查看"
+    },
+    "empty": "暫無交易記錄",
+    "msg": {
+      "fetchFailed": "獲取交易記錄失敗"
+    }
+  },
+  "transactionDetail": {
+    "title": "交易詳情",
+    "subtitle": "查看該筆交易的完整信息與結算狀態",
+    "back": "返回交易列表",
+    "parties": "交易雙方",
+    "progress": "交易進度",
+    "basicInfo": "基本信息",
+    "hashInfo": "鏈上哈希",
+    "copy": "複製",
+    "copySuccess": "{label} 已複製",
+    "copyFailed": "複製失敗",
+    "notFound": "交易記錄不存在或無權查看",
+    "steps": {
+      "submitted": "已提交",
+      "settled": "已結算",
+      "failed": "結算失敗"
+    },
+    "fields": {
+      "id": "交易 ID",
+      "status": "狀態",
+      "createdBy": "提交機構",
+      "sender": "發送方",
+      "receiver": "接收方",
+      "send": "發送",
+      "receive": "接收",
+      "chainId": "區塊鏈網路",
+      "windowId": "結算窗口",
+      "createdAt": "建立時間",
+      "settledAt": "結算時間",
+      "failureReason": "失敗原因",
+      "submissionHash": "提交交易哈希",
+      "settlementHash": "結算交易哈希"
+    },
+    "msg": {
+      "fetchFailed": "獲取交易詳情失敗"
+    }
+  },
+  "verify": {
+    "title": "交易驗證",
+    "subtitle": "輸入鏈上交易哈希，驗證該交易是否真實存在",
+    "placeholder": "請輸入交易哈希（0x開頭）",
+    "button": "驗證",
+    "invalidHash": "請輸入有效的交易哈希",
+    "failDescription": "未找到對應交易，驗證失敗",
+    "stamp": "驗證通過"
   }
 }
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index eeeb97d..78a1d9e 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,4 +1,61 @@
 <template>
-  applayout
-  <router-view />
+  <t-layout class="app-layout">
+    <NavBar class="nav-bar" />
+    <t-layout class="content-container">
+      <SiderBar class="sider-bar" />
+
+      <t-layout class="content">
+        <t-content>
+          <RouterView />
+        </t-content>
+
+        <t-footer class="footer">
+          Copyright @ {{ new Date().getFullYear() }} NettedX. All Rights Reserved
+        </t-footer>
+      </t-layout>
+    </t-layout>
+  </t-layout>
 </template>
+
+<script setup>
+import NavBar from '@/components/NavBar.vue'
+import SiderBar from '@/components/SiderBar.vue'
+</script>
+
+<style scoped>
+.app-layout {
+  background-color: var(--td-bg-color-container);
+}
+
+.nav-bar {
+  position: fixed;
+}
+
+.content-container {
+  background-color: var(--td-bg-color-container);
+  height: 100svh;
+  overflow: hidden;
+  position: relative;
+}
+
+.sider-bar {
+  padding-top: 3.5rem;
+  box-sizing: border-box;
+  height: 100svh;
+}
+
+.content {
+  padding-top: 3.5rem;
+  box-sizing: border-box;
+  min-height: 100svh;
+  overflow-y: auto;
+}
+
+.footer {
+  text-align: center;
+  padding: 1rem;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+  margin-top: 2rem;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d68fd4d..79fd08c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,6 +36,31 @@ const routes = computed(() => [
         meta: { title: t('dashboard.title') },
         component: () => import('@/views/DashboardView.vue'),
       },
+      {
+        path: 'send',
+        meta: { title: t('send.title') },
+        component: () => import('@/views/SendView.vue'),
+      },
+      {
+        path: 'transactions',
+        meta: { title: t('transactions.title') },
+        component: () => import('@/views/TransactionsView.vue'),
+      },
+      {
+        path: 'transactions/:id',
+        meta: { title: t('transactionDetail.title') },
+        component: () => import('@/views/TransactionDetailView.vue'),
+      },
+      {
+        path: 'verify',
+        meta: { title: t('verify.title') },
+        component: () => import('@/views/VerifyView.vue'),
+      },
+      {
+        path: 'account',
+        meta: { title: t('account.title') },
+        component: () => import('@/views/AccountView.vue'),
+      },
     ],
   },
 ])
diff --git a/src/utils/assets.js b/src/utils/assets.js
new file mode 100644
index 0000000..e2c153e
--- /dev/null
+++ b/src/utils/assets.js
@@ -0,0 +1,81 @@
+// 可交易资产的元数据映射
+export const ASSETS = {
+  USDC: { code: 'USDC', name: 'Mock USDC', symbol: 'mUSDC', decimals: 6 },
+  BOND: { code: 'BOND', name: 'Mock Bond', symbol: 'mBOND', decimals: 0 },
+}
+
+export const ASSET_OPTIONS = Object.values(ASSETS).map((asset) => ({
+  label: `${asset.name} (${asset.symbol})`,
+  value: asset.code,
+}))
+
+export function getAssetDecimals(code) {
+  if (!code) {
+    return 0
+  }
+  const normalizedCode = String(code).trim()
+  if (!normalizedCode) {
+    return 0
+  }
+
+  if (ASSETS[normalizedCode]) {
+    return ASSETS[normalizedCode].decimals
+  }
+
+  const upperCode = normalizedCode.toUpperCase()
+  if (ASSETS[upperCode]) {
+    return ASSETS[upperCode].decimals
+  }
+
+  const matchedBySymbol = Object.values(ASSETS).find(
+    (asset) =>
+      String(asset.symbol).toUpperCase() === upperCode ||
+      String(asset.code).toUpperCase() === upperCode,
+  )
+  return matchedBySymbol?.decimals ?? 0
+}
+
+// 将人类可读数量转换为对应 ERC-20 代币的最小单位整数
+export function toBaseUnits(amount, code) {
+  const decimals = getAssetDecimals(code)
+  return Math.round(Number(amount) * 10 ** decimals)
+}
+
+// 将最小单位整数转换为人类可读字符串（按资产 decimals 处理）
+export function fromBaseUnits(amount, code) {
+  if (amount === null || amount === undefined || amount === '') {
+    return '-'
+  }
+
+  const normalized = String(amount).trim()
+  if (!/^-?\d+$/.test(normalized)) {
+    return Number(amount).toLocaleString()
+  }
+
+  const negative = normalized.startsWith('-')
+  const unsigned = negative ? normalized.slice(1) : normalized
+  const decimals = getAssetDecimals(code)
+
+  if (decimals <= 0) {
+    return `${negative ? '-' : ''}${groupInteger(unsigned)}`
+  }
+
+  const padded = unsigned.padStart(decimals + 1, '0')
+  const integerPart = padded.slice(0, -decimals)
+  const fractionPart = padded.slice(-decimals).replace(/0+$/, '')
+  const groupedInteger = groupInteger(integerPart)
+
+  if (!fractionPart) {
+    return `${negative ? '-' : ''}${groupedInteger}`
+  }
+  return `${negative ? '-' : ''}${groupedInteger}.${fractionPart}`
+}
+
+export function formatAssetAmount(amount, code) {
+  return fromBaseUnits(amount, code)
+}
+
+function groupInteger(value) {
+  const sanitized = value.replace(/^0+(?=\d)/, '') || '0'
+  return sanitized.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 0f17ce5..eb6180e 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -20,9 +20,7 @@ export const useLocale = () => {
   }
 
   // 国际化翻译函数
-  const t = (key) => {
-    return i18n.t(key)
-  }
+  const t = (...args) => i18n.t(...args)
 
   // 当前tdesign语言配置
   const tdesignLang = computed(() => {
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
new file mode 100644
index 0000000..95fd0ca
--- /dev/null
+++ b/src/views/AccountView.vue
@@ -0,0 +1,330 @@
+<template>
+  <section class="account-page">
+    <div class="account-page__bg"></div>
+    <div class="account-page__inner">
+      <div class="account-page__header">
+        <h1>{{ t('account.title') }}</h1>
+        <p>{{ t('account.subtitle') }}</p>
+      </div>
+
+      <div class="account-layout">
+        <div class="account-card account-card--summary account-card--summary-grid">
+          <div class="summary">
+            <t-avatar size="96px" shape="circle" class="summary__avatar">
+              <template #icon>
+                <UserIcon />
+              </template>
+            </t-avatar>
+
+            <h2 class="summary__name">{{ profileDisplayName }}</h2>
+            <div class="summary__meta">
+              <t-tag theme="primary" variant="light-outline" shape="round">
+                {{ profileRole }}
+              </t-tag>
+              <t-tag theme="success" variant="light-outline" shape="round">
+                ID: {{ profileId }}
+              </t-tag>
+            </div>
+          </div>
+        </div>
+
+        <div class="account-card account-card--profile">
+          <div class="account-card__title">{{ t('account.profileCardTitle') }}</div>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.displayName') }}</span>
+              <span class="detail-item__value">{{ profileDisplayName }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.role') }}</span>
+              <span class="detail-item__value">{{ profileRole }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.accountId') }}</span>
+              <span class="detail-item__value detail-item__value-with-action">
+                <span>{{ profileId }}</span>
+                <t-tooltip :content="t('account.actions.copy')">
+                  <t-button
+                    variant="text"
+                    theme="default"
+                    size="small"
+                    @click="copyField(profileId, t('account.fields.accountId'))"
+                  >
+                    <template #icon>
+                      <CopyIcon />
+                    </template>
+                  </t-button>
+                </t-tooltip>
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.organizationCode') }}</span>
+              <span class="detail-item__value detail-item__value-with-action">
+                <span class="detail-item__value--nowrap">{{ organizationCode }}</span>
+                <t-tooltip :content="t('account.actions.copy')">
+                  <t-button
+                    variant="text"
+                    theme="default"
+                    size="small"
+                    @click="copyField(organizationCode, t('account.fields.organizationCode'))"
+                  >
+                    <template #icon>
+                      <CopyIcon />
+                    </template>
+                  </t-button>
+                </t-tooltip>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="account-card account-card--organization">
+          <div class="account-card__title">{{ t('account.organizationCardTitle') }}</div>
+          <div class="detail-grid detail-grid--org">
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.organizationId') }}</span>
+              <span class="detail-item__value">{{ organizationId }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-item__label">{{ t('account.fields.organizationName') }}</span>
+              <span class="detail-item__value">{{ organizationName }}</span>
+            </div>
+            <div class="detail-item detail-item--full">
+              <span class="detail-item__label">{{ t('account.fields.walletAddress') }}</span>
+              <span
+                class="detail-item__value detail-item__value-with-action detail-item__value--mono"
+              >
+                <span>{{ organizationWalletAddress }}</span>
+                <t-tooltip :content="t('account.actions.copy')">
+                  <t-button
+                    variant="text"
+                    theme="default"
+                    size="small"
+                    @click="copyField(organizationWalletAddress, t('account.fields.walletAddress'))"
+                  >
+                    <template #icon>
+                      <CopyIcon />
+                    </template>
+                  </t-button>
+                </t-tooltip>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { UserIcon, CopyIcon } from 'tdesign-icons-vue-next'
+import { MessagePlugin } from 'tdesign-vue-next'
+import { useAuthStore } from '@/stores/auth'
+import { useLocale } from '@/utils/i18n'
+
+const { t } = useLocale()
+const authStore = useAuthStore()
+
+const profile = computed(() => authStore.userProfile || {})
+const organization = computed(() => profile.value.organization || {})
+
+const profileId = computed(() => profile.value.id ?? '-')
+const profileDisplayName = computed(() => profile.value.displayName || '-')
+const profileRole = computed(() => profile.value.role || '-')
+
+const organizationId = computed(() => organization.value.id ?? '-')
+const organizationCode = computed(() => organization.value.code || '-')
+const organizationName = computed(() => organization.value.name || '-')
+const organizationWalletAddress = computed(() => organization.value.walletAddress || '-')
+
+async function copyField(value, label) {
+  if (!value || value === '-') {
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(String(value))
+    MessagePlugin.success(t('account.msg.copySuccess', { label }))
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('account.msg.copyFailed'))
+  }
+}
+</script>
+
+<style scoped>
+.account-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.account-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.account-page__inner {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.account-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.6fr);
+  grid-template-areas:
+    'summary profile'
+    'organization organization';
+  gap: 1rem;
+}
+
+.account-page__header {
+  margin-bottom: 1rem;
+}
+
+.account-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.account-page__header p {
+  margin: 0.5rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.account-card {
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(from var(--td-bg-color-container) r g b / 0.98),
+    rgba(from var(--td-bg-color-container) r g b / 0.92)
+  );
+  padding: 2rem;
+}
+
+.account-card__title {
+  margin: 0 0 0.875rem;
+  font: var(--td-font-title-medium);
+  color: var(--td-text-color-primary);
+}
+
+.account-card--summary {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.account-card--summary-grid {
+  grid-area: summary;
+}
+
+.account-card--profile {
+  grid-area: profile;
+}
+
+.account-card--organization {
+  grid-area: organization;
+}
+
+.summary {
+  min-height: 210px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.summary__avatar {
+  background: linear-gradient(135deg, var(--td-brand-color-6), var(--td-brand-color-5));
+  color: var(--td-text-color-anti);
+}
+
+.summary__name {
+  margin: 0;
+  font: var(--td-font-title-large);
+  color: var(--td-text-color-primary);
+  text-align: center;
+}
+
+.summary__meta {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.detail-item {
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--td-component-border);
+  border-radius: 14px;
+  background: var(--td-bg-color-page);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item--full {
+  grid-column: 1 / -1;
+}
+
+.detail-item__label {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-secondary);
+}
+
+.detail-item__value {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  word-break: break-word;
+}
+
+.detail-item__value-with-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.detail-item__value--nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-item__value--mono {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .summary {
+    min-height: 180px;
+  }
+}
+</style>
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 1580f1c..7c2a60a 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -1 +1,838 @@
-<template>dashboard</template>
+<template>
+  <section class="dashboard-page">
+    <div class="dashboard-page__bg"></div>
+    <div class="dashboard-page__inner">
+      <div class="dashboard-page__header">
+        <h1>{{ t('dashboard.title') }}</h1>
+        <p>{{ t('dashboard.subtitle') }}</p>
+      </div>
+
+      <div class="dashboard-grid">
+        <div class="forecast-card">
+          <div class="forecast-card__title-row">
+            <div class="forecast-card__title">
+              <TaskTimeIcon /> {{ t('dashboard.forecast.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="loading"
+                @click="fetchForecast"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="forecast-card__desc">{{ t('dashboard.forecast.desc') }}</p>
+
+          <div class="forecast-body">
+            <div class="block-visual">
+              <span ref="blockCoreRef" class="block-visual__core active">
+                <LayersIcon size="28px" />
+              </span>
+              <span class="block-visual__label">
+                {{ t('dashboard.forecast.active') }}
+              </span>
+            </div>
+
+            <div class="stat-grid">
+              <div class="stat-item">
+                <span class="stat-item__label">
+                  <RootListIcon /> {{ t('dashboard.forecast.windowId') }}
+                </span>
+                <span v-if="loading" class="stat-item__value stat-item__value--loading">
+                  <t-skeleton theme="text" animation="gradient" />
+                </span>
+                <span v-else class="stat-item__value">{{ forecast.windowId ?? '-' }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-item__label">
+                  <ChartRing1Icon /> {{ t('dashboard.forecast.settlementBlock') }}
+                </span>
+                <span v-if="loading" class="stat-item__value stat-item__value--loading">
+                  <t-skeleton theme="text" animation="gradient" />
+                </span>
+                <span v-else class="stat-item__value">{{ forecast.settlementBlock ?? '-' }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-item__label">
+                  <HourglassIcon /> {{ t('dashboard.forecast.blocksRemaining') }}
+                </span>
+                <span v-if="loading" class="stat-item__value stat-item__value--loading">
+                  <t-skeleton theme="text" animation="gradient" />
+                </span>
+                <span v-else class="stat-item__value">
+                  <template v-if="forecast.blocksRemaining === 0">
+                    {{ t('dashboard.forecast.reached') }}
+                  </template>
+                  <template v-else>
+                    {{ forecast.blocksRemaining ?? '-' }}
+                    <span v-if="forecast.blocksRemaining != null" class="stat-item__unit">{{
+                      t('dashboard.forecast.blocksUnit')
+                    }}</span>
+                  </template>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <p class="forecast-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: lastUpdatedText }) }}
+          </p>
+        </div>
+
+        <div class="panel-card">
+          <div class="panel-card__title-row">
+            <div class="panel-card__title">
+              <WalletIcon /> {{ t('dashboard.accountBalances.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="overviewLoading"
+                @click="fetchOverview"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="panel-card__desc">{{ t('dashboard.accountBalances.desc') }}</p>
+
+          <t-skeleton
+            v-if="overviewLoading"
+            theme="paragraph"
+            animation="gradient"
+            :row-col="[{ width: '100%' }, { width: '88%' }, { width: '76%' }]"
+            class="panel-card__data-skeleton"
+          />
+          <t-empty
+            v-else-if="!overview.balances?.length"
+            :description="t('dashboard.accountBalances.empty')"
+          />
+          <ul v-else class="asset-list">
+            <li
+              v-for="item in overview.balances"
+              :key="item.asset.address"
+              class="asset-list__item"
+            >
+              <span class="asset-list__address">{{
+                item.asset.name || formatAsset(item.asset)
+              }}</span>
+              <span class="asset-list__amounts">
+                <span class="asset-list__amount">
+                  {{ t('dashboard.accountBalances.balance') }}:
+                  {{ formatAssetAmount(item.amount, item.asset) }}
+                  {{ item.asset.symbol }}
+                </span>
+              </span>
+            </li>
+          </ul>
+          <p class="panel-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: overviewLastUpdatedText }) }}
+          </p>
+        </div>
+
+        <div class="panel-card">
+          <div class="panel-card__title-row">
+            <div class="panel-card__title">
+              <ChartBarIcon /> {{ t('dashboard.cumulativeTradeCount.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="overviewLoading"
+                @click="fetchOverview"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="panel-card__desc">{{ t('dashboard.cumulativeTradeCount.desc') }}</p>
+          <div class="overview-stat overview-stat--standalone">
+            <span class="overview-stat__label">
+              {{ t('dashboard.cumulativeTradeCount.label') }}
+            </span>
+            <t-skeleton
+              v-if="overviewLoading"
+              theme="text"
+              animation="gradient"
+              class="overview-stat__skeleton"
+            />
+            <span v-else class="overview-stat__value">
+              {{ formatAmount(overview.cumulativeTradeCount) }}
+            </span>
+          </div>
+          <p class="panel-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: overviewLastUpdatedText }) }}
+          </p>
+        </div>
+
+        <div class="panel-card">
+          <div class="panel-card__title-row">
+            <div class="panel-card__title">
+              <CurrencyExchangeIcon /> {{ t('dashboard.settlementNetAmounts.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="overviewLoading"
+                @click="fetchOverview"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="panel-card__desc">{{ t('dashboard.settlementNetAmounts.desc') }}</p>
+
+          <t-skeleton
+            v-if="overviewLoading"
+            theme="paragraph"
+            animation="gradient"
+            :row-col="[{ width: '100%' }, { width: '88%' }, { width: '76%' }]"
+            class="panel-card__data-skeleton"
+          />
+          <t-empty
+            v-else-if="!overview.netAmounts?.length"
+            :description="t('dashboard.settlementNetAmounts.empty')"
+          />
+          <ul v-else class="asset-list">
+            <li
+              v-for="item in overview.netAmounts"
+              :key="item.asset.address"
+              class="asset-list__item"
+            >
+              <span class="asset-list__address">{{
+                item.asset.name || formatAsset(item.asset)
+              }}</span>
+              <span class="asset-list__amounts">
+                <span
+                  class="asset-list__amount"
+                  :class="
+                    Number(item.amount) < 0
+                      ? 'asset-list__amount--negative'
+                      : 'asset-list__amount--positive'
+                  "
+                >
+                  {{ t('dashboard.settlementNetAmounts.amount') }}:
+                  {{ formatAssetAmount(item.amount, item.asset) }}
+                  {{ item.asset.symbol }}
+                </span>
+              </span>
+            </li>
+          </ul>
+          <p class="panel-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: overviewLastUpdatedText }) }}
+          </p>
+        </div>
+
+        <div class="panel-card">
+          <div class="panel-card__title-row">
+            <div class="panel-card__title">
+              <ChartAnalyticsIcon /> {{ t('dashboard.cumulativeTradeAmounts.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="overviewLoading"
+                @click="fetchOverview"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="panel-card__desc">{{ t('dashboard.cumulativeTradeAmounts.desc') }}</p>
+
+          <t-skeleton
+            v-if="overviewLoading"
+            theme="paragraph"
+            animation="gradient"
+            :row-col="[{ width: '100%' }, { width: '88%' }, { width: '76%' }]"
+            class="panel-card__data-skeleton"
+          />
+          <t-empty
+            v-else-if="!overview.cumulativeGrossTradeAmounts?.length"
+            :description="t('dashboard.cumulativeTradeAmounts.empty')"
+          />
+          <ul v-else class="asset-list">
+            <li
+              v-for="item in overview.cumulativeGrossTradeAmounts"
+              :key="item.asset.address"
+              class="asset-list__item"
+            >
+              <span class="asset-list__address">{{
+                item.asset.name || formatAsset(item.asset)
+              }}</span>
+              <span class="asset-list__amounts">
+                <span class="asset-list__amount">
+                  {{ t('dashboard.cumulativeTradeAmounts.amount') }}:
+                  {{ formatAssetAmount(item.amount, item.asset) }}
+                  {{ item.asset.symbol }}
+                </span>
+              </span>
+            </li>
+          </ul>
+          <p class="panel-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: overviewLastUpdatedText }) }}
+          </p>
+        </div>
+
+        <div class="panel-card">
+          <div class="panel-card__title-row">
+            <div class="panel-card__title">
+              <MoneyIcon /> {{ t('dashboard.liquidityBufferDebts.title') }}
+            </div>
+            <t-tooltip :content="t('dashboard.forecast.refresh')">
+              <t-button
+                variant="text"
+                theme="default"
+                size="small"
+                :loading="overviewLoading"
+                @click="fetchOverview"
+              >
+                <template #icon>
+                  <RefreshIcon />
+                </template>
+              </t-button>
+            </t-tooltip>
+          </div>
+          <p class="panel-card__desc">{{ t('dashboard.liquidityBufferDebts.desc') }}</p>
+
+          <t-skeleton
+            v-if="overviewLoading"
+            theme="paragraph"
+            animation="gradient"
+            :row-col="[{ width: '100%' }, { width: '88%' }, { width: '76%' }]"
+            class="panel-card__data-skeleton"
+          />
+          <t-empty
+            v-else-if="!overview.liquidityBufferDebts?.length"
+            :description="t('dashboard.liquidityBufferDebts.empty')"
+          />
+          <ul v-else class="asset-list">
+            <li
+              v-for="item in overview.liquidityBufferDebts"
+              :key="item.asset.address"
+              class="asset-list__item"
+            >
+              <span class="asset-list__address">{{
+                item.asset.name || formatAsset(item.asset)
+              }}</span>
+              <span class="asset-list__amounts">
+                <span class="asset-list__amount">
+                  {{ t('dashboard.liquidityBufferDebts.amount') }}:
+                  {{ formatAssetAmount(item.amount, item.asset) }}
+                  {{ item.asset.symbol }}
+                </span>
+              </span>
+            </li>
+          </ul>
+          <p class="panel-card__footer">
+            {{ t('dashboard.forecast.lastUpdated.label', { time: overviewLastUpdatedText }) }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import gsap from 'gsap'
+import { MessagePlugin } from 'tdesign-vue-next'
+import {
+  RefreshIcon,
+  LayersIcon,
+  RootListIcon,
+  ChartRing1Icon,
+  HourglassIcon,
+  TaskTimeIcon,
+  WalletIcon,
+  ChartBarIcon,
+  CurrencyExchangeIcon,
+  ChartAnalyticsIcon,
+  MoneyIcon,
+} from 'tdesign-icons-vue-next'
+import api from '@/utils/api'
+import { formatAssetAmount as formatBaseUnitAssetAmount } from '@/utils/assets'
+import { useLocale } from '@/utils/i18n'
+
+const { t } = useLocale()
+
+const forecast = ref({
+  windowId: null,
+  settlementBlock: null,
+  blocksRemaining: null,
+})
+const loading = ref(false)
+const lastUpdatedAt = ref(null)
+const currentTime = ref(new Date())
+
+const blockCoreRef = ref(null)
+
+const lastUpdatedText = computed(() => formatRelativeTime(lastUpdatedAt.value))
+
+const GLOW_OFF = '0 0 0px 0px rgba(0, 168, 112, 0)'
+const GLOW_ON = '0 0 26px 8px rgba(0, 168, 112, 0.65)'
+
+let breatheTimeline = null
+let pollTimer = null
+let clockTimer = null
+
+function startBreathing() {
+  breatheTimeline?.kill()
+  if (!blockCoreRef.value) {
+    return
+  }
+  gsap.set(blockCoreRef.value, { boxShadow: GLOW_OFF, scale: 1 })
+  breatheTimeline = gsap.timeline({
+    repeat: -1,
+    yoyo: true,
+    defaults: { duration: 1.4, ease: 'sine.inOut' },
+  })
+  breatheTimeline.to(blockCoreRef.value, { boxShadow: GLOW_ON, scale: 1.06 })
+}
+
+function stopBreathing() {
+  breatheTimeline?.kill()
+  breatheTimeline = null
+  if (blockCoreRef.value) {
+    gsap.set(blockCoreRef.value, { boxShadow: GLOW_OFF, scale: 1 })
+  }
+}
+
+async function fetchForecast() {
+  loading.value = true
+  try {
+    const res = await api({
+      method: 'get',
+      url: '/dashboard/settlement-window-forecast',
+    })
+    if (res.data.code === 200) {
+      forecast.value = res.data.data
+      lastUpdatedAt.value = new Date()
+    } else {
+      throw new Error(res.data.msg)
+    }
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('dashboard.forecast.msg.fetchFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatRelativeTime(date) {
+  if (!date) {
+    return '-'
+  }
+  const diffSeconds = Math.floor((currentTime.value - date) / 1000)
+  if (diffSeconds < 60) {
+    return t('dashboard.forecast.lastUpdated.justNow')
+  } else if (diffSeconds < 3600) {
+    return t('dashboard.forecast.lastUpdated.minutesAgo', { minutes: Math.floor(diffSeconds / 60) })
+  } else if (diffSeconds < 86400) {
+    return t('dashboard.forecast.lastUpdated.hoursAgo', { hours: Math.floor(diffSeconds / 3600) })
+  } else {
+    return t('dashboard.forecast.lastUpdated.daysAgo', { days: Math.floor(diffSeconds / 86400) })
+  }
+}
+
+function shortenAddress(address) {
+  if (!address || address.length <= 12) {
+    return address ?? '-'
+  }
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
+
+function formatAsset(asset) {
+  if (!asset) {
+    return '-'
+  }
+  return asset.symbol || shortenAddress(asset.address)
+}
+
+function formatAmount(amount) {
+  if (amount === null || amount === undefined) {
+    return '-'
+  }
+  return Number(amount).toLocaleString()
+}
+
+function formatAssetAmount(amount, asset) {
+  return formatBaseUnitAssetAmount(amount, asset?.code || asset?.symbol)
+}
+
+const overview = ref({
+  balances: [],
+  netAmounts: [],
+  cumulativeGrossTradeAmounts: [],
+  liquidityBufferDebts: [],
+})
+const overviewLoading = ref(false)
+const overviewLastUpdatedAt = ref(null)
+const overviewLastUpdatedText = computed(() => formatRelativeTime(overviewLastUpdatedAt.value))
+
+async function fetchOverview() {
+  overviewLoading.value = true
+  try {
+    const res = await api({ method: 'get', url: '/dashboard/overview' })
+    if (res.data.code === 200) {
+      overview.value = res.data.data
+      overviewLastUpdatedAt.value = res.data.time ? new Date(res.data.time * 1000) : new Date()
+    } else {
+      throw new Error(res.data.msg)
+    }
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('dashboard.overview.msg.fetchFailed'))
+  } finally {
+    overviewLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  clockTimer = setInterval(() => {
+    currentTime.value = new Date()
+  }, 1000)
+  await Promise.all([fetchForecast(), fetchOverview()])
+  startBreathing()
+  pollTimer = setInterval(fetchForecast, 60 * 1000)
+})
+
+onBeforeUnmount(() => {
+  stopBreathing()
+  if (pollTimer) {
+    clearInterval(pollTimer)
+  }
+  if (clockTimer) {
+    clearInterval(clockTimer)
+  }
+})
+</script>
+
+<style scoped>
+.dashboard-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.dashboard-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.dashboard-page__inner {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.dashboard-page__header {
+  margin-bottom: 1rem;
+}
+
+.dashboard-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.dashboard-page__header p {
+  margin: 0.25rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.forecast-card {
+  position: relative;
+  grid-column: span 2;
+  padding: 2rem;
+  border-radius: 28px;
+  background-color: var(--td-bg-color-container);
+  border: 1px solid var(--td-component-stroke);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+@media (max-width: 678px) {
+  .forecast-card {
+    grid-column: span 1;
+  }
+}
+
+.forecast-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.forecast-card__title {
+  font: var(--td-font-title-large);
+  color: var(--td-text-color-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.forecast-card__desc {
+  margin: 0.25rem 0 1.5rem;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.forecast-body {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.block-visual {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding: 1rem;
+}
+
+.block-visual__core {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 20px;
+  background-color: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-placeholder);
+  box-shadow: 0 0 0px 0px rgba(0, 168, 112, 0);
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease;
+}
+
+.block-visual__core.active {
+  background-color: rgba(from var(--td-success-color-6) r g b / 0.14);
+  color: var(--td-success-color-6);
+}
+
+.block-visual__label {
+  font: var(--td-font-body-small);
+  color: var(--td-success-color-6);
+  min-height: 1.2em;
+}
+
+.stat-grid {
+  flex: 1;
+  display: grid;
+  gap: 0.9rem;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  height: 1.5rem;
+}
+
+.stat-item__label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.stat-item__value {
+  font: var(--td-font-title-medium);
+  font-family: 'TCloudNumber', var(--td-font-family);
+  color: var(--td-text-color-primary);
+}
+
+.stat-item__unit {
+  margin-left: 0.25rem;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.forecast-card__footer {
+  margin: 1.25rem 0 0;
+  text-align: right;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.panel-card {
+  padding: 2rem;
+  border-radius: 28px;
+  background-color: var(--td-bg-color-container);
+  border: 1px solid var(--td-component-stroke);
+}
+
+.panel-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-card__title {
+  font: var(--td-font-title-large);
+  color: var(--td-text-color-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.panel-card__desc {
+  margin: 0.25rem 0 1.5rem;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.overview-stat {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 14px;
+  background-color: var(--td-bg-color-secondarycontainer);
+}
+
+.overview-stat__label {
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-secondary);
+}
+
+.overview-stat__value {
+  font: var(--td-font-title-medium);
+  font-family: 'TCloudNumber', var(--td-font-family);
+  color: var(--td-text-color-primary);
+}
+
+.overview-stat__skeleton {
+  width: 4rem;
+}
+
+.overview-stat--standalone {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  padding: 1.25rem 1rem;
+}
+
+.overview-stat--standalone .overview-stat__value {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--td-text-color-primary);
+}
+
+.panel-card__footer {
+  margin: 1.25rem 0 0;
+  text-align: right;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.panel-card__data-skeleton {
+  min-height: 6.5rem;
+}
+
+.stat-item__value--loading {
+  width: 7rem;
+}
+
+.asset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.asset-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.85rem 1rem;
+  border-radius: 14px;
+  background-color: var(--td-bg-color-secondarycontainer);
+}
+
+.asset-list__address {
+  font-family: var(--td-font-family, monospace);
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+}
+
+.asset-list__amounts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.25rem;
+}
+
+.asset-list__amount {
+  font: var(--td-font-body-small);
+  font-family: 'TCloudNumber', var(--td-font-family);
+  color: var(--td-text-color-secondary);
+}
+
+.asset-list__amount--payable {
+  color: var(--td-error-color-6);
+}
+
+.asset-list__amount--receivable {
+  color: var(--td-success-color-6);
+}
+
+.asset-list__amount--negative {
+  color: var(--td-error-color-6);
+}
+
+.asset-list__amount--positive {
+  color: var(--td-success-color-6);
+}
+</style>
diff --git a/src/views/SendView.vue b/src/views/SendView.vue
new file mode 100644
index 0000000..c6c5d68
--- /dev/null
+++ b/src/views/SendView.vue
@@ -0,0 +1,444 @@
+<template>
+  <section class="send-page">
+    <div class="send-page__bg"></div>
+    <div class="send-page__inner">
+      <div class="send-page__header">
+        <h1>{{ t('send.title') }}</h1>
+        <p>{{ t('send.subtitle') }}</p>
+      </div>
+
+      <div class="send-layout">
+        <div class="send-card send-card--form">
+          <div class="send-card__title">{{ t('send.form.title') }}</div>
+          <p class="send-card__desc">{{ t('send.form.desc') }}</p>
+
+          <t-form :data="form" layout="vertical" @submit.prevent>
+            <t-form-item :label="t('send.form.counterparty')">
+              <t-select
+                v-model="form.receiverOrganizationId"
+                filterable
+                clearable
+                :loading="orgLoading"
+                :placeholder="t('send.form.counterpartyPlaceholder')"
+                :empty="t('send.form.counterpartyEmpty')"
+                :options="organizationOptions"
+              />
+            </t-form-item>
+
+            <div class="asset-group">
+              <div class="asset-group__label">{{ t('send.form.youSend') }}</div>
+              <div class="asset-group__row">
+                <t-select
+                  v-model="form.sendAsset"
+                  class="asset-group__asset"
+                  :options="assetOptions"
+                />
+                <t-input-number
+                  v-model="form.sendAmount"
+                  class="asset-group__amount"
+                  theme="normal"
+                  :min="0"
+                  :decimalPlaces="sendDecimals"
+                  :placeholder="t('send.form.amountPlaceholder')"
+                />
+              </div>
+            </div>
+
+            <div class="asset-group">
+              <div class="asset-group__label">{{ t('send.form.youReceive') }}</div>
+              <div class="asset-group__row">
+                <t-select
+                  v-model="form.receiveAsset"
+                  class="asset-group__asset"
+                  :options="assetOptions"
+                />
+                <t-input-number
+                  v-model="form.receiveAmount"
+                  class="asset-group__amount"
+                  theme="normal"
+                  :min="0"
+                  :decimalPlaces="receiveDecimals"
+                  :placeholder="t('send.form.amountPlaceholder')"
+                />
+              </div>
+            </div>
+
+            <div class="send-card__actions">
+              <t-button variant="outline" theme="default" :disabled="submitting" @click="resetForm">
+                {{ t('send.form.reset') }}
+              </t-button>
+              <t-button theme="primary" :loading="submitting" @click="submitTransaction">
+                {{ t('send.form.submit') }}
+              </t-button>
+            </div>
+          </t-form>
+        </div>
+
+        <div class="send-card send-card--visual">
+          <div class="send-card__title">{{ t('send.visual.title') }}</div>
+          <p class="send-card__desc">{{ t('send.visual.desc') }}</p>
+
+          <TradeVisual
+            :from-name="currentOrganizationName"
+            :from-role="t('send.visual.you')"
+            :to-name="selectedOrganization?.name"
+            :to-placeholder="t('send.visual.counterpartyPlaceholder')"
+            :to-role="t('send.visual.counterparty')"
+            :send-asset="form.sendAsset"
+            :send-amount="form.sendAmount"
+            :send-label="t('send.visual.send')"
+            :receive-asset="form.receiveAsset"
+            :receive-amount="form.receiveAmount"
+            :receive-label="t('send.visual.receive')"
+            :amount-in-base-units="false"
+          />
+        </div>
+      </div>
+    </div>
+
+    <t-dialog
+      v-model:visible="successVisible"
+      :header="t('send.success.title')"
+      :close-btn="true"
+      :footer="false"
+      width="420px"
+    >
+      <div class="result-dialog">
+        <CheckCircleFilledIcon
+          size="48px"
+          class="result-dialog__icon result-dialog__icon--success"
+        />
+        <p class="result-dialog__desc">{{ t('send.success.desc') }}</p>
+        <p v-if="lastTransaction" class="result-dialog__meta">
+          {{ t('send.success.transactionId') }}: #{{ lastTransaction.id }}
+        </p>
+        <div class="result-dialog__actions">
+          <t-button variant="outline" theme="default" @click="handleSendAnother">
+            {{ t('send.success.again') }}
+          </t-button>
+          <t-button theme="primary" @click="handleViewDetail">
+            {{ t('send.success.viewDetail') }}
+          </t-button>
+        </div>
+      </div>
+    </t-dialog>
+
+    <t-dialog
+      v-model:visible="failureVisible"
+      :header="t('send.failure.title')"
+      :close-btn="true"
+      :footer="false"
+      width="420px"
+    >
+      <div class="result-dialog">
+        <ErrorCircleFilledIcon
+          size="48px"
+          class="result-dialog__icon result-dialog__icon--failure"
+        />
+        <p class="result-dialog__desc">{{ failureReason }}</p>
+        <div class="result-dialog__actions">
+          <t-button variant="outline" theme="default" @click="failureVisible = false">
+            {{ t('send.failure.close') }}
+          </t-button>
+          <t-button theme="primary" @click="handleRetry">
+            {{ t('send.failure.retry') }}
+          </t-button>
+        </div>
+      </div>
+    </t-dialog>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { MessagePlugin } from 'tdesign-vue-next'
+import { CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next'
+import api from '@/utils/api'
+import { useLocale } from '@/utils/i18n'
+import { useAuthStore } from '@/stores/auth'
+import TradeVisual from '@/components/TradeVisual.vue'
+import { ASSET_OPTIONS, getAssetDecimals, toBaseUnits } from '@/utils/assets'
+
+const { t } = useLocale()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const assetOptions = ASSET_OPTIONS
+
+const organizations = ref([])
+const orgLoading = ref(false)
+
+const form = reactive({
+  receiverOrganizationId: null,
+  sendAsset: 'USDC',
+  sendAmount: null,
+  receiveAsset: 'BOND',
+  receiveAmount: null,
+})
+
+const submitting = ref(false)
+const successVisible = ref(false)
+const failureVisible = ref(false)
+const lastTransaction = ref(null)
+const failureReason = ref('')
+
+const sendDecimals = computed(() => getAssetDecimals(form.sendAsset))
+const receiveDecimals = computed(() => getAssetDecimals(form.receiveAsset))
+
+const organizationOptions = computed(() =>
+  organizations.value.map((org) => ({
+    label: `${org.name} (${org.code})`,
+    value: org.id,
+  })),
+)
+
+const selectedOrganization = computed(() =>
+  organizations.value.find((org) => org.id === form.receiverOrganizationId),
+)
+
+const currentOrganizationName = computed(() => authStore.userProfile?.organization?.name || '-')
+
+async function fetchOrganizations() {
+  orgLoading.value = true
+  try {
+    const res = await api({ method: 'get', url: '/transactions/organizations' })
+    if (res.data.code === 200) {
+      organizations.value = res.data.data
+    } else {
+      throw new Error(res.data.msg)
+    }
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('send.msg.fetchOrganizationsFailed'))
+  } finally {
+    orgLoading.value = false
+  }
+}
+
+function validateForm() {
+  if (!form.receiverOrganizationId) {
+    MessagePlugin.warning(t('send.msg.validation.counterparty'))
+    return false
+  }
+  if (!(Number(form.sendAmount) > 0)) {
+    MessagePlugin.warning(t('send.msg.validation.sendAmount'))
+    return false
+  }
+  if (!(Number(form.receiveAmount) > 0)) {
+    MessagePlugin.warning(t('send.msg.validation.receiveAmount'))
+    return false
+  }
+  return true
+}
+
+function resolveFailureReason(code, msg) {
+  const key = `send.errors.${code}`
+  const translated = t(key)
+  return translated === key ? msg : translated
+}
+
+async function submitTransaction() {
+  if (!validateForm()) {
+    return
+  }
+  submitting.value = true
+  try {
+    const res = await api({
+      method: 'post',
+      url: '/transactions/send',
+      data: {
+        receiverOrganizationId: form.receiverOrganizationId,
+        send: {
+          asset: form.sendAsset,
+          amount: toBaseUnits(form.sendAmount, form.sendAsset),
+        },
+        receive: {
+          asset: form.receiveAsset,
+          amount: toBaseUnits(form.receiveAmount, form.receiveAsset),
+        },
+      },
+    })
+    if (res.data.code === 200) {
+      lastTransaction.value = res.data.data
+      successVisible.value = true
+    } else {
+      failureReason.value = resolveFailureReason(res.data.code, res.data.msg)
+      failureVisible.value = true
+    }
+  } catch (e) {
+    console.error(e)
+    failureReason.value = e.response?.data?.msg || t('send.msg.submitFailed')
+    failureVisible.value = true
+  } finally {
+    submitting.value = false
+  }
+}
+
+function resetForm() {
+  form.receiverOrganizationId = null
+  form.sendAsset = 'USDC'
+  form.sendAmount = null
+  form.receiveAsset = 'BOND'
+  form.receiveAmount = null
+}
+
+function handleSendAnother() {
+  successVisible.value = false
+  resetForm()
+}
+
+function handleViewDetail() {
+  successVisible.value = false
+  if (lastTransaction.value) {
+    router.push({ path: '/transactions', query: { id: lastTransaction.value.id } })
+  } else {
+    router.push('/transactions')
+  }
+}
+
+function handleRetry() {
+  failureVisible.value = false
+  submitTransaction()
+}
+
+onMounted(() => {
+  fetchOrganizations()
+})
+</script>
+
+<style scoped>
+.send-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.send-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.send-page__inner {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.send-page__header {
+  margin-bottom: 1rem;
+}
+
+.send-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.send-page__header p {
+  margin: 0.25rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.send-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 1.5rem;
+}
+
+.send-card {
+  padding: 2rem;
+  border-radius: 28px;
+  background-color: var(--td-bg-color-container);
+  border: 1px solid var(--td-component-stroke);
+}
+
+.send-card__title {
+  font: var(--td-font-title-large);
+  color: var(--td-text-color-primary);
+}
+
+.send-card__desc {
+  margin: 0.25rem 0 1.5rem;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.asset-group {
+  margin-bottom: 1.25rem;
+}
+
+.asset-group__label {
+  margin-bottom: 0.5rem;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.asset-group__row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.asset-group__asset {
+  flex: 0 0 130px;
+}
+
+.asset-group__amount {
+  flex: 1;
+}
+
+.send-card__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.result-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0 1rem;
+  text-align: center;
+}
+
+.result-dialog__icon--success {
+  color: var(--td-success-color-6);
+}
+
+.result-dialog__icon--failure {
+  color: var(--td-error-color-6);
+}
+
+.result-dialog__desc {
+  margin: 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+}
+
+.result-dialog__meta {
+  margin: 0;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-placeholder);
+}
+
+.result-dialog__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/views/TransactionDetailView.vue b/src/views/TransactionDetailView.vue
new file mode 100644
index 0000000..7639867
--- /dev/null
+++ b/src/views/TransactionDetailView.vue
@@ -0,0 +1,84 @@
+<template>
+  <section class="transaction-detail-page">
+    <div class="transaction-detail-page__bg"></div>
+    <div class="transaction-detail-page__inner">
+      <div class="transaction-detail-page__header">
+        <t-link
+          theme="primary"
+          hover="color"
+          class="transaction-detail-page__back"
+          @click="router.back()"
+        >
+          <template #prefixIcon><ChevronLeftIcon /></template>
+          {{ t('transactionDetail.back') }}
+        </t-link>
+        <h1>{{ t('transactionDetail.title') }} #{{ route.params.id }}</h1>
+        <p>{{ t('transactionDetail.subtitle') }}</p>
+      </div>
+
+      <TransactionDetailPanel :transaction-id="route.params.id" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+import { ChevronLeftIcon } from 'tdesign-icons-vue-next'
+import { useLocale } from '@/utils/i18n'
+import TransactionDetailPanel from '@/components/TransactionDetailPanel.vue'
+
+const { t } = useLocale()
+const route = useRoute()
+const router = useRouter()
+</script>
+
+<style scoped>
+.transaction-detail-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.transaction-detail-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.transaction-detail-page__inner {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.transaction-detail-page__header {
+  margin-bottom: 1rem;
+}
+
+.transaction-detail-page__back {
+  margin-bottom: 0.5rem;
+}
+
+.transaction-detail-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.transaction-detail-page__header p {
+  margin: 0.5rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+</style>
diff --git a/src/views/TransactionsView.vue b/src/views/TransactionsView.vue
new file mode 100644
index 0000000..1a1420c
--- /dev/null
+++ b/src/views/TransactionsView.vue
@@ -0,0 +1,214 @@
+<template>
+  <section class="transactions-page">
+    <div class="transactions-page__bg"></div>
+    <div class="transactions-page__inner">
+      <div class="transactions-page__header">
+        <h1>{{ t('transactions.title') }}</h1>
+        <p>{{ t('transactions.subtitle') }}</p>
+      </div>
+
+      <div class="transactions-card">
+        <div class="transactions-card__toolbar">
+          <t-radio-group v-model="isRelated" variant="default-filled" @change="fetchTransactions">
+            <t-radio-button :value="false">{{ t('transactions.filter.all') }}</t-radio-button>
+            <t-radio-button :value="true">{{ t('transactions.filter.related') }}</t-radio-button>
+          </t-radio-group>
+        </div>
+
+        <t-table
+          :data="list"
+          :columns="columns"
+          :loading="loading"
+          row-key="id"
+          :empty="t('transactions.empty')"
+          table-layout="auto"
+          hover
+        >
+          <template #createdBy="{ row }">
+            {{ formatOrganization(row.createdBy) }}
+          </template>
+          <template #senderOrganization="{ row }">
+            {{ formatOrganization(row.senderOrganization) }}
+          </template>
+          <template #send="{ row }">
+            {{ formatAmount(row.send?.amount, row.send?.asset) }} {{ row.send?.asset?.symbol }}
+          </template>
+          <template #receiverOrganization="{ row }">
+            {{ formatOrganization(row.receiverOrganization) }}
+          </template>
+          <template #receive="{ row }">
+            {{ formatAmount(row.receive?.amount, row.receive?.asset) }}
+            {{ row.receive?.asset?.symbol }}
+          </template>
+          <template #status="{ row }">
+            <t-tag :theme="statusTheme(row.status)" variant="light-outline" shape="round">
+              {{ t(`transactions.status.${row.status}`) }}
+            </t-tag>
+          </template>
+          <template #createdAt="{ row }">
+            {{ formatDateTime(row.createdAt) }}
+          </template>
+          <template #settledAt="{ row }">
+            {{ row.settledAt ? formatDateTime(row.settledAt) : '-' }}
+          </template>
+          <template #operation="{ row }">
+            <t-link theme="primary" hover="color" @click="viewTransaction(row.id)">
+              {{ t('transactions.action.view') }}
+            </t-link>
+          </template>
+        </t-table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { MessagePlugin } from 'tdesign-vue-next'
+import api from '@/utils/api'
+import { formatAssetAmount } from '@/utils/assets'
+import { useLocale } from '@/utils/i18n'
+
+const { t } = useLocale()
+const router = useRouter()
+
+const list = ref([])
+const loading = ref(false)
+const isRelated = ref(false)
+
+const columns = [
+  { colKey: 'id', title: t('transactions.table.id'), width: 90 },
+  { colKey: 'createdBy', title: t('transactions.table.createdBy') },
+  { colKey: 'senderOrganization', title: t('transactions.table.sender') },
+  { colKey: 'send', title: t('transactions.table.send') },
+  { colKey: 'receiverOrganization', title: t('transactions.table.receiver') },
+  { colKey: 'receive', title: t('transactions.table.receive') },
+  { colKey: 'status', title: t('transactions.table.status') },
+  { colKey: 'chainId', title: t('transactions.table.chainId'), width: 100 },
+  { colKey: 'windowId', title: t('transactions.table.windowId'), width: 100 },
+  { colKey: 'createdAt', title: t('transactions.table.createdAt') },
+  { colKey: 'settledAt', title: t('transactions.table.settledAt') },
+  { colKey: 'operation', title: t('transactions.table.operation'), width: 90, fixed: 'right' },
+]
+
+function formatOrganization(org) {
+  if (!org) {
+    return '-'
+  }
+  return org.name || org.code || '-'
+}
+
+function formatAmount(amount, asset) {
+  return formatAssetAmount(amount, asset?.code || asset?.symbol)
+}
+
+function formatDateTime(timestamp) {
+  if (!timestamp) {
+    return '-'
+  }
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+function statusTheme(status) {
+  switch (status) {
+    case 'settled':
+      return 'success'
+    case 'failed':
+      return 'danger'
+    default:
+      return 'warning'
+  }
+}
+
+function viewTransaction(id) {
+  router.push(`/transactions/${id}`)
+}
+
+async function fetchTransactions() {
+  loading.value = true
+  try {
+    const res = await api({
+      method: 'get',
+      url: '/transactions',
+      params: { isRelated: isRelated.value },
+    })
+    if (res.data.code === 200) {
+      list.value = res.data.data
+    } else {
+      throw new Error(res.data.msg)
+    }
+  } catch (e) {
+    console.error(e)
+    MessagePlugin.error(t('transactions.msg.fetchFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(fetchTransactions)
+</script>
+
+<style scoped>
+.transactions-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.transactions-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.transactions-page__inner {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.transactions-page__header {
+  margin-bottom: 1rem;
+}
+
+.transactions-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.transactions-page__header p {
+  margin: 0.5rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.transactions-card {
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(from var(--td-bg-color-container) r g b / 0.98),
+    rgba(from var(--td-bg-color-container) r g b / 0.92)
+  );
+  padding: 1.5rem;
+}
+
+.transactions-card__toolbar {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/src/views/VerifyView.vue b/src/views/VerifyView.vue
new file mode 100644
index 0000000..75a28a4
--- /dev/null
+++ b/src/views/VerifyView.vue
@@ -0,0 +1,159 @@
+<template>
+  <section class="verify-page">
+    <div class="verify-page__bg"></div>
+    <div class="verify-page__inner">
+      <div class="verify-page__header">
+        <h1>{{ t('verify.title') }}</h1>
+        <p>{{ t('verify.subtitle') }}</p>
+      </div>
+
+      <div class="verify-card">
+        <div class="verify-card__search">
+          <t-input
+            v-model="hashInput"
+            clearable
+            size="large"
+            :placeholder="t('verify.placeholder')"
+            @enter="verify"
+          />
+          <t-button theme="primary" :loading="verifying" size="large" @click="verify">
+            {{ t('verify.button') }}
+          </t-button>
+        </div>
+
+        <div v-if="verifyState === 'fail'" class="verify-card__result fail">
+          <t-empty type="fail" size="large" :description="t('verify.failDescription')" />
+        </div>
+
+        <div v-else-if="verifyState === 'success'" class="verify-card__result">
+          <TransactionDetailPanel :transaction="transactionResult" show-verified-stamp />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'
+import api from '@/utils/api'
+import { useLocale } from '@/utils/i18n'
+import TransactionDetailPanel from '@/components/TransactionDetailPanel.vue'
+
+const { t } = useLocale()
+
+const HASH_PATTERN = /^0x[a-fA-F0-9]{64}$/
+
+const hashInput = ref('')
+const verifying = ref(false)
+const verifyState = ref('idle')
+const transactionResult = ref(null)
+
+async function verify() {
+  const hash = hashInput.value.trim()
+  if (!HASH_PATTERN.test(hash)) {
+    MessagePlugin.warning(t('verify.invalidHash'))
+    return
+  }
+
+  verifying.value = true
+  verifyState.value = 'idle'
+  transactionResult.value = null
+  try {
+    const res = await api({
+      method: 'get',
+      url: '/transactions/verify',
+      params: { submissionHash: hash },
+    })
+    if (res.data.code === 200 && res.data.data) {
+      transactionResult.value = res.data.data
+      verifyState.value = 'success'
+    } else {
+      verifyState.value = 'fail'
+    }
+  } catch (e) {
+    console.error(e)
+    verifyState.value = 'fail'
+  } finally {
+    verifying.value = false
+  }
+}
+</script>
+
+<style scoped>
+.verify-page {
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.verify-page__bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      1000px 260px at 10% 0%,
+      rgba(from var(--td-brand-color-3) r g b / 0.22),
+      transparent
+    ),
+    radial-gradient(
+      800px 220px at 90% 10%,
+      rgba(from var(--td-success-color-3) r g b / 0.2),
+      transparent
+    );
+}
+
+.verify-page__inner {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  z-index: 1;
+}
+
+.verify-page__header {
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.verify-page__header h1 {
+  margin: 0;
+  font: var(--td-font-headline-large);
+  color: var(--td-text-color-primary);
+}
+
+.verify-page__header p {
+  margin: 0.5rem 0 0;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+}
+
+.verify-card {
+  border: 1px solid var(--td-component-stroke);
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(from var(--td-bg-color-container) r g b / 0.98),
+    rgba(from var(--td-bg-color-container) r g b / 0.92)
+  );
+  padding: 1.5rem;
+}
+
+.verify-card__search {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.verify-card__search :deep(.t-input) {
+  flex: 1;
+}
+
+.verify-card__result {
+  margin-top: 1.5rem;
+}
+
+.verify-card__result.fail {
+  padding: 4rem 0;
+}
+</style>