diff --git a/package.json b/package.json
index 05f78843..01fe2c51 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hmbanan666/chat-game-api": "^0.1.13",
+    "@hmbanan666/chat-game-api": "^0.1.15",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@twurple/api": "^7.1.0",
diff --git a/src/routes/[lang]/(website)/trophy/+page.svelte b/src/routes/[lang]/(website)/trophy/+page.svelte
index 861196f8..8dbb4470 100644
--- a/src/routes/[lang]/(website)/trophy/+page.svelte
+++ b/src/routes/[lang]/(website)/trophy/+page.svelte
@@ -1,5 +1,6 @@
 <script>
   import trophyImage from '$lib/assets/website/trophy-128.png'
+  import { page } from '$app/stores'
 
   export let data
 </script>
@@ -11,21 +12,23 @@
 
 <section class='trophies'>
   {#each data.trophies as trophy}
-    <div class='trophy-block'>
-      <div class='info'>
-        <p class='name'>{trophy.name}</p>
-        <p class='description'>{trophy.description}</p>
-      </div>
-      <div class='completion'>
-        <div class='trophy'>
-          <img src={trophyImage} alt="" width='64' height='64' />
+    <a href='/{$page.data.locale}/trophy/{trophy.id}'>
+      <div class='trophy-block'>
+        <div class='info'>
+          <p class='name'>{trophy.name}</p>
+          <p class='description'>{trophy.description}</p>
         </div>
-        <div>
-          <p class='points'>{trophy.points}</p>
-          <p>Очков</p>
+        <div class='completion'>
+          <div class='trophy'>
+            <img src={trophyImage} alt="" width='64' height='64' />
+          </div>
+          <div>
+            <p class='points'>{trophy.points}</p>
+            <p>Очков</p>
+          </div>
         </div>
       </div>
-    </div>
+    </a>
   {/each}
 </section>
 
@@ -47,12 +50,22 @@
         max-width: 42em;
     }
 
