diff --git a/src/assets/images/chair/modern-revival.png b/src/assets/images/chair/modern-revival.png
new file mode 100644
index 0000000..cc203b6
Binary files /dev/null and b/src/assets/images/chair/modern-revival.png differ
diff --git a/src/assets/images/chair/transitional.png b/src/assets/images/chair/transitional.png
new file mode 100644
index 0000000..fef6a90
Binary files /dev/null and b/src/assets/images/chair/transitional.png differ
diff --git a/src/assets/images/chair/tuscan-2000s.png b/src/assets/images/chair/tuscan-2000s.png
new file mode 100644
index 0000000..49ed2f8
Binary files /dev/null and b/src/assets/images/chair/tuscan-2000s.png differ
diff --git a/src/assets/images/chair/venetian-modern.png b/src/assets/images/chair/venetian-modern.png
new file mode 100644
index 0000000..34047a2
Binary files /dev/null and b/src/assets/images/chair/venetian-modern.png differ
diff --git a/src/assets/images/chair/verdant.png b/src/assets/images/chair/verdant.png
new file mode 100644
index 0000000..588eecb
Binary files /dev/null and b/src/assets/images/chair/verdant.png differ
diff --git a/src/assets/images/desk/bauhaus.png b/src/assets/images/desk/bauhaus.png
new file mode 100644
index 0000000..0b6d101
Binary files /dev/null and b/src/assets/images/desk/bauhaus.png differ
diff --git a/src/assets/images/desk/century-chrome.png b/src/assets/images/desk/century-chrome.png
new file mode 100644
index 0000000..4fd8142
Binary files /dev/null and b/src/assets/images/desk/century-chrome.png differ
diff --git a/src/assets/images/desk/coastal.png b/src/assets/images/desk/coastal.png
new file mode 100644
index 0000000..3ffd606
Binary files /dev/null and b/src/assets/images/desk/coastal.png differ
diff --git a/src/assets/images/desk/constructivism.png b/src/assets/images/desk/constructivism.png
new file mode 100644
index 0000000..5c93e95
Binary files /dev/null and b/src/assets/images/desk/constructivism.png differ
diff --git a/src/assets/images/desk/dopamine.png b/src/assets/images/desk/dopamine.png
new file mode 100644
index 0000000..5f4c45e
Binary files /dev/null and b/src/assets/images/desk/dopamine.png differ
diff --git a/src/assets/images/desk/kitsch-core.png b/src/assets/images/desk/kitsch-core.png
new file mode 100644
index 0000000..2006c34
Binary files /dev/null and b/src/assets/images/desk/kitsch-core.png differ
diff --git a/src/assets/images/desk/maximalism.png b/src/assets/images/desk/maximalism.png
new file mode 100644
index 0000000..7d522dd
Binary files /dev/null and b/src/assets/images/desk/maximalism.png differ
diff --git a/src/assets/images/desk/memphis.png b/src/assets/images/desk/memphis.png
new file mode 100644
index 0000000..22b33fc
Binary files /dev/null and b/src/assets/images/desk/memphis.png differ
diff --git a/src/assets/images/desk/modern-revival.png b/src/assets/images/desk/modern-revival.png
new file mode 100644
index 0000000..3288330
Binary files /dev/null and b/src/assets/images/desk/modern-revival.png differ
diff --git a/src/assets/images/desk/nordic-noir.png b/src/assets/images/desk/nordic-noir.png
new file mode 100644
index 0000000..ad8f6c1
Binary files /dev/null and b/src/assets/images/desk/nordic-noir.png differ
diff --git a/src/assets/images/desk/squiggle.png b/src/assets/images/desk/squiggle.png
new file mode 100644
index 0000000..6036dd5
Binary files /dev/null and b/src/assets/images/desk/squiggle.png differ
diff --git a/src/assets/images/desk/transitional.png b/src/assets/images/desk/transitional.png
new file mode 100644
index 0000000..e7c2fef
Binary files /dev/null and b/src/assets/images/desk/transitional.png differ
diff --git a/src/assets/images/desk/tuscan-2000s.png b/src/assets/images/desk/tuscan-2000s.png
new file mode 100644
index 0000000..4ced9ae
Binary files /dev/null and b/src/assets/images/desk/tuscan-2000s.png differ
diff --git a/src/assets/images/desk/venetian-modern.png b/src/assets/images/desk/venetian-modern.png
new file mode 100644
index 0000000..5dbb356
Binary files /dev/null and b/src/assets/images/desk/venetian-modern.png differ
diff --git a/src/assets/images/desk/verdant.png b/src/assets/images/desk/verdant.png
new file mode 100644
index 0000000..2fa4ed6
Binary files /dev/null and b/src/assets/images/desk/verdant.png differ
diff --git a/src/assets/images/sofa/bauhaus.png b/src/assets/images/sofa/bauhaus.png
new file mode 100644
index 0000000..f711e7d
Binary files /dev/null and b/src/assets/images/sofa/bauhaus.png differ
diff --git a/src/assets/images/sofa/century-chrome.png b/src/assets/images/sofa/century-chrome.png
new file mode 100644
index 0000000..8be5491
Binary files /dev/null and b/src/assets/images/sofa/century-chrome.png differ
diff --git a/src/assets/images/sofa/coastal.png b/src/assets/images/sofa/coastal.png
new file mode 100644
index 0000000..96d877e
Binary files /dev/null and b/src/assets/images/sofa/coastal.png differ
diff --git a/src/assets/images/sofa/constructivism.png b/src/assets/images/sofa/constructivism.png
new file mode 100644
index 0000000..dde2f16
Binary files /dev/null and b/src/assets/images/sofa/constructivism.png differ
diff --git a/src/assets/images/sofa/dopamine.png b/src/assets/images/sofa/dopamine.png
new file mode 100644
index 0000000..a9555ac
Binary files /dev/null and b/src/assets/images/sofa/dopamine.png differ
diff --git a/src/assets/images/sofa/kitsch-core.png b/src/assets/images/sofa/kitsch-core.png
new file mode 100644
index 0000000..7e82d47
Binary files /dev/null and b/src/assets/images/sofa/kitsch-core.png differ
diff --git a/src/assets/images/sofa/maximalism.png b/src/assets/images/sofa/maximalism.png
new file mode 100644
index 0000000..83eb6e2
Binary files /dev/null and b/src/assets/images/sofa/maximalism.png differ
diff --git a/src/assets/images/sofa/memphis.png b/src/assets/images/sofa/memphis.png
new file mode 100644
index 0000000..1a0a06b
Binary files /dev/null and b/src/assets/images/sofa/memphis.png differ
diff --git a/src/assets/images/sofa/modern-revival.png b/src/assets/images/sofa/modern-revival.png
new file mode 100644
index 0000000..4315a21
Binary files /dev/null and b/src/assets/images/sofa/modern-revival.png differ
diff --git a/src/assets/images/sofa/nordic-noir.png b/src/assets/images/sofa/nordic-noir.png
new file mode 100644
index 0000000..c56f4a9
Binary files /dev/null and b/src/assets/images/sofa/nordic-noir.png differ
diff --git a/src/assets/images/sofa/squiggle.png b/src/assets/images/sofa/squiggle.png
new file mode 100644
index 0000000..aa48871
Binary files /dev/null and b/src/assets/images/sofa/squiggle.png differ
diff --git a/src/assets/images/sofa/transitional.png b/src/assets/images/sofa/transitional.png
new file mode 100644
index 0000000..b2e7a4b
Binary files /dev/null and b/src/assets/images/sofa/transitional.png differ
diff --git a/src/assets/images/sofa/tuscan-2000s.png b/src/assets/images/sofa/tuscan-2000s.png
new file mode 100644
index 0000000..1efa2f0
Binary files /dev/null and b/src/assets/images/sofa/tuscan-2000s.png differ
diff --git a/src/assets/images/sofa/venetian-modern.png b/src/assets/images/sofa/venetian-modern.png
new file mode 100644
index 0000000..15a3379
Binary files /dev/null and b/src/assets/images/sofa/venetian-modern.png differ
diff --git a/src/assets/images/sofa/verdant.png b/src/assets/images/sofa/verdant.png
new file mode 100644
index 0000000..db04d8f
Binary files /dev/null and b/src/assets/images/sofa/verdant.png differ
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index f26d7c8..186a483 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -89,11 +89,17 @@
 								<div
 									v-for="item in styleOptions"
 									:key="item.value"
