diff --git a/src/components/OfficePage.vue b/src/components/OfficePage.vue
index 95720e2..1e41871 100644
--- a/src/components/OfficePage.vue
+++ b/src/components/OfficePage.vue
@@ -22,11 +22,11 @@ getPermissions()
 <template>
   <div class="center-block-custom content-block">
     <p>Доброго времени суток, {{ authStore.username }}.</p>
-    <p>
+    <!-- <p>
       {{ authStore.userRoles }}
     </p>
 
-    {{ permissions }}
+    {{ permissions }} -->
   </div>
 
   <HeaderMenu :add-logout="true" active="office" />
diff --git a/src/components/UsersPage.vue b/src/components/UsersPage.vue
index 8867f2b..85da0ba 100644
--- a/src/components/UsersPage.vue
+++ b/src/components/UsersPage.vue
@@ -1,11 +1,96 @@
 <script setup lang="ts">
+import { getAuthClient } from '@/api/auth_client'
+import type { User } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import { useMessage, NTable, NButton, NTag, NSpace, NFlex } from 'naive-ui'
+import { ref } from 'vue'
+
+const client = getAuthClient()
+const message = useMessage()
+
+const users = ref<User[]>([])
+
+async function getUsers() {
+  const res = await client.GetUsers({})
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  users.value = res.users!
+}
+getUsers()
+
+async function addRole(userId: number, role: string) {
+  const res = await client.AddUserRole({ id: userId, role: role })
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  await getUsers()
+}
+
+async function deleteRole(userId: number, role: string) {
+  const res = await client.DeleteUserRole({ id: userId, role: role })
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  await getUsers()
+}
 </script>
 
 <template>
-  <div class="center-block-custom content-block">Пользователи</div>
+  <div class="center-block-custom content-block">
+
+    <div class="users-container">
+
+      <div v-for="user in users" v-bind:key="user.id" class="user-block">
+        <div class="user-field">
+          Позывной: {{ user.username }}
+        </div>
+        <div class="user-field">
+          Почта: {{ user.email }}
+        </div>
+        <div class="user-field">
+          <n-space>
+            Роли: <n-tag :bordered="false" v-for="role in user.roles" v-bind:key="role">
+              {{ role }}
+            </n-tag>
+          </n-space>
+        </div>
+        <n-flex justify="end">
+
+          <n-button @click="addRole(user.id!, 'author')" v-if="!user.roles?.includes('author')">Сделать
+            автором</n-button>
+          <n-button @click="deleteRole(user.id!, 'author')" v-else>Забрать роль автора</n-button>
+
+          <n-button @click="addRole(user.id!, 'organizer')" v-if="!user.roles?.includes('organizer')">Сделать
+            организатором</n-button>
+          <n-button @click="deleteRole(user.id!, 'organizer')" v-else>Забрать роль организатора</n-button>
+
+        </n-flex>
+      </div>
+
+    </div>
+
+  </div>
 
   <HeaderMenu :add-logout="true" active="users" />
 </template>
 
-<style scoped></style>
+<style scoped>
+.users-container {
+  padding: 40px 0;
+}
+
+.user-block {
+  border: 1px solid #444;
+  border-radius: 10px;
+  margin: 0 0 20px 0;
+  padding: 20px;
+}
+
+.user-field {
+  margin: 10px;
+}
+</style>