From 329448c9fca8e5c10bdb4e9ecf11e123dd456a14 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 4 Apr 2025 00:29:19 +0500
Subject: [PATCH] chore: migrate to new flowbite-react

---
 .flowbite-react/.gitignore                    |   2 +
 .flowbite-react/config.json                   |   9 +
 app/App.tsx                                   |  12 +-
 .../ChangelogModal/ChangelogModal.tsx         |  28 +-
 app/components/Comments/Comments.Add.tsx      |  12 +-
 app/components/Comments/Comments.Comment.tsx  |  10 +-
 app/components/Comments/Comments.Edit.tsx     |  12 +-
 app/components/Comments/Comments.Main.tsx     |   6 +-
 app/components/CropModal/CropModal.tsx        |  12 +-
 .../Profile/Profile.BlockedUsersModal.tsx     |   4 +-
 .../Profile/Profile.EditLoginModal.tsx        |  12 +-
 app/components/Profile/Profile.EditModal.tsx  |   8 +-
 .../Profile/Profile.EditPrivacyModal.tsx      |   8 +-
 .../Profile/Profile.EditSocialModal.tsx       |  31 +-
 .../Profile/Profile.EditStatusModal.tsx       |  12 +-
 .../Profile/Profile.ReleaseRatings.tsx        |  10 +-
 .../ReleaseInfo/ReleaseInfo.Info.tsx          |  78 ++--
 .../ReleaseInfo/ReleaseInfo.Rating.tsx        | 132 ++++---
 .../ReleaseInfo/ReleaseInfo.UserList.tsx      |   8 +-
 .../ReleasePlayer/ReleasePlayer.tsx           |  10 +-
 .../ReleasePlayer/SourceSelector.tsx          |   6 +-
 .../ReleasePlayer/VoiceoverSelector.tsx       |  10 +-
 .../SettingsModal/SettingsModal.tsx           |  42 ++-
 app/pages/BookmarksCategory.tsx               |  10 +-
 app/pages/CreateCollection.tsx                |  25 +-
 app/pages/Favorites.tsx                       |   6 +-
 app/pages/IndexCategory.tsx                   |   6 +-
 app/pages/Search.tsx                          |  24 +-
 next.config.js                                |  71 ++--
 package-lock.json                             | 357 +++++++++++++++---
 package.json                                  |   7 +-
 tailwind.config.js                            |  14 +-
 32 files changed, 650 insertions(+), 344 deletions(-)
 create mode 100644 .flowbite-react/.gitignore
 create mode 100644 .flowbite-react/config.json

diff --git a/.flowbite-react/.gitignore b/.flowbite-react/.gitignore
new file mode 100644
index 0000000..da26dfd
--- /dev/null
+++ b/.flowbite-react/.gitignore
@@ -0,0 +1,2 @@
+class-list.json
+pid
\ No newline at end of file
diff --git a/.flowbite-react/config.json b/.flowbite-react/config.json
new file mode 100644
index 0000000..d04ad92
--- /dev/null
+++ b/.flowbite-react/config.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://unpkg.com/flowbite-react/schema.json",
+  "components": [],
+  "dark": true,
+  "prefix": "",
+  "path": "src/components",
+  "tsx": true,
+  "rsc": true
+}
\ No newline at end of file
diff --git a/app/App.tsx b/app/App.tsx
index 69d1288..3733cd1 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -4,7 +4,7 @@ import { usePreferencesStore } from "./store/preferences";
 import { Navbar } from "./components/Navbar/NavbarUpdate";
 import { Inter } from "next/font/google";
 import { useEffect, useState } from "react";
-import { Button, Modal } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 import { Spinner } from "./components/Spinner/Spinner";
 import { ChangelogModal } from "#/components/ChangelogModal/ChangelogModal";
 import PlausibleProvider from "next-plausible";
