From a628fe948a177a7803aa7555c0c22d10ec6fcb0b Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Thu, 7 Mar 2024 00:33:03 +0200
Subject: [PATCH] add typography, add diff to edit

---
 .../anime/[slug]/_components/about.tsx        |   9 +-
 .../actions/_components/watchlist-stats.tsx   |   9 +-
 .../anime/[slug]/_components/links.tsx        |  11 +-
 .../anime/[slug]/_components/title.tsx        |  18 +-
 .../anime/[slug]/_components/watch-stats.tsx  |  13 +-
 .../characters/[slug]/_components/title.tsx   |   8 +-
 .../_components/ui/collection-item.tsx        |  15 +-
 .../_components/collection-info.tsx           |   8 +-
 .../collection-settings.tsx                   |  39 +-
 app/(pages)/collections/new/page.tsx          |   7 +-
 .../edit/[editId]/_components/author.tsx      |   8 +-
 .../edit/[editId]/_components/moderator.tsx   |  18 +-
 .../content/_components/details.tsx           |  13 +-
 .../_components/tags-modal.tsx                |   7 +-
 .../edit-description/edit-description.tsx     |  22 +-
 app/(pages)/edit/_components/edit-form.tsx    | 106 ++---
 app/(pages)/edit/_components/edit-group.tsx   |   7 +-
 app/(pages)/edit/_components/edit-view.tsx    | 105 ++---
 app/(pages)/edit/_components/editlist.tsx     |  10 +-
 .../edit/_components/ui/edit-status.tsx       |   3 +-
 .../edit/_components/ui/input-param.tsx       |  39 +-
 .../edit/_components/ui/list-param.tsx        |  12 +-
 .../edit/_components/ui/markdown-param.tsx    |  38 +-
 app/(pages)/edit/content/_components/list.tsx |   7 +-
 app/(pages)/layout.tsx                        |   4 +-
 .../_components/activation-alert.tsx          |  38 +-
 .../components/ui/collection-item.tsx         |  11 +-
 .../history/components/ui/history-item.tsx    |  13 +-
 .../_components/ui/activity-item.tsx          |   5 +-
 .../_components/watchhour-stats.tsx           |  20 +-
 .../_components/ui/follow-user-item.tsx       |  18 +-
 .../u/[username]/_components/user-title.tsx   |  14 +-
 app/(pages)/u/[username]/layout.tsx           |   2 +
 .../list/_components/status-combobox.tsx      |   3 +-
 app/(pages)/u/[username]/page.tsx             |   2 -
 app/globals.css                               |  20 -
 app/not-found.tsx                             |   8 +-
 components/anime-tooltip.tsx                  |  19 +-
 components/comments/ui/comment.tsx            |  11 +-
 .../filters/_components/ui/badge-filter.tsx   |   5 +-
 .../markdown/editor/toolbar/bold-button.tsx   |   3 +-
 .../markdown/editor/toolbar/italic-button.tsx |   3 +-
 .../markdown/editor/toolbar/link-button.tsx   |   3 +-
 .../editor/toolbar/spoiler-button.tsx         |   3 +-
 .../markdown/viewer/_components/link.tsx      |   3 +-
 .../_components/forgot-password-form.tsx      |  24 +-
 .../auth-modal/_components/login-form.tsx     |   8 +-
 .../_components/password-confirm-form.tsx     |   8 +-
 .../auth-modal/_components/signup-form.tsx    |   8 +-
 .../_components/ui/edit-card.tsx              |  17 +-
 .../_components/ui/search-card.tsx            |  16 +-
 .../_components/customization-form.tsx        |   3 +-
 .../_components/email-form.tsx                |   5 +-
 .../_components/general-form.tsx              |   5 +-
 .../_components/password-form.tsx             |   3 +-
 .../_components/username-form.tsx             |   5 +-
 .../_components/watchlist-form.tsx            |  36 +-
 .../user-settings-modal.tsx                   |  14 +-
 components/nav-menu.tsx                       |   5 +-
 .../_components/not-found-notifications.tsx   |   5 +-
 .../_components/ui/notification-item.tsx      |  10 +-
 .../_components/profile-menu.tsx              |   3 +-
 components/sub-header.tsx                     |  16 +-
 components/typography/blockquote.tsx          |  16 +
 components/typography/h1.tsx                  |  21 +
 components/typography/h2.tsx                  |  21 +
 components/typography/h3.tsx                  |  21 +
 components/typography/h4.tsx                  |  21 +
 components/typography/h5.tsx                  |  21 +
 components/typography/inline-code.tsx         |  21 +
 components/typography/large.tsx               |  14 +
 components/typography/lead.tsx                |  16 +
 components/typography/muted.tsx               |  16 +
 components/typography/p.tsx                   |  16 +
 components/typography/small.tsx               |  16 +
 components/ui/base-card.tsx                   |  30 +-
 components/ui/not-found.tsx                   |   6 +-
 .../api/integrations/mal/getAnimeFromMAL.ts   |  15 +
 services/hooks/edit/useEdit.ts                |   7 +-
 types/api.d.ts                                | 376 +++++++++++++++
 types/hikka.d.ts                              |  71 +++
 types/index.d.ts                              | 438 +-----------------
 82 files changed, 1246 insertions(+), 848 deletions(-)
 create mode 100644 components/typography/blockquote.tsx
 create mode 100644 components/typography/h1.tsx
 create mode 100644 components/typography/h2.tsx
 create mode 100644 components/typography/h3.tsx
 create mode 100644 components/typography/h4.tsx
 create mode 100644 components/typography/h5.tsx
 create mode 100644 components/typography/inline-code.tsx
 create mode 100644 components/typography/large.tsx
 create mode 100644 components/typography/lead.tsx
 create mode 100644 components/typography/muted.tsx
 create mode 100644 components/typography/p.tsx
 create mode 100644 components/typography/small.tsx
 create mode 100644 services/api/integrations/mal/getAnimeFromMAL.ts
 create mode 100644 types/api.d.ts
 create mode 100644 types/hikka.d.ts

diff --git a/app/(pages)/anime/[slug]/_components/about.tsx b/app/(pages)/anime/[slug]/_components/about.tsx
index e797da1b..ca3d268e 100644
--- a/app/(pages)/anime/[slug]/_components/about.tsx
+++ b/app/(pages)/anime/[slug]/_components/about.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/tooltip';
 import { AGE_RATING, MEDIA_TYPE, RELEASE_STATUS } from '@/utils/constants';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import P from '@/components/typography/p';
 
 
 const Component = () => {
@@ -58,9 +59,9 @@ const Component = () => {
                                     RELEASE_STATUS[data.status].color,
                             }}
                         >
-                            <p className="text-sm !text-white">
+                            <P className="text-sm text-white">
                                 {RELEASE_STATUS[data.status].title_ua}
-                            </p>
+                            </P>
                         </div>
                     </div>
                 </div>
