diff --git a/api/queries.ts b/api/queries.ts
index 234f65a..23a23a3 100644
--- a/api/queries.ts
+++ b/api/queries.ts
@@ -330,3 +330,22 @@ export const getNextQuizWinnners = async (
     console.log(err);
   }
 };
+
+export const getPlaylistById = async (id: string) => {
+  try {
+    const res = await fetch(
+      `${baseUrl.MATERIALS_SRC}${routes.videos(
+        `?per_page=8&page=1&category_id=${id}`
+      )}`,
+      {
+        next: { revalidate: 3600 },
+      }
+    );
+
+    const result = await res.json();
+
+    return result;
+  } catch (err) {
+    console.log(err);
+  }
+};
diff --git a/app/(main)/playlist/[id]/page.tsx b/app/(main)/playlist/[id]/page.tsx
new file mode 100644
index 0000000..d998680
--- /dev/null
+++ b/app/(main)/playlist/[id]/page.tsx
@@ -0,0 +1,24 @@
+import { getPlaylistById } from "@/api/queries";
+import PlaylistVideos from "@/components/playlist";
+
+interface IParams {
+  params: {
+    id: string;
+  };
+}
+
+const Page = async ({ params }: IParams) => {
+  const { id } = await params;
+
+  const videos = await getPlaylistById(id);
+
+  return (
+    <div className="video-item mt-6">
+      <div className="container">
+        <PlaylistVideos id={id} data={videos} />
+      </div>
+    </div>
+  );
+};
+
+export default Page;
diff --git a/components/playlist/index.tsx b/components/playlist/index.tsx
new file mode 100644
index 0000000..54a9f3a
--- /dev/null
+++ b/components/playlist/index.tsx
@@ -0,0 +1,226 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import aydym from "@/public/aydym-com.webp";
+import horjun from "@/public/horjun.png";
+import belet from "@/public/belet.jpg";
+import { v4 } from "uuid";
+
+const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
+  const [index, setIndex] = useState<number>(0);
+
+  return (
+    <div className="video-item-inner">
+      <div className="video-item-wrapper flex flex-col md:flex-row md:items-start items-center gap-10 relative pb-14 w-full">
+        <InfoBlock data={data?.data[index]} />
+
+        <div className="video-item-inner flex flex-col gap-4 grow-0">
+          {data?.data.map(
+            (item: any, i: number) =>
+              i !== index && (
+                <button key={v4()} onClick={() => setIndex(i)}>
+                  <VideoItem
+                    id={item.id}
+                    img={item.banner_url}
+                    title={item.title}
+                  />
+                </button>
+              )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaylistVideos;
+
+const InfoBlock = ({ data }: { data: any }) => (
+  <div className="flex gap-6 flex-1 w-full justify-between h-full">
+    <div className="flex flex-col gap-6 w-full h-full">
+      <div className="flex justify-between gap-[32px] w-full h-full">
+        <div className="w-full flex flex-col gap-6 h-full">
+          <div className="flex flex-col gap-[40px] h-full  w-full">
+            <div className="flex gap-[40px] flex-col  h-full  w-full">
+              <div className="w-full">
+                <VideoPlayer content={data} />
+              </div>
+
+              <div className="flex flex-col gap-6">
+                {data?.desc ? (
+                  <p className="font-roboto text-lg w-full text-black">
+                    {data.desc}
+                  </p>
+                ) : null}
+
+                {data?.aydym_com_url ||
+                data?.horjun_content_url ||
+                data?.belet_url ? (
+                  <div className="flex flex-col gap-6">
+                    <h2 className="text-2xl font-semibold">
+                      Beýleki platformalarda seret:
+                    </h2>
+                    <div className="flex gap-11 items-center">
+                      {data.aydym_com_url ? (
+                        <Link
+                          href={data.aydym_com_url}
+                          target="_blank"
+                          className="flex flex-col items-center justify-center gap-2"
+                        >
+                          <div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
+                            <Image
+                              src={aydym}
+                              alt="Aydym.com"
+                              className="rounded-full"
+                            />
+                          </div>
+                          <h3>Aydym.com</h3>
+                        </Link>
+                      ) : null}
+                      {data.horjun_content_url ? (
+                        <Link
+                          href={data.horjun_content_url}
+                          target="_blank"
+                          className="flex flex-col items-center justify-center gap-2"
+                        >
+                          <div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
+                            <Image
+                              src={horjun}
+                              alt="HorjunTv"
+                              className="rounded-full"
+                            />
+                          </div>
+                          <h3>HorjunTv</h3>
+                        </Link>
+                      ) : null}
+                      {data.belet_url ? (
+                        <Link
+                          href={data.belet_url}
+                          target="_blank"
+                          className="flex flex-col items-center justify-center gap-2"
+                        >
+                          <div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
+                            <Image
+                              src={belet}
+                              alt="BeletTv"
+                              className="rounded-full"
+                            />
+                          </div>
+                          <h3>BeletFilm</h3>
+                        </Link>
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const VideoPlayer = ({ content }: { content: any }) => {
+  const [hasWindow, setHasWindow] = useState<boolean>(false);
+  const [data, setData] = useState<any>(content);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setHasWindow(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    setData(content);
+  }, [content]);
+
+  return (
+    <div className="w-full h-full">
+      {hasWindow ? (
+        data?.content_url.endsWith(".mp4") ? (
+          <div className="lg:w-full md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[620px]">
+            <video
+              controls
+              controlsList={data?.is_downloadable === 0 ? "nodownload" : ""} // Conditionally enable/disable download
+              poster={data?.banner_url}
+              playsInline
+            >
+              <source src={data?.video_stream_url} type="video/mp4" />
+            </video>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4 h-fit">
+            <div className="relative w-full h-[200px] sm:h-[400px] md:h-[420px]">
+              {data?.banner_url ? (
+                <Image
+                  src={data.banner_url}
+                  fill
+                  alt={"image"}
+                  className="object-cover"
+                />
+              ) : null}
+            </div>
+            <audio
+              controls
+              controlsList={data?.is_downloadable === 0 ? "nodownload" : ""} // Conditionally enable/disable download
+              className="w-full rounded bg-white"
+            >
+              <source src={data?.content_url} />
+            </audio>
+          </div>
+        )
+      ) : null}
+    </div>
+  );
+};
+
+const VideoItem = ({
+  img,
+  title,
+  id,
+}: {
+  img: any;
+  title: string;
+  id: number;
+}) => {
+  return (
+    <div className="video-list-item flex flex-col gap-2 lg:w-[250px] md:w-[200px] sm:w-[200px] w-[300px] ">
+      {img ? (
+        <>
+          <div className="relative sm:h-[150px] h-[200px] w-full overflow-hidden rounded-five">
+            <Image
+              src={img}
+              alt={title}
+              unoptimized
+              unselectable="off"
+              className="top-0 left-0 w-full h-full object-cover z-0 absolute pointer-events-none"
+              width={280}
+              height={160}
+            />
+            <Image
+              src={"/play.svg"}
+              alt={"play icon"}
+              unoptimized
+              unselectable="off"
+              className="top-[50%] left-[50%] w-[52px] h-[52px] object-cover z-10 -translate-x-[50%] -translate-y-[50%] absolute"
+              width={52}
+              height={52}
+            />
+          </div>
+        </>
+      ) : null}
+
+      {/* {premium ? <Premium /> : null} */}
+      <div className="flex gap-3 justify-start items-center">
+        <div className="flex flex-col">
+          <h3 className="clamped font-mw_sans font-bold text-lg text-black transition-all dark:text-white overflow-hidden w-full">
+            {title}
+          </h3>
+          {/* <span className="font-roboto text-lg font-normal text-black transition-all dark:text-white">{`${views} Views`}</span> */}
+        </div>
+      </div>
+    </div>
+  );
+};