diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx
index bd0225c..a7e8e7f 100644
--- a/app/components/Chip/Chip.tsx
+++ b/app/components/Chip/Chip.tsx
@@ -6,22 +6,26 @@ export const Chip = (props: {
   devider?: string;
   bg_color?: string;
   style?: React.CSSProperties;
-  className?: string;
 }) => {
   return (
-    <div className={`${props.bg_color || "bg-gray-500"} rounded-sm flex items-center justify-center ${props.className || ""}`}>
+    <div
+      className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
+        props.bg_color || "bg-gray-500"
+      } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
+      style={props.style || {}}
+    >
       {props.icon_name && (
         <span
-          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ml-2 ${props.icon_name}`}
+          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ${props.icon_name}`}
           style={
             {
-              color: "var(--icon-color)",
+              "color": "var(--icon-color)",
               "--icon-color": props.icon_color || "#fff",
             } as React.CSSProperties
           }
         ></span>
       )}
-      <p className="px-2 py-1 text-white xl:text-base">
+      <p className="text-xs text-white xl:text-base">
         {props.name}
         {props.name && props.devider ? props.devider : " "}
         {props.name_2}
diff --git a/app/components/Profile/Profile.ReleaseHistory.tsx b/app/components/Profile/Profile.ReleaseHistory.tsx
index b579c11..e17c2d9 100644
--- a/app/components/Profile/Profile.ReleaseHistory.tsx
+++ b/app/components/Profile/Profile.ReleaseHistory.tsx
@@ -1,29 +1,25 @@
-import { Card, Carousel } from "flowbite-react";
+import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
 import type {
   FlowbiteCarouselIndicatorsTheme,
   FlowbiteCarouselControlTheme,
-  CustomFlowbiteTheme,
 } from "flowbite-react";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
-    off: "bg-gray-400/50 hover:bg-gray-200",
-    on: "bg-gray-200",
+    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    on: "bg-gray-600 dark:bg-gray-200",
   },
-  base: "h-3 w-3 rounded-full max-w-[300px]",
+  base: "h-3 w-3 rounded-full",
   wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
 };
 
 const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
-  base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
-  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
 };
 
