diff --git a/src/entities/board/model/types.ts b/src/entities/board/model/types.ts
index 5a3a813f..efaf233a 100644
--- a/src/entities/board/model/types.ts
+++ b/src/entities/board/model/types.ts
@@ -6,6 +6,8 @@ type DateParams = {
   deletedAt?: Date;
 };
 
+export type Status = 'work' | 'archive' | 'closed' | 'not active';
+
 export interface BoardPreview extends DateParams {
   _id: string;
   title: string;
@@ -17,8 +19,9 @@ export interface Board extends DateParams {
   _id: string;
   columns?: Column[];
   name: string;
+  color?: string;
   users: User[];
-  status: 'work' | 'archive' | 'closed' | 'not active';
+  status: Status;
 }
 
 type Tag = {
@@ -41,3 +44,9 @@ export interface Column extends DateParams {
   title: string;
   cards?: Card[];
 }
+
+export interface StatusBadge {
+  _id: string;
+  indicator: string;
+  status: Status;
+}
diff --git a/src/features/kanban/ui/ChangeName.vue b/src/features/kanban/ui/ChangeName.vue
new file mode 100644
index 00000000..6b36c294
--- /dev/null
+++ b/src/features/kanban/ui/ChangeName.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { UiBadge, UiInput } from '@/shared/ui';
+import { Check } from 'lucide-vue-next';
+
+const props = defineProps<{
+  name: string;
+  projColor: string;
+  colors: readonly string[];
+}>();
+
+const emits = defineEmits<{
+  (e: 'updateColor', color: string): void;
+}>();
+
+const { t } = useI18n();
+const isDark = useDark();
+
+const modelName = defineModel<string>();
+
+const isCurrentColor = computed(() => {
+  return (color: string) => props.projColor === color;
+});
+</script>
+
+<template>
+  <div :class="$style.about">
+    <div :class="$style.name">
+      <div :class="$style.indicator_bg" :style="{ backgroundColor: projColor }">S</div>
+      <UiInput v-model="modelName" placeholder="name ?" :class="$style.input" />
+      <UiBadge :variant="isDark ? 'default' : 'default'">free</UiBadge>
+    </div>
+    <div :class="$style.colors">
+      <div
+        v-for="(color, index) in colors"
+        :key="index"
+        :class="$style.color"
+        :style="{ backgroundColor: color }"
+        @click="emits('updateColor', color)"
+      >
+        <Check v-if="isCurrentColor(color)" :size="14" color="white" />
+      </div>
+    </div>
+  </div>
+  <p :class="[$style.desc, 'text-sm']">
+    {{ t('kanban.configuration.name') }}
+  </p>
+</template>
+
+<style module lang="scss">
+.about {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+
+  .name {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .indicator_bg {
+      min-width: 30px;
+      min-height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--zinc-50);
+    }
+
+    .input {
+      padding: 0;
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+      max-width: 80px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 22px;
+
+      &::placeholder {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .colors {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .color {
+      width: 20px;
+      height: 20px;
+      border-radius: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+}
+
+.desc {
+  color: var(--zinc-500);
+  margin: 10px 0;
+}
+
+:global(html.dark) {
+  .desc {
+    color: var(--zinc-300);
+  }
+}
+</style>
diff --git a/src/features/kanban/ui/ChooseStatus.vue b/src/features/kanban/ui/ChooseStatus.vue
new file mode 100644
index 00000000..296163af
--- /dev/null
+++ b/src/features/kanban/ui/ChooseStatus.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import type { StatusBadge } from '@/entities/board';
+import { computed } from 'vue';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps<{
+  statuses: StatusBadge[];
+  projStatus: StatusBadge['status'];
+}>();
+const emits = defineEmits<{
+  (e: 'updateStatus', status: StatusBadge['status']): void;
+}>();
+
+const { t } = useI18n();
+
+const activeStatus = computed(() => {
+  return (s: string) => {
+    return props.projStatus === s && [s, true];
+  };
+});
+</script>
+
+<template>
+  <div :class="$style.badges">
+    <div
+      v-for="b in statuses"
+      v-bind="$attrs"
+      :key="b._id"
+      :class="[$style.badge, { [$style.active]: activeStatus(b.status) }]"
+      @click="emits('updateStatus', b.status)"
+    >
+      <div :class="$style.indicator" :style="{ backgroundColor: b.indicator }" />
+      <span class="text-sm">{{ b.status }}</span>
+    </div>
+  </div>
+  <p :class="[$style.status_p, 'text-sm']">
+    {{ t('kanban.configuration.status') }}
+  </p>
+</template>
+
+<style module lang="scss">
+.badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .badge {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 20px;
+    padding: 5px 10px;
+    background: var(--zinc-100);
+    border: 1px solid var(--zinc-200);
+    border-radius: 4px;
+    cursor: pointer;
+
+    .indicator {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+  }
+
+  .active {
+    border: 1px solid var(--zinc-300);
+  }
+}
+
+.status_p {
+  color: var(--zinc-500);
+  margin: 10px 0;
+}
+
+:global(html.dark) {
+  .status_p {
+    color: var(--zinc-300);
+  }
+  .badges {
+    .badge {
+      background-color: var(--zinc-600);
+      border: 1px solid var(--zinc-600);
+    }
+  }
+}
+</style>
diff --git a/src/features/kanban/ui/SettingsSheet.vue b/src/features/kanban/ui/SettingsSheet.vue
deleted file mode 100644
index a304d5f4..00000000
--- a/src/features/kanban/ui/SettingsSheet.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, shallowReactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { UiBadge, UiButton, UiInput, UiSheet } from '@/shared/ui';
-import type { SheetElement } from '@/shared/ui';
-import { Settings2 } from 'lucide-vue-next';
-import { UserAvatar } from '@/entities/user';
-import type { Board } from '@/entities/board';
-import { Check } from 'lucide-vue-next';
-import { useDark } from '@vueuse/core';
-
-type Status = Board['status'];
-
-interface StatusBadge {
-  _id: string;
-  indicator: string;
-  status: Status;
-}
-
-const sheet = ref<SheetElement | null>(null);
-
-const open = () => {
-  if (sheet.value) {
-    sheet.value.open();
-  }
-};
-
-//TODO(@mnenie): refactor this part
-
-const { t } = useI18n();
-const isDark = useDark();
-
-const name = ref('Startup');
-const projColor = ref('#b156db');
-
-const colors = ['#ffd45e', '#45ad2d', '#3b54c4', '#b156db', '#a6a2a3', '#ff7a97', '#a1612a'] as const;
-const statuses = shallowReactive<StatusBadge[]>([
-  { _id: '0', indicator: '#acb1c2', status: 'not active' },
-  { _id: '1', indicator: '#359f39', status: 'work' },
-  { _id: '2', indicator: '#fde50c', status: 'archive' },
-  { _id: '3', indicator: '#d01f1f', status: 'closed' }
-]);
-
-const isCurrentColor = computed(() => {
-  return (color: string) => projColor.value === color;
-});
-</script>
-
-<template>
-  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.settings" @click="open">
-    <Settings2 :size="16" />
-  </UiButton>
-  <UiSheet ref="sheet">
-    <template #header>
-      <p class="text-lg" style="font-weight: 500">{{ t('kanban.configuration.title') }}</p>
-      <span :class="[$style.desc, 'text-sm']">
-        {{ t('kanban.configuration.description') }}
-      </span>
-    </template>
-    <template #default>
-      <div :class="$style.about">
-        <div :class="$style.name">
-          <div :class="$style.indicator_bg" :style="{ backgroundColor: projColor }">S</div>
-          <UiInput v-model="name" placeholder="name ?" :class="$style.input" />
-          <UiBadge :variant="isDark ? 'default' : 'outline'">free</UiBadge>
-        </div>
-        <div :class="$style.colors">
-          <div
-            v-for="(color, index) in colors"
-            :key="index"
-            :class="$style.color"
-            :style="{ backgroundColor: color }"
-            @click="projColor = color"
-          >
-            <Check v-if="isCurrentColor(color)" :size="14" color="white" />
-          </div>
-        </div>
-      </div>
-      <p :class="[$style.desc, 'text-sm']">
-        {{ t('kanban.configuration.name') }}
-      </p>
-      <div :class="$style.users">
-        <p>Participants:</p>
-        <UserAvatar style="width: 24px; height: 24px">
-          <img style="width: 100%" src="https://avatars.githubusercontent.com/u/121057011?v=4" />
-        </UserAvatar>
-      </div>
-      <div :class="$style.badges">
-        <div v-for="b in statuses" :key="b._id" :class="$style.badge">
-          <div :class="$style.indicator" :style="{ backgroundColor: b.indicator }" />
-          <span class="text-sm">{{ b.status }}</span>
-        </div>
-      </div>
-      <p :class="[$style.desc, 'text-sm']">
-        {{ t('kanban.configuration.status') }}
-      </p>
-      <div :class="$style.btns">
-        <UiButton>{{ t('kanban.configuration.update') }}</UiButton>
-        <UiButton variant="destructive">{{ t('kanban.configuration.clear') }}</UiButton>
-      </div>
-    </template>
-  </UiSheet>
-</template>
-
-<style module lang="scss">
-.settings {
-  height: 30px;
-  gap: 8px;
-
-  & > svg {
-    color: var(--zinc-500);
-  }
-}
-
-.desc {
-  color: var(--zinc-500);
-  margin: 10px 0;
-}
-
-.about {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 15px;
-
-  .name {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    .indicator_bg {
-      min-width: 30px;
-      min-height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--zinc-50);
-    }
-
-    .input {
-      padding: 0;
-      background-color: transparent;
-      box-shadow: none;
-      border: none;
-      max-width: 80px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 22px;
-
-      &::placeholder {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .colors {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    .color {
-      width: 20px;
-      height: 20px;
-      border-radius: 20%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-}
-
-.badges {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  .badge {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 20px;
-    padding: 5px 10px;
-    background: var(--zinc-200);
-    border-radius: 4px;
-
-    .indicator {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-    }
-  }
-}
-
-.users {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 25px;
-}
-
-.btns {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 18px;
-}
-
-:global(html.dark) {
-  .settings {
-    background-color: transparent;
-    &:hover {
-      background-color: transparent;
-      border-color: var(--zinc-500);
-    }
-    & > svg {
-      color: var(--zinc-300);
-    }
-  }
-  .desc {
-    color: var(--zinc-300);
-  }
-
-  .badges {
-    .badge {
-      background-color: var(--zinc-600);
-    }
-  }
-}
-</style>
diff --git a/src/features/kanban/ui/UpdateBoard.vue b/src/features/kanban/ui/UpdateBoard.vue
new file mode 100644
index 00000000..8d2d450b
--- /dev/null
+++ b/src/features/kanban/ui/UpdateBoard.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { UiButton } from '@/shared/ui';
+
+const emits = defineEmits<{
+  (e: 'apply'): void;
+  (e: 'clear'): void;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div :class="$style.btns">
+    <UiButton variant="default" :class="$style.apply_btn" @click="emits('apply')">
+      {{ t('kanban.configuration.update') }}
+    </UiButton>
+    <UiButton variant="destructive" @click="emits('clear')">{{ t('kanban.configuration.clear') }}</UiButton>
+  </div>
+</template>
+
+<style module lang="scss">
+.btns {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 18px;
+}
+</style>
diff --git a/src/features/kanban/ui/index.ts b/src/features/kanban/ui/index.ts
index bfb1ed5f..2910c061 100644
--- a/src/features/kanban/ui/index.ts
+++ b/src/features/kanban/ui/index.ts
@@ -1,8 +1,10 @@
 import DragCards from './DragCards.vue';
 import DragColumns from './DragColumns.vue';
-import SettingsSheet from './SettingsSheet.vue';
 import FilterTasks from './FilterTasks.vue';
 import { AddColumn } from './add-column';
 import RemoveBoard from './RemoveBoard.vue';
+import ChangeName from './ChangeName.vue';
+import ChooseStatus from './ChooseStatus.vue';
+import UpdateBoard from './UpdateBoard.vue';
 
-export { AddColumn, DragCards, DragColumns, FilterTasks, SettingsSheet, RemoveBoard };
+export { AddColumn, DragCards, DragColumns, FilterTasks, RemoveBoard, ChangeName, ChooseStatus, UpdateBoard };
diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
index 1df6b11b..fca86a0a 100644
--- a/src/shared/lib/i18n/locales/en-US.ts
+++ b/src/shared/lib/i18n/locales/en-US.ts
@@ -172,6 +172,7 @@ export default {
       title: 'Configure your board',
       description: 'Customize the board for your convenience',
       name: 'Here the name and the color indicator of your project',
+      users: 'Participants',
       status: 'Select the status of your project',
       clear: 'Clear the board',
       update: 'Apply changes'
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
index 29fe59aa..85ddcc12 100644
--- a/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -177,6 +177,7 @@ export default {
       title: 'Настройте свою доску',
       description: 'Настройте доску для вашего удобства',
       name: 'Название и цветовой индикатор вашего проекта',
+      users: 'Участники',
       status: 'Выберите статус вашего проекта',
       clear: 'Очистить доску',
       update: 'Применить изменения'
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
index 0e626778..51c675ce 100644
--- a/src/shared/lib/i18n/locales/zh-CN.ts
+++ b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -171,6 +171,7 @@ export default {
       title: '配置您的看板',
       description: '自定义您的看板以方便使用',
       name: '项目的名称和颜色指示器"',
+      users: '參與者',
       status: '选择您的项目状态',
       clear: '清空看板',
       update: '应用更改'
diff --git a/src/widgets/kanban/ui/InfoPart.vue b/src/widgets/kanban/ui/InfoPart.vue
index 319e88e9..38bbeb7b 100644
--- a/src/widgets/kanban/ui/InfoPart.vue
+++ b/src/widgets/kanban/ui/InfoPart.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { SettingsSheet, FilterTasks, RemoveBoard } from '@/features/kanban';
+import { FilterTasks, RemoveBoard } from '@/features/kanban';
 import { UserAvatar } from '@/entities/user';
 import type { Board } from '@/entities/board';
 import { UiBadge, UiButton } from '@/shared/ui';
 import { Users } from 'lucide-vue-next';
 import { toast } from 'vue-sonner';
+import ProjectSettings from './ProjectSettings.vue';
 
 const props = defineProps<{
   board: Board;
@@ -59,7 +60,7 @@ const toggleVisible = () => {
     <div :class="$style.right_container">
       <FilterTasks />
       <div :class="$style.line" />
-      <SettingsSheet />
+      <ProjectSettings />
       <RemoveBoard />
     </div>
   </div>
diff --git a/src/widgets/kanban/ui/ProjectSettings.vue b/src/widgets/kanban/ui/ProjectSettings.vue
new file mode 100644
index 00000000..40999d2f
--- /dev/null
+++ b/src/widgets/kanban/ui/ProjectSettings.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, shallowReactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { UiButton, UiSheet } from '@/shared/ui';
+import type { SheetElement } from '@/shared/ui';
+import { Settings2 } from 'lucide-vue-next';
+import { UserAvatar } from '@/entities/user';
+import type { StatusBadge } from '@/entities/board';
+import { ChangeName, ChooseStatus, UpdateBoard } from '@/features/kanban';
+
+const sheet = ref<SheetElement | null>(null);
+
+const open = () => {
+  if (sheet.value) {
+    sheet.value.open();
+  }
+};
+
+const { t } = useI18n();
+
+// mock data -> after data from backend
+const name = ref('Startup');
+const projColor = ref('#b156db');
+const projStatus = ref<StatusBadge['status']>('archive');
+
+const colors = ['#ffd45e', '#45ad2d', '#3b54c4', '#b156db', '#a6a2a3', '#ff7a97', '#a1612a'] as const;
+const statuses = shallowReactive<StatusBadge[]>([
+  { _id: '0', indicator: '#acb1c2', status: 'not active' },
+  { _id: '1', indicator: '#359f39', status: 'work' },
+  { _id: '2', indicator: '#fde50c', status: 'archive' },
+  { _id: '3', indicator: '#d01f1f', status: 'closed' }
+]);
+
+const updateStatus = (status: StatusBadge['status']) => {
+  projStatus.value = status;
+  console.log(status);
+};
+</script>
+
+<template>
+  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.settings" @click="open">
+    <Settings2 :size="16" />
+  </UiButton>
+  <UiSheet ref="sheet">
+    <template #header>
+      <p class="text-lg" style="font-weight: 500">{{ t('kanban.configuration.title') }}</p>
+      <span :class="[$style.desc, 'text-sm']">
+        {{ t('kanban.configuration.description') }}
+      </span>
+    </template>
+    <template #default>
+      <ChangeName v-model="name" :name :colors :proj-color @update-color="projColor = $event" />
+      <div :class="$style.users">
+        <p class="text-base">{{ t('kanban.configuration.users') }}:</p>
+        <UserAvatar style="width: 24px; height: 24px">
+          <img style="width: 100%" src="https://avatars.githubusercontent.com/u/121057011?v=4" />
+        </UserAvatar>
+      </div>
+      <ChooseStatus :statuses :proj-status @update-status="updateStatus($event)" />
+      <UpdateBoard />
+    </template>
+  </UiSheet>
+</template>
+
+<style module lang="scss">
+.settings {
+  height: 30px;
+  gap: 8px;
+
+  & > svg {
+    color: var(--zinc-500);
+  }
+}
+
+.users {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 25px;
+  & > p {
+    color: var(--zinc-600);
+  }
+}
+
+:global(html.dark) {
+  .settings {
+    background-color: transparent;
+    &:hover {
+      background-color: transparent;
+      border-color: var(--zinc-500);
+    }
+    & > svg {
+      color: var(--zinc-300);
+    }
+  }
+  .users {
+    & > p {
+      color: var(--zinc-200);
+    }
+  }
+}
+</style>