diff --git a/package.json b/package.json
index 5b4a789..a73828f 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"eslint-plugin-vue": "^9.32.0",
 		"knip": "^5.45.0",
 		"openapi-typescript": "^7.6.1",
+		"postcss-html": "^1.8.0",
 		"postcss-preset-env": "^10.1.5",
 		"prettier": "^3.5.2",
 		"stylelint": "^16.15.0",
@@ -53,6 +54,6 @@
 		"vite-plugin-vuetify": "^2.1.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue-tsc": "^2.2.6",
-		"vuetify": "^3.7.14"
+		"vuetify": "^3.9.5"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9625b8d..0637a84 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,6 +72,9 @@ importers:
       openapi-typescript:
         specifier: ^7.6.1
         version: 7.6.1(typescript@5.8.2)
+      postcss-html:
+        specifier: ^1.8.0
+        version: 1.8.0
       postcss-preset-env:
         specifier: ^10.1.5
         version: 10.1.5(postcss@8.5.3)
@@ -86,7 +89,7 @@ importers:
         version: 15.0.0(stylelint@16.15.0(typescript@5.8.2))
       stylelint-config-recommended-vue:
         specifier: ^1.6.0
-        version: 1.6.0(postcss-html@1.7.0)(stylelint@16.15.0(typescript@5.8.2))
+        version: 1.6.0(postcss-html@1.8.0)(stylelint@16.15.0(typescript@5.8.2))
       stylelint-config-standard:
         specifier: ^37.0.0
         version: 37.0.0(stylelint@16.15.0(typescript@5.8.2))
@@ -107,7 +110,7 @@ importers:
         version: 6.0.0(postcss@8.5.3)(rollup@4.34.9)(stylelint@16.15.0(typescript@5.8.2))(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))
       vite-plugin-vuetify:
         specifier: ^2.1.0
-        version: 2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.14)
+        version: 2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.9.5)
       vite-svg-loader:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.13(typescript@5.8.2))
@@ -115,8 +118,8 @@ importers:
         specifier: ^2.2.6
         version: 2.2.6(typescript@5.8.2)
       vuetify:
-        specifier: ^3.7.14
-        version: 3.7.14(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
+        specifier: ^3.9.5
+        version: 3.9.5(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
 
 packages:
 
@@ -1898,8 +1901,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-html@1.7.0:
-    resolution: {integrity: sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==}
+  postcss-html@1.8.0:
+    resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==}
     engines: {node: ^12 || >=14}
 
   postcss-image-set-function@7.0.0:
@@ -2384,14 +2387,14 @@ packages:
       typescript:
         optional: true
 
-  vuetify@3.7.14:
-    resolution: {integrity: sha512-L5oD0x3Wrp49Khp+16dRykAFUZq6WXqX7OHLTwXnyEliJ48ERC9WfEtN0YOuEIhor/b2IOZXl+11fs/m452/Lw==}
+  vuetify@3.9.5:
+    resolution: {integrity: sha512-rJBSo1FeKcJJaqTfVHbOdpFXCmgeEIGzrh6HBEMGjSflan6voPIMSiK2dTCUU4t9JeghwvJtoAE5eBuqYIkFVA==}
     engines: {node: ^12.20 || >=14.13}
     peerDependencies:
       typescript: '>=4.7'
-      vite-plugin-vuetify: '>=1.0.0'
-      vue: ^3.3.0
-      webpack-plugin-vuetify: '>=2.0.0'
+      vite-plugin-vuetify: '>=2.1.0'
+      vue: ^3.5.0
+      webpack-plugin-vuetify: '>=3.1.0'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -3223,11 +3226,11 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
-  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.14)':
+  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.2))(vuetify@3.9.5)':
     dependencies:
       upath: 2.0.1
       vue: 3.5.13(typescript@5.8.2)
