diff --git a/src/api/_actions/index.ts b/src/api/_actions/index.ts
deleted file mode 100644
index 3a2c4f5..0000000
--- a/src/api/_actions/index.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// import {
-//   get as getTemplate,
-//   create as createTemplate,
-//   update as updateTemplate,
-//   deleteTemplate
-// } from './template'
-// import { getByUser as getTemplatesByUser, deleteTemplates } from './templates'
-// import {
-//   get as getProject,
-//   create as createProject,
-//   update as updateProject,
-//   deleteProject
-// } from './project'
-// import { getByUser as getProjectsByUser, deleteProjects } from './projects'
-//
-// export const actions = {
-//   template: {
-//     get: {
-//       byId: getTemplate
-//     },
-//     add: createTemplate,
-//     update: updateTemplate,
-//     delete: deleteTemplate
-//   },
-//   templates: {
-//     get: {
-//       byUser: getTemplatesByUser
-//     },
-//     delete: deleteTemplates
-//   },
-//   project: {
-//     get: {
-//       byId: getProject
-//     },
-//     add: createProject,
-//     update: updateProject,
-//     delete: deleteProject
-//   },
-//   projects: {
-//     get: {
-//       byUser: getProjectsByUser
-//     },
-//     delete: deleteProjects
-//   }
-// }
diff --git a/src/api/_actions/middleware.ts b/src/api/_actions/middleware.ts
deleted file mode 100644
index efd5e96..0000000
--- a/src/api/_actions/middleware.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// 'use server'
-// import { cookies } from 'next/headers'
-//
-// export async function getToken() {
-//   const cookieStore = await cookies()
-//   const token = cookieStore.get('token')?.value
-//   return token
-// }
-//
-// export const executor = async <Req, Res>(
-//   callbackPath: string,
-//   callback: (args: Req) => Res,
-//   args: Req
-// ): Promise<Res | undefined> => {
-//   try {
-//     console.debug(`Entered ${callbackPath}`)
-//     return await callback.call(undefined, args)
-//   } catch (error) {
-//     console.error(error)
-//     throw error
-//   }
-// }
diff --git a/src/api/_actions/project/create.ts b/src/api/_actions/project/create.ts
deleted file mode 100644
index a30760e..0000000
--- a/src/api/_actions/project/create.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// 'use server'
-// import { Project, Template } from 'api/core/collections'
-// import { ProjectManager, TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-// import { getMaterials } from 'api/utils'
-//
-// type Req = {
-//   templateId: Template['id']
-// }
-// type Res = Promise<Project[]>
-//
-// async function handler({ templateId }: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const template = await templates.getById(templateId)
-//   const { title, type } = template
-//
-//   const schema = template.schema.map(row =>
-//     row.map(color => ({ color, isBeaded: false }))
-//   )
-//   const materials = getMaterials(schema)
-//
-//   const projects = new ProjectManager(token)
-//   const userProjects = await projects.addProject({
-//     title,
-//     type,
-//     schema,
-//     materials
-//   })
-//   if (!userProjects) throw new Error(`Projects not found`)
-//
-//   return userProjects
-// }
-//
-// export async function create(args: Req) {
-//   return await executor<Req, Res>('actions/project/create', handler, args)
-// }
diff --git a/src/api/_actions/project/delete.ts b/src/api/_actions/project/delete.ts
deleted file mode 100644
index bedbb30..0000000
--- a/src/api/_actions/project/delete.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Project } from 'api/core/collections'
-// import { ProjectManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   id: Project['id']
-// }
-// type Res = Promise<Project[]>
-//
-// async function handler({ id }: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const projects = new ProjectManager(token)
-//
-//   const userProjects = projects.deleteProject(id)
-//   if (!userProjects) throw new Error(`Projects not found`)
-//
-//   return userProjects
-// }
-//
-// export async function deleteProject(args: Req) {
-//   return await executor<Req, Res>('actions/project/delete', handler, args)
-// }
diff --git a/src/api/_actions/project/get.ts b/src/api/_actions/project/get.ts
deleted file mode 100644
index 50fc7c0..0000000
--- a/src/api/_actions/project/get.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Project } from 'api/core/collections'
-// import { ProjectManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   id: Project['id']
-// }
-// type Res = Promise<Project | null>
-//
-// async function handler({ id }: Req) {
-//   const token = await getToken()
-//   if (!token) return null
-//   const projects = new ProjectManager(token)
-//
-//   const project = projects.getById(id)
-//   if (!project) throw new Error(`Project with id ${id} not found`)
-//
-//   return project
-// }
-//
-// export async function get(args: Req) {
-//   return await executor<Req, Res>('actions/project/get', handler, args)
-// }
diff --git a/src/api/_actions/project/index.ts b/src/api/_actions/project/index.ts
deleted file mode 100644
index bf05799..0000000
--- a/src/api/_actions/project/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// export { create } from './create'
-// export { deleteProject } from './delete'
-// export { get } from './get'
-// export { update } from './update'
diff --git a/src/api/_actions/project/update.ts b/src/api/_actions/project/update.ts
deleted file mode 100644
index 6d3ce55..0000000
--- a/src/api/_actions/project/update.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 'use server'
-// import { Project } from 'api/core/collections'
-// import { ProjectManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-// import { getProgress } from 'api/utils'
-//
-// type Req = Omit<Project, 'owner' | 'materials' | 'progress'>
-// type Res = Promise<Project[]>
-//
-// async function handler(data: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const projects = new ProjectManager(token)
-//
-//   const progress = getProgress(data.schema)
-//
-//   const userProjects = projects.updateProject({ progress, ...data })
-//   if (!userProjects) throw new Error(`Projects not found`)
-//
-//   return userProjects
-// }
-//
-// export async function update(args: Req) {
-//   return await executor<Req, Res>('actions/project/update', handler, args)
-// }
diff --git a/src/api/_actions/projects/delete.ts b/src/api/_actions/projects/delete.ts
deleted file mode 100644
index ab407ff..0000000
--- a/src/api/_actions/projects/delete.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Project } from 'api/core/collections'
-// import { ProjectManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   idList: Project['id'][]
-// }
-// type Res = Promise<Project[]>
-//
-// async function handler({ idList }: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const projects = new ProjectManager(token)
-//
-//   const userProjects = projects.deleteProjects(idList)
-//   if (!userProjects) throw new Error(`Projects not found`)
-//
-//   return userProjects
-// }
-//
-// export async function deleteProjects(args: Req) {
-//   return await executor<Req, Res>('actions/projects/delete', handler, args)
-// }
diff --git a/src/api/_actions/projects/get/by-user.ts b/src/api/_actions/projects/get/by-user.ts
deleted file mode 100644
index a89e6be..0000000
--- a/src/api/_actions/projects/get/by-user.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// 'use server'
-// import { Project } from 'api/core/collections'
-// import { ProjectManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = void
-// type Res = Promise<Project[]>
-//
-// async function handler() {
-//   const token = await getToken()
-//   if (!token) return []
-//   const projects = new ProjectManager(token)
-//
-//   const userProjects = projects.getUserProjects()
-//   if (!userProjects) throw new Error(`Projects not found`)
-//
-//   return userProjects
-// }
-//
-// export async function getByUser(args: Req) {
-//   return await executor<Req, Res>('actions/projects/get/by-user', handler, args)
-// }
diff --git a/src/api/_actions/projects/index.ts b/src/api/_actions/projects/index.ts
deleted file mode 100644
index 76e765e..0000000
--- a/src/api/_actions/projects/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// export { getByUser } from './get/by-user'
-// export { deleteProjects } from './delete'
diff --git a/src/api/_actions/template/create.ts b/src/api/_actions/template/create.ts
deleted file mode 100644
index 8fd78ac..0000000
--- a/src/api/_actions/template/create.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   title: Template['title']
-//   type: Template['type']
-//   schema: Template['schema']
-// }
-// type Res = Promise<Template[]>
-//
-// async function handler(args: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const userTemplates = templates.addTemplate(args)
-//   if (!userTemplates) throw new Error(`Templates not found`)
-//
-//   return userTemplates
-// }
-//
-// export async function create(args: Req) {
-//   return await executor<Req, Res>('actions/template/create', handler, args)
-// }
diff --git a/src/api/_actions/template/delete.ts b/src/api/_actions/template/delete.ts
deleted file mode 100644
index 214b18c..0000000
--- a/src/api/_actions/template/delete.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   id: Template['id']
-// }
-// type Res = Promise<Template[]>
-//
-// async function handler({ id }: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const userTemplates = templates.deleteTemplate(id)
-//   if (!userTemplates) throw new Error(`Templates not found`)
-//
-//   return userTemplates
-// }
-//
-// export async function deleteTemplate(args: Req) {
-//   return await executor<Req, Res>('actions/template/delete', handler, args)
-// }
diff --git a/src/api/_actions/template/get.ts b/src/api/_actions/template/get.ts
deleted file mode 100644
index 3f7abc3..0000000
--- a/src/api/_actions/template/get.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   id: Template['id']
-// }
-// type Res = Promise<Template | null>
-//
-// async function handler({ id }: Req) {
-//   const token = await getToken()
-//   if (!token) return null
-//   const templates = new TemplateManager(token)
-//
-//   const template = templates.getById(id)
-//   if (!template) throw new Error(`Template with id ${id} not found`)
-//
-//   return template
-// }
-//
-// export async function get(args: Req) {
-//   return await executor<Req, Res>('actions/template/get', handler, args)
-// }
diff --git a/src/api/_actions/template/index.ts b/src/api/_actions/template/index.ts
deleted file mode 100644
index ce909f6..0000000
--- a/src/api/_actions/template/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// export { create } from './create'
-// export { deleteTemplate } from './delete'
-// export { get } from './get'
-// export { update } from './update'
diff --git a/src/api/_actions/template/update.ts b/src/api/_actions/template/update.ts
deleted file mode 100644
index 35f1f52..0000000
--- a/src/api/_actions/template/update.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   id: Template['id']
-//   title: Template['title']
-//   type: Template['type']
-//   schema: Template['schema']
-// }
-// type Res = Promise<Template[]>
-//
-// async function handler(args: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const userTemplates = templates.updateTemplate(args)
-//   if (!userTemplates) throw new Error(`Templates not found`)
-//
-//   return userTemplates
-// }
-//
-// export async function update(args: Req) {
-//   return await executor<Req, Res>('actions/template/update', handler, args)
-// }
diff --git a/src/api/_actions/templates/delete.ts b/src/api/_actions/templates/delete.ts
deleted file mode 100644
index d7e017a..0000000
--- a/src/api/_actions/templates/delete.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor, getToken } from 'middleware'
-//
-// type Req = {
-//   idList: Template['id'][]
-// }
-// type Res = Promise<Template[]>
-//
-// async function handler({ idList }: Req) {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const userTemplates = templates.deleteTemplates(idList)
-//   if (!userTemplates) throw new Error(`Templates not found`)
-//
-//   return userTemplates
-// }
-//
-// export async function deleteTemplates(args: Req) {
-//   return await executor<Req, Res>('actions/templates/delete', handler, args)
-// }
diff --git a/src/api/_actions/templates/get/by-user.ts b/src/api/_actions/templates/get/by-user.ts
deleted file mode 100644
index 931ad29..0000000
--- a/src/api/_actions/templates/get/by-user.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// 'use server'
-// import { Template } from 'api/core/collections'
-// import { TemplateManager } from 'api/_core/managers'
-// import { executor } from 'middleware'
-//
-// type Req = void
-// type Res = Promise<Template[]>
-//
-// async function handler() {
-//   const token = await getToken()
-//   if (!token) return []
-//   const templates = new TemplateManager(token)
-//
-//   const userTemplates = templates.getUserTemplates()
-//   if (!userTemplates) throw new Error(`Templates not found`)
-//
-//   return userTemplates
-// }
-//
-// export async function getByUser(args: Req) {
-//   return await executor<Req, Res>(
-//     'actions/templates/get/by-user',
-//     handler,
-//     args
-//   )
-// }
diff --git a/src/api/_actions/templates/index.ts b/src/api/_actions/templates/index.ts
deleted file mode 100644
index f9d122c..0000000
--- a/src/api/_actions/templates/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// export { getByUser } from './get/by-user'
-// export { deleteTemplates } from './delete'
diff --git a/src/api/_core/db.ts b/src/api/_core/db.ts
deleted file mode 100644
index 253b582..0000000
--- a/src/api/_core/db.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// import { Client, QueryOptions, Query } from 'fauna'
-//
-// export class Database {
-//   private readonly client: Client
-//
-//   constructor(token: string) {
-//     this.client = new Client({ secret: token })
-//   }
-//
-//   async query(query: Query, options?: QueryOptions) {
-//     return await this.client.query(query, options)
-//   }
-// }
diff --git a/src/api/_core/managers/index.ts b/src/api/_core/managers/index.ts
deleted file mode 100644
index 60bd133..0000000
--- a/src/api/_core/managers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// export { Manager } from './manager'
-// export { ProjectManager } from './project'
-// export { TemplateManager } from './template'
diff --git a/src/api/_core/managers/manager.ts b/src/api/_core/managers/manager.ts
deleted file mode 100644
index 8525968..0000000
--- a/src/api/_core/managers/manager.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// import { Database } from 'api/_core/db'
-//
-// export abstract class Manager {
-//   protected readonly db: Database
-//
-//   constructor(userToken: string) {
-//     this.db = new Database(userToken)
-//   }
-//
-//   toJSON(value: unknown) {
-//     return JSON.parse(JSON.stringify(value))
-//   }
-// }
diff --git a/src/api/_core/managers/project.ts b/src/api/_core/managers/project.ts
deleted file mode 100644
index c9c0fd4..0000000
--- a/src/api/_core/managers/project.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-// import { fql, QueryValue } from 'fauna'
-// import { Manager } from 'api/_core/managers'
-// import { Project } from 'api/core/collections'
-//
-// export class ProjectManager extends Manager {
-//   async getById(id: string): Promise<Project> {
-//     console.debug(`DB: Fetch project with id ${id}`)
-//
-//     const q = fql`Project.byId(${id}) { id, title, type, schema, materials, progress }`
-//     const res = await this.db.query(q)
-//
-//     return this.toJSON(res.data) as Project
-//   }
-//
-//   async getUserProjects(): Promise<Project[]> {
-//     console.debug(`DB: Fetch user projects`)
-//
-//     const q = fql`
-//       let user = Query.identity()
-//       Project.byOwner(user) { id, title, type, schema, materials, progress }
-//     `
-//     const res = await this.db.query(q)
-//
-//     return this.toJSON(res.data) as Project[]
-//   }
-//
-//   async addProject({
-//     title,
-//     type,
-//     schema: schemaPassed,
-//     materials: materialsPassed
-//   }: Omit<Project, 'id' | 'owner' | 'progress'>): Promise<Project[]> {
-//     console.debug(`DB: Create new project`)
-//
-//     const schema = schemaPassed as unknown as QueryValue
-//     const materials = materialsPassed as unknown as QueryValue
-//
-//     const q = fql`CreateProject(${title}, ${type}, ${schema}, ${materials})`
-//     await this.db.query(q)
-//
-//     return this.getUserProjects()
-//   }
-//
-//   async updateProject({
-//     id,
-//     title,
-//     type,
-//     schema: schemaPassed,
-//     progress
-//   }: Omit<Project, 'owner' | 'materials'>): Promise<Project[]> {
-//     console.debug(`DB: Update project with id ${id}`)
-//
-//     const schema = schemaPassed as unknown as QueryValue
-//
-//     const q = fql`UpdateProject(${id}, ${title}, ${type}, ${schema}, ${progress})`
-//     await this.db.query(q)
-//
-//     return this.getUserProjects()
-//   }
-//
-//   async deleteProject(id: Project['id']): Promise<Project[]> {
-//     console.debug(`DB: Delete project with id ${id}`)
-//
-//     const q = fql`DeleteProject(${id})`
-//     await this.db.query(q)
-//
-//     return this.getUserProjects()
-//   }
-//
-//   async deleteProjects(idList: Project['id'][]): Promise<Project[]> {
-//     console.debug(`DB: Delete projects with id ${JSON.stringify(idList)}`)
-//
-//     const q = fql`DeleteProjects(${idList})`
-//     await this.db.query(q)
-//
-//     return this.getUserProjects()
-//   }
-// }
diff --git a/src/api/_core/managers/template.ts b/src/api/_core/managers/template.ts
deleted file mode 100644
index 3f36e80..0000000
--- a/src/api/_core/managers/template.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-// import { fql } from 'fauna'
-// import { Manager } from 'api/_core/managers'
-// import { Template } from 'api/core/collections'
-//
-// export class TemplateManager extends Manager {
-//   async getById(id: string): Promise<Template> {
-//     console.debug(`DB: Fetch template with id ${id}`)
-//
-//     const q = fql`Template.byId(${id}) { id, title, type, schema }`
-//     const res = await this.db.query(q)
-//
-//     return this.toJSON(res.data) as Template
-//   }
-//
-//   async getUserTemplates(): Promise<Template[]> {
-//     console.debug(`DB: Fetch user templates`)
-//
-//     const q = fql`
-//       let user = Query.identity()
-//       Template.byOwner(user) { id, title, type, schema }
-//     `
-//     const res = await this.db.query(q)
-//
-//     return this.toJSON(res.data) as Template[]
-//   }
-//
-//   async addTemplate({
-//     title,
-//     type,
-//     schema
-//   }: Omit<Template, 'id' | 'owner'>): Promise<Template[]> {
-//     console.debug(`DB: Create new template`)
-//
-//     const q = fql`CreateTemplate(${title}, ${type}, ${schema})`
-//     await this.db.query(q)
-//
-//     return this.getUserTemplates()
-//   }
-//
-//   async updateTemplate({
-//     id,
-//     title,
-//     type,
-//     schema
-//   }: Omit<Template, 'owner'>): Promise<Template[]> {
-//     console.debug(`DB: Update template with id ${id}`)
-//
-//     const q = fql`UpdateTemplate(${id}, ${title}, ${type}, ${schema})`
-//     await this.db.query(q)
-//
-//     return this.getUserTemplates()
-//   }
-//
-//   async deleteTemplate(id: Template['id']): Promise<Template[]> {
-//     console.debug(`DB: Delete template with id ${id}`)
-//
-//     const q = fql`DeleteTemplate(${id})`
-//     await this.db.query(q)
-//
-//     return this.getUserTemplates()
-//   }
-//
-//   async deleteTemplates(idList: Template['id'][]): Promise<Template[]> {
-//     console.debug(`DB: Delete templates with id ${JSON.stringify(idList)}`)
-//
-//     const q = fql`DeleteTemplates(${idList})`
-//     await this.db.query(q)
-//
-//     return this.getUserTemplates()
-//   }
-// }
diff --git a/src/api/actions/index.ts b/src/api/actions/index.ts
index 345bfde..7deb35f 100644
--- a/src/api/actions/index.ts
+++ b/src/api/actions/index.ts
@@ -1,5 +1,7 @@
 import { templateActions } from './templates'
