diff --git a/features/home/actions/Hero/addHeroBannerMediaToSaved.ts b/features/home/actions/Hero/addHeroBannerMediaToSaved.ts
new file mode 100644
index 0000000..8a1c3a1
--- /dev/null
+++ b/features/home/actions/Hero/addHeroBannerMediaToSaved.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import { backendFetch } from "@/shared/helpers/backendFetch";
+
+export const addHeroBannerMediaToSaved = async (mediaId: string) => {
+  try {
+    return await backendFetch("collections/sys", {
+      method: "POST",
+      body: JSON.stringify({
+        name: "Saved",
+        itemId: mediaId,
+      }),
+    });
+  } catch (error) {
+    console.error("Error adding media to saved list:", error);
+    return { success: false, message: "Failed to add media to saved list." };
+  }
+};
diff --git a/features/home/actions/getRecommenationAnime.ts b/features/home/actions/Hero/getRecommenationAnime.ts
similarity index 100%
rename from features/home/actions/getRecommenationAnime.ts
rename to features/home/actions/Hero/getRecommenationAnime.ts
diff --git a/features/home/actions/Hero/removeHeroBannerMediaFromSaved.ts b/features/home/actions/Hero/removeHeroBannerMediaFromSaved.ts
new file mode 100644
index 0000000..0c2c873
--- /dev/null
+++ b/features/home/actions/Hero/removeHeroBannerMediaFromSaved.ts
@@ -0,0 +1,21 @@
+"use server";
+
+import { backendFetch } from "@/shared/helpers/backendFetch";
+
+export const removeHeroBannerMediaFromSaved = async (mediaId: string) => {
+  try {
+    return await backendFetch("collections/sys", {
+      method: "DELETE",
+      body: JSON.stringify({
+        name: "Saved",
+        itemId: mediaId,
+      }),
+    });
+  } catch (error) {
+    console.error("Error removing media from saved list:", error);
+    return {
+      success: false,
+      message: "Failed to remove media from saved list.",
+    };
+  }
+};
diff --git a/features/home/sections/Hero/components/AddToList.tsx b/features/home/sections/Hero/components/AddToList.tsx
new file mode 100644
index 0000000..255a7c4
--- /dev/null
+++ b/features/home/sections/Hero/components/AddToList.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { addHeroBannerMediaToSaved } from "@/features/home/actions/Hero/addHeroBannerMediaToSaved";
+import { removeHeroBannerMediaFromSaved } from "@/features/home/actions/Hero/removeHeroBannerMediaFromSaved";
+import { useAuth } from "@/shared/contexts/AuthContext";
+import { BackendResponse } from "@/shared/helpers/backendFetch";
+import { Button } from "@/shared/libs/shadcn/ui/button";
+import { Icon } from "@iconify/react";
+import React from "react";
+
+const AddToList = ({
+  mediaId,
+  isInCollection,
+}: {
+  mediaId: string;
+  isInCollection: boolean;
+}) => {
+  const { session } = useAuth();
+  const [isSaved, setIsSaved] = React.useState<boolean>(isInCollection);
+
+  const handleAddToList = async () => {
+    setIsSaved(!isSaved);
+    const result = (await addHeroBannerMediaToSaved(mediaId).catch(
+      (_) => void _,
+    )) as BackendResponse<undefined>;
+    if (!result || !result.success) {
+      setIsSaved((prev) => !prev);
+    }
+  };
+  const handleRemoveFromList = async () => {
+    setIsSaved(!isSaved);
+    const result = (await removeHeroBannerMediaFromSaved(mediaId).catch(
+      (_) => void _,
+    )) as BackendResponse<undefined>;
+    if (!result || !result.success) {
+      setIsSaved((prev) => !prev);
+    }
+  };
+
+  return (
+    <div>
+      {session?.user &&
+        (isSaved ? (
+          <Button
+            onClick={handleRemoveFromList}
+            variant="secondary"
+            className="h-full flex gap-1 px-4 rounded-xl border border-neutral-400/10 bg-neutral-950/20 hover:bg-neutral-950/40 backdrop-blur-lg text-neutral-200"
+          >
+            <Icon icon="boxicons:bookmark-filled" className="size-5.5" />
+            <span>Remove from List</span>
+          </Button>
+        ) : (
+          <Button
+            onClick={handleAddToList}
+            variant="secondary"
+            className="h-full flex gap-1 px-4 rounded-xl border border-neutral-400/10 bg-neutral-950/20 hover:bg-neutral-950/40 backdrop-blur-lg text-neutral-200"
+          >
+            <Icon icon="boxicons:bookmark" className="size-5.5" />
+            <span>Add to List</span>
+          </Button>
+        ))}
+    </div>
+  );
+};
+
+export default AddToList;
diff --git a/features/home/sections/Hero/components/Swiper.tsx b/features/home/sections/Hero/components/Swiper.tsx
index 82239d8..40322f5 100644
--- a/features/home/sections/Hero/components/Swiper.tsx
+++ b/features/home/sections/Hero/components/Swiper.tsx
@@ -2,114 +2,94 @@
 import "swiper/css";
 import { Badge } from "@/shared/libs/shadcn/ui/badge";
 import { Button } from "@/shared/libs/shadcn/ui/button";
