diff --git a/frontend/src/components/input_recipe.vue b/frontend/src/components/input_recipe.vue
index fffede5..e04fb25 100644
--- a/frontend/src/components/input_recipe.vue
+++ b/frontend/src/components/input_recipe.vue
@@ -54,7 +54,9 @@
           <el-input type="textarea" v-model="form.note"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">提交</el-button>
+          <el-button type="primary" @click="onSubmit(recipe_id)"
+            >提交</el-button
+          >
         </el-form-item>
       </el-form>
     </el-col>
@@ -77,10 +79,11 @@ export default {
       rules: {
         name: [{ required: true, trigger: 'blur', message: '输入菜名' }],
       },
+      recipe_id: null,
     };
   },
   methods: {
-    onSubmit() {
+    onSubmit(recipe_id) {
       let data = {
         name: this.form.name,
         recipe_type: this.form.recipe_type,
@@ -88,14 +91,25 @@ export default {
         rate: this.form.rate,
         note: this.form.note,
       };
-      axios
-        .post('//localhost:8000/recipe/recipe/', data)
-        .then(function() {
-          location.reload();
-        })
-        .catch(function(error) {
-          console.log(error);
-        });
+      if (!recipe_id) {
+        axios
+          .post('//localhost:8000/recipe/recipe/', data)
+          .then(function() {
+            location.reload();
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      } else {
+        axios
+          .put('//localhost:8000/recipe/recipe/' + recipe_id, data)
+          .then(function() {
+            location.reload();
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      }
     },
   },
 };
diff --git a/frontend/src/views/home.vue b/frontend/src/views/home.vue
index bf65da2..9fcc374 100644
--- a/frontend/src/views/home.vue
+++ b/frontend/src/views/home.vue
@@ -48,6 +48,7 @@
 import axios from 'axios';
 import input_recipe from '@/components/input_recipe.vue';
 import router from '@/router/index';
+import 'element-plus/dist/index.css';
 // const api_root = 'localhost:8000'
 const type_map = {
   vegetable: '青菜',
@@ -115,7 +116,6 @@ export default {
   },
 };
 </script>
-
 <style>
 .el-row {
   margin-bottom: 20px;
@@ -126,4 +126,12 @@ export default {
 .el-col {
   border-radius: 4px;
 }
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
 </style>
diff --git a/frontend/src/views/recipeDetail.vue b/frontend/src/views/recipeDetail.vue
index 124c932..d24f2f6 100644
--- a/frontend/src/views/recipeDetail.vue
+++ b/frontend/src/views/recipeDetail.vue
@@ -1,8 +1,55 @@
 <template>
-  recipe detail
+  <!-- <div @click="goHome()">
+    首页
+  </div> -->
+  <el-page-header @back="goHome" content="$recipe"></el-page-header>
+
+  <div v-if="recipe != null">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-icon :size="25"> <bowl /> </el-icon>{{ recipe.name }}
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="6" :offset="6"> 类型：{{ recipe.recipe_type }} </el-col>
+      <el-col :span="6"> 难度：{{ recipe.difficulty }} </el-col>
+      <el-col :span="6"> 评分：{{ recipe.rate }} </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>
+    </el-col>
+  </el-row>
 </template>
 <script>
+import axios from 'axios';
+import 'element-plus/dist/index.css';
+import { Bowl } from '@element-plus/icons';
+import router from '@/router/index';
+import input_recipe from '@/components/input_recipe.vue';
 export default {
   name: 'RecipeDetail',
+  components: { Bowl, input_recipe },
+  data: function() {
+    return {
+      recipe: null,
+    };
+  },
+  mounted() {
+    axios
+      .get('//localhost:8000/recipe/recipe/' + this.$route.params.id)
+      .then((response) => (this.recipe = response.data));
+  },
+  methods: {
+    goHome() {
+      router.push({ name: 'Home' });
+    },
+  },
 };
 </script>
+
+<style>
+@import url('//unpkg.com/element-plus/dist/index.css');
+</style>