diff --git a/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.styled.tsx b/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.styled.tsx
new file mode 100644
index 0000000..4f210a9
--- /dev/null
+++ b/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.styled.tsx
@@ -0,0 +1 @@
+import styled from 'styled-components';
diff --git a/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.tsx b/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.tsx
new file mode 100644
index 0000000..927c957
--- /dev/null
+++ b/src/components/AddRecipe/AddRecipeForm/AddRecipeForm.tsx
@@ -0,0 +1,33 @@
+import RecipeDescriptionFields from 'components/AddRecipe/RecipeDescriptionFields';
+import RecipeIngredientsFields from 'components/AddRecipe/RecipeIngredientsFields';
+import RecipePreparationFields from 'components/AddRecipe/RecipePreparationFields';
+import { FC, FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+//TODO install React-Select
+// містить стейт => зберігаються заповнені у формі  дані
+// всі поля required, валідуються. Інфа якщо значення невалідне
+const AddRecipeForm: FC = () => {
+  const inputValues = 'test';
+  const navigate = useNavigate();
+
+  const handleFormSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    navigate('/my');
+  };
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <RecipeDescriptionFields
+        value={inputValues}
+        onSubmit={handleFormSubmit}
+      />
+      <RecipeIngredientsFields />
+      <RecipePreparationFields />
+      <button type="submit">Add</button>
+    </form>
+  );
+};
+
+export default AddRecipeForm;
diff --git a/src/components/AddRecipe/AddRecipeForm/index.ts b/src/components/AddRecipe/AddRecipeForm/index.ts
new file mode 100644
index 0000000..dcc7501
--- /dev/null
+++ b/src/components/AddRecipe/AddRecipeForm/index.ts
@@ -0,0 +1 @@
+export { default } from './AddRecipeForm';
diff --git a/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.styled.tsx b/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.styled.tsx
new file mode 100644
index 0000000..4f210a9
--- /dev/null
+++ b/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.styled.tsx
@@ -0,0 +1 @@
+import styled from 'styled-components';
diff --git a/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.tsx b/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.tsx
new file mode 100644
index 0000000..ea05142
--- /dev/null
+++ b/src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.tsx
@@ -0,0 +1,28 @@
+import { FC, FormEvent } from 'react';
+
+interface RecipeDescriptionFieldsProps {
+  value: string;
+  onSubmit: (e: FormEvent, data: unknown) => void;
+}
+
+// time 5mins-120mins. Interval 5mins
+// selects must have visible 6 options, other scroll
+const RecipeDescriptionFields: FC<RecipeDescriptionFieldsProps> = ({
+  value,
+  onSubmit,
+}) => {
+  return (
+    <div>
+      <input type="file" name="picture" />
+      <div>
+        <input type="text" name="title" />
+        <input type="text" name="about" />
+        <select name="category"></select>
+        <select name="time"></select>
+        <select name="" />
+      </div>
+    </div>
+  );
+};
+
+export default RecipeDescriptionFields;
diff --git a/src/components/AddRecipe/RecipeDescriptionFields/index.ts b/src/components/AddRecipe/RecipeDescriptionFields/index.ts
new file mode 100644
index 0000000..0343ffb
--- /dev/null
+++ b/src/components/AddRecipe/RecipeDescriptionFields/index.ts
@@ -0,0 +1 @@
+export { default } from './RecipeDescriptionFields';
diff --git a/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.styled.tsx b/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.styled.tsx
new file mode 100644
index 0000000..4f210a9
--- /dev/null
+++ b/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.styled.tsx
@@ -0,0 +1 @@
+import styled from 'styled-components';
diff --git a/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.tsx b/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.tsx
new file mode 100644
index 0000000..a3b1d1f
--- /dev/null
+++ b/src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+const RecipeIngredientsFields = () => {
+  const [count, setCount] = useState<number>(3);
+
+  return (
+    <>
+      <div>
+        <h3>Ingredients</h3>
+        <div>
+          <button
+            onClick={() => {
+              setCount(prev => prev + 1);
+            }}
+          >
+            -
+          </button>
+          <span>{count}</span>
+          <button
+            onClick={() => {
+              setCount(prev => {
+                if (prev === 1) return prev;
+                return prev - 1;
+              });
+            }}
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <ul>
+        {/* Create Item component and map in ul */}
+        <li>
+          <select name="ingredient"></select>
+          <select name="weight"></select>
+          <button>delete</button>
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default RecipeIngredientsFields;
diff --git a/src/components/AddRecipe/RecipeIngredientsFields/index.ts b/src/components/AddRecipe/RecipeIngredientsFields/index.ts
new file mode 100644
index 0000000..9a72fa9
--- /dev/null
+++ b/src/components/AddRecipe/RecipeIngredientsFields/index.ts
@@ -0,0 +1 @@
+export { default } from './RecipeIngredientsFields';
diff --git a/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.styled.tsx b/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.styled.tsx
new file mode 100644
index 0000000..4f210a9
--- /dev/null
+++ b/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.styled.tsx
@@ -0,0 +1 @@
+import styled from 'styled-components';
diff --git a/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.tsx b/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.tsx
new file mode 100644
index 0000000..00b6f45
--- /dev/null
+++ b/src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.tsx
@@ -0,0 +1,10 @@
+const RecipePreparationFields = () => {
+  return (
+    <>
+      <h3>Recipe Preparation</h3>
+      <textarea name="recipe" placeholder="Enter recipe" required />
+    </>
+  );
+};
+
+export default RecipePreparationFields;
diff --git a/src/components/AddRecipe/RecipePreparationFields/index.ts b/src/components/AddRecipe/RecipePreparationFields/index.ts
new file mode 100644
index 0000000..92225fb
--- /dev/null
+++ b/src/components/AddRecipe/RecipePreparationFields/index.ts
@@ -0,0 +1 @@
+export { default } from './RecipePreparationFields';
diff --git a/src/components/AddRecipe/index.ts b/src/components/AddRecipe/index.ts
new file mode 100644
index 0000000..dcc7501
--- /dev/null
+++ b/src/components/AddRecipe/index.ts
@@ -0,0 +1 @@
+export { default } from './AddRecipeForm';
diff --git a/src/components/AddRecipes/AddRecipes.styled.tsx b/src/components/AddRecipes/AddRecipes.styled.tsx
deleted file mode 100644
index cb0ff5c..0000000
--- a/src/components/AddRecipes/AddRecipes.styled.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/components/AddRecipes/AddRecipes.tsx b/src/components/AddRecipes/AddRecipes.tsx
deleted file mode 100644
index 82edcc7..0000000
--- a/src/components/AddRecipes/AddRecipes.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const AddRecipes = () => {
-  return <div></div>;
-};
-
-export default AddRecipes;
diff --git a/src/components/AddRecipes/index.ts b/src/components/AddRecipes/index.ts
deleted file mode 100644
index 14ac36a..0000000
--- a/src/components/AddRecipes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './AddRecipes';
diff --git a/src/components/MainTitle/MainTitle.tsx b/src/components/MainTitle/MainTitle.tsx
new file mode 100644
index 0000000..984b544
--- /dev/null
+++ b/src/components/MainTitle/MainTitle.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+interface IMainTitleProps {
+  title: string;
+}
+
+const MainTitle: FC<IMainTitleProps> = ({ title }) => {
+  return <h2>{title}</h2>;
+};
+
+export default MainTitle;
diff --git a/src/pages/AddRecipesPage.tsx b/src/pages/AddRecipesPage.tsx
index ceff242..046b5fa 100644
--- a/src/pages/AddRecipesPage.tsx
+++ b/src/pages/AddRecipesPage.tsx
@@ -1,7 +1,15 @@
-import { FC } from 'react';
+import AddRecipeForm from 'components/AddRecipe';
+import MainTitle from 'components/MainTitle/MainTitle';
 
-const AddRecipesPage: FC = () => {
-  return <div></div>;
+const AddRecipesPage = () => {
+  return (
+    <>
+      <section>
+        <MainTitle title={'Add recipe'} />
+        <AddRecipeForm />
+      </section>
+    </>
+  );
 };
 
 export default AddRecipesPage;