diff --git a/app/(api)/generate/preview/anime/[slug]/route.tsx b/app/(api)/generate/preview/anime/[slug]/route.tsx
index 8d84a66d..267d2fbf 100644
--- a/app/(api)/generate/preview/anime/[slug]/route.tsx
+++ b/app/(api)/generate/preview/anime/[slug]/route.tsx
@@ -24,21 +24,22 @@ export async function GET(
     return new ImageResponse(
         (
             <div
-                tw="flex flex-col text-sm text-white w-full h-full p-16 text-center justify-center items-center bg-black"
+                tw="flex flex-col text-sm text-white w-full h-full p-16 text-center justify-center items-end bg-black"
                 style={{
                     background:
-                        'linear-gradient(180deg, #160820 0%, #000 60%, #000 100%)',
+                        'linear-gradient(270deg, #160820 0%, #000 90%, #000 100%)',
+                    gap: 32,
                 }}
             >
                 <div
-                    tw="flex w-full items-center justify-center"
+                    tw="flex w-full items-center justify-center border-2 backdrop-blur-lg bg-black rounded-xl overflow-hidden"
                     style={{
-                        gap: 32,
+                        borderColor: 'rgba(39,39,42,0.6)',
                     }}
                 >
                     <div tw="flex w-[297px]">
                         <div
-                            tw="flex relative w-full rounded-lg overflow-hidden bg-zinc-900"
+                            tw="flex relative w-full rounded-lg rounded-r-none overflow-hidden bg-zinc-900"
                             style={{
                                 paddingTop: '140%',
                             }}
@@ -53,9 +54,9 @@ export async function GET(
                         </div>
                     </div>
                     <div
-                        tw="flex flex-col w-full flex-1 border rounded-lg"
+                        tw="flex flex-col w-full flex-1 py-4 px-8"
                         style={{
-                            gap: 16,
+                            gap: 24,
                         }}
                     >
                         <div
@@ -63,7 +64,7 @@ export async function GET(
                             style={{ gap: 16 }}
                         >
                             <div
-                                tw="flex items-start justify-between w-full"
+                                tw="flex items-center justify-between w-full"
                                 style={{ gap: 16 }}
                             >
                                 <h1
@@ -72,7 +73,7 @@ export async function GET(
                                 >
                                     {anime.title_ua ||
                                         anime.title_en ||
-                                        anime.title_ja}{' '}
+                                        anime.title_ja}
                                 </h1>
                                 {anime.score > 0 && (
                                     <div
@@ -148,8 +149,8 @@ export async function GET(
                                             style={{
                                                 fontFamily: 'Inter',
                                                 backgroundColor:
-                                                    RELEASE_STATUS[anime.status]
-                                                        .color,
+                                                RELEASE_STATUS[anime.status]
+                                                    .color,
                                             }}
                                         >
                                             {
@@ -202,6 +203,12 @@ export async function GET(
                         </div>
                     </div>
                 </div>
+                <svg width="87.75" height="26.25" viewBox="0 0 117 35" fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M14.8608 10.5571C17.5403 10.5571 19.6896 11.4453 21.3085 13.2217C22.9274 14.9703 23.7368 17.385 23.7368 20.4659V34.0384H16.6192V21.4235C16.6192 19.8691 16.2145 18.6618 15.4051 17.8013C14.5956 16.9409 13.507 16.5107 12.1393 16.5107C10.7717 16.5107 9.68309 16.9409 8.87363 17.8013C8.06417 18.6618 7.65945 19.8691 7.65945 21.4235V34.0384H0.5V3.22959H7.65945V13.9294C8.38518 12.9025 9.37605 12.0837 10.6321 11.473C11.8881 10.8624 13.2977 10.5571 14.8608 10.5571ZM32.3126 8.39216C31.0565 8.39216 30.0238 8.03134 29.2143 7.30968C28.4328 6.56028 28.042 5.64434 28.042 4.56187C28.042 3.45164 28.4328 2.5357 29.2143 1.81405C30.0238 1.06464 31.0565 0.689941 32.3126 0.689941C33.5408 0.689941 34.5457 1.06464 35.3271 1.81405C36.1367 2.5357 36.5413 3.45164 36.5413 4.56187C36.5413 5.64434 36.1367 6.56028 35.3271 7.30968C34.5457 8.03134 33.5408 8.39216 32.3126 8.39216ZM35.8714 10.8069V34.0384H28.7119V10.8069H35.8714ZM55.3368 34.0384L48.2192 24.2962V34.0384H41.0598V3.22959H48.2192V20.2577L55.2949 10.8069H64.1291L54.4157 22.4643L64.2128 34.0384H55.3368ZM81.2182 34.0384L74.1006 24.2962V34.0384H66.9411V3.22959H74.1006V20.2577L81.1763 10.8069H90.0105L80.2971 22.4643L90.0942 34.0384H81.2182ZM91.399 22.381C91.399 19.994 91.8455 17.8985 92.7388 16.0944C93.6599 14.2902 94.9019 12.9025 96.465 11.931C98.0282 10.9596 99.7726 10.4738 101.699 10.4738C103.345 10.4738 104.783 10.8069 106.011 11.473C107.267 12.1392 108.23 13.0135 108.9 14.096V10.8069H116.059V34.0384H108.9V30.7494C108.202 31.8319 107.225 32.7062 105.969 33.3723C104.741 34.0384 103.304 34.3715 101.657 34.3715C99.7586 34.3715 98.0282 33.8859 96.465 32.9143C94.9019 31.9151 93.6599 30.5135 92.7388 28.7093C91.8455 26.8775 91.399 24.768 91.399 22.381ZM108.9 22.4227C108.9 20.6463 108.397 19.2446 107.393 18.2177C106.416 17.1907 105.215 16.6772 103.792 16.6772C102.368 16.6772 101.154 17.1907 100.149 18.2177C99.1724 19.2169 98.684 20.6047 98.684 22.381C98.684 24.1574 99.1724 25.5729 100.149 26.6277C101.154 27.6546 102.368 28.1681 103.792 28.1681C105.215 28.1681 106.416 27.6546 107.393 26.6277C108.397 25.6007 108.9 24.199 108.9 22.4227Z"
+                        fill="white" />
+                </svg>
             </div>
         ),
         {
diff --git a/app/(api)/generate/preview/u/[username]/route.tsx b/app/(api)/generate/preview/u/[username]/route.tsx
index 99a99a12..219ca2d6 100644
--- a/app/(api)/generate/preview/u/[username]/route.tsx
+++ b/app/(api)/generate/preview/u/[username]/route.tsx
@@ -1,5 +1,3 @@
-import { createElement } from 'react';
-
 import { ImageResponse } from 'next/og';
 
 import getUserInfo from '@/services/api/user/getUserInfo';
@@ -8,6 +6,49 @@ import { WATCH_STATUS } from '@/utils/constants';
 
 export const runtime = 'edge';
 
+const RadialProgress = ({ progress }: { progress: number }) => (
+    <div tw="flex relative w-32 h-32" role="progressbar">
+        <div tw="flex w-full h-full absolute z-10 top-0 left-0 items-center justify-center">
+            <p>497</p>
+        </div>
+        <svg
+            style={{
+                width: '100%',
+                height: '100%',
+                transform: 'rotate(-90deg)',
+                position: 'absolute',
+            }}
+            viewBox="0 0 100 100"
+        >
+            <circle
+                style={{
+                    color: 'rgba(39,39,42,0.6)',
+                    stroke: 'currentColor',
+                }}
+                strokeWidth="8"
+                cx="50"
+                cy="50"
+                r="40"
+                fill="transparent"
+            ></circle>
+            <circle
+                strokeWidth="8"
+                strokeLinecap="round"
+                cx="50"
+                cy="50"
+                r="40"
+                fill="transparent"
+                strokeDasharray="192.16880601035413, 59.15860627682932"
+                style={{
+                    color: 'rgba(54,123,53,0.5)',
+                    stroke: 'currentColor',
+                    strokeDasharray: '192.169, 59.159',
+                }}
+            ></circle>
+        </svg>
+    </div>
+);
+
 export async function GET(
     request: Request,
     { params: { username } }: { params: { username: string } },
@@ -21,149 +62,159 @@ export async function GET(
 
     const user = await getUserInfo({ username });
     const watchStats = await getWatchStats({ username });
+    const stats = ['completed', 'watching', 'planned'];
+
+    const filteredStats = Object.keys(watchStats).filter(
+        (stat) => stat in WATCH_STATUS && stats.includes(stat),
+    );
 
     return new ImageResponse(
         (
             <div
-                tw="p-16"
+                tw="flex flex-col text-sm text-white w-full h-full p-16 text-center justify-center items-end bg-black"
                 style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    fontSize: 16,
-                    gap: 32,
-                    color: 'white',
                     background:
-                        'linear-gradient(180deg, #160820 0%, #000 60%, #000 100%)',
-                    width: '100%',
-                    height: '100%',
-                    textAlign: 'center',
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                        'linear-gradient(270deg, #160820 0%, #000 90%, #000 100%)',
+                    gap: 32,
                 }}
             >
-                <div style={{ display: 'flex', gap: 32, width: '100%' }}>
-                    <img
-                        src={user.avatar}
-                        width={256}
-                        height={256}
-                        style={{ borderRadius: 16 }}
-                        alt="avatar"
-                    />
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 0,
-                            justifyContent: 'flex-start',
-                            alignItems: 'flex-start',
-                            width: '100%',
-                            flex: 1,
-                        }}
-                    >
-                        <h1 tw="text-4xl font-semibold leading-snug text-left m-0">
-                            {user.username}
-                        </h1>
-                        <p
-                            style={{ fontFamily: 'Inter' }}
-                            tw="text-2xl text-zinc-400 text-left m-0"
+                <div
+                    tw="flex flex-col w-full items-center justify-center border-2 bg-black rounded-xl p-4"
+                    style={{
+                        borderColor: 'rgba(39,39,42,0.6)',
+                    }}
+                >
+                    <div style={{ display: 'flex', gap: 32, width: '100%' }}>
+                        <img
+                            src={user.avatar}
+                            width={256}
+                            height={256}
+                            style={{ borderRadius: 16 }}
+                            alt="avatar"
+                        />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 16,
+                                alignItems: 'flex-start',
+                                width: '100%',
+                                flex: 1,
+                            }}
+                            tw="justify-between"
                         >
-                            {user.description}
-                        </p>
-                    </div>
-                </div>
-                {watchStats && (
-                    <div
-                        style={{
-                            display: 'flex',
-                            gap: 16,
-                            width: '100%',
-                        }}
-                    >
-                        {Object.keys(watchStats)
-                            .filter((stat) => stat in WATCH_STATUS)
-                            .map((stat, index) => (
-                                <div
-                                    key={stat}
-                                    style={{
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        padding: '8px 16px',
-                                        borderColor: 'rgba(39,39,42,0.6)',
-                                        backgroundColor: 'rgba(39,39,42,0.3)',
-                                        borderLeftWidth: 1,
-                                        borderRadius: 8,
-                                        borderWidth: 1,
-                                    }}
-                                >
+                            <div tw="flex flex-col w-full" style={{ gap: 16 }}>
+                                <h1 tw="text-4xl font-semibold leading-snug text-left m-0">
+                                    {user.username}
+                                </h1>
+                                <h2 tw="m-0 text-zinc-400 text-left">
+                                    {user.description}
+                                </h2>
+                            </div>
+                            <div tw="flex w-full" style={{ gap: 16 }}>
+                                {watchStats && (
                                     <div
+                                        tw="flex border w-full p-4 py-2 rounded-lg items-center"
                                         style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 8,
+                                            gap: 16,
+                                            backgroundColor:
+                                                'rgba(39,39,42,0.3)',
+                                            borderColor: 'rgba(39,39,42,0.6)',
                                         }}
                                     >
                                         <div
                                             style={{
-                                                display: 'flex',
-                                                width: 8,
-                                                height: 8,
-                                                borderRadius: '100%',
-                                                backgroundColor:
-                                                    WATCH_STATUS[
-                                                        stat as API.WatchStatus
-                                                    ].color,
-                                            }}
-                                        />
-                                        <p
-                                            style={{
-                                                fontSize: 16,
-                                                fontWeight: 400,
-                                                fontFamily: 'Inter',
-                                                color: 'white',
-                                                opacity: 0.6,
-                                                lineHeight: '12px',
-                                                flex: 1,
-                                            }}
-                                        >
-                                            {
-                                                WATCH_STATUS[
-                                                    stat as API.WatchStatus
-                                                ].title_ua
-                                            }
-                                        </p>
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                alignItems: 'center',
-                                                fontSize: 24,
-                                                width: 16,
-                                                height: 16,
+                                                gap: 16,
                                             }}
+                                            tw="flex w-full"
                                         >
-                                            {createElement(
-                                                WATCH_STATUS[
-                                                    stat as API.WatchStatus
-                                                ].icon!,
+                                            {filteredStats.map(
+                                                (stat, index) => (
+                                                    <div
+                                                        key={stat}
+                                                        style={{
+                                                            display: 'flex',
+                                                            alignItems:
+                                                                'center',
+                                                            justifyContent:
+                                                                'space-between',
+                                                        }}
+                                                        tw="flex-1"
+                                                    >
+                                                        <div
+                                                            tw="flex items-center"
+                                                            style={{
+                                                                gap: 8,
+                                                            }}
+                                                        >
+                                                            <div
+                                                                style={{
+                                                                    display:
+                                                                        'flex',
+                                                                    width: 12,
+                                                                    height: 12,
+                                                                    borderRadius:
+                                                                        '100%',
+                                                                    backgroundColor:
+                                                                        WATCH_STATUS[
+                                                                            stat as API.WatchStatus
+                                                                        ].color,
+                                                                }}
+                                                            />
+                                                            <p
+                                                                style={{
+                                                                    fontFamily:
+                                                                        'Inter',
+                                                                }}
+                                                                tw="text-lg m-0"
+                                                            >
+                                                                {
+                                                                    WATCH_STATUS[
+                                                                        stat as API.WatchStatus
+                                                                    ].title_ua
+                                                                }
+                                                            </p>
+                                                        </div>
+                                                        <div
+                                                            tw="flex items-center"
+                                                            style={{ gap: 16 }}
+                                                        >
+                                                            <p tw="text-right m-0 text-lg h-5">
+                                                                {
+                                                                    watchStats[
+                                                                        stat as API.WatchStatus
+                                                                    ]
+                                                                }
+                                                            </p>
+                                                            {index !==
+                                                                filteredStats.length - 1 && (
+                                                                <p tw="text-zinc-400">
+                                                                    /
+                                                                </p>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                ),
                                             )}
                                         </div>
                                     </div>
-                                    <h2
-                                        style={{
-                                            fontSize: 40,
-                                            fontWeight: 600,
-                                            fontFamily: 'Fixel',
-                                            color: 'white',
-                                            lineHeight: '24px',
-                                        }}
-                                    >
-                                        {watchStats[stat as API.WatchStatus]}
-                                    </h2>
-                                </div>
-                            ))}
+                                )}
+                            </div>
+                        </div>
                     </div>
-                )}
+                </div>
+                <svg
+                    width="87.75"
+                    height="26.25"
+                    viewBox="0 0 117 35"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M14.8608 10.5571C17.5403 10.5571 19.6896 11.4453 21.3085 13.2217C22.9274 14.9703 23.7368 17.385 23.7368 20.4659V34.0384H16.6192V21.4235C16.6192 19.8691 16.2145 18.6618 15.4051 17.8013C14.5956 16.9409 13.507 16.5107 12.1393 16.5107C10.7717 16.5107 9.68309 16.9409 8.87363 17.8013C8.06417 18.6618 7.65945 19.8691 7.65945 21.4235V34.0384H0.5V3.22959H7.65945V13.9294C8.38518 12.9025 9.37605 12.0837 10.6321 11.473C11.8881 10.8624 13.2977 10.5571 14.8608 10.5571ZM32.3126 8.39216C31.0565 8.39216 30.0238 8.03134 29.2143 7.30968C28.4328 6.56028 28.042 5.64434 28.042 4.56187C28.042 3.45164 28.4328 2.5357 29.2143 1.81405C30.0238 1.06464 31.0565 0.689941 32.3126 0.689941C33.5408 0.689941 34.5457 1.06464 35.3271 1.81405C36.1367 2.5357 36.5413 3.45164 36.5413 4.56187C36.5413 5.64434 36.1367 6.56028 35.3271 7.30968C34.5457 8.03134 33.5408 8.39216 32.3126 8.39216ZM35.8714 10.8069V34.0384H28.7119V10.8069H35.8714ZM55.3368 34.0384L48.2192 24.2962V34.0384H41.0598V3.22959H48.2192V20.2577L55.2949 10.8069H64.1291L54.4157 22.4643L64.2128 34.0384H55.3368ZM81.2182 34.0384L74.1006 24.2962V34.0384H66.9411V3.22959H74.1006V20.2577L81.1763 10.8069H90.0105L80.2971 22.4643L90.0942 34.0384H81.2182ZM91.399 22.381C91.399 19.994 91.8455 17.8985 92.7388 16.0944C93.6599 14.2902 94.9019 12.9025 96.465 11.931C98.0282 10.9596 99.7726 10.4738 101.699 10.4738C103.345 10.4738 104.783 10.8069 106.011 11.473C107.267 12.1392 108.23 13.0135 108.9 14.096V10.8069H116.059V34.0384H108.9V30.7494C108.202 31.8319 107.225 32.7062 105.969 33.3723C104.741 34.0384 103.304 34.3715 101.657 34.3715C99.7586 34.3715 98.0282 33.8859 96.465 32.9143C94.9019 31.9151 93.6599 30.5135 92.7388 28.7093C91.8455 26.8775 91.399 24.768 91.399 22.381ZM108.9 22.4227C108.9 20.6463 108.397 19.2446 107.393 18.2177C106.416 17.1907 105.215 16.6772 103.792 16.6772C102.368 16.6772 101.154 17.1907 100.149 18.2177C99.1724 19.2169 98.684 20.6047 98.684 22.381C98.684 24.1574 99.1724 25.5729 100.149 26.6277C101.154 27.6546 102.368 28.1681 103.792 28.1681C105.215 28.1681 106.416 27.6546 107.393 26.6277C108.397 25.6007 108.9 24.199 108.9 22.4227Z"
+                        fill="white"
+                    />
+                </svg>
             </div>
         ),
         {
diff --git a/app/layout.tsx b/app/layout.tsx
index e90187ec..fc4dec49 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -81,7 +81,7 @@ export default async function RootLayout({
         >
             <head>
                 <PlausibleProvider
-                    trackLocalhost={false}
+                    trackLocalhost
                     enabled
                     selfHosted
                     customDomain=""