-      vuetify: 3.7.14(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
+      vuetify: 3.9.5(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
 
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
@@ -4209,7 +4212,7 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-html@1.7.0:
+  postcss-html@1.8.0:
     dependencies:
       htmlparser2: 8.0.2
       js-tokens: 9.0.1
@@ -4504,17 +4507,17 @@ snapshots:
 
   strip-json-comments@5.0.1: {}
 
-  stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.15.0(typescript@5.8.2)):
+  stylelint-config-html@1.1.0(postcss-html@1.8.0)(stylelint@16.15.0(typescript@5.8.2)):
     dependencies:
-      postcss-html: 1.7.0
+      postcss-html: 1.8.0
       stylelint: 16.15.0(typescript@5.8.2)
 
-  stylelint-config-recommended-vue@1.6.0(postcss-html@1.7.0)(stylelint@16.15.0(typescript@5.8.2)):
+  stylelint-config-recommended-vue@1.6.0(postcss-html@1.8.0)(stylelint@16.15.0(typescript@5.8.2)):
     dependencies:
-      postcss-html: 1.7.0
+      postcss-html: 1.8.0
       semver: 7.7.1
       stylelint: 16.15.0(typescript@5.8.2)
-      stylelint-config-html: 1.1.0(postcss-html@1.7.0)(stylelint@16.15.0(typescript@5.8.2))
+      stylelint-config-html: 1.1.0(postcss-html@1.8.0)(stylelint@16.15.0(typescript@5.8.2))
       stylelint-config-recommended: 15.0.0(stylelint@16.15.0(typescript@5.8.2))
 
   stylelint-config-recommended@15.0.0(stylelint@16.15.0(typescript@5.8.2)):
@@ -4680,14 +4683,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vuetify@2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.14):
+  vite-plugin-vuetify@2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.9.5):
     dependencies:
-      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.14)
+      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.2))(vuetify@3.9.5)
       debug: 4.4.0(supports-color@9.4.0)
       upath: 2.0.1
       vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)
       vue: 3.5.13(typescript@5.8.2)
-      vuetify: 3.7.14(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
+      vuetify: 3.9.5(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -4742,12 +4745,12 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.2
 
-  vuetify@3.7.14(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2)):
+  vuetify@3.9.5(typescript@5.8.2)(vite-plugin-vuetify@2.1.0)(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       typescript: 5.8.2
-      vite-plugin-vuetify: 2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.14)
+      vite-plugin-vuetify: 2.1.0(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2))(vue@3.5.13(typescript@5.8.2))(vuetify@3.9.5)
 
   wcwidth@1.0.1:
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index 402c126..e9d7466 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { useProfileStore } from './store';
+import { useProfileStore, useToastStore } from './store';
 import { onMounted } from 'vue';
 
 const profileStore = useProfileStore();
+const toastStore = useToastStore();
 
 onMounted(() => {
-	profileStore.fromUrl();
+	profileStore.setupAdminSession(null);
 });
 </script>
 
 <template>
-	<main class="container">
-		<RouterView />
-	</main>
-	<footer>
-		Made by
-		<a href="https://app.profcomff.com"><img src="https://app.profcomff.com/favicon.png" class="logo" /></a>
-		in association with
-		<a href="https://dyakov.space"><img src="https://dyakov.space/files/Icon.svg" class="logo" /></a>
-	</footer>
+	<v-app class="container">
+		<main class="main">
+			<Suspense>
+				<RouterView />
+			</Suspense>
+		</main>
+		<v-snackbar-queue v-model="toastStore.queue"></v-snackbar-queue>
+	</v-app>
 </template>
 
 <style scoped>
