diff --git a/frontend/src/components/input_recipe.vue b/frontend/src/components/input_recipe.vue
index e04fb25..37eea5a 100644
--- a/frontend/src/components/input_recipe.vue
+++ b/frontend/src/components/input_recipe.vue
@@ -62,18 +62,23 @@
     </el-col>
   </el-row>
 </template>
-
 <script>
 import axios from 'axios';
 export default {
-  inject: ['reload'],
+  props: ['recipe_'],
+  watch: {
+    recipe_(val) {
+      this.form = val;
+      this.recipe_id = val.id;
+    },
+  },
   data: function() {
     return {
       form: {
-        name: '',
-        recipe_type: 'meat',
-        difficulty: '1',
-        rate: '1',
+        name: null,
+        recipe_type: null,
+        difficulty: null,
+        rate: null,
         note: null,
       },
       rules: {
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 83ea4bf..50fbfdc 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -1,5 +1,38 @@
+const type_map = {
+  vegetable: '青菜',
+  meat: '肉',
+  soup: '汤',
+};
+const rate_map = {
+  1: '🍚',
+  2: '🍚 🍚',
+  3: '🍚 🍚 🍚',
+  4: '🍚 🍚 🍚 🍚',
+  5: '🍚 🍚 🍚 🍚 🍚',
+};
+const difficulty_map = {
+  1: '⭐',
+  2: '⭐ ⭐',
+  3: '⭐ ⭐ ⭐',
+  4: '⭐ ⭐ ⭐ ⭐',
+  5: '⭐ ⭐ ⭐ ⭐ ⭐',
+};
+function formatRecipeType(recipe_type) {
+  return type_map[recipe_type];
+}
+function formatRate(rate) {
+  return rate_map[rate];
+}
+function formatDifficulty(difficulty) {
+  return difficulty_map[difficulty];
+}
+
+
 module.exports = {
   RECIPE_TYPE_VEGETABLE: 'vegetable',
   RECIPE_TYPE_META: 'meat',
   RECIPE_TYPE_SOUP: 'soup',
+  formatRecipeType,
+  formatDifficulty,
+  formatRate,
 }
diff --git a/frontend/src/views/home.vue b/frontend/src/views/home.vue
index 9fcc374..fc8c6ae 100644
--- a/frontend/src/views/home.vue
+++ b/frontend/src/views/home.vue
@@ -40,7 +40,7 @@
     </el-col>
   </el-row>
   <el-row justify="center">
-    <el-col :span="18"> <input_recipe></input_recipe> </el-col>
+    <el-col :span="18"> <input_recipe :recipe="{}"></input_recipe> </el-col>
   </el-row>
 </template>
 
diff --git a/frontend/src/views/recipeDetail.vue b/frontend/src/views/recipeDetail.vue
index 272e33b..15c5528 100644
--- a/frontend/src/views/recipeDetail.vue
+++ b/frontend/src/views/recipeDetail.vue
@@ -5,17 +5,27 @@
     v-bind:content="recipe.name"
   ></el-page-header>
 
-  <div v-if="recipe != null">
-    <el-row :gutter="10">
-      <el-col :span="8"> 类型：{{ recipe.recipe_type }} </el-col>
-      <el-col :span="8"> 难度：{{ recipe.difficulty }} </el-col>
-      <el-col :span="8"> 评分：{{ recipe.rate }} </el-col>
+  <div v-if="recipe != null" class="content">
+    <el-row justify="center">
+      <el-col :span="18">
+        <el-row justify="center">
+          <el-col :span="8">
+            类型：{{ constants.formatRecipeType(recipe.recipe_type) }}
+          </el-col>
+          <el-col :span="8">
+            难度：{{ constants.formatDifficulty(recipe.difficulty) }}
+          </el-col>
+          <el-col :span="8">
+            评分：{{ constants.formatRate(recipe.rate) }}
+          </el-col>
+        </el-row>
+        <el-row> 备注：{{ recipe.note }} </el-row>
+      </el-col>
     </el-row>
-    <el-row :gutter="10"> 备注：{{ recipe.note }} </el-row>
   </div>
   <el-row justify="center">
     <el-col :span="18">
-      <input_recipe :recipe-id="recipe.id"></input_recipe>
+      <input_recipe :recipe-id="recipe.id" :recipe_="recipe"></input_recipe>
     </el-col>
   </el-row>
 </template>
@@ -24,12 +34,14 @@ import axios from 'axios';
 import 'element-plus/dist/index.css';
 import router from '@/router/index';
 import input_recipe from '@/components/input_recipe.vue';
+import constants from '@/utils/constants.js';
 export default {
   name: 'RecipeDetail',
   components: { input_recipe },
   data: function() {
     return {
       recipe: {},
+      constants: constants,
     };
   },
   mounted() {
@@ -47,4 +59,8 @@ export default {
 
 <style>
 @import url('//unpkg.com/element-plus/dist/index.css');
+
+.content {
+  padding: 20px 10px;
+}
 </style>