-									class="fida-style-popover-item"
+									class="fida-style-popover-item flex flex-center"
 									:class="{ 'is-selected': tempSelectedValue === item.value }"
 									@click="selectStyle(item.value)"
 								>
-									<span class="fida-option-label">{{ $t(item.label) }}</span>
+									<img
+										:src="getStyleImage(typeValue, item.value)"
+										class="style-bg"
+									/>
+									<span class="fida-option-label flex flex-center">{{
+										item.label
+									}}</span>
 									<img
 										v-show="tempSelectedValue === item.value"
 										src="@/assets/images/checked.png"
@@ -179,6 +185,7 @@
 	import lightIcon from '@/assets/images/light-icon.png'
 	import closeIcon from '@/assets/images/close-icon.png'
 	import { createProject } from '@/api/agent'
+	import { getStyleImage } from './style'
 	// import Tag from './Tag.vue'
 
 	const router = useRouter()
@@ -237,15 +244,21 @@
 	}
 
 	const styleKeys: string[] = [
+		'Venetian Modern',
 		'Coastal',
+		'Maximalism',
+		'Memphis',
 		'Verdant',
-		'Traditional',
-		'CenturyChrome',
-		'ModernRevival',
-		'Tuscan2000s',
+		'Century Chrome',
+		'Modern Revival',
+		'Transitional',
+		"Tuscan 2000's",
+		'Kitsch-core',
 		'Bauhaus',
 		'Constructivism',
-		'NordicNoir'
+		'Nordic Noir',
+		'Dopamine',
+		'Squiggle'
 	]
 
 	const editorRef = ref<HTMLDivElement | null>(null)