@@ -26,17 +26,4 @@ onMounted(() => {
 	width: 100%;
 	height: 100%;
 }
-
-footer {
-	position: sticky;
-	bottom: 0;
-	width: 100%;
-	color: gray;
-	text-align: center;
-
-	& .logo {
-		height: 30px;
-		vertical-align: middle;
-	}
-}
 </style>
diff --git a/src/components/achievements/AchievementCreateForm.vue b/src/components/achievements/AchievementCreateForm.vue
new file mode 100644
index 0000000..384f165
--- /dev/null
+++ b/src/components/achievements/AchievementCreateForm.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { ref } from 'vue';
+
+const achievementStore = useAchievementStore();
+
+const name = ref('');
+const description = ref('');
+
+async function createAchievement() {
+	const pic = (document.getElementById('pic') as HTMLFormElement).files[0];
+	await achievementStore.create(name.value, description.value, pic);
+}
+</script>
+
+<template>
+	<form id="form-create" action="submit">
+		<p>
+			<label for="name">Название</label>
+			<input v-model="name" type="text" name="name" id="name" />
+		</p>
+		<p>
+			<label for="description">Описание</label>
+			<input v-model="description" type="text" name="description" id="description" />
+		</p>
+		<p>
+			<label for="photo">Иконка</label>
+			<input type="file" name="picture_file" id="pic" />
+		</p>
+		<v-btn @click="createAchievement">Создать</v-btn>
+	</form>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementDeleteButton.vue b/src/components/achievements/AchievementDeleteButton.vue
new file mode 100644
index 0000000..2b5d8b1
--- /dev/null
+++ b/src/components/achievements/AchievementDeleteButton.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { router } from '@/router';
+import { useAchievementStore } from '@/store';
+import { Ref } from 'vue';
+
+const props = defineProps({
+	id: { type: Number, required: true },
+});
+const achievementStore = useAchievementStore();
+
+async function confirmDeletion(isActive: Ref<boolean>) {
+	await achievementStore.deleteAchievement(props.id);
+
+	isActive.value = false;
+	router.push('/achievements');
+}
+
+async function dismissDeletion(isActive: Ref<boolean>) {
+	isActive.value = false;
+}
+</script>
+
+<template>
+	<v-dialog>
+		<template #activator="{ props: activatorProps }">
+			<v-btn v-bind="activatorProps" color="secondary">Удалить</v-btn>
+		</template>
+
+		<template #default="{ isActive }">
+			<h1>Удалить {{ id }}?</h1>
+			<p>
+				<v-btn @click="dismissDeletion(isActive)">Нет</v-btn>
+				<v-btn @click="confirmDeletion(isActive)">Да</v-btn>
+			</p>
+		</template>
+	</v-dialog>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementEditForm.vue b/src/components/achievements/AchievementEditForm.vue
new file mode 100644
index 0000000..04aca7e
--- /dev/null
+++ b/src/components/achievements/AchievementEditForm.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { ref } from 'vue';
+
+defineProps({
+	id: { type: Number, required: true },
+});
+
+const achievementStore = useAchievementStore();
+
+const newName = ref('');
+const newDescription = ref('');
+</script>
+
+<template>
+	<form id="achievement-info" @submit.prevent>
+		<h2>Изменить достижение</h2>
+
+		<p>
+			<label for="name">Название</label>
+			<input v-model="newName" name="name" id="name" />
+		</p>
+
+		<p>
+			<label for="description">Описание</label>
+			<input v-model="newDescription" name="description" id="description" />
+		</p>
+		<v-btn @click="achievementStore.edit(id, newName, newDescription)">Изменить</v-btn>
+	</form>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementGiveForm.vue b/src/components/achievements/AchievementGiveForm.vue
new file mode 100644
index 0000000..784ee01
--- /dev/null
+++ b/src/components/achievements/AchievementGiveForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { ref, onMounted, onUpdated } from 'vue';
+
+const props = defineProps<{
+	definedAchievement?: number;
+	definedReceiver?: number;
+}>();
+
+const achievementId = ref(0);
+const receiverId = ref(0);
+
+onMounted(() => {
+	achievementId.value = props.definedAchievement ?? 0;
+	receiverId.value = props.definedReceiver ?? 0;
+});
+
+onUpdated(() => {
+	if (props.definedAchievement) {
+		achievementId.value = props.definedAchievement;
+	}
+	if (props.definedReceiver) {
+		receiverId.value = props.definedReceiver;
+	}
+});
+
+const achievementStore = useAchievementStore();
+</script>
+
+<template>
+	<form action="submit">
+		<p>
+			<label for="achievement-id">Номер достижения</label>
+			<input
+				v-model="achievementId"
+				type="number"
+				name="achievement_id"
+				id="achievement-id"
+				:disabled="!!definedAchievement"
+			/>
+		</p>
+		<p>
+			<label for="user-id">User id</label>
+			<input v-model="receiverId" type="number" name="user_id" id="user-id" :disabled="!!definedReceiver" />
+		</p>
+		<v-btn @click="achievementStore.createReceiver(achievementId, receiverId)">Выдать</v-btn>
+	</form>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementPictureForm.vue b/src/components/achievements/AchievementPictureForm.vue
new file mode 100644
index 0000000..0be08e1
--- /dev/null
+++ b/src/components/achievements/AchievementPictureForm.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+const props = defineProps({
+	id: { type: Number, required: true },
+});
+const achievementStore = useAchievementStore();
+
+async function changeImage() {
+	const picInput = (document.getElementById('picture_file') as HTMLFormElement).files[0];
+	await achievementStore.changePicture(props.id, picInput);
+}
+</script>
+
+<template>
+	<form id="achievement-pic" @submit.prevent>
+		<h2>Загрузить новую картинку</h2>
+		<p>
+			<label for="picture_file">Иконка</label>
+			<input type="file" id="picture_file" name="picture_file" accept="image/png" />
+		</p>
+		<v-btn @click="changeImage">Отправить</v-btn>
+	</form>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementReceiversTable.vue b/src/components/achievements/AchievementReceiversTable.vue
new file mode 100644
index 0000000..e3f8b02
--- /dev/null
+++ b/src/components/achievements/AchievementReceiversTable.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { onMounted, onUpdated } from 'vue';
+
+const achievementStore = useAchievementStore();
+
+const props = defineProps({
+	achievementId: { type: Number, required: true, default: 1 },
+});
+
+const reload = async () => {
+	await achievementStore.requestReceivers(props.achievementId);
+};
+
+onMounted(reload);
+onUpdated(reload);
+</script>
+
+<template>
+	<h2>Получатели достижения {{ achievementId }}</h2>
+	<v-table>
+		<thead>
+			<tr>
+				<th>User Id</th>
+				<th>Действия</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr v-for="{ user_id } in achievementStore.receivers" :key="user_id">
+				<td>{{ user_id }}</td>
+				<td>
+					<v-btn @click="achievementStore.revokeReceiver(achievementId, user_id)">Отозвать</v-btn>
+					<v-btn @click="$router.push(`/achievements/user/${user_id}`)">Подробнее</v-btn>
+				</td>
+			</tr>
+		</tbody>
+	</v-table>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/AchievementTable.vue b/src/components/achievements/AchievementTable.vue
new file mode 100644
index 0000000..3861f12
--- /dev/null
+++ b/src/components/achievements/AchievementTable.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { onMounted } from 'vue';
+
+const achievementStore = useAchievementStore();
+
+onMounted(async () => {
+	await achievementStore.requestAllAchievements();
+});
+</script>
+
+<template>
+	<v-table>
+		<thead>
+			<tr>
+				<th>ID</th>
+				<th>Название</th>
+				<th>Описание</th>
+				<th>Ссылка на иконку</th>
+				<th>ID создателя</th>
+				<th>Действия</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr v-for="{ id, name, description, picture, owner_user_id } in achievementStore.allAchievements" :key="id">
+				<td>{{ id }}</td>
+				<td>{{ name }}</td>
+				<td>{{ description }}</td>
+				<td>{{ picture }}</td>
+				<td>{{ owner_user_id }}</td>
+				<td>
+					<v-btn density="compact" text="Подробнее" @click="$router.push(`/achievements/${id}`)" />
+				</td>
+			</tr>
+		</tbody>
+	</v-table>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/components/achievements/UserAchievementsTable.vue b/src/components/achievements/UserAchievementsTable.vue
new file mode 100644
index 0000000..8e2bfd8
--- /dev/null
+++ b/src/components/achievements/UserAchievementsTable.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useAchievementStore } from '@/store';
+import { onMounted, onUpdated } from 'vue';
+
+const props = defineProps({
+	userId: { type: Number, required: true },
+});
+
+const achievementStore = useAchievementStore();
+
+const reload = async () => {
+	await achievementStore.requestUserAchievements(props.userId);
+};
+
+onMounted(reload);
+onUpdated(reload);
+</script>
+
+<template>
+	<h1>Пользователь {{ userId }}</h1>
+	<v-table>
+		<thead>
+			<tr>
+				<th>ID</th>
+				<th>Название</th>
+				<th>Описание</th>
+				<th>Ссылка на иконку</th>
+				<th>ID создателя</th>
+				<th>Действия</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr v-for="{ id, name, description, picture, owner_user_id } in achievementStore.userAchivements" :key="id">
+				<td>{{ id }}</td>
+				<td>{{ name }}</td>
+				<td>{{ description }}</td>
+				<td>{{ picture }}</td>
+				<td>{{ owner_user_id }}</td>
+				<td>
+					<v-btn @click="achievementStore.revokeReceiver(id, userId)">Отозвать</v-btn>
+				</td>
+			</tr>
+		</tbody>
+	</v-table>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/models/achievements.ts b/src/models/achievements.ts
new file mode 100644
index 0000000..4ac6fa3
--- /dev/null
+++ b/src/models/achievements.ts
@@ -0,0 +1,11 @@
+export interface Achievement {
+	id: number;
+	name: string;
+	description: string;
+	picture: string | null;
+	owner_user_id: number;
+}
+
+export interface Receiver {
+	user_id: number;
+}
diff --git a/src/pages/DebugPage.vue b/src/pages/DebugPage.vue
new file mode 100644
index 0000000..d2e5f15
--- /dev/null
+++ b/src/pages/DebugPage.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import AchievementReceivers from '@/components/achievements/AchievementReceiversTable.vue';
+</script>
+
+<template>
+	<AchievementReceivers />
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
deleted file mode 100644
index cc109f1..0000000
--- a/src/pages/MainPage.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import apiClient from '@/api';
-import { useProfileStore } from '@/store';
-import { onMounted, ref } from 'vue';
-
-const profileStore = useProfileStore();
-
-const showUserWarn = ref(false);
-
-onMounted(async () => {
-	// Get username
-	if (!profileStore.full_name && profileStore.id) {
-		const { response, data } = await apiClient.GET('/userdata/user/{id}', {
-			params: { path: { id: profileStore.id } },
-		});
-		if (response.status != 200) {
-			showUserWarn.value = true;
-			return;
-		}
-		if (!data || !data.items) {
-			showUserWarn.value = true;
-			return;
-		}
-		const nameItem = data.items.find(item => {
-			return item.category == 'Личная информация' && item.param == 'Полное имя';
-		});
-		if (!nameItem) {
-			showUserWarn.value = true;
-			return;
-		}
-		profileStore.full_name = nameItem?.value ?? null;
-	}
-});
-
-const location = document.location.origin + '/docs/';
-</script>
-
-<template>
-	<div>
-		<h1 class="text-h1">
-			Привет<span v-if="profileStore.full_name">, {{ profileStore.full_name }}</span
-			>!
-		</h1>
-		<p v-if="!profileStore.full_name">
-			Не удалось получить твое имя из
-			<a href="https://api.profcomff.com/?urls.primaryName=userdata">Userdata API</a>
-			=(
-		</p>
-		<p>Твой id: {{ profileStore.id }}</p>
-		<div>
-			<p>
-				Документация к этому коду находится по адресу <a href="/docs/">{{ location }}</a>
-			</p>
-		</div>
-	</div>
-</template>
diff --git a/src/pages/StartScreen.vue b/src/pages/StartScreen.vue
new file mode 100644
index 0000000..8305620
--- /dev/null
+++ b/src/pages/StartScreen.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useProfileStore } from '@/store';
+
+const profileStore = useProfileStore();
+const token = ref('');
+
+async function setupSession() {
+	await profileStore.setupAdminSession(token.value);
+}
+</script>
+
+<template>
+	<h1>Админка Твой ФФ</h1>
+	<form id="auth" @submit.prevent>
+		<h2>Сетап админской сессии</h2>
+		<p>
+			<label for="token">Токен</label>
+			<input v-model="token" type="password" name="token" id="token" />
+		</p>
+		<v-btn @click="setupSession">Отправить</v-btn>
+	</form>
+
+	<v-btn @click="$router.push('/achievements')">Ачивки</v-btn>
+</template>
+
+<style lang="css">
+.container {
+	width: 100%;
+	height: 100%;
+}
+
+form {
+	border: 4px solid black;
+	margin: 2px;
+}
+
+input {
+	border: 2px solid black;
+	margin: 2px;
+}
+
+button {
+	margin: 2px;
+}
+</style>
diff --git a/src/pages/achievements/AchievementCreate.vue b/src/pages/achievements/AchievementCreate.vue
new file mode 100644
index 0000000..077ddf8
--- /dev/null
+++ b/src/pages/achievements/AchievementCreate.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import AchievementCreateForm from '@/components/achievements/AchievementCreateForm.vue';
+</script>
+
+<template>
+	<h1>Создание достижения</h1>
+	<AchievementCreateForm />
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/pages/achievements/AchievementGive.vue b/src/pages/achievements/AchievementGive.vue
new file mode 100644
index 0000000..b2fb0f9
--- /dev/null
+++ b/src/pages/achievements/AchievementGive.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import AchievementGiveForm from '@/components/achievements/AchievementGiveForm.vue';
+</script>
+
+<template>
+	<AchievementGiveForm />
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/pages/achievements/AchievementView.vue b/src/pages/achievements/AchievementView.vue
new file mode 100644
index 0000000..d849131
--- /dev/null
+++ b/src/pages/achievements/AchievementView.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import AchievementDeleteButton from '@/components/achievements/AchievementDeleteButton.vue';
+import AchievementEditForm from '@/components/achievements/AchievementEditForm.vue';
+import AchievementGive from '@/components/achievements/AchievementGiveForm.vue';
+import AchievementPictureForm from '@/components/achievements/AchievementPictureForm.vue';
+import AchievementReceivers from '@/components/achievements/AchievementReceiversTable.vue';
+
+import { useAchievementStore } from '@/store';
+import { storeToRefs } from 'pinia';
+import { onMounted, onUpdated, computed } from 'vue';
+
+const achievementStore = useAchievementStore();
+const { achievement } = storeToRefs(achievementStore);
+
+const reload = async () => {
+	const id = Number(document.URL.split('/').at(-1));
+	await achievementStore.requestAchievement(id);
+};
+
+onMounted(reload);
+onUpdated(reload);
+
+const id = computed(() => achievement.value.id);
+const name = computed(() => achievement.value.name);
+const description = computed(() => achievement.value.description);
+const owner_user_id = computed(() => achievement.value.owner_user_id);
+const pictureLink = computed(() => {
+	return achievement.value.picture
+		? `${import.meta.env.VITE_AUTH_API_BASE_URL}/achievement/${achievement.value.picture}`
+		: '';
+});
+</script>
+
+<template>
+	<h1>{{ id }}. {{ name }} | Создана {{ owner_user_id }}</h1>
+	<p>{{ description }}</p>
+	<img :src="pictureLink ?? ''" widht="128" height="128" />
+
+	<AchievementEditForm :id="id" />
+	<AchievementPictureForm :id="id" />
+	<AchievementDeleteButton :id="id" />
+	<AchievementGive :defined-achievement="id" />
+	<AchievementReceivers :achievement-id="id" />
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/pages/achievements/AchievementsList.vue b/src/pages/achievements/AchievementsList.vue
new file mode 100644
index 0000000..e4253d2
--- /dev/null
+++ b/src/pages/achievements/AchievementsList.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import AchievementTable from '@/components/achievements/AchievementTable.vue';
+</script>
+
+<template>
+	<div class="d-flex align-center justify-space-between px-2 py-2">
+		<h1>Список достижений</h1>
+
+		<div>
+			<v-btn :prepend-icon="'mdi-plus'" density="default" @click="$router.push('/achievements/create')">
+				Создать
+			</v-btn>
+			<v-btn :prepend-icon="'mdi-plus'" density="default" @click="$router.push('/achievements/give')">
+				Выдать
+			</v-btn>
+		</div>
+	</div>
+
+	<AchievementTable />
+</template>
+
+<style scoped></style>
diff --git a/src/pages/achievements/UserAchievements.vue b/src/pages/achievements/UserAchievements.vue
new file mode 100644
index 0000000..9d6d2aa
--- /dev/null
+++ b/src/pages/achievements/UserAchievements.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import UserAchievementsTable from '@/components/achievements/UserAchievementsTable.vue';
+import { ref, onMounted, onUpdated } from 'vue';
+
+const userId = ref(1);
+
+const reload = () => (userId.value = Number(document.URL.split('/').at(-1)));
+
+onMounted(reload);
+onUpdated(reload);
+</script>
+
+<template>
+	<UserAchievementsTable :user-id="userId" />
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index ca3a585..42882f1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,31 @@ import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
 const routes: RouteRecordRaw[] = [
 	{
 		path: '/',
-		component: () => import('../pages/MainPage.vue'),
+		component: () => import('../pages/StartScreen.vue'),
+	},
+	{
+		path: '/achievements',
+		component: () => import('../pages/achievements/AchievementsList.vue'),
+	},
+	{
+		path: '/achievements/:id',
+		component: () => import('../pages/achievements/AchievementView.vue'),
+	},
+	{
+		path: '/achievements/create',
+		component: () => import('../pages/achievements/AchievementCreate.vue'),
+	},
+	{
+		path: '/achievements/give',
+		component: () => import('../pages/achievements/AchievementGive.vue'),
+	},
+	{
+		path: '/achievements/user/:id',
+		component: () => import('../pages/achievements/UserAchievements.vue'),
+	},
+	{
+		path: '/debug',
+		component: () => import('../pages/DebugPage.vue'),
 	},
 ];
 
