diff --git a/package-lock.json b/package-lock.json
index 8f13c55..53d916a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,13 @@
         "vuetify": "^3.7.5"
       },
       "devDependencies": {
+        "@mdi/font": "7.4.47",
         "@tsconfig/node22": "^22.0.0",
         "@types/node": "^22.9.3",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",
         "@vue/tsconfig": "^0.7.0",
+        "material-design-icons-iconfont": "^6.7.0",
         "npm-run-all2": "^7.0.1",
         "typescript": "~5.6.3",
         "vite": "^6.0.1",
@@ -950,6 +952,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdi/font": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmmirror.com/@mdi/font/-/font-7.4.47.tgz",
+      "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
+      "dev": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2856,6 +2864,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/material-design-icons-iconfont": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmmirror.com/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz",
+      "integrity": "sha512-lSj71DgVv20kO0kGbs42icDzbRot61gEDBLQACzkUuznRQBUYmbxzEkGU6dNBb5fRWHMaScYlAXX96HQ4/cJWA==",
+      "dev": true
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/memorystream/-/memorystream-0.3.1.tgz",
diff --git a/package.json b/package.json
index 17ed887..37064c7 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,12 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/tsconfig": "^0.7.0",
+    "material-design-icons-iconfont": "^6.7.0",
     "npm-run-all2": "^7.0.1",
     "typescript": "~5.6.3",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.10",
+    "@mdi/font": "7.4.47"
   }
 }
diff --git a/src/assets/img/default2.png b/src/assets/img/default2.png
new file mode 100644
index 0000000..e9ab61f
Binary files /dev/null and b/src/assets/img/default2.png differ
diff --git a/src/assets/img/projectCover.jpg b/src/assets/img/projectCover.jpg
new file mode 100644
index 0000000..a8273a3
Binary files /dev/null and b/src/assets/img/projectCover.jpg differ
diff --git a/src/components/market/MarketCard.vue b/src/components/market/MarketCard.vue
index 1331d41..412ee86 100644
--- a/src/components/market/MarketCard.vue
+++ b/src/components/market/MarketCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { MarketData } from '@/api/market/type.ts';
+import { type MarketData } from '@/type/market/Market.ts';
 
 // 使用 defineProps 来定义组件的 props
 const props = defineProps<{
@@ -17,8 +17,8 @@ const props = defineProps<{
       {{ props.marketData.description }}
     </div>
     <div class="bottom-btn">
-      <span>View Product   -></span>
-
+      <span>View Product   </span>
+      <v-icon icon="mdi-home-analytics" />
     </div>
   </div>
 </template>
@@ -27,34 +27,38 @@ const props = defineProps<{
 .market-card {
   width: 100%;
   height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 15px;
+  overflow: hidden;
 }
 .top-picture {
   width: 100%;
-  height: 45%;
-  background-size: auto; /* 保持图片原始大小 */
+  height: 55%;
+  background-size: cover; /* 保持图片原始大小 */
   background-position: center; /* 图片居中显示 */
   background-repeat: no-repeat; /* 防止图片重复 */
 }
 
 .title {
   width: 100%;
-  height: 20%;
-  padding: 10px;
-  font-size: 24px;
+  height: 15%;
+  padding: 15px 10px 5px 15px;
+  font-size: 28px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .info {
   width: 100%;
-  height: 20%;
+  height: 15%;
   padding: 10px;
   font-size: 18px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .bottom-btn{
   display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
   align-items: center; /* 垂直居中（可选） */
   width: 100%;
   height: 15%;
-
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index a166287..58d9e2c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,11 +7,19 @@ import router from './router'
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
-import {VSnackbar} from 'vuetify/components'
-import {} from 'vuetify/directives'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { aliases, md } from 'vuetify/iconsets/md'
 const vuetify = createVuetify({
-    components:{VSnackbar},
-    directives:{}
+   components,
+   directives,
+   icons: {
+        defaultSet: 'md',
+        aliases,
+        sets: {
+                md,
+        },
+   },
 })
 // Pinia
 import { createPinia } from 'pinia'
@@ -21,7 +29,7 @@ pinia.use(piniaPluginPersistedstate);
 
 const app = createApp(App)
 
-app.use(pinia)
+app.use(createPinia())
 app.use(router)
 app.use(vuetify)
 
diff --git a/src/type/market/Market.ts b/src/type/market/Market.ts
new file mode 100644
index 0000000..8b7570d
--- /dev/null
+++ b/src/type/market/Market.ts
@@ -0,0 +1,6 @@
+export interface MarketData {
+        title: string;
+        description: string;
+        price: number;
+        cover: string;
+}
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 3617de8..a6a349a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -110,13 +110,13 @@ const loginEvent = function (){
 }
 
 .form-item input{
-  height: 22px ;
+  height: 32px ;
   width: 65%;
   border: none;
   outline: none;
   border-radius:  20px;
   background-color: #f0eae1;
-  color:  #094255;
+  color: #000000;
   margin-bottom: 0;
   padding: .5rem .75rem;
   font-size: 1rem;
diff --git a/src/views/market/index.vue b/src/views/market/index.vue
index 8d2daa8..9f234d9 100644
--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@@ -8,7 +8,7 @@ const searchParam = reactive({
 
 // 创建 15 条模拟数据
 const marketCards = reactive<MarketData[]>([
-  { title: 'Product 1', description: 'Description for product 1', price: 10, cover: '' },
+  { title: 'Product 1', description: 'Description for product 1', price: 10, cover: 'https://www.clearstreet.io/imgs/home/header/webp/ct_header_end76.webp' },
   { title: 'Product 2', description: 'Description for product 2', price: 20, cover: '' },
   { title: 'Product 3', description: 'Description for product 3', price: 30, cover: '' },
   { title: 'Product 4', description: 'Description for product 4', price: 40, cover: '' },
@@ -48,8 +48,8 @@ const marketCards = reactive<MarketData[]>([
 
 <style scoped>
 .market-view{
-  width: 100vw;
-  height: 100vh;
+  min-width: 100vw;
+  min-height: 100vh;
   background-color: #f0eae1 ;
   overflow: hidden;
 }
@@ -65,7 +65,7 @@ const marketCards = reactive<MarketData[]>([
 
 .top-search-bar input{
   width: 50vw;
-  height: 35px;
+  height: 45px;
   margin:0 auto;
   border-radius: 15px;
   font-size: 20px;
@@ -84,9 +84,10 @@ const marketCards = reactive<MarketData[]>([
   display: grid;
   margin: 0 auto;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  max-width: calc(4 * 400px + 3 * 20px + 10vw); /* 控制最大宽度以限制列数 */
+  max-width: calc(4 * 350px + 3 * 20px + 10vw); /* 控制最大宽度以限制列数 */
   gap: 20px; /* 元素之间的间隔 */
   padding: 0 5vw; /* 左右 padding 为 5vw */
+  grid-auto-rows: 650px;
 }
 
 </style>
\ No newline at end of file