@@ -506,7 +519,8 @@
 	const areaOptions = ref<any[]>(areaList)
 	const styleOptions = ref<any[]>(
 		styleKeys.map((key) => ({
-			label: `Input.styles.${key}`,
+			label: key,
+			// label: `Input.styles.${key}`,
 			value: key
 		}))
 	)
@@ -810,14 +824,10 @@
 	.fida-style-popover-item {
 		height: 9.1rem;
 		width: 9.1rem;
-		background-color: #a6a6a6;
-		border-radius: 0.8rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		border-radius: 1.4rem;
 		cursor: pointer;
-		transition: all 0.2s ease;
 		position: relative;
+		border: none;
 		.checked-item-icon {
 			position: absolute;
 			bottom: 0;
@@ -826,16 +836,18 @@
 			width: 2.4rem;
 			height: 2.4rem;
 		}
-	}
-
-	.fida-style-popover-item:hover {
-		background-color: #e8e8e8;
+		.style-bg {
+			width: 100%;
+			height: 100%;
+			border-radius: 1.4rem;
+		}
 	}
 
 	.fida-style-popover-item.is-selected {
-		background-color: #e3f2fd;
+		// background-color: #e3f2fd;
+		border: 0.3rem solid #000;
 		.fida-option-label {
-			color: #000;
+			background-color: none;
 		}
 		// border-color: #2196f3;
 	}
@@ -847,6 +859,11 @@
 		color: #fff;
 		text-align: center;
 		padding: 0.5rem;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 1.4rem;
 	}
 
 	.fida-style-popover-footer {
diff --git a/src/views/home/components/style.ts b/src/views/home/components/style.ts
new file mode 100644
index 0000000..0e59efb
--- /dev/null
+++ b/src/views/home/components/style.ts
@@ -0,0 +1,59 @@
+const sofaImages = import.meta.glob('@/assets/images/sofa/*.png', { eager: true })
+const deskImages = import.meta.glob('@/assets/images/desk/*.png', { eager: true })
+const chairImages = import.meta.glob('@/assets/images/chair/*.png', { eager: true })
+
+const imagesMaps = {
+	sofa: sofaImages,
+	desk: deskImages,
+	chair: chairImages
+}
+
+function slugify(str) {
+	return str
+		.toLowerCase()
+		.trim()
+		.replace(/['"]/g, '') // 去掉撇号
+		.replace(/[^a-z0-9\s-]+/g, '') // 只保留字母数字空格-
+		.replace(/\s+/g, '-') // 空格转 -
+		.replace(/-+/g, '-')
+}
+
+/**
+ * 动态获取风格对应的图片 URL
+ * @param { 'sofa' | 'desk' | 'chair' } type
+ * @param { string } style   // 必须和 styleList 里的字符串完全一致
+ * @returns { string | null }  返回可直接用于 <img :src=""> 的 URL
+ */
+export function getStyleImage(types, style) {
+  
+  if (!types) types = 'Sofa'
+	const type = types.toLowerCase()
+	const map = imagesMaps[type]
+  
+	const fileName = `${slugify(style)}.png`
+	const key = `/src/assets/images/${type}/${fileName}`
+  console.log('types',types, 'style',style, 'fileName',fileName, 'key',key);
+
+	if (map[key]) {
+		return map[key].default
+	}
+	return ''
+}
+
+const styleList = [
+	'Venetian Modern',
+	'Coastal',
+	'Maximalism',
+	'Memphis',
+	'Verdant',
+	'Century Chrome',
+	'Modern Revival',
+	'Transitional',
+	"Tuscan 2000's",
+	'Kitsch-core',
+	'Bauhaus',
+	'Constructivism',
+	'Nordic Noir',
+	'Dopamine',
+	'Squiggle'
+]