diff --git a/src/store/achievementStore.ts b/src/store/achievementStore.ts
new file mode 100644
index 0000000..91ba461
--- /dev/null
+++ b/src/store/achievementStore.ts
@@ -0,0 +1,166 @@
+import apiClient from '@/api';
+import { Achievement, Receiver } from '@/models/achievements';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useToastStore } from './toastStore';
+
+export const useAchievementStore = defineStore('achievement', () => {
+	const toastStore = useToastStore();
+
+	const defaultAchievement: Achievement = {
+		id: 0,
+		name: 'Дефолтная ачивка',
+		description: 'Когда ничего другого не загрузилось',
+		picture: null,
+		owner_user_id: 177,
+	};
+
+	const allAchievements = ref<Achievement[]>([]);
+	const achievement = ref<Achievement>(defaultAchievement);
+	const receivers = ref<Receiver[]>([]);
+	const userAchivements = ref<Achievement[]>([]);
+
+	async function requestAllAchievements() {
+		const { data, error } = await apiClient.GET('/achievement/achievement');
+		if (error) {
+			toastStore.error(error);
+			return;
+		}
+		allAchievements.value = data.sort((a, b) => a.id - b.id);
+	}
+
+	async function requestAchievement(id: number) {
+		const { data, error } = await apiClient.GET('/achievement/achievement/{id}', {
+			params: { path: { id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		achievement.value = data;
+	}
+
+	async function create(name: string, description: string, picture_file: File | null) {
+		const { data, error } = await apiClient.POST('/achievement/achievement', {
+			body: { name, description },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		if (!picture_file) {
+			toastStore.success(`Достижение ${data.id} создано! Фотографию можно дозагрузить на странице достижения`);
+			return data;
+		}
+		toastStore.success(`Достижение ${data.id} создано! Загружаем иконку...`);
+		return changePicture(data.id, picture_file);
+	}
+
+	async function edit(id: number, name: string, description: string) {
+		const { data, error } = await apiClient.PATCH('/achievement/achievement/{id}', {
+			params: { path: { id } },
+			body: { name, description },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		achievement.value = data;
+		toastStore.success(`Достижение ${id} изменено. Иконка меняется отдельно`);
+	}
+
+	async function changePicture(id: number, picture_file: File) {
+		const formData = new FormData();
+		formData.append('picture_file', picture_file);
+		const { data, error } = await apiClient.PATCH('/achievement/achievement/{id}/picture', {
+			params: { path: { id } },
+			body: formData as never,
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		toastStore.success(`Фотография достижения ${id} изменена`);
+		achievement.value = data;
+		return data;
+	}
+
+	async function deleteAchievement(id: number) {
+		const { error } = await apiClient.DELETE('/achievement/achievement/{id}', {
+			params: { path: { id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		toastStore.success(`Достижение ${id} удалено`);
+	}
+
+	async function requestReceivers(achievement_id: number) {
+		const { data, error } = await apiClient.GET('/achievement/achievement/{achievement_id}/reciever', {
+			params: { path: { achievement_id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		receivers.value = data.recievers;
+	}
+
+	async function createReceiver(achievement_id: number, user_id: number) {
+		const { data, error } = await apiClient.POST('/achievement/achievement/{achievement_id}/reciever/{user_id}', {
+			params: { path: { achievement_id, user_id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		toastStore.success(`Ачивка ${achievement_id} выдана пользователю ${user_id}`);
+		receivers.value = data.recievers;
+	}
+
+	async function revokeReceiver(achievement_id: number, user_id: number) {
+		const { data, error } = await apiClient.DELETE('/achievement/achievement/{achievement_id}/reciever/{user_id}', {
+			params: { path: { achievement_id, user_id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg);
+			return;
+		}
+		toastStore.success(`Ачивка ${achievement_id} забрана у пользователю ${user_id}`);
+		receivers.value = data.recievers;
+		await requestUserAchievements(user_id);
+	}
+
+	async function requestUserAchievements(user_id: number) {
+		const { data, error } = await apiClient.GET('/achievement/user/{user_id}', {
+			params: { path: { user_id } },
+		});
+		if (error) {
+			toastStore.error(error.detail![0].msg ?? 'Неизвестная ошибка');
+			return;
+		}
+		userAchivements.value = data.achievement.sort((a, b) => a.id - b.id);
+	}
+
+	return {
+		allAchievements,
+		achievement,
+		receivers,
+		userAchivements,
+
+		requestAllAchievements,
+
+		requestAchievement,
+		create,
+		edit,
+		changePicture,
+		deleteAchievement,
+
+		requestReceivers,
+		createReceiver,
+		revokeReceiver,
+
+		requestUserAchievements,
+	};
+});
diff --git a/src/store/index.ts b/src/store/index.ts
index 21feb3f..765d627 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1 +1,3 @@
+export { useAchievementStore } from './achievementStore';
 export { useProfileStore } from './profileStore';
+export { useToastStore } from './toastStore';
diff --git a/src/store/profileStore.ts b/src/store/profileStore.ts
index 28d0c8a..03f886e 100644
--- a/src/store/profileStore.ts
+++ b/src/store/profileStore.ts
@@ -1,8 +1,13 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { setupAuth } from '@profcomff/api-uilib';
+import apiClient from '@/api';
+import { useToastStore } from './toastStore';
 
 export const useProfileStore = defineStore('profile', () => {
-	const id = ref<number | null>(null);
+	const toastStore = useToastStore();
+
+	const user_id = ref<number | null>(null);
 	const email = ref<string | null>(null);
 	const token = ref<string | null>(null);
 	const groups = ref<number[] | null>(null);
@@ -21,15 +26,72 @@ export const useProfileStore = defineStore('profile', () => {
 			token.value = currToken;
 		}
 		if (currId) {
-			id.value = +currId;
+			user_id.value = +currId;
 		}
 		if (currScopes) {
 			sessionScopes.value = currScopes.split(',');
 		}
 	};
 
+	// if debugging, paste it here to avoid relogging
+	const TVOI_FF_TEST_TOKEN = '';
+
+	async function setupAdminSession(tvff_token: string | null) {
+		const storedToken = localStorage.getItem('token');
+		if (storedToken) {
+			const { data } = await apiClient.GET('/auth/me');
+			if (data) {
+				setupAuth(storedToken);
+				toastStore.success('Логин из сохраненной сессии успешен');
+				return;
+			}
+			toastStore.error('Сохраненная сессия истекла, залогиньтесь заново');
+			localStorage.removeItem('token');
+		}
+
+		setupAuth(tvff_token ?? TVOI_FF_TEST_TOKEN);
+
+		const serviceScopes = [
+			'achievement.edit',
+			'achievement.give',
+			'achievement.revoke',
+			'achievement.delete',
+			'achievement.create',
+		];
+		const serviceName = 'achievements';
+		const scopes = serviceScopes.map(value => `${serviceName}.${value}`);
+		const { data, error } = await apiClient.POST('/auth/session', {
+			body: {
+				scopes,
+				expires: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+			},
+		});
+
+		if (error) {
+			toastStore.error((error.detail as unknown as string) ?? 'Что-то не так');
+			return;
+		}
+
+		if (data) {
+			user_id.value = data.id;
+			token.value = data.token || '';
+			sessionScopes.value = data.session_scopes ?? [];
+
+			setupAuth(data.token || '');
+			localStorage.setItem('token', data.token || '');
+			toastStore.success('Сессия установлена и сохранена');
+		}
+	}
+
+	async function setupUserSession(tvff_token: string | null) {
+		setupAuth(tvff_token ?? TVOI_FF_TEST_TOKEN);
+		toastStore.success('user logged');
+	}
+
+	const isLogged = computed(() => token.value && token.value !== '');
+
 	return {
-		id,
+		user_id,
 		email,
 		token,
 		groups,
@@ -39,6 +101,10 @@ export const useProfileStore = defineStore('profile', () => {
 
 		full_name,
 
+		isLogged,
+
 		fromUrl,
+		setupAdminSession,
+		setupUserSession,
 	};
 });
diff --git a/src/store/toastStore.ts b/src/store/toastStore.ts
new file mode 100644
index 0000000..1125a31
--- /dev/null
+++ b/src/store/toastStore.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useToastStore = defineStore('toast', () => {
+	interface Toast {
+		text: string;
+		timeout?: number;
+		color?: string;
+	}
+
+	const queue = ref<Toast[]>([]);
+
+	function add(message: Toast) {
+		queue.value.push(message);
+	}
+
+	function success(text: string) {
+		queue.value.push({
+			text,
+			timeout: 2000,
+			color: 'success',
+		});
+	}
+
+	function error(text: string) {
+		queue.value.push({
+			text,
+			timeout: 2000,
+			color: 'error',
+		});
+	}
+
+	return {
+		queue,
+		add,
+		error,
+		success,
+	};
+});
diff --git a/src/vuetify.ts b/src/vuetify.ts
index 6a6c506..a825683 100644
--- a/src/vuetify.ts
+++ b/src/vuetify.ts
@@ -1,4 +1,5 @@
 import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
 import { createVuetify } from 'vuetify';
 import { aliases, mdi } from 'vuetify/iconsets/mdi';
 
@@ -31,6 +32,10 @@ export const vuetify = createVuetify({
 		},
 	},
 	defaults: {
+		VBtn: {
+			variant: 'flat',
+			color: 'primary',
+		},
 		VBtnToggle: {
 			color: 'rgb(0, 1, 76)',
 			elevation: 1,
diff --git a/tsconfig.json b/tsconfig.json
index 0cc7fa6..070084c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,14 +9,14 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"esModuleInterop": true,
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"skipLibCheck": true,
 		"noEmit": true,
 		"forceConsistentCasingInFileNames": true,
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["src/*"]
-		},
+		}
 	},
 	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 	"references": [