diff --git a/components/FavoriteButton.tsx b/components/FavoriteButton.tsx
new file mode 100644
index 0000000..f35b47d
--- /dev/null
+++ b/components/FavoriteButton.tsx
@@ -0,0 +1,21 @@
+import axios from "axios";
+import React, {useCallback,useMemo} from "react";
+
+import useCurrentUser from "@/hooks/useCurrentUser";
+import useFavorite from "@/hooks/useFavorite";
+import { AiOutlinePlus } from "react-icons/ai"
+
+interface FavoriteButtonProps {
+    movieId: string
+}
+
+
+const FavoriteButton: React.FC<FavoriteButtonProps> = ({movieId}) => {
+    return (
+        <div className="cursor-pointer group/item w-6 h-6 lg:w-10 lg:h-10 border-white border-2 rounded-full flex justify-center items-center transition hover:border-neutral-300  ">
+        <AiOutlinePlus className="text-white" size={25} />
+        </div>
+    )
+}
+
+export default FavoriteButton;
diff --git a/components/MovieCard.tsx b/components/MovieCard.tsx
index ddc20d2..8d48202 100644
--- a/components/MovieCard.tsx
+++ b/components/MovieCard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { BsFillPlayFill } from "react-icons/bs";
+import FavoriteButton from "./FavoriteButton"
 
 interface MovieCardProps {
     data: Record<string,any>[];
@@ -27,6 +28,7 @@ const MovieCard: React.FC<MovieCardProps> = ({ data }) => {
                         <div className="cursor-pointer w-6 h-6 lg:w-10 lg:h-10 bg-white rounded-full flex justify-center items-center transition hover:bg-neutral-300" onClick={() => {}}>
                     <BsFillPlayFill size={30} />
                         </div>
+                    <FavoriteButton movieId={data?.id} />
                     </div>
                 <p className="text-green-400 font-semibold mt-4">
                     New <span className="text-white">2023</span>
diff --git a/hooks/useFavorite.ts b/hooks/useFavorite.ts
new file mode 100644
index 0000000..27ef00e
--- /dev/null
+++ b/hooks/useFavorite.ts
@@ -0,0 +1,18 @@
+import useSWR from 'swr';
+import fetcher from '@/lib/fetcher';
+
+const useFavorite = () => {
+    const {data,error,isLoading, mutate} = useSWR('/api/favorites',fetcher,{
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    });
+    return {
+        data,
+        error,
+        isLoading,
+        mutate
+    }
+}
+
+export default useFavorite;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d1dbb44..b1e0c9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "bcrypt": "^5.1.0",
         "eslint": "8.42.0",
         "eslint-config-next": "13.4.4",
-        "loadash": "^1.0.0",
         "lodash": "^4.17.21",
         "next": "13.4.4",
         "next-auth": "^4.22.1",
@@ -2998,12 +2997,6 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
-    "node_modules/loadash": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/loadash/-/loadash-1.0.0.tgz",
-      "integrity": "sha512-xlX5HBsXB3KG0FJbJJG/3kYWCfsCyCSus3T+uHVu6QL6YxAdggmm3QeyLgn54N2yi5/UE6xxL5ZWJAAiHzHYEg==",
-      "deprecated": "Package is unsupport. Please use the lodash package instead."
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/pages/api/favorite.ts b/pages/api/favorite.ts
new file mode 100644
index 0000000..e074b95
--- /dev/null
+++ b/pages/api/favorite.ts
@@ -0,0 +1,61 @@
+import prismadb from '@/lib/prismadb';
+import { NextApiRequest,NextApiResponse } from "next";
+import { without } from "lodash";
+
+import serverAuth from '@/lib/serverAuth';
+
+export default async function handler(res: NextApiResponse,req:NextApiRequest) {
+    try{
+        if (req.method === "POST"){
+            const { currentUser } = await serverAuth(req);
+            const { movieId } = req.body;
+            const existingMovie = await prismadb.movie.findUnique({
+                where: {
+                    id: movieId,
+                }
+            });
+            if(!existingMovie){
+                throw new Error("ID Non Valido!")
+            }
+            const user = await prismadb.user.update({
+                where: {
+                    email: currentUser.email || '',
+                },
+                data: {
+                    favoriteIds: {
+                        push: movieId,
+                    }
+                }
+            })
+            return res.status(200).json(user)
+        }
+        if(req.method === "DELETE"){
+            const { currentUser } = await serverAuth(req);
+            const { movieId } = req.body;
+            const existingMovie = await prismadb.movie.findUnique({
+                where: {
+                    id: movieId,
+                }
+            });
+            if(!existingMovie){
+                throw new Error("ID Non Valido!");
+            }
+            const updatedFavoritesId = without(currentUser.favoriteIds,movieId);
+            const updatedUser = await prismadb.user.update({
+                where: {
+                    email: currentUser.email || '',
+                },
+                data: {
+                    favoriteIds: {
+                        push: updatedFavoritesId,
+                    }
+                }
+            })
+            return res.status(200).json(updatedUser);
+        }
+        return res.status(405).end()
+    }catch(error){
+        console.log(error)
+        res.status(400).end()
+    }
+}
\ No newline at end of file
diff --git a/pages/api/favorites.ts b/pages/api/favorites.ts
new file mode 100644
index 0000000..010e4c0
--- /dev/null
+++ b/pages/api/favorites.ts
@@ -0,0 +1,25 @@
+import prismadb from '@/lib/prismadb';
+import { NextApiRequest,NextApiResponse } from "next";
+import serverAuth from '@/lib/serverAuth';
+
+export default async function handler(res: NextApiResponse,req:NextApiRequest) {
+    if(req.method !== "GET"){
+        return res.status(405).end()
+    }
+    try {
+        const { currentUser } = await serverAuth(req);
+        const favoritesMovie = await prismadb.movie.findMany({
+            where: {
+                id: {
+                    in: currentUser?.favoriteIds,
+                }
+            }
+        })
+        return res.status(200).json(favoritesMovie);
+    }catch(error){
+        console.log(error)
+        return res.status(400).end()
+    }
+
+
+}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index be3f03d..70c23b2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -28,7 +28,7 @@ export default function Home() {
     <>
     <Navbar />
     <Billboard />
-    <div>
+    <div className="pb-40">
       <MovieList title="Popolari" data={film} />
     </div>
     </>