diff --git a/Services/client/tests/delete-file-grid-view.spec.ts b/Services/client/tests/delete-file-grid-view.spec.ts
index 0f97f12..7aee17d 100644
--- a/Services/client/tests/delete-file-grid-view.spec.ts
+++ b/Services/client/tests/delete-file-grid-view.spec.ts
@@ -28,7 +28,7 @@ test('Login', async ({}) => {
 test('Create Cabinet', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-delete-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-delete-file/,
   )
@@ -44,7 +44,7 @@ test('Go into Cabinet', async () => {
 test('Create Drawer', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-delete-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-delete-file/,
   )
@@ -60,7 +60,7 @@ test('Go into Drawer', async () => {
 test('Create Folder', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-delete-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-delete-file/,
   )
diff --git a/Services/client/tests/folder-CRUD.spec.ts b/Services/client/tests/folder-CRUD.spec.ts
new file mode 100644
index 0000000..a6d9bc2
--- /dev/null
+++ b/Services/client/tests/folder-CRUD.spec.ts
@@ -0,0 +1,277 @@
+import { test, expect, Page } from '@playwright/test'
+import { nanoid } from 'nanoid'
+
+test.describe.configure({ mode: 'serial' })
+const cabinet = nanoid()
+const drawer = nanoid()
+const folder = nanoid()
+const subfolder = nanoid()
+const newName = nanoid()
+
+let page: Page
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage()
+})
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test('Login', async () => {
+  await page.goto('http://localhost:3010/admin')
+  await expect(page).toHaveTitle('Sign in to EDM')
+  await page.fill("input[name='username']", 'oom')
+  await page.fill("input[name='password']", 'oom')
+  await page.click("input[name='login']")
+
+  await page.waitForTimeout(2000)
+})
+
+test('Create Cabinet', async () => {
+  await page.waitForTimeout(2000)
+  await page.click("//div[@id='triggerFolderCreateFileItem']")
+  
+  await page.fill(
+    "//input[@placeholder='กรอกชื่อ']",
+    cabinet,
+  )
+  await page.click("//button[@type='submit']")
+
+  await page.waitForTimeout(300)
+
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(cabinet)
+
+  await page.waitForTimeout(300)
+})
+
+test('Go to Cabinet', async () => {
+  await page.click(`(//div[text()='${cabinet}'])[2]`)
+})
+
+test('Create drawer', async () => {
+  await page.click("//div[@id='triggerFolderCreateFileItem']")
+  await page.fill(
+    "//input[@placeholder='กรอกชื่อ']",
+    drawer,
+  )
+  await page.click("//button[@type='submit']")
+
+  await page.waitForTimeout(300)
+
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(drawer)
+
+  await page.waitForTimeout(300)
+})
+
+test('Go into drawer', async () => {
+  await page.click(`(//div[text()='${drawer}'])[2]`)
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(drawer)
+})
+
+test('Create Folder', async () => {
+  await page.click("//div[@id='triggerFolderCreateFileItem']")
+  await page.fill(
+    "//input[@placeholder='กรอกชื่อ']",
+    folder,
+  )
+  await page.click("//button[@type='submit']")
+  await page.waitForTimeout(300)
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(folder)
+})
+
+test('Go into Folder', async () => {
+  await page.click(`(//div[text()='${folder}'])[2]`)
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(folder)
+})
+
+test('Create Subfolder', async () => {
+  await page.click("//div[@id='triggerFolderCreateFileItem']")
+  await page.fill(
+    "//input[@placeholder='กรอกชื่อ']",
+    subfolder,
+  )
+  await page.click("(//button[@type='submit'])[3]")
+  await page.waitForTimeout(300)
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(subfolder)
+})
+
+test('Go into Subfolder', async () => {
+  
+  await page.click(`//div[text()='${subfolder}']`)
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(folder)
+})
+
+test('Back to Folder', async () => {
+  await page.click("//i[text()='arrow_back']")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(subfolder)
+})
+
+test('Edit Subfolder', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${subfolder}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[1]")
+  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
+  await page.click("(//button[@id='FoldeSubmit'])[1]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Subfolder Cancel', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${newName}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Subfolder Confirm', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${newName}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click(
+    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
+  )
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(newName)
+})
+
+test('Back to drawer', async () => {
+  await page.click("//i[text()='arrow_back']")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(folder)
+})
+
+test('Edit Folder', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[1]")
+  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
+  await page.click("(//button[@id='FoldeSubmit'])[1]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Folder Cancel', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${newName}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Folder Confirm', async () => {
+  await page.click(
+    `//button[@data-testid='action${cabinet}/${drawer}/${newName}/']`,
+  )
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click(
+    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
+  )
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(newName)
+})
+
+test('Back to Cabinet', async () => {
+  await page.click("//i[text()='arrow_back']")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(drawer)
+})
+
+test('Edit drawer', async () => {
+  await page.click(`//button[@data-testid='action${cabinet}/${drawer}/']`)
+  await page.click("(//div[@role='listitem'])[1]")
+  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
+  await page.click("(//button[@id='FoldeSubmit'])[1]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Drawer Cancel', async () => {
+  await page.click(`//button[@data-testid='action${cabinet}/${newName}/']`)
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Drawer Confirm', async () => {
+  await page.click(`//button[@data-testid='action${cabinet}/${newName}/']`)
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click(
+    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
+  )
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(newName)
+})
+
+test('Back to Home', async () => {
+  await page.click("//i[text()='arrow_back']")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(cabinet)
+})
+
+test('Edit Cabinet', async () => {
+  await page.click(`//button[@data-testid='action${cabinet}/']`)
+  await page.click("(//div[@role='listitem'])[1]")
+  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
+  await page.click("(//button[@id='FoldeSubmit'])[1]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Cabinet Cancel', async () => {
+  await page.click(`//button[@data-testid='action${newName}/']`)
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).toContainText(newName)
+})
+
+test('Delete Cabinet Confirm', async () => {
+  await page.click(`//button[@data-testid='action${newName}/']`)
+  await page.click("(//div[@role='listitem'])[2]")
+  await page.click(
+    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
+  )
+  await expect(
+    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
+  ).not.toHaveText(newName)
+})
diff --git a/Services/client/tests/upload-file-grid-view.spec.ts b/Services/client/tests/upload-file-grid-view.spec.ts
index cfc800b..1ce4571 100644
--- a/Services/client/tests/upload-file-grid-view.spec.ts
+++ b/Services/client/tests/upload-file-grid-view.spec.ts
@@ -28,7 +28,7 @@ test('Login', async ({}) => {
 test('Create Cabinet', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-upload-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-upload-file/,
   )
@@ -44,7 +44,7 @@ test('Go into Cabinet', async () => {
 test('Create Drawer', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-upload-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-upload-file/,
   )
@@ -60,7 +60,7 @@ test('Go into Drawer', async () => {
 test('Create Folder', async () => {
   await page.click("//div[@id='triggerFolderCreateFileItem']")
   await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", 'test-upload-file')
-  await page.click("(//span[text()='บันทึก'])[2]")
+  await page.click("//button[@type='submit']")
   await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
     /test-upload-file/,
   )