+import { projectActions } from './projects'
 
 export const actions = {
-  templates: templateActions
+  templates: templateActions,
+  projects: projectActions
 }
diff --git a/src/api/actions/projects/create.ts b/src/api/actions/projects/create.ts
new file mode 100644
index 0000000..7cf668e
--- /dev/null
+++ b/src/api/actions/projects/create.ts
@@ -0,0 +1,25 @@
+'use server'
+import { executor, getAuthUser } from 'middleware'
+import { CreateProjectArgs, ProjectManager } from 'core/managers/project'
+import { TemplateManager } from 'core/managers/template'
+import { Project, Template } from 'core/collections'
+
+type Req = {
+  templateId: Template['id']
+}
+type Res = Promise<Project | undefined>
+
+async function handler({ templateId }: Req): Res {
+  const user = await getAuthUser()
+
+  const templates = new TemplateManager(user)
+  const template = await templates.getById(templateId)
+  if (!template) return
+  // TODO move logic with materials & progress
+  const projects = new ProjectManager(user)
+  return await projects.createProject({ template })
+}
+
+export async function createProject(args: Req) {
+  return await executor<Req, Res>('actions/projects/create', handler, args)
+}
diff --git a/src/api/actions/projects/delete.ts b/src/api/actions/projects/delete.ts
new file mode 100644
index 0000000..b633dd0
--- /dev/null
+++ b/src/api/actions/projects/delete.ts
@@ -0,0 +1,16 @@
+'use server'
+import { executor, getAuthUser } from 'middleware'
+import { DeleteProjectArgs, ProjectManager } from 'core/managers/project'
+
+type Req = DeleteProjectArgs
+type Res = Promise<void>
+
+async function handler({ ids }: Req): Res {
+  const user = await getAuthUser()
+  const projects = new ProjectManager(user)
+  await projects.deleteProjects({ ids })
+}
+
+export async function deleteProjects(args: Req) {
+  return await executor<Req, Res>('actions/projects/delete', handler, args)
+}
diff --git a/src/api/actions/projects/get/by-id.ts b/src/api/actions/projects/get/by-id.ts
new file mode 100644
index 0000000..973e407
--- /dev/null
+++ b/src/api/actions/projects/get/by-id.ts
@@ -0,0 +1,19 @@
+'use server'
+import { executor, getAuthUser } from 'middleware'
+import { ProjectManager } from 'core/managers/project'
+import { Project } from 'core/collections'
+
+type Req = {
+  id: Project['id']
+}
+type Res = Promise<Project>
+
+async function handler({ id }: Req): Res {
+  const user = await getAuthUser()
+  const projects = new ProjectManager(user)
+  return await projects.getById(id)
+}
+
+export async function getProjectById(args: Req) {
+  return await executor<Req, Res>('actions/projects/get/by-id', handler, args)
+}
diff --git a/src/api/actions/projects/get/by-user.ts b/src/api/actions/projects/get/by-user.ts
new file mode 100644
index 0000000..966c754
--- /dev/null
+++ b/src/api/actions/projects/get/by-user.ts
@@ -0,0 +1,17 @@
+'use server'
+import { executor, getAuthUser } from 'middleware'
+import { ProjectManager } from 'core/managers/project'
+import { Project } from 'core/collections'
+
+type Req = void
+type Res = Promise<Project[]>
+
+async function handler(): Res {
+  const user = await getAuthUser()
+  const projects = new ProjectManager(user)
+  return await projects.getByUser()
+}
+
+export async function getProjectsByUser(args: Req) {
+  return await executor<Req, Res>('actions/projects/get/by-user', handler, args)
+}
diff --git a/src/api/actions/projects/index.ts b/src/api/actions/projects/index.ts
new file mode 100644
index 0000000..9e29bb4
--- /dev/null
+++ b/src/api/actions/projects/index.ts
@@ -0,0 +1,15 @@
+import { getProjectsByUser } from './get/by-user'
+import { getProjectById } from './get/by-id'
+import { createProject } from './create'
+import { updateProject } from './update'
+import { deleteProjects } from './delete'
+
+export const projectActions = {
+  get: {
+    byUser: getProjectsByUser,
+    byId: getProjectById
+  },
+  add: createProject,
+  update: updateProject,
+  delete: deleteProjects
+}
diff --git a/src/api/actions/projects/update.ts b/src/api/actions/projects/update.ts
new file mode 100644
index 0000000..87f828c
--- /dev/null
+++ b/src/api/actions/projects/update.ts
@@ -0,0 +1,18 @@
+'use server'
+import { executor, getAuthUser } from 'middleware'
+import { ProjectManager, UpdateProjectArgs } from 'core/managers/project'
+import { Project } from 'core/collections'
+
+type Req = UpdateProjectArgs
+type Res = Promise<Project>
+
+async function handler(data: Req): Res {
+  const user = await getAuthUser()
+  const projects = new ProjectManager(user)
+  // TODO move logic with materials & progress
+  return await projects.updateProject(data)
+}
+
+export async function updateProject(args: Req) {
+  return await executor<Req, Res>('actions/projects/update', handler, args)
+}
diff --git a/src/api/actions/templates/get/by-id.ts b/src/api/actions/templates/get/by-id.ts
index e23191e..62fab57 100644
--- a/src/api/actions/templates/get/by-id.ts
+++ b/src/api/actions/templates/get/by-id.ts
@@ -14,6 +14,6 @@ async function handler({ id }: Req): Res {
   return await templates.getById(id)
 }
 
