From d2c578ef8c3bf17ef995e3120949c7c86c597757 Mon Sep 17 00:00:00 2001
From: hai0z <hainguyen56211@gmail.com>
Date: Sat, 10 Jun 2023 08:11:27 +0700
Subject: [PATCH] ok

---
 .github/workflows/nextjs.yml                  | 190 ++---
 app/(store)/store.ts                          |  58 +-
 app/PageWraper.tsx                            |  88 +--
 app/components/CardSlide.tsx                  | 108 +--
 app/components/Header.tsx                     | 276 ++++----
 .../MediaList/ChangeMediaListBtn.tsx          | 100 +--
 app/components/MediaList/MediaList.tsx        |  54 +-
 app/components/Modal.tsx                      |  92 +--
 app/components/MovieCard.tsx                  | 312 ++++----
 app/components/MovieDetailTab.tsx             | 126 ++--
 app/components/Pagination.tsx                 | 222 +++---
 app/components/PeopleCard.tsx                 |  72 +-
 app/components/ShadowImg.tsx                  | 116 +--
 app/components/Sidebar.tsx                    | 670 +++++++++---------
 app/components/Slider.tsx                     | 666 ++++++++---------
 app/components/StickyTab.tsx                  |  84 +--
 app/components/WatchTrailerButton.tsx         |  36 +-
 app/components/mobile/MobileTab.tsx           | 310 ++++----
 app/components/search/Search.tsx              |  52 +-
 app/discover/movies/page.tsx                  |  78 +-
 app/discover/page.tsx                         | 240 +++----
 app/genres/layout.tsx                         |  44 +-
 app/genres/movie/page.tsx                     |  54 +-
 app/genres/tv-show/page.tsx                   |  14 +-
 app/globals.css                               |  74 +-
 app/loading.tsx                               |  40 +-
 app/movie/(discover)/layout.tsx               |  14 +-
 app/movie/(discover)/popular/page.tsx         |  14 +-
 app/movie/[movieId]/cast/page.tsx             |  48 +-
 app/movie/[movieId]/error.tsx                 |  24 +-
 app/movie/[movieId]/layout.tsx                | 280 ++++----
 app/movie/[movieId]/loading.tsx               |  40 +-
 app/movie/[movieId]/page.tsx                  | 298 ++++----
 app/movie/[movieId]/photos/page.tsx           | 172 ++---
 app/movie/[movieId]/recommendations/page.tsx  |  42 +-
 app/movie/[movieId]/videos/page.tsx           | 180 ++---
 app/page.tsx                                  | 138 ++--
 app/people/[peopleId]/credits/page.tsx        |  49 +-
 app/people/[peopleId]/layout.tsx              | 154 ++--
 app/people/[peopleId]/media/page.tsx          | 100 +--
 app/people/[peopleId]/page.tsx                |  74 +-
 app/people/page.tsx                           |  66 +-
 app/search/layout.tsx                         |  46 +-
 app/search/movie/page.tsx                     | 134 ++--
 app/search/tv/page.tsx                        | 130 ++--
 app/setting/page.tsx                          | 494 ++++++-------
 app/trending/layout.tsx                       |  52 +-
 app/trending/today/page.tsx                   |  82 +--
 app/trending/week/page.tsx                    |  66 +-
 app/tv-show/[tvId]/cast/page.tsx              |  72 +-
 app/tv-show/[tvId]/error.tsx                  |  24 +-
 app/tv-show/[tvId]/layout.tsx                 | 230 +++---
 app/tv-show/[tvId]/loading.tsx                |  40 +-
 app/tv-show/[tvId]/page.tsx                   | 294 ++++----
 app/tv-show/[tvId]/recommendations/page.tsx   |  74 +-
 context/AppProvider.tsx                       | 112 +--
 hooks/useWindowDemensions.tsx                 |  84 +--
 lib/prisma/index.ts                           |  10 +-
 lib/prisma/task.ts                            |  42 +-
 package.json                                  |   2 +-
 service/TMDB.ts                               | 282 ++++----
 service/TMDB.type.ts                          | 352 ++++-----
 62 files changed, 4248 insertions(+), 4243 deletions(-)

diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
index 17c5fcc..82d4109 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/nextjs.yml
@@ -1,95 +1,95 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-        with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-      - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./out
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Static HTML export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/app/(store)/store.ts b/app/(store)/store.ts
index 10bda85..ffeeabf 100644
--- a/app/(store)/store.ts
+++ b/app/(store)/store.ts
@@ -1,29 +1,29 @@
-import { create } from "zustand";
-
-interface Store {
-    videoId: string;
-    setVideoId: (id: string) => void;
-    theme: string;
-    setTheme: (theme: string) => void;
-    currentSlideIndex: number;
-    setCurrentSlideIndex: (index: number) => void;
-    mediaType: "grid" | "compact" | "list";
-    setMediaType: (type: "grid" | "compact" | "list") => void;
-    expandedSideBar: boolean;
-    setExpandedSideBar: (open: boolean) => void;
-}
-const useStore = create<Store>((set) => ({
-    videoId: "",
-    theme: "",
-    currentSlideIndex: 0,
-    mediaType: "grid",
-    expandedSideBar: true,
-    setVideoId: (param) => set({ videoId: param }),
-    setTheme: (param) => set({ theme: param }),
-    setCurrentSlideIndex: (param) => set({ currentSlideIndex: param }),
-    setMediaType: (type: "grid" | "compact" | "list") =>
-        set({ mediaType: type }),
-    setExpandedSideBar: (open: boolean) =>
-        set(() => ({ expandedSideBar: !open })),
-}));
-export default useStore;
+import { create } from "zustand";
+
+interface Store {
+    videoId: string;
+    setVideoId: (id: string) => void;
+    theme: string;
+    setTheme: (theme: string) => void;
+    currentSlideIndex: number;
+    setCurrentSlideIndex: (index: number) => void;
+    mediaType: "grid" | "compact" | "list";
+    setMediaType: (type: "grid" | "compact" | "list") => void;
+    expandedSideBar: boolean;
+    setExpandedSideBar: (open: boolean) => void;
+}
+const useStore = create<Store>((set) => ({
+    videoId: "",
+    theme: "",
+    currentSlideIndex: 0,
+    mediaType: "grid",
+    expandedSideBar: true,
+    setVideoId: (param) => set({ videoId: param }),
+    setTheme: (param) => set({ theme: param }),
+    setCurrentSlideIndex: (param) => set({ currentSlideIndex: param }),
+    setMediaType: (type: "grid" | "compact" | "list") =>
+        set({ mediaType: type }),
+    setExpandedSideBar: (open: boolean) =>
+        set(() => ({ expandedSideBar: !open })),
+}));
+export default useStore;
diff --git a/app/PageWraper.tsx b/app/PageWraper.tsx
index 210f935..a6fe46e 100644
--- a/app/PageWraper.tsx
+++ b/app/PageWraper.tsx
@@ -1,44 +1,44 @@
-"use client";
-import React from "react";
-import { motion } from "framer-motion";
-import NextTopLoader from "nextjs-toploader";
-import Header from "./components/Header";
-import useStore from "./(store)/store";
-import useWindowDimensions from "@/hooks/useWindowDemensions";
-import AppProvider from "@/context/AppProvider";
-import Sidebar from "./components/Sidebar";
-import MobileTab from "./components/mobile/MobileTab";
-
-function PageWraper({ children }: { children: React.ReactNode }) {
-    const expandedSideBar = useStore((state) => state.expandedSideBar);
-    const { width } = useWindowDimensions();
-
-    return (
-        <AppProvider>
-            <motion.div className="flex flex-row w-full">
-                <div>
-                    <Sidebar />
-                    <MobileTab />
-                </div>
-                <div
-                    className="flex flex-col w-full"
-                    style={{
-                        paddingLeft:
-                            width > 768 ? (expandedSideBar ? 250 : 80) : 0,
-                    }}
-                >
-                    <NextTopLoader showSpinner={true} color="hsl(var(--p))" />
-                    <Header />
-                    <motion.div
-                        layout
-                        transition={{ type: "keyframes", duration: 0.5 }}
-                    >
-                        {children}
-                    </motion.div>
-                </div>
-            </motion.div>
-        </AppProvider>
-    );
-}
-
-export default PageWraper;
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import NextTopLoader from "nextjs-toploader";
+import Header from "./components/Header";
+import useStore from "./(store)/store";
+import useWindowDimensions from "@/hooks/useWindowDemensions";
+import AppProvider from "@/context/AppProvider";
+import Sidebar from "./components/Sidebar";
+import MobileTab from "./components/mobile/MobileTab";
+
+function PageWraper({ children }: { children: React.ReactNode }) {
+    const expandedSideBar = useStore((state) => state.expandedSideBar);
+    const { width } = useWindowDimensions();
+
+    return (
+        <AppProvider>
+            <motion.div className="flex flex-row w-full">
+                <div>
+                    <Sidebar />
+                    <MobileTab />
+                </div>
+                <div
+                    className="flex flex-col w-full"
+                    style={{
+                        paddingLeft:
+                            width > 768 ? (expandedSideBar ? 250 : 80) : 0,
+                    }}
+                >
+                    <NextTopLoader showSpinner={true} color="hsl(var(--p))" />
+                    <Header />
+                    <motion.div
+                        layout
+                        transition={{ type: "keyframes", duration: 0.5 }}
+                    >
+                        {children}
+                    </motion.div>
+                </div>
+            </motion.div>
+        </AppProvider>
+    );
+}
+
+export default PageWraper;
diff --git a/app/components/CardSlide.tsx b/app/components/CardSlide.tsx
index 5260557..a70bfef 100644
--- a/app/components/CardSlide.tsx
+++ b/app/components/CardSlide.tsx
@@ -1,53 +1,55 @@
-"use client";
-
-import React from "react";
-import { Movie, TrendingPeople } from "@/service/TMDB.type";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
-import MovieCard from "./MovieCard";
-import "swiper/css";
-import "swiper/css/navigation";
-import useWindowDimensions from "@/hooks/useWindowDemensions";
-import PeopleCard from "./PeopleCard";
-
-interface ICardPropsMovie {
-    type: "movie";
-    data: { results: Movie[] };
-}
-
-interface ICardPropsPeople {
-    type: "people";
-    data: { results: TrendingPeople[] };
-}
-
-type CardProps = ICardPropsMovie | ICardPropsPeople;
-
-function CardSlide({ data, type }: CardProps) {
-    const { width } = useWindowDimensions();
-    const isMovie = type === "movie";
-    const isPeople = type === "people";
-    return (
-        <Swiper
-            modules={[Navigation]}
-            grabCursor
-            freeMode={true}
-            slidesPerGroup={1}
-            slidesPerGroupAuto
-            navigation={true}
-            slidesPerView={width > 1700 ? 1700 / 275 : width / 275}
-        >
-            {data.results.slice(0, 10).map((m) => (
-                <SwiperSlide
-                    key={m.id}
-                    className="px-2 py-3 md:py-8 w-full"
-                    style={{ display: "flex" }}
-                >
-                    {isMovie && <MovieCard m={m as Movie} />}
-                    {isPeople && <PeopleCard people={m as TrendingPeople} />}
-                </SwiperSlide>
-            ))}
-        </Swiper>
-    );
-}
-
-export default CardSlide;
+"use client";
+
+import React from "react";
+import { Movie, TrendingPeople } from "@/service/TMDB.type";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper";
+import MovieCard from "./MovieCard";
+import "swiper/css";
+import "swiper/css/navigation";
+import useWindowDimensions from "@/hooks/useWindowDemensions";
+import PeopleCard from "./PeopleCard";
+
+interface ICardPropsMovie {
+    type: "movie";
+    data: { results: Movie[] };
+    sildePerView?: number | undefined;
+}
+
+interface ICardPropsPeople {
+    type: "people";
+    data: { results: TrendingPeople[] };
+    sildePerView?: number | undefined;
+}
+
+type CardProps = ICardPropsMovie | ICardPropsPeople;
+
+function CardSlide({ data, type, sildePerView }: CardProps) {
+    const { width } = useWindowDimensions();
+    const isMovie = type === "movie";
+    const isPeople = type === "people";
+    return (
+        <Swiper
+            modules={[Navigation]}
+            grabCursor
+            freeMode={true}
+            slidesPerGroup={1}
+            slidesPerGroupAuto
+            navigation={true}
+            slidesPerView={width > 1700 ? 1700 / 275 : width / 275}
+        >
+            {data.results.slice(0, 10).map((m) => (
+                <SwiperSlide
+                    key={m.id}
+                    className="px-2 py-3 md:py-8 w-full"
+                    style={{ display: "flex" }}
+                >
+                    {isMovie && <MovieCard m={m as Movie} />}
+                    {isPeople && <PeopleCard people={m as TrendingPeople} />}
+                </SwiperSlide>
+            ))}
+        </Swiper>
+    );
+}
+
+export default CardSlide;
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index faf0304..c14b247 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,138 +1,138 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import Image from "next/image";
-import { usePathname, useParams } from "next/navigation";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
-import { useRouter } from "next/navigation";
-import useStore from "../(store)/store";
-import { Movie } from "@/service/TMDB.type";
-import useWindowDimensions from "@/hooks/useWindowDemensions";
-import { motion } from "framer-motion";
-function Header() {
-    const [data, setData] = useState<Movie>({} as Movie);
-    const pathname = usePathname();
-    const params = useParams();
-    const ImagePath = "https://image.tmdb.org/t/p/";
-    const [isScroll, setIsScroll] = useState(false);
-
-    const { width } = useWindowDimensions();
-
-    useEffect(() => {
-        const onScrollTop = () => {
-            if (window.scrollY > 90) {
-                setIsScroll(true);
-            } else {
-                setIsScroll(false);
-            }
-        };
-        window.addEventListener("scroll", onScrollTop);
-        return () => window.removeEventListener("scroll", onScrollTop);
-    }, []);
-    useEffect(() => {
-        const getData = async () => {
-            const respone = await fetch(
-                `https://api.themoviedb.org/3/movie/${params.movieId}?api_key=${process.env.TMDB}&language=vi-VN`
-            );
-            const data = await respone.json();
-            setData(data);
-        };
-        if (params.movieId !== undefined) {
-            getData();
-        }
-    }, [params.movieId]);
-    const router = useRouter();
-    const expandedSizeBar = useStore((state) => state.expandedSideBar);
-    return (
-        <motion.div
-            transition={{ duration: 1 }}
-            style={{ left: width > 768 ? (expandedSizeBar ? 250 : 80) : 0 }}
-            className={`w-full px-4 ${
-                isScroll && "bg-base-100 backdrop-blur-lg bg-opacity-80"
-            } ${
-                pathname == "/" && width < 768 && "shadow-lg bg-base-100"
-            } flex flex-row items-center z-50 transition-all duration-150  h-16 md:h-16 fixed navbar `}
-        >
-            <div className="flex gap-2 md:gap-4 mr-2">
-                <div className="btn btn-primary btn-circle btn-sm">
-                    <ChevronLeftIcon
-                        className="h-6 w-6 text-primary-content"
-                        onClick={() => router.back()}
-                    />
-                </div>
-                <div className="btn btn-primary btn-circle btn-sm">
-                    <ChevronRightIcon
-                        className="h-6 w-6 text-primary-content"
-                        onClick={() => router.forward()}
-                    />
-                </div>
-            </div>
-            <div
-                className={`${
-                    pathname == "/" && width < 768 ? "flex" : "hidden"
-                } md:hidden `}
-            >
-                <h2 className="text-gradient font-bold text-lg">The Movies</h2>
-            </div>
-            <div className={`flex flex-row`}>
-                {isScroll &&
-                    pathname.includes("movie") &&
-                    !pathname.includes("search") &&
-                    !pathname.includes("discover") &&
-                    !pathname.includes("genres") && (
-                        <div className="flex flex-row gap-2 items-center bottom-0  ">
-                            <Image
-                                src={`${ImagePath}/w500/${data?.poster_path}`}
-                                alt="film"
-                                width={500}
-                                height={500}
-                                className="w-8 rounded-md cursor-pointer"
-                            />
-                            <div>
-                                <p
-                                    className={`md:text-xl text-sm font-bold text-gradient`}
-                                >
-                                    {data?.title}
-                                </p>
-                                <p className="md:text-xl text-sm text-gradient">
-                                    {pathname.split("/").at(-1) ===
-                                    params.movieId
-                                        ? "overview"
-                                        : pathname.split("/").at(-1)}
-                                </p>
-                            </div>
-                        </div>
-                    )}
-                {isScroll && pathname == "/" && width >= 768 && (
-                    <div className="flex flex-row gap-2">
-                        <p className="font-bold text-2xl text-gradient">
-                            Trang chủ
-                        </p>
-                    </div>
-                )}
-                {isScroll && pathname.includes("trending") && (
-                    <div className="flex flex-row gap-2">
-                        <p className="font-bold text-2xl text-gradient">
-                            Xu hướng
-                        </p>
-                    </div>
-                )}
-                {isScroll && pathname.includes("discover") && (
-                    <div className="flex flex-row gap-2">
-                        <p className="font-bold text-2xl text-gradient">
-                            Khám phá
-                        </p>
-                    </div>
-                )}
-                {isScroll && pathname.includes("genres") && (
-                    <div className="flex flex-row gap-2">
-                        <p className="font-bold text-2xl text-gradient">
-                            Khám phá
-                        </p>
-                    </div>
-                )}
-            </div>
-        </motion.div>
-    );
-}
-
-export default Header;
+"use client";
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { usePathname, useParams } from "next/navigation";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/navigation";
+import useStore from "../(store)/store";
+import { Movie } from "@/service/TMDB.type";
+import useWindowDimensions from "@/hooks/useWindowDemensions";
+import { motion } from "framer-motion";
+function Header() {
+    const [data, setData] = useState<Movie>({} as Movie);
+    const pathname = usePathname();
+    const params = useParams();
+    const ImagePath = "https://image.tmdb.org/t/p/";
+    const [isScroll, setIsScroll] = useState(false);
+
+    const { width } = useWindowDimensions();
+
+    useEffect(() => {
+        const onScrollTop = () => {
+            if (window.scrollY > 90) {
+                setIsScroll(true);
+            } else {
+                setIsScroll(false);
+            }
+        };
+        window.addEventListener("scroll", onScrollTop);
+        return () => window.removeEventListener("scroll", onScrollTop);
+    }, []);
+    useEffect(() => {
+        const getData = async () => {
+            const respone = await fetch(
+                `https://api.themoviedb.org/3/movie/${params.movieId}?api_key=${process.env.TMDB}&language=vi-VN`
+            );
+            const data = await respone.json();
+            setData(data);
+        };
+        if (params.movieId !== undefined) {
+            getData();
+        }
+    }, [params.movieId]);
+    const router = useRouter();
+    const expandedSizeBar = useStore((state) => state.expandedSideBar);
+    return (
+        <motion.div
+            transition={{ duration: 1 }}
+            style={{ left: width > 768 ? (expandedSizeBar ? 250 : 80) : 0 }}
+            className={`w-full px-4 ${
+                isScroll && "bg-base-100 backdrop-blur-lg bg-opacity-80"
+            } ${
+                pathname == "/" && width < 768 && "shadow-lg bg-base-100"
+            } flex flex-row items-center z-50 transition-all duration-150  h-16 md:h-16 fixed navbar `}
+        >
+            <div className="flex gap-2 md:gap-4 mr-2">
+                <div className="btn btn-primary btn-circle btn-sm">
+                    <ChevronLeftIcon
+                        className="h-6 w-6 text-primary-content"
+                        onClick={() => router.back()}
+                    />
+                </div>
+                <div className="btn btn-primary btn-circle btn-sm">
+                    <ChevronRightIcon
+                        className="h-6 w-6 text-primary-content"
+                        onClick={() => router.forward()}
+                    />
+                </div>
+            </div>
+            <div
+                className={`${
+                    pathname == "/" && width < 768 ? "flex" : "hidden"
+                } md:hidden `}
+            >
+                <h2 className="text-gradient font-bold text-lg">The Movies</h2>
+            </div>
+            <div className={`flex flex-row`}>
+                {isScroll &&
+                    pathname.includes("movie") &&
+                    !pathname.includes("search") &&
+                    !pathname.includes("discover") &&
+                    !pathname.includes("genres") && (
+                        <div className="flex flex-row gap-2 items-center bottom-0  ">
+                            <Image
+                                src={`${ImagePath}/w500/${data?.poster_path}`}
+                                alt="film"
+                                width={500}
+                                height={500}
+                                className="w-8 rounded-md cursor-pointer"
+                            />
+                            <div>
+                                <p
+                                    className={`md:text-xl text-sm font-bold text-gradient`}
+                                >
+                                    {data?.title}
+                                </p>
+                                <p className="md:text-xl text-sm text-gradient">
+                                    {pathname.split("/").at(-1) ===
+                                    params.movieId
+                                        ? "overview"
+                                        : pathname.split("/").at(-1)}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                {isScroll && pathname == "/" && width >= 768 && (
+                    <div className="flex flex-row gap-2">
+                        <p className="font-bold text-2xl text-gradient">
+                            Trang chủ
+                        </p>
+                    </div>
+                )}
+                {isScroll && pathname.includes("trending") && (
+                    <div className="flex flex-row gap-2">
+                        <p className="font-bold text-2xl text-gradient">
+                            Xu hướng
+                        </p>
+                    </div>
+                )}
+                {isScroll && pathname.includes("discover") && (
+                    <div className="flex flex-row gap-2">
+                        <p className="font-bold text-2xl text-gradient">
+                            Khám phá
+                        </p>
+                    </div>
+                )}
+                {isScroll && pathname.includes("genres") && (
+                    <div className="flex flex-row gap-2">
+                        <p className="font-bold text-2xl text-gradient">
+                            Khám phá
+                        </p>
+                    </div>
+                )}
+            </div>
+        </motion.div>
+    );
+}
+
+export default Header;
diff --git a/app/components/MediaList/ChangeMediaListBtn.tsx b/app/components/MediaList/ChangeMediaListBtn.tsx
index a2af129..53de071 100644
--- a/app/components/MediaList/ChangeMediaListBtn.tsx
+++ b/app/components/MediaList/ChangeMediaListBtn.tsx
@@ -1,50 +1,50 @@
-"use client";
-import useStore from "@/app/(store)/store";
-import React from "react";
-
-function ChangeMediaListBtn() {
-    const mediaType = useStore((state) => state.mediaType);
-    const setMediaType = useStore((state) => state.setMediaType);
-    return (
-        <div className="flex btn-group">
-            <button
-                onClick={() => setMediaType("list")}
-                className={`btn btn-sm ${
-                    mediaType == "list" ? "btn-primary" : "btn-ghost"
-                }`}
-            >
-                <i
-                    className={`fa-solid fa-list text-xl ${
-                        mediaType === "list" && "text-primary-content"
-                    }`}
-                ></i>
-            </button>
-            <button
-                onClick={() => setMediaType("compact")}
-                className={`btn btn-sm ${
-                    mediaType == "compact" ? "btn-primary" : "btn-ghost"
-                }`}
-            >
-                <i
-                    className={`fa-solid fa-table-cells-large text-xl ${
-                        mediaType === "compact" && "text-primary-content"
-                    }`}
-                ></i>
-            </button>
-            <button
-                onClick={() => setMediaType("grid")}
-                className={`btn btn-sm ${
-                    mediaType == "grid" ? "btn-primary" : "btn-ghost"
-                }`}
-            >
-                <i
-                    className={`fa-solid fa-table-cells text-xl ${
-                        mediaType === "grid" && "text-primary-content"
-                    }`}
-                ></i>
-            </button>
-        </div>
-    );
-}
-
-export default ChangeMediaListBtn;
+"use client";
+import useStore from "@/app/(store)/store";
+import React from "react";
+
+function ChangeMediaListBtn() {
+    const mediaType = useStore((state) => state.mediaType);
+    const setMediaType = useStore((state) => state.setMediaType);
+    return (
+        <div className="flex btn-group">
+            <button
+                onClick={() => setMediaType("list")}
+                className={`btn btn-sm ${
+                    mediaType == "list" ? "btn-primary" : "btn-ghost"
+                }`}
+            >
+                <i
+                    className={`fa-solid fa-list text-xl ${
+                        mediaType === "list" && "text-primary-content"
+                    }`}
+                ></i>
+            </button>
+            <button
+                onClick={() => setMediaType("compact")}
+                className={`btn btn-sm ${
+                    mediaType == "compact" ? "btn-primary" : "btn-ghost"
+                }`}
+            >
+                <i
+                    className={`fa-solid fa-table-cells-large text-xl ${
+                        mediaType === "compact" && "text-primary-content"
+                    }`}
+                ></i>
+            </button>
+            <button
+                onClick={() => setMediaType("grid")}
+                className={`btn btn-sm ${
+                    mediaType == "grid" ? "btn-primary" : "btn-ghost"
+                }`}
+            >
+                <i
+                    className={`fa-solid fa-table-cells text-xl ${
+                        mediaType === "grid" && "text-primary-content"
+                    }`}
+                ></i>
+            </button>
+        </div>
+    );
+}
+
+export default ChangeMediaListBtn;
diff --git a/app/components/MediaList/MediaList.tsx b/app/components/MediaList/MediaList.tsx
index 5fe2c54..6b7bc2e 100644
--- a/app/components/MediaList/MediaList.tsx
+++ b/app/components/MediaList/MediaList.tsx
@@ -1,27 +1,27 @@
-"use client";
-import { Movie } from "@/service/TMDB.type";
-import React from "react";
-import { MovieCard1, MovieCard2, MovieCard3 } from "../MovieCard";
-import useStore from "../../(store)/store";
-
-interface IPageProps {
-    movie: { results: Movie[] };
-}
-function MediaList({ movie }: IPageProps) {
-    const mediaType = useStore((state) => state.mediaType);
-    return (
-        <div className="gap-8 pb-6 md:gap-4 md:pb-8 flex flex-wrap justify-center">
-            {movie?.results.map((m, index) => {
-                return mediaType === "list" ? (
-                    <MovieCard2 m={m} index={index} key={m.id} />
-                ) : mediaType == "compact" ? (
-                    <MovieCard3 m={m} index={index} key={m.id} />
-                ) : (
-                    <MovieCard1 m={m} key={m.id} />
-                );
-            })}
-        </div>
-    );
-}
-
-export default MediaList;
+"use client";
+import { Movie } from "@/service/TMDB.type";
+import React from "react";
+import { MovieCard1, MovieCard2, MovieCard3 } from "../MovieCard";
+import useStore from "../../(store)/store";
+
+interface IPageProps {
+    movie: { results: Movie[] };
+}
+function MediaList({ movie }: IPageProps) {
+    const mediaType = useStore((state) => state.mediaType);
+    return (
+        <div className="gap-8 pb-6 md:gap-4 md:pb-8 flex flex-wrap justify-center">
+            {movie?.results.map((m, index) => {
+                return mediaType === "list" ? (
+                    <MovieCard2 m={m} index={index} key={m.id} />
+                ) : mediaType == "compact" ? (
+                    <MovieCard3 m={m} index={index} key={m.id} />
+                ) : (
+                    <MovieCard1 m={m} key={m.id} />
+                );
+            })}
+        </div>
+    );
+}
+
+export default MediaList;
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 390898f..6b3b1c2 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -1,46 +1,46 @@
-"use client";
-import React, { useEffect, useRef, useState } from "react";
-import useStore from "../(store)/store";
-
-function Modal() {
-    const videoId = useStore((state) => state.videoId);
-    const [video, setVideo] = useState<any>();
-    const videoRef = useRef<HTMLIFrameElement>(null);
-
-    useEffect(() => {
-        const getTrailer = async () => {
-            const respone = await fetch(
-                `https://api.themoviedb.org/3/movie/${videoId}/videos?api_key=${process.env.TMDB}&language=en-US`
-            );
-            const data = await respone.json();
-            setVideo(data);
-        };
-        getTrailer();
-        return () => {
-            console.log("modal unmount");
-        };
-    }, [videoId]);
-    console.log(videoId);
-    return (
-        <div>
-            <input type="checkbox" id="my-modal" className="modal-toggle" />
-            <div className="modal">
-                <div className="modal-box relative h-96">
-                    <label
-                        htmlFor="my-modal"
-                        className="btn btn-sm btn-circle absolute right-2 top-2"
-                    >
-                        ✕
-                    </label>
-                    <iframe
-                        ref={videoRef}
-                        className="w-full h-full"
-                        src={`https://www.youtube.com/embed/${video?.results?.[0].key}`}
-                    ></iframe>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Modal;
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import useStore from "../(store)/store";
+
+function Modal() {
+    const videoId = useStore((state) => state.videoId);
+    const [video, setVideo] = useState<any>();
+    const videoRef = useRef<HTMLIFrameElement>(null);
+
+    useEffect(() => {
+        const getTrailer = async () => {
+            const respone = await fetch(
+                `https://api.themoviedb.org/3/movie/${videoId}/videos?api_key=${process.env.TMDB}&language=en-US`
+            );
+            const data = await respone.json();
+            setVideo(data);
+        };
+        getTrailer();
+        return () => {
+            console.log("modal unmount");
+        };
+    }, [videoId]);
+    console.log(videoId);
+    return (
+        <div>
+            <input type="checkbox" id="my-modal" className="modal-toggle" />
+            <div className="modal">
+                <div className="modal-box relative h-96">
+                    <label
+                        htmlFor="my-modal"
+                        className="btn btn-sm btn-circle absolute right-2 top-2"
+                    >
+                        ✕
+                    </label>
+                    <iframe
+                        ref={videoRef}
+                        className="w-full h-full"
+                        src={`https://www.youtube.com/embed/${video?.results?.[0].key}`}
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Modal;
diff --git a/app/components/MovieCard.tsx b/app/components/MovieCard.tsx
index 53999ce..29ae1a3 100644
--- a/app/components/MovieCard.tsx
+++ b/app/components/MovieCard.tsx
@@ -1,156 +1,156 @@
-"use client";
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Movie, MovieCredits } from "@/service/TMDB.type";
-import tmdb from "@/service/TMDB";
-import { motion } from "framer-motion";
-function MovieCard2({ m, index }: { m: Movie; index: number }) {
-    return (
-        <motion.div
-            className="card card-side bg-base-200 shadow-xl w-full hover:ring-1 hover:ring-primary hover:bg-primary/10 transition-all duration-300 my-1 mx-1 cursor-pointer"
-            initial={{
-                opacity: 0,
-            }}
-            key={m.id}
-            transition={{ duration: 0.5 }}
-            exit={{
-                opacity: 0,
-            }}
-            whileInView={{ opacity: 1 }}
-        >
-            <figure>
-                <Link href={"/movie/" + m.id + "#top"}>
-                    <Image
-                        src={tmdb.getImage(m.poster_path)}
-                        width={250}
-                        height={250}
-                        alt="cast"
-                        loading="lazy"
-                        className="object-cover w-52 h-full"
-                    />
-                </Link>
-            </figure>
-            <div className="card-body w-full">
-                <motion.h2 className="card-title">
-                    <Link href={"/movie/" + m.id}> {m.name ?? m.title}</Link>
-                </motion.h2>
-                <div>
-                    <p className="badge badge-info font-semibold">
-                        TMDB {m.vote_average.toFixed(1)}
-                    </p>
-                    <p className="line-clamp-2  md:line-clamp-4 lg:line-clamp-none text-justify">
-                        {m.overview}
-                    </p>
-                </div>
-            </div>
-        </motion.div>
-    );
-}
-function MovieCard3({ m, index }: { m: Movie; index: number }) {
-    return (
-        <motion.div
-            className="card w-96 bg-base-200 shadow-md hover:ring-2 hover:ring-primary my-1 group overflow-hidden hover:shadow-primary card-compact hover:bg-primary/10"
-            layout
-            initial={{
-                opacity: 0,
-            }}
-            whileInView={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            exit={{
-                opacity: 0,
-            }}
-        >
-            <figure>
-                <motion.div>
-                    <Link href={"/movie/" + m.id + "#top"}>
-                        <Image
-                            src={tmdb.getImage(m.backdrop_path)}
-                            width={250}
-                            height={250}
-                            alt="cast"
-                            loading="lazy"
-                            className="group-hover:scale-110 transition-all duration-300 w-96"
-                        />
-                    </Link>
-                </motion.div>
-            </figure>
-            <div className="card-body ">
-                <Link
-                    href={"/movie/" + m.id}
-                    className="card-title line-clamp-1"
-                >
-                    <motion.h2> {m.name ?? m.title}</motion.h2>
-                </Link>
-                <p className="overflow-ellipsis line-clamp-4 text-justify">
-                    {m.overview}
-                </p>
-            </div>
-        </motion.div>
-    );
-}
-function MovieCard1({ m }: { m: Movie }) {
-    return (
-        <motion.div
-            initial={{
-                opacity: 0,
-            }}
-            whileInView={{ opacity: 1 }}
-            exit={{
-                opacity: 0,
-            }}
-            key={m.id}
-            transition={{ duration: 0.5 }}
-            layout
-            className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-[45%] md:w-56 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10"
-        >
-            <figure className="overflow-hidden rounded-t-lg">
-                <Link href={"/movie/" + m.id + "#top"}>
-                    <Image
-                        src={tmdb.getImage(m.poster_path, "w500")}
-                        width={500}
-                        height={500}
-                        alt="cast"
-                        loading="lazy"
-                        className="object-cover transition-all duration-300 md:w-56 group-hover:scale-110 lg:w-64 "
-                    />
-                </Link>
-            </figure>
-            <div className="card-body">
-                <Link href={"/movie/" + m.id}>
-                    <p className="line-clamp-2 font-semibold">
-                        {m.name ?? m.title}
-                    </p>
-                </Link>
-            </div>
-        </motion.div>
-    );
-}
-function MovieCard({ m }: { m: Movie }) {
-    return (
-        <motion.div className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-60 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10">
-            <figure className="overflow-hidden rounded-t-lg">
-                <Link href={"/movie/" + m.id + "#top"}>
-                    <Image
-                        src={tmdb.getImage(m.poster_path, "w500")}
-                        width={500}
-                        height={500}
-                        alt="cast"
-                        loading="lazy"
-                        className="object-cover transition-all duration-300 w-60  group-hover:scale-110 lg:w-64 "
-                    />
-                </Link>
-            </figure>
-            <div className="card-body">
-                <Link href={"/movie/" + m.id}>
-                    <p className="line-clamp-2 font-semibold">
-                        {" "}
-                        {m.name ?? m.title}
-                    </p>
-                </Link>
-            </div>
-        </motion.div>
-    );
-}
-export { MovieCard2, MovieCard3, MovieCard1 };
-export default MovieCard;
+"use client";
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Movie, MovieCredits } from "@/service/TMDB.type";
+import tmdb from "@/service/TMDB";
+import { motion } from "framer-motion";
+function MovieCard2({ m, index }: { m: Movie; index: number }) {
+    return (
+        <motion.div
+            className="card card-side bg-base-200 shadow-xl w-full hover:ring-1 hover:ring-primary hover:bg-primary/10 transition-all duration-300 my-1 mx-1 cursor-pointer"
+            initial={{
+                opacity: 0,
+            }}
+            key={m.id}
+            transition={{ duration: 0.5 }}
+            exit={{
+                opacity: 0,
+            }}
+            whileInView={{ opacity: 1 }}
+        >
+            <figure>
+                <Link href={"/movie/" + m.id + "#top"}>
+                    <Image
+                        src={tmdb.getImage(m.poster_path)}
+                        width={250}
+                        height={250}
+                        alt="cast"
+                        loading="lazy"
+                        className="object-cover w-52 h-full"
+                    />
+                </Link>
+            </figure>
+            <div className="card-body w-full">
+                <motion.h2 className="card-title">
+                    <Link href={"/movie/" + m.id}> {m.name ?? m.title}</Link>
+                </motion.h2>
+                <div>
+                    <p className="badge badge-info font-semibold">
+                        TMDB {m.vote_average.toFixed(1)}
+                    </p>
+                    <p className="line-clamp-2  md:line-clamp-4 lg:line-clamp-none text-justify">
+                        {m.overview}
+                    </p>
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+function MovieCard3({ m, index }: { m: Movie; index: number }) {
+    return (
+        <motion.div
+            className="card w-96 bg-base-200 shadow-md hover:ring-2 hover:ring-primary my-1 group overflow-hidden hover:shadow-primary card-compact hover:bg-primary/10"
+            layout
+            initial={{
+                opacity: 0,
+            }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            exit={{
+                opacity: 0,
+            }}
+        >
+            <figure>
+                <motion.div>
+                    <Link href={"/movie/" + m.id + "#top"}>
+                        <Image
+                            src={tmdb.getImage(m.backdrop_path)}
+                            width={250}
+                            height={250}
+                            alt="cast"
+                            loading="lazy"
+                            className="group-hover:scale-110 transition-all duration-300 w-96"
+                        />
+                    </Link>
+                </motion.div>
+            </figure>
+            <div className="card-body ">
+                <Link
+                    href={"/movie/" + m.id}
+                    className="card-title line-clamp-1"
+                >
+                    <motion.h2> {m.name ?? m.title}</motion.h2>
+                </Link>
+                <p className="overflow-ellipsis line-clamp-4 text-justify">
+                    {m.overview}
+                </p>
+            </div>
+        </motion.div>
+    );
+}
+function MovieCard1({ m }: { m: Movie }) {
+    return (
+        <motion.div
+            initial={{
+                opacity: 0,
+            }}
+            whileInView={{ opacity: 1 }}
+            exit={{
+                opacity: 0,
+            }}
+            key={m.id}
+            transition={{ duration: 0.5 }}
+            layout
+            className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-[45%] md:w-56 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10"
+        >
+            <figure className="overflow-hidden rounded-t-lg">
+                <Link href={"/movie/" + m.id + "#top"}>
+                    <Image
+                        src={tmdb.getImage(m.poster_path, "w500")}
+                        width={500}
+                        height={500}
+                        alt="cast"
+                        loading="lazy"
+                        className="object-cover transition-all duration-300 md:w-56 group-hover:scale-110 lg:w-64 "
+                    />
+                </Link>
+            </figure>
+            <div className="card-body">
+                <Link href={"/movie/" + m.id}>
+                    <p className="line-clamp-2 font-semibold">
+                        {m.name ?? m.title}
+                    </p>
+                </Link>
+            </div>
+        </motion.div>
+    );
+}
+function MovieCard({ m }: { m: Movie }) {
+    return (
+        <motion.div className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-60 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10">
+            <figure className="overflow-hidden rounded-t-lg">
+                <Link href={"/movie/" + m.id + "#top"}>
+                    <Image
+                        src={tmdb.getImage(m.poster_path, "w500")}
+                        width={500}
+                        height={500}
+                        alt="cast"
+                        loading="lazy"
+                        className="object-cover transition-all duration-300 w-60  group-hover:scale-110 lg:w-64 "
+                    />
+                </Link>
+            </figure>
+            <div className="card-body">
+                <Link href={"/movie/" + m.id}>
+                    <p className="line-clamp-2 font-semibold">
+                        {" "}
+                        {m.name ?? m.title}
+                    </p>
+                </Link>
+            </div>
+        </motion.div>
+    );
+}
+export { MovieCard2, MovieCard3, MovieCard1 };
+export default MovieCard;
diff --git a/app/components/MovieDetailTab.tsx b/app/components/MovieDetailTab.tsx
index da49640..7279126 100644
--- a/app/components/MovieDetailTab.tsx
+++ b/app/components/MovieDetailTab.tsx
@@ -1,63 +1,63 @@
-"use client";
-import React from "react";
-import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
-function MovieDetailTab() {
-    const params = useParams();
-    const path = usePathname();
-
-    return (
-        <div
-            className={`tabs tabs-boxed w-full py-4 rounded-none bg-opacity-80 bg-base-100 px-4 sticky top-16 border-b-[1px] border-b-base-content border-solid mb-4 transition duration-300 z-30 backdrop-blur-md`}
-        >
-            <Link
-                scroll={false}
-                href={`/movie/${params.movieId}`}
-                className={`tab ${
-                    path === `/movie/${params.movieId}` && "tab-active"
-                }`}
-            >
-                Overview
-            </Link>
-            <Link
-                scroll={false}
-                href={`/movie/${params.movieId}/cast`}
-                className={`tab ${
-                    path === `/movie/${params.movieId}/cast` && "tab-active"
-                }`}
-            >
-                Cast
-            </Link>
-            <Link
-                scroll={false}
-                href={`/movie/${params.movieId}/photos`}
-                className={`tab ${
-                    path === `/movie/${params.movieId}/photos` && "tab-active"
-                }`}
-            >
-                Photos
-            </Link>
-            <Link
-                scroll={false}
-                href={`/movie/${params.movieId}/videos`}
-                className={`tab ${
-                    path === `/movie/${params.movieId}/videos` && "tab-active"
-                }`}
-            >
-                Videos
-            </Link>
-            <Link
-                scroll={false}
-                href={`/movie/${params.movieId}/recommendations`}
-                className={`tab ${
-                    path === `/movie/${params.movieId}/recommendations` &&
-                    "tab-active"
-                }`}
-            >
-                Recommendations
-            </Link>
-        </div>
-    );
-}
-
-export default MovieDetailTab;
+"use client";
+import React from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+function MovieDetailTab() {
+    const params = useParams();
+    const path = usePathname();
+
+    return (
+        <div
+            className={`tabs tabs-boxed w-full py-4 rounded-none bg-opacity-80 bg-base-100 px-4 sticky top-16 border-b-[1px] border-b-base-content border-solid mb-4 transition duration-300 z-30 backdrop-blur-md`}
+        >
+            <Link
+                scroll={false}
+                href={`/movie/${params.movieId}`}
+                className={`tab ${
+                    path === `/movie/${params.movieId}` && "tab-active"
+                }`}
+            >
+                Overview
+            </Link>
+            <Link
+                scroll={false}
+                href={`/movie/${params.movieId}/cast`}
+                className={`tab ${
+                    path === `/movie/${params.movieId}/cast` && "tab-active"
+                }`}
+            >
+                Cast
+            </Link>
+            <Link
+                scroll={false}
+                href={`/movie/${params.movieId}/photos`}
+                className={`tab ${
+                    path === `/movie/${params.movieId}/photos` && "tab-active"
+                }`}
+            >
+                Photos
+            </Link>
+            <Link
+                scroll={false}
+                href={`/movie/${params.movieId}/videos`}
+                className={`tab ${
+                    path === `/movie/${params.movieId}/videos` && "tab-active"
+                }`}
+            >
+                Videos
+            </Link>
+            <Link
+                scroll={false}
+                href={`/movie/${params.movieId}/recommendations`}
+                className={`tab ${
+                    path === `/movie/${params.movieId}/recommendations` &&
+                    "tab-active"
+                }`}
+            >
+                Recommendations
+            </Link>
+        </div>
+    );
+}
+
+export default MovieDetailTab;
diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index 8829ba2..4a8f785 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -1,111 +1,111 @@
-"use client";
-
-import Link from "next/link";
-import React, { useState } from "react";
-import { motion } from "framer-motion";
-function Pagination({
-    totalPages,
-    href,
-}: {
-    totalPages: number;
-    href?: string;
-}) {
-    const [currentPage, setCurrentPage] = useState(1);
-
-    const handlePageClick = (pageNumber: number) => {
-        setCurrentPage(pageNumber);
-    };
-
-    const renderPageNumbers = () => {
-        const pageNumbers = [];
-        const maxDisplayedPages = 3;
-
-        let startPage = Math.max(
-            1,
-            currentPage - Math.floor(maxDisplayedPages / 2)
-        );
-        let endPage = Math.min(totalPages, startPage + maxDisplayedPages - 1);
-        startPage = Math.max(1, endPage - maxDisplayedPages + 1);
-
-        for (let i = startPage; i <= endPage; i++) {
-            pageNumbers.push(
-                <Link
-                    href={`${href}page=${i}`}
-                    key={i}
-                    className={
-                        i === currentPage
-                            ? "btn-active btn btn-sm"
-                            : "btn btn-sm"
-                    }
-                    onClick={() => handlePageClick(i)}
-                >
-                    <motion.p>{i}</motion.p>
-                </Link>
-            );
-        }
-
-        pageNumbers.push(
-            <div key={"..."} className={"btn btn-sm"}>
-                <p>{"..."}</p>
-            </div>
-        );
-        if (currentPage < totalPages) {
-            pageNumbers.push(
-                <Link
-                    key={"last"}
-                    className={"btn btn-sm"}
-                    href={`${href}page=${totalPages}`}
-                    onClick={() => handlePageClick(totalPages)}
-                >
-                    <button>{totalPages}</button>
-                </Link>
-            );
-        }
-
-        if (currentPage >= maxDisplayedPages) {
-            pageNumbers.unshift(
-                <p key={"dot"} className={"btn btn-sm"}>
-                    <button>...</button>
-                </p>
-            );
-        }
-        if (currentPage >= maxDisplayedPages) {
-            pageNumbers.unshift(
-                <Link
-                    href={`${href}page=1`}
-                    key={"frist"}
-                    className={"btn btn-sm"}
-                    onClick={() => handlePageClick(1)}
-                >
-                    <button>1</button>
-                </Link>
-            );
-        }
-
-        return pageNumbers;
-    };
-
-    return (
-        <div className="btn-group">
-            <Link
-                href={`${href}page=${currentPage - 1}`}
-                className={`btn btn-sm ${currentPage === 1 && "disabled"}`}
-                onClick={() => setCurrentPage(currentPage - 1)}
-            >
-                {"<"}
-            </Link>
-            {renderPageNumbers()}
-            <Link
-                href={`${href}page=${currentPage + 1}`}
-                className={`btn btn-sm ${
-                    currentPage === totalPages && "disabled"
-                }`}
-                onClick={() => setCurrentPage(currentPage + 1)}
-            >
-                {">"}
-            </Link>
-        </div>
-    );
-}
-
-export default Pagination;
+"use client";
+
+import Link from "next/link";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+function Pagination({
+    totalPages,
+    href,
+}: {
+    totalPages: number;
+    href?: string;
+}) {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const handlePageClick = (pageNumber: number) => {
+        setCurrentPage(pageNumber);
+    };
+
+    const renderPageNumbers = () => {
+        const pageNumbers = [];
+        const maxDisplayedPages = 3;
+
+        let startPage = Math.max(
+            1,
+            currentPage - Math.floor(maxDisplayedPages / 2)
+        );
+        let endPage = Math.min(totalPages, startPage + maxDisplayedPages - 1);
+        startPage = Math.max(1, endPage - maxDisplayedPages + 1);
+
+        for (let i = startPage; i <= endPage; i++) {
+            pageNumbers.push(
+                <Link
+                    href={`${href}page=${i}`}
+                    key={i}
+                    className={
+                        i === currentPage
+                            ? "btn-active btn btn-sm"
+                            : "btn btn-sm"
+                    }
+                    onClick={() => handlePageClick(i)}
+                >
+                    <motion.p>{i}</motion.p>
+                </Link>
+            );
+        }
+
+        pageNumbers.push(
+            <div key={"..."} className={"btn btn-sm"}>
+                <p>{"..."}</p>
+            </div>
+        );
+        if (currentPage < totalPages) {
+            pageNumbers.push(
+                <Link
+                    key={"last"}
+                    className={"btn btn-sm"}
+                    href={`${href}page=${totalPages}`}
+                    onClick={() => handlePageClick(totalPages)}
+                >
+                    <button>{totalPages}</button>
+                </Link>
+            );
+        }
+
+        if (currentPage >= maxDisplayedPages) {
+            pageNumbers.unshift(
+                <p key={"dot"} className={"btn btn-sm"}>
+                    <button>...</button>
+                </p>
+            );
+        }
+        if (currentPage >= maxDisplayedPages) {
+            pageNumbers.unshift(
+                <Link
+                    href={`${href}page=1`}
+                    key={"frist"}
+                    className={"btn btn-sm"}
+                    onClick={() => handlePageClick(1)}
+                >
+                    <button>1</button>
+                </Link>
+            );
+        }
+
+        return pageNumbers;
+    };
+
+    return (
+        <div className="btn-group">
+            <Link
+                href={`${href}page=${currentPage - 1}`}
+                className={`btn btn-sm ${currentPage === 1 && "disabled"}`}
+                onClick={() => setCurrentPage(currentPage - 1)}
+            >
+                {"<"}
+            </Link>
+            {renderPageNumbers()}
+            <Link
+                href={`${href}page=${currentPage + 1}`}
+                className={`btn btn-sm ${
+                    currentPage === totalPages && "disabled"
+                }`}
+                onClick={() => setCurrentPage(currentPage + 1)}
+            >
+                {">"}
+            </Link>
+        </div>
+    );
+}
+
+export default Pagination;
diff --git a/app/components/PeopleCard.tsx b/app/components/PeopleCard.tsx
index bb5d858..39520a9 100644
--- a/app/components/PeopleCard.tsx
+++ b/app/components/PeopleCard.tsx
@@ -1,36 +1,36 @@
-import { TrendingPeople } from "@/service/TMDB.type";
-import Link from "next/link";
-import React from "react";
-import Image from "next/image";
-import tmdb from "@/service/TMDB";
-interface IPeopleCardProps {
-    people: TrendingPeople;
-}
-function PeopleCard({ people }: IPeopleCardProps) {
-    return (
-        <div className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-60 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10">
-            <figure className="overflow-hidden rounded-t-lg">
-                <Link href={"/people/" + people.id + "#top"}>
-                    <Image
-                        src={tmdb.getImage(people.profile_path, "w500")}
-                        width={500}
-                        height={500}
-                        alt="cast"
-                        loading="lazy"
-                        className="object-cover transition-all duration-300 w-60  group-hover:scale-110 lg:w-64 "
-                    />
-                </Link>
-            </figure>
-            <div className="card-body">
-                <Link href={"/people/" + people.id}>
-                    <p className="line-clamp-2 font-semibold">
-                        {" "}
-                        {people.name ?? people.original_name}
-                    </p>
-                </Link>
-            </div>
-        </div>
-    );
-}
-
-export default PeopleCard;
+import { TrendingPeople } from "@/service/TMDB.type";
+import Link from "next/link";
+import React from "react";
+import Image from "next/image";
+import tmdb from "@/service/TMDB";
+interface IPeopleCardProps {
+    people: TrendingPeople;
+}
+function PeopleCard({ people }: IPeopleCardProps) {
+    return (
+        <div className="transition-all duration-300 rounded-lg shadow-md cursor-pointer w-60 lg:w-64 bg-base-200 hover:ring-1 hover:ring-primary hover:scale-[1.01] hover:shadow-primary group card my-1 hover:bg-primary/10">
+            <figure className="overflow-hidden rounded-t-lg">
+                <Link href={"/people/" + people.id + "#top"}>
+                    <Image
+                        src={tmdb.getImage(people.profile_path, "w500")}
+                        width={500}
+                        height={500}
+                        alt="cast"
+                        loading="lazy"
+                        className="object-cover transition-all duration-300 w-60  group-hover:scale-110 lg:w-64 "
+                    />
+                </Link>
+            </figure>
+            <div className="card-body">
+                <Link href={"/people/" + people.id}>
+                    <p className="line-clamp-2 font-semibold">
+                        {" "}
+                        {people.name ?? people.original_name}
+                    </p>
+                </Link>
+            </div>
+        </div>
+    );
+}
+
+export default PeopleCard;
diff --git a/app/components/ShadowImg.tsx b/app/components/ShadowImg.tsx
index ed62390..c2b1b3c 100644
--- a/app/components/ShadowImg.tsx
+++ b/app/components/ShadowImg.tsx
@@ -1,58 +1,58 @@
-import React from "react";
-
-function ShadowImg() {
-    return (
-        <div className="absolute top-0 left-0 bottom-0 right-0 z-0">
-            <div className="h-full bg-gradient-to-b from-transparent to-[hsl(var(--b1))]"></div>
-        </div>
-    );
-}
-
-export default ShadowImg;
-// "use client";
-// import React from "react";
-// import Color, { Palette } from "color-thief-react";
-// function ShadowImg() {
-//     const imgSrc = `https://corsproxy.io/?${encodeURIComponent(
-//         "https://image.tmdb.org/t/p/original/nLBRD7UPR6GjmWQp6ASAfCTaWKX.jpg"
-//     )}`;
-
-//     return (
-//         <div>
-//             <img src={imgSrc} alt="" className="h-20 w-20" />
-
-//             <Color src={imgSrc} crossOrigin="anonymous" format="hex">
-//                 {({ data, loading }) => {
-//                     return (
-//                         <div>
-//                             Predominant color: <strong>{data}</strong>
-//                         </div>
-//                     );
-//                 }}
-//             </Color>
-//             <Palette
-//                 src={imgSrc}
-//                 crossOrigin="anonymous"
-//                 format="hex"
-//                 colorCount={4}
-//             >
-//                 {({ data, loading }) => {
-//                     return (
-//                         <div>
-//                             Palette:
-//                             <ul>
-//                                 {data?.map((color, index) => (
-//                                     <li key={index} style={{ color: color }}>
-//                                         <strong>{color}</strong>
-//                                     </li>
-//                                 ))}
-//                             </ul>
-//                         </div>
-//                     );
-//                 }}
-//             </Palette>
-//         </div>
-//     );
-// }
-
-// export default ShadowImg;
+import React from "react";
+
+function ShadowImg() {
+    return (
+        <div className="absolute top-0 left-0 bottom-0 right-0 z-0">
+            <div className="h-full bg-gradient-to-b from-transparent to-[hsl(var(--b1))]"></div>
+        </div>
+    );
+}
+
+export default ShadowImg;
+// "use client";
+// import React from "react";
+// import Color, { Palette } from "color-thief-react";
+// function ShadowImg() {
+//     const imgSrc = `https://corsproxy.io/?${encodeURIComponent(
+//         "https://image.tmdb.org/t/p/original/nLBRD7UPR6GjmWQp6ASAfCTaWKX.jpg"
+//     )}`;
+
+//     return (
+//         <div>
+//             <img src={imgSrc} alt="" className="h-20 w-20" />
+
+//             <Color src={imgSrc} crossOrigin="anonymous" format="hex">
+//                 {({ data, loading }) => {
+//                     return (
+//                         <div>
+//                             Predominant color: <strong>{data}</strong>
+//                         </div>
+//                     );
+//                 }}
+//             </Color>
+//             <Palette
+//                 src={imgSrc}
+//                 crossOrigin="anonymous"
+//                 format="hex"
+//                 colorCount={4}
+//             >
+//                 {({ data, loading }) => {
+//                     return (
+//                         <div>
+//                             Palette:
+//                             <ul>
+//                                 {data?.map((color, index) => (
+//                                     <li key={index} style={{ color: color }}>
+//                                         <strong>{color}</strong>
+//                                     </li>
+//                                 ))}
+//                             </ul>
+//                         </div>
+//                     );
+//                 }}
+//             </Palette>
+//         </div>
+//     );
+// }
+
+// export default ShadowImg;
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 2313751..8f896f6 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -1,335 +1,335 @@
-"use client";
-import React from "react";
-import { HomeIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import { motion } from "framer-motion";
-import useStore from "../(store)/store";
-import { usePathname } from "next/navigation";
-function Sidebar() {
-    const expandedSizeBar = useStore((state) => state.expandedSideBar);
-    const setExpandedSideBar = useStore((state) => state.setExpandedSideBar);
-    const pathname = usePathname();
-
-    return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            style={{
-                width: expandedSizeBar ? 250 : 80,
-                alignItems: expandedSizeBar ? "start" : "center",
-            }}
-            className="h-screen md:bg-base-200 shadow-md fixed top-0 md:left-0 -left-96 flex flex-col space-y-4 z-30 duration-500 transition-all py-2"
-        >
-            <div className="flex py-2 justify-center self-center">
-                <button onClick={() => setExpandedSideBar(expandedSizeBar)}>
-                    <svg
-                        className="swap-off fill-current"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="28"
-                        height="28"
-                        viewBox="0 0 512 512"
-                    >
-                        <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-                    </svg>
-                </button>
-
-                <Link href={"/"}>
-                    {expandedSizeBar && (
-                        <motion.div
-                            initial={{
-                                opacity: 0,
-                                display: "none",
-                                translateX: -200,
-                            }}
-                            animate={{
-                                opacity: 1,
-                                display: "inline-grid",
-                                translateX: 0,
-                            }}
-                            exit={{ opacity: 0 }}
-                            transition={{
-                                duration: 0.3,
-                                delay: 0.6,
-                            }}
-                        >
-                            <p className="text-gradient text-3xl font-extrabold ml-2">
-                                The Movies
-                            </p>
-                        </motion.div>
-                    )}
-                </Link>
-            </div>
-
-            <ul
-                className="menu space-y-4"
-                style={{ width: expandedSizeBar ? "100%" : "auto" }}
-            >
-                <li
-                    className="space-y-4 icon tooltip tooltip-right"
-                    data-tip="Trang chủ"
-                >
-                    <Link
-                        href={"/"}
-                        className={`${pathname === "/" && "active"}`}
-                    >
-                        <HomeIcon className="w-6 h-6" />
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2 text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.6,
-                                }}
-                            >
-                                Trang chủ
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-                <li
-                    className="space-y-4 icon tooltip tooltip-right"
-                    data-tip="Xu hướng"
-                >
-                    <Link
-                        href={"/trending/today"}
-                        className={`${pathname === "trending" && "active"}`}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
-                            />
-                        </svg>
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2  text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.65,
-                                }}
-                            >
-                                Xu hướng
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-                <li
-                    className="space-y-4 icon tooltip tooltip-right"
-                    data-tip="Khám phá"
-                >
-                    <Link
-                        href={"/discover/"}
-                        className={`${pathname === "discover" && "active"}`}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
-                            />
-                        </svg>
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2  text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.7,
-                                }}
-                            >
-                                Khám phá
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-                <li
-                    className="space-y-4 icon tooltip tooltip-right"
-                    data-tip="Tìm kiếm"
-                >
-                    <Link
-                        href={"/search/movie"}
-                        className={`${pathname === "search" && "active"}`}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                            />
-                        </svg>
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2  text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.75,
-                                }}
-                            >
-                                Tìm kiếm
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-                <li
-                    className="tooltip tooltip-right"
-                    data-tip="Người nổi tiếng"
-                >
-                    <Link
-                        href={"/people"}
-                        className={`${pathname === "/people" && "active"}`}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-                            />
-                        </svg>
-
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2  text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.8,
-                                }}
-                            >
-                                Người nổi tiếng
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-                <li
-                    className="tooltip tooltip-right"
-                    data-tip="Người nổi tiếng"
-                >
-                    <Link
-                        href={"/setting"}
-                        className={`${pathname === "/setting" && "active"}`}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            fill="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                fillRule="evenodd"
-                                d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                        {expandedSizeBar && (
-                            <motion.p
-                                className="font-normal ml-2  text-lg"
-                                initial={{
-                                    opacity: 0,
-                                    display: "none",
-                                    translateX: -200,
-                                }}
-                                animate={{
-                                    opacity: 1,
-                                    display: "inline-grid",
-                                    translateX: 0,
-                                }}
-                                exit={{ opacity: 0 }}
-                                transition={{
-                                    duration: 0.5,
-                                    delay: 0.8,
-                                }}
-                            >
-                                Cài đặt
-                            </motion.p>
-                        )}
-                    </Link>
-                </li>
-            </ul>
-        </motion.div>
-    );
-}
-
-export default Sidebar;
+"use client";
+import React from "react";
+import { HomeIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import useStore from "../(store)/store";
+import { usePathname } from "next/navigation";
+function Sidebar() {
+    const expandedSizeBar = useStore((state) => state.expandedSideBar);
+    const setExpandedSideBar = useStore((state) => state.setExpandedSideBar);
+    const pathname = usePathname();
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            style={{
+                width: expandedSizeBar ? 250 : 80,
+                alignItems: expandedSizeBar ? "start" : "center",
+            }}
+            className="h-screen md:bg-base-200 shadow-md fixed top-0 md:left-0 -left-96 flex flex-col space-y-4 z-30 duration-500 transition-all py-2"
+        >
+            <div className="flex py-2 justify-center self-center">
+                <button onClick={() => setExpandedSideBar(expandedSizeBar)}>
+                    <svg
+                        className="swap-off fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="28"
+                        height="28"
+                        viewBox="0 0 512 512"
+                    >
+                        <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+                    </svg>
+                </button>
+
+                <Link href={"/"}>
+                    {expandedSizeBar && (
+                        <motion.div
+                            initial={{
+                                opacity: 0,
+                                display: "none",
+                                translateX: -200,
+                            }}
+                            animate={{
+                                opacity: 1,
+                                display: "inline-grid",
+                                translateX: 0,
+                            }}
+                            exit={{ opacity: 0 }}
+                            transition={{
+                                duration: 0.3,
+                                delay: 0.6,
+                            }}
+                        >
+                            <p className="text-gradient text-3xl font-extrabold ml-2">
+                                The Movies
+                            </p>
+                        </motion.div>
+                    )}
+                </Link>
+            </div>
+
+            <ul
+                className="menu space-y-4"
+                style={{ width: expandedSizeBar ? "100%" : "auto" }}
+            >
+                <li
+                    className="space-y-4 icon tooltip tooltip-right"
+                    data-tip="Trang chủ"
+                >
+                    <Link
+                        href={"/"}
+                        className={`${pathname === "/" && "active"}`}
+                    >
+                        <HomeIcon className="w-6 h-6" />
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2 text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.6,
+                                }}
+                            >
+                                Trang chủ
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+                <li
+                    className="space-y-4 icon tooltip tooltip-right"
+                    data-tip="Xu hướng"
+                >
+                    <Link
+                        href={"/trending/today"}
+                        className={`${pathname === "trending" && "active"}`}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
+                            />
+                        </svg>
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2  text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.65,
+                                }}
+                            >
+                                Xu hướng
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+                <li
+                    className="space-y-4 icon tooltip tooltip-right"
+                    data-tip="Khám phá"
+                >
+                    <Link
+                        href={"/discover/"}
+                        className={`${pathname === "discover" && "active"}`}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
+                            />
+                        </svg>
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2  text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.7,
+                                }}
+                            >
+                                Khám phá
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+                <li
+                    className="space-y-4 icon tooltip tooltip-right"
+                    data-tip="Tìm kiếm"
+                >
+                    <Link
+                        href={"/search/movie"}
+                        className={`${pathname === "search" && "active"}`}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                            />
+                        </svg>
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2  text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.75,
+                                }}
+                            >
+                                Tìm kiếm
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+                <li
+                    className="tooltip tooltip-right"
+                    data-tip="Người nổi tiếng"
+                >
+                    <Link
+                        href={"/people"}
+                        className={`${pathname === "/people" && "active"}`}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+                            />
+                        </svg>
+
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2  text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.8,
+                                }}
+                            >
+                                Người nổi tiếng
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+                <li
+                    className="tooltip tooltip-right"
+                    data-tip="Người nổi tiếng"
+                >
+                    <Link
+                        href={"/setting"}
+                        className={`${pathname === "/setting" && "active"}`}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
+                                clipRule="evenodd"
+                            />
+                        </svg>
+                        {expandedSizeBar && (
+                            <motion.p
+                                className="font-normal ml-2  text-lg"
+                                initial={{
+                                    opacity: 0,
+                                    display: "none",
+                                    translateX: -200,
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    display: "inline-grid",
+                                    translateX: 0,
+                                }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: 0.8,
+                                }}
+                            >
+                                Cài đặt
+                            </motion.p>
+                        )}
+                    </Link>
+                </li>
+            </ul>
+        </motion.div>
+    );
+}
+
+export default Sidebar;
diff --git a/app/components/Slider.tsx b/app/components/Slider.tsx
index 65b7527..41f7c65 100644
--- a/app/components/Slider.tsx
+++ b/app/components/Slider.tsx
@@ -1,333 +1,333 @@
-"use client";
-import React, {
-    useState,
-    useEffect,
-    Fragment,
-    useRef,
-    useLayoutEffect,
-} from "react";
-import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
-import "swiper/css";
-import "swiper/css/effect-creative";
-import "swiper/css/thumbs";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-import "swiper/css/free-mode";
-
-import Image from "next/image";
-import { motion, AnimatePresence } from "framer-motion";
-import SwiperCore, {
-    Autoplay,
-    Pagination,
-    Thumbs,
-    Controller,
-    FreeMode,
-} from "swiper";
-import Link from "next/link";
-import { Genre, TrendingMovie } from "@/service/TMDB.type";
-import tmdb from "@/service/TMDB";
-import ShadowImg from "./ShadowImg";
-import useWindowDimensions from "@/hooks/useWindowDemensions";
-import { useRouter } from "next/navigation";
-import useStore from "../(store)/store";
-
-function Slider({ movie }: { movie: { results: TrendingMovie[] } }) {
-    const router = useRouter();
-    const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();
-    const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
-    const swiper1Ref = useRef<any>(null);
-    const swiper2Ref = useRef();
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const expandedSideBar = useStore((state) => state.expandedSideBar);
-    const [listLogo, setListLogo] = useState<any>([]);
-
-    const [listGenres, setListGenres] = useState<Genre[]>([]);
-
-    useEffect(() => {
-        const getListGenres = async () => {
-            const data = await tmdb.getListGenres("movie");
-            setListGenres(data.genres);
-        };
-        const promises = [];
-        for (const m of movie.results) {
-            promises.push(tmdb.getPhotos("movie", m.id));
-        }
-        Promise.all(promises)
-            .then((data) => {
-                setListLogo(data);
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-        getListGenres();
-    }, [movie.results]);
-    const getGenresOfMovie = (m: any) => {
-        const genres = listGenres.filter((g) => m.genre_ids.includes(g.id));
-        return genres;
-    };
-    const { width } = useWindowDimensions();
-    useLayoutEffect(() => {
-        if (swiper1Ref.current !== null) {
-            swiper1Ref.current.controller.control = swiper2Ref.current;
-        }
-    }, []);
-    return (
-        <Fragment>
-            <Swiper
-                thumbs={{
-                    swiper:
-                        thumbsSwiper && !thumbsSwiper.destroyed
-                            ? thumbsSwiper
-                            : null,
-                }}
-                onSlideChange={(e) => {
-                    setCurrentIndex(e.realIndex);
-                }}
-                autoplay={{
-                    delay: 10000,
-                }}
-                pagination={width < 768 ? true : false}
-                slidesPerView={width < 768 ? 1.25 : 1}
-                grabCursor={true}
-                modules={[Autoplay, Pagination, Thumbs, Controller]}
-                className="mb-6"
-                spaceBetween={15}
-                centeredSlides
-                loop
-            >
-                <AnimatePresence initial={false}>
-                    {movie.results.slice(0, 10).map((m, index) => (
-                        <SwiperSlide
-                            key={m.id}
-                            className={`${width < 768 && "pt-24"}`}
-                        >
-                            <motion.div
-                                onClick={() => router.push("/movie/" + m.id)}
-                                className="w-full z-10"
-                                initial={{
-                                    scale: 1.05,
-                                }}
-                                animate={{ scale: 1 }}
-                                exit={{ scale: 1.05 }}
-                                transition={{ duration: 1 }}
-                                key={currentIndex}
-                            >
-                                <Link
-                                    href={`${"/movie/" + m.id}#top`}
-                                    prefetch={false}
-                                >
-                                    <Image
-                                        src={
-                                            width < 768
-                                                ? width > 640
-                                                    ? tmdb.getImage(
-                                                          m.backdrop_path
-                                                      )
-                                                    : tmdb.getImage(
-                                                          m.poster_path
-                                                      )
-                                                : tmdb.getImage(m.backdrop_path)
-                                        }
-                                        alt="film"
-                                        className="md:w-full w-full md:brightness-50 object-cover h-[60vh] lg:h-[95vh] md:rounded-tl-none rounded-xl md:rounded-tr-none"
-                                        width={1920}
-                                        height={1080}
-                                        loading="lazy"
-                                    />
-                                </Link>
-                                <ShadowImg />
-                            </motion.div>
-                            <div className="absolute bottom-0 md:top-0 flex flex-col md:justify-around lg:px-8 md:flex-row w-full px-8 justify-center items-center xl:-mt-20">
-                                <div
-                                    className={`${
-                                        currentIndex === index
-                                            ? "opacity-100"
-                                            : "opacity-0"
-                                    } w-full lg:w-8/12 flex flex-col`}
-                                >
-                                    <motion.div
-                                        initial={{
-                                            opacity: 0,
-                                            x: 100,
-                                        }}
-                                        animate={{
-                                            opacity: 1,
-                                            x: 0,
-                                        }}
-                                        exit={{ opacity: 0, x: 100 }}
-                                        transition={{
-                                            duration: 0.5,
-                                            delay: 0.5,
-                                        }}
-                                        key={currentIndex}
-                                    >
-                                        <motion.div className="lg:text-[3rem] md:text-[2rem] text-[1.5rem] text-base-content font-semibold drop-shadow-2xl shadow-black w-full ">
-                                            {listLogo?.[index]?.logos[0]
-                                                ?.file_path && width > 768 ? (
-                                                <Image
-                                                    src={tmdb.getImage(
-                                                        listLogo?.[index]
-                                                            ?.logos[0]
-                                                            ?.file_path,
-                                                        "w300"
-                                                    )}
-                                                    width={500}
-                                                    height={500}
-                                                    priority
-                                                    className="lg:w-auto lg:h-auto mb-4 w-40"
-                                                    alt="img"
-                                                />
-                                            ) : (
-                                                <p className="text-center">
-                                                    {m.title}
-                                                </p>
-                                            )}
-                                        </motion.div>
-                                        <div className="md:flex items-center mb-6 hidden">
-                                            <p className="badge badge-info font-bold">
-                                                TMDB
-                                            </p>
-                                            <span className="font-bold ml-2">
-                                                {m.vote_average.toFixed(1)}
-                                            </span>
-                                            <div className="md:flex gap-2 ml-6 flex-wrap ">
-                                                {getGenresOfMovie(m).map(
-                                                    (x) => (
-                                                        <div
-                                                            key={x.id}
-                                                            className="badge badge-secondary font-bold"
-                                                        >
-                                                            {x.name}
-                                                        </div>
-                                                    )
-                                                )}
-                                            </div>
-                                        </div>
-
-                                        <motion.p
-                                            initial={{
-                                                opacity: 0,
-                                                x: 50,
-                                            }}
-                                            animate={{
-                                                opacity: 1,
-                                                x: 0,
-                                            }}
-                                            exit={{ opacity: 0, x: 50 }}
-                                            transition={{
-                                                duration: 0.5,
-                                                delay: 0.7,
-                                            }}
-                                            key={currentIndex}
-                                            className="hidden drop-shadow-2xl shadow-black text-[1rem]  w-full text-base-content md:block text-justify"
-                                        >
-                                            {m.overview}
-                                        </motion.p>
-                                        <motion.div
-                                            initial={{
-                                                opacity: 0,
-                                                x: 50,
-                                            }}
-                                            animate={{
-                                                opacity: 1,
-                                                x: 0,
-                                            }}
-                                            exit={{ opacity: 0, x: 50 }}
-                                            transition={{
-                                                duration: 0.6,
-                                                delay: 0.9,
-                                            }}
-                                            key={currentIndex + m.title}
-                                            className={`flex flex-row py-8`}
-                                        >
-                                            <Link
-                                                href={`${"/movie/" + m.id}#top`}
-                                                className="md:btn md:btn-primary capitalize hidden"
-                                            >
-                                                <span>Xem chi tiết</span>
-                                            </Link>
-                                        </motion.div>
-                                    </motion.div>
-                                </div>
-                                <div className={`hidden lg:block ml-4`}>
-                                    <motion.img
-                                        loading="lazy"
-                                        key={currentIndex}
-                                        src={tmdb.getImage(m.poster_path)}
-                                        alt="film"
-                                        className="rounded-3xl w-72"
-                                        initial={{ opacity: 0, scale: 0 }}
-                                        animate={{ opacity: 1, scale: 1 }}
-                                        exit={{ opacity: 0, scale: 0 }}
-                                        transition={{ duration: 1 }}
-                                        layout
-                                    />
-                                </div>
-                            </div>
-                        </SwiperSlide>
-                    ))}
-                </AnimatePresence>
-            </Swiper>
-
-            <div className="hidden lg:block">
-                <Swiper
-                    className="absolute bottom-48 hidden lg:block"
-                    controller={{ control: firstSwiper }}
-                    modules={[Thumbs, Controller, FreeMode]}
-                    onSwiper={setThumbsSwiper}
-                    watchSlidesProgress
-                    slideToClickedSlide={true}
-                    touchRatio={0.2}
-                    slidesPerGroup={1}
-                    freeMode
-                    slidesPerView={
-                        width > 1700
-                            ? 1700 / 270
-                            : expandedSideBar
-                            ? (width - 200) / 270
-                            : width / 270
-                    }
-                >
-                    {movie.results.slice(0, 10).map((m, index) => {
-                        return (
-                            <SwiperSlide
-                                key={m.id}
-                                className="p-2 group"
-                                virtualIndex={index}
-                            >
-                                <div
-                                    className={`md:w-60 rounded-md relative flex justify-center items-center  ${
-                                        index === currentIndex &&
-                                        "ring-4 ring-primary"
-                                    } overflow-hidden cursor-pointer hover:ring-4 hover:ring-primary`}
-                                >
-                                    <Image
-                                        src={tmdb.getImage(
-                                            m.backdrop_path,
-                                            "w500"
-                                        )}
-                                        alt="film"
-                                        className={`md:w-60 rounded-md group-hover:scale-110 group-hover:w-60 transition-all duration-150 hover:brightness-50`}
-                                        width={500}
-                                        height={500}
-                                        priority
-                                    />
-                                    <ShadowImg />
-
-                                    <p
-                                        className="absolute top-6 left-2 opacity-0 group-hover:opacity-95 transition-all duration-200 w-32
-                            font-bold pointer-events-none"
-                                    >
-                                        {m.title}
-                                    </p>
-                                </div>
-                            </SwiperSlide>
-                        );
-                    })}
-                </Swiper>
-            </div>
-        </Fragment>
-    );
-}
-
-export default Slider;
+"use client";
+import React, {
+    useState,
+    useEffect,
+    Fragment,
+    useRef,
+    useLayoutEffect,
+} from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/effect-creative";
+import "swiper/css/thumbs";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css/free-mode";
+
+import Image from "next/image";
+import { motion, AnimatePresence } from "framer-motion";
+import SwiperCore, {
+    Autoplay,
+    Pagination,
+    Thumbs,
+    Controller,
+    FreeMode,
+} from "swiper";
+import Link from "next/link";
+import { Genre, TrendingMovie } from "@/service/TMDB.type";
+import tmdb from "@/service/TMDB";
+import ShadowImg from "./ShadowImg";
+import useWindowDimensions from "@/hooks/useWindowDemensions";
+import { useRouter } from "next/navigation";
+import useStore from "../(store)/store";
+
+function Slider({ movie }: { movie: { results: TrendingMovie[] } }) {
+    const router = useRouter();
+    const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();
+    const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
+    const swiper1Ref = useRef<any>(null);
+    const swiper2Ref = useRef();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const expandedSideBar = useStore((state) => state.expandedSideBar);
+    const [listLogo, setListLogo] = useState<any>([]);
+
+    const [listGenres, setListGenres] = useState<Genre[]>([]);
+
+    useEffect(() => {
+        const getListGenres = async () => {
+            const data = await tmdb.getListGenres("movie");
+            setListGenres(data.genres);
+        };
+        const promises = [];
+        for (const m of movie.results) {
+            promises.push(tmdb.getPhotos("movie", m.id));
+        }
+        Promise.all(promises)
+            .then((data) => {
+                setListLogo(data);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+        getListGenres();
+    }, [movie.results]);
+    const getGenresOfMovie = (m: any) => {
+        const genres = listGenres.filter((g) => m.genre_ids.includes(g.id));
+        return genres;
+    };
+    const { width } = useWindowDimensions();
+    useLayoutEffect(() => {
+        if (swiper1Ref.current !== null) {
+            swiper1Ref.current.controller.control = swiper2Ref.current;
+        }
+    }, []);
+    return (
+        <Fragment>
+            <Swiper
+                thumbs={{
+                    swiper:
+                        thumbsSwiper && !thumbsSwiper.destroyed
+                            ? thumbsSwiper
+                            : null,
+                }}
+                onSlideChange={(e) => {
+                    setCurrentIndex(e.realIndex);
+                }}
+                autoplay={{
+                    delay: 10000,
+                }}
+                pagination={width < 768 ? true : false}
+                slidesPerView={width < 768 ? 1.25 : 1}
+                grabCursor={true}
+                modules={[Autoplay, Pagination, Thumbs, Controller]}
+                className="mb-6"
+                spaceBetween={15}
+                centeredSlides
+                loop
+            >
+                <AnimatePresence initial={false}>
+                    {movie.results.slice(0, 10).map((m, index) => (
+                        <SwiperSlide
+                            key={m.id}
+                            className={`${width < 768 && "pt-24"}`}
+                        >
+                            <motion.div
+                                onClick={() => router.push("/movie/" + m.id)}
+                                className="w-full z-10"
+                                initial={{
+                                    scale: 1.05,
+                                }}
+                                animate={{ scale: 1 }}
+                                exit={{ scale: 1.05 }}
+                                transition={{ duration: 1 }}
+                                key={currentIndex}
+                            >
+                                <Link
+                                    href={`${"/movie/" + m.id}#top`}
+                                    prefetch={false}
+                                >
+                                    <Image
+                                        src={
+                                            width < 768
+                                                ? width > 640
+                                                    ? tmdb.getImage(
+                                                          m.backdrop_path
+                                                      )
+                                                    : tmdb.getImage(
+                                                          m.poster_path
+                                                      )
+                                                : tmdb.getImage(m.backdrop_path)
+                                        }
+                                        alt="film"
+                                        className="md:w-full w-full md:brightness-50 object-cover h-[60vh] lg:h-[95vh] md:rounded-tl-none rounded-xl md:rounded-tr-none"
+                                        width={1920}
+                                        height={1080}
+                                        loading="lazy"
+                                    />
+                                </Link>
+                                <ShadowImg />
+                            </motion.div>
+                            <div className="absolute bottom-0 md:top-0 flex flex-col md:justify-around lg:px-8 md:flex-row w-full px-8 justify-center items-center xl:-mt-20">
+                                <div
+                                    className={`${
+                                        currentIndex === index
+                                            ? "opacity-100"
+                                            : "opacity-0"
+                                    } w-full lg:w-8/12 flex flex-col`}
+                                >
+                                    <motion.div
+                                        initial={{
+                                            opacity: 0,
+                                            x: 100,
+                                        }}
+                                        animate={{
+                                            opacity: 1,
+                                            x: 0,
+                                        }}
+                                        exit={{ opacity: 0, x: 100 }}
+                                        transition={{
+                                            duration: 0.5,
+                                            delay: 0.5,
+                                        }}
+                                        key={currentIndex}
+                                    >
+                                        <motion.div className="lg:text-[3rem] md:text-[2rem] text-[1.5rem] text-base-content font-semibold drop-shadow-2xl shadow-black w-full ">
+                                            {listLogo?.[index]?.logos[0]
+                                                ?.file_path && width > 768 ? (
+                                                <Image
+                                                    src={tmdb.getImage(
+                                                        listLogo?.[index]
+                                                            ?.logos[0]
+                                                            ?.file_path,
+                                                        "w300"
+                                                    )}
+                                                    width={500}
+                                                    height={500}
+                                                    priority
+                                                    className="lg:w-auto lg:h-auto mb-4 w-40"
+                                                    alt="img"
+                                                />
+                                            ) : (
+                                                <p className="text-center">
+                                                    {m.title}
+                                                </p>
+                                            )}
+                                        </motion.div>
+                                        <div className="md:flex items-center mb-6 hidden">
+                                            <p className="badge badge-info font-bold">
+                                                TMDB
+                                            </p>
+                                            <span className="font-bold ml-2">
+                                                {m.vote_average.toFixed(1)}
+                                            </span>
+                                            <div className="md:flex gap-2 ml-6 flex-wrap ">
+                                                {getGenresOfMovie(m).map(
+                                                    (x) => (
+                                                        <div
+                                                            key={x.id}
+                                                            className="badge badge-secondary font-bold"
+                                                        >
+                                                            {x.name}
+                                                        </div>
+                                                    )
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        <motion.p
+                                            initial={{
+                                                opacity: 0,
+                                                x: 50,
+                                            }}
+                                            animate={{
+                                                opacity: 1,
+                                                x: 0,
+                                            }}
+                                            exit={{ opacity: 0, x: 50 }}
+                                            transition={{
+                                                duration: 0.5,
+                                                delay: 0.7,
+                                            }}
+                                            key={currentIndex}
+                                            className="hidden drop-shadow-2xl shadow-black text-[1rem]  w-full text-base-content md:block text-justify"
+                                        >
+                                            {m.overview}
+                                        </motion.p>
+                                        <motion.div
+                                            initial={{
+                                                opacity: 0,
+                                                x: 50,
+                                            }}
+                                            animate={{
+                                                opacity: 1,
+                                                x: 0,
+                                            }}
+                                            exit={{ opacity: 0, x: 50 }}
+                                            transition={{
+                                                duration: 0.6,
+                                                delay: 0.9,
+                                            }}
+                                            key={currentIndex + m.title}
+                                            className={`flex flex-row py-8`}
+                                        >
+                                            <Link
+                                                href={`${"/movie/" + m.id}#top`}
+                                                className="md:btn md:btn-primary capitalize hidden"
+                                            >
+                                                <span>Xem chi tiết</span>
+                                            </Link>
+                                        </motion.div>
+                                    </motion.div>
+                                </div>
+                                <div className={`hidden lg:block ml-4`}>
+                                    <motion.img
+                                        loading="lazy"
+                                        key={currentIndex}
+                                        src={tmdb.getImage(m.poster_path)}
+                                        alt="film"
+                                        className="rounded-3xl w-72"
+                                        initial={{ opacity: 0, scale: 0 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{ opacity: 0, scale: 0 }}
+                                        transition={{ duration: 1 }}
+                                        layout
+                                    />
+                                </div>
+                            </div>
+                        </SwiperSlide>
+                    ))}
+                </AnimatePresence>
+            </Swiper>
+
+            <div className="hidden lg:block">
+                <Swiper
+                    className="absolute bottom-48 hidden lg:block"
+                    controller={{ control: firstSwiper }}
+                    modules={[Thumbs, Controller, FreeMode]}
+                    onSwiper={setThumbsSwiper}
+                    watchSlidesProgress
+                    slideToClickedSlide={true}
+                    touchRatio={0.2}
+                    slidesPerGroup={1}
+                    freeMode
+                    slidesPerView={
+                        width > 1700
+                            ? 1700 / 270
+                            : expandedSideBar
+                            ? (width - 200) / 270
+                            : width / 270
+                    }
+                >
+                    {movie.results.slice(0, 10).map((m, index) => {
+                        return (
+                            <SwiperSlide
+                                key={m.id}
+                                className="p-2 group"
+                                virtualIndex={index}
+                            >
+                                <div
+                                    className={`md:w-60 rounded-md relative flex justify-center items-center  ${
+                                        index === currentIndex &&
+                                        "ring-4 ring-primary"
+                                    } overflow-hidden cursor-pointer hover:ring-4 hover:ring-primary`}
+                                >
+                                    <Image
+                                        src={tmdb.getImage(
+                                            m.backdrop_path,
+                                            "w500"
+                                        )}
+                                        alt="film"
+                                        className={`md:w-60 rounded-md group-hover:scale-110 group-hover:w-60 transition-all duration-150 hover:brightness-50`}
+                                        width={500}
+                                        height={500}
+                                        priority
+                                    />
+                                    <ShadowImg />
+
+                                    <p
+                                        className="absolute top-6 left-2 opacity-0 group-hover:opacity-95 transition-all duration-200 w-32
+                            font-bold pointer-events-none"
+                                    >
+                                        {m.title}
+                                    </p>
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            </div>
+        </Fragment>
+    );
+}
+
+export default Slider;
diff --git a/app/components/StickyTab.tsx b/app/components/StickyTab.tsx
index 6238dcb..7c4f8cd 100644
--- a/app/components/StickyTab.tsx
+++ b/app/components/StickyTab.tsx
@@ -1,42 +1,42 @@
-"use client";
-import { motion } from "framer-motion";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import React from "react";
-
-type Tab = {
-    tabName: string;
-    href: string;
-};
-interface ITabProps {
-    tabs: Tab[];
-}
-function StickyTab({ tabs }: ITabProps) {
-    const pathName = usePathname();
-
-    return (
-        <div className="z-20 w-full px-4 bg-base-100 backdrop-blur-lg bg-opacity-80 flex justify-between  border-b border-secondary/10 sticky top-16">
-            <div className="flex py-4 gap-8">
-                {tabs.map((tab, index) => (
-                    <Link
-                        key={index}
-                        scroll={false}
-                        href={tab.href}
-                        className="text-sm md:text-lg font-semibold relative flex flex-col items-center"
-                    >
-                        {tab.tabName}
-                        {pathName == tab.href && (
-                            <motion.div
-                                layoutId="underline"
-                                transition={{ type: "keyframes" }}
-                                className="absolute h-1 bg-primary w-1/2 rounded-full top-8 md:top-10"
-                            ></motion.div>
-                        )}
-                    </Link>
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default StickyTab;
+"use client";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+type Tab = {
+    tabName: string;
+    href: string;
+};
+interface ITabProps {
+    tabs: Tab[];
+}
+function StickyTab({ tabs }: ITabProps) {
+    const pathName = usePathname();
+
+    return (
+        <div className="z-20 w-full px-4 bg-base-100 backdrop-blur-lg bg-opacity-80 flex justify-between  border-b border-secondary/10 sticky top-16">
+            <div className="flex py-4 gap-8">
+                {tabs.map((tab, index) => (
+                    <Link
+                        key={index}
+                        scroll={false}
+                        href={tab.href}
+                        className="text-sm md:text-lg font-semibold relative flex flex-col items-center"
+                    >
+                        {tab.tabName}
+                        {pathName == tab.href && (
+                            <motion.div
+                                layoutId="underline"
+                                transition={{ type: "keyframes" }}
+                                className="absolute h-1 bg-primary w-1/2 rounded-full top-8 md:top-10"
+                            ></motion.div>
+                        )}
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default StickyTab;
diff --git a/app/components/WatchTrailerButton.tsx b/app/components/WatchTrailerButton.tsx
index 4afd774..b58c95e 100644
--- a/app/components/WatchTrailerButton.tsx
+++ b/app/components/WatchTrailerButton.tsx
@@ -1,18 +1,18 @@
-"use client";
-import React from "react";
-import useStore from "../(store)/store";
-
-function WatchTrailerButton({ videoId }: { videoId: string }) {
-    const setVideoId = useStore((state) => state.setVideoId);
-    return (
-        <label
-            htmlFor="my-modal"
-            onClick={() => setVideoId(videoId)}
-            className="btn btn-primary w-fit"
-        >
-            <span className="capitalize">Xem Trailer</span>
-        </label>
-    );
-}
-
-export default WatchTrailerButton;
+"use client";
+import React from "react";
+import useStore from "../(store)/store";
+
+function WatchTrailerButton({ videoId }: { videoId: string }) {
+    const setVideoId = useStore((state) => state.setVideoId);
+    return (
+        <label
+            htmlFor="my-modal"
+            onClick={() => setVideoId(videoId)}
+            className="btn btn-primary w-fit"
+        >
+            <span className="capitalize">Xem Trailer</span>
+        </label>
+    );
+}
+
+export default WatchTrailerButton;
diff --git a/app/components/mobile/MobileTab.tsx b/app/components/mobile/MobileTab.tsx
index 8730bba..fbc4bf5 100644
--- a/app/components/mobile/MobileTab.tsx
+++ b/app/components/mobile/MobileTab.tsx
@@ -1,155 +1,155 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import Link from "next/link";
-import { HomeIcon } from "@heroicons/react/24/outline";
-function MobileTab() {
-    const [isScroll, setIsScroll] = useState(false);
-    useEffect(() => {
-        const onScrollTop = () => {
-            if (window.scrollY > 90) {
-                setIsScroll(true);
-            } else {
-                setIsScroll(false);
-            }
-        };
-        window.addEventListener("scroll", onScrollTop);
-        return () => window.removeEventListener("scroll", onScrollTop);
-    }, []);
-    return (
-        <div
-            className={`fixed bottom-0 z-50 bg-base-300 h-16 w-full flex flex-row items-center bg-opacity-80 backdrop-blur-sm justify-around transition-all duration-500 md:-bottom-96 `}
-        >
-            <div>
-                <Link
-                    href={"/"}
-                    className="flex justify-center items-center flex-col"
-                >
-                    <HomeIcon className="h-6 w-6 text-base-content" />
-                    <p>Trang chủ</p>
-                </Link>
-            </div>
-            <div>
-                <Link
-                    href={"/trending/today"}
-                    className="flex justify-center items-center flex-col"
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={1.5}
-                        stroke="currentColor"
-                        className="w-6 h-6 text-base-content"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
-                        />
-                    </svg>
-                    <p>Trending</p>
-                </Link>
-            </div>
-            <div className="dropdown dropdown-top dropdown-end">
-                <label
-                    tabIndex={0}
-                    className="flex justify-center items-center flex-col"
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={1.5}
-                        stroke="currentColor"
-                        className="w-6 h-6"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-                        />
-                    </svg>
-                    <p>More</p>
-                </label>
-                <ul
-                    tabIndex={0}
-                    className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 mb-6"
-                >
-                    <li>
-                        <div>
-                            <Link
-                                href={"/setting"}
-                                className="flex justify-center items-center gap-2"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 24 24"
-                                    fill="currentColor"
-                                    className="w-6 h-6 text-base-content"
-                                >
-                                    <path
-                                        fillRule="evenodd"
-                                        d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                                        clipRule="evenodd"
-                                    />
-                                </svg>
-                                <p>Cài đặt</p>
-                            </Link>
-                        </div>
-                    </li>
-                    <li>
-                        <div>
-                            <Link
-                                href={"/search/movie"}
-                                className="flex justify-center items-center gap-2"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    strokeWidth={1.5}
-                                    stroke="currentColor"
-                                    className="w-6 h-6 text-base-content"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                                    />
-                                </svg>
-                                <p>Tìm kiếm</p>
-                            </Link>
-                        </div>
-                    </li>
-                    <li>
-                        <div>
-                            <Link
-                                href={"/discover/"}
-                                tabIndex={0}
-                                className="flex justify-center items-center gap-2"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    strokeWidth={1.5}
-                                    stroke="currentColor"
-                                    className="w-6 h-6"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
-                                    />
-                                </svg>
-                                Khám phá
-                            </Link>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default MobileTab;
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { HomeIcon } from "@heroicons/react/24/outline";
+function MobileTab() {
+    const [isScroll, setIsScroll] = useState(false);
+    useEffect(() => {
+        const onScrollTop = () => {
+            if (window.scrollY > 90) {
+                setIsScroll(true);
+            } else {
+                setIsScroll(false);
+            }
+        };
+        window.addEventListener("scroll", onScrollTop);
+        return () => window.removeEventListener("scroll", onScrollTop);
+    }, []);
+    return (
+        <div
+            className={`fixed bottom-0 z-50 bg-base-300 h-16 w-full flex flex-row items-center bg-opacity-80 backdrop-blur-sm justify-around transition-all duration-500 md:-bottom-96 `}
+        >
+            <div>
+                <Link
+                    href={"/"}
+                    className="flex justify-center items-center flex-col"
+                >
+                    <HomeIcon className="h-6 w-6 text-base-content" />
+                    <p>Trang chủ</p>
+                </Link>
+            </div>
+            <div>
+                <Link
+                    href={"/trending/today"}
+                    className="flex justify-center items-center flex-col"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="w-6 h-6 text-base-content"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
+                        />
+                    </svg>
+                    <p>Trending</p>
+                </Link>
+            </div>
+            <div className="dropdown dropdown-top dropdown-end">
+                <label
+                    tabIndex={0}
+                    className="flex justify-center items-center flex-col"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="w-6 h-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        />
+                    </svg>
+                    <p>More</p>
+                </label>
+                <ul
+                    tabIndex={0}
+                    className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 mb-6"
+                >
+                    <li>
+                        <div>
+                            <Link
+                                href={"/setting"}
+                                className="flex justify-center items-center gap-2"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="w-6 h-6 text-base-content"
+                                >
+                                    <path
+                                        fillRule="evenodd"
+                                        d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
+                                        clipRule="evenodd"
+                                    />
+                                </svg>
+                                <p>Cài đặt</p>
+                            </Link>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <Link
+                                href={"/search/movie"}
+                                className="flex justify-center items-center gap-2"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="w-6 h-6 text-base-content"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                                    />
+                                </svg>
+                                <p>Tìm kiếm</p>
+                            </Link>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <Link
+                                href={"/discover/"}
+                                tabIndex={0}
+                                className="flex justify-center items-center gap-2"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="w-6 h-6"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
+                                    />
+                                </svg>
+                                Khám phá
+                            </Link>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export default MobileTab;
diff --git a/app/components/search/Search.tsx b/app/components/search/Search.tsx
index 67eb4ce..1c3c3e4 100644
--- a/app/components/search/Search.tsx
+++ b/app/components/search/Search.tsx
@@ -1,26 +1,26 @@
-"use client";
-import React, { useState } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-function Search({}) {
-    const pathName = usePathname();
-    const [searchValue, setSearchValue] = useState("");
-    return (
-        <div className="flex flex-row gap-4 justify-between items-center">
-            <input
-                type="text"
-                className="input  input-primary w-full"
-                placeholder="Nhập tên phim cần tìm"
-                onChange={(e) => setSearchValue(e.target.value)}
-            />
-            <Link
-                href={`${pathName}?q=${encodeURIComponent(searchValue)}`}
-                className="btn btn-primary"
-            >
-                Tìm kiếm
-            </Link>
-        </div>
-    );
-}
-
-export default Search;
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+function Search({}) {
+    const pathName = usePathname();
+    const [searchValue, setSearchValue] = useState("");
+    return (
+        <div className="flex flex-row gap-4 justify-between items-center">
+            <input
+                type="text"
+                className="input  input-primary w-full"
+                placeholder="Nhập tên phim cần tìm"
+                onChange={(e) => setSearchValue(e.target.value)}
+            />
+            <Link
+                href={`${pathName}?q=${encodeURIComponent(searchValue)}`}
+                className="btn btn-primary"
+            >
+                Tìm kiếm
+            </Link>
+        </div>
+    );
+}
+
+export default Search;
diff --git a/app/discover/movies/page.tsx b/app/discover/movies/page.tsx
index 4db44a0..226778d 100644
--- a/app/discover/movies/page.tsx
+++ b/app/discover/movies/page.tsx
@@ -1,39 +1,39 @@
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-import MediaList from "@/app/components/MediaList/MediaList";
-import Pagination from "@/app/components/Pagination";
-import tmdb from "@/service/TMDB";
-import { Movie } from "@/service/TMDB.type";
-import React from "react";
-interface PageProp {
-    searchParams: {
-        with_genres: string;
-        page: number;
-    };
-}
-async function page({ searchParams }: PageProp) {
-    const listMovie: { results: Movie[]; total_pages: number } =
-        await tmdb.discover(
-            "movie",
-            +searchParams.with_genres,
-            +searchParams.page ?? 1
-        );
-
-    return (
-        <div className="pt-24 px-4 w-full">
-            <div className="py-2 sticky z-50 top-0 flex justify-end -mr-20 w-full">
-                <ChangeMediaListBtn />
-            </div>
-            <div className="flex justify-center items-center mt-4 mb-10">
-                <Pagination
-                    totalPages={500}
-                    href={`/discover/movies?with_genres=${searchParams.with_genres}&`}
-                />
-            </div>
-            <div className="flex flex-wrap gap-4 overflow-hidden">
-                <MediaList movie={listMovie} />
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+import MediaList from "@/app/components/MediaList/MediaList";
+import Pagination from "@/app/components/Pagination";
+import tmdb from "@/service/TMDB";
+import { Movie } from "@/service/TMDB.type";
+import React from "react";
+interface PageProp {
+    searchParams: {
+        with_genres: string;
+        page: number;
+    };
+}
+async function page({ searchParams }: PageProp) {
+    const listMovie: { results: Movie[]; total_pages: number } =
+        await tmdb.discover(
+            "movie",
+            +searchParams.with_genres,
+            +searchParams.page ?? 1
+        );
+
+    return (
+        <div className="pt-24 px-4 w-full">
+            <div className="py-2 sticky z-50 top-0 flex justify-end -mr-20 w-full">
+                <ChangeMediaListBtn />
+            </div>
+            <div className="flex justify-center items-center mt-4 mb-10">
+                <Pagination
+                    totalPages={500}
+                    href={`/discover/movies?with_genres=${searchParams.with_genres}&`}
+                />
+            </div>
+            <div className="flex flex-wrap gap-4 overflow-hidden">
+                <MediaList movie={listMovie} />
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/discover/page.tsx b/app/discover/page.tsx
index 480a06e..68d953d 100644
--- a/app/discover/page.tsx
+++ b/app/discover/page.tsx
@@ -1,120 +1,120 @@
-import React from "react";
-import Link from "next/link";
-function page() {
-    return (
-        <div className="pt-16 mx-4 ">
-            <h2 className="text-3xl font-bold">Khám phá</h2>
-            <Link
-                href={"/search/movie"}
-                className="w-full my-2 btn btn-primary"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={1.5}
-                    stroke="currentColor"
-                    className="w-6 h-6 mr-auto"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                    />
-                </svg>
-                <span className="mr-auto">Tìm kiếm</span>
-            </Link>
-            <div className="py-2">
-                <h2 className="my-2 text-xl">Danh mục</h2>
-                <div className="flex flex-row flex-wrap gap-4">
-                    <button className=" btn btn-primary">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5"
-                            />
-                        </svg>
-                        Phim
-                    </button>
-                    <button className="btn btn-primary">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
-                            />
-                        </svg>
-
-                        <span className="text-primary-content">
-                            Trương trình truyền hình
-                        </span>
-                    </button>
-                    <button className="btn btn-primary">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-                            />
-                        </svg>
-                        Người nổi tiếng
-                    </button>
-                    <button className="btn btn-primary">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-6 h-6"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
-                            />
-                        </svg>
-                        Xu hướng
-                    </button>
-                </div>
-            </div>
-            <div className="py-2">
-                <h2 className="my-2 text-xl">Tổng quan</h2>
-                <div className="flex flex-row flex-wrap gap-4">
-                    <Link href={"/genres/movie"} className="btn btn-primary">
-                        Thể loại phim lẻ
-                    </Link>
-                    <button className="btn btn-primary">
-                        <span className="text-primary-content">
-                            Thể loại phim bộ
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import Link from "next/link";
+function page() {
+    return (
+        <div className="pt-16 mx-4 ">
+            <h2 className="text-3xl font-bold">Khám phá</h2>
+            <Link
+                href={"/search/movie"}
+                className="w-full my-2 btn btn-primary"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-6 h-6 mr-auto"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                    />
+                </svg>
+                <span className="mr-auto">Tìm kiếm</span>
+            </Link>
+            <div className="py-2">
+                <h2 className="my-2 text-xl">Danh mục</h2>
+                <div className="flex flex-row flex-wrap gap-4">
+                    <button className=" btn btn-primary">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5"
+                            />
+                        </svg>
+                        Phim
+                    </button>
+                    <button className="btn btn-primary">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
+                            />
+                        </svg>
+
+                        <span className="text-primary-content">
+                            Trương trình truyền hình
+                        </span>
+                    </button>
+                    <button className="btn btn-primary">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+                            />
+                        </svg>
+                        Người nổi tiếng
+                    </button>
+                    <button className="btn btn-primary">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="w-6 h-6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
+                            />
+                        </svg>
+                        Xu hướng
+                    </button>
+                </div>
+            </div>
+            <div className="py-2">
+                <h2 className="my-2 text-xl">Tổng quan</h2>
+                <div className="flex flex-row flex-wrap gap-4">
+                    <Link href={"/genres/movie"} className="btn btn-primary">
+                        Thể loại phim lẻ
+                    </Link>
+                    <button className="btn btn-primary">
+                        <span className="text-primary-content">
+                            Thể loại phim bộ
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/genres/layout.tsx b/app/genres/layout.tsx
index ab19706..cf98429 100644
--- a/app/genres/layout.tsx
+++ b/app/genres/layout.tsx
@@ -1,22 +1,22 @@
-import React from "react";
-import StickyTab from "../components/StickyTab";
-function layout({ children }: { children: React.ReactNode }) {
-    const tabs = [
-        {
-            tabName: "Thể loại phim lẻ",
-            href: "/genres/movie",
-        },
-        {
-            tabName: "Thể loại phim bộ",
-            href: "/genres/tv-show",
-        },
-    ];
-    return (
-        <div className="mt-16">
-            <StickyTab tabs={tabs} />
-            <div className="h-[1500px] pt-24 px-4">{children}</div>
-        </div>
-    );
-}
-
-export default layout;
+import React from "react";
+import StickyTab from "../components/StickyTab";
+function layout({ children }: { children: React.ReactNode }) {
+    const tabs = [
+        {
+            tabName: "Thể loại phim lẻ",
+            href: "/genres/movie",
+        },
+        {
+            tabName: "Thể loại phim bộ",
+            href: "/genres/tv-show",
+        },
+    ];
+    return (
+        <div className="mt-16">
+            <StickyTab tabs={tabs} />
+            <div className="h-[1500px] pt-24 px-4">{children}</div>
+        </div>
+    );
+}
+
+export default layout;
diff --git a/app/genres/movie/page.tsx b/app/genres/movie/page.tsx
index 823dfd2..f42d9c8 100644
--- a/app/genres/movie/page.tsx
+++ b/app/genres/movie/page.tsx
@@ -1,27 +1,27 @@
-import tmdb from "@/service/TMDB";
-import { Genre } from "@/service/TMDB.type";
-import Link from "next/link";
-import React from "react";
-
-async function page() {
-    const listGenres: { genres: Genre[] } = await tmdb.getListGenres("movie");
-
-    return (
-        <div>
-            <h2 className="text-3xl py-4">Thể loại phim lẻ</h2>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-                {listGenres.genres.map((genres) => (
-                    <Link
-                        className="btn btn-primary w-full"
-                        href={"/discover/movies?with_genres=" + genres.id}
-                        key={genres.id}
-                    >
-                        {genres.name}
-                    </Link>
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import tmdb from "@/service/TMDB";
+import { Genre } from "@/service/TMDB.type";
+import Link from "next/link";
+import React from "react";
+
+async function page() {
+    const listGenres: { genres: Genre[] } = await tmdb.getListGenres("movie");
+
+    return (
+        <div>
+            <h2 className="text-3xl py-4">Thể loại phim lẻ</h2>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+                {listGenres.genres.map((genres) => (
+                    <Link
+                        className="btn btn-primary w-full"
+                        href={"/discover/movies?with_genres=" + genres.id}
+                        key={genres.id}
+                    >
+                        {genres.name}
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/genres/tv-show/page.tsx b/app/genres/tv-show/page.tsx
index 5eb93b8..a5c851c 100644
--- a/app/genres/tv-show/page.tsx
+++ b/app/genres/tv-show/page.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-
-function page() {
-    return <div>page</div>;
-}
-
-export default page;
+import React from "react";
+
+function page() {
+    return <div>page</div>;
+}
+
+export default page;
diff --git a/app/globals.css b/app/globals.css
index 6e51ace..e1cd7f8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,37 +1,37 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-    .text-gradient {
-        @apply [&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)];
-    }
-}
-
-.img-shadow::after {
-    position: fixed;
-    content: "";
-    background-image: linear-gradient(
-        180deg,
-        rgba(24, 133, 69, 0) 20.77%,
-        hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)) 100%
-    );
-    top: 0;
-    left: 80px;
-    bottom: 0;
-    right: 0;
-}
-.img-shadow2::after {
-    --tw-bg-opacity: 1;
-    position: absolute;
-    content: "";
-    background-image: linear-gradient(
-        180deg,
-        rgba(24, 133, 69, 0) 30.77%,
-        hsl(var(--b1) / var(--tw-bg-opacity)) 100%
-    );
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .text-gradient {
+        @apply [&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)];
+    }
+}
+
+.img-shadow::after {
+    position: fixed;
+    content: "";
+    background-image: linear-gradient(
+        180deg,
+        rgba(24, 133, 69, 0) 20.77%,
+        hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)) 100%
+    );
+    top: 0;
+    left: 80px;
+    bottom: 0;
+    right: 0;
+}
+.img-shadow2::after {
+    --tw-bg-opacity: 1;
+    position: absolute;
+    content: "";
+    background-image: linear-gradient(
+        180deg,
+        rgba(24, 133, 69, 0) 30.77%,
+        hsl(var(--b1) / var(--tw-bg-opacity)) 100%
+    );
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
diff --git a/app/loading.tsx b/app/loading.tsx
index dbe3baa..3fd9f46 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import Image from "next/image";
-function Loading() {
-    return (
-        <div className="h-screen w-full bg-black/50 flex justify-center items-center flex-col">
-            <Image
-                src={
-                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
-                }
-                alt="logo"
-                width={64}
-                height={64}
-                className="w-12 h-12 md:w-16 md:h-16"
-            />
-            <progress className="progress w-56 progress-primary"></progress>
-        </div>
-    );
-}
-
-export default Loading;
+import React from "react";
+import Image from "next/image";
+function Loading() {
+    return (
+        <div className="h-screen w-full bg-black/50 flex justify-center items-center flex-col">
+            <Image
+                src={
+                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+                }
+                alt="logo"
+                width={64}
+                height={64}
+                className="w-12 h-12 md:w-16 md:h-16"
+            />
+            <progress className="progress w-56 progress-primary"></progress>
+        </div>
+    );
+}
+
+export default Loading;
diff --git a/app/movie/(discover)/layout.tsx b/app/movie/(discover)/layout.tsx
index e5cca75..31f04e1 100644
--- a/app/movie/(discover)/layout.tsx
+++ b/app/movie/(discover)/layout.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-
-function layout() {
-    return <div>layout</div>;
-}
-
-export default layout;
+import React from "react";
+
+function layout() {
+    return <div>layout</div>;
+}
+
+export default layout;
diff --git a/app/movie/(discover)/popular/page.tsx b/app/movie/(discover)/popular/page.tsx
index 5eb93b8..a5c851c 100644
--- a/app/movie/(discover)/popular/page.tsx
+++ b/app/movie/(discover)/popular/page.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-
-function page() {
-    return <div>page</div>;
-}
-
-export default page;
+import React from "react";
+
+function page() {
+    return <div>page</div>;
+}
+
+export default page;
diff --git a/app/movie/[movieId]/cast/page.tsx b/app/movie/[movieId]/cast/page.tsx
index 541a208..2769b98 100644
--- a/app/movie/[movieId]/cast/page.tsx
+++ b/app/movie/[movieId]/cast/page.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import { Cast } from "../page";
-
-import PeopleCard from "@/app/components/PeopleCard";
-async function page({ params }: { params: any }) {
-    const getCast = async () => {
-        const respone = await fetch(
-            `https://api.themoviedb.org/3/movie/${params.movieId}/credits?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    };
-    const cast: { cast: Cast[] } = await getCast();
-
-    return (
-        <div className="min-h-screen w-full px-24 grid grid-cols-1 md:grid-cols-4 gap-4 pb-96">
-            {cast.cast.map((c) => (
-                <PeopleCard people={c as any} key={c.id} />
-            ))}
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import { Cast } from "../page";
+
+import PeopleCard from "@/app/components/PeopleCard";
+async function page({ params }: { params: any }) {
+    const getCast = async () => {
+        const respone = await fetch(
+            `https://api.themoviedb.org/3/movie/${params.movieId}/credits?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    };
+    const cast: { cast: Cast[] } = await getCast();
+
+    return (
+        <div className="min-h-screen w-full px-24 grid grid-cols-1 md:grid-cols-4 gap-4 pb-96">
+            {cast.cast.map((c) => (
+                <PeopleCard people={c as any} key={c.id} />
+            ))}
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/movie/[movieId]/error.tsx b/app/movie/[movieId]/error.tsx
index 6d7587b..e9b609d 100644
--- a/app/movie/[movieId]/error.tsx
+++ b/app/movie/[movieId]/error.tsx
@@ -1,12 +1,12 @@
-"use client";
-import React from "react";
-
-function error() {
-    return (
-        <div className="h-screen w-full bg-base-content-content justify-center items-center flex">
-            error rồi thằng ngu
-        </div>
-    );
-}
-
-export default error;
+"use client";
+import React from "react";
+
+function error() {
+    return (
+        <div className="h-screen w-full bg-base-content-content justify-center items-center flex">
+            error rồi thằng ngu
+        </div>
+    );
+}
+
+export default error;
diff --git a/app/movie/[movieId]/layout.tsx b/app/movie/[movieId]/layout.tsx
index 513cbd7..4991988 100644
--- a/app/movie/[movieId]/layout.tsx
+++ b/app/movie/[movieId]/layout.tsx
@@ -1,140 +1,140 @@
-import { Movie } from "@/service/TMDB.type";
-import React from "react";
-import Image from "next/image";
-import MovieDetailTab from "@/app/components/MovieDetailTab";
-import WatchTrailerButton from "@/app/components/WatchTrailerButton";
-import Modal from "@/app/components/Modal";
-import tmdb from "@/service/TMDB";
-import ShadowImg from "@/app/components/ShadowImg";
-import Link from "next/link";
-import { Metadata } from "next";
-interface MovieDetailProp {
-    params: {
-        movieId: string;
-    };
-    children: React.ReactNode;
-}
-
-export async function generateMetadata({
-    params,
-}: {
-    params: { movieId: string };
-}): Promise<Metadata> {
-    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
-    return {
-        title: movie.title,
-    };
-}
-
-async function Layout({ params, children }: MovieDetailProp) {
-    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
-    function convertToHourMinute(minutes: number) {
-        const hours = Math.floor(minutes / 60);
-        const remainingMinutes = minutes % 60;
-        const formattedTime = `${hours}h ${remainingMinutes}m`;
-        return formattedTime;
-    }
-    return (
-        <div className="w-full flex flex-col md:rounded-tl-[20px]">
-            <div className="fixed w-full">
-                <ShadowImg />
-                <Image
-                    src={tmdb.getImage(movie.backdrop_path)}
-                    width={1920}
-                    height={1080}
-                    priority
-                    className="object-cover md:rounded-tl-[20px] md:h-[95vh] "
-                    alt={movie.title}
-                />
-                <ShadowImg />
-            </div>
-            <div className="w-full relative md:px-4 mt-[35%]">
-                <div className="flex flex-row justify-around  relative bottom-0 md:pb-16">
-                    <div className="flex w-4/12 justify-center drop-shadow-md z-10 mb-3">
-                        <Image
-                            src={tmdb.getImage(movie.poster_path, "w500")}
-                            width={500}
-                            height={100}
-                            priority
-                            className="md:w-[250px] lg:w-[300px] h-fit md:rounded-xl rounded-md w-32"
-                            alt={movie.title}
-                        />
-                    </div>
-                    <div className="w-8/12 z-10">
-                        <div className="flex flex-col ml-8">
-                            <p className="md:text-[4rem] font-bold text-base-content drop-shadow-2xl text-[1.2rem]">
-                                {movie.title}
-                            </p>
-                            <p className="text-base-content mt-4 text-[16px] lg:text-lg italic font-semibold">
-                                {movie?.tagline}
-                            </p>
-                            <div className="flex gap-4">
-                                <button className="bg-secondary w-fit rounded-full ring-2 ring-primary mt-4 hidden md:block capitalize font-bold text-secondary-content p-1">
-                                    <span className="badge badge-primary">
-                                        TMDB
-                                    </span>{" "}
-                                    {movie.vote_average.toFixed(1)}
-                                </button>
-                                <button className="bg-secondary w-fit rounded-full ring-2 ring-primary mt-4 hidden md:block capitalize font-bold text-secondary-content p-1">
-                                    {movie.release_date} •{" "}
-                                    {convertToHourMinute(movie.runtime)}
-                                </button>
-                            </div>
-                            <div className="md:flex flex-row gap-4 mt-4 flex-wrap hidden">
-                                {movie.genres.map((genres) => {
-                                    return (
-                                        <Link
-                                            href={`discover/movies?with_genres=${genres.id}`}
-                                            key={genres.id}
-                                            className="btn btn-secondary capitalize"
-                                        >
-                                            <span>{genres.name}</span>
-                                        </Link>
-                                    );
-                                })}
-                            </div>
-                            <div className="mt-16 hidden md:block">
-                                <WatchTrailerButton videoId={params.movieId} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <ShadowImg />
-            </div>
-            <div className=" w-full bg-base-100 z-10">
-                <div className="md:hidden p-4 md:p-0 z-10">
-                    <div>
-                        <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm mr-2 gap-1">
-                            <span className="badge badge-primary">TMDB</span>{" "}
-                            {movie.vote_average.toFixed(1)}
-                        </button>
-                        <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm">
-                            {movie.release_date} •{" "}
-                            {convertToHourMinute(movie.runtime)}
-                        </button>
-                    </div>
-                    <div className="flex flex-row gap-2 flex-wrap">
-                        {movie.genres.map((genres) => {
-                            return (
-                                <div
-                                    key={genres.id}
-                                    className="btn btn-secondary md:btn-md w-fit btn-xs"
-                                >
-                                    <span>{genres.name}</span>
-                                </div>
-                            );
-                        })}
-                    </div>
-                    <div className="mt-2">
-                        <WatchTrailerButton videoId={params.movieId} />
-                    </div>
-                </div>
-                <MovieDetailTab />
-                {children}
-            </div>
-            {/* <Modal /> */}
-        </div>
-    );
-}
-
-export default Layout;
+import { Movie } from "@/service/TMDB.type";
+import React from "react";
+import Image from "next/image";
+import MovieDetailTab from "@/app/components/MovieDetailTab";
+import WatchTrailerButton from "@/app/components/WatchTrailerButton";
+import Modal from "@/app/components/Modal";
+import tmdb from "@/service/TMDB";
+import ShadowImg from "@/app/components/ShadowImg";
+import Link from "next/link";
+import { Metadata } from "next";
+interface MovieDetailProp {
+    params: {
+        movieId: string;
+    };
+    children: React.ReactNode;
+}
+
+export async function generateMetadata({
+    params,
+}: {
+    params: { movieId: string };
+}): Promise<Metadata> {
+    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
+    return {
+        title: movie.title,
+    };
+}
+
+async function Layout({ params, children }: MovieDetailProp) {
+    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
+    function convertToHourMinute(minutes: number) {
+        const hours = Math.floor(minutes / 60);
+        const remainingMinutes = minutes % 60;
+        const formattedTime = `${hours}h ${remainingMinutes}m`;
+        return formattedTime;
+    }
+    return (
+        <div className="w-full flex flex-col md:rounded-tl-[20px]">
+            <div className="fixed w-full">
+                <ShadowImg />
+                <Image
+                    src={tmdb.getImage(movie.backdrop_path)}
+                    width={1920}
+                    height={1080}
+                    priority
+                    className="object-cover md:rounded-tl-[20px] md:h-[95vh] "
+                    alt={movie.title}
+                />
+                <ShadowImg />
+            </div>
+            <div className="w-full relative md:px-4 mt-[35%]">
+                <div className="flex flex-row justify-around  relative bottom-0 md:pb-16">
+                    <div className="flex w-4/12 justify-center drop-shadow-md z-10 mb-3">
+                        <Image
+                            src={tmdb.getImage(movie.poster_path, "w500")}
+                            width={500}
+                            height={100}
+                            priority
+                            className="md:w-[250px] lg:w-[300px] h-fit md:rounded-xl rounded-md w-32"
+                            alt={movie.title}
+                        />
+                    </div>
+                    <div className="w-8/12 z-10">
+                        <div className="flex flex-col ml-8">
+                            <p className="md:text-[4rem] font-bold text-base-content drop-shadow-2xl text-[1.2rem]">
+                                {movie.title}
+                            </p>
+                            <p className="text-base-content mt-4 text-[16px] lg:text-lg italic font-semibold">
+                                {movie?.tagline}
+                            </p>
+                            <div className="flex gap-4">
+                                <button className="bg-secondary w-fit rounded-full ring-2 ring-primary mt-4 hidden md:block capitalize font-bold text-secondary-content p-1">
+                                    <span className="badge badge-primary">
+                                        TMDB
+                                    </span>{" "}
+                                    {movie.vote_average.toFixed(1)}
+                                </button>
+                                <button className="bg-secondary w-fit rounded-full ring-2 ring-primary mt-4 hidden md:block capitalize font-bold text-secondary-content p-1">
+                                    {movie.release_date} •{" "}
+                                    {convertToHourMinute(movie.runtime)}
+                                </button>
+                            </div>
+                            <div className="md:flex flex-row gap-4 mt-4 flex-wrap hidden">
+                                {movie.genres.map((genres) => {
+                                    return (
+                                        <Link
+                                            href={`discover/movies?with_genres=${genres.id}`}
+                                            key={genres.id}
+                                            className="btn btn-secondary capitalize"
+                                        >
+                                            <span>{genres.name}</span>
+                                        </Link>
+                                    );
+                                })}
+                            </div>
+                            <div className="mt-16 hidden md:block">
+                                <WatchTrailerButton videoId={params.movieId} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <ShadowImg />
+            </div>
+            <div className=" w-full bg-base-100 z-10">
+                <div className="md:hidden p-4 md:p-0 z-10">
+                    <div>
+                        <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm mr-2 gap-1">
+                            <span className="badge badge-primary">TMDB</span>{" "}
+                            {movie.vote_average.toFixed(1)}
+                        </button>
+                        <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm">
+                            {movie.release_date} •{" "}
+                            {convertToHourMinute(movie.runtime)}
+                        </button>
+                    </div>
+                    <div className="flex flex-row gap-2 flex-wrap">
+                        {movie.genres.map((genres) => {
+                            return (
+                                <div
+                                    key={genres.id}
+                                    className="btn btn-secondary md:btn-md w-fit btn-xs"
+                                >
+                                    <span>{genres.name}</span>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className="mt-2">
+                        <WatchTrailerButton videoId={params.movieId} />
+                    </div>
+                </div>
+                <MovieDetailTab />
+                {children}
+            </div>
+            {/* <Modal /> */}
+        </div>
+    );
+}
+
+export default Layout;
diff --git a/app/movie/[movieId]/loading.tsx b/app/movie/[movieId]/loading.tsx
index c8462da..0cfff64 100644
--- a/app/movie/[movieId]/loading.tsx
+++ b/app/movie/[movieId]/loading.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import Image from "next/image";
-function Loading() {
-    return (
-        <div className="h-screen w-full bg-base-300 flex justify-center items-center flex-col">
-            <Image
-                src={
-                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
-                }
-                alt="logo"
-                width={64}
-                height={64}
-                className="w-16 h-16 md:w-24 md:h-24"
-            />
-            <progress className="progress w-56 progress-primary"></progress>
-        </div>
-    );
-}
-
-export default Loading;
+import React from "react";
+import Image from "next/image";
+function Loading() {
+    return (
+        <div className="h-screen w-full bg-base-300 flex justify-center items-center flex-col">
+            <Image
+                src={
+                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+                }
+                alt="logo"
+                width={64}
+                height={64}
+                className="w-16 h-16 md:w-24 md:h-24"
+            />
+            <progress className="progress w-56 progress-primary"></progress>
+        </div>
+    );
+}
+
+export default Loading;
diff --git a/app/movie/[movieId]/page.tsx b/app/movie/[movieId]/page.tsx
index 0ba864e..5732486 100644
--- a/app/movie/[movieId]/page.tsx
+++ b/app/movie/[movieId]/page.tsx
@@ -1,147 +1,151 @@
-import React from "react";
-import { Movie } from "@/service/TMDB.type";
-import Link from "next/link";
-import tmdb from "@/service/TMDB";
-import { Metadata } from "next";
-
-import ListMovie from "@/app/components/CardSlide";
-import PeopleCard from "@/app/components/PeopleCard";
-export interface Cast {
-    id: number;
-    profile_path: string;
-    name: string;
-}
-export async function generateMetadata({
-    params,
-}: {
-    params: { movieId: string };
-}): Promise<Metadata> {
-    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
-    return {
-        title: movie.title,
-    };
-}
-async function Page({
-    params,
-}: {
-    params: {
-        movieId: number;
-    };
-}) {
-    const movie: Movie = await tmdb.getMovieOrTV(params.movieId, "movie");
-    const { cast }: { cast: Cast[] } = await tmdb.getCast(
-        params.movieId,
-        "movie"
-    );
-    const listRecommendations: { results: Movie[] } =
-        await tmdb.getRecomendations(params.movieId, "movie");
-    const slicedRecommendations = {
-        results: listRecommendations.results.slice(0, 9),
-    };
-    return (
-        <div className="flex flex-col lg:flex-row h-full px-2 md:px-4 gap-2 lg:mt-20 mt-8 justify-center pb-20">
-            <div className="lg:w-6/12 xl:w-3/12 flex w-full gap-4 md:justify-center">
-                <div className="bg-primary/5 shadow-lg p-4 rounded-lg space-y-4 lg:max-w-[75%] h-fit w-full flex flex-col">
-                    <div className="grid grid-cols-2 lg:flex-col  lg:flex">
-                        <p className="font-bold">Original Title</p>
-                        <p className="font-mono font-extralight">
-                            {movie.original_title}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
-                        <p className="font-bold">Status</p>
-                        <p className="font-mono font-extralight">
-                            {movie.status}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
-                        <p className="font-bold">Production Companies</p>
-                        <div>
-                            {movie.production_companies.map((company) => (
-                                <p
-                                    className="font-mono font-extralight"
-                                    key={company.name}
-                                >
-                                    {company.name}
-                                </p>
-                            ))}
-                        </div>
-                    </div>
-                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
-                        <p className="font-bold">Budget</p>
-                        <p className="font-mono font-extralight">
-                            {movie.budget.toLocaleString("en-US", {
-                                style: "currency",
-                                currency: "USD",
-                            })}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
-                        <p className="font-bold">Revenue</p>
-                        <p className="font-mono font-extralight">
-                            {movie.revenue.toLocaleString("en-US", {
-                                style: "currency",
-                                currency: "USD",
-                            })}
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div className="flex flex-col lg:w-7/12 xl:w-9/12 w-full">
-                <div className="bg-primary/5 shadow-lg p-6 rounded-md space-y-3">
-                    <p className="text-justify"> {movie.overview}</p>
-                    <div className="flex flex-row gap-4">
-                        <div>
-                            <p className="font-bold">Production Countries</p>
-                            {movie.production_countries.map((country) => (
-                                <p key={country.name}>{country.name}</p>
-                            ))}
-                        </div>
-                        <div>
-                            Spoken Languages
-                            {movie.spoken_languages.map((l) => (
-                                <p key={l.name}>{l.name}</p>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <p className="md:text-3xl  text-base-content pt-4">
-                        Top Diễn Viên
-                    </p>
-                    <Link
-                        href={`movie/${params.movieId}/cast`}
-                        className="btn btn-primary btn-outline w-40 my-4"
-                    >
-                        Xem Thêm
-                    </Link>
-                    <div className="flex flex-wrap gap-4">
-                        {cast?.slice(0, 5).map((cast) => (
-                            <div key={cast.id} className="carousel-item">
-                                <PeopleCard people={cast as any} />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-                <div className="w-full flex flex-col">
-                    <div className="md:text-3xl text-base-content pt-4">
-                        <p> Phim Đề Xuất</p>
-                    </div>
-                    {!!slicedRecommendations.results.length && (
-                        <Link
-                            href={`movie/${params.movieId}/recommendations`}
-                            className="btn btn-primary btn-outline w-40 my-4"
-                        >
-                            Xem Thêm
-                        </Link>
-                    )}
-                    <div className="flex justify-center">
-                        <ListMovie data={slicedRecommendations} type="movie" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Page;
+import React from "react";
+import { Movie } from "@/service/TMDB.type";
+import Link from "next/link";
+import tmdb from "@/service/TMDB";
+import { Metadata } from "next";
+
+import ListMovie from "@/app/components/CardSlide";
+import PeopleCard from "@/app/components/PeopleCard";
+export interface Cast {
+    id: number;
+    profile_path: string;
+    name: string;
+}
+export async function generateMetadata({
+    params,
+}: {
+    params: { movieId: string };
+}): Promise<Metadata> {
+    const movie: Movie = await tmdb.getMovieOrTV(+params.movieId, "movie");
+    return {
+        title: movie.title,
+    };
+}
+async function Page({
+    params,
+}: {
+    params: {
+        movieId: number;
+    };
+}) {
+    const movie: Movie = await tmdb.getMovieOrTV(params.movieId, "movie");
+    const { cast }: { cast: Cast[] } = await tmdb.getCast(
+        params.movieId,
+        "movie"
+    );
+    const listRecommendations: { results: Movie[] } =
+        await tmdb.getRecomendations(params.movieId, "movie");
+    const slicedRecommendations = {
+        results: listRecommendations.results.slice(0, 9),
+    };
+    return (
+        <div className="flex flex-col lg:flex-row h-full px-2 md:px-4 gap-2 lg:mt-20 mt-8 justify-center pb-20">
+            <div className="lg:w-6/12 xl:w-3/12 flex w-full gap-4 md:justify-center">
+                <div className="bg-primary/5 shadow-lg p-4 rounded-lg space-y-4 lg:max-w-[75%] h-fit w-full flex flex-col">
+                    <div className="grid grid-cols-2 lg:flex-col  lg:flex">
+                        <p className="font-bold">Original Title</p>
+                        <p className="font-mono font-extralight">
+                            {movie.original_title}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
+                        <p className="font-bold">Status</p>
+                        <p className="font-mono font-extralight">
+                            {movie.status}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
+                        <p className="font-bold">Production Companies</p>
+                        <div>
+                            {movie.production_companies.map((company) => (
+                                <p
+                                    className="font-mono font-extralight"
+                                    key={company.name}
+                                >
+                                    {company.name}
+                                </p>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
+                        <p className="font-bold">Budget</p>
+                        <p className="font-mono font-extralight">
+                            {movie.budget.toLocaleString("en-US", {
+                                style: "currency",
+                                currency: "USD",
+                            })}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 lg:flex-col lg:flex">
+                        <p className="font-bold">Revenue</p>
+                        <p className="font-mono font-extralight">
+                            {movie.revenue.toLocaleString("en-US", {
+                                style: "currency",
+                                currency: "USD",
+                            })}
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col lg:w-7/12 xl:w-9/12 w-full">
+                <div className="bg-primary/5 shadow-lg p-6 rounded-md space-y-3">
+                    <p className="text-justify"> {movie.overview}</p>
+                    <div className="flex flex-row gap-4">
+                        <div>
+                            <p className="font-bold">Production Countries</p>
+                            {movie.production_countries.map((country) => (
+                                <p key={country.name}>{country.name}</p>
+                            ))}
+                        </div>
+                        <div>
+                            Spoken Languages
+                            {movie.spoken_languages.map((l) => (
+                                <p key={l.name}>{l.name}</p>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <p className="md:text-3xl  text-base-content pt-4">
+                        Top Diễn Viên
+                    </p>
+                    <Link
+                        href={`movie/${params.movieId}/cast`}
+                        className="btn btn-primary btn-outline w-40 my-4"
+                    >
+                        Xem Thêm
+                    </Link>
+                    <div className="flex flex-wrap gap-4">
+                        {cast?.slice(0, 5).map((cast) => (
+                            <div key={cast.id} className="carousel-item">
+                                <PeopleCard people={cast as any} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className="w-full flex flex-col">
+                    <div className="md:text-3xl text-base-content pt-4">
+                        <p> Phim Đề Xuất</p>
+                    </div>
+                    {!!slicedRecommendations.results.length && (
+                        <Link
+                            href={`movie/${params.movieId}/recommendations`}
+                            className="btn btn-primary btn-outline w-40 my-4"
+                        >
+                            Xem Thêm
+                        </Link>
+                    )}
+                    <div className="flex justify-center">
+                        <ListMovie
+                            data={slicedRecommendations}
+                            type="movie"
+                            sildePerView={4}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/movie/[movieId]/photos/page.tsx b/app/movie/[movieId]/photos/page.tsx
index 26fe9a3..608d317 100644
--- a/app/movie/[movieId]/photos/page.tsx
+++ b/app/movie/[movieId]/photos/page.tsx
@@ -1,86 +1,86 @@
-"use client";
-import tmdb from "@/service/TMDB";
-import { ListPhotos } from "@/service/TMDB.type";
-import React from "react";
-import Image from "next/image";
-import "react-photo-view/dist/react-photo-view.css";
-import { PhotoProvider, PhotoView } from "react-photo-view";
-import useSwr from "swr";
-async function Page({ params }: { params: { movieId: number } }) {
-    const { data: listPhoto } = useSwr<ListPhotos>(
-        `/photos/${params.movieId}`,
-        () => tmdb.getPhotos("movie", params.movieId),
-        {
-            revalidateOnMount: true,
-        }
-    );
-    return (
-        <PhotoProvider
-            speed={() => 800}
-            easing={(type) =>
-                type === 2
-                    ? "cubic-bezier(0.36, 0, 0.66, -0.56)"
-                    : "cubic-bezier(0.34, 1.56, 0.64, 1)"
-            }
-        >
-            <div className="flex justify-center flex-col max-w-7xl items-center mx-auto">
-                <h2 className="font-bold text-lg pb-2">Backdrops</h2>
-                <div className="pb-20 flex gap-4 flex-wrap justify-center">
-                    {listPhoto?.backdrops.slice(0, 8).map((backdrop, index) => (
-                        <PhotoView
-                            key={index}
-                            src={tmdb.getImage(backdrop.file_path)}
-                        >
-                            <Image
-                                width={240}
-                                height={240}
-                                src={tmdb.getImage(backdrop.file_path)}
-                                loading="lazy"
-                                alt="img"
-                                className="object-cover w-64 cursor-pointer"
-                            />
-                        </PhotoView>
-                    ))}
-                </div>
-                <h2 className="font-bold text-lg pb-2">Logos</h2>
-                <div className="pb-20 flex gap-4 flex-wrap justify-center">
-                    {listPhoto?.logos.slice(0, 4).map((backdrop, index) => (
-                        <PhotoView
-                            key={index}
-                            src={tmdb.getImage(backdrop.file_path)}
-                        >
-                            <Image
-                                width={240}
-                                height={240}
-                                src={tmdb.getImage(backdrop.file_path)}
-                                loading="lazy"
-                                alt="img"
-                                className="object-cover w-64 cursor-pointer"
-                            />
-                        </PhotoView>
-                    ))}
-                </div>
-                <h2 className="font-bold text-lg pb-2">Posters</h2>
-                <div className="pb-20 flex gap-4 flex-wrap items-center justify-center">
-                    {listPhoto?.posters.slice(0, 4).map((backdrop, index) => (
-                        <PhotoView
-                            key={index}
-                            src={tmdb.getImage(backdrop.file_path)}
-                        >
-                            <Image
-                                width={240}
-                                height={240}
-                                src={tmdb.getImage(backdrop.file_path)}
-                                loading="lazy"
-                                alt="img"
-                                className="object-cover w-64 cursor-pointer"
-                            />
-                        </PhotoView>
-                    ))}
-                </div>
-            </div>
-        </PhotoProvider>
-    );
-}
-
-export default Page;
+"use client";
+import tmdb from "@/service/TMDB";
+import { ListPhotos } from "@/service/TMDB.type";
+import React from "react";
+import Image from "next/image";
+import "react-photo-view/dist/react-photo-view.css";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import useSwr from "swr";
+async function Page({ params }: { params: { movieId: number } }) {
+    const { data: listPhoto } = useSwr<ListPhotos>(
+        `/photos/${params.movieId}`,
+        () => tmdb.getPhotos("movie", params.movieId),
+        {
+            revalidateOnMount: true,
+        }
+    );
+    return (
+        <PhotoProvider
+            speed={() => 800}
+            easing={(type) =>
+                type === 2
+                    ? "cubic-bezier(0.36, 0, 0.66, -0.56)"
+                    : "cubic-bezier(0.34, 1.56, 0.64, 1)"
+            }
+        >
+            <div className="flex justify-center flex-col max-w-7xl items-center mx-auto">
+                <h2 className="font-bold text-lg pb-2">Backdrops</h2>
+                <div className="pb-20 flex gap-4 flex-wrap justify-center">
+                    {listPhoto?.backdrops.slice(0, 8).map((backdrop, index) => (
+                        <PhotoView
+                            key={index}
+                            src={tmdb.getImage(backdrop.file_path)}
+                        >
+                            <Image
+                                width={240}
+                                height={240}
+                                src={tmdb.getImage(backdrop.file_path)}
+                                loading="lazy"
+                                alt="img"
+                                className="object-cover w-64 cursor-pointer"
+                            />
+                        </PhotoView>
+                    ))}
+                </div>
+                <h2 className="font-bold text-lg pb-2">Logos</h2>
+                <div className="pb-20 flex gap-4 flex-wrap justify-center">
+                    {listPhoto?.logos.slice(0, 4).map((backdrop, index) => (
+                        <PhotoView
+                            key={index}
+                            src={tmdb.getImage(backdrop.file_path)}
+                        >
+                            <Image
+                                width={240}
+                                height={240}
+                                src={tmdb.getImage(backdrop.file_path)}
+                                loading="lazy"
+                                alt="img"
+                                className="object-cover w-64 cursor-pointer"
+                            />
+                        </PhotoView>
+                    ))}
+                </div>
+                <h2 className="font-bold text-lg pb-2">Posters</h2>
+                <div className="pb-20 flex gap-4 flex-wrap items-center justify-center">
+                    {listPhoto?.posters.slice(0, 4).map((backdrop, index) => (
+                        <PhotoView
+                            key={index}
+                            src={tmdb.getImage(backdrop.file_path)}
+                        >
+                            <Image
+                                width={240}
+                                height={240}
+                                src={tmdb.getImage(backdrop.file_path)}
+                                loading="lazy"
+                                alt="img"
+                                className="object-cover w-64 cursor-pointer"
+                            />
+                        </PhotoView>
+                    ))}
+                </div>
+            </div>
+        </PhotoProvider>
+    );
+}
+
+export default Page;
diff --git a/app/movie/[movieId]/recommendations/page.tsx b/app/movie/[movieId]/recommendations/page.tsx
index e93fbed..132ecd4 100644
--- a/app/movie/[movieId]/recommendations/page.tsx
+++ b/app/movie/[movieId]/recommendations/page.tsx
@@ -1,21 +1,21 @@
-import React from "react";
-import { Movie } from "@/service/TMDB.type";
-import tmdb from "@/service/TMDB";
-import MediaList from "@/app/components/MediaList/MediaList";
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-async function page({ params }: { params: any }) {
-    const listRecommendations: { results: Movie[] } =
-        await tmdb.getRecomendations(params.movieId, "movie");
-    return (
-        <div>
-            <div className="ml-auto sticky top-[72px] z-50 w-fit  md:px-24 mb-6">
-                <ChangeMediaListBtn />
-            </div>
-            <div className="w-full md:px-24 flex flex-wrap justify-center px-2 overflow-hidden">
-                <MediaList movie={listRecommendations} />
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import { Movie } from "@/service/TMDB.type";
+import tmdb from "@/service/TMDB";
+import MediaList from "@/app/components/MediaList/MediaList";
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+async function page({ params }: { params: any }) {
+    const listRecommendations: { results: Movie[] } =
+        await tmdb.getRecomendations(params.movieId, "movie");
+    return (
+        <div>
+            <div className="ml-auto sticky top-[72px] z-50 w-fit  md:px-24 mb-6">
+                <ChangeMediaListBtn />
+            </div>
+            <div className="w-full md:px-24 flex flex-wrap justify-center px-2 overflow-hidden">
+                <MediaList movie={listRecommendations} />
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/movie/[movieId]/videos/page.tsx b/app/movie/[movieId]/videos/page.tsx
index 0ad3b0c..2d3c585 100644
--- a/app/movie/[movieId]/videos/page.tsx
+++ b/app/movie/[movieId]/videos/page.tsx
@@ -1,90 +1,90 @@
-"use client";
-import React, { useState } from "react";
-import useSwr from "swr";
-import { ListPhotos, Videos, videoTypes } from "@/service/TMDB.type";
-import tmdb from "@/service/TMDB";
-import Image from "next/image";
-interface IPageProps {
-    params: {
-        movieId: number;
-    };
-}
-const menu = [
-    {
-        name: videoTypes.Clip,
-    },
-    {
-        name: videoTypes.Trailer,
-    },
-    {
-        name: videoTypes.Teaser,
-    },
-    {
-        name: videoTypes.Featurette,
-    },
-    {
-        name: videoTypes.BehindTheScenes,
-    },
-];
-function Page({ params }: IPageProps) {
-    const [type, setType] = useState<videoTypes>(videoTypes.Clip);
-    const { data: listVideos } = useSwr<{ results: Videos[] }>(
-        `/videos/${params.movieId}`,
-        () => tmdb.getVideos("movie", params.movieId)
-    );
-    const { data: listPhoto } = useSwr<ListPhotos>(
-        `/photos/${params.movieId}`,
-        () => tmdb.getPhotos("movie", params.movieId),
-        {
-            revalidateOnMount: true,
-        }
-    );
-    return (
-        <div className="flex justify-between md:px-10 flex-col md:flex-row px-2">
-            <div className="mb-4">
-                <ul className="menu bg-base-200 md:w-56 md:menu-vertical menu-horizontal w-full">
-                    {menu.map((m) => (
-                        <li key={m.name}>
-                            <a
-                                className={`${type == m.name && "active"}`}
-                                onClick={() => setType(m.name)}
-                            >
-                                {m.name}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-            <div className="flex flex-wrap justify-center w-full gap-4">
-                {listVideos?.results
-                    .filter((v) => v.type == type)
-                    .map((v, index) => (
-                        <div
-                            key={v.id}
-                            className="card card-compact w-96 bg-base-100 shadow-xl"
-                        >
-                            <figure>
-                                <Image
-                                    width={240}
-                                    height={240}
-                                    src={tmdb.getImage(
-                                        listPhoto?.backdrops?.[index]
-                                            ?.file_path as string
-                                    )}
-                                    priority
-                                    alt="img"
-                                    className="object-cover cursor-pointer w-96"
-                                />
-                            </figure>
-
-                            <div className="card-body">
-                                <h2 className="card-title">{v.name}</h2>
-                            </div>
-                        </div>
-                    ))}
-            </div>
-        </div>
-    );
-}
-
-export default Page;
+"use client";
+import React, { useState } from "react";
+import useSwr from "swr";
+import { ListPhotos, Videos, videoTypes } from "@/service/TMDB.type";
+import tmdb from "@/service/TMDB";
+import Image from "next/image";
+interface IPageProps {
+    params: {
+        movieId: number;
+    };
+}
+const menu = [
+    {
+        name: videoTypes.Clip,
+    },
+    {
+        name: videoTypes.Trailer,
+    },
+    {
+        name: videoTypes.Teaser,
+    },
+    {
+        name: videoTypes.Featurette,
+    },
+    {
+        name: videoTypes.BehindTheScenes,
+    },
+];
+function Page({ params }: IPageProps) {
+    const [type, setType] = useState<videoTypes>(videoTypes.Clip);
+    const { data: listVideos } = useSwr<{ results: Videos[] }>(
+        `/videos/${params.movieId}`,
+        () => tmdb.getVideos("movie", params.movieId)
+    );
+    const { data: listPhoto } = useSwr<ListPhotos>(
+        `/photos/${params.movieId}`,
+        () => tmdb.getPhotos("movie", params.movieId),
+        {
+            revalidateOnMount: true,
+        }
+    );
+    return (
+        <div className="flex justify-between md:px-10 flex-col md:flex-row px-2">
+            <div className="mb-4">
+                <ul className="menu bg-base-200 md:w-56 md:menu-vertical menu-horizontal w-full">
+                    {menu.map((m) => (
+                        <li key={m.name}>
+                            <a
+                                className={`${type == m.name && "active"}`}
+                                onClick={() => setType(m.name)}
+                            >
+                                {m.name}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="flex flex-wrap justify-center w-full gap-4">
+                {listVideos?.results
+                    .filter((v) => v.type == type)
+                    .map((v, index) => (
+                        <div
+                            key={v.id}
+                            className="card card-compact w-96 bg-base-100 shadow-xl"
+                        >
+                            <figure>
+                                <Image
+                                    width={240}
+                                    height={240}
+                                    src={tmdb.getImage(
+                                        listPhoto?.backdrops?.[index]
+                                            ?.file_path as string
+                                    )}
+                                    priority
+                                    alt="img"
+                                    className="object-cover cursor-pointer w-96"
+                                />
+                            </figure>
+
+                            <div className="card-body">
+                                <h2 className="card-title">{v.name}</h2>
+                            </div>
+                        </div>
+                    ))}
+            </div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/page.tsx b/app/page.tsx
index 906ca7a..02466ec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,69 +1,69 @@
-import Link from "next/link";
-import Slider from "./components/Slider";
-import tmdb from "@/service/TMDB";
-import CardSlide from "./components/CardSlide";
-
-export default async function Home() {
-    const [trendingList, popularList, topRateList, popularPeople] =
-        await Promise.all([
-            tmdb.getTrending("movie", "day"),
-            tmdb.getPopular("movie"),
-            tmdb.getTopRate("movie"),
-            tmdb.getTrending("person", "day"),
-        ]);
-
-    return (
-        <div className="flex flex-col h-screen rounded-tl-[20px]">
-            <div className="h-screen rounded-tl-[20px]">
-                <Slider movie={trendingList} />
-            </div>
-
-            <div className="pl-6 flex flex-col">
-                <div>
-                    <p className="text-4xl font-semibold mt-12 text-base-content">
-                        Popular Movies
-                    </p>
-                    <Link
-                        href={"/trending/today"}
-                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
-                    >
-                        View more
-                    </Link>
-
-                    <div className="flex justify-center">
-                        <CardSlide data={popularList} type="movie" />
-                    </div>
-                </div>
-
-                <div>
-                    <p className="text-4xl font-semibold mt-12 text-base-content">
-                        Top Rate
-                    </p>
-                    <Link
-                        href={"/"}
-                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
-                    >
-                        View more
-                    </Link>
-                    <div className="flex justify-center">
-                        <CardSlide data={topRateList} type="movie" />
-                    </div>
-                </div>
-                <div>
-                    <p className="text-4xl font-semibold mt-12 text-base-content">
-                        Popular People
-                    </p>
-                    <Link
-                        href={"/people"}
-                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
-                    >
-                        View more
-                    </Link>
-                    <div className="mb-20 flex justify-center">
-                        <CardSlide data={popularPeople} type="people" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
+import Link from "next/link";
+import Slider from "./components/Slider";
+import tmdb from "@/service/TMDB";
+import CardSlide from "./components/CardSlide";
+
+export default async function Home() {
+    const [trendingList, popularList, topRateList, popularPeople] =
+        await Promise.all([
+            tmdb.getTrending("movie", "day"),
+            tmdb.getPopular("movie"),
+            tmdb.getTopRate("movie"),
+            tmdb.getTrending("person", "day"),
+        ]);
+
+    return (
+        <div className="flex flex-col h-screen rounded-tl-[20px]">
+            <div className="h-screen rounded-tl-[20px]">
+                <Slider movie={trendingList} />
+            </div>
+
+            <div className="pl-6 flex flex-col">
+                <div>
+                    <p className="text-4xl font-semibold mt-12 text-base-content">
+                        Popular Movies
+                    </p>
+                    <Link
+                        href={"/trending/today"}
+                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
+                    >
+                        View more
+                    </Link>
+
+                    <div className="flex justify-center">
+                        <CardSlide data={popularList} type="movie" />
+                    </div>
+                </div>
+
+                <div>
+                    <p className="text-4xl font-semibold mt-12 text-base-content">
+                        Top Rate
+                    </p>
+                    <Link
+                        href={"/"}
+                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
+                    >
+                        View more
+                    </Link>
+                    <div className="flex justify-center">
+                        <CardSlide data={topRateList} type="movie" />
+                    </div>
+                </div>
+                <div>
+                    <p className="text-4xl font-semibold mt-12 text-base-content">
+                        Popular People
+                    </p>
+                    <Link
+                        href={"/people"}
+                        className="btn btn-secondary w-fit btn-sm rounded-full my-3"
+                    >
+                        View more
+                    </Link>
+                    <div className="mb-20 flex justify-center">
+                        <CardSlide data={popularPeople} type="people" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/people/[peopleId]/credits/page.tsx b/app/people/[peopleId]/credits/page.tsx
index 89eef0b..7b85df9 100644
--- a/app/people/[peopleId]/credits/page.tsx
+++ b/app/people/[peopleId]/credits/page.tsx
@@ -1,25 +1,24 @@
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-import { MovieCard2 } from "@/app/components/MovieCard";
-import tmdb from "@/service/TMDB";
-import React from "react";
-interface IPageProps {
-    params: {
-        peopleId: number;
-    };
-}
-async function page({ params }: IPageProps) {
-    const listOfMoview = await tmdb.getMovieCredits(params.peopleId);
-    return (
-        <div className="flex flex-wrap">
-            <p className="text-xl font-bold mb-4">
-                Movie Credits {listOfMoview.cast.length}
-            </p>
-
-            {listOfMoview.cast.map((m, index) => (
-                <MovieCard2 m={m as any} key={m.id} index={index} />
-            ))}
-        </div>
-    );
-}
-
-export default page;
+import { MovieCard2 } from "@/app/components/MovieCard";
+import tmdb from "@/service/TMDB";
+import React from "react";
+interface IPageProps {
+    params: {
+        peopleId: number;
+    };
+}
+async function page({ params }: IPageProps) {
+    const listOfMoview = await tmdb.getMovieCredits(params.peopleId);
+    return (
+        <div className="flex flex-wrap">
+            <p className="text-xl font-bold mb-4">
+                Movie Credits {listOfMoview.cast.length}
+            </p>
+
+            {listOfMoview.cast.map((m, index) => (
+                <MovieCard2 m={m as any} key={m.id} index={index} />
+            ))}
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/people/[peopleId]/layout.tsx b/app/people/[peopleId]/layout.tsx
index 85aa280..6836f26 100644
--- a/app/people/[peopleId]/layout.tsx
+++ b/app/people/[peopleId]/layout.tsx
@@ -1,77 +1,77 @@
-import StickyTab from "@/app/components/StickyTab";
-import tmdb from "@/service/TMDB";
-import React from "react";
-import Image from "next/image";
-interface IPageProps {
-    params: {
-        peopleId: number;
-    };
-    children: React.ReactNode;
-}
-async function layout({ params, children }: IPageProps) {
-    const tabs = [
-        {
-            tabName: "Overview",
-            href: `/people/${params.peopleId}`,
-        },
-        {
-            tabName: "Credit",
-            href: `/people/${params.peopleId}/credits`,
-        },
-        {
-            tabName: "Media",
-            href: `/people/${params.peopleId}/media`,
-        },
-    ];
-    const people = await tmdb.getPeople(params.peopleId);
-    return (
-        <div className="pt-16">
-            <StickyTab tabs={tabs} />
-            <div className="w-full flex flex-col lg:flex-row mt-12">
-                <div className="lg:w-4/12 w-full  flex flex-col ">
-                    <Image
-                        width={500}
-                        height={500}
-                        src={tmdb.getImage(people.profile_path)}
-                        alt="people avatar"
-                        className="object-cover self-center w-[350px] rounded-2xl"
-                        priority
-                    />
-                    <p className="text-2xl font-bold mt-4 text-center">
-                        {people.name}
-                    </p>
-                    <div className="space-y-4 ml-16 mt-8">
-                        <p className="text-xl font-bold">Personal Info</p>
-                        <div className="flex md:flex-col gap-4">
-                            <p className="font-bold">Know for</p>
-                            <p>{people.known_for_department}</p>
-                        </div>
-                        <div className="flex md:flex-col gap-4">
-                            <p className="font-bold">Gender</p>
-                            <p>{people.gender === 1 ? "Female" : "Male"}</p>
-                        </div>
-                        <div className="flex md:flex-col gap-4">
-                            <p className="font-bold">Birthday</p>
-                            <p>{people.birthday}</p>
-                        </div>
-                        <div className="flex md:flex-col gap-4">
-                            <p className="font-bold">Place of Birth</p>
-                            <p>{people.place_of_birth}</p>
-                        </div>
-                        <div className="flex md:flex-col gap-4 flex-wrap">
-                            <p className="font-bold">Also know as</p>
-                            <div>
-                                {people.also_known_as.map((x) => (
-                                    <p key={x}>{x}</p>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="lg:w-8/12 w-full px-6">{children}</div>
-            </div>
-        </div>
-    );
-}
-
-export default layout;
+import StickyTab from "@/app/components/StickyTab";
+import tmdb from "@/service/TMDB";
+import React from "react";
+import Image from "next/image";
+interface IPageProps {
+    params: {
+        peopleId: number;
+    };
+    children: React.ReactNode;
+}
+async function layout({ params, children }: IPageProps) {
+    const tabs = [
+        {
+            tabName: "Overview",
+            href: `/people/${params.peopleId}`,
+        },
+        {
+            tabName: "Credit",
+            href: `/people/${params.peopleId}/credits`,
+        },
+        {
+            tabName: "Media",
+            href: `/people/${params.peopleId}/media`,
+        },
+    ];
+    const people = await tmdb.getPeople(params.peopleId);
+    return (
+        <div className="pt-16">
+            <StickyTab tabs={tabs} />
+            <div className="w-full flex flex-col lg:flex-row mt-12">
+                <div className="lg:w-4/12 w-full  flex flex-col ">
+                    <Image
+                        width={500}
+                        height={500}
+                        src={tmdb.getImage(people.profile_path)}
+                        alt="people avatar"
+                        className="object-cover self-center w-[350px] rounded-2xl"
+                        priority
+                    />
+                    <p className="text-2xl font-bold mt-4 text-center">
+                        {people.name}
+                    </p>
+                    <div className="space-y-4 ml-16 mt-8">
+                        <p className="text-xl font-bold">Personal Info</p>
+                        <div className="flex md:flex-col gap-4">
+                            <p className="font-bold">Know for</p>
+                            <p>{people.known_for_department}</p>
+                        </div>
+                        <div className="flex md:flex-col gap-4">
+                            <p className="font-bold">Gender</p>
+                            <p>{people.gender === 1 ? "Female" : "Male"}</p>
+                        </div>
+                        <div className="flex md:flex-col gap-4">
+                            <p className="font-bold">Birthday</p>
+                            <p>{people.birthday}</p>
+                        </div>
+                        <div className="flex md:flex-col gap-4">
+                            <p className="font-bold">Place of Birth</p>
+                            <p>{people.place_of_birth}</p>
+                        </div>
+                        <div className="flex md:flex-col gap-4 flex-wrap">
+                            <p className="font-bold">Also know as</p>
+                            <div>
+                                {people.also_known_as.map((x) => (
+                                    <p key={x}>{x}</p>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="lg:w-8/12 w-full px-6">{children}</div>
+            </div>
+        </div>
+    );
+}
+
+export default layout;
diff --git a/app/people/[peopleId]/media/page.tsx b/app/people/[peopleId]/media/page.tsx
index 4fa1045..0508ba1 100644
--- a/app/people/[peopleId]/media/page.tsx
+++ b/app/people/[peopleId]/media/page.tsx
@@ -1,50 +1,50 @@
-"use client";
-import tmdb from "@/service/TMDB";
-import React from "react";
-import useSwr from "swr";
-import { PhotoProvider, PhotoView } from "react-photo-view";
-import Image from "next/image";
-import "react-photo-view/dist/react-photo-view.css";
-interface IPageProps {
-    params: {
-        peopleId: number;
-    };
-}
-function Page({ params }: IPageProps) {
-    const { data: listPhoto } = useSwr(`/photos2/${params.peopleId}`, () =>
-        tmdb.getPeoplePhotos(params.peopleId)
-    );
-    return (
-        <PhotoProvider
-            speed={() => 800}
-            easing={(type) =>
-                type === 2
-                    ? "cubic-bezier(0.36, 0, 0.66, -0.56)"
-                    : "cubic-bezier(0.34, 1.56, 0.64, 1)"
-            }
-        >
-            <div className="flex justify-center flex-col max-w-7xl items-center mx-auto">
-                <h2 className="font-bold text-lg pb-2 ">Profile</h2>
-                <div className="pb-20 flex gap-4 flex-wrap justify-center">
-                    {listPhoto?.profiles.map((profile, index) => (
-                        <PhotoView
-                            key={index}
-                            src={tmdb.getImage(profile.file_path)}
-                        >
-                            <Image
-                                width={240}
-                                height={240}
-                                src={tmdb.getImage(profile.file_path)}
-                                loading="lazy"
-                                alt="img_people"
-                                className="object-cover w-64 cursor-pointer"
-                            />
-                        </PhotoView>
-                    ))}
-                </div>
-            </div>
-        </PhotoProvider>
-    );
-}
-
-export default Page;
+"use client";
+import tmdb from "@/service/TMDB";
+import React from "react";
+import useSwr from "swr";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import Image from "next/image";
+import "react-photo-view/dist/react-photo-view.css";
+interface IPageProps {
+    params: {
+        peopleId: number;
+    };
+}
+function Page({ params }: IPageProps) {
+    const { data: listPhoto } = useSwr(`/photos2/${params.peopleId}`, () =>
+        tmdb.getPeoplePhotos(params.peopleId)
+    );
+    return (
+        <PhotoProvider
+            speed={() => 800}
+            easing={(type) =>
+                type === 2
+                    ? "cubic-bezier(0.36, 0, 0.66, -0.56)"
+                    : "cubic-bezier(0.34, 1.56, 0.64, 1)"
+            }
+        >
+            <div className="flex justify-center flex-col max-w-7xl items-center mx-auto">
+                <h2 className="font-bold text-lg pb-2 ">Profile</h2>
+                <div className="pb-20 flex gap-4 flex-wrap justify-center">
+                    {listPhoto?.profiles.map((profile, index) => (
+                        <PhotoView
+                            key={index}
+                            src={tmdb.getImage(profile.file_path)}
+                        >
+                            <Image
+                                width={240}
+                                height={240}
+                                src={tmdb.getImage(profile.file_path)}
+                                loading="lazy"
+                                alt="img_people"
+                                className="object-cover w-64 cursor-pointer"
+                            />
+                        </PhotoView>
+                    ))}
+                </div>
+            </div>
+        </PhotoProvider>
+    );
+}
+
+export default Page;
diff --git a/app/people/[peopleId]/page.tsx b/app/people/[peopleId]/page.tsx
index d34a2ed..e12aabb 100644
--- a/app/people/[peopleId]/page.tsx
+++ b/app/people/[peopleId]/page.tsx
@@ -1,37 +1,37 @@
-import MovieCard from "@/app/components/MovieCard";
-import tmdb from "@/service/TMDB";
-import { TrendingPeople } from "@/service/TMDB.type";
-import React from "react";
-
-interface IPageProps {
-    params: {
-        peopleId: number;
-    };
-}
-async function page({ params }: IPageProps) {
-    const people = await tmdb.getPeople(params.peopleId);
-    const knowFor: { results: TrendingPeople[] } = await tmdb.search(
-        people.name,
-        "person"
-    );
-    return (
-        <div className="px-4 text-justify mb-20 lg:mb-0">
-            <p className="font-bold text-lg mb-4">Biography</p>
-            <div>
-                {people.biography.split("\n\n").map((content, index) => (
-                    <p key={index}>
-                        {content} <br /> <br />
-                    </p>
-                ))}
-            </div>
-            <p className="font-bold text-lg my-4">Know For</p>
-            <div className="flex gap-4">
-                {knowFor?.results?.[0].known_for.map((k) => (
-                    <MovieCard key={k.id} m={k as any} />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import MovieCard from "@/app/components/MovieCard";
+import tmdb from "@/service/TMDB";
+import { TrendingPeople } from "@/service/TMDB.type";
+import React from "react";
+
+interface IPageProps {
+    params: {
+        peopleId: number;
+    };
+}
+async function page({ params }: IPageProps) {
+    const people = await tmdb.getPeople(params.peopleId);
+    const knowFor: { results: TrendingPeople[] } = await tmdb.search(
+        people.name,
+        "person"
+    );
+    return (
+        <div className="px-4 text-justify mb-20 lg:mb-0">
+            <p className="font-bold text-lg mb-4">Biography</p>
+            <div>
+                {people.biography.split("\n\n").map((content, index) => (
+                    <p key={index}>
+                        {content} <br /> <br />
+                    </p>
+                ))}
+            </div>
+            <p className="font-bold text-lg my-4">Know For</p>
+            <div className="flex gap-4">
+                {knowFor?.results?.[0].known_for.map((k) => (
+                    <MovieCard key={k.id} m={k as any} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/people/page.tsx b/app/people/page.tsx
index 2c61922..f93cf00 100644
--- a/app/people/page.tsx
+++ b/app/people/page.tsx
@@ -1,33 +1,33 @@
-import tmdb from "@/service/TMDB";
-import { TrendingPeople } from "@/service/TMDB.type";
-import React from "react";
-import PeopleCard from "../components/PeopleCard";
-import Pagination from "../components/Pagination";
-
-interface IPageProps {
-    searchParams: {
-        page: number;
-    };
-}
-async function page({ searchParams }: IPageProps) {
-    const popularPeople: { results: TrendingPeople[] } = await tmdb.getTrending(
-        "person",
-        "day",
-        searchParams.page ?? 1
-    );
-    return (
-        <div className="pt-16 px-4">
-            <h1 className="text-4xl font-bold pt-16">Popular People</h1>
-            <div className="flex justify-center items-center py-16">
-                <Pagination totalPages={500} href="/people?" />
-            </div>
-            <div className="flex flex-row gap-4 flex-wrap justify-center">
-                {popularPeople.results.map((p) => (
-                    <PeopleCard key={p.id} people={p} />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import tmdb from "@/service/TMDB";
+import { TrendingPeople } from "@/service/TMDB.type";
+import React from "react";
+import PeopleCard from "../components/PeopleCard";
+import Pagination from "../components/Pagination";
+
+interface IPageProps {
+    searchParams: {
+        page: number;
+    };
+}
+async function page({ searchParams }: IPageProps) {
+    const popularPeople: { results: TrendingPeople[] } = await tmdb.getTrending(
+        "person",
+        "day",
+        searchParams.page ?? 1
+    );
+    return (
+        <div className="pt-16 px-4">
+            <h1 className="text-4xl font-bold pt-16">Popular People</h1>
+            <div className="flex justify-center items-center py-16">
+                <Pagination totalPages={500} href="/people?" />
+            </div>
+            <div className="flex flex-row gap-4 flex-wrap justify-center">
+                {popularPeople.results.map((p) => (
+                    <PeopleCard key={p.id} people={p} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index d29e798..b429184 100644
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -1,23 +1,23 @@
-import React from "react";
-import StickyTab from "../components/StickyTab";
-
-function Page({ children }: { children: React.ReactNode }) {
-    const tabs = [
-        {
-            tabName: "Tìm kiếm phim lẻ",
-            href: "/search/movie",
-        },
-        {
-            tabName: "Tìm kiếm phim bộ",
-            href: "/search/tv",
-        },
-    ];
-    return (
-        <div className="pt-16">
-            <StickyTab tabs={tabs} />
-            <div className="pt-24 px-4">{children}</div>
-        </div>
-    );
-}
-
-export default Page;
+import React from "react";
+import StickyTab from "../components/StickyTab";
+
+function Page({ children }: { children: React.ReactNode }) {
+    const tabs = [
+        {
+            tabName: "Tìm kiếm phim lẻ",
+            href: "/search/movie",
+        },
+        {
+            tabName: "Tìm kiếm phim bộ",
+            href: "/search/tv",
+        },
+    ];
+    return (
+        <div className="pt-16">
+            <StickyTab tabs={tabs} />
+            <div className="pt-24 px-4">{children}</div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/search/movie/page.tsx b/app/search/movie/page.tsx
index 1a04e7e..3256790 100644
--- a/app/search/movie/page.tsx
+++ b/app/search/movie/page.tsx
@@ -1,67 +1,67 @@
-import React from "react";
-import tmdb from "@/service/TMDB";
-import { Movie, MovieList } from "@/service/TMDB.type";
-import MovieCard from "@/app/components/MovieCard";
-import Pagination from "@/app/components/Pagination";
-import Search from "@/app/components/search/Search";
-import MediaList from "@/app/components/MediaList/MediaList";
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-interface IPageProps {
-    searchParams: {
-        page: number;
-        q: string;
-    };
-}
-async function page({ searchParams }: IPageProps) {
-    const movie: { results: Movie[] } = await tmdb.getTrending(
-        "movie",
-        "day",
-        searchParams.page ?? 1
-    );
-    const searchMovie: { results: Movie[]; total_pages: number } =
-        await tmdb.search(searchParams.q, "movie", searchParams.page);
-    return (
-        <div>
-            <Search />
-
-            <div className="flex flex-row items-center justify-center pb-10 mt-6">
-                <Pagination
-                    totalPages={
-                        searchParams.q === undefined
-                            ? 500
-                            : searchMovie.total_pages
-                    }
-                    href={
-                        searchParams.q === undefined
-                            ? "/search/movie?"
-                            : `/search/movie?q=${searchParams.q}&`
-                    }
-                />
-            </div>
-            <div className="ml-auto md:sticky top-[70px] z-50 w-fit">
-                <ChangeMediaListBtn />
-            </div>
-            {searchParams.q === undefined ? (
-                <div>
-                    <p className="md:text-2xl font-bold py-8">
-                        Xu hướng hôm nay
-                    </p>
-                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden mt-6">
-                        <MediaList movie={movie} />
-                    </div>
-                </div>
-            ) : (
-                <div>
-                    <p className="md:text-2xl font-bold py-8">
-                        Kết quả tìm kiếm cho {`"${searchParams.q}"`}
-                    </p>
-                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden">
-                        <MediaList movie={searchMovie} />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import tmdb from "@/service/TMDB";
+import { Movie, MovieList } from "@/service/TMDB.type";
+import MovieCard from "@/app/components/MovieCard";
+import Pagination from "@/app/components/Pagination";
+import Search from "@/app/components/search/Search";
+import MediaList from "@/app/components/MediaList/MediaList";
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+interface IPageProps {
+    searchParams: {
+        page: number;
+        q: string;
+    };
+}
+async function page({ searchParams }: IPageProps) {
+    const movie: { results: Movie[] } = await tmdb.getTrending(
+        "movie",
+        "day",
+        searchParams.page ?? 1
+    );
+    const searchMovie: { results: Movie[]; total_pages: number } =
+        await tmdb.search(searchParams.q, "movie", searchParams.page);
+    return (
+        <div>
+            <Search />
+
+            <div className="flex flex-row items-center justify-center pb-10 mt-6">
+                <Pagination
+                    totalPages={
+                        searchParams.q === undefined
+                            ? 500
+                            : searchMovie.total_pages
+                    }
+                    href={
+                        searchParams.q === undefined
+                            ? "/search/movie?"
+                            : `/search/movie?q=${searchParams.q}&`
+                    }
+                />
+            </div>
+            <div className="ml-auto md:sticky top-[70px] z-50 w-fit">
+                <ChangeMediaListBtn />
+            </div>
+            {searchParams.q === undefined ? (
+                <div>
+                    <p className="md:text-2xl font-bold py-8">
+                        Xu hướng hôm nay
+                    </p>
+                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden mt-6">
+                        <MediaList movie={movie} />
+                    </div>
+                </div>
+            ) : (
+                <div>
+                    <p className="md:text-2xl font-bold py-8">
+                        Kết quả tìm kiếm cho {`"${searchParams.q}"`}
+                    </p>
+                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden">
+                        <MediaList movie={searchMovie} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/search/tv/page.tsx b/app/search/tv/page.tsx
index 85e79d2..993a081 100644
--- a/app/search/tv/page.tsx
+++ b/app/search/tv/page.tsx
@@ -1,65 +1,65 @@
-import React from "react";
-import tmdb from "@/service/TMDB";
-import { Movie } from "@/service/TMDB.type";
-import Pagination from "@/app/components/Pagination";
-import Search from "@/app/components/search/Search";
-import MediaList from "@/app/components/MediaList/MediaList";
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-interface IPageProps {
-    searchParams: {
-        page: number;
-        q: string;
-    };
-}
-async function page({ searchParams }: IPageProps) {
-    const movie: { results: Movie[] } = await tmdb.getTrending(
-        "tv",
-        "day",
-        searchParams.page ?? 1
-    );
-    const searchMovie: { results: Movie[]; total_pages: number } =
-        await tmdb.search(searchParams.q, "tv");
-    return (
-        <div>
-            <Search />
-            <div className="flex flex-row items-center justify-center pb-10 mt-6">
-                <Pagination
-                    totalPages={
-                        searchParams.q === undefined
-                            ? 500
-                            : searchMovie.total_pages
-                    }
-                    href={
-                        searchParams.q === undefined
-                            ? "/search/tv?"
-                            : `/search/tv?q=${searchParams.q}&`
-                    }
-                />
-            </div>
-            <div className="ml-auto md:sticky top-[70px] z-50 w-fit">
-                <ChangeMediaListBtn />
-            </div>
-            {searchParams.q === undefined ? (
-                <div>
-                    <p className="md:text-2xl font-bold py-8">
-                        Xu hướng hôm nay
-                    </p>
-                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden mt-6">
-                        <MediaList movie={movie} />
-                    </div>
-                </div>
-            ) : (
-                <div>
-                    <p className="md:text-2xl font-bold py-8">
-                        Kết quả tìm kiếm cho {`"${searchParams.q}"`}
-                    </p>
-                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden">
-                        <MediaList movie={searchMovie} />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import tmdb from "@/service/TMDB";
+import { Movie } from "@/service/TMDB.type";
+import Pagination from "@/app/components/Pagination";
+import Search from "@/app/components/search/Search";
+import MediaList from "@/app/components/MediaList/MediaList";
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+interface IPageProps {
+    searchParams: {
+        page: number;
+        q: string;
+    };
+}
+async function page({ searchParams }: IPageProps) {
+    const movie: { results: Movie[] } = await tmdb.getTrending(
+        "tv",
+        "day",
+        searchParams.page ?? 1
+    );
+    const searchMovie: { results: Movie[]; total_pages: number } =
+        await tmdb.search(searchParams.q, "tv");
+    return (
+        <div>
+            <Search />
+            <div className="flex flex-row items-center justify-center pb-10 mt-6">
+                <Pagination
+                    totalPages={
+                        searchParams.q === undefined
+                            ? 500
+                            : searchMovie.total_pages
+                    }
+                    href={
+                        searchParams.q === undefined
+                            ? "/search/tv?"
+                            : `/search/tv?q=${searchParams.q}&`
+                    }
+                />
+            </div>
+            <div className="ml-auto md:sticky top-[70px] z-50 w-fit">
+                <ChangeMediaListBtn />
+            </div>
+            {searchParams.q === undefined ? (
+                <div>
+                    <p className="md:text-2xl font-bold py-8">
+                        Xu hướng hôm nay
+                    </p>
+                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden mt-6">
+                        <MediaList movie={movie} />
+                    </div>
+                </div>
+            ) : (
+                <div>
+                    <p className="md:text-2xl font-bold py-8">
+                        Kết quả tìm kiếm cho {`"${searchParams.q}"`}
+                    </p>
+                    <div className="flex flex-row justify-between items-center flex-wrap gap-4 md:pb-8 pb-6 overflow-hidden">
+                        <MediaList movie={searchMovie} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/setting/page.tsx b/app/setting/page.tsx
index f29729b..e621a15 100644
--- a/app/setting/page.tsx
+++ b/app/setting/page.tsx
@@ -1,247 +1,247 @@
-"use client";
-import React from "react";
-import useStore from "../(store)/store";
-function Page() {
-    const theme = useStore((state) => state.theme);
-    const setTheme = useStore((state) => state.setTheme);
-    const expandedSideBar = useStore((state) => state.expandedSideBar);
-    const setExpandedSideBar = useStore((state) => state.setExpandedSideBar);
-    function handleChangeTheme(themeName: string) {
-        setTheme(themeName);
-        localStorage.setItem("theme", themeName);
-        document.getElementById("html")?.setAttribute("data-theme", themeName);
-    }
-
-    return (
-        <div className="px-10 pt-16 pb-10">
-            <p className="text-2xl font-bold">Cài đặt</p>
-            <div className="flex flex-col gap-4 py-4 md:flex-row md:gap-8">
-                <ul className="menu-horizontal menu md:menu-vertical md:w-56 rounded-box md:text-lg bg-base-200 h-fit shadow-md">
-                    <li>
-                        <a className="active">Giao diện</a>
-                    </li>
-                    <li>
-                        <a>Comming soon</a>
-                    </li>
-                    <li>
-                        <a>Comming soon</a>
-                    </li>
-                </ul>
-                <div className="space-y-4 w-full">
-                    <div className="collapse bg-base-200 collapse-arrow shadow-md">
-                        <input type="checkbox" />
-                        <div className="collapse-title">
-                            <p className="text-xl font-bold">Giao diện</p>
-                            <p className="mt-2">
-                                Tuỳ chình giao diện cho ứng dụng
-                            </p>
-                        </div>
-                        <div className="collapse-content">
-                            <div className="flex flex-col md:flex-row gap-4">
-                                <div
-                                    data-theme="black"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("black")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="dark"
-                                        checked={theme === "black"}
-                                    />
-                                    <p className={"block md:hidden"}>dark</p>
-                                </div>
-                                <div
-                                    data-theme="light"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("light")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="light"
-                                        checked={theme === "light"}
-                                    />
-                                    <p className={"block md:hidden"}>light</p>
-                                </div>
-                                <div
-                                    data-theme="luxury"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("luxury")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="luxury"
-                                        checked={theme === "luxury"}
-                                    />
-                                    <p className={"block md:hidden"}>luxury</p>
-                                </div>
-                                <div
-                                    data-theme="dracula"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("dracula")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="dracula"
-                                        checked={theme === "dracula"}
-                                    />
-                                    <p className={"block md:hidden"}>dracula</p>
-                                </div>
-                                <div
-                                    data-theme="night"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("night")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="night"
-                                        checked={theme === "night"}
-                                    />
-                                    <p className={"block md:hidden"}>night</p>
-                                </div>
-                                <div
-                                    data-theme="retro"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("retro")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="retro"
-                                        checked={theme === "retro"}
-                                    />
-                                    <p className={"block md:hidden"}>retro</p>
-                                </div>
-                                <div
-                                    data-theme="business"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("business")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="business"
-                                        checked={theme === "business"}
-                                    />
-                                    <p className={"block md:hidden"}>
-                                        business
-                                    </p>
-                                </div>
-
-                                <div
-                                    data-theme="synthwave"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("synthwave")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="synthwave"
-                                        checked={theme === "synthwave"}
-                                    />
-                                    <p className={"block md:hidden"}>
-                                        sythwave
-                                    </p>
-                                </div>
-                                <div
-                                    data-theme="forest"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("forest")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="forest"
-                                        checked={theme === "forest"}
-                                    />
-                                    <p className={"block md:hidden"}>forest</p>
-                                </div>
-                                <div
-                                    data-theme="halloween"
-                                    className="flex gap-2 bg-transparent"
-                                >
-                                    <input
-                                        onChange={() =>
-                                            handleChangeTheme("halloween")
-                                        }
-                                        type="radio"
-                                        name="radio-1"
-                                        className="radio radio-primary md:tooltip hover:bg-primary"
-                                        data-tip="halloween"
-                                        checked={theme === "halloween"}
-                                    />
-                                    <p className={"block md:hidden"}>
-                                        halloween
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        tabIndex={0}
-                        className="collapse bg-base-200 collapse-arrow shadow-md"
-                    >
-                        <input type="checkbox" />
-                        <div className="collapse-title">
-                            <p className="text-xl font-bold">Thanh bên</p>
-                            <p className="mt-2">Cài đặt thanh bên</p>
-                        </div>
-                        <div className="collapse-content space-y-4">
-                            <div className="w-full flex justify-between">
-                                <p>Mini</p>
-                                <input
-                                    onChange={() => setExpandedSideBar(true)}
-                                    type="checkbox"
-                                    className="toggle toggle-primary"
-                                />
-                            </div>
-                            <div className="w-full flex justify-between">
-                                <p>Expanded</p>
-                                <input
-                                    onChange={() =>
-                                        setExpandedSideBar(expandedSideBar)
-                                    }
-                                    type="checkbox"
-                                    className="toggle toggle-primary"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Page;
+"use client";
+import React from "react";
+import useStore from "../(store)/store";
+function Page() {
+    const theme = useStore((state) => state.theme);
+    const setTheme = useStore((state) => state.setTheme);
+    const expandedSideBar = useStore((state) => state.expandedSideBar);
+    const setExpandedSideBar = useStore((state) => state.setExpandedSideBar);
+    function handleChangeTheme(themeName: string) {
+        setTheme(themeName);
+        localStorage.setItem("theme", themeName);
+        document.getElementById("html")?.setAttribute("data-theme", themeName);
+    }
+
+    return (
+        <div className="px-10 pt-16 pb-10">
+            <p className="text-2xl font-bold">Cài đặt</p>
+            <div className="flex flex-col gap-4 py-4 md:flex-row md:gap-8">
+                <ul className="menu-horizontal menu md:menu-vertical md:w-56 rounded-box md:text-lg bg-base-200 h-fit shadow-md">
+                    <li>
+                        <a className="active">Giao diện</a>
+                    </li>
+                    <li>
+                        <a>Comming soon</a>
+                    </li>
+                    <li>
+                        <a>Comming soon</a>
+                    </li>
+                </ul>
+                <div className="space-y-4 w-full">
+                    <div className="collapse bg-base-200 collapse-arrow shadow-md">
+                        <input type="checkbox" />
+                        <div className="collapse-title">
+                            <p className="text-xl font-bold">Giao diện</p>
+                            <p className="mt-2">
+                                Tuỳ chình giao diện cho ứng dụng
+                            </p>
+                        </div>
+                        <div className="collapse-content">
+                            <div className="flex flex-col md:flex-row gap-4">
+                                <div
+                                    data-theme="black"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("black")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="dark"
+                                        checked={theme === "black"}
+                                    />
+                                    <p className={"block md:hidden"}>dark</p>
+                                </div>
+                                <div
+                                    data-theme="light"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("light")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="light"
+                                        checked={theme === "light"}
+                                    />
+                                    <p className={"block md:hidden"}>light</p>
+                                </div>
+                                <div
+                                    data-theme="luxury"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("luxury")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="luxury"
+                                        checked={theme === "luxury"}
+                                    />
+                                    <p className={"block md:hidden"}>luxury</p>
+                                </div>
+                                <div
+                                    data-theme="dracula"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("dracula")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="dracula"
+                                        checked={theme === "dracula"}
+                                    />
+                                    <p className={"block md:hidden"}>dracula</p>
+                                </div>
+                                <div
+                                    data-theme="night"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("night")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="night"
+                                        checked={theme === "night"}
+                                    />
+                                    <p className={"block md:hidden"}>night</p>
+                                </div>
+                                <div
+                                    data-theme="retro"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("retro")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="retro"
+                                        checked={theme === "retro"}
+                                    />
+                                    <p className={"block md:hidden"}>retro</p>
+                                </div>
+                                <div
+                                    data-theme="business"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("business")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="business"
+                                        checked={theme === "business"}
+                                    />
+                                    <p className={"block md:hidden"}>
+                                        business
+                                    </p>
+                                </div>
+
+                                <div
+                                    data-theme="synthwave"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("synthwave")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="synthwave"
+                                        checked={theme === "synthwave"}
+                                    />
+                                    <p className={"block md:hidden"}>
+                                        sythwave
+                                    </p>
+                                </div>
+                                <div
+                                    data-theme="forest"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("forest")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="forest"
+                                        checked={theme === "forest"}
+                                    />
+                                    <p className={"block md:hidden"}>forest</p>
+                                </div>
+                                <div
+                                    data-theme="halloween"
+                                    className="flex gap-2 bg-transparent"
+                                >
+                                    <input
+                                        onChange={() =>
+                                            handleChangeTheme("halloween")
+                                        }
+                                        type="radio"
+                                        name="radio-1"
+                                        className="radio radio-primary md:tooltip hover:bg-primary"
+                                        data-tip="halloween"
+                                        checked={theme === "halloween"}
+                                    />
+                                    <p className={"block md:hidden"}>
+                                        halloween
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        tabIndex={0}
+                        className="collapse bg-base-200 collapse-arrow shadow-md"
+                    >
+                        <input type="checkbox" />
+                        <div className="collapse-title">
+                            <p className="text-xl font-bold">Thanh bên</p>
+                            <p className="mt-2">Cài đặt thanh bên</p>
+                        </div>
+                        <div className="collapse-content space-y-4">
+                            <div className="w-full flex justify-between">
+                                <p>Mini</p>
+                                <input
+                                    onChange={() => setExpandedSideBar(true)}
+                                    type="checkbox"
+                                    className="toggle toggle-primary"
+                                />
+                            </div>
+                            <div className="w-full flex justify-between">
+                                <p>Expanded</p>
+                                <input
+                                    onChange={() =>
+                                        setExpandedSideBar(expandedSideBar)
+                                    }
+                                    type="checkbox"
+                                    className="toggle toggle-primary"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/trending/layout.tsx b/app/trending/layout.tsx
index 3660156..f29d417 100644
--- a/app/trending/layout.tsx
+++ b/app/trending/layout.tsx
@@ -1,26 +1,26 @@
-import React from "react";
-import StickyTab from "../components/StickyTab";
-
-interface PageProps {
-    children: React.ReactNode;
-}
-function Page({ children }: PageProps) {
-    const tabs = [
-        {
-            tabName: "Xu hướng hôm nay",
-            href: "/trending/today",
-        },
-        {
-            tabName: "Xu hướng tuần này",
-            href: "/trending/week",
-        },
-    ];
-    return (
-        <div className="pt-16">
-            <StickyTab tabs={tabs} />
-            <div className="pt-24 px-4 w-full">{children}</div>
-        </div>
-    );
-}
-
-export default Page;
+import React from "react";
+import StickyTab from "../components/StickyTab";
+
+interface PageProps {
+    children: React.ReactNode;
+}
+function Page({ children }: PageProps) {
+    const tabs = [
+        {
+            tabName: "Xu hướng hôm nay",
+            href: "/trending/today",
+        },
+        {
+            tabName: "Xu hướng tuần này",
+            href: "/trending/week",
+        },
+    ];
+    return (
+        <div className="pt-16">
+            <StickyTab tabs={tabs} />
+            <div className="pt-24 px-4 w-full">{children}</div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/trending/today/page.tsx b/app/trending/today/page.tsx
index 105a00d..f0d262d 100644
--- a/app/trending/today/page.tsx
+++ b/app/trending/today/page.tsx
@@ -1,41 +1,41 @@
-import Pagination from "@/app/components/Pagination";
-import React from "react";
-import tmdb from "@/service/TMDB";
-import { Movie } from "@/service/TMDB.type";
-
-import MediaList from "@/app/components/MediaList/MediaList";
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-interface IPageProps {
-    searchParams: {
-        page: number;
-    };
-}
-async function Page({ searchParams }: IPageProps) {
-    const movie: { results: Movie[] } = await tmdb.getTrending(
-        "movie",
-        "day",
-        searchParams.page ?? 1
-    );
-
-    return (
-        <div className="pb-16 relative">
-            <div className="ml-auto md:sticky top-[70px] md:z-50 w-fit">
-                <ChangeMediaListBtn />
-            </div>
-            <div className="py-6">
-                <p className="text-3xl font-bold capitalize">
-                    Xu hướng hôm nay
-                </p>
-            </div>
-            <div className="flex flex-row items-center justify-center pb-10">
-                <Pagination totalPages={500} href="/trending/today?" />
-            </div>
-
-            <div className="gap-8 pb-6 md:gap-4 md:pb-8 overflow-hidden md:mt-6">
-                <MediaList movie={movie} />
-            </div>
-        </div>
-    );
-}
-
-export default Page;
+import Pagination from "@/app/components/Pagination";
+import React from "react";
+import tmdb from "@/service/TMDB";
+import { Movie } from "@/service/TMDB.type";
+
+import MediaList from "@/app/components/MediaList/MediaList";
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+interface IPageProps {
+    searchParams: {
+        page: number;
+    };
+}
+async function Page({ searchParams }: IPageProps) {
+    const movie: { results: Movie[] } = await tmdb.getTrending(
+        "movie",
+        "day",
+        searchParams.page ?? 1
+    );
+
+    return (
+        <div className="pb-16 relative">
+            <div className="ml-auto md:sticky top-[70px] md:z-50 w-fit">
+                <ChangeMediaListBtn />
+            </div>
+            <div className="py-6">
+                <p className="text-3xl font-bold capitalize">
+                    Xu hướng hôm nay
+                </p>
+            </div>
+            <div className="flex flex-row items-center justify-center pb-10">
+                <Pagination totalPages={500} href="/trending/today?" />
+            </div>
+
+            <div className="gap-8 pb-6 md:gap-4 md:pb-8 overflow-hidden md:mt-6">
+                <MediaList movie={movie} />
+            </div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/trending/week/page.tsx b/app/trending/week/page.tsx
index 8d9e145..b0a9fd8 100644
--- a/app/trending/week/page.tsx
+++ b/app/trending/week/page.tsx
@@ -1,33 +1,33 @@
-import React from "react";
-import tmdb from "@/service/TMDB";
-import { Movie } from "@/service/TMDB.type";
-import Pagination from "@/app/components/Pagination";
-import MediaList from "@/app/components/MediaList/MediaList";
-import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
-async function page({ searchParams }: { searchParams: { page: number } }) {
-    const movie: { results: Movie[] } = await tmdb.getTrending(
-        "movie",
-        "week",
-        searchParams.page ?? 1
-    );
-    return (
-        <div className="pb-16">
-            <div className="ml-auto md:sticky top-16 z-50 w-fit">
-                <ChangeMediaListBtn />
-            </div>
-            <div className="py-6">
-                <p className="text-3xl font-bold capitalize">
-                    Xu hướng tuần này
-                </p>
-            </div>
-            <div className="flex flex-row items-center justify-center pb-10">
-                <Pagination totalPages={500} href="/trending/today?" />
-            </div>
-            <div className="flex flex-row flex-wrap items-center justify-evenly gap-8 pb-6 md:gap-4 md:pb-8 overflow-hidden md:mt-6">
-                <MediaList movie={movie} />
-            </div>
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import tmdb from "@/service/TMDB";
+import { Movie } from "@/service/TMDB.type";
+import Pagination from "@/app/components/Pagination";
+import MediaList from "@/app/components/MediaList/MediaList";
+import ChangeMediaListBtn from "@/app/components/MediaList/ChangeMediaListBtn";
+async function page({ searchParams }: { searchParams: { page: number } }) {
+    const movie: { results: Movie[] } = await tmdb.getTrending(
+        "movie",
+        "week",
+        searchParams.page ?? 1
+    );
+    return (
+        <div className="pb-16">
+            <div className="ml-auto md:sticky top-16 z-50 w-fit">
+                <ChangeMediaListBtn />
+            </div>
+            <div className="py-6">
+                <p className="text-3xl font-bold capitalize">
+                    Xu hướng tuần này
+                </p>
+            </div>
+            <div className="flex flex-row items-center justify-center pb-10">
+                <Pagination totalPages={500} href="/trending/today?" />
+            </div>
+            <div className="flex flex-row flex-wrap items-center justify-evenly gap-8 pb-6 md:gap-4 md:pb-8 overflow-hidden md:mt-6">
+                <MediaList movie={movie} />
+            </div>
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/tv-show/[tvId]/cast/page.tsx b/app/tv-show/[tvId]/cast/page.tsx
index 7ca8851..682ed1e 100644
--- a/app/tv-show/[tvId]/cast/page.tsx
+++ b/app/tv-show/[tvId]/cast/page.tsx
@@ -1,36 +1,36 @@
-import React from "react";
-import { Cast } from "../page";
-import Image from "next/image";
-import tmdb from "@/service/TMDB";
-async function page({ params }: { params: any }) {
-    const getCast = async () => {
-        const respone = await fetch(
-            `https://api.themoviedb.org/3/movie/${params.tvId}/credits?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    };
-    const { cast }: Cast = await getCast();
-
-    return (
-        <div className="min-h-screen w-full px-24 grid grid-cols-1 md:grid-cols-4 gap-4 pb-96">
-            {cast.map((c) => (
-                <div key={c.id} className="">
-                    <Image
-                        src={tmdb.getImage(c.profile_path, "w500")}
-                        width={500}
-                        height={500}
-                        alt="cast"
-                        className="object-cover w-40 rounded-md"
-                        loading="lazy"
-                    />
-                    <span className="font-thin text-base-content">
-                        {c.name}
-                    </span>
-                </div>
-            ))}
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import { Cast } from "../page";
+import Image from "next/image";
+import tmdb from "@/service/TMDB";
+async function page({ params }: { params: any }) {
+    const getCast = async () => {
+        const respone = await fetch(
+            `https://api.themoviedb.org/3/movie/${params.tvId}/credits?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    };
+    const { cast }: Cast = await getCast();
+
+    return (
+        <div className="min-h-screen w-full px-24 grid grid-cols-1 md:grid-cols-4 gap-4 pb-96">
+            {cast.map((c) => (
+                <div key={c.id} className="">
+                    <Image
+                        src={tmdb.getImage(c.profile_path, "w500")}
+                        width={500}
+                        height={500}
+                        alt="cast"
+                        className="object-cover w-40 rounded-md"
+                        loading="lazy"
+                    />
+                    <span className="font-thin text-base-content">
+                        {c.name}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default page;
diff --git a/app/tv-show/[tvId]/error.tsx b/app/tv-show/[tvId]/error.tsx
index 6d7587b..e9b609d 100644
--- a/app/tv-show/[tvId]/error.tsx
+++ b/app/tv-show/[tvId]/error.tsx
@@ -1,12 +1,12 @@
-"use client";
-import React from "react";
-
-function error() {
-    return (
-        <div className="h-screen w-full bg-base-content-content justify-center items-center flex">
-            error rồi thằng ngu
-        </div>
-    );
-}
-
-export default error;
+"use client";
+import React from "react";
+
+function error() {
+    return (
+        <div className="h-screen w-full bg-base-content-content justify-center items-center flex">
+            error rồi thằng ngu
+        </div>
+    );
+}
+
+export default error;
diff --git a/app/tv-show/[tvId]/layout.tsx b/app/tv-show/[tvId]/layout.tsx
index e691cd0..9415d6e 100644
--- a/app/tv-show/[tvId]/layout.tsx
+++ b/app/tv-show/[tvId]/layout.tsx
@@ -1,115 +1,115 @@
-import { Movie } from "@/service/TMDB.type";
-import React from "react";
-import Image from "next/image";
-import MovieDetailTab from "@/app/components/MovieDetailTab";
-import WatchTrailerButton from "@/app/components/WatchTrailerButton";
-import Modal from "@/app/components/Modal";
-import tmdb from "@/service/TMDB";
-import ShadowImg from "@/app/components/ShadowImg";
-interface MovieDetailProp {
-    params: {
-        tvId: string;
-    };
-    children: React.ReactNode;
-}
-
-export const metadata = {
-    title: "Hai0z Movie",
-};
-
-async function Layout({ params, children }: MovieDetailProp) {
-    const movie: Movie = await tmdb.getMovieOrTV(+params.tvId, "tv");
-    function convertToHourMinute(minutes: number) {
-        const hours = Math.floor(minutes / 60);
-        const remainingMinutes = minutes % 60;
-        const formattedTime = `${hours}h ${remainingMinutes}m`;
-        return formattedTime;
-    }
-    return (
-        <div className="w-full flex flex-col md:rounded-tl-[20px]">
-            <div className="fixed">
-                <Image
-                    src={tmdb.getImage(movie.backdrop_path)}
-                    width={1920}
-                    height={1080}
-                    priority
-                    className="object-cover md:rounded-tl-[20px] md:h-[95vh]"
-                    alt={movie.title}
-                />
-                <ShadowImg />
-            </div>
-            <div className="w-full relative pt-[35%]">
-                <div className="flex flex-row  justify-between  relative bottom-0 md:pb-16">
-                    <div className="flex w-4/12 justify-center drop-shadow-md z-10 mb-3">
-                        <Image
-                            src={tmdb.getImage(movie.poster_path, "w500")}
-                            width={500}
-                            height={100}
-                            priority
-                            className="md:w-[350px] md:rounded-[32px] rounded-md w-28"
-                            alt={movie.title}
-                        />
-                    </div>
-                    <div className="w-8/12 z-10">
-                        <div className="flex flex-col ml-8">
-                            <p className="md:text-[4rem] font-semibold text-base-content drop-shadow-2xl">
-                                {movie.title}
-                            </p>
-                            <p className="text-base-content mt-4 text-[16px] lg:text-lg italic">
-                                {movie?.tagline}
-                            </p>
-                            <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-4 ring-primary mt-4 hidden md:block">
-                                {movie.release_date} •{" "}
-                                {convertToHourMinute(movie.runtime)}
-                            </button>
-                            <div className="md:flex flex-row gap-4 mt-4 flex-wrap hidden">
-                                {movie.genres.map((genres) => {
-                                    return (
-                                        <div
-                                            key={genres.id}
-                                            className="btn btn-secondary md:btn-md "
-                                        >
-                                            <span>{genres.name}</span>
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                            <div className="mt-16 hidden md:block">
-                                <WatchTrailerButton videoId={params.tvId} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <ShadowImg />
-            </div>
-            <div className=" w-full bg-base-200 z-10">
-                <div className="md:hidden p-4 md:p-0 z-10">
-                    <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm">
-                        {movie.release_date} •{" "}
-                        {convertToHourMinute(movie.runtime)}
-                    </button>
-                    <div className="flex flex-row gap-2 flex-wrap">
-                        {movie.genres.map((genres) => {
-                            return (
-                                <div
-                                    key={genres.id}
-                                    className="btn btn-secondary md:btn-md w-fit btn-xs"
-                                >
-                                    <span>{genres.name}</span>
-                                </div>
-                            );
-                        })}
-                    </div>
-                    <div className="mt-2">
-                        <WatchTrailerButton videoId={params.tvId} />
-                    </div>
-                </div>
-                <MovieDetailTab />
-                {children}
-            </div>
-            {/* <Modal /> */}
-        </div>
-    );
-}
-
-export default Layout;
+import { Movie } from "@/service/TMDB.type";
+import React from "react";
+import Image from "next/image";
+import MovieDetailTab from "@/app/components/MovieDetailTab";
+import WatchTrailerButton from "@/app/components/WatchTrailerButton";
+import Modal from "@/app/components/Modal";
+import tmdb from "@/service/TMDB";
+import ShadowImg from "@/app/components/ShadowImg";
+interface MovieDetailProp {
+    params: {
+        tvId: string;
+    };
+    children: React.ReactNode;
+}
+
+export const metadata = {
+    title: "Hai0z Movie",
+};
+
+async function Layout({ params, children }: MovieDetailProp) {
+    const movie: Movie = await tmdb.getMovieOrTV(+params.tvId, "tv");
+    function convertToHourMinute(minutes: number) {
+        const hours = Math.floor(minutes / 60);
+        const remainingMinutes = minutes % 60;
+        const formattedTime = `${hours}h ${remainingMinutes}m`;
+        return formattedTime;
+    }
+    return (
+        <div className="w-full flex flex-col md:rounded-tl-[20px]">
+            <div className="fixed">
+                <Image
+                    src={tmdb.getImage(movie.backdrop_path)}
+                    width={1920}
+                    height={1080}
+                    priority
+                    className="object-cover md:rounded-tl-[20px] md:h-[95vh]"
+                    alt={movie.title}
+                />
+                <ShadowImg />
+            </div>
+            <div className="w-full relative pt-[35%]">
+                <div className="flex flex-row  justify-between  relative bottom-0 md:pb-16">
+                    <div className="flex w-4/12 justify-center drop-shadow-md z-10 mb-3">
+                        <Image
+                            src={tmdb.getImage(movie.poster_path, "w500")}
+                            width={500}
+                            height={100}
+                            priority
+                            className="md:w-[350px] md:rounded-[32px] rounded-md w-28"
+                            alt={movie.title}
+                        />
+                    </div>
+                    <div className="w-8/12 z-10">
+                        <div className="flex flex-col ml-8">
+                            <p className="md:text-[4rem] font-semibold text-base-content drop-shadow-2xl">
+                                {movie.title}
+                            </p>
+                            <p className="text-base-content mt-4 text-[16px] lg:text-lg italic">
+                                {movie?.tagline}
+                            </p>
+                            <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-4 ring-primary mt-4 hidden md:block">
+                                {movie.release_date} •{" "}
+                                {convertToHourMinute(movie.runtime)}
+                            </button>
+                            <div className="md:flex flex-row gap-4 mt-4 flex-wrap hidden">
+                                {movie.genres.map((genres) => {
+                                    return (
+                                        <div
+                                            key={genres.id}
+                                            className="btn btn-secondary md:btn-md "
+                                        >
+                                            <span>{genres.name}</span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                            <div className="mt-16 hidden md:block">
+                                <WatchTrailerButton videoId={params.tvId} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <ShadowImg />
+            </div>
+            <div className=" w-full bg-base-200 z-10">
+                <div className="md:hidden p-4 md:p-0 z-10">
+                    <button className="btn btn-secondary w-fit md:btn-md  rounded-full  ring-2 ring-primary my-2 btn-sm">
+                        {movie.release_date} •{" "}
+                        {convertToHourMinute(movie.runtime)}
+                    </button>
+                    <div className="flex flex-row gap-2 flex-wrap">
+                        {movie.genres.map((genres) => {
+                            return (
+                                <div
+                                    key={genres.id}
+                                    className="btn btn-secondary md:btn-md w-fit btn-xs"
+                                >
+                                    <span>{genres.name}</span>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className="mt-2">
+                        <WatchTrailerButton videoId={params.tvId} />
+                    </div>
+                </div>
+                <MovieDetailTab />
+                {children}
+            </div>
+            {/* <Modal /> */}
+        </div>
+    );
+}
+
+export default Layout;
diff --git a/app/tv-show/[tvId]/loading.tsx b/app/tv-show/[tvId]/loading.tsx
index c8462da..0cfff64 100644
--- a/app/tv-show/[tvId]/loading.tsx
+++ b/app/tv-show/[tvId]/loading.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import Image from "next/image";
-function Loading() {
-    return (
-        <div className="h-screen w-full bg-base-300 flex justify-center items-center flex-col">
-            <Image
-                src={
-                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
-                }
-                alt="logo"
-                width={64}
-                height={64}
-                className="w-16 h-16 md:w-24 md:h-24"
-            />
-            <progress className="progress w-56 progress-primary"></progress>
-        </div>
-    );
-}
-
-export default Loading;
+import React from "react";
+import Image from "next/image";
+function Loading() {
+    return (
+        <div className="h-screen w-full bg-base-300 flex justify-center items-center flex-col">
+            <Image
+                src={
+                    "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+                }
+                alt="logo"
+                width={64}
+                height={64}
+                className="w-16 h-16 md:w-24 md:h-24"
+            />
+            <progress className="progress w-56 progress-primary"></progress>
+        </div>
+    );
+}
+
+export default Loading;
diff --git a/app/tv-show/[tvId]/page.tsx b/app/tv-show/[tvId]/page.tsx
index cf17090..3be955f 100644
--- a/app/tv-show/[tvId]/page.tsx
+++ b/app/tv-show/[tvId]/page.tsx
@@ -1,147 +1,147 @@
-import React from "react";
-import Image from "next/image";
-import { Movie, MovieList } from "@/service/TMDB.type";
-import Link from "next/link";
-import MovieCard from "@/app/components/MovieCard";
-import tmdb from "@/service/TMDB";
-export interface Cast {
-    cast: {
-        id: number;
-        profile_path: string;
-        name: string;
-    }[];
-}
-async function Page({
-    params,
-}: {
-    params: {
-        tvId: number;
-    };
-}) {
-    const movie: Movie = await tmdb.getMovieOrTV(params.tvId, "tv");
-    const { cast }: Cast = await tmdb.getCast(params.tvId, "tv");
-    const { results: listRecommendations }: MovieList =
-        await tmdb.getRecomendations(params.tvId, "tv");
-    return (
-        <div className="md:mx-24 flex flex-col md:flex-row h-full px-2 md:px-0 gap-2 md:mt-20 mt-8">
-            <div className="md:w-5/12 lg:w-3/12 flex w-full gap-4">
-                <div className=" bg-base-300 shadow-lg p-4 rounded-lg space-y-4 md:max-w-[75%] h-fit w-full flex flex-col">
-                    <div className="grid grid-cols-2 md:flex-col  md:flex">
-                        <p className="font-bold">Original Title</p>
-                        <p className="font-mono font-extralight">
-                            {movie.original_title}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 md:flex-col md:flex">
-                        <p className="font-bold">Status</p>
-                        <p className="font-mono font-extralight">
-                            {movie.status}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 md:flex-col md:flex">
-                        <p className="font-bold">Production Companies</p>
-                        <div>
-                            {movie.production_companies.map((company) => (
-                                <p
-                                    className="font-mono font-extralight"
-                                    key={company.name}
-                                >
-                                    {company.name}
-                                </p>
-                            ))}
-                        </div>
-                    </div>
-                    <div className="grid grid-cols-2 md:flex-col md:flex">
-                        <p className="font-bold">Budget</p>
-                        <p className="font-mono font-extralight">
-                            {movie.budget.toLocaleString("en-US", {
-                                style: "currency",
-                                currency: "USD",
-                            })}
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-2 md:flex-col md:flex">
-                        <p className="font-bold">Revenue</p>
-                        <p className="font-mono font-extralight">
-                            {movie.revenue.toLocaleString("en-US", {
-                                style: "currency",
-                                currency: "USD",
-                            })}
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div className="flex flex-col md:w-7/12 lg:w-9/12 w-full">
-                <div className="bg-base-300 shadow-lg p-6 rounded-md space-y-3">
-                    <p> {movie.overview}</p>
-                    <div className="flex flex-row gap-4">
-                        <div>
-                            <p className="font-bold">Production Countries</p>
-                            {movie.production_countries.map((country) => (
-                                <p key={country.name}>{country.name}</p>
-                            ))}
-                        </div>
-                        <div>
-                            Spoken Languages
-                            {movie.spoken_languages.map((l) => (
-                                <p key={l.name}>{l.name}</p>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <p className="md:text-3xl  text-base-content pt-4">
-                        Top Diễn Viên
-                    </p>
-                    <Link
-                        href={`tv-show/${params.tvId}/cast`}
-                        className="btn btn-primary btn-outline w-40 my-4"
-                    >
-                        Xem Thêm
-                    </Link>
-                    <div className="flex flex-row gap-4">
-                        {cast?.slice(0, 5).map((cast) => (
-                            <div
-                                key={cast.id}
-                                className="text-white cursor-pointer"
-                            >
-                                <Image
-                                    src={tmdb.getImage(
-                                        cast.profile_path,
-                                        "w500"
-                                    )}
-                                    width={500}
-                                    height={500}
-                                    alt="cast"
-                                    className="object-cover w-32"
-                                />
-                                <span className="font-thin text-base-content">
-                                    {cast.name}
-                                </span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-                <div>
-                    <p className="md:text-3xl  text-base-content pt-4">
-                        Phim Đề Xuất
-                    </p>
-                    <Link
-                        href={`movie/${params.tvId}/recommendations`}
-                        className="btn btn-primary btn-outline w-40 my-4"
-                    >
-                        Xem Thêm
-                    </Link>
-                    <div className="flex flex-row gap-4">
-                        {listRecommendations?.slice(0, 3).map((r: any) => (
-                            <MovieCard m={r} key={r.id} />
-                        ))}
-                    </div>
-                </div>
-                <div className="h-screen"></div>
-            </div>
-        </div>
-    );
-}
-
-export default Page;
+import React from "react";
+import Image from "next/image";
+import { Movie, MovieList } from "@/service/TMDB.type";
+import Link from "next/link";
+import MovieCard from "@/app/components/MovieCard";
+import tmdb from "@/service/TMDB";
+export interface Cast {
+    cast: {
+        id: number;
+        profile_path: string;
+        name: string;
+    }[];
+}
+async function Page({
+    params,
+}: {
+    params: {
+        tvId: number;
+    };
+}) {
+    const movie: Movie = await tmdb.getMovieOrTV(params.tvId, "tv");
+    const { cast }: Cast = await tmdb.getCast(params.tvId, "tv");
+    const { results: listRecommendations }: MovieList =
+        await tmdb.getRecomendations(params.tvId, "tv");
+    return (
+        <div className="md:mx-24 flex flex-col md:flex-row h-full px-2 md:px-0 gap-2 md:mt-20 mt-8">
+            <div className="md:w-5/12 lg:w-3/12 flex w-full gap-4">
+                <div className=" bg-base-300 shadow-lg p-4 rounded-lg space-y-4 md:max-w-[75%] h-fit w-full flex flex-col">
+                    <div className="grid grid-cols-2 md:flex-col  md:flex">
+                        <p className="font-bold">Original Title</p>
+                        <p className="font-mono font-extralight">
+                            {movie.original_title}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 md:flex-col md:flex">
+                        <p className="font-bold">Status</p>
+                        <p className="font-mono font-extralight">
+                            {movie.status}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 md:flex-col md:flex">
+                        <p className="font-bold">Production Companies</p>
+                        <div>
+                            {movie.production_companies.map((company) => (
+                                <p
+                                    className="font-mono font-extralight"
+                                    key={company.name}
+                                >
+                                    {company.name}
+                                </p>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="grid grid-cols-2 md:flex-col md:flex">
+                        <p className="font-bold">Budget</p>
+                        <p className="font-mono font-extralight">
+                            {movie.budget.toLocaleString("en-US", {
+                                style: "currency",
+                                currency: "USD",
+                            })}
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 md:flex-col md:flex">
+                        <p className="font-bold">Revenue</p>
+                        <p className="font-mono font-extralight">
+                            {movie.revenue.toLocaleString("en-US", {
+                                style: "currency",
+                                currency: "USD",
+                            })}
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col md:w-7/12 lg:w-9/12 w-full">
+                <div className="bg-base-300 shadow-lg p-6 rounded-md space-y-3">
+                    <p> {movie.overview}</p>
+                    <div className="flex flex-row gap-4">
+                        <div>
+                            <p className="font-bold">Production Countries</p>
+                            {movie.production_countries.map((country) => (
+                                <p key={country.name}>{country.name}</p>
+                            ))}
+                        </div>
+                        <div>
+                            Spoken Languages
+                            {movie.spoken_languages.map((l) => (
+                                <p key={l.name}>{l.name}</p>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <p className="md:text-3xl  text-base-content pt-4">
+                        Top Diễn Viên
+                    </p>
+                    <Link
+                        href={`tv-show/${params.tvId}/cast`}
+                        className="btn btn-primary btn-outline w-40 my-4"
+                    >
+                        Xem Thêm
+                    </Link>
+                    <div className="flex flex-row gap-4">
+                        {cast?.slice(0, 5).map((cast) => (
+                            <div
+                                key={cast.id}
+                                className="text-white cursor-pointer"
+                            >
+                                <Image
+                                    src={tmdb.getImage(
+                                        cast.profile_path,
+                                        "w500"
+                                    )}
+                                    width={500}
+                                    height={500}
+                                    alt="cast"
+                                    className="object-cover w-32"
+                                />
+                                <span className="font-thin text-base-content">
+                                    {cast.name}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div>
+                    <p className="md:text-3xl  text-base-content pt-4">
+                        Phim Đề Xuất
+                    </p>
+                    <Link
+                        href={`movie/${params.tvId}/recommendations`}
+                        className="btn btn-primary btn-outline w-40 my-4"
+                    >
+                        Xem Thêm
+                    </Link>
+                    <div className="flex flex-row gap-4">
+                        {listRecommendations?.slice(0, 3).map((r: any) => (
+                            <MovieCard m={r} key={r.id} />
+                        ))}
+                    </div>
+                </div>
+                <div className="h-screen"></div>
+            </div>
+        </div>
+    );
+}
+
+export default Page;
diff --git a/app/tv-show/[tvId]/recommendations/page.tsx b/app/tv-show/[tvId]/recommendations/page.tsx
index 36f868d..73b4cb2 100644
--- a/app/tv-show/[tvId]/recommendations/page.tsx
+++ b/app/tv-show/[tvId]/recommendations/page.tsx
@@ -1,37 +1,37 @@
-import React from "react";
-import Image from "next/image";
-import { MovieList } from "@/service/TMDB.type";
-import Link from "next/link";
-import tmdb from "@/service/TMDB";
-async function page({ params }: { params: any }) {
-    const { results: listRecommendations }: MovieList =
-        await tmdb.getRecomendations(params.tvId, "movie");
-
-    return (
-        <div className="min-h-screen w-full md:px-24 grid grid-cols-2 md:grid-cols-4 gap-8 px-16">
-            {listRecommendations.map((l) => (
-                <div
-                    key={l.id}
-                    className="cursor-pointer md:w-64 bg-base-100 rounded-lg hover:ring-2 ring-primary"
-                >
-                    <div className="overflow-hidden rounded-lg flex-1">
-                        <Link href={"/movie/" + l.id + "#top"}>
-                            <Image
-                                src={tmdb.getImage(l.poster_path, "w500")}
-                                width={500}
-                                height={500}
-                                alt="cast"
-                                className="object-cover md:w-64 rounded-md hover:scale-110 hover:rounded-lg transition-all duration-150 group "
-                            />
-                        </Link>
-                    </div>
-                    <div className="font-semibold text-base-content py-4 flex-1 px-2">
-                        {l.title}
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-}
-
-export default page;
+import React from "react";
+import Image from "next/image";
+import { MovieList } from "@/service/TMDB.type";
+import Link from "next/link";
+import tmdb from "@/service/TMDB";
+async function page({ params }: { params: any }) {
+    const { results: listRecommendations }: MovieList =
+        await tmdb.getRecomendations(params.tvId, "movie");
+
+    return (
+        <div className="min-h-screen w-full md:px-24 grid grid-cols-2 md:grid-cols-4 gap-8 px-16">
+            {listRecommendations.map((l) => (
+                <div
+                    key={l.id}
+                    className="cursor-pointer md:w-64 bg-base-100 rounded-lg hover:ring-2 ring-primary"
+                >
+                    <div className="overflow-hidden rounded-lg flex-1">
+                        <Link href={"/movie/" + l.id + "#top"}>
+                            <Image
+                                src={tmdb.getImage(l.poster_path, "w500")}
+                                width={500}
+                                height={500}
+                                alt="cast"
+                                className="object-cover md:w-64 rounded-md hover:scale-110 hover:rounded-lg transition-all duration-150 group "
+                            />
+                        </Link>
+                    </div>
+                    <div className="font-semibold text-base-content py-4 flex-1 px-2">
+                        {l.title}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default page;
diff --git a/context/AppProvider.tsx b/context/AppProvider.tsx
index 51c22ec..758912d 100644
--- a/context/AppProvider.tsx
+++ b/context/AppProvider.tsx
@@ -1,56 +1,56 @@
-import React, { createContext, useState, useEffect } from "react";
-import Image from "next/image";
-import { motion } from "framer-motion";
-import useStore from "@/app/(store)/store";
-interface IAppContext {}
-interface IProps {
-    children: React.ReactNode;
-}
-export const AppContext = createContext({});
-function AppProvider({ children }: IProps) {
-    const [loading, setLoading] = useState(true);
-    const setTheme = useStore((state) => state.setTheme);
-
-    useEffect(() => {
-        const currentTheme = localStorage.getItem("theme");
-        if (currentTheme) {
-            setTheme(currentTheme as string);
-            document
-                .getElementById("html")
-                ?.setAttribute("data-theme", currentTheme);
-        }
-        setTimeout(() => setLoading(false), 2000);
-    }, [setTheme]);
-    return (
-        <AppContext.Provider value={{}}>
-            {loading ? (
-                <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.7, delay: 0.5 }}
-                    className="h-screen w-full flex justify-center items-center flex-col bg-base-100"
-                >
-                    <div className="flex gap-4 items-center">
-                        <Image
-                            src={
-                                "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
-                            }
-                            alt="logo"
-                            width={64}
-                            height={64}
-                            className="h-20 w-20"
-                        />
-                        <span className="text-gradient font-bold text-4xl">
-                            The Movies
-                        </span>
-                    </div>
-                    <span className="loading loading-dots text-primary"></span>
-                </motion.div>
-            ) : (
-                children
-            )}
-        </AppContext.Provider>
-    );
-}
-
-export default AppProvider;
+import React, { createContext, useState, useEffect } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import useStore from "@/app/(store)/store";
+interface IAppContext {}
+interface IProps {
+    children: React.ReactNode;
+}
+export const AppContext = createContext({});
+function AppProvider({ children }: IProps) {
+    const [loading, setLoading] = useState(true);
+    const setTheme = useStore((state) => state.setTheme);
+
+    useEffect(() => {
+        const currentTheme = localStorage.getItem("theme");
+        if (currentTheme) {
+            setTheme(currentTheme as string);
+            document
+                .getElementById("html")
+                ?.setAttribute("data-theme", currentTheme);
+        }
+        setTimeout(() => setLoading(false), 2000);
+    }, [setTheme]);
+    return (
+        <AppContext.Provider value={{}}>
+            {loading ? (
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.7, delay: 0.5 }}
+                    className="h-screen w-full flex justify-center items-center flex-col bg-base-100"
+                >
+                    <div className="flex gap-4 items-center">
+                        <Image
+                            src={
+                                "//www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+                            }
+                            alt="logo"
+                            width={64}
+                            height={64}
+                            className="h-20 w-20"
+                        />
+                        <span className="text-gradient font-bold text-4xl">
+                            The Movies
+                        </span>
+                    </div>
+                    <span className="loading loading-dots text-primary"></span>
+                </motion.div>
+            ) : (
+                children
+            )}
+        </AppContext.Provider>
+    );
+}
+
+export default AppProvider;
diff --git a/hooks/useWindowDemensions.tsx b/hooks/useWindowDemensions.tsx
index 3340a56..aebd5e5 100644
--- a/hooks/useWindowDemensions.tsx
+++ b/hooks/useWindowDemensions.tsx
@@ -1,42 +1,42 @@
-import useStore from "@/app/(store)/store";
-import { useState, useEffect } from "react";
-function getWindowDimensions() {
-    if (typeof window !== "undefined") {
-        const { innerWidth: width, innerHeight: height } = window;
-        return {
-            width,
-            height,
-        };
-    }
-    return {
-        width: 0,
-        height: 0,
-    };
-}
-
-function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = useState(
-        {} as { width: number; height: number }
-    );
-
-    useEffect(() => {
-        setWindowDimensions({
-            width: window.innerWidth,
-            height: window.innerHeight,
-        });
-    }, []);
-
-    useEffect(() => {
-        function handleResize() {
-            setWindowDimensions(getWindowDimensions());
-        }
-        if (typeof window !== "undefined") {
-            window.addEventListener("resize", handleResize);
-
-            return () => window.removeEventListener("resize", handleResize);
-        }
-    }, []);
-
-    return windowDimensions;
-}
-export default useWindowDimensions;
+import useStore from "@/app/(store)/store";
+import { useState, useEffect } from "react";
+function getWindowDimensions() {
+    if (typeof window !== "undefined") {
+        const { innerWidth: width, innerHeight: height } = window;
+        return {
+            width,
+            height,
+        };
+    }
+    return {
+        width: 0,
+        height: 0,
+    };
+}
+
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(
+        {} as { width: number; height: number }
+    );
+
+    useEffect(() => {
+        setWindowDimensions({
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+    }, []);
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", handleResize);
+
+            return () => window.removeEventListener("resize", handleResize);
+        }
+    }, []);
+
+    return windowDimensions;
+}
+export default useWindowDimensions;
diff --git a/lib/prisma/index.ts b/lib/prisma/index.ts
index b5bf6ce..fd52199 100644
--- a/lib/prisma/index.ts
+++ b/lib/prisma/index.ts
@@ -1,5 +1,5 @@
-import { PrismaClient } from "@prisma/client";
-
-const prisma = new PrismaClient();
-
-export default prisma;
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export default prisma;
diff --git a/lib/prisma/task.ts b/lib/prisma/task.ts
index cde68de..db4d193 100644
--- a/lib/prisma/task.ts
+++ b/lib/prisma/task.ts
@@ -1,21 +1,21 @@
-"use server";
-import prisma from ".";
-import { revalidatePath } from "next/cache";
-
-export const getAllTask = async () => {
-    const task = await prisma.task.findMany({});
-    return task;
-};
-// export const createTask = async (task: Task) => {
-//     await prisma.task.create({
-//         data: task,
-//     });
-// };
-// export const deleteTask = async (id: string | undefined) => {
-//     await prisma.task.delete({
-//         where: {
-//             id,
-//         },
-//     });
-//     revalidatePath("/");
-// };
+"use server";
+import prisma from ".";
+import { revalidatePath } from "next/cache";
+
+export const getAllTask = async () => {
+    const task = await prisma.task.findMany({});
+    return task;
+};
+// export const createTask = async (task: Task) => {
+//     await prisma.task.create({
+//         data: task,
+//     });
+// };
+// export const deleteTask = async (id: string | undefined) => {
+//     await prisma.task.delete({
+//         where: {
+//             id,
+//         },
+//     });
+//     revalidatePath("/");
+// };
diff --git a/package.json b/package.json
index 0222052..9a7164a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev --turbo",
+        "dev": "next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint"
diff --git a/service/TMDB.ts b/service/TMDB.ts
index 5eb108a..ec0fbcf 100644
--- a/service/TMDB.ts
+++ b/service/TMDB.ts
@@ -1,141 +1,141 @@
-import { MovieCredits, People, Photo } from "./TMDB.type";
-
-class TMDB {
-    private readonly IMG_PATH: string = "https://image.tmdb.org/t/p/" as const;
-    private readonly BASE_URL: string = "https://api.themoviedb.org/3" as const;
-
-    getImage(path: string, size?: "w300" | "w500") {
-        if (size) {
-            return `${this.IMG_PATH}/${size}/${path}`;
-        } else {
-            return `${this.IMG_PATH}/original/${path}`;
-        }
-    }
-    async getMovieOrTV(id: number, type: "movie" | "tv") {
-        const respone = await fetch(
-            `https://api.themoviedb.org/3/${type}/${id}?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-
-        return data;
-    }
-    async getTrending(
-        type: "movie" | "tv" | "person",
-        timeWindow: "day" | "week",
-        page?: number
-    ) {
-        if (page) {
-            const respone = await fetch(
-                `${this.BASE_URL}/trending/${type}/${timeWindow}?api_key=${process.env.TMDB}&page=${page}&language=vi-VN`
-            );
-            const data = await respone.json();
-            return data;
-        } else {
-            const respone = await fetch(
-                `${this.BASE_URL}/trending/${type}/${timeWindow}?api_key=${process.env.TMDB}&language=vi-VN`
-            );
-            const data = await respone.json();
-            return data;
-        }
-    }
-
-    async getTopRate(type: "movie" | "tv" | "person") {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/top_rated?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getPopular(type: "movie" | "tv" | "person") {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/popular?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getCast(id: number, type: "movie" | "tv") {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/${id}/credits?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getRecomendations(id: number, type: "movie" | "tv") {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/${id}/recommendations?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-
-        return data;
-    }
-    async search(
-        query: string,
-        type: "movie" | "tv" | "person",
-        page?: number
-    ) {
-        const respone = await fetch(
-            `${this.BASE_URL}/search/${type}?api_key=${
-                process.env.TMDB
-            }&query=${query}&language=vi-VN&page=${page ?? 1}`
-        );
-        const data = await respone.json();
-
-        return data;
-    }
-    async getListGenres(type: "movie" | "tv") {
-        const respone = await fetch(
-            `${this.BASE_URL}/genre/${type}/list?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async discover(type: "movie" | "tv", genres?: number, page?: number) {
-        let url = `${this.BASE_URL}/discover/${type}?api_key=${process.env.TMDB}&language=vi-VN`;
-        if (genres) {
-            url += `&with_genres=${genres}`;
-        }
-        if (page) {
-            url += `&page=${page}`;
-        }
-        const respone = await fetch(url);
-        const data = await respone.json();
-        return data;
-    }
-    async getPhotos(type: "movie" | "tv", id: number) {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/${id}/images?api_key=${process.env.TMDB}`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getVideos(type: "movie" | "tv", id: number) {
-        const respone = await fetch(
-            `${this.BASE_URL}/${type}/${id}/videos?api_key=${process.env.TMDB}`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getPeople(id: number): Promise<People> {
-        const respone = await fetch(
-            `${this.BASE_URL}/person/${id}?api_key=${process.env.TMDB}`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getMovieCredits(id: number): Promise<{ cast: MovieCredits[] }> {
-        const respone = await fetch(
-            `${this.BASE_URL}/person/${id}/movie_credits?api_key=${process.env.TMDB}&language=vi-VN`
-        );
-        const data = await respone.json();
-        return data;
-    }
-    async getPeoplePhotos(id: number): Promise<{ profiles: Photo[] }> {
-        const respone = await fetch(
-            `${this.BASE_URL}/person/${id}/images?api_key=${process.env.TMDB}`
-        );
-        const data = await respone.json();
-        return data;
-    }
-}
-const tmdb = new TMDB();
-export default tmdb;
+import { MovieCredits, People, Photo } from "./TMDB.type";
+
+class TMDB {
+    private readonly IMG_PATH: string = "https://image.tmdb.org/t/p/" as const;
+    private readonly BASE_URL: string = "https://api.themoviedb.org/3" as const;
+
+    getImage(path: string, size?: "w300" | "w500") {
+        if (size) {
+            return `${this.IMG_PATH}/${size}/${path}`;
+        } else {
+            return `${this.IMG_PATH}/original/${path}`;
+        }
+    }
+    async getMovieOrTV(id: number, type: "movie" | "tv") {
+        const respone = await fetch(
+            `https://api.themoviedb.org/3/${type}/${id}?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+
+        return data;
+    }
+    async getTrending(
+        type: "movie" | "tv" | "person",
+        timeWindow: "day" | "week",
+        page?: number
+    ) {
+        if (page) {
+            const respone = await fetch(
+                `${this.BASE_URL}/trending/${type}/${timeWindow}?api_key=${process.env.TMDB}&page=${page}&language=vi-VN`
+            );
+            const data = await respone.json();
+            return data;
+        } else {
+            const respone = await fetch(
+                `${this.BASE_URL}/trending/${type}/${timeWindow}?api_key=${process.env.TMDB}&language=vi-VN`
+            );
+            const data = await respone.json();
+            return data;
+        }
+    }
+
+    async getTopRate(type: "movie" | "tv" | "person") {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/top_rated?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getPopular(type: "movie" | "tv" | "person") {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/popular?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getCast(id: number, type: "movie" | "tv") {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/${id}/credits?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getRecomendations(id: number, type: "movie" | "tv") {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/${id}/recommendations?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+
+        return data;
+    }
+    async search(
+        query: string,
+        type: "movie" | "tv" | "person",
+        page?: number
+    ) {
+        const respone = await fetch(
+            `${this.BASE_URL}/search/${type}?api_key=${
+                process.env.TMDB
+            }&query=${query}&language=vi-VN&page=${page ?? 1}`
+        );
+        const data = await respone.json();
+
+        return data;
+    }
+    async getListGenres(type: "movie" | "tv") {
+        const respone = await fetch(
+            `${this.BASE_URL}/genre/${type}/list?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async discover(type: "movie" | "tv", genres?: number, page?: number) {
+        let url = `${this.BASE_URL}/discover/${type}?api_key=${process.env.TMDB}&language=vi-VN`;
+        if (genres) {
+            url += `&with_genres=${genres}`;
+        }
+        if (page) {
+            url += `&page=${page}`;
+        }
+        const respone = await fetch(url);
+        const data = await respone.json();
+        return data;
+    }
+    async getPhotos(type: "movie" | "tv", id: number) {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/${id}/images?api_key=${process.env.TMDB}`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getVideos(type: "movie" | "tv", id: number) {
+        const respone = await fetch(
+            `${this.BASE_URL}/${type}/${id}/videos?api_key=${process.env.TMDB}`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getPeople(id: number): Promise<People> {
+        const respone = await fetch(
+            `${this.BASE_URL}/person/${id}?api_key=${process.env.TMDB}`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getMovieCredits(id: number): Promise<{ cast: MovieCredits[] }> {
+        const respone = await fetch(
+            `${this.BASE_URL}/person/${id}/movie_credits?api_key=${process.env.TMDB}&language=vi-VN`
+        );
+        const data = await respone.json();
+        return data;
+    }
+    async getPeoplePhotos(id: number): Promise<{ profiles: Photo[] }> {
+        const respone = await fetch(
+            `${this.BASE_URL}/person/${id}/images?api_key=${process.env.TMDB}`
+        );
+        const data = await respone.json();
+        return data;
+    }
+}
+const tmdb = new TMDB();
+export default tmdb;
diff --git a/service/TMDB.type.ts b/service/TMDB.type.ts
index faf0602..0fa59ca 100644
--- a/service/TMDB.type.ts
+++ b/service/TMDB.type.ts
@@ -1,176 +1,176 @@
-export interface TrendingMovie {
-    adult: boolean;
-    backdrop_path: string;
-    id: number;
-    title: string;
-    original_language: string;
-    original_title: string;
-    overview: string;
-    poster_path: string;
-    media_type: string;
-    genre_ids: number[];
-    popularity: number;
-    release_date: string;
-    video: boolean;
-    vote_average: number;
-    vote_count: number;
-}
-export interface Movie {
-    adult: boolean;
-    backdrop_path: string;
-    belongs_to_collection: Belongstocollection;
-    budget: number;
-    genres: Genre[];
-    homepage: string;
-    id: number;
-    imdb_id: string;
-    name: string;
-    original_language: string;
-    original_title: string;
-    overview: string;
-    popularity: number;
-    poster_path: string;
-    production_companies: Productioncompany[];
-    production_countries: Productioncountry[];
-    release_date: string;
-    revenue: number;
-    runtime: number;
-    spoken_languages: Spokenlanguage[];
-    status: string;
-    tagline: string;
-    title: string;
-    video: boolean;
-    vote_average: number;
-    vote_count: number;
-}
-export interface MovieCredits {
-    adult: boolean;
-    backdrop_path: string;
-    genre_ids: number[];
-    id: number;
-    original_language: string;
-    original_title: string;
-    overview: string;
-    popularity: number;
-    poster_path: string;
-    release_date: string;
-    title: string;
-    video: boolean;
-    vote_average: number;
-    vote_count: number;
-    character: string;
-    credit_id: string;
-    order: number;
-}
-interface Spokenlanguage {
-    english_name: string;
-    iso_639_1: string;
-    name: string;
-}
-
-interface Productioncountry {
-    iso_3166_1: string;
-    name: string;
-}
-
-interface Productioncompany {
-    id: number;
-    logo_path?: string;
-    name: string;
-    origin_country: string;
-}
-
-export interface Genre {
-    id: number;
-    name: string;
-}
-
-interface Belongstocollection {
-    id: number;
-    name: string;
-    poster_path: string;
-    backdrop_path: string;
-}
-
-export interface TVShow {}
-
-export interface Photo {
-    aspect_ratio: number;
-    height: number;
-    iso_639_1: string;
-    file_path: string;
-    vote_average: number;
-    vote_count: number;
-    width: number;
-}
-export interface ListPhotos {
-    backdrops: Photo[];
-    logos: Photo[];
-    posters: Photo[];
-}
-
-export enum videoTypes {
-    Clip = "Clip",
-    Featurette = "Featurette",
-    BehindTheScenes = "Behind the Scenes",
-    Teaser = "Teaser",
-    Trailer = "Trailer",
-}
-export interface Videos {
-    iso_639_1: string;
-    iso_3166_1: string;
-    name: string;
-    key: string;
-    site: string;
-    size: number;
-    type: videoTypes;
-    official: true;
-    published_at: Date;
-    id: string;
-}
-
-export interface TrendingPeople {
-    adult: boolean;
-    id: number;
-    name: string;
-    original_name: string;
-    media_type: string;
-    popularity: number;
-    gender: number;
-    known_for_department: string;
-    profile_path: string;
-    known_for: Knownfor[];
-}
-export interface People {
-    adult: boolean;
-    also_known_as: string[];
-    biography: string;
-    birthday: string;
-    deathday?: any;
-    gender: number;
-    homepage: string;
-    id: number;
-    imdb_id: string;
-    known_for_department: string;
-    name: string;
-    place_of_birth: string;
-    popularity: number;
-    profile_path: string;
-}
-interface Knownfor {
-    adult: boolean;
-    backdrop_path: string;
-    id: number;
-    title: string;
-    original_language: string;
-    original_title: string;
-    overview: string;
-    poster_path: string;
-    media_type: string;
-    genre_ids: number[];
-    popularity: number;
-    release_date: string;
-    video: boolean;
-    vote_average: number;
-    vote_count: number;
-}
+export interface TrendingMovie {
+    adult: boolean;
+    backdrop_path: string;
+    id: number;
+    title: string;
+    original_language: string;
+    original_title: string;
+    overview: string;
+    poster_path: string;
+    media_type: string;
+    genre_ids: number[];
+    popularity: number;
+    release_date: string;
+    video: boolean;
+    vote_average: number;
+    vote_count: number;
+}
+export interface Movie {
+    adult: boolean;
+    backdrop_path: string;
+    belongs_to_collection: Belongstocollection;
+    budget: number;
+    genres: Genre[];
+    homepage: string;
+    id: number;
+    imdb_id: string;
+    name: string;
+    original_language: string;
+    original_title: string;
+    overview: string;
+    popularity: number;
+    poster_path: string;
+    production_companies: Productioncompany[];
+    production_countries: Productioncountry[];
+    release_date: string;
+    revenue: number;
+    runtime: number;
+    spoken_languages: Spokenlanguage[];
+    status: string;
+    tagline: string;
+    title: string;
+    video: boolean;
+    vote_average: number;
+    vote_count: number;
+}
+export interface MovieCredits {
+    adult: boolean;
+    backdrop_path: string;
+    genre_ids: number[];
+    id: number;
+    original_language: string;
+    original_title: string;
+    overview: string;
+    popularity: number;
+    poster_path: string;
+    release_date: string;
+    title: string;
+    video: boolean;
+    vote_average: number;
+    vote_count: number;
+    character: string;
+    credit_id: string;
+    order: number;
+}
+interface Spokenlanguage {
+    english_name: string;
+    iso_639_1: string;
+    name: string;
+}
+
+interface Productioncountry {
+    iso_3166_1: string;
+    name: string;
+}
+
+interface Productioncompany {
+    id: number;
+    logo_path?: string;
+    name: string;
+    origin_country: string;
+}
+
+export interface Genre {
+    id: number;
+    name: string;
+}
+
+interface Belongstocollection {
+    id: number;
+    name: string;
+    poster_path: string;
+    backdrop_path: string;
+}
+
+export interface TVShow {}
+
+export interface Photo {
+    aspect_ratio: number;
+    height: number;
+    iso_639_1: string;
+    file_path: string;
+    vote_average: number;
+    vote_count: number;
+    width: number;
+}
+export interface ListPhotos {
+    backdrops: Photo[];
+    logos: Photo[];
+    posters: Photo[];
+}
+
+export enum videoTypes {
+    Clip = "Clip",
+    Featurette = "Featurette",
+    BehindTheScenes = "Behind the Scenes",
+    Teaser = "Teaser",
+    Trailer = "Trailer",
+}
+export interface Videos {
+    iso_639_1: string;
+    iso_3166_1: string;
+    name: string;
+    key: string;
+    site: string;
+    size: number;
+    type: videoTypes;
+    official: true;
+    published_at: Date;
+    id: string;
+}
+
+export interface TrendingPeople {
+    adult: boolean;
+    id: number;
+    name: string;
+    original_name: string;
+    media_type: string;
+    popularity: number;
+    gender: number;
+    known_for_department: string;
+    profile_path: string;
+    known_for: Knownfor[];
+}
+export interface People {
+    adult: boolean;
+    also_known_as: string[];
+    biography: string;
+    birthday: string;
+    deathday?: any;
+    gender: number;
+    homepage: string;
+    id: number;
+    imdb_id: string;
+    known_for_department: string;
+    name: string;
+    place_of_birth: string;
+    popularity: number;
+    profile_path: string;
+}
+interface Knownfor {
+    adult: boolean;
+    backdrop_path: string;
+    id: number;
+    title: string;
+    original_language: string;
+    original_title: string;
+    overview: string;
+    poster_path: string;
+    media_type: string;
+    genre_ids: number[];
+    popularity: number;
+    release_date: string;
+    video: boolean;
+    vote_average: number;
+    vote_count: number;
+}