-.trophy-block {
+    .trophies a {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .trophy-block {
       background-color: #FFEFD6;
       border: 2px solid var(--color-border);
       display: grid;
       grid-template-columns: 2fr 1fr;
       margin-bottom: 0.5em;
+      transition: all 0.2s;
+    }
+
+    .trophy-block:hover {
+      transform: scale(0.98);
     }
 
     .trophy-block .info {
diff --git a/src/routes/[lang]/(website)/trophy/[id]/+page.server.ts b/src/routes/[lang]/(website)/trophy/[id]/+page.server.ts
new file mode 100644
index 00000000..2e5efaf8
--- /dev/null
+++ b/src/routes/[lang]/(website)/trophy/[id]/+page.server.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit'
+import { api } from '$lib/server/api'
+
+export async function load({ params }) {
+  const trophy = await api.trophy.getById(params.id)
+  if (!trophy || trophy instanceof Error) {
+    error(404, 'Not found')
+  }
+
+  return {
+    trophy,
+  }
+}
diff --git a/src/routes/[lang]/(website)/trophy/[id]/+page.svelte b/src/routes/[lang]/(website)/trophy/[id]/+page.svelte
new file mode 100644
index 00000000..a80227fc
--- /dev/null
+++ b/src/routes/[lang]/(website)/trophy/[id]/+page.svelte
@@ -0,0 +1,156 @@
+<script>
+  import TimeAgo from 'javascript-time-ago'
+  import ru from 'javascript-time-ago/locale/ru'
+  import trophyImage from '$lib/assets/website/trophy-128.png'
+  import { page } from '$app/stores'
+  import unit from '$lib/assets/website/unit-64.png'
+
+  export let data
+
+  TimeAgo.addLocale(ru)
+
+  const timeAgo = new TimeAgo('ru-RU')
+
+  const latestProfiles = data.trophy.progress.filter((t) => t.status === 'COMPLETED').slice(0, 12)
+</script>
+
+<section class='hero'>
+  <h1>{data.trophy.name}</h1>
+  <h2>Трофей, созданный <a href='/{$page.data.locale}/p/hmbanan666'>hmbanan666</a></h2>
+</section>
+
+<section class='trophies'>
+  <div class='trophy-block'>
+    <div class='info'>
+      <p class='description'>{data.trophy.description}</p>
+    </div>
+    <div class='completion'>
+      <div class='trophy'>
+        <img src={trophyImage} alt="" width='64' height='64' />
+      </div>
+      <div>
+        <p class='points'>{data.trophy.points}</p>
+        <p>Очков</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class='progress'>
+  <h2 class='title'>Кто получил этот трофей</h2>
+  <p class='desc'>Показаны последние профили, которые получили этот трофей.</p>
+
+  <div class='block'>
+    {#each latestProfiles as progress}
+      <div class='card'>
+        <div>
+          <img src={unit} alt="" />
+        </div>
+        <div>
+          <a href='/{$page.data.locale}/p/{progress.profile.userName}'>{progress.profile.userName}</a>
+        </div>
+        <time>{timeAgo.format(new Date(progress.completedAt))}</time>
+      </div>
+    {/each}
+  </div>
+</section>
+
+<style>
+    .hero {
+        padding-top: 4em;
+        padding-bottom: 4em;
+        max-width: 64em;
+    }
+
+    .hero h1 {
+        margin-bottom: 0.25em;
+    }
+
+    section {
+        text-align: center;
+        padding: 2em 1em;
+        margin: 0 auto;
+        max-width: 42em;
+    }
+
+    .trophy-block {
+      background-color: #FFEFD6;
+      border: 2px solid var(--color-border);
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      margin-bottom: 0.5em;
+    }
+
+    .trophy-block .info {
+      position: relative;
+      padding: 1em 1em;
+    }
+
+    .trophy-block .info .description {
+      font-size: 0.9rem;
+    }
+
+    .trophy-block .completion {
+      position: relative;
+      padding: 0.5em 1em;
+      color: #F76B15;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+    }
+
+    .trophy-block .completion .points {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .trophy-block .completion .trophy {
+      opacity: 1;
+    }
+
+    .progress {
+    padding-top: 2em;
+      padding-bottom: 4em;
+      max-width: 64em;
+    }
+
+    .progress .title {
+        margin-bottom: 0.25em;
+    }
+
+    .progress .desc {
+        margin-bottom: 1em;
+    }
+
+    .progress .block {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.5em;
+    }
+
+    @media (min-width: 768px) {
+        .progress .block {
+          grid-template-columns: repeat(4, 1fr);
+        }
+    }
+
+    @media (min-width: 1200px) {
+        .progress .block {
+          grid-template-columns: repeat(6, 1fr);
+        }
+    }
+
+    .progress .block .card {
+      background-color: var(--color-background-2);
+      border: 2px solid var(--color-border-2);
+      padding: 1em;
+    }
+
+    .progress .block .card time {
+        font-size: 0.8rem;
+    }
+</style>
diff --git a/yarn.lock b/yarn.lock
index aab49ef4..8bf10775 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -528,10 +528,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
-"@hmbanan666/chat-game-api@^0.1.13":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@hmbanan666/chat-game-api/-/chat-game-api-0.1.13.tgz#8552c79bc73aef9fb2b6bb8eb468c6e383f9916b"
-  integrity sha512-SwjB2g3TQVqIsuNTP12gC+XCc8V0BAqvRt6LCmVKlemyn0JxFGcAT9WKaNSG/hCHXe1ZuMb1bSwG/Lq9v1rnqw==
+"@hmbanan666/chat-game-api@^0.1.15":
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/@hmbanan666/chat-game-api/-/chat-game-api-0.1.15.tgz#4ca76ac95aa9e96554eef238de191bc02b13e742"
+  integrity sha512-NEehogrHYFrf2U/V+b8L7dRDXvhHZRoNdKUj2C4JHk1/EZjQEO3cD2+nVZGnQbvbi+VKP+4A2ofg2EsgihH4qg==
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"