diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 5413c686a..ab9a1c17c 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,6 +1,6 @@
 
-import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common'
-import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
+import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
 import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
 export default function Slug() {
diff --git a/pages/recipe/[slug].tsx b/pages/recipe/[slug].tsx
new file mode 100644
index 000000000..1f71ba5be
--- /dev/null
+++ b/pages/recipe/[slug].tsx
@@ -0,0 +1,12 @@
+
+import { Layout, RecipeDetail, RecommendedRecipes } from 'src/components/common'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+
+export default function Slug() {
+  return <div className="page-recipe-detail">
+    <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
+    <RecommendedRecipes data={RECIPE_DATA_TEST} />
+  </div>
+}
+
+Slug.Layout = Layout
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
similarity index 94%
rename from src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
rename to src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
index d43e2d58c..b96b7d4e7 100644
--- a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
+++ b/src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles/utilities";
+@import "../../../styles/utilities";
 
 .recommendedRecipes {
     margin: 6rem auto;
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
similarity index 100%
rename from src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
rename to src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 7de333d3a..868d49e29 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -46,3 +46,4 @@ export { default as TabCommon} from './TabCommon/TabCommon'
 export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
 export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
+export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'
diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts
index ef4461432..07fd04753 100644
--- a/src/components/modules/product-detail/index.ts
+++ b/src/components/modules/product-detail/index.ts
@@ -1,4 +1,3 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
 export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
 export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
-export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'
diff --git a/src/styles/_pages.scss b/src/styles/_pages.scss
new file mode 100644
index 000000000..0855aaada
--- /dev/null
+++ b/src/styles/_pages.scss
@@ -0,0 +1,6 @@
+.page-recipe-detail {
+    margin-bottom: 5.4rem;
+    @screen lg {
+        margin-bottom: 12.8rem;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2e4abf3da..51391b33f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,3 +5,5 @@
 
 @import "~tailwindcss/utilities";
 @import './utilities';
+
+@import './pages'