diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index a06131a..5bed6ce 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,9 +1,24 @@
 import React from "react";
+import Star from "./Star";
 
-const Card = ({ movie }) => {
+const Card = ({ movie, favouriteList, setFavouriteList }) => {
     const { Title, Year, imdbID, Poster } = movie;
     return (
-        <div className="h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary">
+        <div className="relative h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary bg-secondary">
+            {favouriteList?.includes(imdbID) ? (
+                <Star
+                    fill="#FFD700"
+                    favouriteList={favouriteList}
+                    setFavouriteList={setFavouriteList}
+                    movie={movie}
+                />
+            ) : (
+                <Star
+                    favouriteList={favouriteList}
+                    setFavouriteList={setFavouriteList}
+                    movie={movie}
+                />
+            )}
             <img src={Poster} alt={Title} className="h-[85%] w-full" />
             <div className="flex justify-between px-3 pt-1 text-sm">
                 <h6 className="text-quadnary">{Title}</h6>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 4954f4e..6bba220 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,9 +1,10 @@
 import React from 'react'
+import { Link } from 'react-router-dom';
 
 const Header = () => {
  return (
     <header className="fixed z-20 w-full h-[5vh] py-3 px-6 bg-secondary">
-        <a href="/">DigiFlix</a>
+        <Link href="/" className='text-quadnary text-2xl font-semibold'>DigiFlix</Link>
     </header>
 )
 };
diff --git a/src/components/Star.jsx b/src/components/Star.jsx
new file mode 100644
index 0000000..398b6be
--- /dev/null
+++ b/src/components/Star.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+const Star = ({
+    size = 5,
+    fill = "#00000000",
+    stroke = "#DAA520",
+    favouriteList,
+    setFavouriteList,
+    movie,
+}) => {
+    // Calculate points for a five-pointed star
+    const points = [];
+    const outerRadius = size / 2;
+    const innerRadius = outerRadius * 0.382; // Golden ratio
+
+    for (let i = 0; i < 10; i++) {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const angle = (Math.PI / 5) * i - Math.PI / 2;
+        const x = radius * Math.cos(angle) + size / 2;
+        const y = radius * Math.sin(angle) + size / 2;
+        points.push(`${x},${y}`);
+    }
+
+    const handleFavouriteList = () => {
+        favouriteList?.includes(movie?.imdbID)
+            ? setFavouriteList((prevList) =>
+                  prevList?.filter((id) => id !== movie?.imdbID)
+              )
+            : setFavouriteList((prevList) => [...prevList, movie?.imdbID]);
+        let localStorageData = JSON.parse(window.localStorage.getItem("favouriteMovies"));
+        console.log(localStorageData)
+        window.localStorage.setItem("favouriteMovies", JSON.stringify({movies: [...localStorageData, movie]}));
+    };
+
+    return (
+        <svg
+            height="1em"
+            width="1em"
+            viewBox={`0 0 ${size} ${size}`}
+            className="absolute top-1 right-1"
+            onClick={handleFavouriteList}
+        >
+            <polygon
+                height="1em"
+                width="1em"
+                points={points.join(" ")}
+                fill={fill}
+                stroke={stroke}
+                strokeWidth={size / 15}
+                className="drop-shadow-2xl shadow-[#000] shadow-2xl"
+            />
+        </svg>
+    );
+};
+
+export default Star;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 7b9f261..2470691 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -11,10 +11,11 @@ const HomePage = () => {
     const [inputValue, setInputValue] = useState("");
     const [searchValue, setSearchValue] = useState("");
     const [page, setPage] = useState(1);
+    const [favouriteList, setFavouriteList] = useState([]);
+    const [showFavourite, setShowFavourite] = useState(false);
     const { data, loading, error } = useFetch(
         url + "&s=" + searchValue + "&page=" + page
     );
-
     const handlePageChange = (e) => {
         setPage(e?.target?.textContent);
     };
@@ -24,7 +25,7 @@ const HomePage = () => {
     };
     return (
         <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
-            <div>
+            <div className="flex items-center gap-10">
                 <form className="flex gap-3 items-center">
                     <input
                         type="text"
@@ -34,41 +35,67 @@ const HomePage = () => {
                         onChange={(event) =>
                             setInputValue(event?.target?.value)
                         }
-                        className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary"
+                        className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
                     />
                     <button
                         type="button"
-                        className="px-4 h-full border border-quadnary text-quadnary"
+                        className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
                         onClick={handleSearch}
                     >
                         Search
                     </button>
                 </form>
-            </div>
-            {data?.Search?.length > 0 && (
-                <div className="flex flex-col items-center m-10">
-                    {loading && (
-                        <svg
-                            className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
-                            viewBox="0 0 24 24"
-                            fill="#fff"
-                        ></svg>
-                    )}
-                    <div className="flex flex-wrap gap-4 mb-6 justify-center">
-                        {data?.Search?.map((movie) => (
-                            <Card key={movie?.imdbID} movie={movie} />
-                        ))}
-                    </div>
-                    <Pagination
-                        sx={{ bgcolor: "#fff" }}
-                        onChange={handlePageChange}
-                        page={Number(page)}
-                        count={Math.ceil(data?.totalResults / 10)}
-                        variant="outlined"
-                        shape="rounded"
+                <div className="">
+                    <label htmlFor="favourite">Favourites</label>
+                    <input
+                        type="checkbox"
+                        name="favourite"
+                        id="favourite"
+                        onClick={() => setShowFavourite((prev) => !prev)}
                     />
                 </div>
-            )}
+            </div>
+            {(showFavourite && (
+                <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
+                {favouriteList?.map((movie) => (
+                    <Card
+                        key={movie?.imdbID}
+                        movie={movie}
+                        setFavouriteList={setFavouriteList}
+                        favouriteList={favouriteList}
+                    />
+                ))}
+            </div>
+            )) ||
+                (data?.Search?.length > 0 && (
+                    <div className="flex flex-col items-center m-10">
+                        {loading && (
+                            <svg
+                                className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
+                                viewBox="0 0 24 24"
+                                fill="#fff"
+                            ></svg>
+                        )}
+                        <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
+                            {data?.Search?.map((movie) => (
+                                <Card
+                                    key={movie?.imdbID}
+                                    movie={movie}
+                                    setFavouriteList={setFavouriteList}
+                                    favouriteList={favouriteList}
+                                />
+                            ))}
+                        </div>
+                        <Pagination
+                            sx={{ bgcolor: "#6B8A7A" }}
+                            onChange={handlePageChange}
+                            page={Number(page)}
+                            count={Math.ceil(data?.totalResults / 10)}
+                            variant="outlined"
+                            shape="rounded"
+                        />
+                    </div>
+                ))}
         </div>
     );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 73fb346..e21705e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,10 +2,10 @@ export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
         colors: {
-            primary: "#191A19",
-            secondary: "#1E5128",
-            ternary: "#4E9F3D",
-            quadnary: "#D8E9A8",
+            primary: "#6B8A7A",
+            secondary: "#254336",
+            ternary: "#B7B597",
+            quadnary: "#DAD3BE",
         },
         extend: {},
     },