diff --git a/src/api/add-to-collection.ts b/src/api/add-to-collection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..721ab4f4072d67767ef738b1a6181404e4987b39
--- /dev/null
+++ b/src/api/add-to-collection.ts
@@ -0,0 +1,8 @@
+import { APIInstance } from '.';
+
+const addToCollectionAPI = async (collecId: string, recipeId: string) => {
+  const res = await APIInstance.post('/collection/' + collecId, { recipe_id: recipeId });
+  return res.data;
+};
+
+export default addToCollectionAPI;
diff --git a/src/api/index.ts b/src/api/index.ts
index 40c905e4b37c2b8226a875a96f88027dcb68865c..919a18dc538714376566629de1e0c889838ab833 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -10,6 +10,7 @@ import getCollectionRecipesAPI from './getCollectionRecipes';
 import addRecipeAPI from './add-recipe';
 import getRecipeAPI from './get-recipe';
 import getRecipeVideoAPI from './get-recipe-video';
+import addToCollectionAPI from './add-to-collection';
 
 const APIInstance = axios.create();
 APIInstance.defaults.baseURL = import.meta.env.VITE_REST_URL;
@@ -25,6 +26,7 @@ const API = {
   addRecipe: addRecipeAPI,
   getRecipe: getRecipeAPI,
   getRecipeVideo: getRecipeVideoAPI,
+  addToCollection: addToCollectionAPI,
 };
 
 for (const key in API) {
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index df904ff44596382f3729457da7f5eb8a7b150af7..ecd47d568e34e9f23a10144d7d3b948da32be7db 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -21,8 +21,8 @@ const FormField = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
+    ...props
+  }: ControllerProps<TFieldValues, TName>) => {
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
diff --git a/src/pages/recipe/[id]/AddToCollection.tsx b/src/pages/recipe/[id]/AddToCollection.tsx
index ef8b59f7a92afd395b81d4974ea6c37bdfbb539a..c775f3d13caf6023eeeceb3ed24fe4780e6f117e 100644
--- a/src/pages/recipe/[id]/AddToCollection.tsx
+++ b/src/pages/recipe/[id]/AddToCollection.tsx
@@ -36,7 +36,9 @@ import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import Collection from '../../collection/page';
+import { useEffect, useState } from 'react';
+import { useAPI } from '@/contexts';
+import { useParams } from 'react-router-dom';
 
 const FormSchema = z.object({
   id: z.string({
@@ -50,28 +52,32 @@ interface Collection {
 }
 
 export function SelectForm() {
+  const { api } = useAPI();
+  const { id } = useParams();
+
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   });
 
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    console.log(data);
-  }
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    await api.addToCollection(data.id, id!);
+  };
+
+  const [collections, setCollections] = useState<Collection[]>();
+
+  const fetch = async () => {
+    const result = await api.getCollections();
+    if (!result.data) {
+      return;
+    }
+
+    setCollections(result.data);
+  };
 
-  const collections: Collection[] = [
-    {
-      id: 1,
-      title: 'Hello',
-    },
-    {
-      id: 2,
-      title: 'Hai',
-    },
-    {
-      id: 3,
-      title: 'Ho',
-    },
-  ];
+  useEffect(() => {
+    fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Form {...form}>
@@ -90,13 +96,14 @@ export function SelectForm() {
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
-                    {collections.map((collection, idx) => {
-                      return (
-                        <SelectItem value={`${collection.id}`} key={idx}>
-                          {collection.title}
-                        </SelectItem>
-                      );
-                    })}
+                    {collections &&
+                      collections.map((collection, idx) => {
+                        return (
+                          <SelectItem value={`${collection.id}`} key={idx}>
+                            {collection.title}
+                          </SelectItem>
+                        );
+                      })}
                   </SelectContent>
                 </Select>
                 <FormMessage />
diff --git a/src/pages/recipe/[id]/page.tsx b/src/pages/recipe/[id]/page.tsx
index e4dfc9a6491ee9567914ab7a2637276b492260a3..beb0e185805fe2a3ce4d44363029065e96017bbd 100644
--- a/src/pages/recipe/[id]/page.tsx
+++ b/src/pages/recipe/[id]/page.tsx
@@ -16,6 +16,7 @@ interface Recipe {
 }
 
 const RecipeId = () => {
+  console.log('hai');
   const { id } = useParams();
   const { api } = useAPI();
   const [recipe, setRecipe] = useState<Recipe | null>(null);