diff --git a/.gitea/workflows/test.yml b/.gitea/workflows/test.yml
index 5923dbd..bfafd69 100644
--- a/.gitea/workflows/test.yml
+++ b/.gitea/workflows/test.yml
@@ -42,7 +42,7 @@ jobs:
 
           # Run cypress from frontend dir
           cd frontend
-          SPECS=$(ls cypress/e2e/*.cy.js | grep -v demo | grep -v visual | grep -v check | tr '\n' ',')
+          SPECS=$(ls cypress/e2e/*.cy.js | grep -v demo-walkthrough | grep -v visual-check | grep -v check-price | tr '\n' ',')
           npx cypress run --spec "$SPECS" --config video=false
           EXIT_CODE=$?
 
diff --git a/frontend/cypress/e2e/oil-reference.cy.js b/frontend/cypress/e2e/oil-reference.cy.js
index 92cd865..ecd1bd3 100644
--- a/frontend/cypress/e2e/oil-reference.cy.js
+++ b/frontend/cypress/e2e/oil-reference.cy.js
@@ -1,32 +1,32 @@
 describe('Oil Reference Page', () => {
   beforeEach(() => {
     cy.visit('/oils')
-    cy.get('.oil-card, .oils-grid', { timeout: 10000 }).should('exist')
+    cy.get('.oil-chip, .oils-grid', { timeout: 10000 }).should('exist')
   })
 
   it('displays oil grid with items', () => {
     cy.contains('精油价目').should('be.visible')
-    cy.get('.oil-card').should('have.length.gte', 10)
+    cy.get('.oil-chip').should('have.length.gte', 10)
   })
 
   it('shows oil name and price on each chip', () => {
-    cy.get('.oil-card').first().should('contain', '¥')
+    cy.get('.oil-chip').first().should('contain', '¥')
   })
 
   it('filters oils by search', () => {
-    cy.get('.oil-card').then($chips => {
+    cy.get('.oil-chip').then($chips => {
       const initial = $chips.length
       cy.get('input[placeholder*="搜索精油"]').type('薰衣草')
       cy.wait(300)
-      cy.get('.oil-card').should('have.length.lt', initial)
+      cy.get('.oil-chip').should('have.length.lt', initial)
     })
   })
 
   it('toggles between bottle and drop price view', () => {
-    cy.get('.oil-card').first().invoke('text').then(textBefore => {
+    cy.get('.oil-chip').first().invoke('text').then(textBefore => {
       cy.contains('滴价').click()
       cy.wait(300)
-      cy.get('.oil-card').first().invoke('text').should('not.eq', textBefore)
+      cy.get('.oil-chip').first().invoke('text').should('not.eq', textBefore)
     })
   })
 })
diff --git a/frontend/cypress/e2e/performance.cy.js b/frontend/cypress/e2e/performance.cy.js
index 64e3d99..3f55ea3 100644
--- a/frontend/cypress/e2e/performance.cy.js
+++ b/frontend/cypress/e2e/performance.cy.js
@@ -38,7 +38,7 @@ describe('Performance', () => {
   it('oil reference page loads within 3 seconds', () => {
     const start = Date.now()
     cy.visit('/oils')
-    cy.get('.oil-card', { timeout: 3000 }).should('have.length.gte', 1)
+    cy.get('.oil-chip', { timeout: 3000 }).should('have.length.gte', 1)
     cy.then(() => {
       expect(Date.now() - start).to.be.lt(3000)
     })
diff --git a/frontend/cypress/e2e/responsive.cy.js b/frontend/cypress/e2e/responsive.cy.js
index 21924ed..8cc5689 100644
--- a/frontend/cypress/e2e/responsive.cy.js
+++ b/frontend/cypress/e2e/responsive.cy.js
@@ -35,7 +35,7 @@ describe('Responsive Design', () => {
     it('oil reference page works on mobile', () => {
       cy.visit('/oils')
       cy.contains('精油价目').should('be.visible')
-      cy.get('.oil-card').should('have.length.gte', 1)
+      cy.get('.oil-chip').should('have.length.gte', 1)
     })
   })
 
@@ -51,7 +51,7 @@ describe('Responsive Design', () => {
 
     it('oil grid shows multiple columns', () => {
       cy.visit('/oils')
-      cy.get('.oil-card', { timeout: 10000 }).should('have.length.gte', 1)
+      cy.get('.oil-chip', { timeout: 10000 }).should('have.length.gte', 1)
     })
   })
 
diff --git a/frontend/cypress/e2e/visual-check.cy.js b/frontend/cypress/e2e/visual-check.cy.js
index 68549bc..836ac6b 100644
--- a/frontend/cypress/e2e/visual-check.cy.js
+++ b/frontend/cypress/e2e/visual-check.cy.js
@@ -18,7 +18,7 @@ describe('Visual Check - Screenshots', () => {
 
   it('oil reference page', () => {
     cy.visit('/oils', { onBeforeLoad(win) { win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN) } })
-    cy.get('.oil-card', { timeout: 10000 }).should('have.length.gte', 1)
+    cy.get('.oil-chip', { timeout: 10000 }).should('have.length.gte', 1)
     cy.wait(500)
     cy.screenshot('03-oil-reference')
   })
diff --git a/frontend/src/components/RecipeCard.vue b/frontend/src/components/RecipeCard.vue
index b7a4f5b..354a13b 100644
--- a/frontend/src/components/RecipeCard.vue
+++ b/frontend/src/components/RecipeCard.vue
@@ -6,26 +6,31 @@
       <span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
     </div>
 
-    <div class="card-oils">
-      <span v-for="(ing, i) in recipe.ingredients" :key="i" class="card-oil">
-        {{ ing.oil }}
-      </span>
+    <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
+
+    <div class="card-ingredients">
+      <div v-for="(ing, i) in recipe.ingredients" :key="i" class="card-ing-row">
+        <span class="card-oil-name">{{ ing.oil }}</span>
+        <span class="card-oil-drops">{{ ing.drops }}滴</span>
+      </div>
     </div>
 
-    <div class="card-bottom">
-      <span class="card-price">
-        {{ priceInfo.cost }}
-        <span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
-      </span>
-      <button
-        class="card-star"
-        :class="{ favorited: isFav }"
-        @click.stop="$emit('toggle-fav', recipe._id)"
-        :title="isFav ? '取消收藏' : '收藏'"
-      >
-        {{ isFav ? '★' : '☆' }}
-      </button>
+    <div class="card-total">
+      <div class="card-total-inner">
+        <span class="card-total-label">成本</span>
+        <span class="card-total-price">{{ priceInfo.cost }}</span>
+      </div>
+      <span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
     </div>
+
+    <button
+      class="card-star"
+      :class="{ favorited: isFav }"
+      @click.stop="$emit('toggle-fav', recipe._id)"
+      :title="isFav ? '取消收藏' : '收藏'"
+    >
+      {{ isFav ? '★' : '☆' }}
+    </button>
   </div>
 </template>
 
@@ -50,88 +55,151 @@ const isFav = computed(() => recipesStore.isFavorite(props.recipe))
 
 <style scoped>
 .recipe-card {
-  background: #fff;
-  border-radius: 14px;
-  padding: 18px 16px 14px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
+  border-radius: 16px;
+  padding: 20px 18px 16px;
   cursor: pointer;
-  transition: box-shadow 0.2s, transform 0.15s;
+  border: 2px solid transparent;
+  transition: all 0.2s;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+.recipe-card::before {
+  content: '';
+  position: absolute;
+  top: -30px;
+  right: -30px;
+  width: 120px;
+  height: 120px;
+  background: radial-gradient(circle, rgba(122, 158, 126, 0.12) 0%, transparent 70%);
+  border-radius: 50%;
+  pointer-events: none;
 }
 
 .recipe-card:hover {
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
+  border-color: #b8d4c0;
 }
 
 .card-name {
   font-family: 'Noto Serif SC', serif;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 700;
   color: #3e3a44;
   line-height: 1.3;
+  padding-right: 28px;
 }
 
 .card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
+  margin-bottom: 2px;
 }
 
 .card-tag {
   font-size: 11px;
-  padding: 2px 8px;
+  padding: 2px 9px;
   border-radius: 8px;
-  background: #f0ece4;
-  color: #8a7e6b;
+  background: rgba(122, 158, 126, 0.15);
+  color: #5a7d5e;
+  font-weight: 500;
 }
 
-.card-oils {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.card-oil {
+.card-note {
   font-size: 12px;
-  color: #6b6375;
-  background: #f8f7f5;
-  padding: 2px 7px;
+  color: #8a7e6b;
+  background: rgba(201, 168, 76, 0.1);
   border-radius: 6px;
+  padding: 4px 8px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.card-bottom {
+.card-ingredients {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 4px 0;
+}
+
+.card-ing-row {
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(180, 150, 100, 0.15);
+  font-size: 13px;
+}
+
+.card-ing-row:last-child {
+  border-bottom: none;
+}
+
+.card-oil-name {
+  flex: 1;
+  color: #3e3a44;
+  font-weight: 500;
+}
+
+.card-oil-drops {
+  color: #5a7d5e;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.card-total {
+  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
+  border-radius: 10px;
+  padding: 10px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: auto;
-  padding-top: 6px;
+  margin-top: 4px;
 }
 
-.card-price {
-  font-size: 14px;
-  font-weight: 600;
-  color: #4a9d7e;
+.card-total-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-total-label {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+.card-total-price {
+  color: #fff;
+  font-size: 17px;
+  font-weight: 700;
 }
 
 .card-retail {
   font-size: 11px;
-  font-weight: 400;
-  color: #999;
-  margin-left: 6px;
+  color: rgba(255, 255, 255, 0.75);
 }
 
 .card-star {
+  position: absolute;
+  top: 14px;
+  right: 12px;
   background: none;
   border: none;
-  font-size: 20px;
+  font-size: 22px;
   cursor: pointer;
-  color: #ccc;
-  padding: 2px 4px;
+  color: #d4cfc7;
+  padding: 2px;
   line-height: 1;
-  transition: color 0.2s;
+  transition: color 0.2s, transform 0.15s;
+  z-index: 1;
 }
 
 .card-star.favorited {
@@ -140,5 +208,6 @@ const isFav = computed(() => recipesStore.isFavorite(props.recipe))
 
 .card-star:hover {
   color: #f5a623;
+  transform: scale(1.15);
 }
 </style>