-export async function getTemplatesById(args: Req) {
+export async function getTemplateById(args: Req) {
   return await executor<Req, Res>('actions/templates/get/by-id', handler, args)
 }
diff --git a/src/api/actions/templates/index.ts b/src/api/actions/templates/index.ts
index 7c6eb12..792dc4a 100644
--- a/src/api/actions/templates/index.ts
+++ b/src/api/actions/templates/index.ts
@@ -1,6 +1,6 @@
 import { getTemplatesByUser } from './get/by-user'
 import { getFeedTemplates } from './get/feed'
-import { getTemplatesById } from './get/by-id'
+import { getTemplateById } from './get/by-id'
 import { createTemplate } from './create'
 import { updateTemplate } from './update'
 import { deleteTemplates } from './delete'
@@ -9,7 +9,7 @@ export const templateActions = {
   get: {
     byUser: getTemplatesByUser,
     feed: getFeedTemplates,
-    byId: getTemplatesById
+    byId: getTemplateById
   },
   add: createTemplate,
   update: updateTemplate,
diff --git a/src/api/core/collections/project.ts b/src/api/core/collections/project.ts
index 7d27051..3dc9d6e 100644
--- a/src/api/core/collections/project.ts
+++ b/src/api/core/collections/project.ts
@@ -11,7 +11,7 @@ interface BeadCount {
 
 export interface Project {
   id: string
-  title: Template['title']
+  title: string
   type: Template['type']
   owner: UserRef
   schema: Bead[][]
diff --git a/src/api/core/managers/project.ts b/src/api/core/managers/project.ts
new file mode 100644
index 0000000..e03acc5
--- /dev/null
+++ b/src/api/core/managers/project.ts
@@ -0,0 +1,131 @@
+import { eq, and, inArray } from 'drizzle-orm'
+import { db, pgProjects, Tables } from 'api/db'
+import { Template, Project, User } from 'core/collections'
+import { getMaterials } from 'api/utils'
+
+type ProjectRes = {
+  id: Tables<'projects'>['id']
+  title: Tables<'projects'>['title']
+  userId: Tables<'projects'>['user_id']
+  userName: Tables<'projects'>['user_name']
+  type: Tables<'projects'>['type']
+  schema: Tables<'projects'>['schema']
+  materials: Tables<'projects'>['materials']
+  progress: Tables<'projects'>['progress']
+}
+
+export type CreateProjectArgs = {
+  template: Template
+}
+export type UpdateProjectArgs = Pick<
+  Project,
+  'id' | 'title' | 'type' | 'schema' | 'materials' | 'progress'
+>
+export type DeleteProjectArgs = {
+  ids: Project['id'][]
+}
+
+export class ProjectManager {
+  private readonly userId: string
+  private readonly userName: string
+
+  constructor(user: User) {
+    this.userId = user.id
+    this.userName = user.name
+  }
+
+  toDto(res: ProjectRes[]): Project[] {
+    return res.map(project => ({
+      id: project.id,
+      title: project.title,
+      owner: {
+        id: project.userId,
+        name: project.userName
+      },
+      type: project.type,
+      schema: project.schema as unknown as Project['schema'],
+      materials: project.materials as unknown as Project['materials'],
+      progress: project.progress
+    }))
+  }
+
+  async getById(id: string): Promise<Project> {
+    console.debug(`DB: Fetch project with id ${id}`)
+
+    const res = await db.select().from(pgProjects).where(eq(pgProjects.id, id))
+
+    const project = this.toDto(res)?.[0]
+    if (!project) throw new Error(`Project with id ${id} not found`)
+    if (project.owner.id !== this.userId)
+      throw new Error(`User does not have access to project with id ${id}`)
+
+    return project
+  }
+
+  async getByUser(): Promise<Project[]> {
+    console.debug(`DB: Fetch user projects`)
+
+    const res = await db
+      .select()
+      .from(pgProjects)
+      .where(eq(pgProjects.userId, this.userId))
+    return this.toDto(res)
+  }
+
+  async createProject({
+    template
+  }: CreateProjectArgs): Promise<Project | undefined> {
+    console.debug(`DB: Create new project with templateId ${template.id}`)
+
+    const schema = template.schema.map(row =>
+      row.map(color => ({ color, isBeaded: false }))
+    )
+    const materials = getMaterials(schema)
+    if (!materials.length) return
+
+    const res = await db
+      .insert(pgProjects)
+      .values({
+        title: 'New Project',
+        userId: this.userId,
+        userName: this.userName,
+        type: template.type,
+        // TODO toJSON
+        schema: JSON.parse(JSON.stringify(schema)),
+        materials: JSON.parse(JSON.stringify(materials)),
+        progress: 0
+      })
+      .returning()
+
+    const project = this.toDto(res)?.[0]
+    if (!project) throw new Error('Project not created')
+
+    return project
+  }
+
+  async updateProject({ id, ...data }: UpdateProjectArgs): Promise<Project> {
+    console.debug(`DB: Update project with id ${id}`)
+
+    const res = await db
+      .update(pgProjects)
+      .set({
+        ...data,
+        // TODO toJSON
+        schema: JSON.parse(JSON.stringify(data.schema)),
+        materials: JSON.parse(JSON.stringify(data.materials))
+      })
+      .where(and(eq(pgProjects.id, id), eq(pgProjects.userId, this.userId)))
+      .returning()
+
+    const project = this.toDto(res)?.[0]
+    if (!project) throw new Error(`Project with id ${id} not updated`)
+
+    return project
+  }
+
+  async deleteProjects({ ids }: DeleteProjectArgs): Promise<void> {
+    console.debug(`DB: Delete projects ${JSON.stringify(ids)}`)
+
+    await db.delete(pgProjects).where(inArray(pgProjects.id, ids))
+  }
+}
diff --git a/src/api/db/index.ts b/src/api/db/index.ts
index 259ae73..cba48fb 100644
--- a/src/api/db/index.ts
+++ b/src/api/db/index.ts
@@ -1,10 +1,10 @@
 import { neon } from '@neondatabase/serverless'
 import { drizzle } from 'drizzle-orm/neon-http'
-import { templates } from './schema'
+import { templates, projects } from './schema'
 
 const sql = neon(process.env.NEON_DATABASE_URL!)
 export const db = drizzle(sql)
 
 export type { Tables, TablesInsert, TablesUpdate, Enums } from './types'
 
-export { templates as pgTemplates }
+export { templates as pgTemplates, projects as pgProjects }
diff --git a/src/api/db/schema.ts b/src/api/db/schema.ts
index 2fd2456..59aa010 100644
--- a/src/api/db/schema.ts
+++ b/src/api/db/schema.ts
@@ -11,6 +11,7 @@ import {
   boolean,
   uniqueIndex,
   jsonb,
+  integer,
   pgEnum
 } from 'drizzle-orm/pg-core'
 import { sql } from 'drizzle-orm'
@@ -256,3 +257,17 @@ export const templates = pgTable('templates', {
   schema: jsonb().$type<Tables<'templates'>['schema']>().default([]).notNull(),
   isPublished: boolean('is_published').default(false).notNull()
 })
+
+export const projects = pgTable('projects', {
+  id: uuid().defaultRandom().primaryKey().notNull(),
+  title: text().notNull(),
+  type: schemaType().notNull(),
+  userId: text('user_id').notNull(),
+  userName: text('user_name').notNull(),
+  schema: jsonb().$type<Tables<'projects'>['schema']>().default([[]]).notNull(),
+  materials: jsonb()
+    .$type<Tables<'projects'>['materials']>()
+    .default([])
+    .notNull(),
+  progress: integer().default(0).notNull()
+})
diff --git a/src/api/db/types.ts b/src/api/db/types.ts
index de6450f..8337291 100644
--- a/src/api/db/types.ts
+++ b/src/api/db/types.ts
@@ -9,6 +9,39 @@ export type Json =
 export type Database = {
   public: {
     Tables: {
+      projects: {
+        Row: {
+          id: string
+          materials: Json
+          progress: number
+          schema: Json
+          title: string
+          type: Database['public']['Enums']['schema_type']
+          user_id: string
+          user_name: string
+        }
+        Insert: {
+          id?: string
+          materials?: Json
+          progress?: number
+          schema?: Json
+          title: string
+          type: Database['public']['Enums']['schema_type']
+          user_id: string
+          user_name: string
+        }
+        Update: {
+          id?: string
+          materials?: Json
+          progress?: number
+          schema?: Json
+          title?: string
+          type?: Database['public']['Enums']['schema_type']
+          user_id?: string
+          user_name?: string
+        }
+        Relationships: []
+      }
       templates: {
         Row: {
           id: string
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 94e4537..52d6550 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -4,7 +4,10 @@ import { DashboardLayout } from 'widgets'
 
 export default async function Layout({ children }: PropsWithChildren) {
   const templates = await actions.templates.get.byUser()
+  const projects = await actions.projects.get.byUser()
   return (
-    <DashboardLayout templates={templates || []}>{children}</DashboardLayout>
+    <DashboardLayout templates={templates || []} projects={projects || []}>
+      {children}
+    </DashboardLayout>
   )
 }
diff --git a/src/app/(dashboard)/projects/[id]/page.tsx b/src/app/(dashboard)/projects/[id]/page.tsx
new file mode 100644
index 0000000..1c057df
--- /dev/null
+++ b/src/app/(dashboard)/projects/[id]/page.tsx
@@ -0,0 +1,14 @@
+import { Project } from 'pages'
+import { actions } from 'actions'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function ProjectPage({ params }: Props) {
+  const { id } = await params
+  const project = await actions.projects.get.byId({ id })
+
+  if (!project) return <div>TODO: Project Not Found</div>
+  return <Project project={project} />
+}
diff --git a/src/lib/app/providers/dashboard-providers.tsx b/src/lib/app/providers/dashboard-providers.tsx
index 51157c8..8364fd7 100644
--- a/src/lib/app/providers/dashboard-providers.tsx
+++ b/src/lib/app/providers/dashboard-providers.tsx
@@ -1,20 +1,26 @@
 'use client'
 import { PropsWithChildren } from 'react'
-import { Template } from 'core/collections'
+import { Template, Project } from 'core/collections'
 import { UserProvider } from './user-provider'
 import { MyTemplatesProvider } from './my-templates-provider'
+import { ProjectsProvider } from './projects-provider'
 import { MenuProvider } from './menu-provider'
 
 export interface Props extends PropsWithChildren {
   templates: Template[]
+  projects: Project[]
 }
 
-export const DashboardProviders = ({ templates, children }: Props) => {
+export const DashboardProviders = ({
+  templates,
+  projects,
+  children
+}: Props) => {
   return (
     <UserProvider>
       <MenuProvider>
         <MyTemplatesProvider templates={templates}>
-          {children}
+          <ProjectsProvider projects={projects}>{children}</ProjectsProvider>
         </MyTemplatesProvider>
       </MenuProvider>
     </UserProvider>
diff --git a/src/lib/app/providers/index.ts b/src/lib/app/providers/index.ts
index a2dfe98..8a5b5e4 100644
--- a/src/lib/app/providers/index.ts
+++ b/src/lib/app/providers/index.ts
@@ -2,3 +2,4 @@ export { DashboardProviders } from './dashboard-providers'
 export { I18nProvider } from './i18n-provider'
 export { ThemeProvider } from './theme-provider'
 export { EditorProvider } from './editor-provider'
+export { ProjectProvider } from './project-provider'
diff --git a/src/lib/app/providers/project-provider.tsx b/src/lib/app/providers/project-provider.tsx
new file mode 100644
index 0000000..a1d4d81
--- /dev/null
+++ b/src/lib/app/providers/project-provider.tsx
@@ -0,0 +1,75 @@
+'use client'
+import { PropsWithChildren, useCallback, useMemo, useState } from 'react'
+import { Project } from 'core/collections'
+import { actions } from 'actions'
+import { ProjectContext } from 'features/project'
+import { useProjects } from 'features/projects'
+import { getMaterials } from 'api/utils'
+
+interface Props extends PropsWithChildren {
+  project: Project
+}
+
+export function ProjectProvider({ project: data, children }: Props) {
+  const { loadProjects } = useProjects()
+
+  const [project, setProject] = useState<Project>(data)
+
+  const updateProject = useCallback(
+    (data: Partial<Project>) => {
+      setProject({ ...project, ...data })
+    },
+    [project]
+  )
+
+  const [isSaving, setIsSaving] = useState(false)
+  const saveProgress = useCallback(async () => {
+    setIsSaving(true)
+    await actions.projects.update({
+      id: project.id,
+      title: project.title,
+      type: project.type,
+      schema: project.schema,
+      materials: project.materials,
+      progress: project.progress
+    })
+    await loadProjects()
+    setIsSaving(false)
+  }, [project, loadProjects])
+
+  const [isFinishing, setIsFinishing] = useState(false)
+  const finishBeading = useCallback(async () => {
+    setIsFinishing(true)
+    const schema = project.schema.map(row =>
+      row.map(({ color }) => ({ color, isBeaded: !!color }))
+    )
+    await actions.projects.update({
+      id: project.id,
+      title: project.title,
+      type: project.type,
+      schema,
+      materials: getMaterials(schema),
+      progress: 100
+    })
+    await loadProjects()
+    setIsFinishing(false)
+  }, [project, loadProjects])
+
+  const contextValue = useMemo(
+    () => ({
+      project,
+      updateProject,
+      saveProgress,
+      finishBeading,
+      isSaving,
+      isFinishing
+    }),
+    [project, updateProject, saveProgress, finishBeading, isSaving, isFinishing]
+  )
+
+  return (
+    <ProjectContext.Provider value={contextValue}>
+      {children}
+    </ProjectContext.Provider>
+  )
+}
diff --git a/src/lib/app/providers/projects-provider.tsx b/src/lib/app/providers/projects-provider.tsx
new file mode 100644
index 0000000..93ddf1f
--- /dev/null
+++ b/src/lib/app/providers/projects-provider.tsx
@@ -0,0 +1,59 @@
+'use client'
+import { PropsWithChildren, useCallback, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Template, Project } from 'core/collections'
+import { actions } from 'actions'
+import { routes } from 'app/routes'
+import { ProjectsContext } from 'features/projects'
+
+interface Props extends PropsWithChildren {
+  projects: Project[]
+}
+
+export function ProjectsProvider({ projects: data, children }: Props) {
+  const router = useRouter()
+
+  const [projects, setProjects] = useState<Project[]>(data)
+
+  const loadProjects = async () => {
+    const newProjectList = await actions.projects.get.byUser()
+    setProjects([...(newProjectList || [])])
+  }
+
+  const addProject = useCallback(
+    (templateId: Template['id']) => {
+      ;(async () => {
+        const newProject = await actions.projects.add({
+          templateId
+        })
+        newProject?.id && router.push(`${routes.project}${newProject.id}`)
+        setTimeout(async () => await loadProjects(), 1000)
+      })()
+    },
+    [router]
+  )
+
+  const deleteProject = useCallback((projectId: Project['id']) => {
+    ;(async () => {
+      await actions.projects.delete({ ids: [projectId] })
+      const newProjectList = await actions.projects.get.byUser()
+      setProjects([...(newProjectList || [])])
+    })()
+  }, [])
+
+  const contextValue = useMemo(
+    () => ({
+      projects,
+      loadProjects,
+      addProject,
+      deleteProject
+    }),
+    [projects, addProject, deleteProject]
+  )
+
+  return (
+    <ProjectsContext.Provider value={contextValue}>
+      {children}
+    </ProjectsContext.Provider>
+  )
+}
diff --git a/src/lib/features/project/index.ts b/src/lib/features/project/index.ts
new file mode 100644
index 0000000..90c6ede
--- /dev/null
+++ b/src/lib/features/project/index.ts
@@ -0,0 +1,2 @@
+export { ProjectContext } from './project-context'
+export { useProject } from './use-project'
diff --git a/src/lib/features/project/project-context.ts b/src/lib/features/project/project-context.ts
new file mode 100644
index 0000000..fe4910a
--- /dev/null
+++ b/src/lib/features/project/project-context.ts
@@ -0,0 +1,14 @@
+'use client'
+import { createContext } from 'react'
+import { Project } from 'core/collections'
+
+export interface ProjectContextType {
+  project: Project
+  updateProject: (data: Partial<Project>) => void
+  saveProgress: () => Promise<void>
+  finishBeading: () => Promise<void>
+  isSaving: boolean
+  isFinishing: boolean
+}
+
+export const ProjectContext = createContext<ProjectContextType | null>(null)
diff --git a/src/lib/features/project/use-project.tsx b/src/lib/features/project/use-project.tsx
new file mode 100644
index 0000000..fc8991b
--- /dev/null
+++ b/src/lib/features/project/use-project.tsx
@@ -0,0 +1,9 @@
+'use client'
+import { useContext } from 'react'
+import { ProjectContext } from './project-context'
+
+export const useProject = () => {
+  const project = useContext(ProjectContext)
+  if (!project) throw new Error('Error: Project context is not defined')
+  return project
+}
diff --git a/src/lib/features/projects/index.ts b/src/lib/features/projects/index.ts
new file mode 100644
index 0000000..b2a0579
--- /dev/null
+++ b/src/lib/features/projects/index.ts
@@ -0,0 +1,2 @@
+export { ProjectsContext } from './projects-context'
+export { useProjects } from './use-projects'
diff --git a/src/lib/features/projects/projects-context.tsx b/src/lib/features/projects/projects-context.tsx
new file mode 100644
index 0000000..e4f568e
--- /dev/null
+++ b/src/lib/features/projects/projects-context.tsx
@@ -0,0 +1,12 @@
+'use client'
+import { createContext } from 'react'
+import { Project, Template } from 'core/collections'
+
+export interface ProjectsContextType {
+  projects: Project[]
+  loadProjects: () => Promise<void>
+  addProject: (templateId: Template['id']) => void
+  deleteProject: (projectId: Project['id']) => void
+}
+
+export const ProjectsContext = createContext<ProjectsContextType | null>(null)
diff --git a/src/lib/features/projects/use-projects.tsx b/src/lib/features/projects/use-projects.tsx
new file mode 100644
index 0000000..c6b62ac
--- /dev/null
+++ b/src/lib/features/projects/use-projects.tsx
@@ -0,0 +1,9 @@
+'use client'
+import { useContext } from 'react'
+import { ProjectsContext } from './projects-context'
+
+export const useProjects = () => {
+  const projects = useContext(ProjectsContext)
+  if (!projects) throw new Error('Error: Projects context is not defined')
+  return projects
+}
diff --git a/src/lib/pages/index.ts b/src/lib/pages/index.ts
index da2e92e..fbcb504 100644
--- a/src/lib/pages/index.ts
+++ b/src/lib/pages/index.ts
@@ -1,6 +1,7 @@
 export { Account } from './account/account'
 export { Auth } from './auth/auth'
 export { Editor } from './editor/editor'
+export { ProjectPage as Project } from './project/project'
 export { MyTemplates } from './my-templates/my-templates'
 export { MyProjects } from './my-projects/my-projects'
 export { NotFound } from './not-found/not-found'
diff --git a/src/lib/pages/my-projects/my-projects.tsx b/src/lib/pages/my-projects/my-projects.tsx
index 416f918..720a976 100644
--- a/src/lib/pages/my-projects/my-projects.tsx
+++ b/src/lib/pages/my-projects/my-projects.tsx
@@ -1,12 +1,42 @@
 'use client'
-import { useUser } from 'features/user'
+import { AddButton } from 'widgets'
+import { useI18n } from 'features/i18n'
+import { useProjects } from 'features/projects'
+import { Divider, Flex } from 'shared/ui'
+import { ProjectCard } from './ui'
 
 export const MyProjects = () => {
-  const { user } = useUser()
+  const { localize } = useI18n()
+  const { projects } = useProjects()
   return (
-    <div>
-      <h2>MyProjects</h2>
-      <p>User info: {JSON.stringify(user)}</p>
-    </div>
+    <>
+      <Divider
+        label={localize('dashboard.projects.tabs.current')}
+        className="mb-2"
+      />
+      <Flex className="max-w-full flex-wrap gap-3" isGap>
+        <AddButton
+          label={localize('dashboard.projects.buttons.newProject')}
+          onClick={() => console.log('TODO')}
+        />
+        {projects
+          .filter(project => project?.progress < 100)
+          .map(project => (
+            <ProjectCard key={`${project.id}-progress`} project={project} />
+          ))}
+      </Flex>
+
+      <Divider
+        label={localize('dashboard.projects.tabs.finished')}
+        className="mt-5 mb-2"
+      />
+      <Flex className="max-w-full flex-wrap gap-3" isGap>
+        {projects
+          .filter(project => project?.progress >= 100)
+          .map(project => (
+            <ProjectCard key={`${project.id}-finished`} project={project} />
+          ))}
+      </Flex>
+    </>
   )
 }
diff --git a/src/lib/pages/my-projects/ui/index.ts b/src/lib/pages/my-projects/ui/index.ts
new file mode 100644
index 0000000..ebd7096
--- /dev/null
+++ b/src/lib/pages/my-projects/ui/index.ts
@@ -0,0 +1 @@
+export { ProjectCard } from './project-card/project-card'
diff --git a/src/lib/pages/my-projects/ui/project-card/project-card.tsx b/src/lib/pages/my-projects/ui/project-card/project-card.tsx
new file mode 100644
index 0000000..8cdaa44
--- /dev/null
+++ b/src/lib/pages/my-projects/ui/project-card/project-card.tsx
@@ -0,0 +1,41 @@
+'use client'
+import { routes } from 'app/routes'
+import Link from 'next/link'
+import { Project } from 'core/collections'
+import { TemplateViews } from 'widgets'
+import { useI18n } from 'features/i18n'
+import { Badge, Flex } from 'shared/ui'
+import { ProjectProgress } from './project-progress'
+
+interface Props {
+  project: Project
+}
+
+export const ProjectCard = ({ project }: Props) => {
+  const { localize } = useI18n()
+  const { schema, type, title, progress } = project
+  return (
+    <Flex
+      className="bg-support-50 w-[226px] h-[210px] rounded-md
+      border-secondary-200 dark:border-secondary-500 border-[1px] gap-0"
+      isGap
+      column
+    >
+      <Link href={`${routes.project}${project.id}`}>
+        <div className="justify-center *:h-[144px] bg-secondary-50 rounded-t overflow-hidden">
+          <TemplateViews className="scale-[0.3]" schema={schema} type={type} />
+        </div>
+      </Link>
+      <Flex className="justify-between p-2 relative">
+        <ProjectProgress
+          progress={progress}
+          className="absolute top-0 right-0"
+        />
+        <Flex className="justify-between" column>
+          <h4 className="truncate font-bold max-w-[160px]">{title}</h4>
+          <Badge text={localize(`dashboard.schemaTypes.${type}`)} />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/lib/pages/my-projects/ui/project-card/project-progress.tsx b/src/lib/pages/my-projects/ui/project-card/project-progress.tsx
new file mode 100644
index 0000000..d29150b
--- /dev/null
+++ b/src/lib/pages/my-projects/ui/project-card/project-progress.tsx
@@ -0,0 +1,18 @@
+interface Props {
+  progress: number
+  className: string
+}
+export const ProjectProgress = ({ progress, className }: Props) => {
+  return (
+    <div className={`w-full h-0.5 bg-secondary-200 ${className}`}>
+      <div
+        className={`absolute top-0 left-0 h-0.5 ${
+          progress === 100 ? 'bg-support-500' : 'bg-accent-300'
+        }`}
+        style={{
+          width: `${progress}%`
+        }}
+      />
+    </div>
+  )
+}
diff --git a/src/lib/pages/my-templates/ui/template-card/template-menu.tsx b/src/lib/pages/my-templates/ui/template-card/template-menu.tsx
index eda7360..5b369c3 100644
--- a/src/lib/pages/my-templates/ui/template-card/template-menu.tsx
+++ b/src/lib/pages/my-templates/ui/template-card/template-menu.tsx
@@ -13,6 +13,7 @@ import { useClickOutside, useDisclosure } from '@mantine/hooks'
 import { Template } from 'core/collections'
 import { routes } from 'app/routes'
 import { useI18n } from 'features/i18n'
+import { useProjects } from 'features/projects'
 import { DeleteModal } from './delete-modal'
 
 interface Props {
@@ -25,9 +26,7 @@ export const TemplateMenu = ({ templateId }: Props) => {
   const [opened, setOpened] = useState(false)
   const ref = useClickOutside(() => setOpened(false))
 
-  const newProject = () => {
-    console.log('newProject')
-  }
+  const { addProject } = useProjects()
   const router = useRouter()
 
   const [isModalOpened, { open: openModal, close: closeModal }] =
@@ -76,7 +75,7 @@ export const TemplateMenu = ({ templateId }: Props) => {
             <Menu.Item
               onClick={event => {
                 event.preventDefault()
-                newProject()
+                addProject(templateId)
               }}
               leftSection={<IconPlayerPlay size={14} />}
             >
diff --git a/src/lib/pages/project/project.tsx b/src/lib/pages/project/project.tsx
new file mode 100644
index 0000000..ad93a98
--- /dev/null
+++ b/src/lib/pages/project/project.tsx
@@ -0,0 +1,19 @@
+import { Project } from 'core/collections'
+import { ProjectProvider } from 'app/providers'
+import { Flex } from 'shared/ui'
+import { ProjectArea, ProjectInfo } from './ui'
+
+interface Props {
+  project: Project
+}
+
+export const ProjectPage = ({ project }: Props) => {
+  return (
+    <ProjectProvider project={project}>
+      <Flex className="grid grid-cols-3 h-full gap-6">
+        <ProjectArea />
+        <ProjectInfo />
+      </Flex>
+    </ProjectProvider>
+  )
+}
diff --git a/src/lib/pages/project/ui/index.ts b/src/lib/pages/project/ui/index.ts
new file mode 100644
index 0000000..1590d06
--- /dev/null
+++ b/src/lib/pages/project/ui/index.ts
@@ -0,0 +1,2 @@
+export { ProjectInfo } from './project-info'
+export { ProjectArea } from './project-area'
diff --git a/src/lib/pages/project/ui/project-area.tsx b/src/lib/pages/project/ui/project-area.tsx
new file mode 100644
index 0000000..975d58b
--- /dev/null
+++ b/src/lib/pages/project/ui/project-area.tsx
@@ -0,0 +1,57 @@
+'use client'
+import { useCallback, useRef } from 'react'
+import Draggable from 'react-draggable'
+import { ActionsMenu, TemplateViews } from 'widgets'
+import { useProject } from 'features/project'
+import { useActionsMenu } from 'features/actions-menu'
+import { Flex } from 'shared/ui'
+
+export const ProjectArea = () => {
+  const nodeRef = useRef(null)
+
+  const {
+    project: { title, type, schema },
+    project,
+    updateProject
+  } = useProject()
+  const { scale, rotate, isMoving } = useActionsMenu()
+
+  const toggleIsBeaded = useCallback(
+    (row: number, column: number) => {
+      schema[row][column] = {
+        ...schema[row][column],
+        isBeaded: !schema[row][column].isBeaded
+      }
+      updateProject({ ...project, schema })
+    },
+    [schema, updateProject, project]
+  )
+  return (
+    <Flex column className="col-span-2 bg-accent-100 h-full rounded-2xl p-4">
+      <Flex className="justify-between">
+        <p className="text-[18px] font-medium truncate">{title}</p>
+        <ActionsMenu />
+      </Flex>
+      <div
+        className="flex overflow-scroll scroll-m-2 scr bg-secondary-50 rounded-xl h-full p-3 justify-center items-center"
+        style={{
+          maxHeight: 'calc(100vh - 168px)',
+          cursor: isMoving ? 'default' : 'crosshair'
+        }}
+      >
+        <Draggable nodeRef={nodeRef} disabled={!isMoving}>
+          <div ref={nodeRef}>
+            <TemplateViews
+              schema={schema}
+              type={type}
+              className={`${scale} ${rotate} ${
+                isMoving && 'hover:cursor-grab active:cursor-grabbing'
+              }`}
+              onClick={isMoving ? undefined : toggleIsBeaded}
+            />
+          </div>
+        </Draggable>
+      </div>
+    </Flex>
+  )
+}
diff --git a/src/lib/pages/project/ui/project-info.tsx b/src/lib/pages/project/ui/project-info.tsx
new file mode 100644
index 0000000..1ee0f7f
--- /dev/null
+++ b/src/lib/pages/project/ui/project-info.tsx
@@ -0,0 +1,50 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { routes } from 'app/routes'
+import { BeadInfo } from 'widgets'
+import { useProject } from 'features/project'
+import { Button, Flex } from 'shared/ui'
+
+export const ProjectInfo = () => {
+  const {
+    project: { materials },
+    saveProgress,
+    finishBeading,
+    isSaving,
+    isFinishing
+  } = useProject()
+  const router = useRouter()
+  return (
+    <Flex
+      column
+      className="bg-accent-100 h-full rounded-2xl p-4 text-[15px] justify-between"
+    >
+      <Flex column>
+        <p className="font-medium">Материалы</p>
+        {materials.map(bead => (
+          <BeadInfo key={bead.color} {...bead} />
+        ))}
+      </Flex>
+
+      <Flex column>
+        <Button
+          loading={isSaving}
+          onClick={() =>
+            saveProgress().then(() => router.push(routes.myProjects))
+          }
+        >
+          Сохранить прогресс
+        </Button>
+        <Button
+          loading={isFinishing}
+          theme="dark"
+          onClick={() =>
+            finishBeading().then(() => router.push(routes.myProjects))
+          }
+        >
+          Завершить
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/lib/shared/i18n/messages/en/dashboard.ts b/src/lib/shared/i18n/messages/en/dashboard.ts
index 9d2a94d..c3bd356 100644
--- a/src/lib/shared/i18n/messages/en/dashboard.ts
+++ b/src/lib/shared/i18n/messages/en/dashboard.ts
@@ -51,6 +51,22 @@ const messages = {
       title: 'Delete template',
       confirm: 'Do you want to delete this template?'
     }
+  },
+  projects: {
+    buttons: {
+      newProject: 'New project',
+      chooseProject: 'Choose project',
+      delete: 'Delete',
+      cancel: 'Cancel'
+    },
+    tabs: {
+      current: 'Current projects',
+      finished: 'Finished projects'
+    },
+    deleteModal: {
+      title: 'Delete project',
+      confirm: 'Do you want to delete this project?'
+    }
   }
 }
 
diff --git a/src/lib/shared/ui/divider.tsx b/src/lib/shared/ui/divider.tsx
new file mode 100644
index 0000000..d8c37bf
--- /dev/null
+++ b/src/lib/shared/ui/divider.tsx
@@ -0,0 +1,18 @@
+import { Flex } from 'shared/ui'
+
+interface Props {
+  label: string
+  className?: string
+}
+
+export const Divider = ({ label, className }: Props) => {
+  return (
+    <Flex
+      isGap
+      className={`items-center text-secondary-400 dark:text-secondary-200 gap-1 ${className}`}
+    >
+      <span className="text-xs">{label}</span>
+      <div className="bg-secondary-300 h-[0.5px] flex-grow " />
+    </Flex>
+  )
+}
diff --git a/src/lib/shared/ui/index.ts b/src/lib/shared/ui/index.ts
index 8c5d0f2..090a57b 100644
--- a/src/lib/shared/ui/index.ts
+++ b/src/lib/shared/ui/index.ts
@@ -1,5 +1,6 @@
 export { ActionIcon } from './action-icon'
 export { Badge } from './badge'
 export { Button } from './button'
+export { Divider } from './divider'
 export { Flex } from './flex'
 export { ScreenCenter } from './screen-center'
diff --git a/src/lib/widgets/bead-info.tsx b/src/lib/widgets/bead-info.tsx
new file mode 100644
index 0000000..71fd96b
--- /dev/null
+++ b/src/lib/widgets/bead-info.tsx
@@ -0,0 +1,20 @@
+import { Flex } from 'shared/ui'
+
+interface Props {
+  color: string
+  count: number
+}
+
+export const BeadInfo = ({ color, count }: Props) => {
+  return (
+    <Flex className="items-center text-[14px]">
+      <div
+        className="rounded-full h-4 w-4"
+        style={{
+          background: color
+        }}
+      />
+      <i>{color}</i> – {count}
+    </Flex>
+  )
+}
diff --git a/src/lib/widgets/dashboard-layout/dashboard-layout.tsx b/src/lib/widgets/dashboard-layout/dashboard-layout.tsx
index 7d8e61e..74df96e 100644
--- a/src/lib/widgets/dashboard-layout/dashboard-layout.tsx
+++ b/src/lib/widgets/dashboard-layout/dashboard-layout.tsx
@@ -2,7 +2,7 @@
 import { PropsWithChildren } from 'react'
 import { SignedIn, SignedOut } from '@neondatabase/auth/react'
 
-import { Template } from 'core/collections'
+import { Template, Project } from 'core/collections'
 import { DashboardProviders } from 'app/providers'
 import { Header } from 'widgets'
 import { useI18n } from 'features/i18n'
@@ -10,12 +10,13 @@ import { Flex } from 'shared/ui'
 
 interface Props extends PropsWithChildren {
   templates: Template[]
+  projects: Project[]
 }
 
-export const DashboardLayout = ({ templates, children }: Props) => {
+export const DashboardLayout = ({ templates, projects, children }: Props) => {
   const { localize } = useI18n()
   return (
-    <DashboardProviders templates={templates}>
+    <DashboardProviders templates={templates} projects={projects}>
       <div className="h-screen px-[70px] text-beadLoop-black dark:text-beadLoop-light05">
         <Header className="h-[42px] my-[24px]" />
         <Flex className="min-h-[calc(100vh-42px)] gap-[20px]">
diff --git a/src/lib/widgets/index.ts b/src/lib/widgets/index.ts
index c993349..af89744 100644
--- a/src/lib/widgets/index.ts
+++ b/src/lib/widgets/index.ts
@@ -7,3 +7,4 @@ export { TemplateViews } from './template-views'
 export { ActionsMenu } from './actions-menu'
 export { AddButton } from './add-button'
 export { Bead } from './bead'
+export { BeadInfo } from './bead-info'