-const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
-  root: {
-    base: "relative h-full w-full max-w-[375px]",
-  },
+const CarouselTheme = {
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -32,16 +28,10 @@ export const ProfileReleaseHistory = (props: any) => {
   return (
     <Card className="h-fit">
       <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
-      <div className="flex justify-center">
+      <div className="max-w-[700px] min-h-[200px]">
         <Carousel theme={CarouselTheme}>
           {props.history.map((release) => {
-            return (
-              <ReleaseLink
-                key={`history-${release.id}`}
-                {...release}
-                chipsSettings={{ lastWatchedHidden: false }}
-              />
-            );
+            return <ReleaseLink key={`history-${release.id}`} {...release} />;
           })}
         </Carousel>
       </div>
diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx
index 75af80d..6c6f978 100644
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@@ -17,7 +17,6 @@ import { useCallback, useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
-import { Poster } from "../ReleasePoster/Poster";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
@@ -34,9 +33,6 @@ const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
 };
 
 const CarouselTheme = {
-  root: {
-    base: "relative h-full w-full max-w-[700px]",
-  },
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -51,15 +47,19 @@ export const ProfileReleaseRatings = (props: any) => {
           Посмотреть все
         </Button>
       </div>
-      <div className="flex min-h-[200px] items-center justify-center">
+      <div className="max-w-[700px] min-h-[200px]">
         <Carousel theme={CarouselTheme}>
           {props.ratings.map((release) => {
             return (
               <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
                 <div className="flex gap-4 xl:mx-20">
-                  <div className="max-w-32">
-                    <Poster image={release.image} />
-                  </div>
+                  <Image
+                    src={release.image}
+                    width={100}
+                    height={125}
+                    alt=""
+                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
+                  />
                   <div className="flex flex-col gap-1 py-4">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <Rating size="md">
@@ -155,7 +155,7 @@ const ProfileReleaseRatingsModal = (props: {
         ref={modalRef}
       >
         {isLoading && <Spinner />}
-        {content && content.length > 0 ?
+        {content && content.length > 0 ? (
           content.map((release) => {
             return (
               <Link
@@ -163,9 +163,13 @@ const ProfileReleaseRatingsModal = (props: {
                 key={`vote-modal-${release.id}`}
               >
                 <div className="flex gap-4 xl:mx-20">
-                  <div className="flex-shrink-0 max-w-32">
-                    <Poster image={release.image} />
-                  </div>
+                  <Image
+                    src={release.image}
+                    width={100}
+                    height={125}
+                    alt=""
+                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
+                  />
                   <div className="flex flex-col gap-1 py-2">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <div className="flex items-center gap-1">
@@ -196,7 +200,9 @@ const ProfileReleaseRatingsModal = (props: {
               </Link>
             );
           })
-        : <h1>Оценок нет</h1>}
+        ) : (
+          <h1>Оценок нет</h1>
+        )}
       </div>
     </Modal>
   );
diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
index 503c814..d7e333a 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
 import Link from "next/link";
 
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -42,7 +42,7 @@ export const ReleaseCourusel = (props: {
           allowTouchMove={true}
           breakpoints={{
             1800: {
-              initialSlide: 2,
+              initialSlide: 1,
               centeredSlides: true
             }
           }}
@@ -52,7 +52,7 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="h-full max-w-64 md:max-w-96 aspect-[384/538]"
+                  className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index 63a576c..c23cf4f 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -2,7 +2,6 @@ import { Card, Button } from "flowbite-react";
 import { useState } from "react";
 import Image from "next/image";
 import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
-import { Poster } from "../ReleasePoster/Poster";
 
 export const ReleaseInfoBasics = (props: {
   release_id: number;
@@ -15,20 +14,14 @@ export const ReleaseInfoBasics = (props: {
 
   return (
     <Card className="h-full row-span-2">
-      <div className="flex flex-col w-full h-full gap-4 lg:grid lg:grid-cols-[1fr_2fr] items-center lg:items-start justify-center lg:justify-start">
-        <div className="flex flex-col gap-2">
-          <div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
-            <Poster
-              image={props.image}
-              className="z-10 sm:scale-95 lg:scale-100"
-            />
-            <Poster
-              image={props.image}
-              className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75"
-            />
-          </div>
-          <ReleaseInfoStreaming release_id={props.release_id} />
-        </div>
+      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
+        <Image
+          className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
+          src={props.image}
+          alt=""
+          width={285}
+          height={385}
+        />
         <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
           <div className="flex flex-col gap-1">
             <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
@@ -61,6 +54,7 @@ export const ReleaseInfoBasics = (props: {
           >
             {isFullDescription ? "Скрыть" : "Показать полностью"}
           </Button>
+          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
       </div>
     </Card>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
index 25f4d24..6a1c72b 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
@@ -23,17 +23,17 @@ export const ReleaseInfoStreaming = (props: { release_id: number }) => {
       : !(data.content.length > 0) ?
         ""
       : <div>
-          <div className="grid grid-flow-row-dense grid-cols-1 gap-1 2xl:grid-cols-2">
+          <p className="mt-4 mb-1 text-lg">Официальные источники: </p>
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
             {data.content.map((item: any) => {
               return (
                 <a
                   href={item.url}
-                  target="_blank"
                   key={`platform_${item.id}`}
-                  className="flex items-center gap-2 px-4 py-2 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
+                  className="flex items-center gap-2 px-2 py-1 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
                 >
                   <img src={item.icon} className="w-6 h-6 rounded-full" />
-                  <p className="text-sm line-clamp-2">{item.name}</p>
+                  <p className="text-lg">{item.name}</p>
                 </a>
               );
             })}
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
index 80a5cac..dbd6c40 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@@ -1,29 +1,13 @@
 "use client";
 
-import { Card, Carousel, CustomFlowbiteTheme, FlowbiteCarouselControlTheme, FlowbiteCarouselIndicatorsTheme } from "flowbite-react";
-import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
+import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
 import Link from "next/link";
 
-const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
-  active: {
-    off: "bg-gray-400/50 hover:bg-gray-200",
-    on: "bg-gray-200",
-  },
-  base: "h-3 w-3 rounded-full max-w-[300px]",
-  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
-};
-
-const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
-  base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
-  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
-};
-
 const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
   root: {
     base: "relative h-full w-full max-w-[300px]",
   },
-  indicators: CarouselIndicatorsTheme,
-  control: CarouselControlsTheme,
 };
 
 export const ReleaseInfoRelated = (props: {
@@ -55,11 +39,7 @@ export const ReleaseInfoRelated = (props: {
             })
             .map((release: any) => {
               return (
-                <ReleaseLink
-                  key={release.id}
-                  {...release}
-                  settings={{ showGenres: false, showDescription: false }}
-                />
+                <ReleaseLink key={release.id} {...release} type={"poster"} />
               );
             })}
         </Carousel>
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx b/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx
new file mode 100644
index 0000000..b62e0ce
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx
@@ -0,0 +1,133 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
+
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+
+export const ReleaseLink169 = (props: any) => {
+  const grade = props.grade ? props.grade.toFixed(1) : null;
+  const profile_list_status = props.profile_list_status;
+  let user_list = null;
+  if (profile_list_status != null || profile_list_status != 0) {
+    user_list = profile_lists[profile_list_status];
+  }
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={props.isLinkDisabled ? "pointer-events-none" : ""}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div className="w-full aspect-video group">
+        <div
+          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
+          style={{
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
+          }}
+        >
+          <Image
+            src={props.image}
+            fill={true}
+            alt={props.title || ""}
+            className="-z-[1] object-cover"
+            sizes="
+                  (max-width: 768px) 300px,
+                  (max-width: 1024px) 600px,
+                  900px
+                  "
+          />
+          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-1 sm:p-2">
+            {grade ? (
+              <Chip
+                bg_color={
+                  grade == 0
+                    ? "hidden"
+                    : grade < 2
+                    ? "bg-red-500"
+                    : grade < 3
+                    ? "bg-orange-500"
+                    : grade < 4
+                    ? "bg-yellow-500"
+                    : "bg-green-500"
+                }
+                name={grade}
+              />
+            ) : (
+              ""
+            )}
+            {user_list && (
+              <Chip bg_color={user_list.bg_color} name={user_list.name} />
+            )}
+            {props.status ? (
+              <Chip name={props.status.name} />
+            ) : (
+              props.status_id != 0 && (
+                <Chip
+                  name={
+                    props.status_id == 1
+                      ? "Завершено"
+                      : props.status_id == 2
+                      ? "Онгоинг"
+                      : props.status_id == 3 && "Анонс"
+                  }
+                />
+              )
+            )}
+            <Chip
+              name={props.episodes_released && props.episodes_released}
+              name_2={
+                props.episodes_total ? props.episodes_total + " эп." : "? эп."
+              }
+              devider="/"
+            />
+            {props.last_view_episode && (
+              <Chip
+                name={
+                  props.last_view_episode.name
+                    ? props.last_view_episode.name
+                    : `${props.last_view_episode.position + 1} серия`
+                }
+                name_2={
+                  "last_view_timestamp" in props &&
+                  sinceUnixDate(props.last_view_timestamp)
+                }
+                devider=", "
+              />
+            )}
+            {props.category && <Chip name={props.category.name} />}
+            {props.is_favorite && (
+              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+              </div>
+            )}
+          </div>
+          <div className="absolute bottom-0 left-0 p-1 sm:p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+            <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
+              {props.genres && (
+                <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
+                  {props.genres}
+                </p>
+              )}
+              <p className="text-sm font-bold text-white md:text-base lg:text-lg xl:text-xl">
+                {props.title_ru}
+              </p>
+            </div>
+            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
+              {`${props.description.slice(0, 125)}${
+                props.description.length > 125 ? "..." : ""
+              }`}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
new file mode 100644
index 0000000..384c914
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
@@ -0,0 +1,124 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
+
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+
+export const ReleaseLink169Poster = (props: any) => {
+  const grade = props.grade ? props.grade.toFixed(1) : null;
+  const profile_list_status = props.profile_list_status;
+  let user_list = null;
+  if (profile_list_status != null || profile_list_status != 0) {
+    user_list = profile_lists[profile_list_status];
+  }
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={props.isLinkDisabled ? "pointer-events-none" : ""}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div className="w-full h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
+        <div className="flex w-full h-full gap-2 overflow-hidden">
+          <div className="flex-shrink-0">
+            <Image
+              src={props.image}
+              height={250}
+              width={250}
+              alt={props.title || ""}
+              className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
+            />
+          </div>
+          <div className="flex flex-col flex-1 w-full h-full">
+            <div>
+              {props.genres && (
+                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
+                  {props.genres}
+                </p>
+              )}
+              <p className="text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl">
+                {`${props.title_ru.slice(0, 47)}${
+                  props.title_ru.length > 47 ? "..." : ""
+                }`}
+              </p>
+              <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
+                {`${props.description.slice(0, 97)}${
+                  props.description.length > 97 ? "..." : ""
+                }`}
+              </p>
+            </div>
+            <div className="flex flex-wrap gap-1 mt-1">
+              {grade ? <Chip
+                bg_color={
+                  grade == 0
+                    ? "hidden"
+                    : grade < 2
+                    ? "bg-red-500"
+                    : grade < 3
+                    ? "bg-orange-500"
+                    : grade < 4
+                    ? "bg-yellow-500"
+                    : "bg-green-500"
+                }
+                name={grade}
+              /> : ""}
+              {user_list && (
+                <Chip bg_color={user_list.bg_color} name={user_list.name} />
+              )}
+              {props.status ? (
+                <Chip name={props.status.name} />
+              ) : (
+                props.status_id != 0 && (
+                  <Chip
+                    name={
+                      props.status_id == 1
+                        ? "Завершено"
+                        : props.status_id == 2
+                        ? "Онгоинг"
+                        : props.status_id == 3 && "Анонс"
+                    }
+                  />
+                )
+              )}
+              <Chip
+                name={props.episodes_released && props.episodes_released}
+                name_2={
+                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
+                }
+                devider="/"
+              />
+              {props.last_view_episode && (
+                <Chip
+                  name={
+                    props.last_view_episode.name
+                      ? props.last_view_episode.name
+                      : `${props.last_view_episode.position + 1} серия`
+                  }
+                  name_2={
+                    "last_view_timestamp" in props &&
+                    sinceUnixDate(props.last_view_timestamp)
+                  }
+                  devider=", "
+                />
+              )}
+              {props.category && <Chip name={props.category.name} />}
+              {props.is_favorite && (
+                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx
new file mode 100644
index 0000000..aa2959f
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx
@@ -0,0 +1,136 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
+
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
+
+export const ReleaseLink169Related = (props: any) => {
+  const grade = props.grade.toFixed(1);
+  const profile_list_status = props.profile_list_status;
+  let user_list = null;
+  if (profile_list_status != null || profile_list_status != 0) {
+    user_list = profile_lists[profile_list_status];
+  }
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={`${
+        props.isLinkDisabled ? "pointer-events-none" : ""
+      } flex gap-4 items-center justify-between mx-auto w-full max-w-[1024px]`}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div className="items-center justify-center flex-1 hidden lg:flex">
+        <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
+          {props.season ? YearSeason[props.season] : ""}
+          <br/>
+          {props.year ? props.year : ""}
+        </h1>
+      </div>
+      <div className="w-full max-w-[768px] h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
+        <div className="flex w-full h-full gap-2 overflow-hidden">
+          <div className="flex-shrink-0">
+            <Image
+              src={props.image}
+              height={250}
+              width={250}
+              alt={props.title || ""}
+              className="object-cover aspect-[9/16] lg:aspect-[12/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
+            />
+          </div>
+          <div className="flex flex-col flex-1 w-full h-full">
+            <div>
+              {props.genres && (
+                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
+                  {props.genres}
+                </p>
+              )}
+              <p className="block text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:hidden">
+                {`${props.title_ru.slice(0, 47)}${
+                  props.title_ru.length > 47 ? "..." : ""
+                }`}
+              </p>
+              <p className="block text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg md:hidden">
+                {`${props.description.slice(0, 97)}${
+                  props.description.length > 97 ? "..." : ""
+                }`}
+              </p>
+              <p className="hidden text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:block max-w-[512px]">
+                {props.title_ru}
+              </p>
+              <p className="hidden text-xs font-light text-black dark:text-white md:text-sm:text-base xl:text-lg md:block max-w-[512px]">
+                {props.description}
+              </p>
+            </div>
+            <div className="flex flex-wrap gap-1 mt-1">
+              <Chip
+                bg_color={
+                  grade == 0
+                    ? "hidden"
+                    : grade < 2
+                    ? "bg-red-500"
+                    : grade < 3
+                    ? "bg-orange-500"
+                    : grade < 4
+                    ? "bg-yellow-500"
+                    : "bg-green-500"
+                }
+                name={grade}
+              />
+              {user_list && (
+                <Chip bg_color={user_list.bg_color} name={user_list.name} />
+              )}
+              {props.status ? (
+                <Chip name={props.status.name} />
+              ) : (
+                props.status_id != 0 && (
+                  <Chip
+                    name={
+                      props.status_id == 1
+                        ? "Завершено"
+                        : props.status_id == 2
+                        ? "Онгоинг"
+                        : props.status_id == 3 && "Анонс"
+                    }
+                  />
+                )
+              )}
+              <Chip
+                name={props.episodes_released && props.episodes_released}
+                name_2={
+                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
+                }
+                devider="/"
+              />
+              {props.category && <Chip name={props.category.name} />}
+              {props.season || props.year ? (
+                <Chip
+                  bg_color="lg:hidden bg-gray-500"
+                  name={props.season ? YearSeason[props.season] : ""}
+                  name_2={props.year ? `${props.year} год` : ""}
+                  devider=" "
+                />
+              ) : (
+                ""
+              )}
+              {props.is_favorite && (
+                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.Poster.tsx b/app/components/ReleaseLink/ReleaseLink.Poster.tsx
new file mode 100644
index 0000000..438b7b6
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.Poster.tsx
@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { Chip } from "#/components/Chip/Chip";
+
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+
+export const ReleaseLinkPoster = (props: any) => {
+  const grade = props.grade.toFixed(1);
+  const profile_list_status = props.profile_list_status;
+  let user_list = null;
+  if (profile_list_status != null || profile_list_status != 0) {
+    user_list = profile_lists[profile_list_status];
+  }
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={props.isLinkDisabled ? "pointer-events-none" : ""}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div
+        className="relative w-full h-64 gap-8 p-2 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+        }}
+      >
+        <div className="flex flex-wrap gap-1">
+          <Chip
+            bg_color={
+              props.grade.toFixed(1) == 0
+                ? "hidden"
+                : props.grade.toFixed(1) < 2
+                ? "bg-red-500"
+                : props.grade.toFixed(1) < 3
+                ? "bg-orange-500"
+                : props.grade.toFixed(1) < 4
+                ? "bg-yellow-500"
+                : "bg-green-500"
+            }
+            name={props.grade.toFixed(1)}
+          />
+          {props.status ? (
+            <Chip name={props.status.name} />
+          ) : (
+            <Chip
+              name={
+                props.status_id == 1
+                  ? "Завершено"
+                  : props.status_id == 2
+                  ? "Онгоинг"
+                  : "Анонс"
+              }
+            />
+          )}
+          <Chip
+            name={props.episodes_released && props.episodes_released}
+            name_2={
+              props.episodes_total ? props.episodes_total + " эп." : "? эп."
+            }
+            devider="/"
+          />
+        </div>
+        <div className="absolute flex flex-col gap-2 text-white bottom-4 left-2 right-2">
+          {props.title_ru && (
+            <p className="text-xl font-bold text-white md:text-2xl">
+              {props.title_ru}
+            </p>
+          )}
+          {props.title_original && (
+            <p className="text-sm text-gray-300 md:text-base">
+              {props.title_original}
+            </p>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.tsx b/app/components/ReleaseLink/ReleaseLink.tsx
new file mode 100644
index 0000000..f81e277
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.tsx
@@ -0,0 +1,19 @@
+import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+
+export const ReleaseLink = (props: {type?: "16_9"|"poster"}) => {
+  const type = props.type || "16_9";
+
+  if (type == "16_9") {
+    return (
+      <>
+        <div className="hidden lg:block"><ReleaseLink169 {...props} /></div>
+        <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div>
+      </>
+    )
+  }
+  if (type == "poster") {
+    return <ReleaseLinkPoster {...props} />;
+  }
+};
diff --git a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
deleted file mode 100644
index e448809..0000000
--- a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Link from "next/link";
-import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
-
-export const ReleaseLink = (props: {
-  image: string;
-  title_ru: string;
-  title_original: string;
-  description?: string;
-  genres?: string;
-  grade?: number;
-  id: number;
-  settings?: {
-    showGenres?: boolean;
-    showDescription?: boolean;
-  };
-  chipsSettings?: {
-    enabled: boolean;
-    gradeHidden?: boolean;
-    statusHidden?: boolean;
-    categoryHidden?: boolean;
-    episodesHidden?: boolean;
-    listHidden?: boolean;
-    favHidden?: boolean;
-    lastWatchedHidden?: boolean;
-  };
-  profile_list_status?: number;
-  status?: {
-    name: string;
-  };
-  category?: {
-    name: string;
-  };
-  status_id?: number;
-  episodes_released?: string;
-  episodes_total?: string;
-  is_favorite?: boolean;
-}) => {
-  return (
-    <Link href={`/release/${props.id}`}>
-      <PosterWithStuff {...props} />
-    </Link>
-  );
-};
diff --git a/app/components/ReleasePoster/Chips.tsx b/app/components/ReleasePoster/Chips.tsx
deleted file mode 100644
index 8e1784b..0000000
--- a/app/components/ReleasePoster/Chips.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "../Chip/Chip";
-
-interface ChipProps {
-  settings?: any;
-  grade?: any;
-  status?: any;
-  status_id?: any;
-  user_list?: any;
-  episodes_released?: any;
-  episodes_total?: any;
-  category?: any;
-  is_favorite?: any;
-  last_view_episode?: any;
-  last_view_timestamp?: any;
-}
-
-export const ReleaseChips = ({
-  settings,
-  grade,
-  status,
-  status_id,
-  user_list,
-  episodes_released,
-  episodes_total,
-  category,
-  is_favorite,
-  last_view_episode,
-  last_view_timestamp,
-}: ChipProps) => {
-  const chipSettings = {
-    enabled: true,
-    gradeHidden: false,
-    statusHidden: false,
-    categoryHidden: false,
-    episodesHidden: false,
-    listHidden: false,
-    favHidden: false,
-    lastWatchedHidden: true,
-    ...settings,
-  };
-
-  return (
-    <div className={`${chipSettings.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}>
-      {!chipSettings.gradeHidden && grade ?
-        <Chip
-          className="w-12"
-          bg_color={
-            grade == 0 ? "hidden"
-            : grade < 2 ?
-              "bg-red-500"
-            : grade < 3 ?
-              "bg-orange-500"
-            : grade < 4 ?
-              "bg-yellow-500"
-            : "bg-green-500"
-          }
-          name={`${grade}`}
-        />
-      : ""}
-      {!chipSettings.listHidden && user_list && (
-        <Chip bg_color={user_list.bg_color} name={user_list.name} />
-      )}
-      {!chipSettings.statusHidden && status ?
-        <Chip name={status.name} />
-      : status_id != 0 && (
-          <Chip
-            name={
-              status_id == 1 ? "Завершено"
-              : status_id == 2 ?
-                "Онгоинг"
-              : status_id == 3 && "Анонс"
-            }
-          />
-        )
-      }
-      {!chipSettings.episodesHidden && (
-        <Chip
-          name={episodes_released && episodes_released}
-          name_2={episodes_total ? episodes_total + " эп." : "? эп."}
-          devider="/"
-        />
-      )}
-      {!chipSettings.categoryHidden && category && <Chip name={category.name} />}
-      {!chipSettings.favHidden && is_favorite && (
-        <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-          <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-        </div>
-      )}
-      {!chipSettings.lastWatchedHidden && last_view_episode && (
-        <Chip
-          name={
-            last_view_episode.name ?
-              last_view_episode.name
-            : `${last_view_episode.position + 1} серия`
-          }
-          name_2={last_view_timestamp && sinceUnixDate(last_view_timestamp)}
-          devider=", "
-        />
-      )}
-    </div>
-  );
-};
diff --git a/app/components/ReleasePoster/Poster.tsx b/app/components/ReleasePoster/Poster.tsx
deleted file mode 100644
index 4d500cb..0000000
--- a/app/components/ReleasePoster/Poster.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Image from "next/image";
-
-export const Poster = (props: {
-  image: string;
-  alt?: string;
-  className?: string;
-}) => {
-  return (
-    <Image
-      className={`object-cover rounded-lg shadow-md ${props.className}`}
-      // className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
-      src={props.image}
-      alt={props.alt || ""}
-      width={285}
-      height={385}
-      style={{
-        width: "100%",
-        height: "auto",
-      }}
-    />
-  );
-};
diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
deleted file mode 100644
index adffc49..0000000
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Poster } from "./Poster";
-import { ReleaseChips } from "./Chips";
-
-const profile_lists = {
-  // 0: "Не смотрю",
-  1: { name: "Смотрю", bg_color: "bg-green-500" },
-  2: { name: "В планах", bg_color: "bg-purple-500" },
-  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
-  4: { name: "Отложено", bg_color: "bg-yellow-500" },
-  5: { name: "Брошено", bg_color: "bg-red-500" },
-};
-
-export const PosterWithStuff = (props: {
-  image: string;
-  title_ru: string;
-  title_original: string;
-  description?: string;
-  genres?: string;
-  grade?: number;
-  id: number;
-  settings?: {
-    showGenres?: boolean;
-    showDescription?: boolean;
-  };
-  chipsSettings?: {
-    enabled: boolean;
-    gradeHidden?: boolean;
-    statusHidden?: boolean;
-    categoryHidden?: boolean;
-    episodesHidden?: boolean;
-    listHidden?: boolean;
-    favHidden?: boolean;
-    lastWatchedHidden?: boolean;
-  };
-  profile_list_status?: number;
-  status?: {
-    name: string;
-  };
-  category?: {
-    name: string;
-  };
-  status_id?: number;
-  episodes_released?: string;
-  episodes_total?: string;
-  is_favorite?: boolean;
-}) => {
-  const genres = [];
-  const settings = {
-    showGenres: true,
-    showDescription: true,
-    ...props.settings,
-  };
-  const chipsSettings = props.chipsSettings || {}
-
-  const grade = props.grade ? Number(props.grade.toFixed(1)) : null;
-  const profile_list_status = props.profile_list_status || null;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  if (props.genres) {
-    const genres_array = props.genres.split(",");
-    genres_array.forEach((genre) => {
-      genres.push(genre.trim());
-    });
-  }
-
-  return (
-    <div className="relative w-full h-full overflow-hidden rounded-lg group">
-      <div className="absolute z-20 top-2 left-2 right-2">
-        <ReleaseChips
-          {...props}
-          user_list={user_list}
-          grade={grade}
-          settings={chipsSettings}
-        ></ReleaseChips>
-      </div>
-      <div className="absolute z-20 bottom-2 left-2 right-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
-        <div className="lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0 transition-transform">
-          {settings.showGenres &&
-            genres.length > 0 &&
-            genres.map((genre: string, index: number) => {
-              return (
-                <span
-                  key={`release_${props.id}_genre_${genre}_${index}`}
-                  className="font-light text-white md:text-sm lg:text-base xl:text-lg"
-                >
-                  {index > 0 && ", "}
-                  {genre}
-                </span>
-              );
-            })}
-          {props.title_ru && (
-            <p className="text-xl font-bold text-white md:text-2xl">
-              {props.title_ru}
-            </p>
-          )}
-          {props.title_original && (
-            <p className="text-sm text-gray-300 md:text-base">
-              {props.title_original}
-            </p>
-          )}
-        </div>
-        {settings.showDescription && props.description && (
-          <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
-            {props.description}
-          </p>
-        )}
-      </div>
-      <div className="absolute w-full h-full rounded-b-lg bg-gradient-to-t from-black to-transparent"></div>
-      <Poster
-        image={props.image}
-        className="w-auto h-auto min-w-full min-h-full flex-grow-1"
-      ></Poster>
-    </div>
-  );
-};
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index b826085..734e388 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -1,4 +1,4 @@
-import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
 
 export const ReleaseSection = (props: {
   sectionTitle?: string;
@@ -14,22 +14,15 @@ export const ReleaseSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+        <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
           {props.content.map((release) => {
             return (
-              <div key={release.id} className="w-full h-full">
-                <ReleaseLink
-                  {...release}
-                  chipsSettings={{
-                    enabled: true,
-                    lastWatchedHidden:
-                      (props.sectionTitle &&
-                        props.sectionTitle.toLowerCase() != "история")
-                  }}
-                />
+              <div key={release.id} className="w-full h-full lg:aspect-video">
+                <ReleaseLink {...release} />
               </div>
             );
           })}
+          {props.content.length == 1 && <div></div>}
         </div>
       </div>
     </section>
diff --git a/app/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx
index cd0c3b7..e943634 100644
--- a/app/pages/CreateCollection.tsx
+++ b/app/pages/CreateCollection.tsx
@@ -15,7 +15,7 @@ import {
   Modal,
   useThemeMode,
 } from "flowbite-react";
-import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
 import { CropModal } from "#/components/CropModal/CropModal";
 import { b64toBlob, tryCatchAPI } from "#/api/utils";
 
@@ -462,17 +462,20 @@ export const CreateCollectionPage = () => {
           </Button>
         </div>
         <div className="m-4">
-          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2 min-w-full">
             {addedReleases.map((release) => {
               return (
-                <div key={release.id} className="relative w-full h-full group">
+                <div
+                  key={release.id}
+                  className="relative w-full h-full aspect-video group"
+                >
                   <button
-                    className="absolute inset-0 z-30 text-black transition-opacity bg-white rounded-lg opacity-0 group-hover:opacity-75"
+                    className="absolute inset-0 z-10 text-black transition-opacity bg-white opacity-0 group-hover:opacity-75"
                     onClick={() => _deleteRelease(release)}
                   >
                     Удалить
                   </button>
-                  <PosterWithStuff {...release} />
+                  <ReleaseLink {...release} isLinkDisabled={true} />
                 </div>
               );
             })}
@@ -589,9 +592,6 @@ export const ReleasesEditModal = (props: {
       return;
     }
 
-    const newContent = content.filter((r) => r.id !== release.id);
-
-    setContent(newContent);
     props.setReleases([...props.releases, release]);
     props.setReleasesIds([...props.releasesIds, release.id]);
   }
@@ -611,7 +611,11 @@ export const ReleasesEditModal = (props: {
       >
         <form
           className="max-w-full mx-auto"
-          onSubmit={(e) => e.preventDefault()}
+          onSubmit={(e) => {
+            e.preventDefault();
+            setContent([]);
+            setQuery(e.target[0].value.trim());
+          }}
         >
           <label
             htmlFor="default-search"
@@ -643,35 +647,30 @@ export const ReleasesEditModal = (props: {
               className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Поиск аниме..."
               required
-              onChange={(e) => setQuery(e.target.value)}
-              value={query || ""}
+              defaultValue={query || ""}
             />
             <button
-              type="button"
-              className="text-white absolute end-2.5 bottom-2.5 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
-              onClick={() => {
-                setSize(0);
-                setContent([]);
-                setQuery("");
-              }}
+              type="submit"
+              className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
-              Очистить
+              Поиск
             </button>
           </div>
         </form>
 
-        <div className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+        <div className="grid grid-cols-2 gap-2 mt-2 md:grid-cols-4">
           {content.map((release) => {
             return (
               <button
-                className="text-left"
                 key={release.id}
+                className="overflow-hidden"
                 onClick={() => _addRelease(release)}
               >
-                <PosterWithStuff {...release} />
+                <ReleaseLink type="poster" {...release} isLinkDisabled={true} />
               </button>
             );
           })}
+          {content.length == 1 && <div></div>}
         </div>
         {isLoading && (
           <div className="flex items-center justify-center h-full min-h-24">
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index 9865c8a..beb5d05 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -5,24 +5,11 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
+import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
 import { useSWRfetcher } from "#/api/utils";
-import { Card } from "flowbite-react";
-import { Poster } from "#/components/ReleasePoster/Poster";
-import { ReleaseChips } from "#/components/ReleasePoster/Chips";
-import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
-import Link from "next/link";
 
-const profile_lists = {
-  // 0: "Не смотрю",
-  1: { name: "Смотрю", bg_color: "bg-green-500" },
-  2: { name: "В планах", bg_color: "bg-purple-500" },
-  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
-  4: { name: "Отложено", bg_color: "bg-yellow-500" },
-  5: { name: "Брошено", bg_color: "bg-red-500" },
-};
-const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
 
-export function RelatedPage(props: { id: number | string; title: string }) {
+export function RelatedPage(props: {id: number|string, title: string}) {
   const token = useUserStore((state) => state.token);
 
   const getKey = (pageIndex: number, previousPageData: any) => {
@@ -65,95 +52,22 @@ export function RelatedPage(props: { id: number | string; title: string }) {
           Франшиза {props.title}
         </h1>
       </div>
-      {content && content.length > 0 ?
+      {content && content.length > 0 ? (
         <div className="flex flex-col gap-4 my-4">
           {content.map((release, index) => {
-            const genres = [];
-            const grade =
-              release.grade ? Number(release.grade.toFixed(1)) : null;
-            const profile_list_status = release.profile_list_status || null;
-            let user_list = null;
-            if (profile_list_status != null || profile_list_status != 0) {
-              user_list = profile_lists[profile_list_status];
-            }
-            if (release.genres) {
-              const genres_array = release.genres.split(",");
-              genres_array.forEach((genre) => {
-                genres.push(genre.trim());
-              });
-            }
-            return (
-              <Link href={`/release/${release.id}`} key={release.id}>
-                <Card>
-                  <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_1fr_2fr] gap-4">
-                    <div className="flex items-center justify-center">
-                      <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
-                        {release.season ? YearSeason[release.season] : ""}
-                        {release.season ?
-                          <br />
-                        : ""}
-                        {release.year ? release.year : ""}
-                      </h1>
-                    </div>
-                    <div className="flex items-center justify-center lg:hidden">
-                      <div className="max-w-64">
-                        <PosterWithStuff {...release} />
-                      </div>
-                    </div>
-                    <div className="hidden lg:flex">
-                      <Poster image={release.image} className="h-auto" />
-                    </div>
-                    <div className="flex-col hidden gap-2 lg:flex">
-                      <ReleaseChips
-                        {...release}
-                        user_list={user_list}
-                        grade={grade}
-                      />
-                      <div>
-                        {genres.length > 0 &&
-                          genres.map((genre: string, index: number) => {
-                            return (
-                              <span
-                                key={`release_${props.id}_genre_${genre}_${index}`}
-                                className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
-                              >
-                                {index > 0 && ", "}
-                                {genre}
-                              </span>
-                            );
-                          })}
-                      </div>
-                      {release.title_ru && (
-                        <p className="text-xl font-bold dark:text-white md:text-2xl">
-                          {release.title_ru}
-                        </p>
-                      )}
-                      {release.title_original && (
-                        <p className="text-sm text-gray-600 dark:text-gray-300 md:text-base">
-                          {release.title_original}
-                        </p>
-                      )}
-                      {release.description && (
-                        <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
-                          {release.description}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </Card>
-              </Link>
-            );
+            return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
           })}
         </div>
-      : isLoading ?
+      ) : isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>
-      : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+      ) : (
+        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
           <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
           <p>В франшизе пока ничего нет...</p>
         </div>
-      }
+      )}
       {data &&
         data[data.length - 1].current_page <
           data[data.length - 1].total_page_count && (