diff --git a/apps/website/app/app.vue b/apps/website/app/app.vue
index 54064721..4da13139 100644
--- a/apps/website/app/app.vue
+++ b/apps/website/app/app.vue
@@ -3,6 +3,7 @@
   <main>
     <nuxt-page />
   </main>
+  <MainFooter />
 </template>
 
 <script setup lang="ts"></script>
diff --git a/apps/website/app/assets/img/icons/coin/128.png b/apps/website/app/assets/img/icons/coin/128.png
new file mode 100644
index 00000000..ef44ac0d
Binary files /dev/null and b/apps/website/app/assets/img/icons/coin/128.png differ
diff --git a/apps/website/app/assets/img/icons/coin/256.png b/apps/website/app/assets/img/icons/coin/256.png
new file mode 100644
index 00000000..33ee2091
Binary files /dev/null and b/apps/website/app/assets/img/icons/coin/256.png differ
diff --git a/apps/website/app/assets/img/icons/coin/32.png b/apps/website/app/assets/img/icons/coin/32.png
new file mode 100644
index 00000000..3da0c5ab
Binary files /dev/null and b/apps/website/app/assets/img/icons/coin/32.png differ
diff --git a/apps/website/app/assets/img/icons/coin/64.png b/apps/website/app/assets/img/icons/coin/64.png
new file mode 100644
index 00000000..ebfe6273
Binary files /dev/null and b/apps/website/app/assets/img/icons/coin/64.png differ
diff --git a/apps/website/app/components/MainFooter.vue b/apps/website/app/components/MainFooter.vue
new file mode 100644
index 00000000..7c1dddd9
--- /dev/null
+++ b/apps/website/app/components/MainFooter.vue
@@ -0,0 +1,103 @@
+<template>
+  <footer>
+    <ul>
+      <li v-for="link in links" :key="link.url">
+        <NuxtLink :to="link.url" :target="link.isOnNewTab && '_blank'">
+          {{ link.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <p class="copyright">
+      Создается с ❤️ и трепетом. &copy; 2024 ChatGame
+    </p>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const links = [
+  {
+    title: 'Boosty',
+    url: 'https://boosty.to/hmbanan666',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Discord',
+    url: 'https://discord.gg/B6etUajrGZ',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Twitch',
+    url: 'https://www.twitch.tv/hmbanan666',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Об игре',
+    url: '/about',
+  },
+  {
+    title: 'Купить Монеты',
+    url: '/shop',
+  },
+  {
+    title: 'Оферта',
+    url: '/docs/offer',
+  },
+]
+</script>
+
+<style>
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1em;
+    margin-top: 4em;
+    margin-bottom: 2em;
+
+    @media (min-width: 480px) {
+      & {
+        padding: 0.5em 0;
+      }
+    }
+  }
+
+  a {
+    font-weight: 600;
+    color: inherit;
+    transition: 0.2s all;
+
+    &:hover {
+      color: var(--green-9);
+      text-decoration: none;
+    }
+  }
+
+  ul {
+    position: relative;
+    padding: 0;
+    margin: 0 0 0.8em;
+    display: flex;
+    gap: 0.75em;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+
+    @media screen and (min-width: 620px) {
+      flex-direction: row;
+      gap: 1.5em;
+    }
+  }
+
+  li {
+    position: relative;
+  }
+
+  .copyright {
+    color: var(--bronze-9);
+    text-align: center;
+    margin-top: 0.5em;
+  }
+</style>
diff --git a/apps/website/app/components/MenuDesktop.vue b/apps/website/app/components/MenuDesktop.vue
index db2d0b6c..0a0d4c85 100644
--- a/apps/website/app/components/MenuDesktop.vue
+++ b/apps/website/app/components/MenuDesktop.vue
@@ -6,11 +6,6 @@
           Главная
         </NuxtLink>
       </li>
-      <li :aria-current="$route.path === `/about` ? 'page' : undefined">
-        <NuxtLink to="/about">
-          About
-        </NuxtLink>
-      </li>
       <li :aria-current="$route.path === `/character` ? 'page' : undefined">
         <NuxtLink to="/character">
           Персонажи
@@ -31,12 +26,11 @@
           Купон
         </NuxtLink>
       </li>
-      <!--
-      {#if profile}
-        <li aria-current={$page.url.pathname === `/${locale}/p/${profile.userName}` ? 'page' : undefined}>
-          <a href='/{locale}/p/{profile.userName}'>{t.header.menu.profile}</a>
-        </li>
-      {/if} -->
+      <li v-if="loggedIn" :aria-current="$route.path === `/p/${user?.userName}` ? 'page' : undefined">
+        <NuxtLink :href="`/p/${user?.userName}`">
+          Мой профиль
+        </NuxtLink>
+      </li>
     </ul>
   </nav>
 
@@ -47,6 +41,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+const { loggedIn, user } = useUserSession()
+</script>
+
 <style scoped>
 .right {
   flex-grow: 1;
diff --git a/apps/website/app/components/MenuSmartphone.vue b/apps/website/app/components/MenuSmartphone.vue
index 9f7bef9d..737084e0 100644
--- a/apps/website/app/components/MenuSmartphone.vue
+++ b/apps/website/app/components/MenuSmartphone.vue
@@ -27,12 +27,11 @@
             Купон
           </NuxtLink>
         </li>
-        <!--
-        {#if profile}
-          <li aria-current={$page.url.pathname === `/${locale}/p/${profile.userName}` ? 'page' : undefined}>
-            <a href='/{locale}/p/{profile.userName}' @click="closeSidebar">{t.header.menu.profile}</a>
-          </li>
-        {/if} -->
+        <li v-if="loggedIn" :aria-current="$route.path === `/p/${user?.userName}` ? 'page' : undefined">
+          <NuxtLink :href="`/p/${user?.userName}`">
+            Мой профиль
+          </NuxtLink>
+        </li>
       </ul>
     </nav>
   </aside>
@@ -46,6 +45,7 @@
 
 <script setup lang="ts">
 const { isMobileMenuOpened } = useApp()
+const { loggedIn, user } = useUserSession()
 </script>
 
 <style scoped>
diff --git a/apps/website/app/pages/about.vue b/apps/website/app/pages/about.vue
deleted file mode 100644
index e5f1bc97..00000000
--- a/apps/website/app/pages/about.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page.</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 768px) {
-  .about {
-    max-width: 768px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0 1rem;
-  }
-}
-</style>
diff --git a/apps/website/app/pages/character.vue b/apps/website/app/pages/character.vue
new file mode 100644
index 00000000..2e7081d4
--- /dev/null
+++ b/apps/website/app/pages/character.vue
@@ -0,0 +1,290 @@
+<template>
+  <section class="hero">
+    <h1>Игровые персонажи</h1>
+    <h2>Игроки "прокачивают" персонажей, путем написания постов. Это могут быть истории или новая информация о характере и судьбе.</h2>
+
+    <div class="currency-block">
+      <div class="currency">
+        <img src="~/assets/img/icons/coin/128.png" alt="" width="64" height="64">
+        <div class="right">
+          <div v-if="loggedIn">
+            <p class="counter">
+              {{ profile?.coins }}
+            </p>
+            <p class="description">
+              {{ pluralizationRu(profile?.coins ?? 0, [
+                'Монета',
+                'Монеты',
+                'Монет',
+              ]) }}
+            </p>
+          </div>
+
+          <p v-else class="description">
+            Войди на сайт
+          </p>
+        </div>
+      </div>
+
+      <a href="/shop">Купить монеты</a>
+    </div>
+  </section>
+
+  <section class="characters">
+    <h2>Коллекция персонажей 2024</h2>
+
+    <div class="collection-block">
+      <div
+        v-for="char in readyCharacters"
+        :key="char.id"
+        :data-owned="!!char.editions.find(e => e.profileId === profile?.id)"
+        :class="{ active: !!char.editions.find(e => e.id === profile?.activeEditionId) }"
+        class="cell"
+      >
+        <a :href="`/character/${char.id}`">
+          <img :src="`/units/${char.codename}/128.png`" alt="" class="avatar static">
+          <img :src="`/units/${char.codename}/idle.gif`" alt="" class="avatar animated">
+          <p class="nickname">{{ char.nickname }}</p>
+          <div class="level">{{ char.editions.find(e => e.profileId === profile?.id)?.level }} уровень</div>
+
+          <div v-if="char.price > 0" class="price">
+            <img src="~/assets/img/icons/coin/32.png" alt="" width="18" height="18"> {{ char.price }}
+          </div>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <section class="characters">
+    <h2>Персонажи, требующие доработки</h2>
+
+    <div class="collection-block">
+      <div v-for="char in notReadyCharacters" :key="char.id" class="cell" :data-owned="!!char.editions.find(e => e.profileId === profile?.id)">
+        <a :href="`/character/${char.id}`">
+          <p class="nickname">{{ char.nickname }}</p>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { loggedIn, user } = useUserSession()
+const { data: profile } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
+const { data: characters } = await useFetch('/api/character')
+const readyCharacters = characters.value?.filter((c) => c.isReady)
+const notReadyCharacters = characters.value?.filter((c) => !c.isReady)
+</script>
+
+<style>
+  .characters {
+    text-align: center;
+    margin: 0 auto;
+    padding-top: 2em;
+    padding-bottom: 4em;
+    max-width: 64em;
+
+    h2 {
+      margin-bottom: 1em;
+    }
+
+    .collection-block {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.5em;
+
+      @media (min-width: 375px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @media (min-width: 620px) {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.75em;
+      }
+
+      @media (min-width: 768px) {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      @media (min-width: 1024px) {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      .cell {
+        position: relative;
+        aspect-ratio: 1 / 1;
+        transition: all 0.2s ease-out;
+
+        .avatar {
+          width: 64px;
+          height: 64px;
+        }
+
+        .static {
+          display: block;
+        }
+
+        .animated {
+          display: none;
+          width: 68px;
+          height: 68px;
+        }
+
+        &[data-owned='false'] {
+          background: var(--gray-6);
+          border: 3px solid var(--gray-8);
+
+          .avatar {
+            filter: grayscale(1);
+          }
+
+          .nickname {
+            color: var(--gray-11);
+          }
+
+          .level {
+            display: none;
+          }
+        }
+
+        &[data-owned='true'] {
+          background: var(--orange-3);
+          border: 3px solid var(--color-border);
+
+          .avatar {
+            filter: grayscale(0);
+          }
+
+          .nickname, .level, .price {
+            color: var(--brown-11);
+          }
+
+          .price {
+            display: none;
+          }
+        }
+
+        &.active {
+          background: var(--green-3);
+          border: 3px solid var(--green-7);
+
+          .nickname, .level, .price {
+            color: var(--green-11);
+          }
+        }
+
+        &:hover {
+          transform: translateY(-0.25em);
+          opacity: 0.85;
+
+          .static {
+            display: none;
+          }
+
+          .animated {
+            display: block;
+          }
+        }
+
+        a {
+          text-decoration: none;
+          color: inherit;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .nickname {
+          font-size: 0.9rem;
+          font-weight: 600;
+        }
+
+        .price {
+          position: absolute;
+          top: 4px;
+          left: 4px;
+          font-size: 0.8rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.25em;
+          margin-top: 0;
+
+          img {
+            filter: grayscale(1);
+          }
+        }
+
+        .level {
+          font-size: 0.8rem;
+          font-weight: 600;
+          line-height: 1;
+        }
+      }
+    }
+  }
+
+  .currency-block {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    margin-top: 2em;
+    background-color: var(--teal-2);
+    background: linear-gradient(130deg, var(--teal-4) 0%, var(--teal-2) 100%);
+    border: 3px solid var(--teal-6);
+    padding: 1em;
+
+    .currency {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75em;
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        justify-content: center;
+
+        .counter {
+          font-size: 1.8rem;
+          font-weight: 600;
+          line-height: 1.2;
+          color: var(--teal-11);
+          text-align: left;
+        }
+
+        .description {
+          font-size: 0.9rem;
+          font-weight: 600;
+          color: var(--teal-10);
+        }
+      }
+    }
+
+    a {
+      padding: 0.75em 1.5em;
+      border: 3px solid var(--bronze-5);
+      background-color: var(--green-9);
+      background: linear-gradient(130deg, var(--teal-9) 0%, var(--green-8) 100%);
+      color: var(--teal-2);
+      font-weight: 600;
+      transition: all 0.2s;
+
+      &:hover {
+        opacity: 0.9;
+        text-decoration: none;
+        scale: 1.03;
+      }
+    }
+  }
+</style>
diff --git a/apps/website/app/pages/index.vue b/apps/website/app/pages/index.vue
index 237d5f71..483550f0 100644
--- a/apps/website/app/pages/index.vue
+++ b/apps/website/app/pages/index.vue
@@ -17,7 +17,7 @@
         За все время {{ pluralizationRu(profileCount, ['создан', 'создано', 'создано']) }}
         {{ profileCount }} {{ pluralizationRu(profileCount, ['профиль', 'профиля', 'профилей']) }}.
         Присоединяйся
-        <a href="{config.twitch.url}" target="_blank" class="twitch-link">на активном стриме</a>!
+        <a href="https://twitch.tv/hmbanan666" target="_blank" class="twitch-link">на активном стриме</a>!
       </p>
     </section>
   </div>
@@ -34,7 +34,8 @@ useHead({
   ],
 })
 
-const profileCount = 1
+const { data } = await useFetch('/api/profile')
+const profileCount = data.value?.count ?? 0
 </script>
 
 <style scoped>
diff --git a/apps/website/server/api/character/index.get.ts b/apps/website/server/api/character/index.get.ts
index 474db2c8..0d601ab3 100644
--- a/apps/website/server/api/character/index.get.ts
+++ b/apps/website/server/api/character/index.get.ts
@@ -1,7 +1,4 @@
-import type { EventHandlerRequest } from 'h3'
-import type { CharacterWithEditions } from '@chat-game/types'
-
-export default defineEventHandler<EventHandlerRequest, Promise<CharacterWithEditions[]>>(
+export default defineEventHandler(
   async () => {
     const characters = await prisma.character.findMany({
       orderBy: {
@@ -16,6 +13,6 @@ export default defineEventHandler<EventHandlerRequest, Promise<CharacterWithEdit
       return []
     }
 
-    return characters as CharacterWithEditions[]
+    return characters
   },
 )
diff --git a/apps/website/server/api/profile/index.get.ts b/apps/website/server/api/profile/index.get.ts
index 8a3de38b..e85c268a 100644
--- a/apps/website/server/api/profile/index.get.ts
+++ b/apps/website/server/api/profile/index.get.ts
@@ -1,7 +1,4 @@
-import type { EventHandlerRequest } from 'h3'
-import type { ProfileInfoResponse } from '@chat-game/types'
-
-export default defineEventHandler<EventHandlerRequest, Promise<ProfileInfoResponse>>(async () => {
+export default defineEventHandler(async () => {
   const count = await prisma.profile.count()
 
   return { count }
diff --git a/apps/website/server/api/profile/userName/[userName].get.ts b/apps/website/server/api/profile/userName/[userName].get.ts
index 3034d954..a0dfec50 100644
--- a/apps/website/server/api/profile/userName/[userName].get.ts
+++ b/apps/website/server/api/profile/userName/[userName].get.ts
@@ -1,7 +1,4 @@
-import type { EventHandlerRequest } from 'h3'
-import type { ProfileWithOwnedCharacters } from '@chat-game/types'
-
-export default defineEventHandler<EventHandlerRequest, Promise<ProfileWithOwnedCharacters>>(
+export default defineEventHandler(
   async (event) => {
     const userName = getRouterParam(event, 'userName')
 
@@ -21,6 +18,6 @@ export default defineEventHandler<EventHandlerRequest, Promise<ProfileWithOwnedC
       })
     }
 
-    return profile as ProfileWithOwnedCharacters
+    return profile
   },
 )