-import { useRouter } from "next/navigation";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import AddToList from "./AddToList";
 
 export interface HeroSwiperProps {
   data: {
     id: string;
-    isClickable: boolean;
     title: string;
-    tags: string[];
-    description: string;
-    buttonContent: string;
-    buttonLink: string;
+    slug: string;
     imageUrl: string;
-    startDate: string;
-    endDate: string;
+    synopsis: string;
+    genres: {
+      slug: string;
+      name: string;
+    }[];
+    isInCollection: boolean;
   }[];
 }
 
 const HeroSwiper = (props: HeroSwiperProps) => {
-  const router = useRouter();
   return (
     <div className="h-full rounded-lg overflow-hidden">
       <Swiper
         spaceBetween={0}
         slidesPerView={1}
-        onSlideChange={() => console.log("slide change")}
-        onSwiper={(swiper) => console.log(swiper)}
         className="h-full"
         autoplay={{ delay: 5000, disableOnInteraction: false }}
         modules={[Autoplay, Pagination, Navigation]}
       >
-        {props.data.map((slide) =>
-          slide.imageUrl ? (
-            // Slide with image background
-            <SwiperSlide key={slide.id} className="relative overflow-hidden">
-              <img
-                src={slide.imageUrl}
-                alt={slide.title}
-                className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
-              />
-              {slide.title && slide.description && (
-                <div
-                  className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
-                  style={{
-                    background:
-                      "linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
-                  }}
-                >
-                  <h1 className="text-6xl font-semibold tracking-tight">
-                    {slide.title}
-                  </h1>
-                  <div className="mt-4 flex gap-1.5">
-                    {slide.tags.map((tag) => (
-                      <Badge
-                        className="bg-neutral-200 text-neutral-800"
-                        key={tag}
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                  <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
-                    {slide.description}
-                  </p>
-                  {slide.isClickable && (
-                    <Button
-                      size="lg"
-                      onClick={() => router.push(slide.buttonLink)}
-                      className="mt-6"
-                    >
-                      {slide.buttonContent}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </SwiperSlide>
-          ) : (
-            // Fallback for slides without image
-            <SwiperSlide
-              key={slide.id}
-              className="relative overflow-hidden bg-neutral-800 flex flex-col items-center text-center pt-18"
+        {props.data.map((slide, index) => (
+          <SwiperSlide key={index} className="relative overflow-hidden">
+            <img
+              src={slide.imageUrl}
+              alt={slide.title}
+              className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
+            />
+            <div
+              className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
+              style={{
+                background:
+                  "linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
+              }}
             >
               <h1 className="text-6xl font-semibold tracking-tight">
                 {slide.title}
               </h1>
-              <div className="mt-4 flex justify-center gap-1.5">
-                {slide.tags.map((tag) => (
-                  <Badge className="bg-neutral-200 text-neutral-800" key={tag}>
-                    {tag}
-                  </Badge>
+              <div className="mt-4 flex gap-1.5">
+                {slide.genres.map((genre) => (
+                  <Link href={`/genres/${genre.slug}`} key={genre.slug}>
+                    <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
+                      {genre.name}
+                    </Badge>
+                  </Link>
                 ))}
               </div>
-              <p className="mt-4 font-medium text-base max-w-[40vw] mx-auto">
-                {slide.description}
+              <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
+                {slide.synopsis}
               </p>
-              {slide.isClickable && (
-                <Button
-                  size="lg"
-                  onClick={() => router.push(slide.buttonLink)}
-                  className="mt-6"
+              <div className="flex gap-2 mt-6 h-12">
+                <Link
+                  href={`/media/${slide.slug}`}
+                  className="w-fit h-full rounded-xl overflow-hidden"
                 >
-                  {slide.buttonContent}
-                </Button>
-              )}
-            </SwiperSlide>
-          ),
-        )}
+                  <Button
+                    size="lg"
+                    className="h-full flex gap-2 px-4 hover:bg-neutral-950 group"
+                  >
+                    <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
+                      <Icon
+                        icon="solar:play-bold"
+                        className="text-primary group-hover:text-neutral-950"
+                      />
+                    </div>
+                    <span className="font-semibold text-neutral-950 group-hover:text-primary">
+                      Watch Now
+                    </span>
+                  </Button>
+                </Link>
+                <AddToList
+                  mediaId={slide.id}
+                  isInCollection={slide.isInCollection}
+                />
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
       </Swiper>
     </div>
   );
diff --git a/features/home/sections/Recommendation/components/Card.tsx b/features/home/sections/Recommendation/components/Card.tsx
index d4662c4..d93df64 100644
--- a/features/home/sections/Recommendation/components/Card.tsx
+++ b/features/home/sections/Recommendation/components/Card.tsx
@@ -1,4 +1,4 @@
-import { RecommendationAnime } from "@/features/home/actions/getRecommenationAnime";
+import { RecommendationAnime } from "@/features/home/actions/Hero/getRecommenationAnime";
 import { Icon } from "@iconify/react";
 
 const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
diff --git a/features/home/sections/Recommendation/main.client.tsx b/features/home/sections/Recommendation/main.client.tsx
index 3fae04f..d4871d3 100644
--- a/features/home/sections/Recommendation/main.client.tsx
+++ b/features/home/sections/Recommendation/main.client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { RecommendationAnime } from "../../actions/getRecommenationAnime";
+import { RecommendationAnime } from "../../actions/Hero/getRecommenationAnime";
 import AnimeRecommendationCard from "./components/Card";
 import ScrollingButton from "./components/ScrollingButton";
 
diff --git a/features/home/sections/Recommendation/main.tsx b/features/home/sections/Recommendation/main.tsx
index e4d3229..83d7850 100644
--- a/features/home/sections/Recommendation/main.tsx
+++ b/features/home/sections/Recommendation/main.tsx
@@ -1,4 +1,4 @@
-import { getRecommendationAnimeAction } from "../../actions/getRecommenationAnime";
+import { getRecommendationAnimeAction } from "../../actions/Hero/getRecommenationAnime";
 import RecommendationClient from "./main.client";
 
 const RecommendationMain = async () => {