diff --git a/package-lock.json b/package-lock.json
index 3b671f5..c1d7269 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,12 +13,14 @@
         "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
+        "react-responsive-masonry": "^2.2.0",
         "zod": "^3.23.8"
       },
       "devDependencies": {
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-responsive-masonry": "^2.1.3",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
@@ -485,6 +487,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-responsive-masonry": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.3.tgz",
+      "integrity": "sha512-aOFUtv3QwNMmy0BgpQpvivQ/+vivMTB6ARrzf9eTSXsLzXpVnfEtjpHpSknYDnr8KaQmlgeauAj8E7wo/qMOTg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -3744,6 +3755,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-responsive-masonry": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.2.0.tgz",
+      "integrity": "sha512-IYbnfe2tWCZ3pvyTLyBWPj7uv5ZmNOULYMcAZi5a47ZLhSotOck1vkkISq6gP2qiyWdMvPfeMhjvYzUYGw9BOQ=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 9f972d6..d27bd09 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,14 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-responsive-masonry": "^2.2.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-responsive-masonry": "^2.1.3",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
diff --git a/src/app/games/[game_id]/page.tsx b/src/app/games/[game_id]/page.tsx
index b94c7dd..f31f2db 100644
--- a/src/app/games/[game_id]/page.tsx
+++ b/src/app/games/[game_id]/page.tsx
@@ -1,126 +1,130 @@
 import { GameService } from "@/entities/game";
 import { GameCard } from "@/features/gameCard";
+import { getYouTubeID } from "@/shared/utils";
 import { Section } from "@/widgets/section";
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 
 export default async function Games({
-  params: { game_id },
+	params: { game_id },
 }: {
-  params: { game_id: number };
+	params: { game_id: number };
 }) {
-  const gameCards = await GameService.getGameCards();
-  const game = await GameService.getGame(game_id);
-  return (
-    <>
-      {game && (
-        <div className="p-4 flex flex-col lp:block">
-          {game.cover && (
-            <div className="lp:w-[60%] lp:px-4 lp:pl-0 pt-2 float-left">
-              <Image
-                src={game.cover}
-                className="rounded-lg aspect-video object-cover"
-                alt=""
-                width={1280}
-                height={720}
-              />
-            </div>
-          )}
-          <span className="pt-2 lp:max-w-[40%]">
-            <h1 className="text-4xl">{game.title}</h1>
-            {game.description && (
-              <p className="text-md text-justify text-fg4 pt-2">
-                {game.description}
-              </p>
-            )}
-          </span>
-          <div className="flex justify-between pt-6">
-            {[
-              [
-                { name: "Система", value: game.system },
-                { name: "Процессор", value: game.processor },
-                { name: "Оперативная память", value: game.memory },
-                { name: "Видеокарта", value: game.graphics },
-                { name: "Место на диске", value: game.storage },
-              ],
-              [
-                {
-                  name: "Версия игры",
-                  value: `${
-                    game.version
-                  } (обновлена ${game.update_date.toLocaleDateString(
-                    "ru-ru"
-                  )})`,
-                },
-                { name: "Язык", value: game.language },
-                { name: "Разработчик", value: game.developer },
-                {
-                  name: "Год выхода",
-                  value: game.release_date.toLocaleDateString("en-us", {
-                    year: "numeric",
-                  }),
-                },
-                { name: "Объём загрузки", value: game.download_size },
-              ],
-            ].map((section, i) => (
-              <ul key={i} className="w-[48%] bg-bg1 rounded-lg py-1 px-4">
-                {section.map((req) => (
-                  <li
-                    key={req.name}
-                    className="font-bold text-sm lp:text-md py-1"
-                  >
-                    {req.name + ": "}
-                    <span
-                      className={clsx(
-                        "font-normal",
-                        req.value === undefined && "text-fg4"
-                      )}
-                    >
-                      {req.value ?? "Не известно"}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            ))}
-          </div>
-          {game.trailer && (
-            <iframe
-              src={game.trailer.replace("/watch?v=", "/embed/")}
-              className="w-full aspect-video rounded-lg my-4"
-              allowFullScreen
-            />
-          )}
-          <div className="relative w-full flex items-center justify-around">
-            <Link
-              href={
-                process.env.NEXT_PUBLIC_CONTENT_URL + "/" + game.torrent_file
-              }
-              className="p-4 bg-ac0 text-fg1 text-xl rounded-lg"
-            >
-              Скачать {game.title}.torrent
-            </Link>
-          </div>
-          <div className="w-full flex justify-end">
-            <Link className="text-right text-sm" href="/how_to_download">
-              Как скачать игру
-              <br /> с помощью .torrent файла?
-            </Link>
-          </div>
-        </div>
-      )}
+	const gameCards = await GameService.getGameCards();
+	const game = await GameService.getGame(game_id);
+	return (
+		<>
+			{game && (
+				<div className="p-4 flex flex-col lp:block">
+					{game.cover && (
+						<div className="lp:w-[60%] lp:px-4 lp:pl-0 py-2 float-left">
+							<Image
+								src={game.cover}
+								className="rounded-lg w-full object-contain"
+								alt=""
+								width={1280}
+								height={720}
+							/>
+						</div>
+					)}
+					<span className="lp:max-w-[40%]">
+						<h1 className="text-4xl">{game.title}</h1>
+						{game.description && (
+							<p className="text-md text-justify text-fg4 pt-2">
+								{game.description}
+							</p>
+						)}
+					</span>
+					<div className="w-full flex justify-between pt-4">
+						{[
+							[
+								{ name: "Система", value: game.system },
+								{ name: "Процессор", value: game.processor },
+								{ name: "Оперативная память", value: game.memory },
+								{ name: "Видеокарта", value: game.graphics },
+								{ name: "Место на диске", value: game.storage },
+							],
+							[
+								{
+									name: "Версия игры",
+									value: `${
+										game.version
+									} (обновлена ${game.update_date.toLocaleDateString(
+										"ru-ru"
+									)})`,
+								},
+								{ name: "Язык", value: game.language },
+								{ name: "Разработчик", value: game.developer },
+								{
+									name: "Год выхода",
+									value: game.release_date.toLocaleDateString("en-us", {
+										year: "numeric",
+									}),
+								},
+								{ name: "Объём загрузки", value: game.download_size },
+							],
+						].map((section, i) => (
+							<ul key={i} className="w-[48%] bg-bg1 rounded-lg py-1 px-4">
+								{section.map((req) => (
+									<li
+										key={req.name}
+										className="font-bold text-sm lp:text-md py-1"
+									>
+										{req.name + ": "}
+										<span
+											className={clsx(
+												"font-normal",
+												req.value === undefined && "text-fg4"
+											)}
+										>
+											{req.value ?? "Не известно"}
+										</span>
+									</li>
+								))}
+							</ul>
+						))}
+					</div>
+					{game.trailer && getYouTubeID(game.trailer) && (
+						<iframe
+							src={"https://youtube.com/embed/" + getYouTubeID(game.trailer)}
+							className="w-full aspect-video rounded-lg mt-4"
+							allowFullScreen
+						/>
+					)}
+					<div className="relative w-full flex items-center justify-around pt-4">
+						<Link
+							href={
+								process.env.NEXT_PUBLIC_CONTENT_URL + "/" + game.torrent_file
+							}
+							className="p-4 bg-ac0 text-fg1 text-2xl rounded-lg"
+						>
+							Скачать {game.title}
+						</Link>
+					</div>
+					<div className="w-full flex justify-end">
+						<Link
+							className="text-right text-sm relative top-4 lp:-top-4"
+							href="/how_to_download"
+						>
+							Как скачать игру
+							<br /> с помощью .torrent файла?
+						</Link>
+					</div>
+				</div>
+			)}
 
-      {gameCards && (
-        <Section
-          name="Другие популярные игры"
-          link="/games"
-          invite_text={'Перейти в раздел "Игры"'}
-        >
-          {gameCards.map((card) => (
-            <GameCard key={card.id} card={card} />
-          ))}
-        </Section>
-      )}
-    </>
-  );
+			{gameCards && (
+				<Section
+					name="Популярные игры"
+					link="/games"
+					invite_text={'Перейти в раздел "Игры"'}
+				>
+					{gameCards.map((card) => (
+						<GameCard key={card.id} card={card} />
+					))}
+				</Section>
+			)}
+		</>
+	);
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 21fcce5..6f02f97 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -16,7 +16,7 @@
   --color-ac2: #8ec07c;
 
   --app-width: 70%;
-  font-size: calc((100vw / 1920) * 24);
+  font-size: calc((100vw / 1920) * 20);
 }
 
 [data-theme="dark"] {
@@ -50,19 +50,16 @@ body {
   background-color: var(--color-bg0);
 }
 
-@media (max-width: 1280px) {
-  :root {
-    --app-width: 100%;
-  }
-}
 
 @media (max-width: 1024px) {
   :root {
     font-size: calc((100vw / 1920) * 56);
+    --app-width: 100%;
   }
 }
+
 @media (max-width: 640px) {
   :root {
     font-size: calc((100vw / 1920) * 64);
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/how_to_download/page.tsx b/src/app/how_to_download/page.tsx
index 18fdaff..6b04415 100644
--- a/src/app/how_to_download/page.tsx
+++ b/src/app/how_to_download/page.tsx
@@ -1,61 +1,61 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: ".Torrent: Как скачать?",
-  description:
-    ".Torrent: Как скачать? - краткое руководство по скачиваю данных с помощью .torrent файлов",
+	title: ".Torrent: Как скачать?",
+	description:
+		".Torrent: Как скачать? - краткое руководство по скачиваю данных с помощью .torrent файлов",
 };
 
 export default async function HowToDownload() {
-  return (
-    <div className="w-full flex flex-col lp:flex-row justify-between p-4">
-      <div className="w-full p-4 lp:w-[50%] lp:pr-10">
-        <h1 className="text-4xl lp:text-3xl">Как скачать?</h1>
-        <div className="text-fg4 text-justify pt-2">
-          Чтобы скачать что-либо с помощью торрент-файла, выполните следующие
-          шаги:
-          <ul className="*:text-fg4">
-            <li>
-              1. Найдите и загрузите торрент-файл или magnet-ссылку, содержащую
-              информацию о файле, который вы хотите скачать.
-            </li>
-            <li>
-              2. Откройте программу-клиент для загрузки торрентов, например,
-              uTorrent, BitTorrent или qBittorrent.
-            </li>
-            <li>
-              3. В программе-клиенте выберите опцию "Open Torrent File" или "Add
-              Torrent" и выберите торрент-файл, который вы скачали в первом
-              шаге.
-            </li>
-            <li>
-              4. После этого начнется загрузка файлов, указанных в
-              торрент-файле. Вы также можете выбрать папку, куда сохранять
-              скачанные файлы.
-            </li>
-            <li>
-              5. Дождитесь завершения загрузки файлов. После этого вы сможете
-              открыть и использовать скачанные файлы на своем компьютере.
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className="w-full p-4 lp:w-[50%] lp:pl-10">
-        <h2 className="text-4xl lp:text-3xl">Что такое .torrent файл?</h2>
-        <p className="text-fg4 text-justify pt-2">
-          Торрент-файл (или .torrent-файл) - это небольшой файл, который
-          содержит метаданные о файле или наборе файлов, которые можно загрузить
-          с помощью протокола BitTorrent. В торрент-файле обычно указан адрес
-          трекера (специального сервера, отслеживающего пиров) и хеш-суммы
-          частей файлов, которые необходимы для скачивания.
-          <br />
-          <br /> Пользователь, желающий загрузить файл через BitTorrent, сначала
-          скачивает торрент-файл или magnet-ссылку, загружает ее в
-          торрент-клиент (программу для скачивания торрентов), и затем начинает
-          загрузку файлов, участвуя в обмене данными с другими пользователями
-          (пирами) через сеть BitTorrent.
-        </p>
-      </div>
-    </div>
-  );
+	return (
+		<div className="w-full flex flex-col lp:flex-row justify-between p-4">
+			<div className="w-full p-4 lp:w-[50%] lp:pr-10">
+				<h1 className="text-4xl lp:text-3xl">Как скачать?</h1>
+				<div className="text-fg4 text-justify pt-2">
+					Чтобы скачать данные с помощью торрент-файла, выполните следующие
+					шаги:
+					<ul className="*:text-fg4">
+						<li>
+							1. Загрузите торрент-файл, содержащий информацию о файлах, которые
+							вы хотите скачать с нашего сайта.
+						</li>
+						<li>
+							2. Откройте программу-клиент для загрузки торрентов, например,
+							uTorrent, BitTorrent или qBittorrent.
+						</li>
+						<li>
+							3. В программе-клиенте выберите опцию "Open Torrent File" или "Add
+							Torrent" и выберите торрент-файл, который вы скачали в первом
+							шаге.
+						</li>
+						<li>
+							4. После этого начнется загрузка файлов, указанных в
+							торрент-файле. Вы также можете выбрать папку, куда сохранять
+							скачанные файлы.
+						</li>
+						<li>
+							5. Дождитесь завершения загрузки файлов. После этого вы сможете
+							открыть и использовать скачанные файлы на своем компьютере.
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div className="w-full p-4 lp:w-[50%] lp:pl-10">
+				<h2 className="text-4xl lp:text-3xl">Что такое .torrent файл?</h2>
+				<p className="text-fg4 text-justify pt-2">
+					Торрент-файл (или .torrent-файл) - это небольшой файл, который
+					содержит метаданные о файле или наборе файлов, которые можно загрузить
+					с помощью протокола BitTorrent. В торрент-файле обычно указан адрес
+					трекера (специального сервера, отслеживающего пиров) и хеш-суммы
+					частей файлов, которые необходимы для скачивания.
+					<br />
+					<br /> Пользователь, желающий загрузить файл через BitTorrent, сначала
+					скачивает торрент-файл или magnet-ссылку, загружает ее в
+					торрент-клиент (программу для скачивания торрентов), и затем начинает
+					загрузку файлов, участвуя в обмене данными с другими пользователями
+					(пирами) через сеть BitTorrent.
+				</p>
+			</div>
+		</div>
+	);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 54b1644..e224137 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
@@ -6,28 +5,22 @@ import { Header } from "@/widgets/header";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
-  title: ".Torrent",
-  description:
-    ".Torrent - сервис обмена .torrent файлами видеоигр, фильмов и аудиокниг",
-};
-
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  return (
-    // suppressHydrationWarning for theme support
-    <html lang="ru" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ThemeProvider enableSystem={false} defaultTheme="light">
-          <Header />
-          <div className="w-full h-full max-w-[var(--app-width)] m-auto">
-            {children}
-          </div>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
+	return (
+		// suppressHydrationWarning for theme support
+		<html lang="ru" suppressHydrationWarning>
+			<body className={inter.className}>
+				<ThemeProvider enableSystem={false} defaultTheme="light">
+					<Header />
+					<div className="w-full h-full max-w-[var(--app-width)] m-auto">
+						{children}
+					</div>
+				</ThemeProvider>
+			</body>
+		</html>
+	);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 46a3ea4..482bb9e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,22 +1,29 @@
 import { GameService } from "@/entities/game";
 import { GameCard } from "@/features/gameCard";
 import { Section } from "@/widgets/section";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: ".Torrent",
+	description:
+		".Torrent - сервис обмена .torrent файлами видеоигр, фильмов и аудиокниг",
+};
 
 export default async function Home() {
-  const gameCards = await GameService.getGameCards();
-  return (
-    <>
-      {gameCards && gameCards.length > 0 && (
-        <Section
-          name="Игры"
-          link="/games"
-          invite_text={'Перейти в раздел "Игры"'}
-        >
-          {gameCards.map((card) => (
-            <GameCard key={card.id} card={card} />
-          ))}
-        </Section>
-      )}
-    </>
-  );
+	const gameCards = await GameService.getGameCards();
+	return (
+		<>
+			{gameCards && gameCards.length > 0 && (
+				<Section
+					name="Игры"
+					link="/games"
+					invite_text={'Перейти в раздел "Игры"'}
+				>
+					{gameCards.map((card) => (
+						<GameCard key={card.id} card={card} />
+					))}
+				</Section>
+			)}
+		</>
+	);
 }
diff --git a/src/features/gameCard/gameCard.tsx b/src/features/gameCard/gameCard.tsx
index c330df1..9862ca5 100644
--- a/src/features/gameCard/gameCard.tsx
+++ b/src/features/gameCard/gameCard.tsx
@@ -3,30 +3,30 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const GameCard = ({ card }: { card: GameCardType }) => {
-  return (
-    <Link className="group/gamecard cursor-pointer" href={"/games/" + card.id}>
-      {!!card.cover_preview && (
-        <Image
-          src={card.cover_preview}
-          className="rounded-lg"
-          alt=""
-          width={700}
-          height={400}
-        />
-      )}
-      <div className="flex items-center justify-between pr-2">
-        <h2 className="text-2xl py-1 group-hover/gamecard:underline underline-offset-4">
-          {card.title}
-        </h2>
-        {card.version && (
-          <span className="text-xs max-w-[30%] line-clamp-2 text-fg4">
-            {card.version}
-          </span>
-        )}
-      </div>
-      <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
-        {card.description}
-      </p>
-    </Link>
-  );
+	return (
+		<Link className="group/gamecard cursor-pointer" href={"/games/" + card.id}>
+			{!!card.cover_preview && (
+				<Image
+					src={card.cover_preview}
+					className="rounded-lg object-contain"
+					alt=""
+					width={1280}
+					height={720}
+				/>
+			)}
+			<div className="flex items-center justify-between pr-2">
+				<h2 className="text-3xl tb:text-xl py-1 group-hover/gamecard:underline underline-offset-4">
+					{card.title}
+				</h2>
+				{card.version && (
+					<span className="text-xs max-w-[30%] text-right line-clamp-2 text-fg4">
+						{card.version}
+					</span>
+				)}
+			</div>
+			<p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+				{card.description}
+			</p>
+		</Link>
+	);
 };
diff --git a/src/shared/utils/get_youtube_id.ts b/src/shared/utils/get_youtube_id.ts
new file mode 100644
index 0000000..6f77763
--- /dev/null
+++ b/src/shared/utils/get_youtube_id.ts
@@ -0,0 +1,6 @@
+export const getYouTubeID = (url: string) => {
+	const regExp =
+		/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+	const match = url.match(regExp);
+	return match && match[7].length == 11 ? match[7] : false;
+};
diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
new file mode 100644
index 0000000..6ff29e9
--- /dev/null
+++ b/src/shared/utils/index.ts
@@ -0,0 +1,3 @@
+import { getYouTubeID } from "./get_youtube_id";
+
+export { getYouTubeID };
diff --git a/src/widgets/header/header.tsx b/src/widgets/header/header.tsx
index bb1b2f4..69581e6 100644
--- a/src/widgets/header/header.tsx
+++ b/src/widgets/header/header.tsx
@@ -1,62 +1,71 @@
+"use client";
+
 import { SchemeSwitch } from "@/features/colorSchemeSwitch";
 import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
 import { MobileMenu } from "./mobileMenu/mobileMenu";
 import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import clsx from "clsx";
 
 const sections = [
-  { title: "Игры", href: "/games" },
-  { title: "Фильмы", href: "/films" },
-  { title: "Аудиокниги", href: "/audiobooks" },
+	{ title: "Игры", href: "games" },
+	{ title: "Фильмы", href: "films" },
+	{ title: "Аудиокниги", href: "audiobooks" },
 ];
 
 export const Header = () => {
-  return (
-    <header className="w-full h-20 bg-bg1 sticky top-0">
-      <div
-        className="w-full h-full max-w-[var(--app-width)] m-auto px-5
+	const currentPageName = useSelectedLayoutSegment();
+
+	return (
+		<header className="w-full h-20 bg-bg1 sticky top-0 shadow-xl">
+			<div
+				className="w-full h-full max-w-[var(--app-width)] m-auto px-5
               flex items-center justify-between"
-      >
-        <h1 className="text-4xl font-bold flex items-center">
-          <div className="lp:hidden">
-            <MobileMenu sections={sections} />
-          </div>
-          <Link href="/">.Torrent</Link>
-        </h1>
-        <div className="hidden text-2xl dsk:block">
-          {sections.map((section) => (
-            <Link
-              key={section.title}
-              className="px-5 cursor-pointer hover:underline"
-              href={section.href}
-            >
-              {section.title}
-            </Link>
-          ))}
-        </div>
-        <div className="flex flex-col items-end">
-          <span className="flex items-center mb-1 ">
-            <SchemeSwitch />
-            <span className="cursor-pointer flex items-center">
-              <PersonIcon className="mr-1 h-4 w-4" />
-              Войти
-            </span>
-          </span>
-          <label className="flex flex-col items-start relative w-36">
-            <input
-              className="peer/search w-full rounded-lg bg-bg4 px-2"
-              placeholder=" "
-            />
-            <span
-              className="peer-focus/search:opacity-0 
+			>
+				<h1 className="text-4xl font-bold flex items-center">
+					<div className="lp:hidden">
+						<MobileMenu sections={sections} />
+					</div>
+					<Link href="/">.Torrent</Link>
+				</h1>
+				<div className="hidden text-2xl dsk:block">
+					{sections.map((section) => (
+						<Link
+							key={section.title}
+							className={clsx(
+								"px-5 cursor-pointer hover:underline underline-offset-2",
+								currentPageName === section.href && "underline"
+							)}
+							href={section.href}
+						>
+							{section.title}
+						</Link>
+					))}
+				</div>
+				<div className="flex flex-col items-end">
+					<span className="flex items-center mb-1 ">
+						<SchemeSwitch />
+						<span className="cursor-pointer flex items-center">
+							<PersonIcon className="mr-1 h-4 w-4" />
+							Войти
+						</span>
+					</span>
+					<label className="flex flex-col items-start relative w-36">
+						<input
+							className="peer/search w-full rounded-lg bg-bg4 px-2"
+							placeholder=" "
+						/>
+						<span
+							className="peer-focus/search:opacity-0 
                   				peer-[:not(:placeholder-shown)]/search:opacity-0 
                   				transition-opacity h-0 flex items-center relative bottom-3"
-            >
-              <SearchIcon className="w-4 h-4 mx-2" />
-              Поиск
-            </span>
-          </label>
-        </div>
-      </div>
-    </header>
-  );
+						>
+							<SearchIcon className="w-4 h-4 mx-2" />
+							Поиск
+						</span>
+					</label>
+				</div>
+			</div>
+		</header>
+	);
 };
diff --git a/src/widgets/section/section.tsx b/src/widgets/section/section.tsx
index 8e184dd..e138174 100644
--- a/src/widgets/section/section.tsx
+++ b/src/widgets/section/section.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 
 export const Section = ({
 	name,
@@ -17,7 +18,7 @@ export const Section = ({
 	const router = useRouter();
 
 	return (
-		<section className="w-full h-fit p-5 mb-20 pt-8">
+		<section className="w-full h-fit p-2 mb-20 pt-8">
 			{name && (
 				<h2
 					className="text-4xl pb-2 cursor-pointer w-fit"
@@ -26,12 +27,15 @@ export const Section = ({
 					{name}
 				</h2>
 			)}
-			<div className="grid grid-cols-1 tb:grid-cols-2 lp:grid-cols-3 gap-y-10 gap-x-3">
-				{children}
-			</div>
+			<ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}>
+				<Masonry gutter="1rem">{children}</Masonry>
+			</ResponsiveMasonry>
 			{link && invite_text && (
 				<div className="w-full flex justify-end pt-5">
-					<Link href={link} className="text-lg">
+					<Link
+						href={link}
+						className="text-lg hover:underline underline-offset-4"
+					>
 						{invite_text}
 					</Link>
 				</div>