@@ -134,9 +135,9 @@ const Component = () => {
                                         />
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        <p className="text-sm">
+                                        <P className="text-sm">
                                             {studio.company.name}
-                                        </p>
+                                        </P>
                                     </TooltipContent>
                                 </Tooltip>
                             ) : (
diff --git a/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx b/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx
index c85b3753..8158b0e8 100644
--- a/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx
+++ b/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx
@@ -3,9 +3,14 @@
 import { createElement, useRef } from 'react';
 import { NumericFormat } from 'react-number-format';
 
+
+
 import { useParams } from 'next/navigation';
 
+
+
 import SubHeader from '@/components/sub-header';
+import Small from '@/components/typography/small';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useSize from '@/services/hooks/useSize';
 import { WATCH_STATUS } from '@/utils/constants';
@@ -61,14 +66,14 @@ const Component = () => {
                                         <div className="rounded-md bg-secondary p-1">
                                             {createElement(status.icon!)}
                                         </div>
-                                        <p className="text-xs text-muted-foreground w-10 text-right">
+                                        <Small className="text-muted-foreground w-10 text-right">
                                             <NumericFormat
                                                 suffix="%"
                                                 displayType="text"
                                                 value={percentage}
                                                 decimalScale={1}
                                             />
-                                        </p>
+                                        </Small>
                                     </div>
                                     <div
                                         ref={ref}
diff --git a/app/(pages)/anime/[slug]/_components/links.tsx b/app/(pages)/anime/[slug]/_components/links.tsx
index 621a3681..c5abbfa8 100644
--- a/app/(pages)/anime/[slug]/_components/links.tsx
+++ b/app/(pages)/anime/[slug]/_components/links.tsx
@@ -9,6 +9,9 @@ import { useParams } from 'next/navigation';
 import SubHeader from '@/components/sub-header';
 import { Button } from '@/components/ui/button';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import H4 from '@/components/typography/h4';
+import Small from '@/components/typography/small';
+import P from '@/components/typography/p';
 
 interface Props {
     extended?: boolean;
@@ -22,12 +25,12 @@ const ExternalLink = ({ link }: { link: API.External }) => {
                 target="_blank"
                 className="flex h-auto flex-col items-center justify-center text-center gap-2 overflow-hidden rounded-lg"
             >
-                <h4 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
+                <H4 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
                     {link.text}
-                </h4>
-                <p className="lowercase w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-xs">
+                </H4>
+                <P className="text-xs lowercase w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
                     {link.url}
-                </p>
+                </P>
             </Link>
         </Button>
     );
diff --git a/app/(pages)/anime/[slug]/_components/title.tsx b/app/(pages)/anime/[slug]/_components/title.tsx
index 96c49dac..4c46bfc1 100644
--- a/app/(pages)/anime/[slug]/_components/title.tsx
+++ b/app/(pages)/anime/[slug]/_components/title.tsx
@@ -5,17 +5,23 @@ import { useEffect, useRef } from 'react';
 import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded';
 import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
 
+
+
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
+
+
 import EditListModal from '@/components/modals/editlist-modal';
+import H2 from '@/components/typography/h2';
 import { Button } from '@/components/ui/button';
+import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { ANIME_NAV_ROUTES } from '@/utils/constants';
-import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import P from '@/components/typography/p';
 
 
 const EditButton = ({ className }: { className?: string }) => {
@@ -77,7 +83,7 @@ const Component = () => {
             <div className="flex justify-between gap-4" ref={divRef}>
                 <div>
                     <div className="flex gap-4">
-                        <h2>
+                        <H2>
                             {data[titleLanguage!] ||
                                 data.title_ua ||
                                 data.title_en ||
@@ -92,17 +98,17 @@ const Component = () => {
                                     )
                                 </span>
                             )}
-                        </h2>
+                        </H2>
                         {secret && <EditButton className="hidden lg:flex" />}
                     </div>
-                    <p className="mt-2">{data.title_ja}</p>
+                    <P className="mt-2">{data.title_ja}</P>
                 </div>
                 <div className="flex flex-col gap-2">
                     {data.score > 0 && (
                         <div className="flex gap-2 items-start">
-                            <p className="font-display text-4xl font-bold">
+                            <div className="font-display text-4xl font-bold">
                                 {data.score}
-                            </p>
+                            </div>
 
                             <MaterialSymbolsStarRounded className="text-2xl" />
                         </div>
diff --git a/app/(pages)/anime/[slug]/_components/watch-stats.tsx b/app/(pages)/anime/[slug]/_components/watch-stats.tsx
index 6b28b390..449ac65f 100644
--- a/app/(pages)/anime/[slug]/_components/watch-stats.tsx
+++ b/app/(pages)/anime/[slug]/_components/watch-stats.tsx
@@ -2,14 +2,15 @@
 
 import { useParams } from 'next/navigation';
 
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import Rating from '@/components/ui/rating';
-import { useAuthContext } from '@/services/providers/auth-provider';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
-import useWatch from '@/services/hooks/watch/useWatch';
 import useAddWatch from '@/services/hooks/watch/useAddWatch';
+import useWatch from '@/services/hooks/watch/useWatch';
+import { useAuthContext } from '@/services/providers/auth-provider';
 
 const Component = () => {
     const params = useParams();
@@ -80,12 +81,12 @@ const Component = () => {
                     precision={0.5}
                     value={watch.score ? watch.score / 2 : 0}
                 />
-                <h3>
+                <H3>
                     {watch.score}
                     <Label className="text-sm font-normal text-muted-foreground">
                         /10
                     </Label>
-                </h3>
+                </H3>
             </div>
             <div className="rounded-lg border border-secondary/60 bg-secondary/30 p-4">
                 <div className="flex justify-between gap-2 overflow-hidden">
@@ -111,12 +112,12 @@ const Component = () => {
                         </Button>
                     </div>
                 </div>
-                <h3>
+                <H3>
                     {watch.episodes}
                     <Label className="text-sm font-normal text-muted-foreground">
                         /{watch.anime.episodes_total || '?'}
                     </Label>
-                </h3>
+                </H3>
                 <Progress
                     className="h-2 mt-2"
                     max={watch.anime.episodes_total || watch.episodes}
diff --git a/app/(pages)/characters/[slug]/_components/title.tsx b/app/(pages)/characters/[slug]/_components/title.tsx
index 7745125d..2a81c47e 100644
--- a/app/(pages)/characters/[slug]/_components/title.tsx
+++ b/app/(pages)/characters/[slug]/_components/title.tsx
@@ -13,6 +13,8 @@ import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { CHARACTER_NAV_ROUTES } from '@/utils/constants';
+import H2 from '@/components/typography/h2';
+import P from '@/components/typography/p';
 
 
 const EditButton = ({ className }: { className?: string }) => {
@@ -73,15 +75,15 @@ const Component = () => {
             <div className="flex justify-between gap-4" ref={divRef}>
                 <div>
                     <div className="flex gap-4">
-                        <h2>
+                        <H2>
                             {character.name_ua ||
                                 character.name_en ||
                                 character.name_ja ||
                                 ''}{' '}
-                        </h2>
+                        </H2>
                         {secret && <EditButton className="hidden lg:flex" />}
                     </div>
-                    <p className="mt-2">{character.name_ja}</p>
+                    <P className="mt-2">{character.name_ja}</P>
                 </div>
                 <div className="flex flex-col items-end gap-2">
                     {secret && <EditButton className="flex lg:hidden" />}
diff --git a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
index 86ba1846..b7b2ffeb 100644
--- a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
+++ b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import AnimeCard from '@/components/anime-card';
+import Small from '@/components/typography/small';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import BaseCard from '@/components/ui/base-card';
@@ -54,7 +55,9 @@ const Component = ({ collection }: Props) => {
                                 );
                             }}
                         >
-                            <Label className={cn('line-clamp-1 cursor-pointer')}>
+                            <Label
+                                className={cn('line-clamp-1 cursor-pointer')}
+                            >
                                 {collection.title}
                             </Label>
                         </button>
@@ -69,15 +72,11 @@ const Component = ({ collection }: Props) => {
                     <div className="inline-flex gap-2 items-center text-muted-foreground text-xs">
                         <div className="flex gap-1">
                             <MaterialSymbolsGridViewRounded />
-                            <Label className="text-xs">
-                                {collection.entries}
-                            </Label>
+                            <Small>{collection.entries}</Small>
                         </div>
                         <div className="flex gap-1">
                             <IconamoonCommentFill />
-                            <Label className="text-xs">
-                                {collection.comments_count}
-                            </Label>
+                            <Small>{collection.comments_count}</Small>
                         </div>
                     </div>
                 </div>
@@ -97,7 +96,7 @@ const Component = ({ collection }: Props) => {
                 </div>
             )}
             <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 lg:gap-8 flex-nowrap">
-                {[...collection.collection].reverse().map((item, index) => (
+                {collection.collection.map((item, index) => (
                     <AnimeCard
                         containerClassName={cn(
                             collection.nsfw && 'blur-sm hover:blur-none',
diff --git a/app/(pages)/collections/[reference]/_components/collection-info.tsx b/app/(pages)/collections/[reference]/_components/collection-info.tsx
index c7025dd0..2dde7701 100644
--- a/app/(pages)/collections/[reference]/_components/collection-info.tsx
+++ b/app/(pages)/collections/[reference]/_components/collection-info.tsx
@@ -29,6 +29,8 @@ import { useCollectionContext } from '@/services/providers/collection-provider';
 import useCollection from '@/services/hooks/collections/useCollection';
 import useDeleteCollection from '@/services/hooks/collections/useDeleteCollection';
 import useLoggedUser from '@/services/hooks/user/useLoggedUser';
+import H5 from '@/components/typography/h5';
+import P from '@/components/typography/p';
 
 const Component = () => {
     const params = useParams();
@@ -73,7 +75,7 @@ const Component = () => {
                         </Link>
                         <div className="flex flex-1 flex-col">
                             <Link href={'/u/' + collection?.author.username}>
-                                <h5>{collection?.author.username}</h5>
+                                <H5>{collection?.author.username}</H5>
                             </Link>
                         </div>
                     </div>
@@ -119,13 +121,13 @@ const Component = () => {
                                         колекцію?
                                     </AlertDialogTitle>
                                     <AlertDialogDescription>
-                                        <p>
+                                        <P>
                                             Колекція{' '}
                                             <span className="font-bold">
                                                 {collection?.title}
                                             </span>{' '}
                                             буде видалена назавжди.
-                                        </p>
+                                        </P>
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
diff --git a/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx b/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx
index 59b5eeb7..165f8521 100644
--- a/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx
+++ b/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { useParams } from 'next/navigation';
 
-import GroupInputs from '@/app/(pages)/collections/new/_components/collection-settings/_components/group-inputs';
+import GroupInputs from './_components/group-inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { InputTags } from '@/components/ui/input-tags';
@@ -19,6 +19,8 @@ import {
 import useCreateCollection from '@/services/hooks/collections/useCreateCollection';
 import useUpdateCollection from '@/services/hooks/collections/useUpdateCollection';
 
+import SimpleIconsAnilist from '~icons/simple-icons/anilist'
+
 interface Props {
     mode?: 'create' | 'edit';
 }
@@ -152,6 +154,7 @@ const Component = ({ mode = 'create' }: Props) => {
                         Теги
                     </Label>
                     <InputTags
+                        disabled={tags.length === 3}
                         id="tags"
                         value={tags}
                         onChange={(tags) =>
@@ -191,20 +194,26 @@ const Component = ({ mode = 'create' }: Props) => {
                         </Button>
                     )}
                     {mode === 'create' && (
-                        <Button
-                            disabled={
-                                isCreatePending ||
-                                title.trim().length < 3 ||
-                                description.trim().length < 3
-                            }
-                            variant="default"
-                            onClick={() => mutateCreateCollection()}
-                        >
-                            {isCreatePending && (
-                                <span className="loading loading-spinner"></span>
-                            )}
-                            Створити
-                        </Button>
+                        <div className="flex gap-4">
+                            <Button
+                                className="flex-1"
+                                disabled={
+                                    isCreatePending ||
+                                    title.trim().length < 3 ||
+                                    description.trim().length < 3
+                                }
+                                variant="default"
+                                onClick={() => mutateCreateCollection()}
+                            >
+                                {isCreatePending && (
+                                    <span className="loading loading-spinner"></span>
+                                )}
+                                Створити
+                            </Button>
+                            <Button size="icon" variant="secondary">
+                                <SimpleIconsAnilist />
+                            </Button>
+                        </div>
                     )}
                 </div>
             </div>
diff --git a/app/(pages)/collections/new/page.tsx b/app/(pages)/collections/new/page.tsx
index 15666cd4..d889030a 100644
--- a/app/(pages)/collections/new/page.tsx
+++ b/app/(pages)/collections/new/page.tsx
@@ -7,6 +7,8 @@ import CollectionSettings from './_components/collection-settings';
 import CollectionTitle from './_components/collection-title';
 import Breadcrumbs from '@/components/breadcrumbs';
 import Link from 'next/link';
+import P from '@/components/typography/p';
+import { Label } from '@/components/ui/label';
 
 
 const Component = () => {
@@ -15,11 +17,10 @@ const Component = () => {
             <>
                 <Breadcrumbs>
                     <div className="flex w-auto items-center gap-4 overflow-hidden whitespace-nowrap">
-                        <p
-                            className="text-sm"
+                        <Label
                         >
                             Нова колекція
-                        </p>
+                        </Label>
                     </div>
                 </Breadcrumbs>
                 <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_25%] lg:items-start lg:justify-between lg:gap-16">
diff --git a/app/(pages)/edit/[editId]/_components/author.tsx b/app/(pages)/edit/[editId]/_components/author.tsx
index de7bb94e..eb673f41 100644
--- a/app/(pages)/edit/[editId]/_components/author.tsx
+++ b/app/(pages)/edit/[editId]/_components/author.tsx
@@ -13,6 +13,8 @@ import {
 } from '@/components/ui/avatar';
 import { Label } from '@/components/ui/label';
 import useEdit from '@/services/hooks/edit/useEdit';
+import H5 from '@/components/typography/h5';
+import Small from '@/components/typography/small';
 
 
 const Component = () => {
@@ -42,13 +44,13 @@ const Component = () => {
                 </Link>
                 <div className="flex flex-1 flex-col">
                     <Link href={'/u/' + edit.author!.username}>
-                        <h5>{edit.author!.username}</h5>
+                        <H5>{edit.author!.username}</H5>
                     </Link>
                     <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-4">
-                            <p className="text-xs text-muted-foreground">
+                            <Small className="text-muted-foreground">
                                 {format(edit.created * 1000, 'd MMM yyyy H:mm')}
-                            </p>
+                            </Small>
                         </div>
                     </div>
                 </div>
diff --git a/app/(pages)/edit/[editId]/_components/moderator.tsx b/app/(pages)/edit/[editId]/_components/moderator.tsx
index 50302e03..8fa3c755 100644
--- a/app/(pages)/edit/[editId]/_components/moderator.tsx
+++ b/app/(pages)/edit/[editId]/_components/moderator.tsx
@@ -3,14 +3,16 @@
 import { format } from 'date-fns';
 import * as React from 'react';
 
+
+
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from '@/components/ui/avatar';
+
+
+import H5 from '@/components/typography/h5';
+import Small from '@/components/typography/small';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Label } from '@/components/ui/label';
 import useEdit from '@/services/hooks/edit/useEdit';
 
@@ -44,16 +46,16 @@ const Component = () => {
                     </Link>
                     <div className="flex flex-1 flex-col">
                         <Link href={'/u/' + edit.moderator.username}>
-                            <h5>{edit.moderator.username}</h5>
+                            <H5>{edit.moderator.username}</H5>
                         </Link>
                         <div className="flex flex-col gap-1">
                             <div className="flex items-center gap-4">
-                                <p className="text-xs text-muted-foreground">
+                                <Small className="text-muted-foreground">
                                     {format(
                                         edit.updated * 1000,
                                         'd MMM yyyy H:mm',
                                     )}
-                                </p>
+                                </Small>
                             </div>
                         </div>
                     </div>
diff --git a/app/(pages)/edit/_components/content/_components/details.tsx b/app/(pages)/edit/_components/content/_components/details.tsx
index 3e5b85ab..23c01c19 100644
--- a/app/(pages)/edit/_components/content/_components/details.tsx
+++ b/app/(pages)/edit/_components/content/_components/details.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Label } from '@/components/ui/label';
+import P from '@/components/typography/p';
 
 interface Props {
     content: API.AnimeInfo | API.Character;
@@ -13,21 +14,21 @@ const Component = ({ content }: Props) => {
 
     return (
         <div className="bg-secondary/30 border border-secondary/60 p-4 rounded-md flex flex-col gap-4">
-            <div className="flex-col gap-2">
+            <div className="flex flex-col gap-2">
                 <Label className="text-muted-foreground">
                     Назва українською
                 </Label>
-                <p className="text-sm">{title_ua || '-'}</p>
+                <P className="text-sm">{title_ua || '-'}</P>
             </div>
-            <div className="flex-col gap-2">
+            <div className="flex flex-col gap-2">
                 <Label className="text-muted-foreground">
                     Назва англійською
                 </Label>
-                <p className="text-sm">{title_en || '-'}</p>
+                <P className="text-sm">{title_en || '-'}</P>
             </div>
-            <div className="flex-col gap-2">
+            <div className="flex flex-col gap-2">
                 <Label className="text-muted-foreground">Назва оригіналу</Label>
-                <p className="text-sm">{title_ja || '-'}</p>
+                <P className="text-sm">{title_ja || '-'}</P>
             </div>
         </div>
     );
diff --git a/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx b/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx
index b6e6c056..e3333e3d 100644
--- a/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx
+++ b/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx
@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
+import P from '@/components/typography/p';
 
 
 interface Props {
@@ -71,7 +72,7 @@ const Component = ({ setValue }: Props) => {
                         key={tag + index}
                         className="flex gap-2 items-center justify-between px-6 py-2"
                     >
-                        <p className="text-sm line-clamp-2">{tag}</p>
+                        <P className="text-sm line-clamp-2">{tag}</P>
                         <div className="flex gap-2 items-center">
                             <Button
                                 size="icon-md"
@@ -93,9 +94,9 @@ const Component = ({ setValue }: Props) => {
 
                 {editTags?.length === 0 && (
                     <div className="px-6">
-                        <p className="text-sm text-muted-foreground text-center">
+                        <P className="text-sm text-muted-foreground text-center">
                             Не знайдено збережених тегів редагування
-                        </p>
+                        </P>
                     </div>
                 )}
             </div>
diff --git a/app/(pages)/edit/_components/edit-description/edit-description.tsx b/app/(pages)/edit/_components/edit-description/edit-description.tsx
index 260f8ce9..0533c6eb 100644
--- a/app/(pages)/edit/_components/edit-description/edit-description.tsx
+++ b/app/(pages)/edit/_components/edit-description/edit-description.tsx
@@ -1,26 +1,23 @@
 'use client';
 
 import * as React from 'react';
-import { Controller } from 'react-hook-form';
-import { Control, UseFormSetValue } from 'react-hook-form/dist/types/form';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Textarea } from '@/components/ui/textarea';
 import { useModalContext } from '@/services/providers/modal-provider';
+import { useSettingsContext } from '@/services/providers/settings-provider';
 
 import TagsModal from './_components/tags-modal';
-import { useSettingsContext } from '@/services/providers/settings-provider';
 
 interface Props {
-    setValue?: UseFormSetValue<any>;
-    control: Control<any>;
-    disabled?: boolean;
+    mode: 'edit' | 'view';
 }
 
-
-const Component = ({ setValue, control, disabled }: Props) => {
+const Component = ({ mode }: Props) => {
+    const { control, setValue } = useFormContext();
     const { openModal } = useModalContext();
     const { editTags } = useSettingsContext();
 
@@ -30,7 +27,7 @@ const Component = ({ setValue, control, disabled }: Props) => {
                 <span>Опис правки</span>
                 <span className="text-muted-foreground">Необов’язково</span>
             </Label>
-            {setValue && (
+            {mode === 'edit' && (
                 <ScrollArea className="w-full whitespace-nowrap">
                     <div className="flex gap-2 w-full">
                         {editTags?.slice(0, 3).map((tag) => (
@@ -40,7 +37,10 @@ const Component = ({ setValue, control, disabled }: Props) => {
                                 key={tag}
                                 onClick={() => setValue('description', tag)}
                             >
-                                {tag.slice(0, 20).trim().concat(tag.length > 20 ? '...' : '')}
+                                {tag
+                                    .slice(0, 20)
+                                    .trim()
+                                    .concat(tag.length > 20 ? '...' : '')}
                             </Button>
                         ))}
                         <Button
@@ -67,7 +67,7 @@ const Component = ({ setValue, control, disabled }: Props) => {
                         placeholder="Введіть причину правки"
                         rows={3}
                         className="w-full disabled:opacity-100 disabled:cursor-text"
-                        disabled={disabled}
+                        disabled={mode === 'view'}
                         value={value}
                         onChange={onChange}
                         onBlur={onBlur}
diff --git a/app/(pages)/edit/_components/edit-form.tsx b/app/(pages)/edit/_components/edit-form.tsx
index 58b3df33..6a5bc3d4 100644
--- a/app/(pages)/edit/_components/edit-form.tsx
+++ b/app/(pages)/edit/_components/edit-form.tsx
@@ -2,15 +2,12 @@
 
 import * as React from 'react';
 import { useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import { useRouter } from 'next/navigation';
 
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 
-import EditGroup from '@/app/(pages)/edit/_components/edit-group';
-import AutoButton from '@/app/(pages)/edit/_components/ui/auto-button';
-import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import { useContentData } from '@/app/(pages)/edit/page.hooks';
 import { Button } from '@/components/ui/button';
 import addEdit from '@/services/api/edit/addEdit';
@@ -22,6 +19,10 @@ import {
     getFilteredEditParams,
 } from '@/utils/editParamUtils';
 
+import EditGroup from '../_components/edit-group';
+import AutoButton from '../_components/ui/auto-button';
+import EditDescription from './edit-description';
+
 
 type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & {
     description: string;
@@ -50,13 +51,7 @@ const Component = ({ slug, content_type, mode = 'edit' }: Props) => {
     const groups = getEditGroups(content_type)!;
     const paramSlugs = getEditParamSlugs(params);
 
-    const {
-        control,
-        reset,
-        handleSubmit,
-        formState: { isSubmitting },
-        setValue,
-    } = useForm<FormValues>({
+    const form = useForm<FormValues>({
         values: {
             description: '',
             ...content,
@@ -72,7 +67,7 @@ const Component = ({ slug, content_type, mode = 'edit' }: Props) => {
     });
 
     const onDismiss = (editId: number) => {
-        reset();
+        form.reset();
         router.push('/edit/' + editId);
     };
 
@@ -101,53 +96,50 @@ const Component = ({ slug, content_type, mode = 'edit' }: Props) => {
     };
 
     return (
-        <form
-            onSubmit={(e) => e.preventDefault()}
-            className="flex flex-col gap-6"
-        >
-            <div className="flex w-full flex-col gap-6">
-                {Object.keys(params).map((group) => (
-                    <EditGroup
-                        key={group}
-                        title={groups[group]}
-                        params={params[group]}
-                        control={control}
-                        mode={mode}
-                    />
-                ))}
-
-                <EditDescription
-                    control={control}
-                    disabled={mode === 'view'}
-                    setValue={setValue}
-                />
-            </div>
-            {mode === 'edit' && (
-                <div className="flex w-full flex-col gap-4">
-                    <Turnstile
-                        ref={captchaRef}
-                        siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
-                    />
-                    <div className="flex gap-2 items-center">
-                        <Button
-                            disabled={isSubmitting}
-                            onClick={handleSubmit(onSaveSubmit)}
-                            type="submit"
-                            className="w-fit"
-                        >
-                            {isSubmitting && (
-                                <span className="loading loading-spinner"></span>
-                            )}
-                            Створити
-                        </Button>
-                        <AutoButton
-                            onSaveSubmit={onSaveSubmit}
-                            handleSubmit={handleSubmit}
+        <FormProvider {...form}>
+            <form
+                onSubmit={(e) => e.preventDefault()}
+                className="flex flex-col gap-6"
+            >
+                <div className="flex w-full flex-col gap-6">
+                    {Object.keys(params).map((group) => (
+                        <EditGroup
+                            key={group}
+                            title={groups[group]}
+                            params={params[group]}
+                            mode={mode}
                         />
-                    </div>
+                    ))}
+
+                    <EditDescription mode={mode} />
                 </div>
-            )}
-        </form>
+                {mode === 'edit' && (
+                    <div className="flex w-full flex-col gap-4">
+                        <Turnstile
+                            ref={captchaRef}
+                            siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
+                        />
+                        <div className="flex gap-2 items-center">
+                            <Button
+                                disabled={form.formState.isSubmitting}
+                                onClick={form.handleSubmit(onSaveSubmit)}
+                                type="submit"
+                                className="w-fit"
+                            >
+                                {form.formState.isSubmitting && (
+                                    <span className="loading loading-spinner"></span>
+                                )}
+                                Створити
+                            </Button>
+                            <AutoButton
+                                onSaveSubmit={onSaveSubmit}
+                                handleSubmit={form.handleSubmit}
+                            />
+                        </div>
+                    </div>
+                )}
+            </form>
+        </FormProvider>
     );
 };
 
diff --git a/app/(pages)/edit/_components/edit-group.tsx b/app/(pages)/edit/_components/edit-group.tsx
index 35f25c67..d8cbf22b 100644
--- a/app/(pages)/edit/_components/edit-group.tsx
+++ b/app/(pages)/edit/_components/edit-group.tsx
@@ -10,15 +10,15 @@ import {
     CollapsibleTrigger,
 } from '@/components/ui/collapsible';
 import { getEditParamComponent } from '@/utils/editParamUtils';
+import H5 from '@/components/typography/h5';
 
 interface Props {
     title: string;
     params: Hikka.EditParam[];
-    control: any;
     mode: 'view' | 'edit';
 }
 
-const Component = ({ title, params, control, mode }: Props) => {
+const Component = ({ title, params, mode }: Props) => {
     const [selected, setSelected] = React.useState<string[]>([]);
 
     const switchParam = (param: string) => {
@@ -33,7 +33,7 @@ const Component = ({ title, params, control, mode }: Props) => {
         <Collapsible open={mode === 'view' ? true : undefined} className="w-full space-y-2 border border-accent rounded-lg p-4">
             <CollapsibleTrigger asChild>
                 <div className="flex items-center justify-between">
-                    <h5>{title}</h5>
+                    <H5>{title}</H5>
                     <Button
                         id="title-collapse"
                         variant="ghost"
@@ -75,7 +75,6 @@ const Component = ({ title, params, control, mode }: Props) => {
                             key={param.slug}
                             param={param}
                             mode={mode}
-                            control={control}
                         />
                     );
                 })}
diff --git a/app/(pages)/edit/_components/edit-view.tsx b/app/(pages)/edit/_components/edit-view.tsx
index 402a32a6..46329729 100644
--- a/app/(pages)/edit/_components/edit-view.tsx
+++ b/app/(pages)/edit/_components/edit-view.tsx
@@ -2,17 +2,18 @@
 
 import * as React from 'react';
 import { useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import { useRouter } from 'next/navigation';
 
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 
+import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import EditGroup from '@/app/(pages)/edit/_components/edit-group';
 import AutoButton from '@/app/(pages)/edit/_components/ui/auto-button';
-import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import { Button } from '@/components/ui/button';
 import updateEdit from '@/services/api/edit/updateEdit';
+import useEdit from '@/services/hooks/edit/useEdit';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import {
     getEditGroups,
@@ -20,7 +21,6 @@ import {
     getEditParams,
     getFilteredEditParams,
 } from '@/utils/editParamUtils';
-import useEdit from '@/services/hooks/edit/useEdit';
 
 
 type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & {
@@ -40,7 +40,7 @@ const Component = ({ content_type, editId, mode = 'view' }: EditProps) => {
     const { secret } = useAuthContext();
     const router = useRouter();
 
-    const { data: edit } = useEdit(String(editId))!;
+    const { data: edit } = useEdit(String(editId));
 
     if (!edit) {
         return null;
@@ -51,13 +51,7 @@ const Component = ({ content_type, editId, mode = 'view' }: EditProps) => {
     const groups = getEditGroups(content_type)!;
     const paramSlugs = getEditParamSlugs(params);
 
-    const {
-        control,
-        reset,
-        handleSubmit,
-        formState: { isSubmitting },
-        setValue,
-    } = useForm<FormValues>({
+    const form = useForm<FormValues>({
         values: {
             description: edit.description || '',
             ...edit.after,
@@ -70,7 +64,7 @@ const Component = ({ content_type, editId, mode = 'view' }: EditProps) => {
     });
 
     const onDismiss = (editId: number) => {
-        reset();
+        form.reset();
         router.push('/edit/' + editId);
     };
 
@@ -97,53 +91,50 @@ const Component = ({ content_type, editId, mode = 'view' }: EditProps) => {
     };
 
     return (
-        <form
-            onSubmit={(e) => e.preventDefault()}
-            className="flex flex-col gap-6"
-        >
-            <div className="flex w-full flex-col gap-6">
-                {Object.keys(params).map((group) => (
-                    <EditGroup
-                        key={group}
-                        title={groups[group]}
-                        params={params[group]}
-                        control={control}
-                        mode={mode}
-                    />
-                ))}
-
-                <EditDescription
-                    control={control}
-                    disabled={mode === 'view'}
-                    setValue={mode === 'view' ? undefined : setValue}
-                />
-            </div>
-            {mode === 'edit' && (
-                <div className="flex w-full flex-col gap-4">
-                    <Turnstile
-                        ref={captchaRef}
-                        siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
-                    />
-                    <div className="flex gap-2 items-center">
-                        <Button
-                            disabled={isSubmitting}
-                            onClick={handleSubmit(onSaveSubmit)}
-                            type="submit"
-                            className="w-fit"
-                        >
-                            {isSubmitting && (
-                                <span className="loading loading-spinner"></span>
-                            )}
-                            Оновити
-                        </Button>
-                        <AutoButton
-                            onSaveSubmit={onSaveSubmit}
-                            handleSubmit={handleSubmit}
+        <FormProvider {...form}>
+            <form
+                onSubmit={(e) => e.preventDefault()}
+                className="flex flex-col gap-6"
+            >
+                <div className="flex w-full flex-col gap-6">
+                    {Object.keys(params).map((group) => (
+                        <EditGroup
+                            key={group}
+                            title={groups[group]}
+                            params={params[group]}
+                            mode={mode}
                         />
-                    </div>
+                    ))}
+
+                    <EditDescription mode={mode} />
                 </div>
-            )}
-        </form>
+                {mode === 'edit' && (
+                    <div className="flex w-full flex-col gap-4">
+                        <Turnstile
+                            ref={captchaRef}
+                            siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
+                        />
+                        <div className="flex gap-2 items-center">
+                            <Button
+                                disabled={form.formState.isSubmitting}
+                                onClick={form.handleSubmit(onSaveSubmit)}
+                                type="submit"
+                                className="w-fit"
+                            >
+                                {form.formState.isSubmitting && (
+                                    <span className="loading loading-spinner"></span>
+                                )}
+                                Оновити
+                            </Button>
+                            <AutoButton
+                                onSaveSubmit={onSaveSubmit}
+                                handleSubmit={form.handleSubmit}
+                            />
+                        </div>
+                    </div>
+                )}
+            </form>
+        </FormProvider>
     );
 };
 
diff --git a/app/(pages)/edit/_components/editlist.tsx b/app/(pages)/edit/_components/editlist.tsx
index b567244c..c592239d 100644
--- a/app/(pages)/edit/_components/editlist.tsx
+++ b/app/(pages)/edit/_components/editlist.tsx
@@ -28,6 +28,8 @@ import { useSettingsContext } from '@/services/providers/settings-provider';
 
 import EditStatus from './ui/edit-status';
 import useEditList from '@/services/hooks/edit/useEditList';
+import P from '@/components/typography/p';
+import Small from '@/components/typography/small';
 
 
 const Component = () => {
@@ -105,12 +107,12 @@ const Component = () => {
                                                 >
                                                     {edit.author!.username}
                                                 </Link>
-                                                <Label className="text-muted-foreground text-xs">
+                                                <Small className="text-muted-foreground">
                                                     {format(
                                                         edit.created * 1000,
                                                         'd MMM yyyy H:mm',
                                                     )}
-                                                </Label>
+                                                </Small>
                                             </div>
                                         </div>
                                     </TableCell>
@@ -148,7 +150,7 @@ const Component = () => {
                                         className="hidden lg:table-cell"
                                         align="left"
                                     >
-                                        <p
+                                        <P
                                             className={clsx(
                                                 'text-sm overflow-hidden overflow-ellipsis break-all',
                                                 !edit.description &&
@@ -158,7 +160,7 @@ const Component = () => {
                                             {edit.description
                                                 ? edit.description
                                                 : 'Немає опису правки'}
-                                        </p>
+                                        </P>
                                     </TableCell>
                                     <TableCell align="center" className="w-20">
                                         <div className="flex justify-end">
diff --git a/app/(pages)/edit/_components/ui/edit-status.tsx b/app/(pages)/edit/_components/ui/edit-status.tsx
index e422f75d..a1865d32 100644
--- a/app/(pages)/edit/_components/ui/edit-status.tsx
+++ b/app/(pages)/edit/_components/ui/edit-status.tsx
@@ -6,6 +6,7 @@ import { useParams } from 'next/navigation';
 
 import { EDIT_STATUS } from '@/utils/constants';
 import useEdit from '@/services/hooks/edit/useEdit';
+import P from '@/components/typography/p';
 
 interface Props {
     status?: API.EditStatus;
@@ -28,7 +29,7 @@ const Component = ({ status }: Props) => {
                 backgroundColor: EDIT_STATUS[currentStatus].color,
             }}
         >
-            <p className="text-sm">{EDIT_STATUS[currentStatus].title_ua}</p>
+            <P className="text-sm">{EDIT_STATUS[currentStatus].title_ua}</P>
         </div>
     );
 };
diff --git a/app/(pages)/edit/_components/ui/input-param.tsx b/app/(pages)/edit/_components/ui/input-param.tsx
index 3544bc69..306afce3 100644
--- a/app/(pages)/edit/_components/ui/input-param.tsx
+++ b/app/(pages)/edit/_components/ui/input-param.tsx
@@ -1,10 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 
+import { useParams } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import useEdit from '@/services/hooks/edit/useEdit';
+
 
 type EditParamGroup = {
     title: string;
@@ -23,14 +28,29 @@ type EditParam = {
 
 interface Props {
     param: EditParam;
-    control: any;
     mode: 'view' | 'edit';
 }
 
-const Component = ({ mode, control, param }: Props) => {
+const Component = ({ mode, param }: Props) => {
+    const { control } = useFormContext();
+    const params = useParams();
+    const [showDiff, setShowDiff] = React.useState(false);
+    const { data: edit } = useEdit(String(params.editId), mode === 'view');
+
     return (
         <div className="flex flex-col gap-4 w-full">
-            <Label>{param.title}</Label>
+            <div className="flex gap-4 items-center">
+                <Label>{param.title}</Label>
+                {mode === 'view' && edit && edit.before![param.slug] && (
+                    <Button
+                        size="badge"
+                        variant={showDiff ? 'secondary' : 'outline'}
+                        onClick={() => setShowDiff(!showDiff)}
+                    >
+                        Різниця
+                    </Button>
+                )}
+            </div>
 
             <Controller
                 control={control}
@@ -47,6 +67,17 @@ const Component = ({ mode, control, param }: Props) => {
                     />
                 )}
             />
+
+            {mode === 'view' &&
+                edit &&
+                edit.before![param.slug] &&
+                showDiff && (
+                    <Input
+                        className="w-full disabled:cursor-text hover:disabled:opacity-100"
+                        value={edit.before![param.slug]}
+                        disabled
+                    />
+                )}
         </div>
     );
 };
diff --git a/app/(pages)/edit/_components/ui/list-param.tsx b/app/(pages)/edit/_components/ui/list-param.tsx
index 501f3ec1..ff29f719 100644
--- a/app/(pages)/edit/_components/ui/list-param.tsx
+++ b/app/(pages)/edit/_components/ui/list-param.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useState } from 'react';
-import { useFieldArray } from 'react-hook-form';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 import MaterialSymbolsAddRounded from '~icons/material-symbols/add-rounded';
 import MaterialSymbolsCloseSmallRounded from '~icons/material-symbols/close-small-rounded';
 
@@ -27,11 +27,11 @@ type EditParam = {
 
 interface Props {
     param: EditParam;
-    control: any;
     mode: 'edit' | 'view';
 }
 
-const Component = ({ param, mode, control }: Props) => {
+const Component = ({ param, mode }: Props) => {
+    const { control } = useFormContext();
     const { fields, append, remove } = useFieldArray({
         control,
         name: param.slug,
@@ -73,7 +73,11 @@ const Component = ({ param, mode, control }: Props) => {
                             className="flex-1"
                         />
                         <Button
-                            disabled={!newItem ||newItem?.length === 0 || newItem === ''}
+                            disabled={
+                                !newItem ||
+                                newItem?.length === 0 ||
+                                newItem === ''
+                            }
                             onClick={() => {
                                 append({ value: newItem });
                                 setNewItem('');
diff --git a/app/(pages)/edit/_components/ui/markdown-param.tsx b/app/(pages)/edit/_components/ui/markdown-param.tsx
index bdb2e2a6..cc71f451 100644
--- a/app/(pages)/edit/_components/ui/markdown-param.tsx
+++ b/app/(pages)/edit/_components/ui/markdown-param.tsx
@@ -1,11 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { useParams } from 'next/navigation';
 
 import MDEditor from '@/components/markdown/editor/MD-editor';
 import MDViewer from '@/components/markdown/viewer/MD-viewer';
+import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
+import useEdit from '@/services/hooks/edit/useEdit';
+
 
 type EditParamGroup = {
     title: string;
@@ -24,15 +29,30 @@ type EditParam = {
 
 interface Props {
     param: EditParam;
-    control: any;
     mode: 'view' | 'edit';
 }
 
-const Component = ({ mode, control, param }: Props) => {
+const Component = ({ mode, param }: Props) => {
+    const { control } = useFormContext();
+    const params = useParams();
+    const [showDiff, setShowDiff] = React.useState(false);
+    const { data: edit } = useEdit(String(params.editId), mode === 'view');
+
     if (mode === 'view') {
         return (
             <div className="flex flex-col gap-4 w-full">
-                <Label>{param.title}</Label>
+                <div className="flex gap-4 items-center">
+                    <Label>{param.title}</Label>
+                    {mode === 'view' && edit && edit.before![param.slug] && (
+                        <Button
+                            size="badge"
+                            variant={showDiff ? 'secondary' : 'outline'}
+                            onClick={() => setShowDiff(!showDiff)}
+                        >
+                            Різниця
+                        </Button>
+                    )}
+                </div>
                 <Controller
                     control={control}
                     name={param.slug}
@@ -42,6 +62,14 @@ const Component = ({ mode, control, param }: Props) => {
                         </MDViewer>
                     )}
                 />
+                {mode === 'view' &&
+                    edit &&
+                    edit.before![param.slug] &&
+                    showDiff && (
+                        <MDViewer className="bg-secondary/30 border-secondary/60 border rounded-md p-4 markdown text-sm opacity-50 hover:opacity-100">
+                            {edit.before![param.slug]}
+                        </MDViewer>
+                    )}
             </div>
         );
     }
@@ -56,7 +84,7 @@ const Component = ({ mode, control, param }: Props) => {
                     <MDEditor
                         ref={ref}
                         placeholder={param.placeholder}
-                        markdown={value || ""}
+                        markdown={value || ''}
                         onChange={onChange}
                         onBlur={onBlur}
                     />
diff --git a/app/(pages)/edit/content/_components/list.tsx b/app/(pages)/edit/content/_components/list.tsx
index 8330ba50..dbd98f84 100644
--- a/app/(pages)/edit/content/_components/list.tsx
+++ b/app/(pages)/edit/content/_components/list.tsx
@@ -7,12 +7,13 @@ import { range } from '@antfu/utils';
 
 import AnimeCard from '@/components/anime-card';
 import SkeletonCard from '@/components/skeletons/entry-card';
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
+import useTodoAnime from '@/services/hooks/edit/todo/useTodoAnime';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
-import useTodoAnime from '@/services/hooks/edit/todo/useTodoAnime';
 
 interface Props {
     extended?: boolean;
@@ -65,7 +66,7 @@ const Component = ({ extended }: Props) => {
                         !Array.isArray(option) &&
                         option && (
                             <div className="flex items-center gap-2">
-                                <h3>{option.label}</h3>
+                                <H3>{option.label}</H3>
                                 {data && (
                                     <Label className="text-muted-foreground">
                                         ({data?.pages[0].pagination.total})
@@ -118,4 +119,4 @@ const Component = ({ extended }: Props) => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index 4a93ae5e..3caa4b4b 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -5,6 +5,7 @@ import AuthGate from '@/components/auth-gate';
 import Footer from '@/components/footer';
 import NavBar from '@/components/navbar/navbar';
 import ScrollTop from '@/components/scroll-top';
+import ActivationAlert from '@/app/(pages)/u/[username]/_components/activation-alert';
 
 export default async function RootLayout({
     children,
@@ -17,7 +18,8 @@ export default async function RootLayout({
             <AuthGate>
                 <ScrollTop />
                 <NavBar />
-                <main className="container mx-auto mt-8 max-w-screen-xl px-4 lg:mt-20">
+
+                <main className="container mx-auto mt-8 max-w-screen-xl px-4 lg:mt-16">
                     {children}
                 </main>
                 <div className="sticky bottom-4 mt-12 w-full">
diff --git a/app/(pages)/u/[username]/_components/activation-alert.tsx b/app/(pages)/u/[username]/_components/activation-alert.tsx
index baa6f585..fd579c09 100644
--- a/app/(pages)/u/[username]/_components/activation-alert.tsx
+++ b/app/(pages)/u/[username]/_components/activation-alert.tsx
@@ -7,9 +7,9 @@ import { useParams } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 import resendActivation from '@/services/api/auth/resendActivation';
-import { useAuthContext } from '@/services/providers/auth-provider';
-import useUser from '@/services/hooks/user/useUser';
 import useLoggedUser from '@/services/hooks/user/useLoggedUser';
+import useUser from '@/services/hooks/user/useUser';
+import { useAuthContext } from '@/services/providers/auth-provider';
 
 
 const Component = () => {
@@ -58,25 +58,23 @@ const Component = () => {
     };
 
     return (
-        <div>
-            <div className="flex items-center gap-4 p-4 border rounded-md border-secondary/60 bg-secondary/30">
-                <MaterialSymbolsInfoRounded className="text-xl" />
-                <span className="text-sm flex-1">
-                    На вашу пошту відправлено лист з активацією пошти. Будь
-                    ласка, перейдіть за посилання у листі. Якщо Ваш лист не
-                    прийшов, будь ласка,{' '}
-                    <Button
-                        onClick={resend}
-                        variant="link"
-                        className="text-primary hover:underline p-0 h-auto"
-                    >
-                        відправте його повторно
-                    </Button>
-                    .
-                </span>
-            </div>
+        <div className="flex items-center gap-4 p-4 border rounded-md border-secondary/60 bg-secondary/30">
+            <MaterialSymbolsInfoRounded className="text-xl" />
+            <span className="text-sm flex-1">
+                На вашу пошту відправлено лист з активацією пошти. Будь ласка,
+                перейдіть за посилання у листі. Якщо Ваш лист не прийшов, будь
+                ласка,{' '}
+                <Button
+                    onClick={resend}
+                    variant="link"
+                    className="text-primary hover:underline p-0 h-auto"
+                >
+                    відправте його повторно
+                </Button>
+                .
+            </span>
         </div>
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/app/(pages)/u/[username]/_components/collections/components/ui/collection-item.tsx b/app/(pages)/u/[username]/_components/collections/components/ui/collection-item.tsx
index 9be241bd..ed6253d0 100644
--- a/app/(pages)/u/[username]/_components/collections/components/ui/collection-item.tsx
+++ b/app/(pages)/u/[username]/_components/collections/components/ui/collection-item.tsx
@@ -4,6 +4,7 @@ import MaterialSymbolsGridViewRounded from '~icons/material-symbols/grid-view-ro
 
 import Link from 'next/link';
 
+import Small from '@/components/typography/small';
 import BaseCard from '@/components/ui/base-card';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/utils';
@@ -45,22 +46,22 @@ const Component = ({ data, className }: Props) => {
                         <div className="w-2 h-2 rounded-full bg-destructive" />
                     )}
                 </div>
-                <p
+                <Small
                     className={cn(
-                        'text-muted-foreground text-xs line-clamp-1',
+                        'text-muted-foreground line-clamp-1',
                         data.spoiler && 'blur-sm hover:blur-none',
                     )}
                 >
                     {data.description}
-                </p>
+                </Small>
                 <div className="inline-flex gap-2 items-center text-muted-foreground text-xs">
                     <div className="flex gap-1">
                         <MaterialSymbolsGridViewRounded />
-                        <Label className="text-xs">{data.entries}</Label>
+                        <Small>{data.entries}</Small>
                     </div>
                     <div className="flex gap-1">
                         <IconamoonCommentFill />
-                        <Label className="text-xs">{data.comments_count}</Label>
+                        <Small>{data.comments_count}</Small>
                     </div>
                 </div>
             </div>
diff --git a/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx b/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx
index 1571d53d..6e98ac2c 100644
--- a/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx
+++ b/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx
@@ -1,10 +1,11 @@
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
 import { Fragment } from 'react';
-import MaterialSymbolsShieldRounded from '~icons/material-symbols/shield-rounded';
-import MaterialSymbolsInfoRounded from '~icons/material-symbols/info-rounded'
+import MaterialSymbolsInfoRounded from '~icons/material-symbols/info-rounded';
+
 import Link from 'next/link';
 
+import Small from '@/components/typography/small';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import BaseCard from '@/components/ui/base-card';
 import { Label } from '@/components/ui/label';
@@ -55,7 +56,7 @@ const Component = ({ data, className }: Props) => {
                         'Загальне'
                     )}
                 </Label>
-                <p className="text-xs leading-normal text-muted-foreground">
+                <Small className="leading-normal text-muted-foreground">
                     {activity.map((event, i, arr) =>
                         event ? (
                             <Fragment key={i}>
@@ -64,12 +65,12 @@ const Component = ({ data, className }: Props) => {
                             </Fragment>
                         ) : null,
                     )}
-                </p>
-                <p className="text-xs text-muted-foreground opacity-60">
+                </Small>
+                <Small className="text-muted-foreground opacity-60">
                     {formatDistance(data.created * 1000, Date.now(), {
                         addSuffix: true,
                     })}
-                </p>
+                </Small>
             </div>
         </div>
     );
diff --git a/app/(pages)/u/[username]/_components/statistics/_components/activity-stats/_components/ui/activity-item.tsx b/app/(pages)/u/[username]/_components/statistics/_components/activity-stats/_components/ui/activity-item.tsx
index 040ce481..ba8bda3d 100644
--- a/app/(pages)/u/[username]/_components/statistics/_components/activity-stats/_components/ui/activity-item.tsx
+++ b/app/(pages)/u/[username]/_components/statistics/_components/activity-stats/_components/ui/activity-item.tsx
@@ -9,6 +9,7 @@ import {
     TooltipTrigger,
 } from '@/components/ui/tooltip';
 import getDeclensionWord from '@/utils/getDeclensionWord';
+import P from '@/components/typography/p';
 
 interface Props {
     item: API.Activity;
@@ -37,9 +38,9 @@ const Component = ({ item, max }: Props) => {
                         {item.actions}{' '}
                         {getDeclensionWord(item.actions, ACTION_DECLENSION)}
                     </Label>
-                    <p className="text-muted-foreground">
+                    <P className="text-muted-foreground">
                         {format(toDate(item.timestamp * 1000), 'd.MM.yyyy')}
-                    </p>
+                    </P>
                 </TooltipContent>
             )}
         </Tooltip>
diff --git a/app/(pages)/u/[username]/_components/statistics/_components/watchhour-stats.tsx b/app/(pages)/u/[username]/_components/statistics/_components/watchhour-stats.tsx
index 6f2bb3e8..848f0000 100644
--- a/app/(pages)/u/[username]/_components/statistics/_components/watchhour-stats.tsx
+++ b/app/(pages)/u/[username]/_components/statistics/_components/watchhour-stats.tsx
@@ -5,15 +5,17 @@ import intervalToDuration from 'date-fns/intervalToDuration';
 import React from 'react';
 import MaterialSymbolsClockLoader10 from '~icons/material-symbols/clock-loader-10';
 
+
+
 import { useParams } from 'next/navigation';
 
+
+
+import H5 from '@/components/typography/h5';
+import Small from '@/components/typography/small';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import useWatchStats from '@/services/hooks/watch/useWatchStats';
 
 
@@ -29,7 +31,7 @@ const Component = () => {
             </div>
             <div className="flex flex-col gap-2">
                 <div className="flex gap-2 justify-between items-end">
-                    <h5>
+                    <H5>
                         {(stats?.duration &&
                             formatDuration(
                                 intervalToDuration({
@@ -39,15 +41,15 @@ const Component = () => {
                                 { format: ['years', 'months', 'days'] },
                             )) ||
                             '0 днів'}
-                    </h5>
-                    <p className="text-muted-foreground text-xs">
+                    </H5>
+                    <Small className="text-muted-foreground">
                         {(stats?.duration &&
                             formatDuration(
                                 { hours: Math.round(stats?.duration / 60) },
                                 { format: ['hours'] },
                             )) ||
                             '0 годин'}
-                    </p>
+                    </Small>
                 </div>
                 <Tooltip delayDuration={0}>
                     <TooltipTrigger>
diff --git a/app/(pages)/u/[username]/_components/ui/follow-user-item.tsx b/app/(pages)/u/[username]/_components/ui/follow-user-item.tsx
index 14f2fa57..542e71b7 100644
--- a/app/(pages)/u/[username]/_components/ui/follow-user-item.tsx
+++ b/app/(pages)/u/[username]/_components/ui/follow-user-item.tsx
@@ -3,20 +3,24 @@
 import * as React from 'react';
 import MaterialSymbolsShieldRounded from '~icons/material-symbols/shield-rounded';
 
+
+
 import Link from 'next/link';
 
+
+
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from '@/components/ui/avatar';
+
+
+import Small from '@/components/typography/small';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import follow from '@/services/api/follow/follow';
 import unfollow from '@/services/api/follow/unfollow';
 import { useAuthContext } from '@/services/providers/auth-provider';
 
+
 interface Props {
     user: API.User;
 }
@@ -82,9 +86,9 @@ const Component = ({ user }: Props) => {
                     >
                         {user.username}
                     </Link>
-                    <p className="text-xs text-muted-foreground truncate">
+                    <Small className="text-muted-foreground truncate">
                         {user.description}
-                    </p>
+                    </Small>
                 </div>
             </div>
             {secret &&
diff --git a/app/(pages)/u/[username]/_components/user-title.tsx b/app/(pages)/u/[username]/_components/user-title.tsx
index 35e06298..11269560 100644
--- a/app/(pages)/u/[username]/_components/user-title.tsx
+++ b/app/(pages)/u/[username]/_components/user-title.tsx
@@ -5,12 +5,14 @@ import ClarityAdministratorSolid from '~icons/clarity/administrator-solid';
 
 import { useParams } from 'next/navigation';
 
+import H3 from '@/components/typography/h3';
 import {
     Tooltip,
     TooltipContent,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
 import useUser from '@/services/hooks/user/useUser';
+import P from '@/components/typography/p';
 
 interface Props {}
 
@@ -25,9 +27,9 @@ const Component = ({}: Props) => {
     return (
         <div className="flex w-full flex-col gap-2">
             <div className="flex gap-2 items-center">
-                <h3 className="overflow-hidden overflow-ellipsis">
+                <H3 className="overflow-hidden overflow-ellipsis">
                     {user.username}
-                </h3>
+                </H3>
                 {(user.role === 'admin' || user.role === 'moderator') && (
                     <Tooltip delayDuration={0}>
                         <TooltipTrigger>
@@ -36,19 +38,19 @@ const Component = ({}: Props) => {
                             </div>
                         </TooltipTrigger>
                         <TooltipContent>
-                            <p className="text-sm">
+                            <P className="text-sm">
                                 {user.role === 'admin'
                                     ? 'Адміністратор'
                                     : 'Модератор'}
-                            </p>
+                            </P>
                         </TooltipContent>
                     </Tooltip>
                 )}
             </div>
             {user.description && (
-                <p className="text-sm text-muted-foreground">
+                <P className="text-sm text-muted-foreground">
                     {user.description}
-                </p>
+                </P>
             )}
         </div>
     );
diff --git a/app/(pages)/u/[username]/layout.tsx b/app/(pages)/u/[username]/layout.tsx
index 34497cc3..5d1d115a 100644
--- a/app/(pages)/u/[username]/layout.tsx
+++ b/app/(pages)/u/[username]/layout.tsx
@@ -28,6 +28,7 @@ import getQueryClient from '@/utils/getQueryClient';
 import FollowButton from './_components/follow-button';
 import FollowStats from './_components/follow-stats';
 import UserInfo from './_components/user-info';
+import ActivationAlert from '@/app/(pages)/u/[username]/_components/activation-alert';
 
 
 interface Props extends PropsWithChildren {
@@ -115,6 +116,7 @@ const Component = async ({ params: { username }, children }: Props) => {
     return (
         <HydrationBoundary state={dehydratedState}>
             <div className="flex flex-col gap-12 lg:gap-16">
+                <ActivationAlert />
                 {user.cover && (
                     <div className="absolute top-0 left-0 w-full h-80 -z-20 opacity-40 overflow-hidden gradient-mask-b-0">
                         <Image
diff --git a/app/(pages)/u/[username]/list/_components/status-combobox.tsx b/app/(pages)/u/[username]/list/_components/status-combobox.tsx
index 66b7e597..3f5ff93e 100644
--- a/app/(pages)/u/[username]/list/_components/status-combobox.tsx
+++ b/app/(pages)/u/[username]/list/_components/status-combobox.tsx
@@ -14,6 +14,7 @@ import { Label } from '@/components/ui/label';
 import { WATCH_STATUS } from '@/utils/constants';
 import createQueryString from '@/utils/createQueryString';
 import useWatchList from '@/services/hooks/watch/useWatchList';
+import H3 from '@/components/typography/h3';
 
 
 const Component = () => {
@@ -56,7 +57,7 @@ const Component = () => {
                             )}
                         </div>
                         <div className="flex items-center gap-2">
-                            <h3>{option.label}</h3>
+                            <H3>{option.label}</H3>
                             {pagination && (
                                 <Label className="text-muted-foreground">
                                     ({pagination.total})
diff --git a/app/(pages)/u/[username]/page.tsx b/app/(pages)/u/[username]/page.tsx
index 2c324094..9200cdf7 100644
--- a/app/(pages)/u/[username]/page.tsx
+++ b/app/(pages)/u/[username]/page.tsx
@@ -9,7 +9,6 @@ import getUserActivity from '@/services/api/user/getUserActivity';
 import getUserHistory from '@/services/api/user/getUserHistory';
 import getQueryClient from '@/utils/getQueryClient';
 
-import ActivationAlert from './_components/activation-alert';
 import Collections from './_components/collections';
 import Favorites from './_components/favorites';
 import History from './_components/history/history';
@@ -50,7 +49,6 @@ const Component = async ({ params: { username } }: Props) => {
         <HydrationBoundary state={dehydratedState}>
             <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_25%] lg:gap-16">
                 <div className="flex flex-col gap-12 lg:gap-16 order-2 lg:order-1">
-                    <ActivationAlert />
                     <Statistics />
                     <Favorites />
                 </div>
diff --git a/app/globals.css b/app/globals.css
index 2a8452f1..7c1d9f9b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -151,26 +151,6 @@ main {
     min-height: calc(100vh - 16.5rem);
 }
 
-h1 {
-    @apply font-display text-3xl font-bold;
-}
-
-h2 {
-    @apply font-display text-2xl font-bold;
-}
-
-h3 {
-    @apply font-display text-xl font-bold;
-}
-
-h4 {
-    @apply font-display text-lg font-bold;
-}
-
-h5 {
-    @apply font-display text-base font-bold;
-}
-
 [data-select] [data-radix-popper-content-wrapper] {
     position: absolute !important;
     width: 100%;
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 6201d1a0..e4e54319 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -5,12 +5,14 @@ import Link from 'next/link';
 import Image from '@/components/ui/image';
 
 import { Button } from '@/components/ui/button';
+import H1 from '@/components/typography/h1';
+import P from '@/components/typography/p';
 
 export default function NotFound() {
     return (
         <div className="flex min-h-screen flex-col">
             <div className="flex grow flex-col items-center justify-center gap-8">
-                <div className="flex flex-col justify-center gap-4">
+                <div className="flex flex-col justify-center">
                     <div className="flex justify-center gap-4">
                         <Image
                             src="/logo.svg"
@@ -19,9 +21,9 @@ export default function NotFound() {
                             height={24}
                         />
                         <div className="divider divider-horizontal" />
-                        <h1 className="text-center text-[3rem]">404</h1>
+                        <H1 className="text-center text-[3rem]">404</H1>
                     </div>
-                    <p className="">На жаль, такої сторінки не існує 😢</p>
+                    <P>На жаль, такої сторінки не існує 😢</P>
                 </div>
                 <Button variant="outline" asChild>
                     <Link href="/">На головну</Link>
diff --git a/components/anime-tooltip.tsx b/components/anime-tooltip.tsx
index 03aa3c2d..43362f4e 100644
--- a/components/anime-tooltip.tsx
+++ b/components/anime-tooltip.tsx
@@ -19,6 +19,8 @@ import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { MEDIA_TYPE, RELEASE_STATUS } from '@/utils/constants';
+import H5 from '@/components/typography/h5';
+import P from '@/components/typography/p';
 
 interface Props extends PropsWithChildren {
     slug: string;
@@ -65,7 +67,7 @@ const TooltipData = ({ slug }: { slug: string }) => {
         <>
             <div className="flex flex-col gap-2">
                 <div className="flex justify-between gap-2">
-                    <h5>{title}</h5>
+                    <H5>{title}</H5>
                     {data.score > 0 ? (
                         <div className="h-fit w-fit rounded-md  border border-accent bg-accent px-2 text-sm text-accent-foreground">
                             {data.score}
@@ -73,13 +75,8 @@ const TooltipData = ({ slug }: { slug: string }) => {
                     ) : null}
                 </div>
                 {synopsis && (
-                    <MDViewer className="text-sm">
-                        {synopsis.length > 150
-                            ? synopsis.substring(
-                                  0,
-                                  150 + synopsis.substring(150).indexOf(' '),
-                              ) + '...'
-                            : synopsis + '...'}
+                    <MDViewer className="text-sm line-clamp-4 mb-2">
+                        {synopsis}
                     </MDViewer>
                 )}
                 <div className="flex items-center">
@@ -88,7 +85,7 @@ const TooltipData = ({ slug }: { slug: string }) => {
                     </div>
                     <div className="flex flex-1 flex-wrap gap-2">
                         {data.media_type && (
-                            <Label className="text-sm">
+                            <Label>
                                 {MEDIA_TYPE[data.media_type].title_ua}
                             </Label>
                         )}
@@ -99,7 +96,7 @@ const TooltipData = ({ slug }: { slug: string }) => {
                                     RELEASE_STATUS[data.status].color,
                             }}
                         >
-                            <p>{RELEASE_STATUS[data.status].title_ua}</p>
+                            <P>{RELEASE_STATUS[data.status].title_ua}</P>
                         </div>
                     </div>
                 </div>
@@ -113,7 +110,7 @@ const TooltipData = ({ slug }: { slug: string }) => {
                                 </Label>
                             </div>
                             <div className="flex-1">
-                                <Label className="text-sm">
+                                <Label>
                                     {data.status === 'finished'
                                         ? data.episodes_total
                                         : `${data.episodes_released} / ${data.episodes_total}`}
diff --git a/components/comments/ui/comment.tsx b/components/comments/ui/comment.tsx
index bc5fccc5..a200a68c 100644
--- a/components/comments/ui/comment.tsx
+++ b/components/comments/ui/comment.tsx
@@ -17,6 +17,9 @@ import { useCommentsContext } from '@/services/providers/comments-provider';
 import getDeclensionWord from '@/utils/getDeclensionWord';
 
 import Comments from './comments';
+import H5 from '@/components/typography/h5';
+import Small from '@/components/typography/small';
+import P from '@/components/typography/p';
 
 
 interface Props {
@@ -85,15 +88,15 @@ const Component = ({ comment, slug, content_type }: Props) => {
                             href={`/u/${comment.author.username}`}
                             className="w-fit"
                         >
-                            <h5>{comment.author.username}</h5>
+                            <H5>{comment.author.username}</H5>
                         </Link>
-                        <p className="text-xs text-muted-foreground">
+                        <Small className="text-muted-foreground">
                             {formatDistance(
                                 comment.created * 1000,
                                 Date.now(),
                                 { addSuffix: true },
                             )}
-                        </p>
+                        </Small>
                     </div>
                     <CommentVote comment={comment} />
                 </div>
@@ -109,7 +112,7 @@ const Component = ({ comment, slug, content_type }: Props) => {
                         <MDViewer>{comment.text}</MDViewer>
                     )
                 ) : (
-                    <p className="text-muted-foreground">Коментар видалено</p>
+                    <P className="text-muted-foreground">Коментар видалено</P>
                 )}
             </div>
             <div className="flex gap-2 w-full items-center">
diff --git a/components/filters/_components/ui/badge-filter.tsx b/components/filters/_components/ui/badge-filter.tsx
index d7e25110..449135f9 100644
--- a/components/filters/_components/ui/badge-filter.tsx
+++ b/components/filters/_components/ui/badge-filter.tsx
@@ -7,6 +7,7 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
+import P from '@/components/typography/p';
 
 interface Props {
     property: string;
@@ -63,9 +64,9 @@ const Component = ({
                                     </div>
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                    <p className="text-sm">
+                                    <P className="text-sm">
                                         {properties[slug].description}
-                                    </p>
+                                    </P>
                                 </TooltipContent>
                             </Tooltip>
                         )}
diff --git a/components/markdown/editor/toolbar/bold-button.tsx b/components/markdown/editor/toolbar/bold-button.tsx
index e4cfb9e9..7f284ce1 100644
--- a/components/markdown/editor/toolbar/bold-button.tsx
+++ b/components/markdown/editor/toolbar/bold-button.tsx
@@ -9,6 +9,7 @@ import { applyFormat$, currentFormat$, iconComponentFor$, useCellValues, usePubl
 
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import P from '@/components/typography/p';
 
 
 export const IS_BOLD = 0b1 as const;
@@ -34,7 +35,7 @@ const Component = () => {
                 </Button>
             </TooltipTrigger>
             <TooltipContent>
-                <p>Жирний</p>
+                <P>Жирний</P>
             </TooltipContent>
         </Tooltip>
     );
diff --git a/components/markdown/editor/toolbar/italic-button.tsx b/components/markdown/editor/toolbar/italic-button.tsx
index 46c8de7e..25124072 100644
--- a/components/markdown/editor/toolbar/italic-button.tsx
+++ b/components/markdown/editor/toolbar/italic-button.tsx
@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import MaterialSymbolsFormatBoldRounded from '~icons/*';
+import P from '@/components/typography/p';
 
 export const IS_ITALIC = 0b10 as const;
 
@@ -36,7 +37,7 @@ const Component = () => {
                 </Button>
             </TooltipTrigger>
             <TooltipContent>
-                <p>Курсив</p>
+                <P>Курсив</P>
             </TooltipContent>
         </Tooltip>
     );
diff --git a/components/markdown/editor/toolbar/link-button.tsx b/components/markdown/editor/toolbar/link-button.tsx
index 4490e26f..d0cbeb23 100644
--- a/components/markdown/editor/toolbar/link-button.tsx
+++ b/components/markdown/editor/toolbar/link-button.tsx
@@ -9,6 +9,7 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
+import P from '@/components/typography/p';
 
 
 const Component = () => {
@@ -26,7 +27,7 @@ const Component = () => {
                 </Button>
             </TooltipTrigger>
             <TooltipContent>
-                <p>Посилання</p>
+                <P>Посилання</P>
             </TooltipContent>
         </Tooltip>
     );
diff --git a/components/markdown/editor/toolbar/spoiler-button.tsx b/components/markdown/editor/toolbar/spoiler-button.tsx
index 3bfc5ed4..9f6db809 100644
--- a/components/markdown/editor/toolbar/spoiler-button.tsx
+++ b/components/markdown/editor/toolbar/spoiler-button.tsx
@@ -9,6 +9,7 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
+import P from '@/components/typography/p';
 
 
 const SpoilerButton = () => {
@@ -31,7 +32,7 @@ const SpoilerButton = () => {
                 </Button>
             </TooltipTrigger>
             <TooltipContent>
-                <p>Спойлер</p>
+                <P>Спойлер</P>
             </TooltipContent>
         </Tooltip>
     );
diff --git a/components/markdown/viewer/_components/link.tsx b/components/markdown/viewer/_components/link.tsx
index 6419c0ee..e400e3a8 100644
--- a/components/markdown/viewer/_components/link.tsx
+++ b/components/markdown/viewer/_components/link.tsx
@@ -16,6 +16,7 @@ import {
     AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
 import { cn } from '@/utils';
+import P from '@/components/typography/p';
 
 interface Props {
     href: string;
@@ -72,7 +73,7 @@ const Component = ({ children, href, className }: PropsWithChildren<Props>) => {
                     <AlertDialogDescription>
                         <div className="flex gap-2 items-center">
                             <MaterialSymbolsLinkRounded />
-                            <p className="flex-1 truncate">{href}</p>
+                            <P className="flex-1 truncate">{href}</P>
                         </div>
                     </AlertDialogDescription>
                 </AlertDialogHeader>
diff --git a/components/modals/auth-modal/_components/forgot-password-form.tsx b/components/modals/auth-modal/_components/forgot-password-form.tsx
index dc527e99..06823afd 100644
--- a/components/modals/auth-modal/_components/forgot-password-form.tsx
+++ b/components/modals/auth-modal/_components/forgot-password-form.tsx
@@ -1,8 +1,11 @@
 'use client';
 
 import { useSnackbar } from 'notistack';
+import React from 'react';
 import { useForm } from 'react-hook-form';
 
+import AuthModal from '@/components/modals/auth-modal/auth-modal';
+import H2 from '@/components/typography/h2';
 import { Button } from '@/components/ui/button';
 import {
     Form,
@@ -15,8 +18,7 @@ import {
 import { Input } from '@/components/ui/input';
 import passwordReset from '@/services/api/auth/passwordReset';
 import { useModalContext } from '@/services/providers/modal-provider';
-import AuthModal from '@/components/modals/auth-modal/auth-modal';
-import React from 'react';
+import Small from '@/components/typography/small';
 
 type FormValues = {
     email: string;
@@ -53,11 +55,11 @@ const Component = () => {
         <div className="w-full space-y-4">
             <div className="flex w-full flex-col items-center gap-4 text-center">
                 <div>
-                    <h2 className="text-primary">🔐 Відновити пароль</h2>
-                    <p className="text-xs mt-2 text-muted-foreground">
+                    <H2 className="text-primary">🔐 Відновити пароль</H2>
+                    <Small className="mt-2 text-muted-foreground">
                         Будь ласка, введіть дані для отримання листа
                         відновлення.
-                    </p>
+                    </Small>
                 </div>
             </div>
             <Form {...form}>
@@ -97,10 +99,12 @@ const Component = () => {
                         <Button
                             variant="secondary"
                             disabled={form.formState.isSubmitting}
-                            onClick={() => openModal({
-                                content: <AuthModal type="login" />,
-                                className: 'p-0 max-w-3xl',
-                            })}
+                            onClick={() =>
+                                openModal({
+                                    content: <AuthModal type="login" />,
+                                    className: 'p-0 max-w-3xl',
+                                })
+                            }
                             className="w-full"
                         >
                             Авторизація
@@ -112,4 +116,4 @@ const Component = () => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/components/modals/auth-modal/_components/login-form.tsx b/components/modals/auth-modal/_components/login-form.tsx
index 5eb576d8..3f73b8f6 100644
--- a/components/modals/auth-modal/_components/login-form.tsx
+++ b/components/modals/auth-modal/_components/login-form.tsx
@@ -22,6 +22,8 @@ import login from '@/services/api/auth/login';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { useRouter } from 'next/navigation';
+import H2 from '@/components/typography/h2';
+import Small from '@/components/typography/small';
 
 type FormValues = {
     email: string;
@@ -65,10 +67,10 @@ const Component = () => {
         <div className="w-full space-y-4">
             <div className="flex w-full flex-col items-center gap-4 text-center">
                 <div>
-                    <h2 className="text-primary">👋 З поверненням!</h2>
-                    <p className="text-xs mt-2 text-muted-foreground">
+                    <H2 className="text-primary">👋 З поверненням!</H2>
+                    <Small className="mt-2 text-muted-foreground">
                         Будь ласка, зареєструйтесь, або авторизуйтесь.
-                    </p>
+                    </Small>
                 </div>
             </div>
             <Form {...form}>
diff --git a/components/modals/auth-modal/_components/password-confirm-form.tsx b/components/modals/auth-modal/_components/password-confirm-form.tsx
index 002323b5..63f4baaf 100644
--- a/components/modals/auth-modal/_components/password-confirm-form.tsx
+++ b/components/modals/auth-modal/_components/password-confirm-form.tsx
@@ -19,6 +19,8 @@ import { setCookie } from '@/app/actions';
 import confirmPasswordReset from '@/services/api/auth/confirmPasswordReset';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
+import H2 from '@/components/typography/h2';
+import Small from '@/components/typography/small';
 
 type FormValues = {
     password: string;
@@ -64,10 +66,10 @@ const Component = () => {
         <div className="w-full space-y-4">
             <div className="flex w-full flex-col items-center gap-4 text-center">
                 <div>
-                    <h2 className="text-primary">🔓 Відновити пароль</h2>
-                    <p className="text-xs mt-2 text-muted-foreground">
+                    <H2 className="text-primary">🔓 Відновити пароль</H2>
+                    <Small className="mt-2 text-muted-foreground">
                         Будь ласка, введіть новий пароль.
-                    </p>
+                    </Small>
                 </div>
             </div>
             <Form {...form}>
diff --git a/components/modals/auth-modal/_components/signup-form.tsx b/components/modals/auth-modal/_components/signup-form.tsx
index 41f8ca17..f3c9b1ed 100644
--- a/components/modals/auth-modal/_components/signup-form.tsx
+++ b/components/modals/auth-modal/_components/signup-form.tsx
@@ -23,6 +23,8 @@ import signup from '@/services/api/auth/signup';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { useRouter } from 'next/navigation';
+import H2 from '@/components/typography/h2';
+import Small from '@/components/typography/small';
 
 type FormValues = {
     email: string;
@@ -90,10 +92,10 @@ const Component = () => {
         <div className="w-full space-y-4">
             <div className="flex w-full flex-col items-center gap-4 text-center">
                 <div>
-                    <h2 className="text-primary">✌️ Раді познайомитись!</h2>
-                    <p className="text-xs mt-2 text-muted-foreground">
+                    <H2 className="text-primary">✌️ Раді познайомитись!</H2>
+                    <Small className="mt-2 text-muted-foreground">
                         Будь ласка, заповніть форму реєстрації.
-                    </p>
+                    </Small>
                 </div>
             </div>
             <Form {...form}>
diff --git a/components/modals/editlist-modal/_components/ui/edit-card.tsx b/components/modals/editlist-modal/_components/ui/edit-card.tsx
index 859af58c..02a385c8 100644
--- a/components/modals/editlist-modal/_components/ui/edit-card.tsx
+++ b/components/modals/editlist-modal/_components/ui/edit-card.tsx
@@ -10,6 +10,9 @@ import Link, { LinkProps } from 'next/link';
 import { EDIT_STATUS } from '@/utils/constants';
 
 import { Avatar, AvatarFallback, AvatarImage } from '../../../../ui/avatar';
+import H5 from '@/components/typography/h5';
+import P from '@/components/typography/p';
+import Small from '@/components/typography/small';
 
 interface Props extends LinkProps {
     edit: API.Edit;
@@ -40,17 +43,17 @@ const Component = ({ edit, href, ...props }: Props) => {
 
             <div className="flex flex-1 flex-col w-full overflow-hidden">
                 {edit.author ? (
-                    <h5 className="truncate min-w-0">{edit.author.username}</h5>
+                    <H5 className="truncate min-w-0">{edit.author.username}</H5>
                 ) : (
-                    <h5 className="text-muted-foreground truncate min-w-0">
+                    <H5 className="text-muted-foreground truncate min-w-0">
                         Системна правка
-                    </h5>
+                    </H5>
                 )}
                 <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-4">
-                        <p className="text-xs text-muted-foreground">
+                        <Small className="text-muted-foreground">
                             {format(edit.created * 1000, 'd MMM yyyy H:mm')}
-                        </p>
+                        </Small>
                     </div>
                 </div>
             </div>
@@ -60,9 +63,9 @@ const Component = ({ edit, href, ...props }: Props) => {
                     backgroundColor: EDIT_STATUS[edit.status].color,
                 }}
             >
-                <p className="text-sm text-white">
+                <P className="text-sm text-white">
                     {EDIT_STATUS[edit.status as API.EditStatus].title_ua}
-                </p>
+                </P>
             </div>
         </Link>
     );
diff --git a/components/modals/search-modal/_components/ui/search-card.tsx b/components/modals/search-modal/_components/ui/search-card.tsx
index 8830308c..d6bd1a1e 100644
--- a/components/modals/search-modal/_components/ui/search-card.tsx
+++ b/components/modals/search-modal/_components/ui/search-card.tsx
@@ -16,6 +16,8 @@ import { MEDIA_TYPE, RELEASE_STATUS } from '@/utils/constants';
 import { Label } from '../../../../ui/label';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { Button } from '@/components/ui/button';
+import H5 from '@/components/typography/h5';
+import P from '@/components/typography/p';
 
 
 interface Props {
@@ -39,15 +41,15 @@ const Component = ({ anime, onClick, type }: Props) => {
                 <BaseCard poster={anime.poster} />
             </div>
             <div className="flex w-full flex-col gap-2">
-                <h5>
+                <H5>
                     {anime[titleLanguage!] || anime.title_ua || anime.title_en || anime.title_ja}{' '}
                     <Label className="text-muted-foreground">/ {anime.title_ja}</Label>
-                </h5>
+                </H5>
                 <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-4">
                         {anime.media_type && <div className="flex gap-2">
-                            <Label className="text-sm text-muted-foreground">Тип:</Label>
-                            <Label className="text-sm">
+                            <Label className="text-muted-foreground">Тип:</Label>
+                            <Label>
                                 {MEDIA_TYPE[anime.media_type].title_ua}
                             </Label>
                         </div>}
@@ -58,12 +60,12 @@ const Component = ({ anime, onClick, type }: Props) => {
                                     RELEASE_STATUS[anime.status].color,
                             }}
                         >
-                            <p>{RELEASE_STATUS[anime.status].title_ua}</p>
+                            <P>{RELEASE_STATUS[anime.status].title_ua}</P>
                         </div>
                     </div>
                     <div className="flex gap-2">
-                        <Label className="text-sm text-muted-foreground">Оцінка:</Label>
-                        <Label className="text-sm">{anime.score}</Label>
+                        <Label className="text-muted-foreground">Оцінка:</Label>
+                        <Label>{anime.score}</Label>
                     </div>
                 </div>
             </div>
diff --git a/components/modals/user-settings-modal/_components/customization-form.tsx b/components/modals/user-settings-modal/_components/customization-form.tsx
index dd397db4..4cd2ca5d 100644
--- a/components/modals/user-settings-modal/_components/customization-form.tsx
+++ b/components/modals/user-settings-modal/_components/customization-form.tsx
@@ -9,6 +9,7 @@ import MaterialSymbolsSunnyOutlineRounded from '~icons/material-symbols/sunny-ou
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
 import { useSettingsContext } from '@/services/providers/settings-provider';
+import H3 from '@/components/typography/h3';
 
 const Component = () => {
     const { titleLanguage, setState: setSettingsState } = useSettingsContext();
@@ -17,7 +18,7 @@ const Component = () => {
     return (
         <div className="w-full p-6 flex flex-col gap-6">
             <div className="flex items-center">
-                <h3>Кастомізація</h3>
+                <H3>Кастомізація</H3>
             </div>
             <div className="w-full flex flex-col gap-2">
                 <Label>Тема сайту</Label>
diff --git a/components/modals/user-settings-modal/_components/email-form.tsx b/components/modals/user-settings-modal/_components/email-form.tsx
index 463ca369..484a0e70 100644
--- a/components/modals/user-settings-modal/_components/email-form.tsx
+++ b/components/modals/user-settings-modal/_components/email-form.tsx
@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 
 import { useQueryClient } from '@tanstack/react-query';
 
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -57,7 +58,7 @@ const Component = () => {
             className="flex flex-col gap-6 p-6"
         >
             <div className="flex items-center">
-                <h3>Email</h3>
+                <H3>Email</H3>
             </div>
             <div className="flex w-full flex-col gap-6">
                 <div className="flex flex-col gap-2 w-full">
@@ -94,4 +95,4 @@ const Component = () => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/components/modals/user-settings-modal/_components/general-form.tsx b/components/modals/user-settings-modal/_components/general-form.tsx
index 428cc805..cd0c40ef 100644
--- a/components/modals/user-settings-modal/_components/general-form.tsx
+++ b/components/modals/user-settings-modal/_components/general-form.tsx
@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 
 import { useQueryClient } from '@tanstack/react-query';
 
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -57,7 +58,7 @@ const Component = () => {
             className="flex flex-col gap-6 p-6"
         >
             <div className="flex items-center">
-                <h3>Загальне</h3>
+                <H3>Загальне</H3>
             </div>
             <div className="w-full">
                 <div className="flex flex-col gap-2 w-full">
@@ -88,4 +89,4 @@ const Component = () => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/components/modals/user-settings-modal/_components/password-form.tsx b/components/modals/user-settings-modal/_components/password-form.tsx
index 472f1b62..b2596bc9 100644
--- a/components/modals/user-settings-modal/_components/password-form.tsx
+++ b/components/modals/user-settings-modal/_components/password-form.tsx
@@ -11,6 +11,7 @@ import { Label } from '@/components/ui/label';
 import changeUserPassword from '@/services/api/settings/changeUserPassword';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
+import H3 from '@/components/typography/h3';
 
 
 type FormValues = {
@@ -57,7 +58,7 @@ const Component = () => {
             className="flex flex-col gap-6 p-6"
         >
             <div className="flex items-center">
-                <h3>Пароль</h3>
+                <H3>Пароль</H3>
             </div>
             <div className="flex w-full flex-col gap-6">
                 <div className="flex flex-col gap-2 w-full">
diff --git a/components/modals/user-settings-modal/_components/username-form.tsx b/components/modals/user-settings-modal/_components/username-form.tsx
index 28c6e0b4..2c6d5d5b 100644
--- a/components/modals/user-settings-modal/_components/username-form.tsx
+++ b/components/modals/user-settings-modal/_components/username-form.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 
 import { useQueryClient } from '@tanstack/react-query';
 
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -56,7 +57,7 @@ const Component = () => {
             className="flex flex-col gap-6 p-6"
         >
             <div className="flex items-center">
-                <h3>Ім’я користувача</h3>
+                <H3>Ім’я користувача</H3>
             </div>
             <div className="w-full">
                 <div className="flex flex-col gap-2 w-full">
@@ -80,4 +81,4 @@ const Component = () => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/components/modals/user-settings-modal/_components/watchlist-form.tsx b/components/modals/user-settings-modal/_components/watchlist-form.tsx
index 7eff340b..0c6ff10e 100644
--- a/components/modals/user-settings-modal/_components/watchlist-form.tsx
+++ b/components/modals/user-settings-modal/_components/watchlist-form.tsx
@@ -7,20 +7,24 @@ import { useDropzone } from 'react-dropzone';
 import { xml2json } from 'xml-js';
 import MaterialSymbolsCheckSmallRounded from '~icons/material-symbols/check-small-rounded';
 
+
+
 import Link from 'next/link';
 
+
+
 import { useQueryClient } from '@tanstack/react-query';
 
+
+
+import H3 from '@/components/typography/h3';
+import P from '@/components/typography/p';
+import Small from '@/components/typography/small';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import {
-    Tabs,
-    TabsContent,
-    TabsList,
-    TabsTrigger,
-} from '@/components/ui/tabs';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import importAnilistWatch from '@/services/api/settings/importAnilistWatch';
 import importWatch from '@/services/api/settings/importWatch';
 import { useAuthContext } from '@/services/providers/auth-provider';
@@ -146,13 +150,13 @@ const Component = () => {
 
     const found = (
         <div>
-            <p>
+            <P>
                 У вашому списку знайдено{' '}
                 <span className="rounded-sm bg-primary px-1 text-primary-foreground">
                     {watchList.length}
                 </span>{' '}
                 аніме, що готові до імпорту
-            </p>
+            </P>
         </div>
     );
 
@@ -207,19 +211,19 @@ const Component = () => {
             >
                 <input {...getInputProps()} />
                 {isDragActive ? (
-                    <p className="text-muted-foreground text-sm">
+                    <P className="text-muted-foreground text-sm">
                         Перетягніть файл сюди...
-                    </p>
+                    </P>
                 ) : watchList.length === 0 ? (
-                    <p className="text-muted-foreground text-sm">
+                    <P className="text-muted-foreground text-sm">
                         Перетягніть сюди <span>.XML</span> файл, або натисніть,
                         щоб завантажити
-                    </p>
+                    </P>
                 ) : (
                     found
                 )}
             </div>
-            <Label className="text-xs text-muted-foreground">
+            <Small className="text-muted-foreground">
                 <span>
                     Ви можете імпортувати свій список з{' '}
                     <Link
@@ -234,14 +238,14 @@ const Component = () => {
                         Shikimori
                     </span>
                 </span>
-            </Label>
+            </Small>
         </div>
     );
 
     return (
         <div className="flex flex-col gap-6 p-6">
             <div className="flex items-center">
-                <h3>Імпорт</h3>
+                <H3>Імпорт</H3>
             </div>
 
             <Tabs
@@ -286,4 +290,4 @@ const Component = () => {
     );
 };
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/components/modals/user-settings-modal/user-settings-modal.tsx b/components/modals/user-settings-modal/user-settings-modal.tsx
index 43784e35..cc57bdd3 100644
--- a/components/modals/user-settings-modal/user-settings-modal.tsx
+++ b/components/modals/user-settings-modal/user-settings-modal.tsx
@@ -4,14 +4,20 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { Dispatch, ReactNode, SetStateAction, useState } from 'react';
 
+
+
 import CustomizationForm from '@/components/modals/user-settings-modal/_components/customization-form';
 import EmailForm from '@/components/modals/user-settings-modal/_components/email-form';
 import GeneralForm from '@/components/modals/user-settings-modal/_components/general-form';
 import PasswordForm from '@/components/modals/user-settings-modal/_components/password-form';
 import UsernameForm from '@/components/modals/user-settings-modal/_components/username-form';
 import WatchListForm from '@/components/modals/user-settings-modal/_components/watchlist-form';
+import H3 from '@/components/typography/h3';
+import Small from '@/components/typography/small';
 import useIsMobile from '@/services/hooks/useIsMobile';
 import { cn } from '@/utils';
+import P from '@/components/typography/p';
+
 
 type Tab =
     | 'general'
@@ -69,7 +75,7 @@ const Tabs = ({ setActiveTab, activeTab }: { activeTab?: Tab, setActiveTab: Disp
     return (
         <div className='flex h-full w-full flex-col gap-4 border-r-secondary/60 py-6 lg:border-r'>
             <div className='flex items-center'>
-                <h3 className='px-6'>Налаштування</h3>
+                <H3 className='px-6'>Налаштування</H3>
             </div>
             <ul className='menu w-full p-0 [&_li>*]:rounded-none'>
                 {DATA.map((tab) => (
@@ -84,10 +90,10 @@ const Tabs = ({ setActiveTab, activeTab }: { activeTab?: Tab, setActiveTab: Disp
                                 'hover:cursor-pointer',
                             )}
                         >
-                            <p>{tab.title}</p>
-                            <p className='text-xs text-muted-foreground'>
+                            <P>{tab.title}</P>
+                            <Small className='text-muted-foreground'>
                                 {tab.description}
-                            </p>
+                            </Small>
                         </a>
                     </li>
                 ))}
diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx
index ac9781d5..d96adb9f 100644
--- a/components/nav-menu.tsx
+++ b/components/nav-menu.tsx
@@ -14,6 +14,7 @@ import {
     NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu';
 import useIsMobile from '@/services/hooks/useIsMobile';
+import P from '@/components/typography/p';
 
 interface Props {
     routes: Hikka.NavRoute[];
@@ -34,7 +35,7 @@ const Component = ({ routes, urlPrefix, showOnMobile, isEqualPath = true }: Prop
         ) || routes[0];
 
     if (isMobile && !showOnMobile) {
-        return current && <p className="text-sm">{current.title_ua}</p>;
+        return current && <P className="text-sm">{current.title_ua}</P>;
     }
 
     return (
@@ -43,7 +44,7 @@ const Component = ({ routes, urlPrefix, showOnMobile, isEqualPath = true }: Prop
                 <NavigationMenuItem>
                     <NavigationMenuTrigger>
                         {current && (
-                            <p className="text-sm">{current.title_ua}</p>
+                            <P className="text-sm">{current.title_ua}</P>
                         )}
                     </NavigationMenuTrigger>
                     <NavigationMenuContent>
diff --git a/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/not-found-notifications.tsx b/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/not-found-notifications.tsx
index 2161f1bf..6866c473 100644
--- a/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/not-found-notifications.tsx
+++ b/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/not-found-notifications.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import MaterialSymbolsNotificationImportantRounded from '~icons/material-symbols/notification-important-rounded';
 
 import { Label } from '@/components/ui/label';
+import P from '@/components/typography/p';
 
 interface Props {}
 
@@ -15,9 +16,9 @@ const Component = ({}: Props) => {
             </div>
             <div className="flex flex-col gap-2">
                 <Label>Сповіщень не знайдено</Label>
-                <p className="text-sm text-muted-foreground">
+                <P className="text-sm text-muted-foreground">
                     Тут будуть відображатись майбутні сповіщення
-                </p>
+                </P>
             </div>
         </div>
     );
diff --git a/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/ui/notification-item.tsx b/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/ui/notification-item.tsx
index 8c6c6d01..4ceeebc2 100644
--- a/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/ui/notification-item.tsx
+++ b/components/navbar/_components/profile-navbar/_components/notifications-menu/_components/ui/notification-item.tsx
@@ -9,6 +9,8 @@ import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { Label } from '@/components/ui/label';
 import useSeenNotification from '@/services/hooks/notifications/useSeenNotification';
 import { useAuthContext } from '@/services/providers/auth-provider';
+import P from '@/components/typography/p';
+import Small from '@/components/typography/small';
 
 interface Props {
     data: Hikka.TextNotification;
@@ -44,14 +46,14 @@ const Component = ({ data }: Props) => {
                         <div className="w-2 h-2 bg-warning rounded-full" />
                     )}
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <P className="text-sm text-muted-foreground">
                     {data.description}
-                </p>
-                <p className="text-xs text-muted-foreground opacity-60">
+                </P>
+                <Small className="text-muted-foreground opacity-60">
                     {formatDistance(data.created * 1000, Date.now(), {
                         addSuffix: true,
                     })}
-                </p>
+                </Small>
             </div>
         </DropdownMenuItem>
     );
diff --git a/components/navbar/_components/profile-navbar/_components/profile-menu.tsx b/components/navbar/_components/profile-navbar/_components/profile-menu.tsx
index 2b8ebee4..341f2902 100644
--- a/components/navbar/_components/profile-navbar/_components/profile-menu.tsx
+++ b/components/navbar/_components/profile-navbar/_components/profile-menu.tsx
@@ -28,6 +28,7 @@ import {
 import SettingsModal from '@/components/modals/user-settings-modal/user-settings-modal';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
+import H5 from '@/components/typography/h5';
 
 interface Props {}
 
@@ -70,7 +71,7 @@ const Component = ({}: Props) => {
                     <Avatar className="avatar w-10 rounded-md">
                         <AvatarImage src={loggedUser.avatar} alt="pfp" />
                     </Avatar>
-                    <h5 className="truncate">{loggedUser.username}</h5>
+                    <H5 className="truncate">{loggedUser.username}</H5>
                 </div>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
diff --git a/components/sub-header.tsx b/components/sub-header.tsx
index aa4386c7..313345d2 100644
--- a/components/sub-header.tsx
+++ b/components/sub-header.tsx
@@ -6,6 +6,9 @@ import MaterialSymbolsArrowRightAltRounded from '~icons/material-symbols/arrow-r
 
 import Link from 'next/link';
 
+import H3 from '@/components/typography/h3';
+import H4 from '@/components/typography/h4';
+import H5 from '@/components/typography/h5';
 import { Button } from '@/components/ui/button';
 
 interface Props extends PropsWithChildren {
@@ -26,7 +29,18 @@ const Component = ({
     className,
     titleClassName,
 }: Props) => {
-    const Title = variant ? variant : 'h3';
+    const getTitle = () => {
+        switch (variant) {
+            case 'h4':
+                return H4;
+            case 'h5':
+                return H5;
+            default:
+                return H3;
+        }
+    };
+
+    const Title = getTitle();
 
     return (
         <div
diff --git a/components/typography/blockquote.tsx b/components/typography/blockquote.tsx
new file mode 100644
index 00000000..a9af9bdc
--- /dev/null
+++ b/components/typography/blockquote.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function Blockquote({ children, className }: Props) {
+    return (
+        <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)}>
+            {children}
+        </blockquote>
+    );
+}
diff --git a/components/typography/h1.tsx b/components/typography/h1.tsx
new file mode 100644
index 00000000..fabe2f15
--- /dev/null
+++ b/components/typography/h1.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function H1({ children, className }: Props) {
+    return (
+        <h1
+            className={cn(
+                'scroll-m-20 text-4xl font-display font-bold tracking-tight lg:text-5xl',
+                className,
+            )}
+        >
+            {children}
+        </h1>
+    );
+}
diff --git a/components/typography/h2.tsx b/components/typography/h2.tsx
new file mode 100644
index 00000000..6032b4a9
--- /dev/null
+++ b/components/typography/h2.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function H2({ children, className }: Props) {
+    return (
+        <h2
+            className={cn(
+                'scroll-m-20 text-2xl font-display font-bold tracking-tight first:mt-0',
+                className,
+            )}
+        >
+            {children}
+        </h2>
+    );
+}
diff --git a/components/typography/h3.tsx b/components/typography/h3.tsx
new file mode 100644
index 00000000..5d51c8c4
--- /dev/null
+++ b/components/typography/h3.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function H3({ children, className }: Props) {
+    return (
+        <h3
+            className={cn(
+                'scroll-m-20 text-xl font-display font-bold tracking-tight',
+                className,
+            )}
+        >
+            {children}
+        </h3>
+    );
+}
diff --git a/components/typography/h4.tsx b/components/typography/h4.tsx
new file mode 100644
index 00000000..18009ff2
--- /dev/null
+++ b/components/typography/h4.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function H4({ children, className }: Props) {
+    return (
+        <h4
+            className={cn(
+                'scroll-m-20 text-lg font-display font-bold tracking-tight',
+                className,
+            )}
+        >
+            {children}
+        </h4>
+    );
+}
diff --git a/components/typography/h5.tsx b/components/typography/h5.tsx
new file mode 100644
index 00000000..58680422
--- /dev/null
+++ b/components/typography/h5.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function H5({ children, className }: Props) {
+    return (
+        <h5
+            className={cn(
+                'scroll-m-20 text-base font-display font-bold tracking-tight',
+                className,
+            )}
+        >
+            {children}
+        </h5>
+    );
+}
diff --git a/components/typography/inline-code.tsx b/components/typography/inline-code.tsx
new file mode 100644
index 00000000..391ff342
--- /dev/null
+++ b/components/typography/inline-code.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function InlineCode({ children, className }: Props) {
+    return (
+        <code
+            className={cn(
+                'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',
+                className,
+            )}
+        >
+            {children}
+        </code>
+    );
+}
diff --git a/components/typography/large.tsx b/components/typography/large.tsx
new file mode 100644
index 00000000..60f775ed
--- /dev/null
+++ b/components/typography/large.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function Large({ children, className }: Props) {
+    return (
+        <div className={cn('text-lg font-semibold', className)}>{children}</div>
+    );
+}
diff --git a/components/typography/lead.tsx b/components/typography/lead.tsx
new file mode 100644
index 00000000..03eae341
--- /dev/null
+++ b/components/typography/lead.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function Lead({ children, className }: Props) {
+    return (
+        <p className={cn('text-xl text-muted-foreground', className)}>
+            {children}
+        </p>
+    );
+}
diff --git a/components/typography/muted.tsx b/components/typography/muted.tsx
new file mode 100644
index 00000000..9d41bcf5
--- /dev/null
+++ b/components/typography/muted.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function Muted({ children, className }: Props) {
+    return (
+        <p className={cn('text-sm text-muted-foreground', className)}>
+            {children}
+        </p>
+    );
+}
diff --git a/components/typography/p.tsx b/components/typography/p.tsx
new file mode 100644
index 00000000..0d21b416
--- /dev/null
+++ b/components/typography/p.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function P({ children, className }: Props) {
+    return (
+        <p className={cn( className)}>
+            {children}
+        </p>
+    );
+}
diff --git a/components/typography/small.tsx b/components/typography/small.tsx
new file mode 100644
index 00000000..fed7583b
--- /dev/null
+++ b/components/typography/small.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+    children: ReactNode | string;
+    className?: string;
+}
+
+export default function Small({ children, className }: Props) {
+    return (
+        <small className={cn('text-xs leading-normal', className)}>
+            {children}
+        </small>
+    );
+}
diff --git a/components/ui/base-card.tsx b/components/ui/base-card.tsx
index 398107d7..44d2d847 100644
--- a/components/ui/base-card.tsx
+++ b/components/ui/base-card.tsx
@@ -10,6 +10,7 @@ import { UrlObject } from 'url';
 
 import Link from 'next/link';
 
+import P from '@/components/typography/p';
 import Image from '@/components/ui/image';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/utils';
@@ -79,13 +80,29 @@ const Component = forwardRef(
                     {children}
                 </div>
                 {(title || description) && (
-                    <div className="mt-1 truncate">
+                    <div
+                        className={cn(
+                            'mt-1',
+                            (leftSubtitle || rightSubtitle) && 'truncate',
+                        )}
+                    >
                         {description && (
-                            <p className="text-xs text-muted-foreground mb-1">
+                            <P className="text-xs text-muted-foreground mb-1">
                                 {description}
-                            </p>
+                            </P>
+                        )}
+                        {title && (
+                            <Label
+                                className={cn(
+                                    'leading-5',
+                                    !leftSubtitle &&
+                                        !rightSubtitle &&
+                                        'line-clamp-2',
+                                )}
+                            >
+                                {title}
+                            </Label>
                         )}
-                        {title && <Label className="leading-5">{title}</Label>}
                         {(leftSubtitle || rightSubtitle) && (
                             <div className="flex gap-2 mt-1 items-center">
                                 {leftSubtitle && (
@@ -127,7 +144,10 @@ const Component = forwardRef(
         return (
             <Link
                 href={href}
-                className={cn("relative group flex w-full flex-col gap-2", className)}
+                className={cn(
+                    'relative group flex w-full flex-col gap-2',
+                    className,
+                )}
                 scroll
                 {...props}
                 ref={ref}
diff --git a/components/ui/not-found.tsx b/components/ui/not-found.tsx
index 24cba34c..3e76e669 100644
--- a/components/ui/not-found.tsx
+++ b/components/ui/not-found.tsx
@@ -2,6 +2,8 @@
 
 import { PropsWithChildren, ReactNode } from 'react';
 import MaterialSymbolsFeatureSearch from '~icons/material-symbols/feature-search';
+import H3 from '@/components/typography/h3';
+import P from '@/components/typography/p';
 
 interface Props extends PropsWithChildren {
     title: string | ReactNode;
@@ -14,9 +16,9 @@ const Component = ({ title, description, children }: Props) => {
             <div className="flex items-center gap-4">
                 <MaterialSymbolsFeatureSearch className="text-muted-foreground text-4xl" />
                 <div className="flex flex-col gap-1 flex-1">
-                    <h3 className="text-xl">{title}</h3>
+                    <H3 className="text-xl">{title}</H3>
                     {description && (
-                        <p className="text-muted-foreground text-sm">{description}</p>
+                        <P className="text-muted-foreground text-sm">{description}</P>
                     )}
                 </div>
             </div>
diff --git a/services/api/integrations/mal/getAnimeFromMAL.ts b/services/api/integrations/mal/getAnimeFromMAL.ts
new file mode 100644
index 00000000..6d952140
--- /dev/null
+++ b/services/api/integrations/mal/getAnimeFromMAL.ts
@@ -0,0 +1,15 @@
+import { fetchRequest } from '@/services/api/fetchRequest';
+
+export interface Response extends API.WithPagination<API.AnimeInfo> {}
+
+export default async function req({
+    mal_ids,
+}: {
+    mal_ids: number[];
+}): Promise<Response> {
+    return fetchRequest<Response>({
+        path: `/integrations/mal/anime`,
+        method: 'get',
+        params: { mal_ids },
+    });
+}
diff --git a/services/hooks/edit/useEdit.ts b/services/hooks/edit/useEdit.ts
index b3b66273..81b38314 100644
--- a/services/hooks/edit/useEdit.ts
+++ b/services/hooks/edit/useEdit.ts
@@ -2,14 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 
 import getEdit from '@/services/api/edit/getEdit';
 
-const useEdit = <T extends API.Edit>(
-    editId: string,
-    select?: (data: T) => T,
-) => {
+const useEdit = <T extends API.Edit>(editId: string, enabled?: boolean) => {
     return useQuery<T, Error>({
         queryKey: ['edit', editId],
         queryFn: () => getEdit({ edit_id: Number(editId) }),
-        select: select,
+        enabled,
     });
 };
 
diff --git a/types/api.d.ts b/types/api.d.ts
new file mode 100644
index 00000000..c536f1d3
--- /dev/null
+++ b/types/api.d.ts
@@ -0,0 +1,376 @@
+export {};
+
+declare global {
+    namespace API {
+        type UserRole =
+            | 'admin'
+            | 'moderator'
+            | 'user'
+            | 'banned'
+            | 'not_activated';
+
+        type WatchStatus =
+            | 'completed'
+            | 'watching'
+            | 'planned'
+            | 'dropped'
+            | 'on_hold';
+
+        type StatType =
+            | WatchStatus
+            | 'score_1'
+            | 'score_2'
+            | 'score_3'
+            | 'score_4'
+            | 'score_5'
+            | 'score_6'
+            | 'score_7'
+            | 'score_8'
+            | 'score_9'
+            | 'score_10';
+
+        type Season = 'summer' | 'winter' | 'fall' | 'spring';
+
+        type MediaType = 'tv' | 'movie' | 'ova' | 'ona' | 'special' | 'music';
+
+        type AgeRating = 'g' | 'pg' | 'pg_13' | 'r' | 'r_plus' | 'rx';
+
+        type Status =
+            | 'ongoing'
+            | 'finished'
+            // | 'discontinued'
+            // | 'paused'
+            | 'announced';
+
+        type VideoType = 'video_promo' | 'video_music';
+
+        type OSTType = 'opening' | 'ending';
+
+        type Source =
+            | 'digital_manga'
+            | 'picture_book'
+            | 'visual_novel'
+            | '4_koma_manga'
+            | 'light_novel'
+            | 'card_game'
+            | 'web_manga'
+            | 'original'
+            | 'manga'
+            | 'music'
+            | 'novel'
+            | 'other'
+            | 'radio'
+            | 'game'
+            | 'book';
+
+        type EditStatus = 'pending' | 'accepted' | 'denied' | 'closed';
+
+        type ContentType =
+            | 'edit'
+            | 'anime'
+            | 'character'
+            | 'person'
+            | 'comment'
+            | 'collection';
+
+        type HistoryType =
+            | 'watch'
+            | 'watch_delete'
+            | 'watch_import'
+            | 'favourite_anime_add'
+            | 'favourite_anime_remove';
+
+        type Error = {
+            code: string;
+            message: string;
+        };
+
+        type User = {
+            reference: string;
+            description: string | null;
+            username: string;
+            created: number;
+            avatar: string;
+            cover?: string;
+            role: UserRole;
+            active: boolean;
+            is_followed?: boolean;
+        };
+
+        type WithPagination<T> = {
+            pagination: Pagination;
+            list: T[];
+        };
+
+        type Stats = Record<StatType, number>;
+
+        type Pagination = {
+            total: number;
+            pages: number;
+            page: number;
+        };
+
+        type Video = {
+            url: string;
+            title: string;
+            description: string;
+            video_type: VideoType;
+        };
+
+        type OST = {
+            index: number;
+            title: string;
+            author: string;
+            spotify: string;
+            ost_type: OSTType;
+        };
+
+        type Watch = {
+            reference: string;
+            updated: number;
+            created: number;
+            note: string;
+            status: API.WatchStatus;
+            rewatches: number;
+            episodes: number;
+            score: number;
+            anime: API.Anime;
+        };
+
+        type Anime = {
+            media_type: MediaType;
+            title_ua: string;
+            title_en: string;
+            title_ja: string;
+            episodes_released: number;
+            episodes_total: number;
+            poster: string;
+            status: Status;
+            scored_by: number;
+            score: number;
+            slug: string;
+            year: number;
+            watch: Watch[];
+        };
+
+        type AnimeInfo = {
+            companies: Company[];
+            genres: Genre[];
+            start_date: number;
+            end_date: number;
+            synopsis_en: string;
+            synopsis_ua: string;
+            duration: number;
+            source: Source;
+            rating: AgeRating;
+            has_franchise: boolean;
+            nsfw: boolean;
+            synonyms: string[];
+            external: External[];
+            videos: Video[];
+            ost: OST[];
+            stats: Stats;
+            comments_count: number;
+        } & Anime;
+
+        type Genre = {
+            name_en: string;
+            name_ua: string;
+            slug: string;
+            type: string;
+        };
+
+        type Character = {
+            name_ua: string;
+            name_en: string;
+            name_ja: string;
+            description_ua: string;
+            image: string;
+            slug: string;
+        };
+
+        type Person = {
+            name_native: string;
+            name_ua: string;
+            name_en: string;
+            image: string;
+            slug: string;
+        };
+
+        type Company = {
+            company: {
+                image: string;
+                slug: string;
+                name: string;
+            };
+            type: 'producer' | 'studio';
+        };
+
+        type Edit<
+            TEditParams extends Record<string, any> = Record<string, any>,
+            TContent = API.AnimeInfo | API.Character,
+        > = {
+            content_type: ContentType;
+            status: EditStatus;
+            description: string | null;
+            created: number;
+            updated: number;
+            edit_id: number;
+            moderator: API.User | null;
+            author?: API.User;
+            after: TEditParams;
+            before: TEditParams | null;
+            content: TContent;
+        };
+
+        type Comment = {
+            reference: string;
+            author: API.User;
+            created: number;
+            text: string;
+            replies: Comment[];
+            total_replies: number;
+            depth: number;
+            score: number;
+            my_score?: number;
+            hidden: boolean;
+        };
+
+        type External = {
+            url: string;
+            text: string;
+            type: 'general' | 'watch';
+        };
+
+        type HistoryWatchData = {
+            after: {
+                score: number | null;
+                status: API.WatchStatus | null;
+                episodes: number | null;
+                rewatches: number | null;
+            };
+            before: {
+                score: number | null;
+                status: API.WatchStatus | null;
+                episodes: number | null;
+                rewatches: number | null;
+            };
+            new_watch: boolean;
+        };
+
+        type HistoryFavoriteData = {};
+
+        type HistoryImportData = {
+            imported: number;
+        };
+
+        type History<
+            TData extends
+                | HistoryWatchData
+                | HistoryFavoriteData
+                | HistoryImportData = HistoryWatchData,
+        > = {
+            reference: string;
+            content?: API.Anime;
+            history_type: HistoryType;
+            created: number;
+            updated: number;
+            data: TData;
+        };
+
+        type NotificationType =
+            | 'comment_reply'
+            | 'comment_vote'
+            | 'comment_tag'
+            | 'edit_comment'
+            | 'collection_comment'
+            | 'edit_accepted'
+            | 'edit_denied'
+            | 'edit_updated'
+            | 'hikka_update';
+
+        type NotificationCommentData = {
+            slug: string;
+            comment_text: string;
+            content_type: ContentType;
+            comment_depth: number;
+            comment_author: string;
+            comment_reference: string;
+            base_comment_reference: string;
+        };
+
+        type NotificationCommentVoteData = {
+            slug: string;
+            content_type: ContentType;
+            comment_reference: string;
+            comment_depth: number;
+            comment_text: string;
+            base_comment_reference: string;
+            user_score: number;
+            old_score: number;
+            new_score: number;
+        };
+
+        type NotificationEditData = {
+            description: string;
+            edit_id: number;
+        };
+
+        type NotificationHikkaData = {
+            description: string;
+            title: string;
+            link: string;
+        };
+
+        type Notification<
+            TData extends
+                | NotificationCommentData
+                | NotificationCommentVoteData
+                | NotificationEditData
+                | NotificationHikkaData = NotificationCommentData,
+        > = {
+            notification_type: NotificationType;
+            created: number;
+            reference: string;
+            seen: boolean;
+            data: TData;
+        };
+
+        type Activity = {
+            timestamp: number;
+            actions: number;
+        };
+
+        type CollectionItem<
+            TContent extends API.AnimeInfo | API.Character = API.AnimeInfo,
+        > = {
+            content: TContent;
+            comment: string | null;
+            label: string | null;
+            content_type: API.ContentType;
+            order: number;
+        };
+
+        type Collection<
+            TContent extends
+                | API.AnimeInfo
+                | API.Character
+                | API.Person = API.AnimeInfo,
+        > = {
+            author: API.User;
+            created: number;
+            updated: number;
+            content_type: API.ContentType;
+            description: string;
+            tags: string[];
+            reference: string;
+            private: boolean;
+            spoiler: boolean;
+            entries: number;
+            title: string;
+            nsfw: boolean;
+            comments_count: number;
+            collection: CollectionItem<TContent>[];
+        };
+    }
+}
diff --git a/types/hikka.d.ts b/types/hikka.d.ts
new file mode 100644
index 00000000..ede24f15
--- /dev/null
+++ b/types/hikka.d.ts
@@ -0,0 +1,71 @@
+import { JSXElementConstructor, ReactElement, ReactNode, SVGProps } from 'react';
+
+export {};
+
+declare global {
+    namespace Hikka {
+        type FilterProperty<T extends string> = Record<
+            T,
+            {
+                title_ua: string;
+                title_en: string;
+                icon?: (props: any) => ReactElement | ReactNode;
+                color?: string;
+                description?: string;
+            }
+        >;
+
+        type NavRoute = {
+            slug: string;
+            title_ua: string;
+            url: string;
+            icon?:  (props: SVGProps<SVGSVGElement>) => ReactElement<any, string | JSXElementConstructor<any>>;
+            role?: API.UserRole[];
+            internals?: NavRoute[];
+            visible?: boolean;
+        };
+
+        type EditParamGroup = {
+            title: string;
+            slug: string;
+        };
+
+        type EditParamType = 'input' | 'markdown' | 'list';
+
+        type EditParam = {
+            title: string;
+            slug: string;
+            placeholder?: string;
+            type: EditParamType;
+        };
+
+        type AnimeEditParams = {
+            title_ua?: string;
+            title_en?: string;
+            title_ja?: string;
+            synopsis_en?: string;
+            synopsis_ua?: string;
+            synonyms?: {
+                value: string;
+            }[];
+        };
+
+        type CharacterEditParams = {
+            name_ua: string;
+            name_en: string;
+            name_ja: string;
+            description_ua: string;
+        };
+
+        type TextNotification = {
+            type: NotificationType;
+            icon: ReactNode;
+            title: string;
+            description: ReactNode;
+            reference: string;
+            created: number;
+            href: string;
+            seen: boolean;
+        };
+    }
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 62c67a79..89042161 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,4 @@
-import { JSXElementConstructor, ReactElement, ReactNode, SVGProps } from 'react';
+import { ReactNode } from 'react';
 
 export {};
 
@@ -9,440 +9,4 @@ declare global {
             spoiler: { children: ReactNode };
         }
     }
-
-    namespace API {
-        type UserRole =
-            | 'admin'
-            | 'moderator'
-            | 'user'
-            | 'banned'
-            | 'not_activated';
-
-        type WatchStatus =
-            | 'completed'
-            | 'watching'
-            | 'planned'
-            | 'dropped'
-            | 'on_hold';
-
-        type StatType =
-            | WatchStatus
-            | 'score_1'
-            | 'score_2'
-            | 'score_3'
-            | 'score_4'
-            | 'score_5'
-            | 'score_6'
-            | 'score_7'
-            | 'score_8'
-            | 'score_9'
-            | 'score_10';
-
-        type Season = 'summer' | 'winter' | 'fall' | 'spring';
-
-        type MediaType = 'tv' | 'movie' | 'ova' | 'ona' | 'special' | 'music';
-
-        type AgeRating = 'g' | 'pg' | 'pg_13' | 'r' | 'r_plus' | 'rx';
-
-        type Status =
-            | 'ongoing'
-            | 'finished'
-            // | 'discontinued'
-            // | 'paused'
-            | 'announced';
-
-        type VideoType = 'video_promo' | 'video_music';
-
-        type OSTType = 'opening' | 'ending';
-
-        type Source =
-            | 'digital_manga'
-            | 'picture_book'
-            | 'visual_novel'
-            | '4_koma_manga'
-            | 'light_novel'
-            | 'card_game'
-            | 'web_manga'
-            | 'original'
-            | 'manga'
-            | 'music'
-            | 'novel'
-            | 'other'
-            | 'radio'
-            | 'game'
-            | 'book';
-
-        type EditStatus = 'pending' | 'accepted' | 'denied' | 'closed';
-
-        type ContentType =
-            | 'edit'
-            | 'anime'
-            | 'character'
-            | 'person'
-            | 'comment'
-            | 'collection';
-
-        type HistoryType =
-            | 'watch'
-            | 'watch_delete'
-            | 'watch_import'
-            | 'favourite_anime_add'
-            | 'favourite_anime_remove';
-
-        type Error = {
-            code: string;
-            message: string;
-        };
-
-        type User = {
-            reference: string;
-            description: string | null;
-            username: string;
-            created: number;
-            avatar: string;
-            cover?: string;
-            role: UserRole;
-            active: boolean;
-            is_followed?: boolean;
-        };
-
-        type WithPagination<T> = {
-            pagination: Pagination;
-            list: T[];
-        };
-
-        type Stats = Record<StatType, number>;
-
-        type Pagination = {
-            total: number;
-            pages: number;
-            page: number;
-        };
-
-        type Video = {
-            url: string;
-            title: string;
-            description: string;
-            video_type: VideoType;
-        };
-
-        type OST = {
-            index: number;
-            title: string;
-            author: string;
-            spotify: string;
-            ost_type: OSTType;
-        };
-
-        type Watch = {
-            reference: string;
-            updated: number;
-            created: number;
-            note: string;
-            status: API.WatchStatus;
-            rewatches: number;
-            episodes: number;
-            score: number;
-            anime: API.Anime;
-        };
-
-        type Anime = {
-            media_type: MediaType;
-            title_ua: string;
-            title_en: string;
-            title_ja: string;
-            episodes_released: number;
-            episodes_total: number;
-            poster: string;
-            status: Status;
-            scored_by: number;
-            score: number;
-            slug: string;
-            year: number;
-            watch: Watch[];
-        };
-
-        type AnimeInfo = {
-            companies: Company[];
-            genres: Genre[];
-            start_date: number;
-            end_date: number;
-            synopsis_en: string;
-            synopsis_ua: string;
-            duration: number;
-            source: Source;
-            rating: AgeRating;
-            has_franchise: boolean;
-            nsfw: boolean;
-            synonyms: string[];
-            external: External[];
-            videos: Video[];
-            ost: OST[];
-            stats: Stats;
-            comments_count: number;
-        } & Anime;
-
-        type Genre = {
-            name_en: string;
-            name_ua: string;
-            slug: string;
-            type: string;
-        };
-
-        type Character = {
-            name_ua: string;
-            name_en: string;
-            name_ja: string;
-            description_ua: string;
-            image: string;
-            slug: string;
-        };
-
-        type Person = {
-            name_native: string;
-            name_ua: string;
-            name_en: string;
-            image: string;
-            slug: string;
-        };
-
-        type Company = {
-            company: {
-                image: string;
-                slug: string;
-                name: string;
-            };
-            type: 'producer' | 'studio';
-        };
-
-        type Edit<
-            TEditParams extends Record<string, any> = Record<string, any>,
-            TContent = API.AnimeInfo | API.Character,
-        > = {
-            content_type: ContentType;
-            status: EditStatus;
-            description: string | null;
-            created: number;
-            updated: number;
-            edit_id: number;
-            moderator: API.User | null;
-            author?: API.User;
-            after: TEditParams;
-            before: TEditParams | null;
-            content: TContent;
-        };
-
-        type Comment = {
-            reference: string;
-            author: API.User;
-            created: number;
-            text: string;
-            replies: Comment[];
-            total_replies: number;
-            depth: number;
-            score: number;
-            my_score?: number;
-            hidden: boolean;
-        };
-
-        type External = {
-            url: string;
-            text: string;
-            type: 'general' | 'watch';
-        };
-
-        type HistoryWatchData = {
-            after: {
-                score: number | null;
-                status: API.WatchStatus | null;
-                episodes: number | null;
-                rewatches: number | null;
-            };
-            before: {
-                score: number | null;
-                status: API.WatchStatus | null;
-                episodes: number | null;
-                rewatches: number | null;
-            };
-            new_watch: boolean;
-        };
-
-        type HistoryFavoriteData = {};
-
-        type HistoryImportData = {
-            imported: number;
-        };
-
-        type History<
-            TData extends
-                | HistoryWatchData
-                | HistoryFavoriteData
-                | HistoryImportData = HistoryWatchData,
-        > = {
-            reference: string;
-            content?: API.Anime;
-            history_type: HistoryType;
-            created: number;
-            updated: number;
-            data: TData;
-        };
-
-        type NotificationType =
-            | 'comment_reply'
-            | 'comment_vote'
-            | 'comment_tag'
-            | 'edit_comment'
-            | 'collection_comment'
-            | 'edit_accepted'
-            | 'edit_denied'
-            | 'edit_updated'
-            | 'hikka_update';
-
-        type NotificationCommentData = {
-            slug: string;
-            comment_text: string;
-            content_type: ContentType;
-            comment_depth: number;
-            comment_author: string;
-            comment_reference: string;
-            base_comment_reference: string;
-        };
-
-        type NotificationCommentVoteData = {
-            slug: string;
-            content_type: ContentType;
-            comment_reference: string;
-            comment_depth: number;
-            comment_text: string;
-            base_comment_reference: string;
-            user_score: number;
-            old_score: number;
-            new_score: number;
-        };
-
-        type NotificationEditData = {
-            description: string;
-            edit_id: number;
-        };
-
-        type NotificationHikkaData = {
-            description: string;
-            title: string;
-            link: string;
-        };
-
-        type Notification<
-            TData extends
-                | NotificationCommentData
-                | NotificationCommentVoteData
-                | NotificationEditData
-                | NotificationHikkaData = NotificationCommentData,
-        > = {
-            notification_type: NotificationType;
-            created: number;
-            reference: string;
-            seen: boolean;
-            data: TData;
-        };
-
-        type Activity = {
-            timestamp: number;
-            actions: number;
-        };
-
-        type CollectionItem<
-            TContent extends API.AnimeInfo | API.Character = API.AnimeInfo,
-        > = {
-            content: TContent;
-            comment: string | null;
-            label: string | null;
-            content_type: API.ContentType;
-            order: number;
-        };
-
-        type Collection<
-            TContent extends API.AnimeInfo | API.Character | API.Person = API.AnimeInfo,
-        > = {
-            author: API.User;
-            created: number;
-            updated: number;
-            content_type: API.ContentType;
-            description: string;
-            tags: string[];
-            reference: string;
-            private: boolean;
-            spoiler: boolean;
-            entries: number;
-            title: string;
-            nsfw: boolean;
-            comments_count: number;
-            collection: CollectionItem<TContent>[];
-        };
-    }
-
-    namespace Hikka {
-        type FilterProperty<T extends string> = Record<
-            T,
-            {
-                title_ua: string;
-                title_en: string;
-                icon?: (props: any) => ReactElement | ReactNode;
-                color?: string;
-                description?: string;
-            }
-        >;
-
-        type NavRoute = {
-            slug: string;
-            title_ua: string;
-            url: string;
-            icon?:  (props: SVGProps<SVGSVGElement>) => ReactElement<any, string | JSXElementConstructor<any>>;
-            role?: API.UserRole[];
-            internals?: NavRoute[];
-            visible?: boolean;
-        };
-
-        type EditParamGroup = {
-            title: string;
-            slug: string;
-        };
-
-        type EditParamType = 'input' | 'markdown' | 'list';
-
-        type EditParam = {
-            title: string;
-            slug: string;
-            placeholder?: string;
-            type: EditParamType;
-        };
-
-        type AnimeEditParams = {
-            title_ua?: string;
-            title_en?: string;
-            title_ja?: string;
-            synopsis_en?: string;
-            synopsis_ua?: string;
-            synonyms?: {
-                value: string;
-            }[];
-        };
-
-        type CharacterEditParams = {
-            name_ua: string;
-            name_en: string;
-            name_ja: string;
-            description_ua: string;
-        };
-
-        type TextNotification = {
-            type: NotificationType;
-            icon: ReactNode;
-            title: string;
-            description: ReactNode;
-            reference: string;
-            created: number;
-            href: string;
-            seen: boolean;
-        };
-    }
 }