@@ -80,8 +80,8 @@ export const App = (props) => {
         show={preferencesStore.params.isFirstLaunch}
         onClose={() => preferencesStore.setParams({ isFirstLaunch: false })}
       >
-        <Modal.Header>Внимание</Modal.Header>
-        <Modal.Body>
+        <ModalHeader>Внимание</ModalHeader>
+        <ModalBody>
           <p>
             Данный сайт не связан с разработчиками приложения Anixart, это
             неофициальная имплементация веб клиента для этого приложения.
@@ -94,15 +94,15 @@ export const App = (props) => {
             На сайте могут присутствовать ошибки и не доработки, а так-же
             отсутствующий функционал.
           </p>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <Button
             color={"blue"}
             onClick={() => preferencesStore.setParams({ isFirstLaunch: false })}
           >
             Принимаю
           </Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
       {preferencesStore.flags.enableAnalytics && (
         <PlausibleProvider
diff --git a/app/components/ChangelogModal/ChangelogModal.tsx b/app/components/ChangelogModal/ChangelogModal.tsx
index 294ef8f..9cd52cf 100644
--- a/app/components/ChangelogModal/ChangelogModal.tsx
+++ b/app/components/ChangelogModal/ChangelogModal.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { Modal, Accordion } from "flowbite-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionPanel,
+  AccordionTitle,
+  Modal,
+  ModalBody,
+  ModalHeader,
+} from "flowbite-react";
 import Markdown from "markdown-to-jsx";
 import { useEffect, useState } from "react";
 import Styles from "./ChangelogModal.module.css";
@@ -37,8 +45,8 @@ export const ChangelogModal = (props: {
 
   return (
     <Modal show={props.isOpen} onClose={() => props.setIsOpen(false)}>
-      <Modal.Header>Список изменений v{props.version}</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Список изменений v{props.version}</ModalHeader>
+      <ModalBody>
         <Markdown className={Styles.markdown}>
           {currentVersionChangelog}
         </Markdown>
@@ -46,8 +54,8 @@ export const ChangelogModal = (props: {
           {props.previousVersions.length > 0 &&
             props.previousVersions.map((version) => {
               return (
-                <Accordion.Panel key={version}>
-                  <Accordion.Title
+                <AccordionPanel key={version}>
+                  <AccordionTitle
                     onClickCapture={(e) => {
                       if (!previousVersionsChangelog.hasOwnProperty(version)) {
                         _fetchVersionChangelog(version).then((data) => {
@@ -62,19 +70,19 @@ export const ChangelogModal = (props: {
                     }}
                   >
                     Список изменений v{version}
-                  </Accordion.Title>
-                  <Accordion.Content>
+                  </AccordionTitle>
+                  <AccordionContent>
                     {previousVersionsChangelog.hasOwnProperty(version) ?
                       <Markdown className={Styles.markdown}>
                         {previousVersionsChangelog[version]}
                       </Markdown>
                     : <div>Загрузка ...</div>}
-                  </Accordion.Content>
-                </Accordion.Panel>
+                  </AccordionContent>
+                </AccordionPanel>
               );
             })}
         </Accordion>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/app/components/Comments/Comments.Add.tsx b/app/components/Comments/Comments.Add.tsx
index 66ffee8..edec270 100644
--- a/app/components/Comments/Comments.Add.tsx
+++ b/app/components/Comments/Comments.Add.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, ToggleSwitch, Label, Textarea } from "flowbite-react";
+import { Button, Label, Modal, ModalBody, ModalHeader, Textarea, ToggleSwitch } from "flowbite-react";
 import { CommentsComment } from "./Comments.Comment";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
@@ -68,12 +68,12 @@ export const CommentsAddModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <p className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
           {props.isReply ? "Ответ на комментарий" : "Оставить комментарий"}
         </p>
-      </Modal.Header>
-      <Modal.Body>
+      </ModalHeader>
+      <ModalBody>
         {props.isReply && (
           <div className="mb-4">
             <CommentsComment
@@ -98,7 +98,7 @@ export const CommentsAddModal = (props: {
         <form className="flex flex-col gap-4" onSubmit={(e) => _sendComment(e)}>
           <div>
             <div className="block mb-2 sr-only">
-              <Label htmlFor="comment" value="Ваш комментарий." />
+              <Label htmlFor="comment">Ваш комментарий.</Label>
             </div>
             <Textarea
               id="comment"
@@ -132,7 +132,7 @@ export const CommentsAddModal = (props: {
             </Button>
           </div>
         </form>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/app/components/Comments/Comments.Comment.tsx b/app/components/Comments/Comments.Comment.tsx
index 87e93da..4b2953c 100644
--- a/app/components/Comments/Comments.Comment.tsx
+++ b/app/components/Comments/Comments.Comment.tsx
@@ -1,7 +1,7 @@
 import { unixToDate, sinceUnixDate } from "#/api/utils";
 import { useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
-import { Button, Dropdown } from "flowbite-react";
+import { Button, Dropdown, DropdownItem } from "flowbite-react";
 import Link from "next/link";
 import { CommentsAddModal } from "./Comments.Add";
 import { CommentsEditModal } from "./Comments.Edit";
@@ -183,12 +183,12 @@ export const CommentsComment = (props: {
                 <span className="w-6 h-6 bg-gray-400 iconify mdi--more-horiz hover:bg-gray-800 active:bg-gray-800"></span>
               )}
             >
-              <Dropdown.Item onClick={() => setIsEditCommentsOpen(true)}>
+              <DropdownItem onClick={() => setIsEditCommentsOpen(true)}>
                 Редактировать
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => _deleteComment()}>
+              </DropdownItem>
+              <DropdownItem onClick={() => _deleteComment()}>
                 Удалить
-              </Dropdown.Item>
+              </DropdownItem>
             </Dropdown>
           )}
         </footer>
diff --git a/app/components/Comments/Comments.Edit.tsx b/app/components/Comments/Comments.Edit.tsx
index 2108d02..4cc7fd6 100644
--- a/app/components/Comments/Comments.Edit.tsx
+++ b/app/components/Comments/Comments.Edit.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, ToggleSwitch, Label, Textarea } from "flowbite-react";
+import { Button, Label, Modal, ModalBody, ModalHeader, Textarea, ToggleSwitch } from "flowbite-react";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 
@@ -56,16 +56,16 @@ export const CommentsEditModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <p className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
           Редактировать комментарий
         </p>
-      </Modal.Header>
-      <Modal.Body>
+      </ModalHeader>
+      <ModalBody>
         <form className="flex flex-col gap-4" onSubmit={(e) => _sendComment(e)}>
           <div>
             <div className="block mb-2 sr-only">
-              <Label htmlFor="comment" value="Редактировать ваш комментарий." />
+              <Label htmlFor="comment" >Редактировать ваш комментарий.</Label>
             </div>
             <Textarea
               id="comment"
@@ -99,7 +99,7 @@ export const CommentsEditModal = (props: {
             </Button>
           </div>
         </form>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/app/components/Comments/Comments.Main.tsx b/app/components/Comments/Comments.Main.tsx
index c3fa006..3411918 100644
--- a/app/components/Comments/Comments.Main.tsx
+++ b/app/components/Comments/Comments.Main.tsx
@@ -1,4 +1,4 @@
-import { Card, Button, Modal, Spinner } from "flowbite-react";
+import { Button, Card, Modal, ModalHeader, Spinner } from "flowbite-react";
 import { CommentsComment } from "./Comments.Comment";
 import { useState, useEffect, useCallback } from "react";
 import { ENDPOINTS } from "#/api/config";
@@ -149,7 +149,7 @@ const CommentsAllModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <div className="flex flex-col gap-1">
           <h2 className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
             Все комментарии
@@ -158,7 +158,7 @@ const CommentsAllModal = (props: {
             всего: {isLoading ? "загрузка..." : data[0].total_count}
           </p>
         </div>
-      </Modal.Header>
+      </ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}
diff --git a/app/components/CropModal/CropModal.tsx b/app/components/CropModal/CropModal.tsx
index 7f42690..86b48eb 100644
--- a/app/components/CropModal/CropModal.tsx
+++ b/app/components/CropModal/CropModal.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import Cropper, { ReactCropperElement } from "react-cropper";
 import "cropperjs/dist/cropper.css";
-import { Button, Modal } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 
 type CropModalProps = {
   isOpen: boolean;
@@ -71,8 +71,8 @@ export const CropModal: React.FC<CropModalProps> = ({
       }}
       size={"7xl"}
     >
-      <Modal.Header>Обрезать изображение</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Обрезать изображение</ModalHeader>
+      <ModalBody>
         <Cropper
           src={selectedImage}
           style={{ height: 400, width: "100%" }}
@@ -95,8 +95,8 @@ export const CropModal: React.FC<CropModalProps> = ({
           </p>
           <p>Используйте колёсико мыши что-бы изменить масштаб</p>
         </div>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color={"blue"}
           disabled={isActionsDisabled}
@@ -120,7 +120,7 @@ export const CropModal: React.FC<CropModalProps> = ({
         >
           Отменить
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/app/components/Profile/Profile.BlockedUsersModal.tsx b/app/components/Profile/Profile.BlockedUsersModal.tsx
index d127a87..8262294 100644
--- a/app/components/Profile/Profile.BlockedUsersModal.tsx
+++ b/app/components/Profile/Profile.BlockedUsersModal.tsx
@@ -1,6 +1,6 @@
 import { ENDPOINTS } from "#/api/config";
 import { tryCatchAPI, unixToDate, useSWRfetcher } from "#/api/utils";
-import { Avatar, Button, Modal, useThemeMode } from "flowbite-react";
+import { Avatar, Button, Modal, ModalHeader, useThemeMode } from "flowbite-react";
 import { useCallback, useEffect, useState } from "react";
 import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
@@ -130,7 +130,7 @@ export const ProfileBlockedUsersModal = (props: {
         onClose={() => props.setIsOpen(false)}
         size={"7xl"}
       >
-        <Modal.Header>Заблокированные пользователи</Modal.Header>
+        <ModalHeader>Заблокированные пользователи</ModalHeader>
         <div
           className="flex flex-col gap-2 p-4 overflow-y-auto"
           onScroll={handleScroll}
diff --git a/app/components/Profile/Profile.EditLoginModal.tsx b/app/components/Profile/Profile.EditLoginModal.tsx
index 984fabe..ea07e61 100644
--- a/app/components/Profile/Profile.EditLoginModal.tsx
+++ b/app/components/Profile/Profile.EditLoginModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -138,8 +138,8 @@ export const ProfileEditLoginModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Изменить никнейм</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить никнейм</ModalHeader>
+      <ModalBody>
         {loading ?
           <div className="flex items-center justify-center py-8">
             <Spinner />
@@ -173,8 +173,8 @@ export const ProfileEditLoginModal = (props: {
             }
           </>
         }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         {_loginData.is_change_available && (
           <Button
             color="blue"
@@ -191,7 +191,7 @@ export const ProfileEditLoginModal = (props: {
         >
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/app/components/Profile/Profile.EditModal.tsx b/app/components/Profile/Profile.EditModal.tsx
index 3b01f0b..d20b39c 100644
--- a/app/components/Profile/Profile.EditModal.tsx
+++ b/app/components/Profile/Profile.EditModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FileInput, Label, Modal, useThemeMode } from "flowbite-react";
+import { FileInput, Label, Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import useSWR from "swr";
 import { ENDPOINTS } from "#/api/config";
@@ -201,8 +201,8 @@ export const ProfileEditModal = (props: {
         onClose={() => props.setIsOpen(false)}
         size={"7xl"}
       >
-        <Modal.Header>Редактирование профиля</Modal.Header>
-        <Modal.Body>
+        <ModalHeader>Редактирование профиля</ModalHeader>
+        <ModalBody>
           {prefLoading ?
             <Spinner />
           : <div className="flex flex-col gap-4">
@@ -394,7 +394,7 @@ export const ProfileEditModal = (props: {
               </div>
             </div>
           }
-        </Modal.Body>
+        </ModalBody>
       </Modal>
       {props.token ?
         <>
diff --git a/app/components/Profile/Profile.EditPrivacyModal.tsx b/app/components/Profile/Profile.EditPrivacyModal.tsx
index 59c8bdb..9311edf 100644
--- a/app/components/Profile/Profile.EditPrivacyModal.tsx
+++ b/app/components/Profile/Profile.EditPrivacyModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Modal, useThemeMode } from "flowbite-react";
+import { Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -98,8 +98,8 @@ export const ProfileEditPrivacyModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>{setting_text[props.setting]}</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>{setting_text[props.setting]}</ModalHeader>
+      <ModalBody>
         {props.setting != "none" ?
           <>
             <div className="flex flex-col gap-2">
@@ -202,7 +202,7 @@ export const ProfileEditPrivacyModal = (props: {
             </div>
           </>
         : ""}
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/app/components/Profile/Profile.EditSocialModal.tsx b/app/components/Profile/Profile.EditSocialModal.tsx
index 128c418..244e689 100644
--- a/app/components/Profile/Profile.EditSocialModal.tsx
+++ b/app/components/Profile/Profile.EditSocialModal.tsx
@@ -1,6 +1,15 @@
 "use client";
 
-import { Button, Modal, Label, TextInput, useThemeMode } from "flowbite-react";
+import {
+  Button,
+  Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+  useThemeMode,
+} from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
@@ -164,8 +173,8 @@ export const ProfileEditSocialModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Соц. сети</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Соц. сети</ModalHeader>
+      <ModalBody>
         <p className="p-2 text-gray-400 border-2 border-gray-200 rounded-md dark:border-gray-500 dark:text-gray-300">
           Укажите ссылки на свои социальные сети, чтобы другие пользователи
           могли с вами связаться
@@ -177,7 +186,7 @@ export const ProfileEditSocialModal = (props: {
         : <div className="flex flex-col gap-4 py-4">
             <div>
               <div className="block mb-2">
-                <Label htmlFor="vk-page" value="ВКонтакте" />
+                <Label htmlFor="vk-page">ВКонтакте</Label>
               </div>
               <TextInput
                 id="vk-page"
@@ -189,7 +198,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="tg-page" value="Telegram" />
+                <Label htmlFor="tg-page">Telegram</Label>
               </div>
               <TextInput
                 id="tg-page"
@@ -201,7 +210,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="discord-page" value="Discord" />
+                <Label htmlFor="discord-page">Discord</Label>
               </div>
               <TextInput
                 id="discord-page"
@@ -213,7 +222,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="inst-page" value="Instagram" />
+                <Label htmlFor="inst-page">Instagram</Label>
               </div>
               <TextInput
                 id="inst-page"
@@ -225,7 +234,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="tt-page" value="TikTok" />
+                <Label htmlFor="tt-page">TikTok</Label>
               </div>
               <TextInput
                 id="tt-page"
@@ -237,8 +246,8 @@ export const ProfileEditSocialModal = (props: {
             </div>
           </div>
         }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color="blue"
           onClick={() => _setSocialSetting()}
@@ -253,7 +262,7 @@ export const ProfileEditSocialModal = (props: {
         >
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/app/components/Profile/Profile.EditStatusModal.tsx b/app/components/Profile/Profile.EditStatusModal.tsx
index d8d870f..13cafbe 100644
--- a/app/components/Profile/Profile.EditStatusModal.tsx
+++ b/app/components/Profile/Profile.EditStatusModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -96,8 +96,8 @@ export const ProfileEditStatusModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Изменить статус</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить статус</ModalHeader>
+      <ModalBody>
         <Textarea
           disabled={loading}
           rows={3}
@@ -111,8 +111,8 @@ export const ProfileEditStatusModal = (props: {
         <p className="text-sm text-right text-gray-500 dark:text-gray-300">
           {_stringLength}/80
         </p>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color="blue"
           onClick={() => _setStatusSetting()}
@@ -123,7 +123,7 @@ export const ProfileEditStatusModal = (props: {
         <Button color="red" onClick={() => props.setIsOpen(false)}>
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx
index c93e69f..108a522 100644
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@@ -1,10 +1,4 @@
-import {
-  Card,
-  RatingStar,
-  Rating,
-  Modal,
-  Button,
-} from "flowbite-react";
+import { Button, Card, Modal, ModalHeader, Rating, RatingStar } from "flowbite-react";
 
 import { unixToDate, useSWRfetcher } from "#/api/utils";
 import Link from "next/link";
@@ -119,7 +113,7 @@ const ProfileReleaseRatingsModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Оценки</Modal.Header>
+      <ModalHeader>Оценки</ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
index ae0219e..631ca88 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
@@ -1,4 +1,4 @@
-import { Card, Table } from "flowbite-react";
+import { Card, Table, TableBody, TableCell, TableRow } from "flowbite-react";
 import { ReleaseInfoSearchLink } from "#/components/ReleaseInfo/ReleaseInfo.SearchLink";
 import { unixToDate, minutesToTime } from "#/api/utils";
 const weekDay = [
@@ -30,9 +30,9 @@ export const ReleaseInfoInfo = (props: {
   return (
     <Card>
       <Table>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell className="py-0">
+        <TableBody>
+          <TableRow>
+            <TableCell className="py-0">
               {props.country ?
                 props.country.toLowerCase() == "япония" ?
                   <span className="w-8 h-8 iconify-color twemoji--flag-for-japan"></span>
@@ -40,45 +40,45 @@ export const ReleaseInfoInfo = (props: {
 
               : <span className="w-8 h-8 iconify-color twemoji--flag-for-united-nations "></span>
               }
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {props.country && props.country}
               {(props.aired_on_date != 0 || props.year) && ", "}
               {props.season && props.season != 0 ?
                 `${YearSeason[props.season]} `
               : ""}
               {props.year && `${props.year} г.`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {props.episodes.released ? props.episodes.released : "?"}
               {"/"}
               {props.episodes.total ? props.episodes.total + " эп. " : "? эп. "}
               {props.duration != 0 &&
                 `по ${minutesToTime(props.duration, "daysHours")}`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.category}
               {", "}
               {props.broadcast == 0 ?
                 props.status.toLowerCase()
               : `выходит ${weekDay[props.broadcast]}`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.studio && (
                 <>
                   {"Студия: "}
@@ -117,13 +117,13 @@ export const ReleaseInfoInfo = (props: {
                   />
                 </>
               )}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.genres &&
                 props.genres.split(", ").map((genre: string, index: number) => {
                   return (
@@ -133,14 +133,14 @@ export const ReleaseInfoInfo = (props: {
                     </div>
                   );
                 })}
-            </Table.Cell>
-          </Table.Row>
+            </TableCell>
+          </TableRow>
           {props.status.toLowerCase() == "анонс" && (
-            <Table.Row>
-              <Table.Cell className="py-0">
+            <TableRow>
+              <TableCell className="py-0">
                 <span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
-              </Table.Cell>
-              <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              </TableCell>
+              <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 {props.aired_on_date != 0 ?
                   unixToDate(props.aired_on_date, "full")
                 : props.year ?
@@ -151,10 +151,10 @@ export const ReleaseInfoInfo = (props: {
                     {props.year && `${props.year} г.`}
                   </>
                 : "Скоро"}
-              </Table.Cell>
-            </Table.Row>
+              </TableCell>
+            </TableRow>
           )}
-        </Table.Body>
+        </TableBody>
       </Table>
     </Card>
   );
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
index 6f78499..f63304f 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
@@ -1,20 +1,26 @@
 import {
-  Card,
-  Rating,
-  Flowbite,
   Button,
-  CustomFlowbiteTheme,
+  Card,
   Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Rating,
+  RatingAdvanced,
+  RatingStar,
+  RatingAdvancedTheme,
 } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 
-const RatingTheme: CustomFlowbiteTheme = {
-  ratingAdvanced: {
-    progress: {
-      base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
-    },
+const CustomRatingTheme: RatingAdvancedTheme = {
+  base: "flex items-center",
+  label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
+  progress: {
+    base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
+    fill: "h-5 rounded bg-yellow-400",
+    label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
   },
 };
 export const ReleaseInfoRating = (props: {
@@ -39,7 +45,7 @@ export const ReleaseInfoRating = (props: {
       <Card>
         <div className="flex flex-col gap-2 sm:items-center sm:flex-row">
           <Rating>
-            <Rating.Star />
+            <RatingStar />
             <p className="ml-2 text-sm font-bold dark:text-white">
               {props.grade.toFixed(2)} из 5
             </p>
@@ -48,7 +54,7 @@ export const ReleaseInfoRating = (props: {
             <>
               <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
               <div className="flex items-center gap-2">
-                {vote ? (
+                {vote ?
                   <>
                     <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
                       ваша оценка: {vote}
@@ -62,8 +68,7 @@ export const ReleaseInfoRating = (props: {
                       изменить
                     </Button>
                   </>
-                ) : (
-                  <Button
+                : <Button
                     size={"xs"}
                     className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
                     color="inline"
@@ -71,7 +76,7 @@ export const ReleaseInfoRating = (props: {
                   >
                     оценить
                   </Button>
-                )}
+                }
               </div>
             </>
           )}
@@ -80,47 +85,50 @@ export const ReleaseInfoRating = (props: {
           {props.votes.total}{" "}
           {numberDeclension(props.votes.total, "голос", "голоса", "голосов")}
         </p>
-        <Flowbite theme={{ theme: RatingTheme }}>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["5"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            5
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["4"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            4
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["3"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            3
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["2"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            2
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["1"] / props.votes.total) * 100
-            )}
-          >
-            1
-          </Rating.Advanced>
-        </Flowbite>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["5"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          5
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["4"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          4
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["3"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          3
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["2"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          2
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["1"] / props.votes.total) * 100
+          )}
+        >
+          1
+        </RatingAdvanced>
       </Card>
       <ReleaseInfoRatingModal
         isOpen={isRatingModalOpen}
@@ -178,8 +186,8 @@ const ReleaseInfoRatingModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Оценка</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Оценка</ModalHeader>
+      <ModalBody>
         <div>
           <div className="block sm:hidden">
             <Rating size="md" className="justify-center">
@@ -191,7 +199,7 @@ const ReleaseInfoRatingModal = (props: {
                   onMouseOut={() => setCurElement(0)}
                   onClick={() => setVote(element)}
                 >
-                  <Rating.Star
+                  <RatingStar
                     filled={index + 1 <= curElement || index + 1 <= vote}
                   />
                 </Button>
@@ -208,7 +216,7 @@ const ReleaseInfoRatingModal = (props: {
                   onMouseOut={() => setCurElement(0)}
                   onClick={() => setVote(element)}
                 >
-                  <Rating.Star
+                  <RatingStar
                     filled={index + 1 <= curElement || index + 1 <= vote}
                   />
                 </Button>
@@ -216,8 +224,8 @@ const ReleaseInfoRatingModal = (props: {
             </Rating>
           </div>
         </div>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <div className="flex gap-1 ml-auto">
           <Button
             disabled={isSending}
@@ -241,7 +249,7 @@ const ReleaseInfoRatingModal = (props: {
             Оценить
           </Button>
         </div>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
index b0fec48..bf2d5e1 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
@@ -5,7 +5,7 @@ import useSWRInfinite from "swr/infinite";
 import { useCallback, useEffect, useState } from "react";
 import { tryCatchAPI, useSWRfetcher } from "#/api/utils";
 import { toast } from "react-toastify";
-import { useThemeMode } from "flowbite-react";
+import { DropdownItem, ModalHeader, useThemeMode } from "flowbite-react";
 
 const lists = [
   { list: 0, name: "Не смотрю" },
@@ -174,12 +174,12 @@ export const ReleaseInfoUserList = (props: {
               disabled={listEventDisabled}
             >
               {lists.map((list) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={list.list}
                   onClick={() => _addToList(list.list)}
                 >
                   {list.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
             <Button
@@ -321,7 +321,7 @@ const AddReleaseToCollectionModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Выбор коллекции</Modal.Header>
+      <ModalHeader>Выбор коллекции</ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}
diff --git a/app/components/ReleasePlayer/ReleasePlayer.tsx b/app/components/ReleasePlayer/ReleasePlayer.tsx
index 94dbb2e..6c33e68 100644
--- a/app/components/ReleasePlayer/ReleasePlayer.tsx
+++ b/app/components/ReleasePlayer/ReleasePlayer.tsx
@@ -3,7 +3,7 @@
 import { Spinner } from "#/components/Spinner/Spinner";
 import { useUserStore } from "#/store/auth";
 import { useUserPlayerPreferencesStore } from "#/store/player";
-import { Card, Dropdown, Button } from "flowbite-react";
+import { Button, Card, Dropdown, DropdownItem } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -270,14 +270,14 @@ export const ReleasePlayer = (props: { id: number }) => {
               theme={DropdownTheme}
             >
               {voiceoverInfo.map((voiceover: any) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={`voiceover_${voiceover.id}`}
                   onClick={() =>
                     setSelectedVoiceoverAndSaveAsPreferred(voiceover)
                   }
                 >
                   {voiceover.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
             <Dropdown
@@ -286,12 +286,12 @@ export const ReleasePlayer = (props: { id: number }) => {
               theme={DropdownTheme}
             >
               {sourcesInfo.map((source: any) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={`source_${source.id}`}
                   onClick={() => setSelectedPlayerAndSaveAsPreferred(source)}
                 >
                   {source.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
           </div>
diff --git a/app/components/ReleasePlayer/SourceSelector.tsx b/app/components/ReleasePlayer/SourceSelector.tsx
index a8d0514..e02cbfb 100644
--- a/app/components/ReleasePlayer/SourceSelector.tsx
+++ b/app/components/ReleasePlayer/SourceSelector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Dropdown } from "flowbite-react";
+import { Dropdown, DropdownItem } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useUserPlayerPreferencesStore } from "#/store/player";
 
@@ -55,7 +55,7 @@ export const SourceSelector = (props: {
       )}
     >
       {props.availableSource.map((source: Source) => (
-        <Dropdown.Item
+        <DropdownItem
           key={`source_${source.id}`}
           onClick={() => {
             playerPreferenceStore.setPreferredPlayer(
@@ -69,7 +69,7 @@ export const SourceSelector = (props: {
           }}
         >
           <DropdownItem {...source} />
-        </Dropdown.Item>
+        </DropdownItem>
       ))}
     </Dropdown>
   );
diff --git a/app/components/ReleasePlayer/VoiceoverSelector.tsx b/app/components/ReleasePlayer/VoiceoverSelector.tsx
index 6ee2448..80cf8d1 100644
--- a/app/components/ReleasePlayer/VoiceoverSelector.tsx
+++ b/app/components/ReleasePlayer/VoiceoverSelector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Dropdown } from "flowbite-react";
+import { Dropdown, DropdownItem } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useUserPlayerPreferencesStore } from "#/store/player";
 
@@ -26,7 +26,7 @@ const DropdownTrigger = ({ icon, name, pinned }: Voiceover) => {
   );
 };
 
-const DropdownItem = ({
+const DropdownItemInternal = ({
   icon,
   name,
   pinned,
@@ -80,7 +80,7 @@ export const VoiceoverSelector = (props: {
       )}
     >
       {props.availableVoiceover.map((voiceover: Voiceover) => (
-        <Dropdown.Item
+        <DropdownItem
           className="w-fit"
           key={`voiceover_${voiceover.id}`}
           onClick={() => {
@@ -94,8 +94,8 @@ export const VoiceoverSelector = (props: {
             });
           }}
         >
-          <DropdownItem {...voiceover} />
-        </Dropdown.Item>
+          <DropdownItemInternal {...voiceover} />
+        </DropdownItem>
       ))}
     </Dropdown>
   );
diff --git a/app/components/SettingsModal/SettingsModal.tsx b/app/components/SettingsModal/SettingsModal.tsx
index 3786e80..8254957 100644
--- a/app/components/SettingsModal/SettingsModal.tsx
+++ b/app/components/SettingsModal/SettingsModal.tsx
@@ -4,12 +4,16 @@ import { CURRENT_APP_VERSION } from "#/api/config";
 import { useUserStore } from "#/store/auth";
 import { usePreferencesStore } from "#/store/preferences";
 import {
-  Modal,
   Button,
-  useThemeMode,
-  ToggleSwitch,
-  HR,
+  ButtonGroup,
   Dropdown,
+  DropdownItem,
+  HR,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ToggleSwitch,
+  useThemeMode,
 } from "flowbite-react";
 import Link from "next/link";
 
@@ -54,8 +58,8 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Настройки</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Настройки</ModalHeader>
+      <ModalBody>
         <div className="space-y-6">
           <div className="flex items-center gap-2">
             <span className="w-6 h-6 iconify material-symbols--palette-outline"></span>
@@ -63,7 +67,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
           </div>
           <div className="flex items-center justify-between">
             <p className=" dark:text-white">Тема</p>
-            <Button.Group>
+            <ButtonGroup>
               <Button
                 color={computedMode == "light" ? "blue" : "gray"}
                 onClick={() => setMode("light")}
@@ -76,7 +80,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               >
                 Темная
               </Button>
-            </Button.Group>
+            </ButtonGroup>
           </div>
           <div className="flex items-center justify-between">
             <p className=" dark:text-white max-w-96">
@@ -121,7 +125,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                 >
                   {Object.keys(HomeCategory).map((key) => {
                     return (
-                      <Dropdown.Item
+                      <DropdownItem
                         key={key}
                         onClick={() =>
                           preferenceStore.setParams({
@@ -133,7 +137,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                         }
                       >
                         {HomeCategory[key]}
-                      </Dropdown.Item>
+                      </DropdownItem>
                     );
                   })}
                 </Dropdown>
@@ -152,7 +156,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                 >
                   {Object.keys(BookmarksCategory).map((key) => {
                     return (
-                      <Dropdown.Item
+                      <DropdownItem
                         key={key}
                         onClick={() =>
                           preferenceStore.setParams({
@@ -164,7 +168,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                         }
                       >
                         {BookmarksCategory[key]}
-                      </Dropdown.Item>
+                      </DropdownItem>
                     );
                   })}
                 </Dropdown>
@@ -182,7 +186,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               {Object.keys(NavbarTitles).map(
                 (key: "always" | "links" | "selected" | "never") => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       className={`${key == "links" ? "hidden lg:flex" : ""}`}
                       key={`navbar-titles-${key}`}
                       onClick={() =>
@@ -192,7 +196,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                       }
                     >
                       {NavbarTitles[key]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 }
               )}
@@ -211,7 +215,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                   : "Нет"
                 }
               >
-                <Dropdown.Item
+                <DropdownItem
                   onClick={() =>
                     preferenceStore.setFlags({
                       showFifthButton: null,
@@ -219,10 +223,10 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                   }
                 >
                   Не показывать
-                </Dropdown.Item>
+                </DropdownItem>
                 {Object.keys(FifthButton).map((key) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       key={`navbar-fifthbutton-${key}`}
                       onClick={() =>
                         preferenceStore.setFlags({
@@ -231,7 +235,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                       }
                     >
                       {FifthButton[key]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
@@ -340,7 +344,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             </div>
           </Link>
         </div>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx
index ea4ed0b..b53b3fa 100644
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
-import { Dropdown, Button } from "flowbite-react";
+import { Button, ButtonGroup, Dropdown, DropdownItem } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { BookmarksList, useSWRfetcher } from "#/api/utils";
@@ -151,7 +151,7 @@ export function BookmarksCategoryPage(props: any) {
         </form>
       : ""}
       <div className="m-4 overflow-auto">
-        <Button.Group>
+        <ButtonGroup>
           <Button
             className="whitespace-nowrap"
             disabled={props.slug == "watching"}
@@ -222,7 +222,7 @@ export function BookmarksCategoryPage(props: any) {
           >
             {props.SectionTitleMapping["abandoned"]}
           </Button>
-        </Button.Group>
+        </ButtonGroup>
       </div>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
         <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
@@ -237,7 +237,7 @@ export function BookmarksCategoryPage(props: any) {
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (
-            <Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
+            <DropdownItem key={index} onClick={() => setSelectedSort(index)}>
               <span
                 className={`w-6 h-6 iconify ${
                   sort.values[index].value.split("_")[1] == "descending" ?
@@ -246,7 +246,7 @@ export function BookmarksCategoryPage(props: any) {
                 }`}
               ></span>
               {item.name}
-            </Dropdown.Item>
+            </DropdownItem>
           ))}
         </Dropdown>
       </div>
diff --git a/app/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx
index cd0c3b7..bdb690c 100644
--- a/app/pages/CreateCollection.tsx
+++ b/app/pages/CreateCollection.tsx
@@ -5,14 +5,15 @@ import { useEffect, useState, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { ENDPOINTS } from "#/api/config";
 import {
-  Card,
   Button,
+  Card,
   Checkbox,
-  TextInput,
-  Textarea,
   FileInput,
   Label,
   Modal,
+  ModalHeader,
+  Textarea,
+  TextInput,
   useThemeMode,
 } from "flowbite-react";
 import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
@@ -388,10 +389,9 @@ export const CreateCollectionPage = () => {
           </Label>
           <div className="flex-1">
             <div className="block mb-2">
-              <Label
-                htmlFor="title"
-                value="Название (минимум 10, максимум 60 символов)"
-              />
+              <Label htmlFor="title">
+                Название (минимум 10, максимум 60 символов)
+              </Label>
             </div>
             <TextInput
               id="title"
@@ -408,10 +408,9 @@ export const CreateCollectionPage = () => {
               {stringLength.title}/60
             </p>
             <div className="block mt-2 mb-2">
-              <Label
-                htmlFor="description"
-                value="Описание (максимум 1000 символов)"
-              />
+              <Label htmlFor="description">
+                Описание (максимум 1000 символов)
+              </Label>
             </div>
             <Textarea
               rows={4}
@@ -434,7 +433,7 @@ export const CreateCollectionPage = () => {
                   checked={isPrivate}
                   onChange={(e) => setIsPrivate(e.target.checked)}
                 />
-                <Label htmlFor="private" value="Приватная коллекция" />
+                <Label htmlFor="private">Приватная коллекция</Label>
               </div>
             </div>
             <Button
@@ -603,7 +602,7 @@ export const ReleasesEditModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"7xl"}
     >
-      <Modal.Header>Изменить релизы в коллекции</Modal.Header>
+      <ModalHeader>Изменить релизы в коллекции</ModalHeader>
       <div
         onScroll={handleScroll}
         ref={modalRef}
diff --git a/app/pages/Favorites.tsx b/app/pages/Favorites.tsx
index 9589599..238df86 100644
--- a/app/pages/Favorites.tsx
+++ b/app/pages/Favorites.tsx
@@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
-import { Dropdown, Button } from "flowbite-react";
+import { Button, Dropdown, DropdownItem } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
@@ -126,7 +126,7 @@ export function FavoritesPage() {
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (
-            <Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
+            <DropdownItem key={index} onClick={() => setSelectedSort(index)}>
               <span
                 className={`w-6 h-6 iconify ${
                   sort.values[index].value.split("_")[1] == "descending"
@@ -135,7 +135,7 @@ export function FavoritesPage() {
                 }`}
               ></span>
               {item.name}
-            </Dropdown.Item>
+            </DropdownItem>
           ))}
         </Dropdown>
       </div>
diff --git a/app/pages/IndexCategory.tsx b/app/pages/IndexCategory.tsx
index f79dbf7..f3ba11d 100644
--- a/app/pages/IndexCategory.tsx
+++ b/app/pages/IndexCategory.tsx
@@ -5,7 +5,7 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { _FetchHomePageReleases } from "#/api/utils";
-import { Button } from "flowbite-react";
+import { Button, ButtonGroup } from "flowbite-react";
 import { useRouter } from "next/navigation";
 
 export function IndexCategoryPage(props) {
@@ -53,13 +53,13 @@ export function IndexCategoryPage(props) {
   return (
     <>
       <div className="mb-4 overflow-auto">
-        <Button.Group>
+        <ButtonGroup>
           <Button className="whitespace-nowrap" disabled={props.slug == "last"} color="light" onClick={() => router.push("/home/last")}>{props.SectionTitleMapping["last"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "finished"} color="light" onClick={() => router.push("/home/finished")}>{props.SectionTitleMapping["finished"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "ongoing"} color="light" onClick={() => router.push("/home/ongoing")}>{props.SectionTitleMapping["ongoing"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "announce"} color="light" onClick={() => router.push("/home/announce")}>{props.SectionTitleMapping["announce"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "films"} color="light" onClick={() => router.push("/home/films")}>{props.SectionTitleMapping["films"]}</Button>
-        </Button.Group>
+        </ButtonGroup>
       </div>
       {content && content.length > 0 ? (
         <ReleaseSection
diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx
index f1ee103..bba699e 100644
--- a/app/pages/Search.tsx
+++ b/app/pages/Search.tsx
@@ -8,7 +8,7 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { useUserStore } from "../store/auth";
-import { Button, Dropdown, Modal } from "flowbite-react";
+import { Button, Dropdown, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
 import { UserSection } from "#/components/UserSection/UserSection";
 import { useSWRfetcher } from "#/api/utils";
@@ -360,8 +360,8 @@ const FiltersModal = (props: {
 
   return (
     <Modal show={props.isOpen} onClose={() => _cancel()}>
-      <Modal.Header>Фильтры</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Фильтры</ModalHeader>
+      <ModalBody>
         <div className="my-4">
           <div className="flex items-center justify-between">
             <p className="font-bold dark:text-white">Искать в</p>
@@ -376,12 +376,12 @@ const FiltersModal = (props: {
                   return <></>;
                 } else {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setWhere(item)}
                       key={`where--${item}`}
                     >
                       {WhereMapping[item]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 }
               })}
@@ -395,12 +395,12 @@ const FiltersModal = (props: {
               <Dropdown label={ListsMapping[list].name} color="blue">
                 {Object.keys(ListsMapping).map((item) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setList(item)}
                       key={`list--${item}`}
                     >
                       {ListsMapping[item].name}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
@@ -414,20 +414,20 @@ const FiltersModal = (props: {
               <Dropdown label={TagMapping[searchBy].name} color="blue">
                 {Object.keys(TagMapping).map((item) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setSearchBy(item)}
                       key={`tag--${item}`}
                     >
                       {TagMapping[item].name}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
             </div>
           </div>
         : ""}
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <div className="flex justify-end w-full gap-2">
           <Button color="red" onClick={() => _cancel()}>
             Отменить
@@ -436,7 +436,7 @@ const FiltersModal = (props: {
             Применить
           </Button>
         </div>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/next.config.js b/next.config.js
index 1b76294..627945f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,7 @@
 const { withPlausibleProxy } = require("next-plausible");
-
-module.exports = withPlausibleProxy({
-  customDomain: "https://analytics.wah.su",
-})({
+const withFlowbiteReact = require("flowbite-react/plugin/nextjs");
+/** @type {import('next').NextConfig} */
+const NextConfig = {
   reactStrictMode: false,
   images: {
     unoptimized: true,
@@ -10,68 +9,88 @@ module.exports = withPlausibleProxy({
   async headers() {
     return [
       {
-        source: '/bookmarks/:slug*',
+        source: "/bookmarks/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/collection/:slug*',
+        source: "/collection/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/home/:slug*',
+        source: "/home/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/profile/:slug*',
+        source: "/profile/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/release/:slug*',
+        source: "/release/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/related/:slug*',
+        source: "/related/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/search',
+        source: "/search",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
     ];
   },
-});
+};
+
+const config = () => {
+  const plugins = [withPlausibleProxy, withFlowbiteReact];
+  return (
+    plugins.reduce((acc, next) => {
+      console.log(`INIT: ${next.name}`);
+      if (next.name === "withPlausibleProxy") {
+        return next(acc, {
+          customDomain: "https://analytics.wah.su",
+        });
+      }
+
+      return next(acc);
+    }),
+    { ...NextConfig }
+  );
+};
+
+console.log(config());
+module.exports = config();
diff --git a/package-lock.json b/package-lock.json
index 3f175bf..7238a77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "apexcharts": "^3.52.0",
         "deepmerge-ts": "^7.1.0",
         "flowbite": "^2.4.1",
-        "flowbite-react": "^0.10.1",
+        "flowbite-react": "^0.11.7",
         "hls-video-element": "^1.5.0",
         "markdown-to-jsx": "^7.4.7",
         "media-chrome": "^4.8.0",
@@ -153,12 +153,12 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.6.tgz",
-      "integrity": "sha512-Vkvsw6EcpMHjvZZdMkSY+djMGFbt7CRssW99Ne8tar2WLnZ/l3dbxeTShbLQj+/s35h+Qb4cmnob+EzwtjrXGQ==",
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.6"
+        "@floating-ui/utils": "^0.2.9"
       }
     },
     "node_modules/@floating-ui/dom": {
@@ -172,18 +172,18 @@
       }
     },
     "node_modules/@floating-ui/react": {
-      "version": "0.26.21",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.21.tgz",
-      "integrity": "sha512-7P5ncDIiYd6RrwpCDbKyFzvabM014QlzlumtDbK3Bck0UueC+Rp8BLS34qcGBcN1pZCTodl4QNnCVmKv4tSxfQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.3.tgz",
+      "integrity": "sha512-CLHnes3ixIFFKVQDdICjel8muhFLOBdQH7fgtHNPY8UbCNqbeKZ262G7K66lGQOUQWWnYocf7ZbUsLJgGfsLHg==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/react-dom": "^2.1.1",
-        "@floating-ui/utils": "^0.2.6",
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.9",
         "tabbable": "^6.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
@@ -243,6 +243,12 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
+      "license": "ISC"
+    },
     "node_modules/@iconify-json/fa6-brands": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@iconify-json/fa6-brands/-/fa6-brands-1.2.5.tgz",
@@ -1619,6 +1625,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-timsort": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
+      "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==",
+      "license": "MIT"
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1749,6 +1761,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -2106,6 +2130,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/comment-json": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.2.5.tgz",
+      "integrity": "sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==",
+      "license": "MIT",
+      "dependencies": {
+        "array-timsort": "^1.0.3",
+        "core-util-is": "^1.0.3",
+        "esprima": "^4.0.1",
+        "has-own-prop": "^2.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2138,6 +2178,12 @@
         "webpack": "^5.1.0"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cropperjs": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
@@ -2245,9 +2291,9 @@
       }
     },
     "node_modules/debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz",
-      "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz",
+      "integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2260,7 +2306,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3049,6 +3094,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -3288,34 +3346,174 @@
       }
     },
     "node_modules/flowbite-react": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.10.2.tgz",
-      "integrity": "sha512-qkayK6IFmfH7zuuDnHmS0hJxLtL0KpW4vo4i/VQfZ6ZfaNlUsNLQxCGcmXwbZZtUm2WVw8x71aaDOAxftG9tmg==",
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.11.7.tgz",
+      "integrity": "sha512-Z8m+ycHEsXPacSAi8P4yYDeff7LvcHNwbGAnL/+Fpiv+6ZWDEAGY/YPKhUofZsZa837JTYrbcbmgjqQ1bpt51g==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "1.6.6",
-        "@floating-ui/react": "0.26.21",
+        "@floating-ui/core": "1.6.9",
+        "@floating-ui/react": "0.27.3",
+        "@iarna/toml": "2.2.5",
+        "@typescript-eslint/typescript-estree": "8.26.0",
+        "chokidar": "4.0.3",
         "classnames": "2.5.1",
-        "debounce": "2.1.0",
-        "flowbite": "2.5.1",
-        "react-icons": "5.2.1",
-        "tailwind-merge": "2.4.0"
+        "comment-json": "4.2.5",
+        "debounce": "2.2.0",
+        "deepmerge-ts": "7.1.4",
+        "klona": "2.0.6",
+        "package-manager-detector": "0.2.9",
+        "recast": "0.23.11",
+        "tailwind-merge-v2": "npm:tailwind-merge@2.6.0",
+        "tailwind-merge-v3": "npm:tailwind-merge@3.0.1"
+      },
+      "bin": {
+        "flowbite-react": "dist/cli/bin.js"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "tailwindcss": "^3"
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19",
+        "tailwindcss": "^3 || ^4"
       }
     },
-    "node_modules/flowbite-react/node_modules/flowbite": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.5.1.tgz",
-      "integrity": "sha512-7jP1jy9c3QP7y+KU9lc8ueMkTyUdMDvRP+lteSWgY5TigSZjf9K1kqZxmqjhbx2gBnFQxMl1GAjVThCa8cEpKA==",
+    "node_modules/flowbite-react/node_modules/@typescript-eslint/types": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.26.0.tgz",
+      "integrity": "sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.26.0.tgz",
+      "integrity": "sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==",
       "license": "MIT",
       "dependencies": {
-        "@popperjs/core": "^2.9.3",
-        "flowbite-datepicker": "^1.3.0",
-        "mini-svg-data-uri": "^1.4.3"
+        "@typescript-eslint/types": "8.26.0",
+        "@typescript-eslint/visitor-keys": "8.26.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.26.0.tgz",
+      "integrity": "sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.26.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/deepmerge-ts": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.4.tgz",
+      "integrity": "sha512-fxqo6nHGQ9zOVgI4KXqtWXJR/yCLtC7aXIVq+6jc8tHPFUxlFmuUcm2kC4vztQ+LJxQ3gER/XAWearGYQ8niGA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
       }
     },
     "node_modules/for-each": {
@@ -3660,6 +3858,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-own-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-own-prop/-/has-own-prop-2.0.0.tgz",
+      "integrity": "sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -4417,6 +4624,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -4670,7 +4886,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -5035,6 +5250,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.9.tgz",
+      "integrity": "sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5416,15 +5637,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-icons": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
-      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5478,6 +5690,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5522,6 +5750,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5790,7 +6027,6 @@
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
       "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -5984,9 +6220,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6458,10 +6692,22 @@
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
-    "node_modules/tailwind-merge": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
-      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
+    "node_modules/tailwind-merge-v2": {
+      "name": "tailwind-merge",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwind-merge-v3": {
+      "name": "tailwind-merge",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.1.tgz",
+      "integrity": "sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6621,6 +6867,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
@@ -6796,7 +7048,6 @@
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
       "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
diff --git a/package.json b/package.json
index 750aeb8..6519a9b 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "flowbite-react patch"
   },
   "dependencies": {
     "apexcharts": "^3.52.0",
     "deepmerge-ts": "^7.1.0",
     "flowbite": "^2.4.1",
-    "flowbite-react": "^0.10.1",
+    "flowbite-react": "^0.11.7",
     "hls-video-element": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
     "media-chrome": "^4.8.0",
@@ -43,4 +44,4 @@
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1"
   }
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6befeef..e25fe12 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,9 @@
 const { addIconSelectors } = require("@iconify/tailwind");
-import flowbite from "flowbite-react/tailwind";
+const flowbiteReact = require("flowbite-react/plugin/tailwindcss");
+
+flowbiteReact.config = {
+  charts: true,
+}
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -7,14 +11,12 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    flowbite.content(),
+    ".flowbite-react\\class-list.json"
   ],
   plugins: [
     addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
     require("tailwind-scrollbar"),
-    flowbite.plugin()({
-      charts: true,
-    }),
+    flowbiteReact
   ],
   darkMode: "selector",
   theme: {
@@ -43,4 +45,4 @@ module.exports = {
       },
     },
   },
-};
+};
\ No newline at end of file