diff --git a/front/pages/recipes/_id.vue b/front/pages/recipes/_id.vue
new file mode 100644
index 0000000..970f41b
--- /dev/null
+++ b/front/pages/recipes/_id.vue
@@ -0,0 +1,21 @@
+<template>
+    <ShowRecipe style="width: 60%"/>
+</template>
+
+<script>
+    import ShowRecipe from "../../components/Recipes/ShowRecipe";
+
+    export default {
+        components: {ShowRecipe},
+        validate({params}) {
+            return /^\d+$/.test(params.id)
+        },
+        name: '_id',
+        auth: false
+    };
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/front/pages/recipes/index.vue b/front/pages/recipes/index.vue
new file mode 100644
index 0000000..605dffd
--- /dev/null
+++ b/front/pages/recipes/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <div style="width: 100%">
+        <Row type="flex" justify="center">
+            <AddRecipeModal style="margin-bottom: 20px"/>
+        </Row>
+        <Row type="flex" justify="center">
+            <SearchRecipe style="width: 80%"/>
+        </Row>
+    </div>
+</template>
+
+<script>
+    import AddRecipeModal from "../../components/Recipes/AddRecipeModal";
+    import SearchRecipe from "../../components/Recipes/SearchRecipe";
+
+    export default {
+        name: 'recipes',
+        auth: false,
+        components: {
+            AddRecipeModal,
+            SearchRecipe
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>