diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index cceb1845..9dc9b748 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1853,5 +1853,6 @@ export default {
 		MyListingsInfo: '已发布商品和未发布库存',
 		SelectCollection: '选择商品',
 		SelectSketch: '选择线稿图',
+		EditListingDetails: '编辑商品详情',
 	}
 }
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c1323507..3d5cb7dd 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1907,5 +1907,6 @@ export default {
 		MyListingsInfo: 'Active listings and unpublished inventory',
 		SelectCollection: 'Select Collection',
 		SelectSketch: 'Select Sketch',
+		EditListingDetails: 'Edit Listing Details',
 	}
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 71cdb60d..b7e7601d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,15 +13,15 @@ type SellerBreadcrumbItem = {
 type SellerBreadcrumbList = SellerRouteMetaValue<SellerBreadcrumbItem[]>
 
 const myListingsBreadcrumb: SellerBreadcrumbItem = {
-	title: "Seller.MyListings",
+	titleKey: "Seller.MyListings",
 	to: { name: "myListingsIndex" }
 }
 const selectCollectionBreadcrumb: SellerBreadcrumbItem = {
-	title: "Seller.SelectCollection",
+	titleKey: "Seller.SelectCollection",
 	to: { name: "myListingsSelect" }
 }
 const selectSketchBreadcrumb: SellerBreadcrumbItem = {
-	title: "Seller.SelectSketch",
+	titleKey: "Seller.SelectSketch",
 	to: (route) => {
 		const collectionId =
 			route.params.collectionId ||
@@ -33,7 +33,7 @@ const selectSketchBreadcrumb: SellerBreadcrumbItem = {
 	}
 }
 const editListingBreadcrumb: SellerBreadcrumbItem = {
-	title: "Edit Listing Details"
+	titleKey: "Seller.EditListingDetails"
 }
 const statusBreadcrumb: SellerBreadcrumbItem = {
 	titleKey: (route) =>
@@ -257,8 +257,8 @@ const routes: Array<RouteRecordRaw> = [
 								name: "myListingsIndex",
 								meta: {
 									enter: "all",
-									sellerHeaderTitle: "Seller.MyListings",
-									sellerHeaderTip: "Seller.MyListingsInfo",
+									sellerHeaderTitleKey: "Seller.MyListings",
+									sellerHeaderTipKey: "Seller.MyListingsInfo",
 									sellerBreadcrumbs: [myListingsBreadcrumb]
 								},
 								component: () =>
@@ -269,7 +269,7 @@ const routes: Array<RouteRecordRaw> = [
 								name: "myListingsSelect",
 								meta: {
 									enter: "all",
-									sellerHeaderTitle: "Seller.SelectCollection",
+									sellerHeaderTitleKey: "Seller.SelectCollection",
 									sellerBreadcrumbs: [
 										myListingsBreadcrumb,
 										selectCollectionBreadcrumb
@@ -284,7 +284,7 @@ const routes: Array<RouteRecordRaw> = [
 								meta: {
 									enter: "all",
 									cache: true,
-									sellerHeaderTitle: "Seller.SelectCollection",
+									sellerHeaderTitleKey: "Seller.SelectCollection",
 									sellerBreadcrumbs: [
 										myListingsBreadcrumb,
 										selectCollectionBreadcrumb,
@@ -299,7 +299,7 @@ const routes: Array<RouteRecordRaw> = [
 								name: "EditDetail",
 								meta: {
 									enter: "all",
-									sellerHeaderTitle: "Edit Listing Details",
+									sellerHeaderTitleKey: "Seller.EditListingDetails",
 									sellerBreadcrumbs: editListingBreadcrumbs
 								},
 								component: () =>
@@ -310,7 +310,7 @@ const routes: Array<RouteRecordRaw> = [
 								name: "Status",
 								meta: {
 									enter: "all",
-									sellerHeaderTitle: "Edit Listing Details",
+									sellerHeaderTitleKey: "Seller.EditListingDetails",
 									sellerBreadcrumbs: listingStatusBreadcrumbs
 								},
 								component: () =>