diff --git a/src/assets/icons/brand/delete.svg b/src/assets/icons/brand/delete.svg
new file mode 100644
index 0000000..364b40b
--- /dev/null
+++ b/src/assets/icons/brand/delete.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1113 5.26938H12.1387V3.63221C12.1387 2.87065 11.518 2.25 10.7565 2.25H6.73062C5.96906 2.25 5.34841 2.87065 5.34841 3.63221V5.26938H3.37575C3.16774 5.26938 3 5.43713 3 5.64513C3 5.85313 3.16774 6.02087 3.37575 6.02087H4.00646V14.3678C4.00646 15.1293 4.62711 15.75 5.38867 15.75H12.0984C12.86 15.75 13.4806 15.1293 13.4806 14.3678V6.02423H14.1113C14.3193 6.02423 14.4871 5.85649 14.4871 5.64848C14.4871 5.44048 14.3193 5.27274 14.1113 5.27274V5.26938ZM6.73062 3.00485H10.7565C11.102 3.00485 11.3872 3.28666 11.3872 3.63556V5.12848C11.3872 5.209 11.3234 5.27274 11.2429 5.27274H6.24751C6.167 5.27274 6.10325 5.209 6.10325 5.12848V3.63556C6.10325 3.29001 6.38506 3.00485 6.73397 3.00485H6.73062ZM12.0984 15.0019H5.38867C5.04312 15.0019 4.75795 14.7201 4.75795 14.3711V6.02423H12.7258V14.3711C12.7258 14.7167 12.444 15.0019 12.0951 15.0019H12.0984Z" fill="#979797"/>
+<path d="M7.40098 7.95319C7.15943 7.95319 6.96484 8.14777 6.96484 8.38932V12.2977C6.96484 12.5393 7.15943 12.7339 7.40098 12.7339C7.64253 12.7339 7.83711 12.5393 7.83711 12.2977V8.38932C7.83711 8.14777 7.64253 7.95319 7.40098 7.95319Z" fill="#979797"/>
+<path d="M10.0846 7.95319C9.84302 7.95319 9.64844 8.14777 9.64844 8.38932V12.2977C9.64844 12.5393 9.84302 12.7339 10.0846 12.7339C10.3261 12.7339 10.5207 12.5393 10.5207 12.2977V8.38932C10.5207 8.14777 10.3261 7.95319 10.0846 7.95319Z" fill="#979797"/>
+</svg>
diff --git a/src/assets/icons/brand/more.svg b/src/assets/icons/brand/more.svg
new file mode 100644
index 0000000..e0acc88
--- /dev/null
+++ b/src/assets/icons/brand/more.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 12.5C9.5 13.8805 10.6195 15 12 15C13.3805 15 14.5 13.8805 14.5 12.5C14.5 11.1195 13.3805 10 12 10C10.6195 10 9.5 11.1195 9.5 12.5ZM13.5 12.5C13.5 13.327 12.827 14 12 14C11.173 14 10.5 13.327 10.5 12.5C10.5 11.673 11.173 11 12 11C12.827 11 13.5 11.673 13.5 12.5Z" fill="#7B7B7B"/>
+<path d="M3 12.5C3 13.8805 4.1195 15 5.5 15C6.8805 15 8 13.8805 8 12.5C8 11.1195 6.8805 10 5.5 10C4.1195 10 3 11.1195 3 12.5ZM7 12.5C7 13.327 6.327 14 5.5 14C4.673 14 4 13.327 4 12.5C4 11.673 4.673 11 5.5 11C6.327 11 7 11.673 7 12.5Z" fill="#7B7B7B"/>
+<path d="M16 12.5C16 13.8805 17.1195 15 18.5 15C19.8805 15 21 13.8805 21 12.5C21 11.1195 19.8805 10 18.5 10C17.1195 10 16 11.1195 16 12.5ZM20 12.5C20 13.327 19.327 14 18.5 14C17.673 14 17 13.327 17 12.5C17 11.673 17.673 11 18.5 11C19.327 11 20 11.673 20 12.5Z" fill="#7B7B7B"/>
+</svg>
diff --git a/src/assets/icons/brand/search.svg b/src/assets/icons/brand/search.svg
new file mode 100644
index 0000000..726ac68
--- /dev/null
+++ b/src/assets/icons/brand/search.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13.8654" cy="13.8665" r="7.86667" stroke="#232323" stroke-width="1.33333"/>
+<path d="M19.5586 19.5552L26.6697 26.6663" stroke="#232323" stroke-width="1.33333" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/brand/time.svg b/src/assets/icons/brand/time.svg
new file mode 100644
index 0000000..231172e
--- /dev/null
+++ b/src/assets/icons/brand/time.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C4.48583 20 0 15.5142 0 10C0 4.48583 4.48583 0 10 0C15.5142 0 20 4.48583 20 10C20 15.5142 15.5142 20 10 20ZM10 0.833333C4.94583 0.833333 0.833333 4.94583 0.833333 10C0.833333 15.0542 4.94583 19.1667 10 19.1667C15.0542 19.1667 19.1667 15.0542 19.1667 10C19.1667 4.94583 15.0542 0.833333 10 0.833333ZM12.3333 14.0833C12.5175 13.945 12.555 13.6842 12.4175 13.5L10.0008 10.2775V4.58333C10.0008 4.35333 9.81417 4.16667 9.58417 4.16667C9.35417 4.16667 9.1675 4.35333 9.1675 4.58333V10.4167C9.1675 10.5067 9.19667 10.5942 9.25083 10.6667L11.7508 14C11.8333 14.1092 11.9583 14.1667 12.0842 14.1667C12.1708 14.1667 12.2583 14.1392 12.3333 14.0833Z" fill="black"/>
+</svg>
diff --git a/src/assets/images/brand/brandBg.png b/src/assets/images/brand/brandBg.png
index d5b004b..a92325f 100644
Binary files a/src/assets/images/brand/brandBg.png and b/src/assets/images/brand/brandBg.png differ
diff --git a/src/assets/images/brand/brandDetailBg.png b/src/assets/images/brand/brandDetailBg.png
new file mode 100644
index 0000000..d5b004b
Binary files /dev/null and b/src/assets/images/brand/brandDetailBg.png differ
diff --git a/src/assets/images/brand/brandLoading.gif b/src/assets/images/brand/brandLoading.gif
new file mode 100644
index 0000000..c5234fe
Binary files /dev/null and b/src/assets/images/brand/brandLoading.gif differ
diff --git a/src/assets/images/collectionStory/code-create.png b/src/assets/images/collectionStory/code-create.png
new file mode 100644
index 0000000..776ddf3
Binary files /dev/null and b/src/assets/images/collectionStory/code-create.png differ
diff --git a/src/assets/images/collectionStory/collection_story_banner.png b/src/assets/images/collectionStory/collection_story_banner.png
index 5dee32c..bcde967 100644
Binary files a/src/assets/images/collectionStory/collection_story_banner.png and b/src/assets/images/collectionStory/collection_story_banner.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index c14b554..f3ab1f6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,11 @@ const router = createRouter({
       name: 'brand',
       component: () => import('../views/brand/index.vue')
     },
+	{
+		path: '/brand/:id',
+		name: 'brandDetail',
+		component: () => import('../views/brandDetail/index.vue')
+	},
     {
       path: '/digitalItem',
       name: 'digitalItem',
diff --git a/src/views/brand/brand-item.vue b/src/views/brand/brand-item.vue
new file mode 100644
index 0000000..fb837c2
--- /dev/null
+++ b/src/views/brand/brand-item.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	item:{
+		type:Object,
+		default:()=>{},
+	},
+})
+const emit = defineEmits([
+	'viewProfile',
+])
+const viewProfile = (item) => {
+	emit('viewProfile', item)
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="item">
+		<div class="left">
+			<div class="portrait">
+				<img :src="item.portrait" alt="">
+			</div>
+			<div class="info">
+				<div class="name">{{ item.name }}</div>
+				<div class="collection">
+					{{ item.collectionsName }} | 
+					{{ item?.collections?.length || 0 }} Collections
+				</div>
+				<div class="view-profile" @click="viewProfile(item)">View Profile</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="img-list">
+				<div class="img-item" v-for="itemImg in item?.collections?.slice(0,5)" :key="item.id">
+					<img :src="itemImg" alt="">
+				</div>
+			</div>
+			<div class="more">
+				<div class="icon" v-show="item?.collections?.length > 5">
+					<svgIcon name="brand-more" size="24" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.item{
+		display: flex;
+		width: 100%;
+		height: 14rem;
+		justify-content: space-between;
+		border-bottom: 0.5px solid #C4C4C4;
+		> .left{
+			display: flex;
+			.portrait{
+				width: 8rem;
+				height: 8rem;
+				margin-right: 2.4rem;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+			.info{
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				> .name{
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 2rem;
+					line-height: 100%;
+				}
+				> .collection{
+					color: #7B7B7B;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.2rem;
+					line-height: 2.3rem;
+					margin-top: .4rem;
+				}
+				> .view-profile{
+					margin-top: 2.4rem;
+					border-bottom: 2px solid #585858;
+					background: #F9F9F9;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					letter-spacing: -0.4px;
+					line-height: 3.4rem;
+					padding: 0 2.55rem;
+					cursor: pointer;
+				}
+			}
+		}
+		> .right{
+			display: flex;
+			> .img-list{
+				display: flex;
+				gap: 3.2rem;
+				> .img-item{
+					width: 9.2rem;
+					height: 12rem;
+					img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .more{
+				width: 8rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/brand/index.vue b/src/views/brand/index.vue
index e8350d5..f2dcbec 100644
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import CommodityList from "./commodity-list.vue";
-import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
 import myEvent from '@/utils/myEvent'
+import scListNull from '@/views/shoppingCart/sc-list-null.vue'
+import brandItem from '@/views/brand/brand-item.vue'
+
+import img from '@/assets/images/collectionStory/Rectangle.png'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -11,12 +13,96 @@ import myEvent from '@/utils/myEvent'
 const router = useRouter()
 let data = reactive({
 })
-const addShopping = (item) => {
-	myEvent.emit('addShopping', item)
+
+const searchBrand = ref('')
+const merchantList = ref([
+])
+const getMerchantData = reactive({
+	pageSize: 10,
+	pageNum: 1,
+	isShowMark:false,
+	isNoData:false,
+})
+const list = ref([
+	' 1',
+	'Brand 2',
+	'Brand 3',
+	'1213123 4',
+	'Brand 4',
+	'2222 4',
+	'B23rand 4',
+	'Bran112222d 4',
+	' 4',
+])
+
+let changeSearchBrandTime = null
+const changeSearchBrand = () => {
+	clearTimeout(changeSearchBrandTime)
+	changeSearchBrandTime = setTimeout(()=>{
+		getMerchantData.pageNum = 1
+		merchantList.value = []
+		getMerchantData.isShowMark = false
+		getMerchantData.isNoData = false
+	},300)
 }
-const openDetail = (item) => {	
-	router.push({name: 'digitalDetail', params: {id: item.id}})
+
+const getBrandList = async () => {
+	if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
+	getMerchantData.isShowMark = true
+	let value = {
+		pageSize: getMerchantData.pageSize,
+		pageNum: getMerchantData.pageNum,
+		status: 1,
+	}
+	setTimeout(()=>{
+			if(merchantList.value.length >= 5){
+				getMerchantData.isNoData = true
+				merchantList.value = []
+				return
+			}
+			getMerchantData.pageNum += 1
+			merchantList.value.push({
+				name:'Roaming Clouds',
+				portrait: img,
+				collectionsName:'by Lian Su ',
+				collections:[
+					img,img,img,
+				],
+			})
+			getMerchantData.isShowMark = false
+	},1000)
+	// await getPublishList(value).then((res)=>{
+	// 	if(res.content.length == 0)getMerchantData.isNoData = true
+	// 	getMerchantData.pageNum += 1
+	// 	list.value.push(...res.content)
+	// })
 }
+const vObserve  = {
+	mounted (el,binding) {
+		getMerchantData.isShowMark = false
+		getMerchantData.isNoData = false
+		new IntersectionObserver(
+		(entries, observer) => {
+				// 如果不是相交，则直接返回
+				// console.log(entries[0]);
+				if (!entries[0].intersectionRatio) return;
+				getMerchantData.pageNum += 1
+				binding.value()
+			},
+			// { root:worksPage }
+		).observe(el);
+	}
+}
+
+const deleteHistory = (item) => {
+	list.value = list.value.filter((i) => i != item)
+}
+const viewProfile = (item) => {
+	router.push({
+		path:'/brand/1',
+	})
+}
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -26,15 +112,52 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="brand">
-		<div class="header-img">
+		<div class="header-img" :class="{'active': searchBrand.length > 0}">
 			<img src="@/assets/images/brand/brandBg.png" alt="">
+			<div class="text-box">
+				<div class="title">Brand</div>
+				<span>Every brand, every story — discover who's behind the collections.</span>
+			</div>
 		</div>
 		<div class="content">
-			<div class="merchant-info">
-				<MerchantInfo></MerchantInfo>
+			<div class="input">
+				<input type="text" v-model="searchBrand" @input="changeSearchBrand" placeholder="Search brand">
+				<div class="icon">
+					<SvgIcon name="brand-search" size="32" />
+				</div>
 			</div>
-			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+			<div class="merchantList" v-if="searchBrand.length > 0">
+				<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
+				<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
+				<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
+					<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
+					<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
+				</div>
+
+				<div class="merchantListNull" v-if="getMerchantData.isNoData && searchBrand.length > 0">
+					<sc-list-null 
+						nullImage="brand"
+						:showButton="false" 
+						title="Brand No Found"
+						tip="Try using another keywords."
+					/>
+				</div>
+			</div>
+			<div class="null-input" v-if="searchBrand.length == 0">
+				<div class="title">
+					<div class="icon">
+						<SvgIcon name="brand-time" size="20" />
+					</div>
+					<span>Searching History</span>
+				</div>
+				<div class="history">
+					<div v-for="item in list" :key="item" @click.stop="searchBrand = item" class="item">
+						<span>{{item}}</span>
+						<div class="icon" @click.stop="deleteHistory(item)">
+							<SvgIcon name="brand-delete" size="18" />
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 		<Footer></Footer>
@@ -46,34 +169,151 @@ const {} = toRefs(data);
 		height: 100%;
 		position: relative;
 		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
 		.header-img{
 			width: 100%;
+			position: relative;
+			height: 34.4rem;
+			transition: all .3s;
+			&.active{
+				height: 14.7rem;
+			}
 			>img{
 				width: 100%;
+				position: absolute;
+				bottom: 0;
+			}
+			> .text-box{
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				text-align: center;
+				> .title{
+					font-family: 'KaiseiOpti-Bold';
+					font-weight: 700;
+					font-size: 4rem;
+					line-height: 2.3rem;
+					letter-spacing: 0%;
+					color: #000;
+				}
+				> span{
+					display: block;
+					margin-top: 2.4rem;
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 140%;
+				}
 			}
 		}
-		.content{
+		>.content{
 			display: flex;
 			height: auto;
 			align-items: flex-start;
-			.merchant-info{
-				width: 40rem;
-				padding-left: 12.7rem;
-				padding-right: 2.7rem;
-				height: var(--app-view-height);
-				overflow-y: auto;
-				position: sticky;
-				top: 0;
-				&::-webkit-scrollbar{
-					width: 0;
-					height: 0;
+			flex-direction: column;
+			align-items: center;
+			flex: 1;
+			overflow: hidden;
+			> .input{
+				width: 66.6rem;
+				display: flex;
+				border-bottom: 2px solid #232323;
+				padding: 1.4rem 1.4rem 1.4rem 2.4rem;
+				background-color: #f9f9f9;
+				display: flex;
+				margin-top: 8rem;
+				> input{
+					width: 57.2rem;
+					line-height: 3.2rem;
+					padding: 0;
+					border: none;
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 100%;
+					margin-right: 2.4rem;
+					background-color: transparent;
+					outline: none;
+				}
+				> .icon{
+					cursor: pointer;
 				}
 			}
-			.commodity-list{
+			> .null-input{
+				margin-top: 8rem;
+				.title{
+					display: flex;
+					justify-content: center;
+					.icon{
+						margin-right: 2rem;
+					}
+				}
+				.history{
+					margin-top: 4rem;
+					width: 59rem;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: center;
+					column-gap: 3.2rem;
+					row-gap: 1.2rem;
+					.item{
+						cursor: pointer;
+						display: flex;
+						> span{
+							font-family: 'KaiseiOpti-Regular';
+							font-weight: 400;
+							font-size: 1.4rem;
+							line-height: 100%;
+							margin-right: .4rem;
+						}
+					}
+				}
+			}
+			> .merchantList{
+				width: 121.8rem;
+				margin-top: 6rem;
 				flex: 1;
-				border-left: 0.5px solid #585858;
-				border-right: 0.5px solid #585858;
-				margin-right: 9rem;
+				overflow-y: auto;
+				gap: 3.2rem;
+				display: flex;
+				flex-direction: column;
+				::-webkit-scrollbar{
+					display: none;
+				}
+				.end{
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 12px;
+					line-height: 140%;
+					height: 7rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				> .material_content_list_loding{
+					width: 100%;
+					height: 5rem;
+					aspect-ratio: 1/1;
+					overflow: hidden;
+					display: flex;
+					flex-shrink: 0;
+					justify-content: center;
+					> .page_loading{
+						width: 5rem;
+						height: 5rem;
+					}
+					> img{
+						width: 5rem;
+						height: 5rem;
+						object-fit: contain;
+					}
+				}
+				> .merchantListNull{
+					flex: 1;
+					width: 100%;
+				}
 			}
 		}
 	}
diff --git a/src/views/brand/commodity-list.vue b/src/views/brandDetail/commodity-list.vue
similarity index 84%
rename from src/views/brand/commodity-list.vue
rename to src/views/brandDetail/commodity-list.vue
index 012e2da..5d02399 100644
--- a/src/views/brand/commodity-list.vue
+++ b/src/views/brandDetail/commodity-list.vue
@@ -37,11 +37,7 @@ const list = ref([
 		url: img,
 		title: "Windswept Burden",
 		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},
+	}
 ])
 const type = ref('All')
 const addShopping = (item) => {
@@ -128,41 +124,26 @@ const {} = toRefs(data);
 			}
 		}
 		.list{
-			border-top: 0.5px solid #585858;
 			width: 100%;
 			flex: 1;
+			// display: grid;
+			// align-content: start;
+			// grid-template-columns: repeat(3, 1fr);
+			overflow: hidden;
+
 			display: grid;
 			align-content: start;
-			grid-template-columns: repeat(3, 1fr);
-			overflow-y: auto;
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+			border-top: 0.5px solid #585858;
+			padding: .5px 0 0 .5px;
 			/* 垂直线（右边框） */
 			.item{
 				position: relative;
 				padding: 1.2rem;
-			}
-			.item::before {
-				content: '';
-				position: absolute;
-				right: 0;
-				top: 0;
-				height: 100%;
-				border-right: 0.5px solid #585858;
-				z-index: 1;
-			}
-
-				/* 水平线（下边框） */
-			.item::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
 				border-bottom: 0.5px solid #585858;
-				z-index: 1;
-			}
-				/* 移除最后一列的右边框 */
-			.item:nth-child(3n)::before {
-				display: none;
+				border-right: 0.5px solid #585858;
+				margin-right: -1px;
+				margin-bottom: -1px;
 			}
 		}
 	}
diff --git a/src/views/brandDetail/index.vue b/src/views/brandDetail/index.vue
new file mode 100644
index 0000000..4e9bd78
--- /dev/null
+++ b/src/views/brandDetail/index.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+import { useRouter } from "vue-router";
+import myEvent from '@/utils/myEvent'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const router = useRouter()
+let data = reactive({
+})
+const addShopping = (item) => {
+	myEvent.emit('addShopping', item)
+}
+const openDetail = (item) => {	
+	router.push({name: 'digitalDetail', params: {id: item.id}})
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="brand">
+		<div class="header-img">
+			<img src="@/assets/images/brand/brandDetailBg.png" alt="">
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.brand{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			>img{
+				width: 100%;
+			}
+		}
+		.content{
+			display: flex;
+			height: auto;
+			align-items: flex-start;
+			.merchant-info{
+				width: 40rem;
+				padding-left: 12.7rem;
+				padding-right: 2.7rem;
+				height: var(--app-view-height);
+				overflow-y: auto;
+				position: sticky;
+				top: 0;
+				&::-webkit-scrollbar{
+					width: 0;
+					height: 0;
+				}
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/brand/merchant-info.vue b/src/views/brandDetail/merchant-info.vue
similarity index 100%
rename from src/views/brand/merchant-info.vue
rename to src/views/brandDetail/merchant-info.vue
diff --git a/src/views/collectionStory/detail/index.vue b/src/views/collectionStory/detail/index.vue
index 2605e1c..5c88e4c 100644
--- a/src/views/collectionStory/detail/index.vue
+++ b/src/views/collectionStory/detail/index.vue
@@ -4,6 +4,7 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 import coreConcept from "./coreConcept.vue";
 import inspiration from "./inspiration.vue";
 import feelingWithAiDA from "./feelingWithAiDA.vue";
+import joinUs from "./join-us.vue";
 import CommodityItem from "@/components/CommodityItem.vue";
 //const props = defineProps({
 //})
@@ -30,6 +31,10 @@ const list = ref([
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
+const openCodeCreate = () => {
+	window.open('https://code-create.com.hk/', '_blank')
+}
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -41,21 +46,22 @@ const {} = toRefs(data);
 	<div class="detail">
 		<div class="left">
 			<div class="personal">
-				<img :src="img" alt="">
+				<img src="@/assets/images/collectionStory/code-create.png" alt="">
 				<div class="name">
-					<span>Lian Su</span>
-					<div class="icon">
+					<span>Code-Create</span>
+					<div class="icon" @click="openCodeCreate">
 						<SvgIcon name="share" size="24" />
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="center">
-			<coreConcept ></coreConcept>
+			<joinUs></joinUs>
+			<!-- <coreConcept ></coreConcept>
 			<div class="line"></div>
 			<inspiration ></inspiration>
 			<div class="line"></div>
-			<feelingWithAiDA ></feelingWithAiDA>
+			<feelingWithAiDA ></feelingWithAiDA> -->
 		</div>
 		<div class="right">
 			<div class="item" v-for="item in list" :key="item.url">
@@ -67,9 +73,9 @@ const {} = toRefs(data);
 <style lang="less" scoped>
 	.detail{
 		width: 100%;
-		height: auto;
 		position: relative;
 		display: flex;
+		height: calc(100vh - var(--header-height) - var(--footer-height));
 		align-items: flex-start;
 		> div{
 			// height: 100%;
@@ -93,6 +99,9 @@ const {} = toRefs(data);
 					display: flex;
 					gap: .4rem;
 					align-items: center;
+					> .icon{
+						cursor: pointer;
+					}
 					> span{
 						font-family: 'KaiseiOpti-Bold';
 						font-weight: 700;
@@ -112,6 +121,7 @@ const {} = toRefs(data);
 			overflow: hidden;
 			// height: 100%;
 			height: auto;
+			position: relative;
 			.line{
 				border: 0.5px solid #58585899;
 				width: 100%;
@@ -123,9 +133,9 @@ const {} = toRefs(data);
 		> .right{
 			width: 25.4rem;
 			padding-top: 6rem;
-			position: sticky;
+			// position: sticky;
 			top: 0;
-			height: calc(100vh - var(--header-height));
+			// height: calc(100vh - var(--header-height));
 			display: flex;
 			flex-direction: column;
 			align-items: center;
diff --git a/src/views/collectionStory/detail/join-us.vue b/src/views/collectionStory/detail/join-us.vue
new file mode 100644
index 0000000..f2ad67c
--- /dev/null
+++ b/src/views/collectionStory/detail/join-us.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="joinUs">
+		<div class="title">Join Our Designer Community</div>
+		<div class="info">
+			<div>
+				Join our community of visionaries and publish your collection story.
+			</div>
+			<div>
+				We are currently seeking collections that deeply integrate the AiDA creative workflow, specifically those that resonate through powerful core concepts and evocative inspiration. 
+			</div>
+			<br />
+			<div>
+				This architecture is designed to elevate your exposure through profound "propositional expression," ensuring that soulful, story-driven designs achieve higher market premiums and superior sales conversion.
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.joinUs{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding: 6rem 0;
+		> .title{
+			padding: 0 2.4rem;
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 3rem;
+			line-height: 100%;
+			margin-bottom: 6rem;
+		}
+		> .info{
+			width: 70.7rem;
+			margin: 0 auto;
+			margin-bottom: 4rem;
+			> div{
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.3rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/index.vue b/src/views/collectionStory/index.vue
index 701a696..14f2385 100644
--- a/src/views/collectionStory/index.vue
+++ b/src/views/collectionStory/index.vue
@@ -28,24 +28,15 @@ const {} = toRefs(data);
 			</div>
 			<div class="title-content">
 				<div class="title-box">
-					<div class="left">
-						<div class="title">
-							Windswept Burden
-						</div>
-						<div class="info">
-							Publish Date: 24th Nov 2025
-						</div>
+					<div class="title">
+						We’re Seeking 
 					</div>
-					<div class="right">
-						<div class="info">
-							“We are spiritual nomads carrying what wind cannot take. <br />
-							Inspired by those who knew home is not a place, but what you wear.”
-						</div>
+					<div class="info">
+						Fashion Voice Worth Featuring.
 					</div>
 				</div>
-				<div class="scrolling-learn-more">
-					<div>Scrolling Learn More</div>
-					<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
+				<div class="button">
+					<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
 				</div>
 			</div>
 		</div>
@@ -73,7 +64,7 @@ const {} = toRefs(data);
 				display: flex;
 				align-items: center;
 				gap: .8rem;
-				color: #fff;
+				color: #000;
 				cursor: pointer;
 				> .text{
 					font-size: 2rem;
@@ -83,73 +74,46 @@ const {} = toRefs(data);
 			}
 			> .title-content{
 				width: 100%;
-				height: 63.2rem;
-				margin-top: 24.8rem;
-				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
-				padding: 0 4rem;
-				> .title-box{
-					margin-top: 36.7rem;
-					color: #fff;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					> .left{
-						font-family: 'KaiseiOpti-Bold';
-						font-weight: 700;
-						> .title{
-							font-size: 6rem;
-							line-height: 6rem;
-						}
-						> .info{
-							margin-top: 1.7rem;
-							font-size: 1.8rem;
-							line-height: 100%;
-							vertical-align: bottom;
-						}
-					}
-					> .right{
-						> .info{
-							font-weight: 500;
-							font-size: 1.8rem;
-							line-height: 100%;
-							text-align: right;
-						}
-					}
-				}	
-			}
-			.scrolling-learn-more{
 				position: absolute;
-				bottom: 2.1rem;
-				left: 50%;
-				transform: translateX(-50%);
+				padding: 0 6.7rem;
+				margin-top: 11.5rem;
 				display: flex;
 				flex-direction: column;
-				color: #fff;
-				animation: scroll 3s linear infinite;
-				@keyframes scroll {
-					0% {
-						transform: translateY(0);
+				align-items: flex-start;
+				> .title-box{
+					display: flex;
+					flex-direction: column;
+					> .title{
+						font-size: 6.5rem;
+						line-height: 100%;
+						font-weight: 500;
+						color: #585858;
 					}
-					50% {
-						transform: translateY(-20%);
+					> .info{
+						font-size: 3rem;
+						font-weight: 500;
+						line-height: 100%;
+						color: #585858;
 					}
-					100% {
-						transform: translateY(0%);
+				}	
+				> .button{
+					padding: 0 4.5rem;
+					line-height: 5.1rem;
+					background-color: #1B1B1B;
+					color: #fff;
+					margin-top: 4rem;
+					font-weight: 700;
+					font-size: 2rem;
+					letter-spacing: -0.4px;
+					cursor: pointer;
+					> a{
+						color: #fff;
+						text-decoration: none;
 					}
 				}
-				> div{
-					font-family: 'KaiseiOpti-Regular';
-					font-weight: 400;
-					font-size: 1.4rem;	
-					line-height: 100%;
-					text-align: center;
-					margin-bottom: 1.5rem;
-					white-space: nowrap;
-				}
 			}
 			.banner{
 				width: 100%;
-				position: absolute;
 				z-index: -1;
 			}
 		}
diff --git a/src/views/digitalDetail/index.vue b/src/views/digitalDetail/index.vue
index e18c3fb..87b6be3 100644
--- a/src/views/digitalDetail/index.vue
+++ b/src/views/digitalDetail/index.vue
@@ -62,10 +62,7 @@ const {} = toRefs(data);
 						<div class="detail">
 							<div class="name">Roaming Clouds</div>
 							<div class="release-time">
-								<div class="icon">
-									<svg-icon name="digital-document" size="24"></svg-icon>
-								</div>
-								<span>12mb  |  Release in Feb 26, 2026</span>
+								<span>Release in Feb 26, 2026</span>
 							</div>
 						</div>
 					</div>
@@ -235,9 +232,7 @@ const {} = toRefs(data);
 								color: #585858;
 								display: flex;
 								align-items: center;
-								> span{
-									margin-left: 1rem;
-								}
+								
 							}
 						}
 					}