diff --git a/bin/server b/bin/server
index 435c020..dfcd1bf 100755
Binary files a/bin/server and b/bin/server differ
diff --git a/internal/repository/status/status.go b/internal/repository/status/status.go
index a18630c..226d27c 100644
--- a/internal/repository/status/status.go
+++ b/internal/repository/status/status.go
@@ -28,7 +28,7 @@ func NewRepository(client database.Client) Repository {
 }
 
 func (r *repository) Find(ctx context.Context) ([]*status.Status, error) {
-	query := "select id, name, description, position from statuses order by id asc"
+	query := "select id, name, description, position from statuses order by position asc"
 
 	rows, err := r.client.Query(ctx, query)
 	if err != nil {
diff --git a/web/bun.lock b/web/bun.lock
index 97d6c40..6a80736 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -11,7 +11,7 @@
         "vue": "^3.5.13",
         "vue-draggable-next": "^2.2.1",
         "vue-router": "^4.5.0",
-        "vuetify": "^3.7.16",
+        "vuetify": "^3.8.2",
       },
       "devDependencies": {
         "@mdi/font": "^7.4.47",
@@ -803,7 +803,7 @@
 
     "vue-tsc": ["vue-tsc@2.2.8", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.8" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ=="],
 
-    "vuetify": ["vuetify@3.7.16", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=1.0.0", "vue": "^3.3.0", "webpack-plugin-vuetify": ">=2.0.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-Few/cBtgJYgdkzi0LWmVy67G5uc2+q7oWcadbcTUPAtEtGYNh2AM28h01Fk+ScJgfxkA077//ZDff1rh3jYG/w=="],
+    "vuetify": ["vuetify@3.8.2", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=2.1.0", "vue": "^3.5.0", "webpack-plugin-vuetify": ">=3.1.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-UJNFP4egmKJTQ3V3MKOq+7vIUKO7/Fko5G6yUsOW2Rm0VNBvAjgO6VY6EnK3DTqEKN6ugVXDEPw37NQSTGLZvw=="],
 
     "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],
 
diff --git a/web/index.html b/web/index.html
index 9e5fc8f..46b049d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
     <title>Vite App</title>
   </head>
   <body>
diff --git a/web/package.json b/web/package.json
index 0539233..dfdbaec 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,7 +20,7 @@
     "vue": "^3.5.13",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.5.0",
-    "vuetify": "^3.7.16"
+    "vuetify": "^3.8.2"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
diff --git a/web/src/components/DynamicMenu.vue b/web/src/components/DynamicMenu.vue
new file mode 100644
index 0000000..836abc1
--- /dev/null
+++ b/web/src/components/DynamicMenu.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DynamicMenuElement } from '@/types.ts'
+
+const componentProps = defineProps<{
+  menu: DynamicMenuElement[]
+  itemId?: number
+  isHovering?: boolean | null
+}>()
+</script>
+
+<template>
+  <v-menu v-bind="componentProps" width="200">
+    <template v-slot:activator="{ props }">
+      <v-btn icon rounded :variant="componentProps.isHovering ? 'tonal' : 'text'" v-bind="props">
+        <v-icon icon="mdi-dots-horizontal"></v-icon>
+      </v-btn>
+    </template>
+
+    <v-list density="compact" class="mt-1">
+      <template v-for="el in componentProps.menu" :key="el.id">
+        <v-divider class="my-1" v-if="el.type === 'divider'"></v-divider>
+        <v-list-item
+          :disabled="el.disabled"
+          v-else
+          :color="el.color"
+          @click="el.click && el.click(componentProps.itemId)"
+        >
+          <v-list-item-title>
+            <v-icon class="mr-2" :color="el.color" :icon="el.icon"></v-icon>
+            <span>{{ el.title }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/FormInput.vue b/web/src/components/FormInput.vue
new file mode 100644
index 0000000..a78767b
--- /dev/null
+++ b/web/src/components/FormInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const value = defineModel('value')
+
+const props = defineProps<{
+  label?: string
+  required?: boolean
+  description?: string
+  width?: '0' | '25' | '50' | '100'
+}>()
+</script>
+
+<template>
+  <div>
+    <div v-if="props.label" class="d-flex align-end ga-2">
+      <div>
+        <span>{{ props.label }}</span>
+        <span v-if="props.required" class="text-error">*</span>
+      </div>
+      <span v-if="props.description" class="text-caption">{{ props.description }}</span>
+    </div>
+    <v-text-field
+      v-model:model-value="value"
+      :class="`w-${props.width ?? 100}`"
+      hide-details
+      :placeholder="props.label"
+    ></v-text-field>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/FormTextarea.vue b/web/src/components/FormTextarea.vue
new file mode 100644
index 0000000..676cca0
--- /dev/null
+++ b/web/src/components/FormTextarea.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const value = defineModel('value')
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    required?: boolean
+    description?: string
+    width?: '0' | '25' | '50' | '100'
+    rows?: number
+  }>(),
+  {
+    rows: 5,
+  },
+)
+</script>
+
+<template>
+  <div>
+    <div v-if="props.label" class="d-flex align-end ga-2">
+      <div>
+        <span>{{ props.label }}</span>
+        <span v-if="props.required" class="text-error">*</span>
+      </div>
+      <span v-if="props.description" class="text-caption">{{ props.description }}</span>
+    </div>
+    <v-textarea
+      v-model:model-value="value"
+      :class="`w-${props.width ?? 100}`"
+      hide-details
+      :rows="props.rows"
+      :placeholder="props.label"
+    ></v-textarea>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssueCreateForm.vue b/web/src/components/IssueCreateForm.vue
index 636c3eb..76ef00c 100644
--- a/web/src/components/IssueCreateForm.vue
+++ b/web/src/components/IssueCreateForm.vue
@@ -25,6 +25,13 @@ const disabled = computed(() => !issue.value.name)
 const addIssue = async () => {
   const result = await issuesStore.create(issue.value)
   showForm.value = !result
+  issue.value = {
+    name: undefined,
+    description: undefined,
+    status_id: props.status.id,
+    project_id: 1,
+    position: 0,
+  }
 }
 
 function onClickOutside() {
@@ -35,15 +42,26 @@ function onClickOutside() {
 <template>
   <v-list-item rounded :border="showForm">
     <v-list-item-title v-if="showForm" v-click-outside="onClickOutside">
-      <v-text-field hide-details placeholder="title" variant="plain" v-model:model-value="issue.name"></v-text-field>
+      <v-text-field
+        hide-details
+        placeholder="title"
+        variant="plain"
+        clearable
+        @keydown.enter="addIssue"
+        v-model:model-value="issue.name"
+      ></v-text-field>
       <v-row align="end">
         <v-col cols="auto">
           <v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select>
         </v-col>
         <v-spacer></v-spacer>
         <v-col cols="auto">
-          <v-btn variant="tonal" class="mr-1" :disabled @click="addIssue">ok</v-btn>
-          <v-btn variant="tonal" @click="showForm = false">cancel</v-btn>
+          <v-btn variant="tonal" icon rounded class="mr-1" :disabled @click="addIssue">
+            <v-icon icon="mdi-check"></v-icon>
+          </v-btn>
+          <v-btn variant="tonal" icon rounded @click="showForm = false">
+            <v-icon icon="mdi-cancel"></v-icon>
+          </v-btn>
         </v-col>
       </v-row>
     </v-list-item-title>
diff --git a/web/src/components/IssueItemDetails.vue b/web/src/components/IssueItemDetails.vue
new file mode 100644
index 0000000..c2e6fc4
--- /dev/null
+++ b/web/src/components/IssueItemDetails.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// const isActive = defineModel<boolean>('isActive', { required: false })
+import type { Issue } from '@/stores/issues.ts'
+import { computed } from 'vue'
+import StatusMenu from '@/components/StatusMenu.vue'
+
+const props = defineProps<{ selectedIssue: Issue }>()
+
+const emit = defineEmits<{
+  (e: 'onCancel'): void
+}>()
+
+const created = computed(() => {
+  return props.selectedIssue.created ? new Date(props.selectedIssue.created).toLocaleString('ru-RU') : undefined
+})
+
+const issueId = computed(() => {
+  return props.selectedIssue.project.key + '-' + props.selectedIssue.id
+})
+</script>
+
+<template>
+  <v-card max-width="900" min-width="700">
+    <template #append>
+      <div class="d-flex ga-2">
+        <v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-dots-horizontal"></v-btn>
+        <v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-close"></v-btn>
+      </div>
+    </template>
+    <template #title>
+      <div class="text-body-1">{{ issueId }}</div>
+    </template>
+    <v-card-text>
+      <v-row>
+        <v-col class="d-flex flex-column ga-2">
+          <div class="text-h5">{{ props.selectedIssue.name }}</div>
+          <div>
+            <div>description</div>
+            <div>{{ props.selectedIssue.description ?? 'add description' }}</div>
+          </div>
+          <div>
+            <v-textarea rows="3"></v-textarea>
+            <v-btn variant="flat" color="primary">save</v-btn>
+            <v-btn variant="text">cancel</v-btn>
+          </div>
+        </v-col>
+
+        <v-col cols="5" class="d-flex flex-column ga-2 align-start">
+          <status-menu class="" :status="props.selectedIssue.status"></status-menu>
+          <v-sheet class="pa-4 w-100">
+            <div>
+              assignee:
+              <v-avatar size="x-small" text="M" color="success"></v-avatar>
+            </div>
+          </v-sheet>
+          <div class="text-caption">created: {{ created }}</div>
+          <!--          <div>{{ props.selectedIssue.project }}</div>-->
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssueListItem.vue b/web/src/components/IssueListItem.vue
index f4410a9..d2ff99c 100644
--- a/web/src/components/IssueListItem.vue
+++ b/web/src/components/IssueListItem.vue
@@ -1,36 +1,41 @@
 <script setup lang="ts">
 import { type Issue, useIssuesStore } from '@/stores/issues.ts'
+import { useStatusesStore } from '@/stores/statuses.ts'
+import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 
 const props = defineProps<{ issue: Issue }>()
+const router = useRouter()
 
 const issuesStore = useIssuesStore()
+const statusesStore = useStatusesStore()
 
-const menu = [
-  {
-    id: 1,
-    title: 'delete',
-    icon: 'mdi-trash-can',
-  },
-]
+const projectKey = computed(() => props.issue.project.key)
 
-async function onDelete() {
-  await issuesStore.remove(props.issue.id)
+const onDelete = async (id: number) => await issuesStore.remove(id)
+
+function onStatusChange(statusId: number) {
+  console.log('on change status', statusId)
+}
+function onClick(id: number) {
+  console.log('on click', id)
+  router.push({ name: 'issues', query: { selectedIssue: `${projectKey.value}-${id}` } })
 }
 </script>
 
 <template>
-  <v-list-item rounded border class="mb-1">
+  <v-list-item rounded border class="mb-1 pl-2" @click="onClick(props.issue.id)">
     <template v-slot:prepend>
-      <v-icon class="handle move" icon="mdi-drag" />
+      <v-icon class="handle cursor-move" icon="mdi-drag" />
     </template>
     <v-list-item-subtitle>
-      <div>{{ props.issue.description }}</div>
+      <div class="text-caption">{{ props.issue.description }}</div>
     </v-list-item-subtitle>
     <v-list-item-title>
       <div class="d-flex ga-2 align-center">
         <!--        <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>-->
-        <v-chip :text="issue.id" variant="tonal" size="small" label />
-        <div class="text-body-1">{{ props.issue.name }}</div>
+        <!--        <v-chip :text="issue.id" variant="tonal" size="small" label />-->
+        <div class="text-body-2 text-wrap">{{ props.issue.name }}</div>
       </div>
     </v-list-item-title>
 
@@ -39,18 +44,34 @@ async function onDelete() {
         <v-avatar color="primary" size="28" />
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-btn size="small" icon="mdi-menu" variant="plain" v-bind="props" />
+            <v-btn icon rounded variant="text" v-bind="props">
+              <v-icon size="small">mdi-menu</v-icon>
+            </v-btn>
           </template>
 
           <v-list density="compact" class="mt-1">
-            <v-list-item v-for="item in menu" :key="item.id" :value="item.title" @click="onDelete">
+            <v-list-item link>
               <v-list-item-title>
                 <div class="d-flex ga-2 align-center">
-                  <v-icon size="small" :icon="item.icon"></v-icon>
-                  {{ item.title }}
+                  <div>Change status</div>
+                  <v-icon icon="mdi-menu-right"></v-icon>
                 </div>
               </v-list-item-title>
+              <v-menu v-if="statusesStore.statuses" :open-on-focus="false" activator="parent" open-on-hover submenu>
+                <v-list>
+                  <v-list-item
+                    v-for="status in statusesStore.statuses"
+                    :key="status.id"
+                    link
+                    @click="onStatusChange(status.id)"
+                    :title="status.name"
+                  >
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </v-list-item>
+            <v-divider class="my-1"></v-divider>
+            <v-list-item link @click="onDelete(props.issue.id)" title="Delete"></v-list-item>
           </v-list>
         </v-menu>
       </v-list-item-action>
@@ -58,8 +79,4 @@ async function onDelete() {
   </v-list-item>
 </template>
 
-<style scoped lang="scss">
-.move {
-  cursor: move;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssuesByStatusList.vue b/web/src/components/IssuesByStatusList.vue
index f55e866..b0715e7 100644
--- a/web/src/components/IssuesByStatusList.vue
+++ b/web/src/components/IssuesByStatusList.vue
@@ -12,7 +12,7 @@ const issuesStore = useIssuesStore()
 
 const selectedId = ref<number>()
 
-const height = 400
+const height = 600
 
 async function onChange(val: {
   added: { element: Issue; newIndex: number }
@@ -37,20 +37,20 @@ function onChoose() {
 </script>
 
 <template>
-  <v-sheet rounded>
+  <v-sheet rounded elevation="1" width="18rem">
     <v-toolbar density="compact">
       <v-toolbar-title>
         <div class="d-flex align-center ga-2">
           <div class="text-uppercase text-body-2">{{ props.status.name }}</div>
-          <v-chip size="small" variant="tonal" :text="props.issues.length" class="mr-2" />
+          <v-chip variant="tonal" :text="props.issues.length" class="mr-2" />
         </div>
       </v-toolbar-title>
       <template #append>
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-chip label variant="text" v-bind="props">
+            <v-btn icon rounded density="compact" variant="text" v-bind="props">
               <v-icon icon="mdi-dots-horizontal"></v-icon>
-            </v-chip>
+            </v-btn>
           </template>
 
           <v-list density="compact" class="mt-1">
@@ -89,12 +89,4 @@ function onChoose() {
 .sortable-drag {
   background-color: rgb(var(--v-theme-background));
 }
-.animation {
-  animation: wave 0.5s linear;
-}
-@keyframes wave {
-  50% {
-    background-color: rgba(var(--v-theme-primary), 0.2);
-  }
-}
 </style>
diff --git a/web/src/components/ProjectCreateFlow.vue b/web/src/components/ProjectCreateFlow.vue
new file mode 100644
index 0000000..b24acef
--- /dev/null
+++ b/web/src/components/ProjectCreateFlow.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import FormInput from '@/components/FormInput.vue'
+import { ref } from 'vue'
+import FormTextarea from '@/components/FormTextarea.vue'
+import { useProjectsStore } from '@/stores/projects.ts'
+
+const dialog = defineModel('dialog')
+
+const projectsStore = useProjectsStore()
+
+const name = ref('')
+const description = ref('')
+const key = ref('')
+
+async function onSubmit() {
+  console.log(name.value)
+  await projectsStore.create({
+    name: name.value,
+    description: description.value,
+    key: key.value,
+  })
+}
+</script>
+
+<template>
+  <v-sheet border class="pa-4">
+    <div class="d-flex align-center ga-4 mb-4">
+      <v-btn variant="text" @click="dialog = false" icon="mdi-close"></v-btn>
+    </div>
+    <div class="mb-4">
+      <div class="text-h6">Project type</div>
+
+      <v-list lines="two">
+        <v-list-item border rounded @click="console.log('Kanban')">
+          <div class="d-flex ga-2">
+            <div class="d-flex align-center">
+              <v-icon size="64" color="primary">mdi-paper-roll-outline</v-icon>
+            </div>
+
+            <div>
+              <div class="text-h6">Kanban</div>
+              <div class="text-body-2">
+                Kanban is all about helping teams visualize their work, limit work currently in progress, and maximize
+                efficiency.
+              </div>
+            </div>
+          </div>
+        </v-list-item>
+      </v-list>
+    </div>
+    <div class="mb-4">
+      <div class="text-h6">Project details</div>
+      <div class="text-caption">
+        Required fields are marked with an asterisk <span class="text-error text-body-2">*</span>
+      </div>
+    </div>
+    <v-form class="d-flex flex-column ga-4" @submit.prevent="onSubmit">
+      <form-input v-model:value="name" label="Name" :required="true" />
+      <form-input v-model:value="key" label="Key" :required="true" description="prefix for your project" width="50" />
+      <form-textarea v-model:value="description" label="Description" :rows="2" />
+      <v-btn type="submit" class="align-self-start" variant="flat" density="comfortable" color="primary">create</v-btn>
+    </v-form>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/StatusMenu.vue b/web/src/components/StatusMenu.vue
new file mode 100644
index 0000000..60e19b9
--- /dev/null
+++ b/web/src/components/StatusMenu.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type Status, useStatusesStore } from '@/stores/statuses.ts'
+import { ref, watchEffect } from 'vue'
+
+const statusesStore = useStatusesStore()
+
+const props = defineProps<{ status?: Status }>()
+const selected = ref<Status>()
+
+watchEffect(() => props.status && setSelected(props.status))
+
+function setSelected(status: Status) {
+  selected.value = status
+}
+
+function onSelect(status: Status) {
+  console.log(status)
+  selected.value = status
+}
+</script>
+
+<template>
+  <v-menu width="200">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" color="primary">{{ selected?.name }} </v-btn>
+    </template>
+
+    <v-list density="compact" class="mt-1">
+      <template v-for="el in statusesStore.statuses" :key="el.id">
+        <v-list-item @click="onSelect(el)">
+          <v-list-item-title>
+            <span>{{ el.name }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/layouts/DefaultLayout.vue b/web/src/layouts/DefaultLayout.vue
index 73c5c1d..7897e06 100644
--- a/web/src/layouts/DefaultLayout.vue
+++ b/web/src/layouts/DefaultLayout.vue
@@ -1,24 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-const component = ref<string>('issues')
-
-const menu = ['stat', 'issues', 'projects', 'tests']
-
-function setComponent(value: string) {
-  component.value = value
-}
+const route = useRoute()
+const menu = [
+  { id: 1, title: 'Projects' },
+  // { id: 2, title: 'issues' },
+  // { id: 3, title: 'stat' },
+  // { id: 4, title: 'test' },
+]
 </script>
 
 <template>
   <v-layout>
-    <v-app-bar density="compact" elevation="1">
-      <v-app-bar-title>Application - component: {{ component }}</v-app-bar-title>
-      <v-btn v-for="(el, index) in menu" :key="index" @click="setComponent(el)">{{ el }}</v-btn>
+    <v-app-bar density="comfortable" elevation="1">
+      <template v-slot:prepend>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-app-bar-nav-icon variant="text" v-bind="props"></v-app-bar-nav-icon>
+          </template>
+          <v-list class="mt-1" width="200">
+            <v-list-item v-for="(item, index) in menu" :key="index" :to="`/${item.title}`">
+              <v-list-item-title class="d-flex align-center ga-4">
+                <v-avatar border size="24" rounded color="primary"> </v-avatar>
+                <div>{{ item.title }}</div>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+
+      <v-app-bar-title>Application</v-app-bar-title>
     </v-app-bar>
     <v-main>
       <v-container :fluid="true">
-        <slot name="default" :component="component"></slot>
+        <slot></slot>
       </v-container>
     </v-main>
   </v-layout>
diff --git a/web/src/main.ts b/web/src/main.ts
index 8c2a17a..ea45818 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -32,7 +32,7 @@ const vuetify = createVuetify({
     VRow: { dense: true },
     VSheet: { border: true, rounded: true },
     VList: { density: 'compact' },
-    VCard: { variant: 'outlined' },
+    // VCard: { variant: 'outlined' },
     VChip: { density: 'compact', variant: 'outlined', label: true },
     VNumberInput: { hideDetails: true, variant: 'outlined', density: 'compact' },
     VBtn: { variant: 'tonal', density: 'compact' },
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index b5d582b..bf758f4 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import TestRootView from '@/views/TestRootView.vue'
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -12,17 +11,25 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '',
+      redirect: '/projects',
+    },
+    {
+      path: '/projects',
       component: HomeView,
       children: [
+        { path: '', component: () => import('@/views/ProjectRootView.vue') },
         {
-          path: '/',
-          name: 'items',
-          component: TestRootView,
+          path: ':key/issues',
+          name: 'issues',
+          component: () => import('@/views/IssuesRootView.vue'),
+          props: (route) => ({ selectedIssue: route.query.selectedIssue }),
         },
       ],
     },
   ],
 })
 
+router.beforeResolve((to, from) => {})
+
 export default router
diff --git a/web/src/stores/components.ts b/web/src/stores/components.ts
deleted file mode 100644
index beb3cb6..0000000
--- a/web/src/stores/components.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-
-export const useComponentsStore = defineStore('components', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/web/src/stores/issues.ts b/web/src/stores/issues.ts
index 52beede..562b5eb 100644
--- a/web/src/stores/issues.ts
+++ b/web/src/stores/issues.ts
@@ -25,6 +25,7 @@ export interface PositionsDto {
 
 export const useIssuesStore = defineStore('issues', () => {
   const issues = ref<Issue[]>([])
+  const selectedIssue = ref<Issue>()
   const issuesObj = ref<Map<number, Issue[]>>(new Map())
   const { GET, POST, DELETE } = useFetch('/api/issues')
 
@@ -69,5 +70,12 @@ export const useIssuesStore = defineStore('issues', () => {
     }
   }
 
-  return { issues, issuesObj, findAll, create, genIssuesObj, updatePositions, remove }
+  async function findById(id: number) {
+    const response = await GET<Issue>({ param: id })
+    if (response?.data) {
+      selectedIssue.value = response.data
+    }
+  }
+
+  return { issues, issuesObj, selectedIssue, findAll, findById, create, genIssuesObj, updatePositions, remove }
 })
diff --git a/web/src/stores/projects.ts b/web/src/stores/projects.ts
index d61739a..c00aed4 100644
--- a/web/src/stores/projects.ts
+++ b/web/src/stores/projects.ts
@@ -9,7 +9,7 @@ export interface Project {
   key: string
 }
 
-export type CreateProjectDto = Partial<Pick<Project, 'name' | 'description'>>
+export type CreateProjectDto = Partial<Omit<Project, 'id'>>
 export type UpdateProjectDto = Partial<Pick<Project, 'id' | 'name' | 'description'>>
 
 export const useProjectsStore = defineStore('projects', () => {
@@ -27,8 +27,11 @@ export const useProjectsStore = defineStore('projects', () => {
     if (response?.data) project.value = response.data
   }
 
-  async function create({ name, description }: CreateProjectDto) {
-    const response = await POST<Project>({ body: { name, description } })
+  async function create({ name, description, key }: CreateProjectDto) {
+    if (!name || !key) {
+      throw new Error('Project name and key is required')
+    }
+    const response = await POST<Project>({ body: { name, description, key } })
     if (response?.data) projects.value.push(response.data)
   }
 
diff --git a/web/src/stores/server.ts b/web/src/stores/server.ts
new file mode 100644
index 0000000..2436442
--- /dev/null
+++ b/web/src/stores/server.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useServerStore = defineStore('server', () => {
+  const isOnline = ref(false)
+
+  function checkOnline() {
+    console.log('check online')
+  }
+
+  return { isOnline, checkOnline }
+})
diff --git a/web/src/types.ts b/web/src/types.ts
new file mode 100644
index 0000000..a50b921
--- /dev/null
+++ b/web/src/types.ts
@@ -0,0 +1,28 @@
+export interface DynamicMenuElement {
+  id: number
+  title?: string
+  icon?: string
+  color?: string
+  type?: 'divider'
+  disabled?: boolean
+  click?: (val?: number) => void
+}
+
+export interface IssueMenu {
+  id: number
+  name: string
+  click?: (id: number) => void
+  children?: { id: number; name: string; click?: (id: number) => void }[]
+}
+
+export interface TableHeader {
+  readonly key?: (string & {}) | 'data-table-group' | 'data-table-select' | 'data-table-expand' | undefined
+  readonly title?: string | undefined
+  readonly fixed?: boolean | undefined
+  readonly align?: 'start' | 'end' | 'center' | undefined
+  readonly width?: string | number | undefined
+  readonly minWidth?: string | number | undefined
+  readonly maxWidth?: string | number | undefined
+  readonly nowrap?: boolean | undefined
+  readonly sortable?: boolean | undefined
+}
diff --git a/web/src/views/ExampleRootView.vue b/web/src/views/ExampleRootView.vue
new file mode 100644
index 0000000..540f64b
--- /dev/null
+++ b/web/src/views/ExampleRootView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Foo Bar</div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/HelloWorld.ts b/web/src/views/HelloWorld.ts
deleted file mode 100644
index 7e63ac3..0000000
--- a/web/src/views/HelloWorld.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const count = ref(0)
-    function click() {
-      count.value = count.value + 1
-    }
-    return {
-      count,
-      click,
-    }
-  },
-  template: `
-    <div class="d-flex ga-2 pa-2">
-    <div class="hello">COUNT: {{count}}</div>
-    <v-btn @click="click">click</v-btn>
-    </div>
-  `,
-}
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 13131eb..6337fd6 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { type Component, computed, onMounted, watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
-import TestRootView from '@/views/TestRootView.vue'
-import StatRootView from '@/views/StatRootView.vue'
-import HelloWorld from '@/views/HelloWorld.js'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
-import IssuesRootView from '@/views/IssuesRootView.vue'
-import ProjectRootView from '@/views/ProjectRootView.vue'
 import { useIssuesStore } from '@/stores/issues.ts'
 import { useStatusesStore } from '@/stores/statuses.ts'
 import { useProjectsStore } from '@/stores/projects.ts'
@@ -22,34 +16,17 @@ const layout = computed(() => {
   return layout ? `${layout}Layout` : 'DefaultLayout'
 })
 
-const components: { [key: string]: Component } = {
-  stat: StatRootView,
-  projects: ProjectRootView,
-  issues: IssuesRootView,
-  tests: TestRootView,
-}
-
 watchEffect(async () => await projectsStore.findAll())
 watchEffect(async () => await statusesStore.findAll())
 watchEffect(async () => await issuesStore.findAll())
-
-onMounted(async () => {
-  // await projectsStore.findById(122)
-})
 </script>
 
 <template>
-  <default-layout>
-    <template v-slot:default="{ component }">
-      <component :is="components[component]" />
-      <hello-world />
-    </template>
-  </default-layout>
-  <!--  <component :is="layout">-->
-  <!--    <router-view v-slot="{ Component, route }">-->
-  <!--      <div :key="route.name">-->
-  <!--        <component :is="Component" />-->
-  <!--      </div>-->
-  <!--    </router-view>-->
-  <!--  </component>-->
+  <component :is="layout">
+    <router-view v-slot="{ Component, route }">
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
+    </router-view>
+  </component>
 </template>
diff --git a/web/src/views/IssuesRootView.vue b/web/src/views/IssuesRootView.vue
index 45158f5..07f2ca4 100644
--- a/web/src/views/IssuesRootView.vue
+++ b/web/src/views/IssuesRootView.vue
@@ -1,43 +1,127 @@
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useIssuesStore } from '@/stores/issues.ts'
 import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
 import { useStatusesStore } from '@/stores/statuses.ts'
+import { useProjectsStore } from '@/stores/projects.ts'
+import type { DynamicMenuElement } from '@/types.ts'
+import DynamicMenu from '@/components/DynamicMenu.vue'
+import { useRouter } from 'vue-router'
+import IssueItemDetails from '@/components/IssueItemDetails.vue'
 
 const issuesStore = useIssuesStore()
 const statusesStore = useStatusesStore()
+const projectsStore = useProjectsStore()
+const router = useRouter()
+
 const statuses = computed(() => statusesStore.statuses)
 
-const cols = computed(() => (statuses.value.length > 0 ? 12 / statuses.value.length : 12))
+const props = defineProps<{ selectedIssue?: string }>()
 
 function getIssues(statusId: number) {
   return issuesStore.issuesObj.get(statusId) ?? []
 }
 
-function showLog() {
-  console.log('issue obj', issuesStore.issuesObj)
+const dialog = ref(false)
+
+const items = [
+  {
+    id: 1,
+    title: 'bla',
+  },
+]
+const projectMenu: DynamicMenuElement[] = [
+  {
+    id: 1,
+    title: 'Add people',
+    icon: 'mdi-account',
+    disabled: true,
+    click: projectSettings,
+  },
+  {
+    id: 2,
+    title: 'Settings',
+    icon: 'mdi-cog',
+    click: projectSettings,
+  },
+  { id: 3, type: 'divider' },
+  {
+    id: 4,
+    title: 'Delete',
+    icon: 'mdi-trash-can',
+    color: 'error',
+    click: deleteProject,
+  },
+]
+
+async function findById(val?: string) {
+  if (!val) return
+
+  const id = +val.split('-')[1]
+  await issuesStore.findById(id)
+  if (issuesStore.selectedIssue) dialog.value = true
 }
 
-watchEffect(() => {
-  issuesStore.genIssuesObj(statuses.value)
-})
+function deleteProject() {
+  console.log('blat')
+}
+
+function projectSettings() {
+  console.log('blat2')
+}
+
+function onCancel() {
+  router.push({ name: 'issues' })
+  dialog.value = false
+}
+
+watchEffect(async () => await findById(props.selectedIssue))
+watchEffect(() => issuesStore.genIssuesObj(statuses.value))
 </script>
 
 <template>
   <div>
     <v-row>
-      <v-col cols="3" align="center">
-        <v-text-field hide-details label="search" prepend-inner-icon="mdi-magnify" />
-      </v-col>
-      <v-col>
-        <v-btn icon="mdi-circle" size="default" density="comfortable" @click="showLog"></v-btn>
+      <v-col cols="auto">
+        <router-link to="/projects" class="text-black text-decoration-underline text-body-1 cursor-pointer">
+          Projects
+        </router-link>
       </v-col>
     </v-row>
-    <v-row v-if="statuses.length">
-      <v-col :cols="cols" v-for="status in statuses" :key="status.id">
+    <v-row>
+      <v-col cols="auto">
+        <v-hover v-slot="{ isHovering, props }">
+          <div v-bind="props" class="d-flex ga-2 align-center mb-4">
+            <v-avatar size="28" color="primary" border rounded></v-avatar>
+            <div class="text-h5 text-capitalize">{{ projectsStore.projects[0]?.name }}</div>
+            <dynamic-menu v-bind="props" :isHovering="isHovering" :menu="projectMenu"></dynamic-menu>
+          </div>
+        </v-hover>
+      </v-col>
+    </v-row>
+    <div class="d-flex ga-2 mb-4">
+      <v-text-field max-width="15rem" hide-details label="search" prepend-inner-icon="mdi-magnify" />
+      <v-select max-width="10rem" hide-details :items></v-select>
+      <v-btn class="mx-2" icon>
+        <v-avatar icon="mdi-account-outline" color="grey-lighten-4"></v-avatar>
+      </v-btn>
+    </div>
+    <div v-if="statuses.length" class="d-flex ga-2 my-2 overflow-x-auto">
+      <div v-for="status in statuses" :key="status.id">
         <issues-by-status-view :status="status" :issues="getIssues(status.id)" />
-      </v-col>
-    </v-row>
+      </div>
+      <v-btn variant="tonal" icon rounded size="small" density="default">
+        <v-icon size="default">mdi-plus</v-icon>
+      </v-btn>
+    </div>
+
+    <v-dialog v-model="dialog" width="auto" @after-leave="onCancel">
+      <issue-item-details
+        v-if="issuesStore.selectedIssue"
+        @on-cancel="onCancel"
+        :selected-issue="issuesStore.selectedIssue"
+      />
+    </v-dialog>
   </div>
 </template>
 
diff --git a/web/src/views/ProjectRootView.vue b/web/src/views/ProjectRootView.vue
index 1817adb..a35dd30 100644
--- a/web/src/views/ProjectRootView.vue
+++ b/web/src/views/ProjectRootView.vue
@@ -1,19 +1,92 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useProjectsStore } from '@/stores/projects.ts'
 import { storeToRefs } from 'pinia'
+import DynamicMenu from '@/components/DynamicMenu.vue'
+import type { DynamicMenuElement, TableHeader } from '@/types.ts'
+import ProjectCreateFlow from '@/components/ProjectCreateFlow.vue'
 
 const projectsStore = useProjectsStore()
 const { projects } = storeToRefs(projectsStore)
 
+const headers: TableHeader[] = [
+  { title: 'Name', key: 'name', width: 400 },
+  { title: 'Key', key: 'key' },
+  { title: 'Actions', key: 'actions', width: 100, align: 'end', sortable: false },
+]
+
+const menu: DynamicMenuElement[] = [
+  {
+    id: 1,
+    title: 'settings',
+    icon: 'mdi-cog',
+    click: projectSettings,
+  },
+  {
+    id: 2,
+    type: 'divider',
+  },
+  {
+    id: 3,
+    title: 'delete',
+    icon: 'mdi-trash-can',
+    color: 'error',
+    click: deleteProject,
+  },
+]
+
+const dialog = ref(false)
+
+function projectSettings(id?: number) {
+  console.log('d', id)
+}
+
+async function deleteProject(id?: number) {
+  console.log('p', id)
+  if (id) await projectsStore.remove(id)
+}
+
 onMounted(async () => {})
 </script>
 
 <template>
   <div>
-    <div v-for="project in projects" :key="project.id">
-      {{ project.name }} - {{ project.description }} - {{ project.key }}
+    <div class="d-flex align-center justify-space-between mb-4">
+      <div class="text-h5 font-weight-bold">Projects</div>
+
+      <v-dialog transition="dialog-bottom-transition" max-width="500" v-model="dialog">
+        <template v-slot:activator="{ props: activatorProps }">
+          <v-btn v-bind="activatorProps" density="comfortable" variant="flat" color="primary">
+            <span class="text-body-2">Create project</span>
+          </v-btn>
+        </template>
+        <project-create-flow v-model:dialog="dialog"></project-create-flow>
+      </v-dialog>
     </div>
+    <div class="d-flex ga-4 w-100 w-md-25">
+      <v-text-field :disabled="true" prepend-inner-icon="mdi-magnify" placeholder="search projects"></v-text-field>
+    </div>
+    <v-data-table :headers hover hide-default-footer class="border rounded" density="compact" :items="projects">
+      <template #[`item.name`]="{ item }">
+        <div class="d-flex ga-2">
+          <v-avatar color="primary" border rounded size="25"></v-avatar>
+          <v-hover v-slot="{ isHovering, props }">
+            <router-link
+              v-bind="props"
+              class="text-primary text-body-1"
+              :class="{ 'text-decoration-none': !isHovering }"
+              :to="`/projects/${item.key}/issues`"
+            >
+              {{ item.name }}
+            </router-link>
+          </v-hover>
+        </div>
+      </template>
+      <template #[`item.actions`]="{ item }">
+        <span>{{ item.id }}</span>
+        <dynamic-menu :menu :item-id="item.id"></dynamic-menu>
+      </template>
+    </v-data-table>
   </div>
 </template>
 
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 5a75915..e6c21fa 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/api': 'http://localhost:3000',
     },
