diff --git a/adapter/adapter.ts b/adapter/adapter.ts
index 332c831..92da579 100644
--- a/adapter/adapter.ts
+++ b/adapter/adapter.ts
@@ -1,4 +1,4 @@
-import type { FolderType, NoteType } from "~/repositories/storage.type";
+import type { FolderType, NoteType, TagType, NoteTagType } from "~/repositories/storage.type";
 
 class NotasAdapter {
   async pullFolders(lastSync: number): Promise<FolderType[]> {
@@ -17,6 +17,23 @@ class NotasAdapter {
     throw new Error("Not implemented");
   }
 
+  // tags
+  async pullTags(lastSync: number): Promise<TagType[]> {
+    throw new Error("Not implemented");
+  }
+
+  async pushTag(tag: any): Promise<any> {
+    throw new Error("Not implemented");
+  }
+
+  async pullNoteTags(lastSync: number): Promise<NoteTagType[]> {
+    throw new Error("Not implemented");
+  }
+
+  async pushNoteTag(noteTag: any): Promise<any> {
+    throw new Error("Not implemented");
+  }
+
   // settings
   async pushSettings(setting: any): Promise<any> {
     throw new Error("Not implemented");
diff --git a/adapter/localforage/index.ts b/adapter/localforage/index.ts
index 6c91475..f925d5c 100644
--- a/adapter/localforage/index.ts
+++ b/adapter/localforage/index.ts
@@ -1,4 +1,4 @@
-import type { FolderType, NoteType } from "~/repositories/storage.type";
+import type { FolderType, NoteType, TagType, NoteTagType } from "~/repositories/storage.type";
 import type NotasAdapter from "../adapter";
 
 class LocalForageAdapter implements NotasAdapter {
@@ -20,6 +20,23 @@ class LocalForageAdapter implements NotasAdapter {
     return {};
   }
 
+  // tags
+  async pullTags(lastSync: number): Promise<TagType[]> {
+    return [];
+  }
+
+  async pushTag(tag: any): Promise<any> {
+    return {};
+  }
+
+  async pullNoteTags(lastSync: number): Promise<NoteTagType[]> {
+    return [];
+  }
+
+  async pushNoteTag(noteTag: any): Promise<any> {
+    return {};
+  }
+
   // settings
   async pushSettings(setting: any): Promise<any> {
     return {};
diff --git a/adapter/turso/index.ts b/adapter/turso/index.ts
index 234ad66..9fcf21b 100644
--- a/adapter/turso/index.ts
+++ b/adapter/turso/index.ts
@@ -3,21 +3,27 @@ import { LibSQLDatabase, drizzle } from "drizzle-orm/libsql";
 import { gt } from "drizzle-orm";
 
 import type NotasAdapter from "../adapter";
-import type { FolderType, NoteType } from "~/repositories/storage.type";
+import type { FolderType, NoteType, TagType, NoteTagType } from "~/repositories/storage.type";
+import { applySchemaMigrations } from "~/migrate/scripts/apply-migrations";
 
 import noteModel from "./models/note";
 import folderModel from "./models/folder";
 import settingModel from "./models/setting";
+import tagModel from "./models/tag";
+import noteTagModel from "./models/note-tag";
 
 class TursoAdapter implements NotasAdapter {
   private turso: LibSQLDatabase;
+  private ready: Promise<void>;
   constructor(config: string) {
     const configJSON = JSON.parse(config);
     const client = createClient(configJSON);
     this.turso = drizzle(client);
+    this.ready = applySchemaMigrations(client);
   }
 
   async pullFolders(lastSync: number): Promise<FolderType[]> {
+    await this.ready;
     const folders = await this.turso
       .select()
       .from(folderModel)
@@ -35,6 +41,7 @@ class TursoAdapter implements NotasAdapter {
   }
 
   async pullNotes(lastSync: number): Promise<NoteType[]> {
+    await this.ready;
     const notes = await this.turso
       .select()
       .from(noteModel)
@@ -56,6 +63,7 @@ class TursoAdapter implements NotasAdapter {
   }
 
   async pushFolder(folder: any): Promise<any> {
+    await this.ready;
     return this.turso
       .insert(folderModel)
       .values({
@@ -90,6 +98,7 @@ class TursoAdapter implements NotasAdapter {
   }
 
   async pushNote(note: any): Promise<any> {
+    await this.ready;
     return this.turso
       .insert(noteModel)
       .values({
@@ -135,8 +144,124 @@ class TursoAdapter implements NotasAdapter {
       });
   }
 
+  // tags
+  async pullTags(lastSync: number): Promise<TagType[]> {
+    await this.ready;
+    const tags = await this.turso
+      .select()
+      .from(tagModel)
+      .where(gt(tagModel.updatedAt, lastSync))
+      .all();
+
+    return tags.map((tag: any) => ({
+      id: tag.id,
+      name: tag.name,
+      color: tag.color,
+      lastSync: tag.lastSync,
+      createdAt: tag.createdAt,
+      updatedAt: tag.updatedAt,
+      deletedAt: tag.deletedAt || null,
+    }));
+  }
+
+  async pushTag(tag: any): Promise<any> {
+    await this.ready;
+    return this.turso
+      .insert(tagModel)
+      .values({
+        id: tag.id,
+        name: tag.name,
+        color: tag.color,
+        lastSync: tag.lastSync,
+        createdAt: tag.createdAt,
+        updatedAt: tag.updatedAt,
+        deletedAt: tag.deletedAt,
+      })
+      .onConflictDoUpdate({
+        target: tagModel.id,
+        set: {
+          name: tag.name,
+          color: tag.color,
+          lastSync: tag.lastSync,
+          createdAt: tag.createdAt,
+          updatedAt: tag.updatedAt,
+          deletedAt: tag.deletedAt,
+        },
+      })
+      .returning({
+        id: tagModel.id,
+        name: tagModel.name,
+        color: tagModel.color,
+        lastSync: tagModel.lastSync,
+        createdAt: tagModel.createdAt,
+        updatedAt: tagModel.updatedAt,
+        deletedAt: tagModel.deletedAt,
+      })
+      .catch((err) => {
+        console.log("pushTag error", err);
+      });
+  }
+
+  async pullNoteTags(lastSync: number): Promise<NoteTagType[]> {
+    await this.ready;
+    const noteTags = await this.turso
+      .select()
+      .from(noteTagModel)
+      .where(gt(noteTagModel.updatedAt, lastSync))
+      .all();
+
+    return noteTags.map((noteTag: any) => ({
+      id: noteTag.id,
+      noteId: noteTag.noteId,
+      tagId: noteTag.tagId,
+      lastSync: noteTag.lastSync,
+      createdAt: noteTag.createdAt,
+      updatedAt: noteTag.updatedAt,
+      deletedAt: noteTag.deletedAt || null,
+    }));
+  }
+
+  async pushNoteTag(noteTag: any): Promise<any> {
+    await this.ready;
+    return this.turso
+      .insert(noteTagModel)
+      .values({
+        id: noteTag.id,
+        noteId: noteTag.noteId,
+        tagId: noteTag.tagId,
+        lastSync: noteTag.lastSync,
+        createdAt: noteTag.createdAt,
+        updatedAt: noteTag.updatedAt,
+        deletedAt: noteTag.deletedAt,
+      })
+      .onConflictDoUpdate({
+        target: noteTagModel.id,
+        set: {
+          noteId: noteTag.noteId,
+          tagId: noteTag.tagId,
+          lastSync: noteTag.lastSync,
+          createdAt: noteTag.createdAt,
+          updatedAt: noteTag.updatedAt,
+          deletedAt: noteTag.deletedAt,
+        },
+      })
+      .returning({
+        id: noteTagModel.id,
+        noteId: noteTagModel.noteId,
+        tagId: noteTagModel.tagId,
+        lastSync: noteTagModel.lastSync,
+        createdAt: noteTagModel.createdAt,
+        updatedAt: noteTagModel.updatedAt,
+        deletedAt: noteTagModel.deletedAt,
+      })
+      .catch((err) => {
+        console.log("pushNoteTag error", err);
+      });
+  }
+
   // settings
   async pushSettings(setting: any): Promise<any> {
+    await this.ready;
     return this.turso
       .insert(settingModel)
       .values({
@@ -164,6 +289,7 @@ class TursoAdapter implements NotasAdapter {
       });
   }
   async pullSettings(lastSync: number): Promise<any> {
+    await this.ready;
     const setting = await this.turso
       .select()
       .from(settingModel)
diff --git a/adapter/turso/migrations/0005_tired_king_bedlam.sql b/adapter/turso/migrations/0005_tired_king_bedlam.sql
new file mode 100644
index 0000000..fbb3026
--- /dev/null
+++ b/adapter/turso/migrations/0005_tired_king_bedlam.sql
@@ -0,0 +1,21 @@
+CREATE TABLE `note_tags` (
+	`id` text PRIMARY KEY NOT NULL,
+	`noteId` text,
+	`tagId` text,
+	`lastSync` integer,
+	`createdAt` integer,
+	`updatedAt` integer,
+	`deletedAt` integer
+);
+--> statement-breakpoint
+CREATE TABLE `tags` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text,
+	`color` text,
+	`lastSync` integer,
+	`createdAt` integer,
+	`updatedAt` integer,
+	`deletedAt` integer
+);
+--> statement-breakpoint
+ALTER TABLE settings ADD `schemaVersion` integer;
\ No newline at end of file
diff --git a/adapter/turso/migrations/meta/0005_snapshot.json b/adapter/turso/migrations/meta/0005_snapshot.json
new file mode 100644
index 0000000..26b5797
--- /dev/null
+++ b/adapter/turso/migrations/meta/0005_snapshot.json
@@ -0,0 +1,304 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "ef267c27-e8b1-471c-be5f-b351c6fbc83b",
+  "prevId": "fd40e6ed-735b-4ce9-b691-1a1328bbd735",
+  "tables": {
+    "folders": {
+      "name": "folders",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastSync": {
+          "name": "lastSync",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deletedAt": {
+          "name": "deletedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "note_tags": {
+      "name": "note_tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "noteId": {
+          "name": "noteId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tagId": {
+          "name": "tagId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastSync": {
+          "name": "lastSync",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deletedAt": {
+          "name": "deletedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "notes": {
+      "name": "notes",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "folderId": {
+          "name": "folderId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "isPinned": {
+          "name": "isPinned",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "isLocked": {
+          "name": "isLocked",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastSync": {
+          "name": "lastSync",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deletedAt": {
+          "name": "deletedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deleteCompletelyAt": {
+          "name": "deleteCompletelyAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "settings": {
+      "name": "settings",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastSync": {
+          "name": "lastSync",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "schemaVersion": {
+          "name": "schemaVersion",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "tags": {
+      "name": "tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastSync": {
+          "name": "lastSync",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deletedAt": {
+          "name": "deletedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
\ No newline at end of file
diff --git a/adapter/turso/migrations/meta/_journal.json b/adapter/turso/migrations/meta/_journal.json
index d06e391..b90b18b 100644
--- a/adapter/turso/migrations/meta/_journal.json
+++ b/adapter/turso/migrations/meta/_journal.json
@@ -36,6 +36,13 @@
       "when": 1715500976113,
       "tag": "0004_legal_black_tom",
       "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "5",
+      "when": 1784646172086,
+      "tag": "0005_tired_king_bedlam",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/adapter/turso/models/index.ts b/adapter/turso/models/index.ts
index 13e627f..4e15d60 100644
--- a/adapter/turso/models/index.ts
+++ b/adapter/turso/models/index.ts
@@ -1,3 +1,5 @@
 export * from './folder';
 export * from './note';
 export * from './setting';
+export * from './tag';
+export * from './note-tag';
diff --git a/adapter/turso/models/note-tag.ts b/adapter/turso/models/note-tag.ts
new file mode 100644
index 0000000..b240672
--- /dev/null
+++ b/adapter/turso/models/note-tag.ts
@@ -0,0 +1,13 @@
+import { text, sqliteTable, integer } from "drizzle-orm/sqlite-core";
+
+const noteTagModel = sqliteTable("note_tags", {
+  id: text("id").primaryKey(), // `${noteId}:${tagId}`
+  noteId: text("noteId"),
+  tagId: text("tagId"),
+  lastSync: integer("lastSync"),
+  createdAt: integer("createdAt"),
+  updatedAt: integer("updatedAt"),
+  deletedAt: integer("deletedAt"),
+});
+
+export default noteTagModel;
diff --git a/adapter/turso/models/setting.ts b/adapter/turso/models/setting.ts
index c975f55..e5b2a38 100644
--- a/adapter/turso/models/setting.ts
+++ b/adapter/turso/models/setting.ts
@@ -5,6 +5,7 @@ const settingModel = sqliteTable("settings", {
   password: text("password"),
   lastSync: integer("lastSync"),
   updatedAt: integer("updatedAt"),
+  schemaVersion: integer("schemaVersion"),
 });
 
 export default settingModel;
diff --git a/adapter/turso/models/tag.ts b/adapter/turso/models/tag.ts
new file mode 100644
index 0000000..480c3a7
--- /dev/null
+++ b/adapter/turso/models/tag.ts
@@ -0,0 +1,13 @@
+import { text, sqliteTable, integer } from "drizzle-orm/sqlite-core";
+
+const tagModel = sqliteTable("tags", {
+  id: text("id").primaryKey(),
+  name: text("name"),
+  color: text("color"),
+  lastSync: integer("lastSync"),
+  createdAt: integer("createdAt"),
+  updatedAt: integer("updatedAt"),
+  deletedAt: integer("deletedAt"),
+});
+
+export default tagModel;
diff --git a/app.vue b/app.vue
index e09851b..23d91b7 100644
--- a/app.vue
+++ b/app.vue
@@ -12,4 +12,5 @@ onMounted(() => {
 
 <template>
   <NuxtPage />
+  <AppToast />
 </template>
diff --git a/assets/css/crepe.css b/assets/css/crepe.css
index d2a3e82..563817c 100644
--- a/assets/css/crepe.css
+++ b/assets/css/crepe.css
@@ -22,12 +22,14 @@
   --crepe-color-selected: oklch(var(--p));
   --crepe-color-inline-area: #2b2b2b;
 
-  --crepe-font-title: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --crepe-font-default: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --crepe-font-code: "Space Mono", Fira Code, Menlo, Monaco, "Courier New",
-    Courier, monospace;
+  --crepe-font-title:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --crepe-font-default:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --crepe-font-code:
+    "Space Mono", Fira Code, Menlo, Monaco, "Courier New", Courier, monospace;
   /* 
   --crepe-shadow-1:
     0px 1px 2px 0px rgba(255, 255, 255, 0.3),
@@ -122,6 +124,59 @@
   height: 100px !important;
 }
 
+/* image sync badge */
+.milkdown .milkdown-image-block {
+  position: relative;
+}
+.image-sync-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20;
+  cursor: pointer;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 0.15s,
+    opacity 0.15s;
+  opacity: 0.9;
+  border: none;
+  padding: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+.image-sync-badge:hover {
+  opacity: 1;
+  transform: scale(1.12);
+}
+.image-sync-badge--pending {
+  background: rgba(0, 0, 0, 0.55);
+}
+.image-sync-badge--failed {
+  background: rgba(0, 0, 0, 0.55);
+}
+.image-sync-badge--syncing {
+  background: rgba(0, 0, 0, 0.55);
+  cursor: default;
+  animation: sync-badge-spin 1s linear infinite;
+}
+.image-sync-badge svg {
+  width: 18px;
+  height: 18px;
+  color: #f59e0b;
+}
+@keyframes sync-badge-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* image */
 .milkdown .milkdown-image-block .image-edit {
   border-radius: 0.5rem !important;
@@ -141,11 +196,44 @@
   align-items: center;
   justify-content: center;
 }
+.milkdown .milkdown-image-block .caption-input {
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  font-style: italic !important;
+}
 /* Prevent scroll when resizing image on mobile */
 .milkdown .milkdown-image-block .image-resize-handle {
   touch-action: none;
 }
 
+/* Image loading placeholder — hide broken icon while blob URL is resolving */
+.milkdown .milkdown-image-block img {
+  transition: opacity 0.3s ease;
+}
+.milkdown .milkdown-image-block img[src^="opennotas://"] {
+  opacity: 0;
+}
+.milkdown .milkdown-image-block > .image-wrapper:has(img[src^="opennotas://"]) {
+  min-height: 120px;
+  border-radius: 8px;
+  background-image: linear-gradient(
+    90deg,
+    oklch(var(--b2)) 25%,
+    oklch(var(--b3)) 50%,
+    oklch(var(--b2)) 75%
+  );
+  background-size: 200% 100%;
+  animation: img-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@keyframes img-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 /* Link preview */
 .milkdown .milkdown-link-preview .link-preview {
   height: auto !important;
@@ -153,7 +241,8 @@
   border: 1px solid var(--neutral) !important;
 }
 .milkdown .milkdown-link-edit .link-edit {
-  height: auto !important;
+  height: 42px !important;
+  /* width: 250px !important; */
   padding: 0.5rem !important;
   border: 1px solid var(--neutral) !important;
 }
diff --git a/assets/svg/alert-square-rounded.svg b/assets/svg/alert-square-rounded.svg
new file mode 100644
index 0000000..1726515
--- /dev/null
+++ b/assets/svg/alert-square-rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2l.642 .005l.616 .017l.299 .013l.579 .034l.553 .046c4.687 .455 6.65 2.333 7.166 6.906l.03 .29l.046 .553l.041 .727l.006 .15l.017 .617l.005 .642l-.005 .642l-.017 .616l-.013 .299l-.034 .579l-.046 .553c-.455 4.687 -2.333 6.65 -6.906 7.166l-.29 .03l-.553 .046l-.727 .041l-.15 .006l-.617 .017l-.642 .005l-.642 -.005l-.616 -.017l-.299 -.013l-.579 -.034l-.553 -.046c-4.687 -.455 -6.65 -2.333 -7.166 -6.906l-.03 -.29l-.046 -.553l-.041 -.727l-.006 -.15l-.017 -.617l-.004 -.318v-.648l.004 -.318l.017 -.616l.013 -.299l.034 -.579l.046 -.553c.455 -4.687 2.333 -6.65 6.906 -7.166l.29 -.03l.553 -.046l.727 -.041l.15 -.006l.617 -.017c.21 -.003 .424 -.005 .642 -.005zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"/></svg>
diff --git a/assets/svg/cloud-upload.svg b/assets/svg/cloud-upload.svg
new file mode 100644
index 0000000..300583e
--- /dev/null
+++ b/assets/svg/cloud-upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"/><path d="M9 15l3 -3l3 3"/><path d="M12 12l0 9"/></svg>
diff --git a/assets/svg/cloud.svg b/assets/svg/cloud.svg
new file mode 100644
index 0000000..06fb5f1
--- /dev/null
+++ b/assets/svg/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-cloud"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10.04 4.305c2.195 -.667 4.615 -.224 6.36 1.176c1.386 1.108 2.188 2.686 2.252 4.34l.003 .212l.091 .003c2.3 .107 4.143 1.961 4.25 4.27l.004 .211c0 2.407 -1.885 4.372 -4.255 4.482l-.21 .005h-11.878l-.222 -.008c-2.94 -.11 -5.317 -2.399 -5.43 -5.263l-.005 -.216c0 -2.747 2.08 -5.01 4.784 -5.417l.114 -.016l.07 -.181c.663 -1.62 2.056 -2.906 3.829 -3.518l.244 -.08z" /></svg>
diff --git a/assets/svg/file-arrow-right.svg b/assets/svg/file-arrow-right.svg
new file mode 100644
index 0000000..09b720a
--- /dev/null
+++ b/assets/svg/file-arrow-right.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+  class="icon icon-tabler icons-tabler-outline icon-tabler-file-arrow-right">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+  <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" />
+  <path d="M9 15h6" />
+  <path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" />
+</svg>
\ No newline at end of file
diff --git a/assets/svg/fingerprint.svg b/assets/svg/fingerprint.svg
new file mode 100644
index 0000000..4ea0b87
--- /dev/null
+++ b/assets/svg/fingerprint.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-fingerprint"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3" /><path d="M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6" /><path d="M12 11v2a14 14 0 0 0 2.5 8" /><path d="M8 15a18 18 0 0 0 1.8 6" /><path d="M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95" /></svg>
diff --git a/assets/svg/history.svg b/assets/svg/history.svg
new file mode 100644
index 0000000..6b61a36
--- /dev/null
+++ b/assets/svg/history.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+  class="icon icon-tabler icons-tabler-outline icon-tabler-history">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M12 8l0 4l2 2" />
+  <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>
\ No newline at end of file
diff --git a/assets/svg/tag.svg b/assets/svg/tag.svg
new file mode 100644
index 0000000..a750df5
--- /dev/null
+++ b/assets/svg/tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-tag"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592 -5.592a2.41 2.41 0 0 0 0 -3.408l-7.71 -7.71a2 2 0 0 0 -1.414 -.586h-5.172a3 3 0 0 0 -3 3" /></svg>
\ No newline at end of file
diff --git a/components/AppToast.vue b/components/AppToast.vue
new file mode 100644
index 0000000..0904a4a
--- /dev/null
+++ b/components/AppToast.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useToast } from '~/composables/useToast';
+
+const { toasts, dismiss } = useToast();
+
+const variantAlertClass: Record<string, string> = {
+  info: 'alert-info',
+  success: 'alert-success',
+  warning: 'alert-warning',
+  error: 'alert-error',
+};
+
+const toastPopoverEl = ref<HTMLElement | null>(null);
+watch(toasts, (list) => {
+  const el = toastPopoverEl.value as any;
+  if (!el || typeof el.showPopover !== 'function') return;
+  if (el.matches(':popover-open')) el.hidePopover();
+  if (list.length > 0) el.showPopover();
+}, { deep: true });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div ref="toastPopoverEl" popover="manual"
+      class="fixed bottom-20 left-1/2 -translate-x-1/2 top-auto right-auto flex flex-col-reverse gap-2 z-[1000] m-0 p-0 border-0 bg-transparent overflow-visible pointer-events-none">
+      <TransitionGroup name="toast">
+        <div v-for="toast in toasts" :key="toast.id"
+          class="alert app-toast shadow-lg min-w-64 max-w-xs pointer-events-auto py-3 pr-2 rounded-lg"
+          :class="variantAlertClass[toast.variant] ?? 'alert-info'" role="alert">
+          <!-- success icon -->
+          <svg v-if="toast.variant === 'success'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <!-- error icon -->
+          <svg v-else-if="toast.variant === 'error'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <!-- warning icon -->
+          <svg v-else-if="toast.variant === 'warning'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+          </svg>
+          <!-- info icon -->
+          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24"
+            stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+
+          <span class="text-sm font-medium flex-1">{{ toast.message }}</span>
+
+          <button class="btn btn-ghost btn-xs opacity-60 hover:opacity-100" @click="dismiss(toast.id)"
+            aria-label="Dismiss">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor" stroke-width="2.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.app-toast {
+  display: flex !important;
+  align-items: center !important;
+  justify-items: normal !important;
+  text-align: left !important;
+}
+
+.toast-enter-active {
+  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+
+.toast-leave-active {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(8px);
+}
+
+.toast-move {
+  transition: transform 0.25s ease;
+}
+</style>
diff --git a/components/ColsPersonal.vue b/components/ColsPersonal.vue
index a76e150..11ffd70 100644
--- a/components/ColsPersonal.vue
+++ b/components/ColsPersonal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Notes from '../assets/svg/notes.svg?component';
+import Tag from '../assets/svg/tag.svg?component';
 import Trash from '../assets/svg/trash-2.svg?component';
 import Settings from '../assets/svg/settings.svg?component';
 import Refresh from '../assets/svg/refresh.svg?component';
@@ -23,6 +24,7 @@ watch(() => props.isSyncing, (value) => {
 
 const emit = defineEmits([
   'clickNotes',
+  'clickTags',
   'clickTrash',
   'clickSetting',
   'clickUpdateData',
@@ -38,6 +40,9 @@ const handleClickUpdateData = () => {
 const handleClickNotes = () => {
   emit('clickNotes');
 }
+const handleClickTags = () => {
+  emit('clickTags');
+}
 const handleClickTrash = () => {
   emit('clickTrash');
 }
@@ -56,11 +61,18 @@ const handleClickCollapseFolder = () => {
     <!-- Menu -->
     <div class="flex-1 flex flex-col items-center gap-4 mt-4">
       <div class="menu-item flex flex-col items-center gap-2 relative !text-base-content"
-        :class="{ active: props.activeFolderId !== 'bottombar-trash' }" @click="handleClickNotes">
+        :class="{ active: props.activeFolderId !== 'bottombar-trash' && props.activeFolderId !== 'bottombar-tags' }"
+        @click="handleClickNotes">
         <Notes />
         <span class="text-sm">Notes</span>
       </div>
 
+      <div class="menu-item flex flex-col items-center gap-2 relative !text-base-content"
+        :class="{ active: props.activeFolderId === 'bottombar-tags' }" @click="handleClickTags">
+        <Tag />
+        <span class="text-sm">Tags</span>
+      </div>
+
       <div class="menu-item flex flex-col items-center gap-2 relative !text-base-content"
         :class="{ active: props.activeFolderId === 'bottombar-trash' }" @click="handleClickTrash">
         <Trash />
diff --git a/components/editor/crepe/index.vue b/components/editor/crepe/index.vue
index c8855fd..0bc4dda 100644
--- a/components/editor/crepe/index.vue
+++ b/components/editor/crepe/index.vue
@@ -2,8 +2,8 @@
 import { Crepe } from "@milkdown/crepe";
 import { editorViewCtx } from "@milkdown/core";
 import { undoCommand, redoCommand } from "@milkdown/plugin-history";
-import { replaceAll, getMarkdown } from '@milkdown/utils'
-import { TextSelection } from '@milkdown/prose/state'
+import { replaceAll, getMarkdown, $prose } from '@milkdown/utils'
+import { TextSelection, Plugin } from '@milkdown/prose/state'
 import * as Diff from 'diff'
 
 const { $i18n } = useNuxtApp();
@@ -15,7 +15,12 @@ import {
   saveImage,
   resolveImageUrl,
   isOpenNotasImageUrl,
+  parseImageUrl,
+  getImageMeta,
 } from '~/services/image';
+import { syncImages } from '~/utils/image-sync';
+import cloudUploadSvgRaw from '~/assets/svg/cloud-upload.svg?raw';
+import alertSquareSvgRaw from '~/assets/svg/alert-square-rounded.svg?raw';
 
 const props = defineProps([
   'value',
@@ -34,6 +39,21 @@ const isLoading = ref(true);
 
 let editor: Crepe;
 
+// Track resolved blob URLs → imageId for badge lookup
+const blobUrlToImageId = new Map<string, string>();
+// Track injected badge elements per imageId
+const imageBadgeMap = new Map<string, HTMLElement>();
+let domObserver: MutationObserver | null = null;
+let linkEditObserver: MutationObserver | null = null;
+let refreshInterval: ReturnType<typeof setInterval> | null = null;
+let isRefreshingBadges = false;
+let imagePasteHandler: ((e: Event) => void) | null = null;
+let imageResizeHandler: ((e: PointerEvent) => void) | null = null;
+let isReplacingAll = false;
+
+const toolbarPos = ref<{ x: number; y: number } | null>(null);
+const toolbarWrapRef = ref<HTMLElement | null>(null);
+
 const handleImageUpload = async (file: File): Promise<string> => {
   if (!props.noteId) {
     emit('alertMessage', $i18n.t('app.message_image_sync_failed'));
@@ -57,7 +77,12 @@ const handleImageUpload = async (file: File): Promise<string> => {
 const handleProxyDomURL = async (src: string): Promise<string> => {
   if (isOpenNotasImageUrl(src)) {
     try {
-      return await resolveImageUrl(src, props.settings);
+      const imageId = parseImageUrl(src);
+      const resolved = await resolveImageUrl(src, props.settings);
+      if (imageId && resolved.startsWith('blob:')) {
+        blobUrlToImageId.set(resolved, imageId);
+      }
+      return resolved;
     } catch (error) {
       console.error('Failed to resolve image URL:', error);
       return src;
@@ -66,6 +91,178 @@ const handleProxyDomURL = async (src: string): Promise<string> => {
   return src;
 };
 
+const createBadgeSvg = (type: 'upload' | 'warning' | 'spinner'): string => {
+  if (type === 'upload') return cloudUploadSvgRaw;
+  if (type === 'warning') return alertSquareSvgRaw;
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>';
+};
+
+const handleManualSync = async () => {
+  // Mark all visible pending/failed badges as syncing
+  imageBadgeMap.forEach((badge) => {
+    if (!badge.classList.contains('image-sync-badge--syncing')) {
+      badge.className = 'image-sync-badge image-sync-badge--syncing';
+      badge.innerHTML = createBadgeSvg('spinner');
+      badge.title = $i18n.t('app.image_sync_badge_syncing');
+    }
+  });
+
+  const timeout = new Promise<never>((_, reject) =>
+    setTimeout(() => reject(new Error('timeout')), 15_000)
+  );
+
+  try {
+    const result = await Promise.race([syncImages(props.settings), timeout]);
+    await refreshSyncBadges();
+    if (result.synced > 0) {
+      showSuccess($i18n.t('app.message_image_sync_success') as string);
+    } else if (result.failed > 0) {
+      showError($i18n.t('app.message_image_sync_failed') as string);
+    }
+  } catch {
+    await refreshSyncBadges();
+    showError($i18n.t('app.message_image_sync_retry') as string);
+  }
+};
+
+const refreshSyncBadges = async () => {
+  if (isRefreshingBadges) return;
+  isRefreshingBadges = true;
+
+  // Disconnect observer to prevent re-entrant mutations from badge DOM changes
+  domObserver?.disconnect();
+
+  try {
+    if (!props.settings?.imageSync?.enabled) {
+      imageBadgeMap.forEach((badge) => badge.remove());
+      imageBadgeMap.clear();
+      stopRefreshInterval();
+      return;
+    }
+
+    const editorEl = document.querySelector('#crepe-editor');
+    if (!editorEl) return;
+
+    const imgs = editorEl.querySelectorAll<HTMLImageElement>('img');
+    const activeImageIds = new Set<string>();
+    let hasPendingOrFailed = false;
+
+    for (const img of imgs) {
+      const imageId = blobUrlToImageId.get(img.src);
+      if (!imageId) continue;
+      activeImageIds.add(imageId);
+
+      const meta = await getImageMeta(imageId);
+      if (!meta || meta.syncStatus === 'synced') {
+        const existing = imageBadgeMap.get(imageId);
+        if (existing) {
+          existing.remove();
+          imageBadgeMap.delete(imageId);
+        }
+        continue;
+      }
+
+      hasPendingOrFailed = true;
+      const status = meta.syncStatus;
+      let badge = imageBadgeMap.get(imageId);
+
+      if (!badge) {
+        badge = document.createElement('button');
+        badge.className = `image-sync-badge image-sync-badge--${status}`;
+        badge.innerHTML = createBadgeSvg(status === 'failed' ? 'warning' : 'upload');
+        badge.title = $i18n.t(status === 'failed' ? 'app.image_sync_badge_failed' : 'app.image_sync_badge_pending');
+        badge.addEventListener('click', (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleManualSync();
+        });
+
+        const container = img.closest<HTMLElement>('.milkdown-image-block') ?? img.parentElement;
+        if (container) {
+          container.appendChild(badge);
+          imageBadgeMap.set(imageId, badge);
+        }
+      } else if (!badge.classList.contains('image-sync-badge--syncing')) {
+        badge.className = `image-sync-badge image-sync-badge--${status}`;
+        badge.innerHTML = createBadgeSvg(status === 'failed' ? 'warning' : 'upload');
+        badge.title = $i18n.t(status === 'failed' ? 'app.image_sync_badge_failed' : 'app.image_sync_badge_pending');
+      }
+    }
+
+    // Remove stale badges for images no longer in the editor
+    for (const [imageId, badge] of imageBadgeMap) {
+      if (!activeImageIds.has(imageId)) {
+        badge.remove();
+        imageBadgeMap.delete(imageId);
+      }
+    }
+
+    if (hasPendingOrFailed) {
+      startRefreshInterval();
+    } else {
+      stopRefreshInterval();
+    }
+  } finally {
+    isRefreshingBadges = false;
+    // Reconnect observer after DOM changes are done
+    const el = document.querySelector('#crepe-editor');
+    if (el && domObserver) {
+      domObserver.observe(el, { childList: true, subtree: true });
+    }
+  }
+};
+
+const startRefreshInterval = () => {
+  if (refreshInterval) return;
+  refreshInterval = setInterval(refreshSyncBadges, 10_000);
+};
+
+const stopRefreshInterval = () => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+    refreshInterval = null;
+  }
+};
+
+const setupDomObserver = () => {
+  const editorEl = document.querySelector('#crepe-editor');
+  if (!editorEl) return;
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  domObserver = new MutationObserver(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(refreshSyncBadges, 300);
+  });
+  domObserver.observe(editorEl, { childList: true, subtree: true });
+};
+
+// Milkdown's link-edit popup focuses its input via requestAnimationFrame right when it
+// opens, which can race with the popup's own `data-show` flip and silently no-op if the
+// element is still `display:none` at that instant. Force-focus it ourselves whenever it
+// becomes visible so the popup never opens without focus landing in the input.
+const setupLinkEditFocusObserver = () => {
+  const editorEl = document.querySelector('#crepe-editor');
+  if (!editorEl) return;
+
+  linkEditObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      const target = mutation.target as HTMLElement;
+      if (!target.classList?.contains('milkdown-link-edit')) continue;
+      if (target.getAttribute('data-show') !== 'true') continue;
+
+      const input = target.querySelector<HTMLInputElement>('.link-edit input.input-area');
+      if (input && document.activeElement !== input) {
+        input.focus();
+      }
+    }
+  });
+  linkEditObserver.observe(editorEl, {
+    attributes: true,
+    attributeFilter: ['data-show'],
+    subtree: true,
+  });
+};
+
 onMounted(() => {
   editor = new Crepe({
     root: document.querySelector("#crepe-editor")!,
@@ -111,7 +308,146 @@ onMounted(() => {
       editor.setReadonly(true);
     }
 
+    editor.editor.use(
+      $prose(() => new Plugin({
+        appendTransaction(transactions, oldState, newState) {
+          if (isReplacingAll) return null;
+          if (!transactions.some(t => t.docChanged)) return null;
+
+          const oldSrcs = new Set<string>();
+          oldState.doc.descendants((node) => {
+            if (node.type.name === 'image-block') oldSrcs.add(node.attrs.src);
+          });
+
+          let tr = newState.tr;
+          let changed = false;
+          newState.doc.descendants((node, pos) => {
+            if (
+              node.type.name === 'image-block' &&
+              node.attrs.ratio === 1 &&
+              !oldSrcs.has(node.attrs.src)
+            ) {
+              tr = tr.setNodeMarkup(pos, null, { ...node.attrs, ratio: 0.7 });
+              changed = true;
+            }
+          });
+          return changed ? tr : null;
+        },
+      }))
+    );
+
     await editor.create();
+
+    // Intercept image paste before ProseMirror (capture phase runs first)
+    imagePasteHandler = (e: Event) => {
+      const event = e as ClipboardEvent;
+      const items = Array.from(event.clipboardData?.items ?? []);
+      const imageItem = items.find(
+        (item) => item.kind === 'file' && item.type.startsWith('image/')
+      );
+      if (!imageItem) return;
+
+      const file = imageItem.getAsFile();
+      if (!file) return;
+
+      e.stopPropagation();
+      e.preventDefault();
+
+      // Capture insert position synchronously before async upload
+      let insertPos = -1;
+      editor.editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx);
+        try {
+          insertPos = view.state.selection.$from.after(1);
+        } catch (_) {
+          insertPos = view.state.doc.content.size;
+        }
+      });
+
+      handleImageUpload(file).then((url) => {
+        editor.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          const schema = view.state.schema;
+          const imageBlockType = Object.entries(schema.nodes).find(
+            ([name, t]) => name.toLowerCase().includes('image') && !t.spec.inline && (t.spec as any).atom
+          )?.[1];
+          if (!imageBlockType) return;
+
+          const imageNode = imageBlockType.create({ src: url });
+          const pos = insertPos >= 0 ? insertPos : view.state.doc.content.size;
+          view.dispatch(view.state.tr.insert(pos, imageNode));
+        });
+      });
+    };
+
+    document.querySelector('#crepe-editor')
+      ?.addEventListener('paste', imagePasteHandler, true);
+
+    // Dampen image resize speed — Milkdown uses absolute 1:1 position, we use delta × damping
+    const RESIZE_DAMPING = 0.4;
+    imageResizeHandler = (e: PointerEvent) => {
+      const handle = (e.target as Element).closest<HTMLElement>('.image-resize-handle');
+      if (!handle) return;
+
+      const imgEl = handle.closest('.milkdown-image-block')?.querySelector<HTMLImageElement>('img');
+      if (!imgEl) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const startY = e.clientY;
+      const startHeight = imgEl.getBoundingClientRect().height;
+      let lastHeight = startHeight;
+
+      const onMove = (me: PointerEvent) => {
+        me.stopPropagation();
+        me.preventDefault();
+        const newHeight = Math.max(100, startHeight + (me.clientY - startY) * RESIZE_DAMPING);
+        lastHeight = newHeight;
+        imgEl.dataset.height = newHeight.toFixed(2);
+        imgEl.style.height = `${newHeight}px`;
+      };
+
+      const onUp = (ue: PointerEvent) => {
+        ue.stopPropagation();
+        window.removeEventListener('pointermove', onMove, true);
+        window.removeEventListener('pointerup', onUp, true);
+
+        const originHeight = parseFloat(imgEl.dataset.origin ?? '0');
+        if (!originHeight) return;
+
+        const ratio = parseFloat((lastHeight / originHeight).toFixed(2));
+        if (isNaN(ratio)) return;
+
+        editor.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          let targetPos = -1;
+          view.state.doc.descendants((node, pos) => {
+            if (targetPos !== -1) return false;
+            if (node.isAtom && node.attrs?.src !== undefined) {
+              const domNode = view.nodeDOM(pos);
+              if (domNode instanceof Element && domNode.contains(imgEl)) {
+                targetPos = pos;
+              }
+            }
+            return targetPos === -1;
+          });
+          if (targetPos === -1) return;
+          const node = view.state.doc.nodeAt(targetPos);
+          if (!node) return;
+          view.dispatch(view.state.tr.setNodeMarkup(targetPos, null, { ...node.attrs, ratio }));
+        });
+      };
+
+      window.addEventListener('pointermove', onMove, true);
+      window.addEventListener('pointerup', onUp, true);
+    };
+
+    document.querySelector('#crepe-editor')
+      ?.addEventListener('pointerdown', imageResizeHandler as EventListener, true);
+
+    setupDomObserver();
+    setupLinkEditFocusObserver();
     setTimeout(() => {
       focus();
     }, 100);
@@ -156,6 +492,21 @@ const focusState = () => {
 }
 
 onUnmounted(() => {
+  domObserver?.disconnect();
+  linkEditObserver?.disconnect();
+  stopRefreshInterval();
+  imageBadgeMap.clear();
+  blobUrlToImageId.clear();
+  if (imagePasteHandler) {
+    document.querySelector('#crepe-editor')
+      ?.removeEventListener('paste', imagePasteHandler, true);
+    imagePasteHandler = null;
+  }
+  if (imageResizeHandler) {
+    document.querySelector('#crepe-editor')
+      ?.removeEventListener('pointerdown', imageResizeHandler as EventListener, true);
+    imageResizeHandler = null;
+  }
   editor.destroy();
 });
 
@@ -167,6 +518,7 @@ const silent = ref<boolean>(false);
 const slientUpdateValue = async (value: string) => {
   if (!editor) return
   silent.value = true
+  isReplacingAll = true
 
   // try catch to avoid error
   try {
@@ -248,9 +600,65 @@ const slientUpdateValue = async (value: string) => {
     })
   } catch (_) { }
 
+  isReplacingAll = false
   silent.value = false
 }
 
+watch(() => props.noteId, () => {
+  toolbarPos.value = null;
+});
+
+const startToolbarDrag = (e: PointerEvent) => {
+  const el = toolbarWrapRef.value;
+  if (!el) return;
+
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const initRect = el.getBoundingClientRect();
+  const offsetX = startX - initRect.left;
+  const offsetY = startY - initRect.top;
+  const DRAG_THRESHOLD = 5;
+  let dragging = false;
+
+  const onMove = (me: PointerEvent) => {
+    if (!dragging) {
+      if (Math.hypot(me.clientX - startX, me.clientY - startY) < DRAG_THRESHOLD) return;
+      dragging = true;
+      if (!toolbarPos.value) {
+        toolbarPos.value = { x: initRect.left, y: initRect.top };
+      }
+    }
+
+    me.preventDefault();
+    const container = document.querySelector('#form-editors');
+    const cr = container?.getBoundingClientRect() ?? { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    toolbarPos.value = {
+      x: Math.max(cr.left, Math.min(me.clientX - offsetX, cr.right - el.offsetWidth)),
+      y: Math.max(cr.top, Math.min(me.clientY - offsetY, cr.bottom - el.offsetHeight)),
+    };
+  };
+
+  const onUp = () => {
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onUp);
+  };
+
+  window.addEventListener('pointermove', onMove);
+  window.addEventListener('pointerup', onUp);
+};
+
+const toolbarStyle = computed(() => {
+  if (!toolbarPos.value) return {};
+  return {
+    position: 'fixed' as const,
+    left: `${toolbarPos.value.x}px`,
+    top: `${toolbarPos.value.y}px`,
+    bottom: 'auto',
+    zIndex: 50,
+    margin: 0,
+  };
+});
+
 defineExpose({
   focus,
   readonly,
@@ -274,7 +682,9 @@ defineExpose({
 
   </div>
 
-  <div v-if="props.isShowFormatToolbar" class="sticky bottom-4 left-0 w-fit max-w-screen-md mx-auto">
+  <div v-if="props.isShowFormatToolbar" ref="toolbarWrapRef"
+    :class="!toolbarPos ? 'sticky bottom-4 left-0 w-fit max-w-screen-md mx-auto' : 'w-fit'" :style="toolbarStyle"
+    style="cursor: grab; touch-action: none; user-select: none;" @pointerdown="startToolbarDrag">
     <ToolbarFormNotesFormat :editorType="'crepe'" :editor="editor?.editor" />
   </div>
 </template>
diff --git a/components/editor/tiptap/index.vue b/components/editor/tiptap/index.vue
index b7c58ae..c04a770 100644
--- a/components/editor/tiptap/index.vue
+++ b/components/editor/tiptap/index.vue
@@ -514,14 +514,14 @@ const openLink = () => {
   }
 }
 
-button {
+.ProseMirror button {
   @apply bg-base-300 rounded border-none text-sm font-medium py-1 px-2 transition;
 }
 
-button.is-active,
-input.is-active,
-select.is-active,
-textarea.is-active {
+.ProseMirror button.is-active,
+.ProseMirror input.is-active,
+.ProseMirror select.is-active,
+.ProseMirror textarea.is-active {
   @apply bg-primary text-primary-content;
 }
 </style>
diff --git a/components/form/notes/index.vue b/components/form/notes/index.vue
index 3fcc869..d36fa92 100644
--- a/components/form/notes/index.vue
+++ b/components/form/notes/index.vue
@@ -71,6 +71,10 @@ const focusPassword = () => {
 const focus = (location: 'start' | 'end' = 'start') => {
   editorRef.value?.focus(location);
 }
+const handleClickMarkdownBody = (e: MouseEvent) => {
+  if ((e.target as HTMLElement).closest('input, textarea, .dropdown, .milkdown-toolbar, .milkdown-link-edit, .milkdown-link-preview, .milkdown-slash-menu, .milkdown-block-handle')) return;
+  focus('end');
+}
 const readonly = () => {
   editorRef.value?.readonly();
 }
@@ -118,7 +122,7 @@ defineExpose({
 <template>
   <div class="flex justify-center bg-svg h-full transition-all" v-if="!id"></div>
 
-  <div class="markdown-body transition-all relative" v-if="id && !isLocked" @click="() => focus('end')">
+  <div class="markdown-body transition-all relative" v-if="id && !isLocked" @click="handleClickMarkdownBody">
     <EditorTiptap v-if="editorName === 'Tiptap'" ref="editorRef" :value="props.value" :isDeleted="props.isDeleted"
       :settings="settings" :key="editorTiptapKey" :isShowFormatToolbar="props.isShowFormatToolbar"
       @changeContent="handleChangeContent" @clickInsertLink="handleClickInsertLink"
diff --git a/components/list/folder/index.vue b/components/list/folder/index.vue
index a5c48d4..300cb5f 100644
--- a/components/list/folder/index.vue
+++ b/components/list/folder/index.vue
@@ -49,11 +49,7 @@ const onEnd = () => {
 </script>
 
 <template>
-  <div class="lg:hidden mt-4 h-32 w-32 m-auto">
-    <img :src="'/logo-icon.png'" width="128" height="128" class="mb-4" alt="OpenNotas Logo" />
-  </div>
-
-  <ul class="menu block w-full p-2 transition-all h-[calc(100vh_-_222px)] overflow-auto lg:h-full lg:overflow-auto">
+  <ul class="menu block w-full p-2 transition-all h-[calc(100vh_-_254px)] overflow-auto lg:h-full lg:overflow-auto">
     <draggable :delay="300" :prevent-on-filter="false" :touch-start-threshold="50" :list="props.listFolders"
       @end="onEnd" :move="onMove" item-key="id">
       <template #item="{ element: folder }">
diff --git a/components/list/notes/index.vue b/components/list/notes/index.vue
index dcb0005..e194128 100644
--- a/components/list/notes/index.vue
+++ b/components/list/notes/index.vue
@@ -39,7 +39,8 @@ const handleRightClickNote = (e: any, noteId: number) => {
           <div class="w-full select-none truncate overflow-hidden transition-all"
             :class="{ 'italic': note.isLocked, 'text-warning-sync': props.actionObjectKeys?.includes(note.id), 'text-info-sync': props.idPulled?.includes(note.id) }">
             <span class="search-highlight" v-if="note.highlight" v-html="note.highlight"></span>
-            <span v-else>{{ note.content?.trim() || $t('app.list_note_no_content') }}</span>
+            <span :class="{ 'italic': note.isLocked }" v-else>{{ note.content?.trim() || $t('app.list_note_no_content')
+              }}</span>
           </div>
         </div>
 
diff --git a/components/list/tag/index.vue b/components/list/tag/index.vue
new file mode 100644
index 0000000..2e98c3d
--- /dev/null
+++ b/components/list/tag/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import MoreHorizontal from '~/assets/svg/more-horizontal.svg?component';
+import Plus from '~/assets/svg/plus.svg?component';
+
+const props = defineProps([
+  'listTags',
+  'activeTagId',
+  'actionObjectKeys',
+  'isCollapseFolder',
+]);
+
+const emit = defineEmits(['clickTagName', 'rightClickTagName', 'clickAddTag']);
+const handleClickTagName = (event: Event, tagId: string) => {
+  event.preventDefault();
+  emit('clickTagName', tagId);
+};
+const handleRightClickTagName = (e: any, tagId: string) => {
+  e.preventDefault();
+
+  const x = e.clientX;
+  const y = e.clientY;
+  emit('rightClickTagName', { tagId, x, y });
+};
+</script>
+
+<template>
+  <ul class="menu block w-full p-2 transition-all h-[calc(100vh_-_254px)] overflow-auto lg:h-full lg:overflow-auto">
+    <li v-if="!props.listTags.length" class="menu-items w-full py-0.5 cursor-pointer"
+      @click="emit('clickAddTag')">
+      <div class="flex flex-row justify-between rounded-xl w-full">
+        <div class="flex items-center gap-4 w-5/6">
+          <span
+            class="w-6 h-6 rounded-full shrink-0 border-2 border-dashed border-base-content/30 flex items-center justify-center">
+            <Plus class="w-3 h-3 text-base-content/50" />
+          </span>
+          <span v-if="!isCollapseFolder" class="truncate overflow-hidden text-base-content/50">
+            {{ $t('app.list_tag_empty') }}
+          </span>
+        </div>
+      </div>
+    </li>
+
+    <li v-for="tag in props.listTags" :key="tag.id" class="menu-items w-full py-0.5 animate-fade-right animate-duration-100"
+      @contextmenu="handleRightClickTagName($event, tag.id)" @click="handleClickTagName($event, tag.id)">
+      <div class="flex flex-row justify-between rounded-xl w-full active:!bg-neutral active:!text-neutral-content"
+        :class="{ 'bg-primary text-primary-content hover:bg-primary': activeTagId === tag.id }" :id="'tag-' + tag.id">
+        <div class="flex items-center gap-4 w-5/6">
+          <span class="w-6 h-6 rounded-full shrink-0" :style="{ backgroundColor: tag.color || '#94a3b8' }"></span>
+          <span v-if="!isCollapseFolder" class="truncate overflow-hidden tag-name"
+            :class="{ 'text-warning-sync': props.actionObjectKeys?.includes(tag.id) }" :tagId="tag.id">
+            {{ tag.name }}
+          </span>
+        </div>
+        <div v-if="!isCollapseFolder" class="more-tools" @click.stop="handleRightClickTagName($event, tag.id)">
+          <MoreHorizontal class="press w-3 h-3 opacity-80" />
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+<style lang="scss" scoped>
+.menu-items:hover .more-tools {
+  display: block;
+}
+</style>
diff --git a/components/menu/folder/index.vue b/components/menu/folder/index.vue
index d984979..e0a7c85 100644
--- a/components/menu/folder/index.vue
+++ b/components/menu/folder/index.vue
@@ -21,14 +21,16 @@ const handleClickDeleteFolder = () => {
   <ul class="menu bg-base-100 rounded-box w-36 border border-neutral animate-fade-down animate-duration-100">
     <li id="menu-folder-rename" @click="handleClickRenameFolder">
       <a class="flex flex-row items-center gap-3">
-        <Pencil />
+        <Pencil class="w-4 h-4 shrink-0" />
         <span class="flex items-center justify-center">{{ $t('app.menu_folder_rename') }}</span>
       </a>
     </li>
 
+    <li></li>
+
     <li class="text-rose-500" @click="handleClickDeleteFolder">
       <a class="flex flex-row items-center gap-3">
-        <Trash />
+        <Trash class="w-4 h-4 shrink-0" />
         <span class="flex items-center justify-center">{{ $t('app.menu_folder_delete') }}</span>
       </a>
     </li>
diff --git a/components/menu/move-note/index.vue b/components/menu/move-note/index.vue
new file mode 100644
index 0000000..7d6c2fc
--- /dev/null
+++ b/components/menu/move-note/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Folder from '~/assets/svg/folder.svg?component';
+
+const props = defineProps([
+  'listFolders',
+]);
+
+const emit = defineEmits(['selectFolder']);
+
+const handleClickFolder = (folderId: string) => {
+  emit('selectFolder', folderId);
+};
+</script>
+
+<template>
+  <ul class="menu bg-base-100 rounded-box w-48 border border-neutral animate-fade-down animate-duration-100 max-h-72 flex-nowrap overflow-y-auto">
+    <li v-if="!props.listFolders.length" class="menu-title">
+      <span>{{ $t('app.modal_move_note_empty') }}</span>
+    </li>
+
+    <li v-for="folder in props.listFolders" :key="folder.id" @click="handleClickFolder(folder.id)">
+      <a class="flex flex-row items-center gap-3">
+        <Folder class="w-4 h-4 shrink-0" />
+        <span class="flex items-center justify-center truncate">{{ folder.name }}</span>
+      </a>
+    </li>
+  </ul>
+</template>
diff --git a/components/menu/note-tags/index.vue b/components/menu/note-tags/index.vue
new file mode 100644
index 0000000..3f6cb57
--- /dev/null
+++ b/components/menu/note-tags/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps([
+  'listTags',
+  'noteTagIds',
+]);
+
+const emit = defineEmits(['toggleTag']);
+
+const handleToggle = (tagId: string) => {
+  emit('toggleTag', tagId);
+};
+</script>
+
+<template>
+  <ul class="menu bg-base-100 rounded-box w-56 border border-neutral animate-fade-down animate-duration-100 max-h-72 flex-nowrap overflow-y-auto">
+    <li v-if="!props.listTags.length" class="menu-title">
+      <span>{{ $t('app.menu_note_tags_empty') }}</span>
+    </li>
+
+    <li v-for="tag in props.listTags" :key="tag.id" @click.stop="handleToggle(tag.id)">
+      <a class="flex flex-row items-center gap-3">
+        <input type="checkbox" class="checkbox checkbox-sm" :checked="props.noteTagIds.includes(tag.id)"
+          @click.stop="handleToggle(tag.id)" />
+        <span class="w-3 h-3 rounded-full shrink-0" :style="{ backgroundColor: tag.color || '#94a3b8' }"></span>
+        <span class="flex items-center justify-center truncate">{{ tag.name }}</span>
+      </a>
+    </li>
+  </ul>
+</template>
diff --git a/components/menu/note/index.vue b/components/menu/note/index.vue
index 0a06107..68f67ce 100644
--- a/components/menu/note/index.vue
+++ b/components/menu/note/index.vue
@@ -4,6 +4,10 @@ import Copy from '~/assets/svg/copy.svg?component';
 import CircleKey from '~/assets/svg/circle-key.svg?component';
 import Trash from '~/assets/svg/trash.svg?component';
 import Restore from '~/assets/svg/restore.svg?component';
+import Info from '~/assets/svg/info.svg?component';
+import History from '~/assets/svg/history.svg?component';
+import FileMove from '~/assets/svg/file-arrow-right.svg?component';
+import Tag from '~/assets/svg/tag.svg?component';
 
 const props = defineProps([
   'noteId',
@@ -17,6 +21,10 @@ const emit = defineEmits([
   'deleteNote',
   'restoreNote',
   'deleteNoteForever',
+  'clickInfo',
+  'clickHistory',
+  'clickMove',
+  'clickAddToTag',
 ]);
 
 const handleClickPinNote = (status: number) => {
@@ -25,6 +33,18 @@ const handleClickPinNote = (status: number) => {
 const handleClickCopyNote = () => {
   emit('copyNote', props.noteId);
 };
+const handleClickInfo = () => {
+  emit('clickInfo', props.noteId);
+};
+const handleClickHistory = () => {
+  emit('clickHistory', props.noteId);
+};
+const handleClickMove = () => {
+  emit('clickMove', props.noteId);
+};
+const handleClickAddToTag = () => {
+  emit('clickAddToTag', props.noteId);
+};
 const handleClickLockNote = (status: number) => {
   emit('lockNote', { noteId: props.noteId, status });
 };
@@ -66,7 +86,7 @@ const handleClickDeleteNoteForever = () => {
       class="menu bg-base-100 rounded-box w-44 border border-neutral animate-fade-down animate-duration-100">
       <li class="" @click="handleClickPinNote(props.formNotes.isPinned)">
         <a class="flex flex-row items-center gap-3">
-          <PinV2 />
+          <PinV2 class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ props.formNotes.isPinned ? $t('app.menu_note_unpin') :
             $t('app.menu_note_pin') }}</span>
         </a>
@@ -74,22 +94,54 @@ const handleClickDeleteNoteForever = () => {
 
       <li class="" @click="handleClickCopyNote">
         <a class="flex flex-row items-center gap-3">
-          <Copy />
+          <Copy class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ $t('app.menu_note_copy') }}</span>
         </a>
       </li>
 
+      <li class="" @click.stop="handleClickMove">
+        <a class="flex flex-row items-center gap-3">
+          <FileMove class="w-4 h-4 shrink-0" />
+          <span class="flex items-center justify-center">{{ $t('app.menu_note_move') }}</span>
+        </a>
+      </li>
+
+      <li class="" @click.stop="handleClickAddToTag">
+        <a class="flex flex-row items-center gap-3">
+          <Tag class="w-4 h-4 shrink-0" />
+          <span class="flex items-center justify-center">{{ $t('app.menu_note_add_to_tag') }}</span>
+        </a>
+      </li>
+
+      <li class="" @click="handleClickInfo">
+        <a class="flex flex-row items-center gap-3">
+          <Info class="w-4 h-4 shrink-0" />
+          <span class="flex items-center justify-center">{{ $t('app.menu_note_info') }}</span>
+        </a>
+      </li>
+
+      <li class="" @click="handleClickHistory">
+        <a class="flex flex-row items-center gap-3">
+          <History class="w-4 h-4 shrink-0" />
+          <span class="flex items-center justify-center">{{ $t('app.menu_note_history') }}</span>
+        </a>
+      </li>
+
+      <li></li>
+
       <li class="" @click="handleClickLockNote(props.formNotes.isLocked)">
         <a class="flex flex-row items-center gap-3">
-          <CircleKey />
+          <CircleKey class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ props.formNotes.isLocked ? $t('app.menu_note_unlock') :
             $t('app.menu_note_lock') }}</span>
         </a>
       </li>
 
+      <li></li>
+
       <li class="text-rose-500" @click="handleClickDeleteNote">
         <a class="flex flex-row items-center gap-3">
-          <Trash />
+          <Trash class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ $t('app.menu_note_delete') }}</span>
         </a>
       </li>
@@ -100,21 +152,30 @@ const handleClickDeleteNoteForever = () => {
       class="menu bg-base-100 rounded-box w-44 border border-neutral animate-fade-down animate-duration-100">
       <li class="" @click="handleClickRestoreNote">
         <a class="flex flex-row items-center gap-3">
-          <Restore />
+          <Restore class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ $t('app.menu_note_restore') }}</span>
         </a>
       </li>
 
       <li class="" @click="handleClickCopyNote">
         <a class="flex flex-row items-center gap-3">
-          <Copy />
+          <Copy class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ $t('app.menu_note_copy') }}</span>
         </a>
       </li>
 
+      <li class="" @click="handleClickInfo">
+        <a class="flex flex-row items-center gap-3">
+          <Info class="w-4 h-4 shrink-0" />
+          <span class="flex items-center justify-center">{{ $t('app.menu_note_info') }}</span>
+        </a>
+      </li>
+
+      <li></li>
+
       <li class="text-rose-500" @click="handleClickDeleteNoteForever">
         <a class="flex flex-row items-center gap-3">
-          <Trash />
+          <Trash class="w-4 h-4 shrink-0" />
           <span class="flex items-center justify-center">{{ $t('app.menu_note_delete_forever') }}</span>
         </a>
       </li>
diff --git a/components/menu/tag/index.vue b/components/menu/tag/index.vue
new file mode 100644
index 0000000..8e2798f
--- /dev/null
+++ b/components/menu/tag/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import Pencil from '~/assets/svg/pencil.svg?component';
+import Trash from '~/assets/svg/trash.svg?component';
+
+const props = defineProps([
+  'tagId',
+]);
+
+const emit = defineEmits(['editTag', 'deleteTag']);
+
+const handleClickEditTag = () => {
+  emit('editTag', props.tagId);
+};
+
+const handleClickDeleteTag = () => {
+  emit('deleteTag', props.tagId);
+};
+</script>
+
+<template>
+  <ul class="menu bg-base-100 rounded-box w-36 border border-neutral animate-fade-down animate-duration-100">
+    <li id="menu-tag-edit" @click="handleClickEditTag">
+      <a class="flex flex-row items-center gap-3">
+        <Pencil class="w-4 h-4 shrink-0" />
+        <span class="flex items-center justify-center">{{ $t('app.menu_tag_edit') }}</span>
+      </a>
+    </li>
+
+    <li></li>
+
+    <li class="text-rose-500" @click="handleClickDeleteTag">
+      <a class="flex flex-row items-center gap-3">
+        <Trash class="w-4 h-4 shrink-0" />
+        <span class="flex items-center justify-center">{{ $t('app.menu_tag_delete') }}</span>
+      </a>
+    </li>
+  </ul>
+</template>
diff --git a/components/modal/alert-set-password/index.vue b/components/modal/alert-set-password/index.vue
index 85119eb..663afc1 100644
--- a/components/modal/alert-set-password/index.vue
+++ b/components/modal/alert-set-password/index.vue
@@ -7,8 +7,9 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-alert-set-password" class="modal modal-top lg:modal-middle">
-    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-alert-set-password"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -18,7 +19,7 @@ const handleClickClose = () => {
 
         <div class="modal-action">
           <form method="dialog">
-            <button class="btn btn-sm lg:btn-md btn-primary">
+            <button class="btn btn-sm btn-primary">
               {{ $t('app.modal_alert_set_password_ok') }}
             </button>
           </form>
diff --git a/components/modal/change-folder-name/index.vue b/components/modal/change-folder-name/index.vue
index 6c09cc0..f34c5bf 100644
--- a/components/modal/change-folder-name/index.vue
+++ b/components/modal/change-folder-name/index.vue
@@ -45,11 +45,11 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-change-folder-name" :key="modalChangeFolderNameKey" class="modal modal-top lg:modal-middle">
-    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-change-folder-name" :key="modalChangeFolderNameKey"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
-        <button class="btn btn-sm lg:btn-md btn-circle btn-ghost absolute right-2 top-2"
-          @click="handleClickClose">✕</button>
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
       <h3 class="font-bold text-lg">
         {{ $t('app.modal_change_folder_name_title') }}
@@ -66,9 +66,9 @@ const handleClickClose = () => {
         <div class="modal-action">
           <form method="dialog">
             <!-- if there is a button in form, it will close the modal -->
-            <button class="btn btn-sm lg:btn-md mr-2">{{ $t('app.modal_change_folder_name_cancel') }}</button>
-            <button class="btn btn-sm lg:btn-md btn-primary" :disabled="!isValidate"
-              @click="handleConfirmNewFolderName">{{ $t('app.modal_change_folder_name_ok') }}</button>
+            <button class="btn btn-sm mr-2">{{ $t('app.modal_change_folder_name_cancel') }}</button>
+            <button class="btn btn-sm btn-primary" :disabled="!isValidate" @click="handleConfirmNewFolderName">{{
+              $t('app.modal_change_folder_name_ok') }}</button>
           </form>
         </div>
       </div>
diff --git a/components/modal/confirm-change-adapter/index.vue b/components/modal/confirm-change-adapter/index.vue
index 263a23b..8d4c4c3 100644
--- a/components/modal/confirm-change-adapter/index.vue
+++ b/components/modal/confirm-change-adapter/index.vue
@@ -15,8 +15,8 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-confirm-change-adapter" class="modal">
-    <div class="modal-box p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-confirm-change-adapter" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -27,10 +27,10 @@ const handleClickClose = () => {
         <div class="modal-action">
           <form method="dialog">
             <!-- if there is a button in form, it will close the modal -->
-            <button class="btn btn-sm lg:btn-md mr-2">
+            <button class="btn btn-sm mr-2">
               {{ $t('app.modal_confirm_change_adapter_cancel') }}
             </button>
-            <button class="btn btn-outline btn-sm lg:btn-md btn-error text-error-content" @click="handleConfirm">
+            <button class="btn btn-outline btn-sm btn-error text-error-content" @click="handleConfirm">
               {{ $t('app.modal_confirm_change_adapter_ok') }}
             </button>
           </form>
diff --git a/components/modal/confirm-delete-folder/index.vue b/components/modal/confirm-delete-folder/index.vue
index 8bbac5b..9f7a40b 100644
--- a/components/modal/confirm-delete-folder/index.vue
+++ b/components/modal/confirm-delete-folder/index.vue
@@ -16,8 +16,8 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-confirm-delete-folder" class="modal">
-    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-neutral">
+  <dialog id="modal-confirm-delete-folder" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -28,10 +28,10 @@ const handleClickClose = () => {
         <div class="modal-action">
           <form method="dialog">
             <!-- if there is a button in form, it will close the modal -->
-            <button class="btn btn-sm lg:btn-md mr-2">
+            <button class="btn btn-sm mr-2">
               {{ $t('app.modal_confirm_delete_folder_cancel') }}
             </button>
-            <button class="btn btn-sm lg:btn-md btn-primary" @click="handleConfirm">
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
               {{ $t('app.modal_confirm_delete_folder_ok') }}
             </button>
           </form>
diff --git a/components/modal/confirm-delete-note-history/index.vue b/components/modal/confirm-delete-note-history/index.vue
new file mode 100644
index 0000000..6e581df
--- /dev/null
+++ b/components/modal/confirm-delete-note-history/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps(['snapshotId']);
+
+const emit = defineEmits(['confirm', 'close']);
+
+const handleConfirm = () => {
+  emit('confirm', props.snapshotId);
+};
+
+const handleClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <dialog id="modal-confirm-delete-note-history" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_confirm_delete_note_history_title') }}</h3>
+      <div class="pt-4">
+        <div>{{ $t('app.modal_confirm_delete_note_history_content') }}</div>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn btn-sm mr-2">
+              {{ $t('app.modal_confirm_delete_note_history_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
+              {{ $t('app.modal_confirm_delete_note_history_ok') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/confirm-delete-tag/index.vue b/components/modal/confirm-delete-tag/index.vue
new file mode 100644
index 0000000..63d6cc3
--- /dev/null
+++ b/components/modal/confirm-delete-tag/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps(['tagId']);
+
+const emit = defineEmits([
+  'confirm',
+  'close',
+]);
+
+const handleConfirm = () => {
+  emit('confirm', props.tagId);
+};
+
+const handleClickClose = () => {
+  emit('close');
+}
+</script>
+
+<template>
+  <dialog id="modal-confirm-delete-tag" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_confirm_delete_tag_title') }}</h3>
+      <div class="pt-4">
+        <div>{{ $t('app.modal_confirm_delete_tag_content') }}</div>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn btn-sm mr-2">
+              {{ $t('app.modal_confirm_delete_tag_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
+              {{ $t('app.modal_confirm_delete_tag_ok') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/confirm-e2ee-key/index.vue b/components/modal/confirm-e2ee-key/index.vue
index c622fcd..0dbe606 100644
--- a/components/modal/confirm-e2ee-key/index.vue
+++ b/components/modal/confirm-e2ee-key/index.vue
@@ -3,8 +3,6 @@ const emit = defineEmits([
   'confirm',
   'close',
 ]);
-const isValidate = computed(() => !!inputE2eeKey.value);
-
 const inputE2eeKeyKey = ref(0);
 const handleClickSubmit = () => {
   inputE2eeKeyKey.value += 1;
@@ -12,6 +10,20 @@ const handleClickSubmit = () => {
 }
 
 const inputE2eeKey = ref<string>('');
+const isKeyValid = ref<boolean>(false);
+watch(inputE2eeKey, async (val) => {
+  if (!val) {
+    isKeyValid.value = false;
+    return;
+  }
+  try {
+    await importKey(atob(val));
+    isKeyValid.value = true;
+  } catch {
+    isKeyValid.value = false;
+  }
+}, { immediate: true });
+
 const isGenerateKey = ref<boolean>(false);
 const handleClickGenerateKey = async () => {
   const key = await generateKey();
@@ -27,11 +39,11 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-confirm-e2ee-key" class="modal modal-top lg:modal-middle">
-    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-confirm-e2ee-key"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
-        <button class="btn btn-sm lg:btn-md btn-circle btn-ghost absolute right-2 top-2"
-          @click="handleClickClose">✕</button>
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
       <h3 class="font-bold text-lg">
         {{ $t('app.modal_confirm_e2ee_key_title') }}
@@ -50,10 +62,10 @@ const handleClickClose = () => {
 
         <div class="modal-action">
           <form method="dialog">
-            <button class="btn btn-sm lg:btn-md mr-2">
+            <button class="btn btn-sm mr-2">
               {{ $t('app.modal_confirm_e2ee_key_cancel') }}
             </button>
-            <button class="btn btn-sm lg:btn-md btn-primary" @click="handleClickSubmit" :disabled="!isValidate">
+            <button class="btn btn-sm btn-primary" @click="handleClickSubmit" :disabled="!isKeyValid">
               {{ $t('app.modal_confirm_e2ee_key_ok') }}
             </button>
           </form>
diff --git a/components/modal/confirm-image-sync-change/index.vue b/components/modal/confirm-image-sync-change/index.vue
new file mode 100644
index 0000000..5da662b
--- /dev/null
+++ b/components/modal/confirm-image-sync-change/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const emit = defineEmits(['confirm', 'close']);
+
+const handleConfirm = () => {
+  emit('confirm');
+};
+
+const handleClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <dialog id="modal-confirm-image-sync-change"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.confirm_image_sync_change_title') }}</h3>
+      <div class="pt-4">
+        <p class="text-sm text-base-content/70">{{ $t('app.confirm_image_sync_change_message') }}</p>
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-sm mr-2" @click="handleClickClose">
+              {{ $t('app.confirm_image_sync_change_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-warning" @click="handleConfirm">
+              {{ $t('app.confirm_image_sync_change_confirm') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/confirm-restore-note-history/index.vue b/components/modal/confirm-restore-note-history/index.vue
new file mode 100644
index 0000000..ae8db30
--- /dev/null
+++ b/components/modal/confirm-restore-note-history/index.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps(['snapshotId']);
+
+const emit = defineEmits(['confirm', 'close']);
+
+const handleConfirm = () => {
+  emit('confirm', props.snapshotId);
+};
+
+const handleClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <dialog id="modal-confirm-restore-note-history" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_confirm_restore_note_history_title') }}</h3>
+      <div class="pt-4">
+        <div>{{ $t('app.modal_confirm_restore_note_history_content') }}</div>
+
+        <div class="flex items-center gap-4 mt-2 text-xs opacity-60">
+          <span class="flex items-center gap-1.5">
+            <span class="w-2.5 h-2.5 rounded-sm bg-success/40 shrink-0"></span>
+            {{ $t('app.modal_note_history_diff_legend_current') }}
+          </span>
+          <span class="flex items-center gap-1.5">
+            <span class="w-2.5 h-2.5 rounded-sm bg-error/40 shrink-0"></span>
+            {{ $t('app.modal_note_history_diff_legend_backup') }}
+          </span>
+        </div>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn btn-sm mr-2">
+              {{ $t('app.modal_confirm_restore_note_history_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
+              {{ $t('app.modal_confirm_restore_note_history_ok') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/confirm-sample-data/index.vue b/components/modal/confirm-sample-data/index.vue
new file mode 100644
index 0000000..bc61b3e
--- /dev/null
+++ b/components/modal/confirm-sample-data/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const emit = defineEmits(['confirm', 'close']);
+
+const handleConfirm = () => {
+  emit('confirm');
+};
+
+const handleClickClose = () => {
+  emit('close');
+}
+</script>
+
+<template>
+  <dialog id="modal-confirm-sample-data" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 w-5/6 lg:w-96 lg:p-6 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_confirm_sample_data_title') }}</h3>
+      <div class="pt-4">
+        <div>{{ $t('app.modal_confirm_sample_data_content') }}</div>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-sm mr-2" @click="handleClickClose">
+              {{ $t('app.modal_confirm_sample_data_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
+              {{ $t('app.modal_confirm_sample_data_ok') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/export-notes-confirm/index.vue b/components/modal/export-notes-confirm/index.vue
index c40e724..721e917 100644
--- a/components/modal/export-notes-confirm/index.vue
+++ b/components/modal/export-notes-confirm/index.vue
@@ -36,8 +36,9 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-export-notes-confirm" class="modal modal-top lg:modal-middle">
-    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-export-notes-confirm"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -57,10 +58,10 @@ const handleClickClose = () => {
 
         <div class="modal-action">
           <form method="dialog">
-            <button class="btn btn-sm lg:btn-md mr-2" @click="handleIgnorePassword">
+            <button class="btn btn-sm mr-2" @click="handleIgnorePassword">
               Bỏ qua
             </button>
-            <button class="btn btn-sm lg:btn-md btn-primary" @click="handleConfirmPassword">
+            <button class="btn btn-sm btn-primary" @click="handleConfirmPassword">
               Xác nhận
             </button>
           </form>
diff --git a/components/modal/image-sync-config/index.vue b/components/modal/image-sync-config/index.vue
new file mode 100644
index 0000000..703c05b
--- /dev/null
+++ b/components/modal/image-sync-config/index.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+defineProps<{
+  s3Config: {
+    s3Endpoint: string;
+    s3AccessKey: string;
+    s3SecretKey: string;
+    s3Bucket: string;
+    workerUrl: string;
+  };
+  isDirty: boolean;
+  isComplete: boolean;
+  testStatus: 'idle' | 'testing' | 'success' | 'failed';
+}>();
+
+const emit = defineEmits(['save', 'test', 'close']);
+
+const handleClickClose = () => emit('close');
+</script>
+
+<template>
+  <dialog id="modal-image-sync-config"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg pr-8">{{ $t('app.setting_image_sync_config_title') }}</h3>
+
+      <div class="pt-4 space-y-3">
+        <label class="form-control w-full">
+          <div class="label py-1">
+            <span class="label-text text-xs">{{ $t('app.setting_image_sync_s3_endpoint') }}</span>
+          </div>
+          <input v-model="s3Config.s3Endpoint" type="text" placeholder="https://s3.amazonaws.com"
+            class="input input-sm input-bordered w-full" autocomplete="off" />
+        </label>
+
+        <label class="form-control w-full">
+          <div class="label py-1">
+            <span class="label-text text-xs">{{ $t('app.setting_image_sync_s3_access_key') }}</span>
+          </div>
+          <input v-model="s3Config.s3AccessKey" type="text" placeholder="AKIAIOSFODNN7EXAMPLE"
+            class="input input-sm input-bordered w-full" autocomplete="off" />
+        </label>
+
+        <label class="form-control w-full">
+          <div class="label py-1">
+            <span class="label-text text-xs">{{ $t('app.setting_image_sync_s3_secret_key') }}</span>
+          </div>
+          <input v-model="s3Config.s3SecretKey" type="password" placeholder="••••••••"
+            class="input input-sm input-bordered w-full" autocomplete="off" />
+        </label>
+
+        <label class="form-control w-full">
+          <div class="label py-1">
+            <span class="label-text text-xs">{{ $t('app.setting_image_sync_s3_bucket') }}</span>
+          </div>
+          <input v-model="s3Config.s3Bucket" type="text" placeholder="my-bucket"
+            class="input input-sm input-bordered w-full" autocomplete="off" />
+        </label>
+
+        <label class="form-control w-full">
+          <div class="label py-1">
+            <span class="label-text text-xs">{{ $t('app.setting_image_sync_worker_url') }}</span>
+            <span class="label-text-alt text-xs">{{ $t('app.setting_image_sync_worker_url_optional') }}</span>
+          </div>
+          <input v-model="s3Config.workerUrl" type="text"
+            :placeholder="$t('app.setting_image_sync_worker_url_placeholder')"
+            class="input input-sm input-bordered w-full" autocomplete="off" />
+        </label>
+
+        <button class="btn btn-sm w-full !text-sm" :class="{
+          'btn-success': testStatus === 'success',
+          'btn-error': testStatus === 'failed',
+          'btn-outline': testStatus === 'idle'
+        }" :disabled="testStatus === 'testing' || !isComplete" @click="emit('test')">
+          <span v-if="testStatus === 'idle'">{{ $t('app.setting_image_sync_test_connection') }}</span>
+          <span v-else-if="testStatus === 'testing'" class="loading loading-spinner loading-sm"></span>
+          <span v-else-if="testStatus === 'success'">{{ $t('app.setting_image_sync_connected') }}</span>
+          <span v-else-if="testStatus === 'failed'">{{ $t('app.setting_image_sync_failed') }}</span>
+        </button>
+
+        <p class="text-xs text-base-content/60">
+          {{ $t('app.setting_image_sync_hint') }}
+        </p>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-sm mr-2" @click="handleClickClose">
+              {{ $t('app.modal_image_sync_config_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" :disabled="!isDirty" @click="emit('save')">
+              {{ $t('app.setting_image_sync_save') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/import-notes/index.vue b/components/modal/import-notes/index.vue
index 3738eaa..20a7225 100644
--- a/components/modal/import-notes/index.vue
+++ b/components/modal/import-notes/index.vue
@@ -62,11 +62,10 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-import-notes" class="modal">
-    <div class="modal-box p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-import-notes" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
-        <button class="btn btn-sm lg:btn-md btn-circle btn-ghost absolute right-2 top-2"
-          @click="handleClickClose">✕</button>
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
       <h3 class="font-bold text-lg">
         {{ $t('app.modal_import_notes_title') }}
@@ -82,10 +81,10 @@ const handleClickClose = () => {
 
         <div class="modal-action">
           <form method="dialog">
-            <button class="btn btn-sm lg:btn-md mr-2">
+            <button class="btn btn-sm mr-2">
               {{ $t('app.modal_import_notes_cancel') }}
             </button>
-            <button class="btn btn-sm lg:btn-md btn-primary" @click="handleClickSubmit" :disabled="!isValidate">
+            <button class="btn btn-sm btn-primary" @click="handleClickSubmit" :disabled="!isValidate">
               {{ $t('app.modal_import_notes_ok') }}
             </button>
           </form>
diff --git a/components/modal/insert-image/index.vue b/components/modal/insert-image/index.vue
index 1cf6e45..a87255f 100644
--- a/components/modal/insert-image/index.vue
+++ b/components/modal/insert-image/index.vue
@@ -41,8 +41,10 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-insert-image" class="modal modal-top lg:modal-middle">
-    <div id="modal-insert-image-content" class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-insert-image"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div id="modal-insert-image-content"
+      class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -68,7 +70,7 @@ const handleClickClose = () => {
         </div>
         <div class="form-control w-full pt-2">
           <div class="label"></div>
-          <button class="btn btn-sm lg:btn-md btn-primary" :disabled="!isValidate" @click="handleConfirm">
+          <button class="btn btn-sm btn-primary" :disabled="!isValidate" @click="handleConfirm">
             {{ $i18n.t('app.modal_insert_image_ok') }}
           </button>
         </div>
diff --git a/components/modal/insert-link/index.vue b/components/modal/insert-link/index.vue
index 7e876bb..af7aceb 100644
--- a/components/modal/insert-link/index.vue
+++ b/components/modal/insert-link/index.vue
@@ -36,8 +36,9 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-insert-link" class="modal modal-top lg:modal-middle">
-    <div id="modal-insert-link-content" class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-insert-link" class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div id="modal-insert-link-content"
+      class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -56,7 +57,7 @@ const handleClickClose = () => {
         </div>
         <div class="form-control w-full pt-2">
           <div class="label"></div>
-          <button class="btn btn-sm lg:btn-md btn-primary" :disabled="!isValidate" @click="handleConfirm">
+          <button class="btn btn-sm btn-primary" :disabled="!isValidate" @click="handleConfirm">
             Confirm
           </button>
         </div>
diff --git a/components/modal/menu-editor/index.vue b/components/modal/menu-editor/index.vue
index 6d3d7b5..0536aa8 100644
--- a/components/modal/menu-editor/index.vue
+++ b/components/modal/menu-editor/index.vue
@@ -16,8 +16,8 @@ const handleClickInfo = () => {
 </script>
 
 <template>
-  <dialog id="modal-menu-editor" class="modal">
-    <div class="modal-box p-0 w-5/6 border border-neutral">
+  <dialog id="modal-menu-editor" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
       <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1">
         <li class="w-full text-center" @click="handleClickCopy">
           <a class="w-full block text-center">{{ $t('app.menu_note_copy') }}</a>
diff --git a/components/modal/menu-folder/index.vue b/components/modal/menu-folder/index.vue
index a0b8ac1..e5383d3 100644
--- a/components/modal/menu-folder/index.vue
+++ b/components/modal/menu-folder/index.vue
@@ -15,14 +15,16 @@ const handleClickDeleteFolder = () => {
 </script>
 
 <template>
-  <dialog id="modal-menu-folder" class="modal">
-    <div class="modal-box p-0 w-5/6 border border-neutral">
+  <dialog id="modal-menu-folder" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
       <!-- <div class="bg-base-100 shadow-sm rounded"> -->
       <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1">
         <li class="w-full text-center" @click="handleClickRenameFolder">
           <a class="w-full block text-center">{{ $t('app.modal_menu_folder_rename') }}</a>
         </li>
 
+        <li></li>
+
         <li class="text-rose-500 w-full" @click="handleClickDeleteFolder">
           <a class="w-full block text-center">{{ $t('app.modal_menu_folder_delete') }}</a>
         </li>
diff --git a/components/modal/menu-move-note/index.vue b/components/modal/menu-move-note/index.vue
new file mode 100644
index 0000000..ff31722
--- /dev/null
+++ b/components/modal/menu-move-note/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps([
+  'listFolders',
+]);
+
+const emit = defineEmits(['selectFolder']);
+
+const handleClickFolder = (folderId: string) => {
+  emit('selectFolder', folderId);
+};
+</script>
+
+<template>
+  <dialog id="modal-menu-move-note" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
+      <div class="bg-base-100 shadow-sm rounded">
+        <div class="text-center text-xs opacity-60 pt-3 pb-1">{{ $t('app.modal_move_note_title') }}</div>
+
+        <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1 max-h-[60vh] overflow-y-auto">
+          <li v-if="!props.listFolders.length" class="w-full text-center py-2 opacity-60">
+            {{ $t('app.modal_move_note_empty') }}
+          </li>
+
+          <li v-for="folder in props.listFolders" :key="folder.id" class="w-full text-center"
+            @click="handleClickFolder(folder.id)">
+            <a class="w-full block text-center truncate">{{ folder.name }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
diff --git a/components/modal/menu-note-tags/index.vue b/components/modal/menu-note-tags/index.vue
new file mode 100644
index 0000000..08ed07b
--- /dev/null
+++ b/components/modal/menu-note-tags/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = defineProps([
+  'listTags',
+  'noteTagIds',
+]);
+
+const emit = defineEmits(['toggleTag']);
+
+const handleToggle = (tagId: string) => {
+  emit('toggleTag', tagId);
+};
+</script>
+
+<template>
+  <dialog id="modal-menu-note-tags" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
+      <div class="bg-base-100 shadow-sm rounded">
+        <div class="text-center text-xs opacity-60 pt-3 pb-1">{{ $t('app.menu_note_add_to_tag') }}</div>
+
+        <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1 max-h-[60vh] overflow-y-auto">
+          <li v-if="!props.listTags.length" class="w-full text-center py-2 opacity-60">
+            {{ $t('app.menu_note_tags_empty') }}
+          </li>
+
+          <li v-for="tag in props.listTags" :key="tag.id" class="w-full" @click.stop="handleToggle(tag.id)">
+            <a class="w-full flex flex-row items-center justify-center gap-3">
+              <input type="checkbox" class="checkbox checkbox-sm" :checked="props.noteTagIds.includes(tag.id)"
+                @click.stop="handleToggle(tag.id)" />
+              <span class="w-3 h-3 rounded-full shrink-0" :style="{ backgroundColor: tag.color || '#94a3b8' }"></span>
+              <span class="truncate">{{ tag.name }}</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
diff --git a/components/modal/menu-note/index.vue b/components/modal/menu-note/index.vue
index 31a9754..c9bdaf2 100644
--- a/components/modal/menu-note/index.vue
+++ b/components/modal/menu-note/index.vue
@@ -7,6 +7,10 @@ const props = defineProps([
 const emit = defineEmits([
   'pinNote',
   'copyNote',
+  'clickInfo',
+  'clickHistory',
+  'clickMove',
+  'clickAddToTag',
   'lockNote',
   'deleteNote',
   'restoreNote',
@@ -19,6 +23,18 @@ const handleClickPinNote = (status: number) => {
 const handleClickCopyNote = () => {
   emit('copyNote', props.noteId);
 };
+const handleClickInfo = () => {
+  emit('clickInfo', props.noteId);
+};
+const handleClickHistory = () => {
+  emit('clickHistory', props.noteId);
+};
+const handleClickMove = () => {
+  emit('clickMove', props.noteId);
+};
+const handleClickAddToTag = () => {
+  emit('clickAddToTag', props.noteId);
+};
 const handleClickLockNote = (status: number) => {
   emit('lockNote', { noteId: props.noteId, status });
 };
@@ -34,8 +50,8 @@ const handleClickDeleteNoteForever = () => {
 </script>
 
 <template>
-  <dialog id="modal-menu-note" class="modal">
-    <div class="modal-box p-0 w-5/6 border border-neutral">
+  <dialog id="modal-menu-note" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
       <div class="bg-base-100 shadow-sm rounded">
         <!-- case active notes -->
         <ul v-if="!formNotes.deletedAt"
@@ -49,11 +65,31 @@ const handleClickDeleteNoteForever = () => {
             <a class="w-full block text-center">{{ $t('app.modal_menu_note_copy') }}</a>
           </li>
 
+          <li class="w-full text-center" @click="handleClickMove">
+            <a class="w-full block text-center">{{ $t('app.modal_menu_note_move') }}</a>
+          </li>
+
+          <li class="w-full text-center" @click="handleClickAddToTag">
+            <a class="w-full block text-center">{{ $t('app.menu_note_add_to_tag') }}</a>
+          </li>
+
+          <li class="w-full text-center" @click="handleClickInfo">
+            <a class="w-full block text-center">{{ $t('app.modal_menu_note_info') }}</a>
+          </li>
+
+          <li class="w-full text-center" @click="handleClickHistory">
+            <a class="w-full block text-center">{{ $t('app.modal_menu_note_history') }}</a>
+          </li>
+
+          <li></li>
+
           <li class="w-full text-center" @click="handleClickLockNote(props.formNotes.isLocked)">
             <a class="w-full block text-center">{{ props.formNotes.isLocked ? $t('app.modal_menu_note_unlock') :
               $t('app.modal_menu_note_lock') }}</a>
           </li>
 
+          <li></li>
+
           <li class="text-rose-500 w-full" @click="handleClickDeleteNote">
             <a class="w-full block text-center">{{ $t('app.modal_menu_note_delete') }}</a>
           </li>
@@ -96,6 +132,12 @@ const handleClickDeleteNoteForever = () => {
             <a class="w-full block text-center">{{ $t('app.modal_menu_note_copy') }}</a>
           </li>
 
+          <li class="w-full text-center" @click="handleClickInfo">
+            <a class="w-full block text-center">{{ $t('app.modal_menu_note_info') }}</a>
+          </li>
+
+          <li></li>
+
           <li class="text-rose-500 w-full" @click="handleClickDeleteNoteForever">
             <a class="w-full block text-center">{{ $t('app.modal_menu_note_delete_forever') }}</a>
           </li>
diff --git a/components/modal/menu-sidebar/index.vue b/components/modal/menu-sidebar/index.vue
index 4fb0750..317fc11 100644
--- a/components/modal/menu-sidebar/index.vue
+++ b/components/modal/menu-sidebar/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+const props = defineProps(['isTagsMode']);
+
 const emit = defineEmits([
   'clickAddFolder',
+  'clickAddTag',
   'clickForceSync',
 ]);
 
-const handleClickAddFolder = () => {
-  emit('clickAddFolder');
+const handleClickAdd = () => {
+  emit(props.isTagsMode ? 'clickAddTag' : 'clickAddFolder');
 }
 
 const handleClickForceSync = () => {
@@ -14,11 +17,13 @@ const handleClickForceSync = () => {
 </script>
 
 <template>
-  <dialog id="modal-menu-sidebar" class="modal">
-    <div class="modal-box p-0 w-5/6 border border-neutral">
+  <dialog id="modal-menu-sidebar" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
       <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1">
-        <li class="w-full text-center" @click="handleClickAddFolder">
-          <a class="w-full block text-center">{{ $t('app.modal_menu_sidebar_new_folder') }}</a>
+        <li class="w-full text-center" @click="handleClickAdd">
+          <a class="w-full block text-center">
+            {{ props.isTagsMode ? $t('app.modal_menu_sidebar_new_tag') : $t('app.modal_menu_sidebar_new_folder') }}
+          </a>
         </li>
 
         <li class="text-rose-500 w-full" @click="handleClickForceSync">
diff --git a/components/modal/menu-tag/index.vue b/components/modal/menu-tag/index.vue
new file mode 100644
index 0000000..c086427
--- /dev/null
+++ b/components/modal/menu-tag/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps([
+  'tagId',
+]);
+
+const emit = defineEmits(['editTag', 'deleteTag']);
+
+const handleClickEditTag = () => {
+  emit('editTag', props.tagId);
+};
+
+const handleClickDeleteTag = () => {
+  emit('deleteTag', props.tagId);
+};
+</script>
+
+<template>
+  <dialog id="modal-menu-tag" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
+      <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1">
+        <li class="w-full text-center" @click="handleClickEditTag">
+          <a class="w-full block text-center">{{ $t('app.menu_tag_edit') }}</a>
+        </li>
+
+        <li></li>
+
+        <li class="text-rose-500 w-full" @click="handleClickDeleteTag">
+          <a class="w-full block text-center">{{ $t('app.menu_tag_delete') }}</a>
+        </li>
+      </ul>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
diff --git a/components/modal/note-history-diff/index.vue b/components/modal/note-history-diff/index.vue
new file mode 100644
index 0000000..2c9bdbc
--- /dev/null
+++ b/components/modal/note-history-diff/index.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import * as Diff from 'diff';
+import { getNoteDetail, getNoteHistory } from '~/services/main';
+
+const props = defineProps(['noteId', 'snapshotId']);
+const emit = defineEmits(['close']);
+
+const history = ref<any[]>([]);
+const currentContent = ref<string>('');
+
+const load = async () => {
+  if (!props.noteId) {
+    return;
+  }
+
+  history.value = await getNoteHistory(props.noteId);
+  const note = await getNoteDetail(props.noteId);
+  currentContent.value = note?.content || '';
+};
+
+watch(() => props.snapshotId, load, { immediate: true });
+
+const selectedSnapshot = computed(() => history.value.find((item: any) => item.id === props.snapshotId));
+
+const diffLines = computed(() => {
+  if (!selectedSnapshot.value) {
+    return [];
+  }
+
+  const parts = Diff.diffLines(selectedSnapshot.value.content, currentContent.value);
+  const lines: { type: 'added' | 'removed' | 'context'; text: string }[] = [];
+
+  parts.forEach((part: any) => {
+    const type = part.added ? 'added' : part.removed ? 'removed' : 'context';
+    const partLines = part.value.split('\n');
+    partLines.forEach((line: string, idx: number) => {
+      if (idx === partLines.length - 1 && line === '') {
+        return;
+      }
+      lines.push({ type, text: line });
+    });
+  });
+
+  return lines;
+});
+
+const hasChanges = computed(() => diffLines.value.some((line) => line.type !== 'context'));
+
+const handleClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <dialog id="modal-note-history-diff" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box w-5/6 lg:w-[36rem] border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_note_history_diff_title') }}</h3>
+
+      <div class="py-4">
+        <p v-if="!hasChanges" class="text-center opacity-65 py-4">
+          {{ $t('app.modal_note_history_diff_empty') }}
+        </p>
+
+        <div v-else class="text-xs overflow-x-auto max-h-96 overflow-y-auto rounded-lg">
+          <div v-for="(line, idx) in diffLines" :key="idx" class="flex items-start gap-2 px-1 py-0.5" :class="{
+            'bg-success/15': line.type === 'added',
+            'bg-error/15': line.type === 'removed',
+            'opacity-70': line.type === 'context',
+          }">
+            <span class="select-none opacity-60 w-3 shrink-0 text-center">{{ line.type === 'added' ? '+' : line.type === 'removed' ? '-' :
+              '' }}</span>
+            <span class="flex-1 min-w-0 whitespace-pre-wrap">{{ line.text }}</span>
+          </div>
+        </div>
+
+        <div v-if="hasChanges" class="flex items-center gap-4 mt-2 text-xs opacity-60">
+          <span class="flex items-center gap-1.5">
+            <span class="w-2.5 h-2.5 rounded-sm bg-success/40 shrink-0"></span>
+            {{ $t('app.modal_note_history_diff_legend_current') }}
+          </span>
+          <span class="flex items-center gap-1.5">
+            <span class="w-2.5 h-2.5 rounded-sm bg-error/40 shrink-0"></span>
+            {{ $t('app.modal_note_history_diff_legend_backup') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
diff --git a/components/modal/note-history/index.vue b/components/modal/note-history/index.vue
new file mode 100644
index 0000000..875e0e3
--- /dev/null
+++ b/components/modal/note-history/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import dayjs from 'dayjs';
+dayjs.extend(localizedFormat);
+
+import Restore from '~/assets/svg/restore.svg?component';
+import Trash from '~/assets/svg/trash-2.svg?component';
+import Lock from '~/assets/svg/lock.svg?component';
+
+const props = defineProps(['history', 'isLocked']);
+const emit = defineEmits(['close', 'viewDiff', 'restoreRequested', 'deleteRequested']);
+
+const handleClickClose = () => {
+  emit('close');
+};
+
+const handleViewDiff = (snapshotId: string) => {
+  if (props.isLocked) {
+    return;
+  }
+  emit('viewDiff', snapshotId);
+};
+
+const handleClickRestore = (snapshotId: string) => {
+  if (props.isLocked) {
+    return;
+  }
+  emit('restoreRequested', snapshotId);
+};
+
+const handleClickDelete = (snapshotId: string) => {
+  emit('deleteRequested', snapshotId);
+};
+</script>
+
+<template>
+  <dialog id="modal-note-history" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm"
+    @close="handleClickClose">
+    <div class="modal-box w-5/6 lg:w-96 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">{{ $t('app.modal_note_history_title') }}</h3>
+
+      <div class="py-4">
+        <p v-if="!history.length" class="text-center opacity-65 py-4">
+          {{ $t('app.modal_note_history_empty') }}
+        </p>
+
+        <ul v-else class="menu bg-base-100 rounded-box w-full gap-1 p-0">
+          <li v-for="item in history" :key="item.id" class="w-full">
+            <div class="w-full flex items-center justify-between gap-2 rounded-lg lg:bg-base-200 p-2.5"
+              :class="isLocked ? 'cursor-default' : 'cursor-pointer'" @click="handleViewDiff(item.id)">
+              <div class="flex items-center gap-2 overflow-hidden">
+                <Lock v-if="isLocked" class="w-3 h-3 shrink-0 text-warning" />
+                <div class="overflow-hidden">
+                  <p class="text-sm truncate">{{ dayjs.unix(item.snapshotAt).format('lll') }}</p>
+                  <p v-if="!isLocked" class="text-xs opacity-65 truncate">
+                    {{ removeSpecialChar(substrTitle(item.content)) || $t('app.list_note_no_title') }}
+                  </p>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 shrink-0">
+                <Restore v-if="!isLocked" class="w-4 h-4 cursor-pointer opacity-80 hover:opacity-100"
+                  @click.stop="handleClickRestore(item.id)" />
+                <Trash class="w-4 h-4 cursor-pointer opacity-80 hover:opacity-100 text-rose-500"
+                  @click.stop="handleClickDelete(item.id)" />
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
diff --git a/components/modal/notes-detail/index.vue b/components/modal/notes-detail/index.vue
index 7f3fffb..41807fb 100644
--- a/components/modal/notes-detail/index.vue
+++ b/components/modal/notes-detail/index.vue
@@ -24,8 +24,8 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-notes-detail" class="modal">
-    <div class="modal-box w-5/6 lg:w-[30rem] lg:max-w-3xl border border-neutral">
+  <dialog id="modal-notes-detail" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box w-5/6 lg:w-[30rem] lg:max-w-3xl border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -40,7 +40,8 @@ const handleClickClose = () => {
           <p class="mb-1.5 truncate overflow-hidden opacity-65">{{ $t('app.modal_notes_detail_character_count') }}</p>
         </div>
         <div class="col-span-2 text-right">
-          <p class="mb-1.5 truncate overflow-hidden">{{ noteInfo.lastSync && dayjs.unix(noteInfo.lastSync).format('lll') || 'N/A' }}</p>
+          <p class="mb-1.5 truncate overflow-hidden">{{ noteInfo.lastSync && dayjs.unix(noteInfo.lastSync).format('lll')
+            || 'N/A' }}</p>
           <p class="mb-1.5 truncate overflow-hidden">{{ dayjs.unix(noteInfo.updatedAt).format('lll') }}</p>
           <p class="mb-1.5 truncate overflow-hidden">{{ dayjs.unix(noteInfo.createdAt).format('lll') }}</p>
           <p class="mb-1.5 truncate overflow-hidden">{{ wordsCount }}</p>
diff --git a/components/modal/set-password/index.vue b/components/modal/set-password/index.vue
index 09802ff..add2c47 100644
--- a/components/modal/set-password/index.vue
+++ b/components/modal/set-password/index.vue
@@ -4,6 +4,7 @@ const { $i18n } = useNuxtApp();
 
 const props = defineProps([
   'type',
+  'isLoading',
 ]);
 
 const emit = defineEmits([
@@ -69,15 +70,29 @@ defineExpose({
 });
 
 const handleClickClose = () => {
+  if (props.isLoading) {
+    return;
+  }
   emit('close');
 }
+
+onMounted(() => {
+  document.getElementById('modal-set-password')?.addEventListener('cancel', (e) => {
+    if (props.isLoading) {
+      e.preventDefault();
+    }
+  });
+});
 </script>
 
 <template>
-  <dialog id="modal-set-password" class="modal modal-top lg:modal-middle">
-    <div id="modal-set-password-content" class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-set-password"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div id="modal-set-password-content"
+      class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
-        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" :disabled="props.isLoading"
+          @click="handleClickClose">✕</button>
       </form>
       <h3 class="font-bold text-lg">
         {{ props.type === 'set' ? $t('app.modal_set_password_title') : $t('app.modal_set_password_change_title') }}
@@ -106,7 +121,7 @@ const handleClickClose = () => {
         <div class="form-control w-full pt-2">
           <div class="label">
             <span class="font-semibold label-text">{{ $t('app.modal_set_password_confirm_password_input_title')
-              }}</span>
+            }}</span>
           </div>
           <input ref="inputPasswordRef" v-model="confirmPassword" type="password"
             :placeholder="$t('app.modal_set_password_confirm_password_input_title')"
@@ -116,8 +131,10 @@ const handleClickClose = () => {
 
         <div class="form-control w-full pt-2">
           <div class="label"></div>
-          <button class="btn btn-sm lg:btn-md btn-primary" :disabled="!isValidate" @click="handleConfirmPassword">
-            {{ $t('app.modal_set_password_ok') }}
+          <button class="btn btn-sm btn-primary" :disabled="!isValidate || props.isLoading"
+            @click="handleConfirmPassword">
+            <span v-if="props.isLoading" class="loading loading-spinner loading-xs"></span>
+            {{ props.isLoading ? $t('app.modal_set_password_processing') : $t('app.modal_set_password_ok') }}
           </button>
         </div>
       </div>
diff --git a/components/modal/setting/index.vue b/components/modal/setting/index.vue
index 888cc46..0efc11f 100644
--- a/components/modal/setting/index.vue
+++ b/components/modal/setting/index.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
-import ChevronRight from '../assets/svg/chevron-right.svg?component';
+import SettingIcon from '../assets/svg/settings.svg?component';
+import SecurityIcon from '../assets/svg/fingerprint.svg?component';
+import SyncIcon from '../assets/svg/cloud.svg?component';
+import ToolIcon from '../assets/svg/tool-case.svg?component';
+import InfoIcon from '../assets/svg/info.svg?component';
+import SettingRow from './setting-row.vue';
+import SettingSelect from './setting-select.vue';
 import S3ProxyAdapter from '~/adapter/s3';
+import { resetSyncedImages } from '~/services/image';
 
 const { setLocale } = useI18n();
 const { $i18n } = useNuxtApp();
@@ -28,30 +35,30 @@ const emit = defineEmits([
   'closeSetting',
 ]);
 
+const tabs = computed(() => [
+  { key: 'general', label: $i18n.t('app.setting_general_title'), icon: SettingIcon },
+  { key: 'security', label: $i18n.t('app.setting_security_title'), icon: SecurityIcon },
+  { key: 'sync', label: $i18n.t('app.setting_sync_title'), icon: SyncIcon },
+  { key: 'tools', label: $i18n.t('app.setting_tools_title'), icon: ToolIcon },
+  { key: 'about', label: $i18n.t('app.setting_about_title'), icon: InfoIcon },
+]);
+
 const tabIndex = ref<number>(0);
-const tabTitle = ref<string>($i18n.t('app.setting_general_title'));
+const tabTitle = computed(() => tabs.value[tabIndex.value]?.label ?? '');
 const handleClickTab = (index: number) => {
   tabIndex.value = index;
-  switch (index) {
-    case 0:
-      tabTitle.value = $i18n.t('app.setting_general_title');
-      break;
-    case 1:
-      tabTitle.value = $i18n.t('app.setting_sync_title');
-      break;
-    case 2:
-      tabTitle.value = $i18n.t('app.setting_tools_title');
-      break;
-    case 3:
-      tabTitle.value = $i18n.t('app.setting_about_title');
-      break;
-  }
 }
 
 const settings = ref<any>(props.settings);
 watch(() => props.settings, (newValue) => {
+  const hasPendingAdapterChange = isAdapterChanged.value;
   settings.value = newValue;
-  adapterSelect.value = settings.value.sync.adapter;
+  if (!hasPendingAdapterChange) {
+    adapterSelect.value = settings.value.sync.adapter;
+  }
+  // Keep draft in sync when settings are committed externally (e.g., parent reload)
+  draftS3Config.value = buildDraft(newValue?.imageSync);
+  fontFamilyDraft.value = newValue?.general?.fontFamily || '';
 }, { deep: true });
 
 // onMounted(() => {
@@ -94,14 +101,59 @@ defineExpose({
 });
 
 const adapterSelect = ref<string>('');
+
+type S3Config = {
+  s3Endpoint: string;
+  s3AccessKey: string;
+  s3SecretKey: string;
+  s3Bucket: string;
+  workerUrl: string;
+};
+
+const buildDraft = (cfg: any): S3Config => ({
+  s3Endpoint: cfg?.s3Endpoint || '',
+  s3AccessKey: cfg?.s3AccessKey || '',
+  s3SecretKey: cfg?.s3SecretKey || '',
+  s3Bucket: cfg?.s3Bucket || '',
+  workerUrl: cfg?.workerUrl || '',
+});
+
+// Draft S3 config: what the user is currently editing in the form.
+// Only committed to settings.value when user clicks Save.
+const draftS3Config = ref<S3Config>(buildDraft(null));
+
+// Draft font family: only committed to settings.value when user clicks Save.
+const fontFamilyDraft = ref<string>('');
+
 onMounted(() => {
   adapterSelect.value = settings.value.sync.adapter;
+  draftS3Config.value = buildDraft(props.settings?.imageSync);
+  fontFamilyDraft.value = props.settings?.general?.fontFamily || '';
 });
 // change adapter
 const isAdapterChanged = computed(() => adapterSelect.value !== settings.value.sync.adapter);
 const handleSaveAdapter = (e: Event) => {
   emit('saveAdapter', adapterSelect.value);
 }
+const handleCancelAdapterChange = () => {
+  adapterSelect.value = settings.value.sync.adapter;
+}
+
+// font family
+const isFontFamilyDirty = computed(() => (props.settings?.general?.fontFamily || '') !== fontFamilyDraft.value);
+const handleSaveFontFamily = () => {
+  settings.value = {
+    ...settings.value,
+    general: {
+      ...settings.value.general,
+      fontFamily: fontFamilyDraft.value,
+    },
+  };
+  handleSaveSettings();
+}
+const handleCancelFontFamily = () => {
+  fontFamilyDraft.value = props.settings?.general?.fontFamily || '';
+}
 
 // export notes
 const handleClickExportNotes = () => {
@@ -122,6 +174,13 @@ const handleClickResetServiceWorker = () => {
     window.location.href = window.location.href;
   });
 }
+const handleClickForceUpdate = async () => {
+  if ('caches' in window) {
+    const keys = await caches.keys();
+    await Promise.all(keys.map((key) => caches.delete(key)));
+  }
+  window.location.reload();
+}
 
 const handleClickCloseSettings = () => {
   emit('closeSetting');
@@ -129,23 +188,51 @@ const handleClickCloseSettings = () => {
 
 // Image sync settings
 const imageSyncTestStatus = ref<'idle' | 'testing' | 'success' | 'failed'>('idle');
+const isShowModalConfirmImageSyncChange = ref(false);
+
+// Enable Save button when draft differs from last saved state
+const isS3ConfigDirty = computed(() => {
+  const saved = props.settings?.imageSync;
+  const draft = draftS3Config.value;
+  const fields: (keyof S3Config)[] = ['s3Endpoint', 's3Bucket', 's3AccessKey', 's3SecretKey', 'workerUrl'];
+  return fields.some((f) => (saved?.[f] || '') !== (draft[f] || ''));
+});
 
-// Check if S3 config is complete
+// True only when storage location fields changed (triggers confirmation + image reset)
+const hasCriticalS3Changed = (): boolean => {
+  const saved = props.settings?.imageSync;
+  const draft = draftS3Config.value;
+  const critical: (keyof S3Config)[] = ['s3Endpoint', 's3Bucket', 's3AccessKey', 's3SecretKey'];
+  return critical.some((f) => (saved?.[f] || '') !== (draft[f] || ''));
+};
+
+// Check if S3 config draft is complete enough to test
 const isS3ConfigComplete = computed(() => {
-  const cfg = settings.value.imageSync;
-  return cfg?.s3Endpoint && cfg?.s3AccessKey && cfg?.s3SecretKey && cfg?.s3Bucket;
+  const d = draftS3Config.value;
+  return Boolean(d.s3Endpoint && d.s3AccessKey && d.s3SecretKey && d.s3Bucket);
 });
 
+// Apply draft into settings.value before saving
+const applyDraftToSettings = () => {
+  settings.value = {
+    ...settings.value,
+    imageSync: {
+      ...settings.value.imageSync,
+      ...draftS3Config.value,
+    },
+  };
+};
+
 const handleTestImageSyncConnection = async () => {
   imageSyncTestStatus.value = 'testing';
 
   try {
     const adapter = new S3ProxyAdapter({
-      workerUrl: settings.value.imageSync?.workerUrl || '',
-      s3Endpoint: settings.value.imageSync?.s3Endpoint || '',
-      s3AccessKey: settings.value.imageSync?.s3AccessKey || '',
-      s3SecretKey: settings.value.imageSync?.s3SecretKey || '',
-      s3Bucket: settings.value.imageSync?.s3Bucket || '',
+      workerUrl: draftS3Config.value.workerUrl || '',
+      s3Endpoint: draftS3Config.value.s3Endpoint || '',
+      s3AccessKey: draftS3Config.value.s3AccessKey || '',
+      s3SecretKey: draftS3Config.value.s3SecretKey || '',
+      s3Bucket: draftS3Config.value.s3Bucket || '',
     });
 
     const isConnected = await adapter.checkConnection();
@@ -154,360 +241,290 @@ const handleTestImageSyncConnection = async () => {
     imageSyncTestStatus.value = 'failed';
   }
 
-  // Reset status after 3 seconds
   setTimeout(() => {
     imageSyncTestStatus.value = 'idle';
   }, 3000);
-}
+};
 
 const handleSaveImageSyncSettings = () => {
+  if (hasCriticalS3Changed()) {
+    isShowModalConfirmImageSyncChange.value = true;
+    setTimeout(() => {
+      (document.getElementById('modal-confirm-image-sync-change') as any)?.showModal();
+    }, 100);
+    return;
+  }
+  applyDraftToSettings();
   handleSaveSettings();
-}
+};
+
+const handleConfirmImageSyncChange = async () => {
+  (document.getElementById('modal-confirm-image-sync-change') as any)?.close();
+  isShowModalConfirmImageSyncChange.value = false;
+  applyDraftToSettings();
+  handleSaveSettings();
+  await resetSyncedImages();
+};
+
+const handleCancelImageSyncChange = () => {
+  (document.getElementById('modal-confirm-image-sync-change') as any)?.close();
+  isShowModalConfirmImageSyncChange.value = false;
+  draftS3Config.value = buildDraft(props.settings?.imageSync);
+};
+
+// Sync Configuration (JSON) modal
+const isShowModalSyncConfig = ref(false);
+const handleOpenSyncConfigModal = () => {
+  isShowModalSyncConfig.value = true;
+  setTimeout(() => (document.getElementById('modal-sync-config') as any)?.showModal(), 100);
+};
+const handleConfirmSyncConfig = (value: string) => {
+  settings.value.sync.configuration = value;
+  (document.getElementById('modal-sync-config') as any)?.close();
+  isShowModalSyncConfig.value = false;
+  handleSaveSettings();
+};
+const handleCloseSyncConfigModal = () => {
+  (document.getElementById('modal-sync-config') as any)?.close();
+  isShowModalSyncConfig.value = false;
+};
+
+// Image Sync S3 config modal
+const isShowModalImageSyncConfig = ref(false);
+const handleOpenImageSyncConfigModal = () => {
+  isShowModalImageSyncConfig.value = true;
+  setTimeout(() => (document.getElementById('modal-image-sync-config') as any)?.showModal(), 100);
+};
+const handleCloseImageSyncConfigModal = () => {
+  (document.getElementById('modal-image-sync-config') as any)?.close();
+  isShowModalImageSyncConfig.value = false;
+};
+const handleSaveImageSyncConfigModal = () => {
+  isShowModalImageSyncConfig.value = false;
+  handleSaveImageSyncSettings();
+};
 </script>
 
 <template>
-  <dialog id="modal-settings" class="modal">
-    <div class="modal-box w-full h-[34rem] overflow-hidden p-0 border border-neutral shadow-xl">
-      <!-- <span class="absolute bottom-2 right-4 text-sm underline">{{ runtimeConfig.public.version }}</span> -->
-      <form method="dialog">
-        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-          @click="handleClickCloseSettings">✕</button>
-      </form>
-
+  <dialog id="modal-settings" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div
+      class="modal-box w-full max-w-3xl h-[38rem] max-h-[85vh] overflow-hidden p-0 rounded-2xl border border-base-content/15 shadow-2xl">
       <div class="flex flex-row h-full">
-        <div class="w-1/3 float-left flex flex-col gap-4 bg-base-300 px-4 py-8">
-          <div class="flex flex-col justify-center px-2">
-            <p class="text-3xl font-bold">Settings</p>
-            <p class="text-normal">Manage your settings</p>
+        <!-- sidebar -->
+        <div class="w-60 shrink-0 flex flex-col gap-1 bg-base-100 border-r border-base-content/15 px-3 py-5 overflow-y-auto">
+          <form method="dialog" class="px-1 pb-3">
+            <button class="btn btn-sm btn-ghost btn-square" @click="handleClickCloseSettings">✕</button>
+          </form>
+
+          <button v-for="(tab, i) in tabs" :key="tab.key" type="button"
+            class="flex items-center gap-3 px-3 py-2.5 rounded-lg !text-base text-left transition-colors"
+            :class="tabIndex === i ? 'bg-base-200 font-medium' : 'bg-transparent hover:bg-base-200 text-base-content/80'"
+            @click="handleClickTab(i)">
+            <component :is="tab.icon" class="h-5 w-5 shrink-0" />
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- content -->
+        <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+          <div id="setting-content" class="flex-1 overflow-auto px-8 py-6">
+            <p class="text-xl font-semibold pb-4 mb-2 border-b border-base-content/15">{{ tabTitle }}</p>
+
+          <!-- general settings -->
+          <div v-if="tabIndex === 0" class="divide-y divide-base-content/10">
+            <SettingRow :label="$t('app.setting_general_language_title')">
+              <SettingSelect v-model="settings.general.lang" @update:modelValue="handleChangeLanguage" :options="[
+                { label: $t('app.setting_general_language_vi'), value: 'vi' },
+                { label: $t('app.setting_general_language_en'), value: 'en' },
+                { label: $t('app.setting_general_language_zhtw'), value: 'zhtw' },
+              ]" />
+            </SettingRow>
+
+            <SettingRow :label="$t('app.setting_general_theme_title')">
+              <SettingSelect v-model="$colorMode.preference" :options="[
+                { label: $t('app.setting_general_theme_system'), value: 'system' },
+                { label: $t('app.setting_general_theme_light'), value: 'light' },
+                { label: $t('app.setting_general_theme_dark'), value: 'dark' },
+              ]" />
+            </SettingRow>
+
+            <SettingRow :label="$t('app.setting_general_default_editor_title')">
+              <SettingSelect v-model="settings.general.defaultEditor" @update:modelValue="handleChangeDefaultEditor"
+                :options="[
+                  { label: $t('app.setting_general_default_editor_tiptap'), value: 'Tiptap' },
+                  { label: $t('app.setting_general_default_editor_codemirror'), value: 'CodeMirror' },
+                  { label: 'Crepe', value: 'Crepe' },
+                ]" />
+            </SettingRow>
+
+            <SettingRow :label="$t('app.setting_general_editor_view_title')">
+              <SettingSelect v-model="settings.general.editorView" @update:modelValue="handleChangeEditorView" :options="[
+                { label: $t('app.setting_general_editor_view_full'), value: 'full' },
+                { label: $t('app.setting_general_editor_view_compact'), value: 'compact' },
+              ]" />
+            </SettingRow>
+
+            <SettingRow :label="$t('app.setting_general_font_title')">
+              <input v-model="fontFamilyDraft" type="text" class="input input-sm input-bordered w-40"
+                autocomplete="off" />
+            </SettingRow>
           </div>
 
-          <div class="flex flex-col justify-center items-center">
-            <ul class="menu rounded-box w-full">
-              <li class="py-0.5" @click="handleClickTab(0)">
-                <a :class="{ 'active': tabIndex == 0 }">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                  </svg>
-                  {{ $t('app.setting_general_title') }}
-                </a>
-              </li>
-              <li class="py-0.5" @click="handleClickTab(1)">
-                <a :class="{ 'active': tabIndex == 1 }">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  {{ $t('app.setting_sync_title') }}
-                </a>
-              </li>
-              <li class="py-0.5" @click="handleClickTab(2)">
-                <a :class="{ 'active': tabIndex == 2 }">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                  </svg>
-                  {{ $t('app.setting_tools_title') }}
-                </a>
-              </li>
-              <li class="py-0.5" @click="handleClickTab(3)">
-                <a :class="{ 'active': tabIndex == 3 }">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  {{ $t('app.setting_about_title') }}
-                </a>
-              </li>
-            </ul>
+          <!-- security settings -->
+          <div v-if="tabIndex === 1" class="divide-y divide-base-content/10">
+            <SettingRow :label="$t('app.setting_general_security_title')">
+              <button class="btn rounded-md btn-sm font-normal shadow-none border border-base-content/20"
+                @click="handleClickSetPassword">
+                {{ props.isPasswordExist ? $t('app.setting_general_security_change_password') :
+                  $t('app.setting_general_security_set_password') }}
+              </button>
+            </SettingRow>
           </div>
-        </div>
-        <div class="w-2/3 float-right bg-base-200">
-          <!-- <div class="pt-4">
-            <div role="tablist" class="tabs tabs-boxed">
-              <a role="tab" class="tab transition-all	" :class="{ 'bg-primary text-primary-content': tabIndex == 0 }"
-                @click="handleClickTab(0)">{{ $t('app.setting_general_title') }}</a>
-              <a role="tab" class="tab transition-all	" :class="{ 'bg-primary text-primary-content': tabIndex == 1 }"
-                @click="handleClickTab(1)">{{ $t('app.setting_sync_title') }}</a>
-              <a role="tab" class="tab transition-all	" :class="{ 'bg-primary text-primary-content': tabIndex == 2 }"
-                @click="handleClickTab(2)">{{ $t('app.setting_tools_title') }}</a>
-              <a role="tab" class="tab transition-all	" :class="{ 'bg-primary text-primary-content': tabIndex == 3 }"
-                @click="handleClickTab(3)">{{ $t('app.setting_about_title') }}</a>
-            </div>
-          </div> -->
-
-          <div id="setting-content" class="py-4 px-4 overflow-auto h-full">
-            <div class="px-2 h-full">
-              <p class="text-2xl font-semibold mb-2">{{ tabTitle }}</p>
-              <!-- general settings -->
-              <div class="transition-all pb-6" v-if="tabIndex == 0">
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_language_title') }}</span>
-                  </div>
-                  <select class="select select-bordered" v-model="settings.general.lang" @change="handleChangeLanguage">
-                    <option value="vi">{{ $t('app.setting_general_language_vi') }}</option>
-                    <option value="en">{{ $t('app.setting_general_language_en') }}</option>
-                    <option value="zhtw">{{ $t('app.setting_general_language_zhtw') }}</option>
-                  </select>
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_theme_title') }}</span>
-                  </div>
-                  <select v-model="$colorMode.preference" class="select select-bordered">
-                    <option value="system">{{ $t('app.setting_general_theme_system') }}</option>
-                    <option value="light">{{ $t('app.setting_general_theme_light') }}</option>
-                    <option value="dark">{{ $t('app.setting_general_theme_dark') }}</option>
-                  </select>
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_default_editor_title') }}</span>
-                  </div>
-                  <select class="select select-bordered" v-model="settings.general.defaultEditor"
-                    @change="handleChangeDefaultEditor">
-                    <option value="Tiptap">{{ $t('app.setting_general_default_editor_tiptap') }}</option>
-                    <option value="CodeMirror">{{ $t('app.setting_general_default_editor_codemirror') }}</option>
-                    <option value="Crepe">Crepe</option>
-                  </select>
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_editor_view_title') }}</span>
-                  </div>
-                  <select class="select select-bordered" v-model="settings.general.editorView"
-                    @change="handleChangeEditorView">
-                    <option value="full">{{ $t('app.setting_general_editor_view_full') }}</option>
-                    <option value="compact">{{ $t('app.setting_general_editor_view_compact') }}</option>
-                  </select>
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_font_title') }}</span>
-                  </div>
-                  <input v-model="settings.general.fontFamily" type="text"
-                    class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveSettings"
-                    autocomplete="off" />
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_general_security_title') }}</span>
-                  </div>
-                  <button class="btn btn-primary" @click="handleClickSetPassword">
-                    {{ props.isPasswordExist ? $t('app.setting_general_security_change_password') :
-                      $t('app.setting_general_security_set_password') }}
-                  </button>
-                </label>
-              </div>
 
-              <!-- sync settings -->
-              <div class="transition-all" v-if="tabIndex == 1">
-                <div class="label pt-4">
-                  <span class="font-semibold label-text">{{ $t('app.setting_sync_adapter_title') }}</span>
+          <!-- sync settings -->
+          <div v-if="tabIndex === 2" class="space-y-6">
+            <!-- Note Sync -->
+            <div class="divide-y divide-base-content/10">
+              <div class="flex items-center justify-between gap-6 py-4">
+                <div class="min-w-0">
+                  <p class="font-medium">{{ $t('app.setting_sync_adapter_title') }}</p>
+                  <p class="text-xs text-base-content/60 mt-1">
+                    {{ $t('app.setting_sync_adapter_description') }}
+                    <br /><a href="https://docs.opennotas.io/started/setup-sync" target="_blank"
+                      class="underline text-xs hover:text-primary">{{ $t('app.setting_sync_adapter_setup_guide') }}</a>
+                  </p>
                 </div>
-                <div class="grid grid-cols-12 gap-4">
-                  <div class="col-span-8">
-                    <label class="form-control w-full">
-                      <select v-model="adapterSelect" class="select select-bordered">
-                        <option value="LocalForage">LocalForage (Offline)</option>
-                        <option value="Turso">Turso (Online)</option>
-                      </select>
-                    </label>
-
-                    <a href="https://docs.opennotas.io/started/setup-sync" target="_blank"
-                      class="text-xs underline inline-block mt-2">
-                      {{ $t('app.setting_sync_adapter_setup_guide') }}
-                    </a>
-                  </div>
-                  <div class="col-span-4">
-                    <button class="btn btn-primary w-full" :disabled="!isAdapterChanged" @click="handleSaveAdapter">
-                      {{ $t('app.setting_sync_adapter_save') }}
-                    </button>
-                  </div>
+                <div class="shrink-0 flex items-center gap-2">
+                  <SettingSelect v-model="adapterSelect" :options="[
+                    { label: 'LocalForage (Offline)', value: 'LocalForage' },
+                    { label: 'Turso (Online)', value: 'Turso' },
+                  ]" />
                 </div>
+              </div>
 
-                <div v-if="adapterSelect !== 'LocalForage'">
-                  <label class="form-control w-full pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_sync_sync_frequency_title') }}</span>
-                    </div>
-                    <select v-model="settings.sync.frequency" class="select select-bordered w-64"
-                      @change="handleSaveSettings">
-                      <option value="5">5 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                      <option value="10">10 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                      <option value="15">15 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                      <option value="30">30 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                      <option value="60">60 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                    </select>
-                  </label>
-
-                  <label class="form-control pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_sync_config_title') }}</span>
-                    </div>
-                    <input v-model="settings.sync.configuration" type="text"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveSettings"
-                      autocomplete="off" />
-                  </label>
-                </div>
+              <SettingRow v-if="adapterSelect !== 'LocalForage'" :label="$t('app.setting_sync_sync_frequency_title')">
+                <SettingSelect v-model="settings.sync.frequency" @update:modelValue="handleSaveSettings" :options="[
+                  { label: `5 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '5' },
+                  { label: `10 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '10' },
+                  { label: `15 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '15' },
+                  { label: `30 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '30' },
+                  { label: `60 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '60' },
+                ]" />
+              </SettingRow>
+
+              <SettingRow v-if="adapterSelect !== 'LocalForage'" :label="$t('app.setting_sync_config_title')">
+                <button type="button"
+                  class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                  @click="handleOpenSyncConfigModal">
+                  {{ $t('app.setting_configure_button') }}
+                </button>
+              </SettingRow>
+            </div>
 
-                <!-- Image Sync Settings -->
-                <div class="border-t border-neutral mt-6 pt-4"></div>
-
-                <label class="form-control w-full">
-                  <div class="label cursor-pointer justify-start gap-4">
-                    <input type="checkbox" v-model="settings.imageSync.enabled" class="toggle"
-                      @change="handleSaveImageSyncSettings" />
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_enable') }}</span>
-                  </div>
-                </label>
-
-                <a href="https://docs.opennotas.io/started/setup-sync/s3-storage" target="_blank"
-                  class="text-xs underline inline-block mt-2">
-                  {{ $t('app.setting_image_sync_setup_guide') }}
-                </a>
-
-                <div v-if="settings.imageSync?.enabled">
-                  <!-- S3 Configuration -->
-                  <label class="form-control w-full pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_endpoint') }}</span>
-                    </div>
-                    <input v-model="settings.imageSync.s3Endpoint" type="text" placeholder="https://s3.amazonaws.com"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveImageSyncSettings"
-                      autocomplete="off" />
-                  </label>
-
-                  <label class="form-control w-full pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_access_key') }}</span>
-                    </div>
-                    <input v-model="settings.imageSync.s3AccessKey" type="text" placeholder="AKIAIOSFODNN7EXAMPLE"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveImageSyncSettings"
-                      autocomplete="off" />
-                  </label>
-
-                  <label class="form-control w-full pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_secret_key') }}</span>
-                    </div>
-                    <input v-model="settings.imageSync.s3SecretKey" type="password" placeholder="••••••••"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveImageSyncSettings"
-                      autocomplete="off" />
-                  </label>
-
-                  <label class="form-control w-full pt-2">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_bucket') }}</span>
-                    </div>
-                    <input v-model="settings.imageSync.s3Bucket" type="text" placeholder="my-bucket"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveImageSyncSettings"
-                      autocomplete="off" />
-                  </label>
-
-                  <!-- Worker URL (optional) -->
-                  <label class="form-control w-full pt-4">
-                    <div class="label">
-                      <span class="font-semibold label-text">{{ $t('app.setting_image_sync_worker_url') }}</span>
-                      <span class="label-text-alt">{{ $t('app.setting_image_sync_worker_url_optional') }}</span>
-                    </div>
-                    <input v-model="settings.imageSync.workerUrl" type="text"
-                      :placeholder="$t('app.setting_image_sync_worker_url_placeholder')"
-                      class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveImageSyncSettings"
-                      autocomplete="off" />
-                  </label>
-
-                  <label class="form-control w-full pt-4">
-                    <button class="btn btn-primary w-full btn-sm !text-sm"
-                      :class="{ 'btn-success': imageSyncTestStatus === 'success', 'btn-error': imageSyncTestStatus === 'failed' }"
-                      @click="handleTestImageSyncConnection"
-                      :disabled="imageSyncTestStatus === 'testing' || !isS3ConfigComplete">
-                      <span class="text-sm" v-if="imageSyncTestStatus === 'idle'">{{
-                        $t('app.setting_image_sync_test_connection') }}</span>
-                      <span v-else-if="imageSyncTestStatus === 'testing'"
-                        class="text-sm loading loading-spinner loading-sm"></span>
-                      <span v-else-if="imageSyncTestStatus === 'success'" class="text-sm">{{
-                        $t('app.setting_image_sync_connected') }}</span>
-                      <span v-else-if="imageSyncTestStatus === 'failed'" class="text-sm">{{
-                        $t('app.setting_image_sync_failed') }}</span>
-                    </button>
-                  </label>
-
-                  <p class="text-xs text-base-content/60 mt-2">
-                    {{ $t('app.setting_image_sync_hint') }}
+            <!-- Image Sync -->
+            <div class="divide-y divide-base-content/10">
+              <SettingRow :label="$t('app.setting_image_sync_enable')">
+                <input type="checkbox" v-model="settings.imageSync.enabled" class="toggle"
+                  @change="handleSaveSettings" />
+              </SettingRow>
+
+              <div v-if="settings.imageSync?.enabled" class="flex items-center justify-between gap-6 py-4">
+                <div class="min-w-0">
+                  <p class="font-medium">{{ $t('app.setting_image_sync_config_title') }}</p>
+                  <p class="text-xs text-base-content/60 mt-1">
+                    {{ $t('app.setting_image_sync_description') }}
+                    <br /><a href="https://docs.opennotas.io/started/setup-sync/s3-storage" target="_blank"
+                      class="underline text-xs hover:text-primary">{{ $t('app.setting_image_sync_setup_guide') }}</a>
                   </p>
-
-                  <div class="h-4"></div>
                 </div>
+                <button type="button"
+                  class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20 shrink-0"
+                  @click="handleOpenImageSyncConfigModal">
+                  {{ $t('app.setting_configure_button') }}
+                </button>
               </div>
+            </div>
+          </div>
 
-              <div class="transition-all" v-if="tabIndex == 2">
-
-                <div class="label pt-4">
-                  <span class="font-semibold label-text">{{ $t('app.setting_tools_backup_title') }}</span>
-                </div>
+          <!-- tools -->
+          <div v-if="tabIndex === 3" class="space-y-6">
+            <div class="divide-y divide-base-content/10">
+              <SettingRow :label="$t('app.setting_tools_backup_export')">
+                <button type="button"
+                  class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                  @click="handleClickExportNotes">
+                  {{ $t('app.setting_tools_backup_export_button') }}
+                </button>
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_tools_backup_import')">
+                <button type="button"
+                  class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                  @click="handleClickImportNotes">
+                  {{ $t('app.setting_tools_backup_import_button') }}
+                </button>
+              </SettingRow>
+            </div>
 
-                <ul class="menu bg-base-100 border rounded-md border-neutral p-0 [&_li>*]:rounded-none">
-                  <li @click="handleClickExportNotes">
-                    <span class="w-full flex flex-row justify-between">
-                      {{ $t('app.setting_tools_backup_export') }}
-                      <ChevronRight />
-                    </span>
-                  </li>
-                  <li @click="handleClickImportNotes">
-                    <span class="w-full flex flex-row justify-between">
-                      {{ $t('app.setting_tools_backup_import') }}
-                      <ChevronRight />
-                    </span>
-                  </li>
-                </ul>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">Service Worker</span>
-                  </div>
-                  <button class="btn btn-error" @click="handleClickResetServiceWorker">
-                    {{ $t('app.setting_tools_reset_service_worker_title') }}
-                  </button>
-                </label>
-              </div>
+            <div class="divide-y divide-base-content/10">
+              <SettingRow label="Service Worker">
+                <button class="btn btn-sm btn-outline btn-error" @click="handleClickResetServiceWorker">
+                  {{ $t('app.setting_tools_reset_service_worker_title') }}
+                </button>
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_tools_force_update_title')"
+                :description="$t('app.setting_tools_force_update_description')">
+                <button class="btn btn-sm btn-outline btn-error" @click="handleClickForceUpdate">
+                  {{ $t('app.setting_tools_force_update_button') }}
+                </button>
+              </SettingRow>
+            </div>
+          </div>
 
-              <div class="transition-all h-[calc(100%_-_40px)] flex justify-center items-center" v-if="tabIndex == 3">
-                <div class="flex flex-col justify-center items-center">
-                  <img :src="'/logo-icon.png'" height="96" width="96" alt="OpenNotas Logo" />
-                  <a class="underline" href="https://opennotas.io">
-                    <h1 class="font-bold text-3xl">{{ $t('app_name') }}</h1>
-                  </a>
-                  <p class="mt-4 text-center text-sm">{{ $t('app.slogan') }}</p>
-                  <!-- <p class="mt-2">{{ $t('app.version') }}: {{ runtimeConfig.public.version }}</p> -->
-                  <!-- <p class="mt-6"><a href="#" class="underline">https://opennotas.io</a></p> -->
-                </div>
-              </div>
+          <!-- about -->
+          <div v-if="tabIndex === 4" class="h-[calc(100%_-_60px)] flex justify-center items-center">
+            <div class="flex flex-col justify-center items-center">
+              <img :src="'/logo-icon.png'" height="96" width="96" alt="OpenNotas Logo" />
+              <a class="underline" href="https://opennotas.io">
+                <h1 class="font-bold text-3xl">{{ $t('app_name') }}</h1>
+              </a>
+              <p class="mt-4 text-center text-sm">{{ $t('app.slogan') }}</p>
             </div>
           </div>
         </div>
+
+        <div v-if="(tabIndex === 0 && isFontFamilyDirty) || (tabIndex === 2 && isAdapterChanged)"
+          class="shrink-0 border-t border-base-content/15 px-8 py-4 flex items-center justify-end gap-2">
+          <template v-if="tabIndex === 0">
+            <button class="btn btn-sm" @click="handleCancelFontFamily">
+              {{ $t('app.setting_general_font_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleSaveFontFamily">
+              {{ $t('app.setting_general_font_save') }}
+            </button>
+          </template>
+          <template v-if="tabIndex === 2">
+            <button class="btn btn-sm" @click="handleCancelAdapterChange">
+              {{ $t('app.setting_sync_adapter_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleSaveAdapter">
+              {{ $t('app.setting_sync_adapter_save') }}
+            </button>
+          </template>
+        </div>
+        </div>
       </div>
+    </div>
+  </dialog>
 
-      <!-- <h3 class="font-bold text-lg">{{ $t('app.setting_title') }}</h3> -->
+  <ModalConfirmImageSyncChange v-if="isShowModalConfirmImageSyncChange" @confirm="handleConfirmImageSyncChange"
+    @close="handleCancelImageSyncChange" />
 
+  <ModalSyncConfig v-if="isShowModalSyncConfig" :value="settings.sync.configuration" @confirm="handleConfirmSyncConfig"
+    @close="handleCloseSyncConfigModal" />
 
-    </div>
-  </dialog>
+  <ModalImageSyncConfig v-if="isShowModalImageSyncConfig" :s3Config="draftS3Config" :isDirty="isS3ConfigDirty"
+    :isComplete="isS3ConfigComplete" :testStatus="imageSyncTestStatus" @save="handleSaveImageSyncConfigModal"
+    @test="handleTestImageSyncConnection" @close="handleCloseImageSyncConfigModal" />
 </template>
-
-<style lang="postcss">
-.tab-active {
-  @apply !bg-neutral text-white;
-}
-</style>
diff --git a/components/modal/setting/setting-row.vue b/components/modal/setting/setting-row.vue
new file mode 100644
index 0000000..e9e870f
--- /dev/null
+++ b/components/modal/setting/setting-row.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ label: string; description?: string }>();
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-6 py-4">
+    <div class="min-w-0">
+      <p class="font-medium">{{ label }}</p>
+      <p v-if="description" class="text-xs text-base-content/60 mt-1">{{ description }}</p>
+    </div>
+    <div class="shrink-0">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/components/modal/setting/setting-select.vue b/components/modal/setting/setting-select.vue
new file mode 100644
index 0000000..fe078a9
--- /dev/null
+++ b/components/modal/setting/setting-select.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import ChevronRight from '../assets/svg/chevron-right.svg?component';
+
+const props = defineProps<{
+  modelValue: string;
+  options: { label: string; value: string }[];
+}>();
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+
+const selectedLabel = computed(() => props.options.find(o => o.value === props.modelValue)?.label ?? '');
+
+const handleSelect = (value: string) => {
+  emit('update:modelValue', value);
+  (document.activeElement as HTMLElement)?.blur();
+};
+</script>
+
+<template>
+  <div class="dropdown dropdown-end">
+    <div tabindex="0" role="button" class="flex items-center gap-1 cursor-pointer select-none">
+      <span>{{ selectedLabel }}</span>
+      <ChevronRight class="h-3.5 w-3.5 rotate-90 text-base-content/50" />
+    </div>
+    <ul tabindex="0"
+      class="dropdown-content menu bg-base-100 rounded-xl z-30 w-52 p-1.5 shadow-lg border border-base-300 mt-2">
+      <li v-for="opt in options" :key="opt.value">
+        <a class="flex items-center justify-between rounded-lg py-2" @click="handleSelect(opt.value)">
+          {{ opt.label }}
+          <span v-if="opt.value === modelValue" class="text-base-content">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-check">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M5 12l5 5l10 -10" />
+            </svg>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/components/modal/sort-note/index.vue b/components/modal/sort-note/index.vue
index 373ba0f..bff8040 100644
--- a/components/modal/sort-note/index.vue
+++ b/components/modal/sort-note/index.vue
@@ -12,8 +12,8 @@ const handleClickSort = (type: 'createdAt' | 'updatedAt') => {
 </script>
 
 <template>
-  <dialog id="modal-sort-note" class="modal">
-    <div class="modal-box p-0 w-5/6 border border-neutral">
+  <dialog id="modal-sort-note" class="modal backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box p-0 w-5/6 border border-base-content/15">
       <ul class="menu bg-base-100 rounded-box w-full animate-fade-down animate-duration-100 gap-1">
         <li class="w-full text-center" @click="() => handleClickSort('createdAt')">
           <a class="w-full flex items-center justify-center gap-2">
diff --git a/components/modal/sync-config/index.vue b/components/modal/sync-config/index.vue
new file mode 100644
index 0000000..c170dcc
--- /dev/null
+++ b/components/modal/sync-config/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{ value: string }>();
+const emit = defineEmits<{ (e: 'confirm', value: string): void; (e: 'close'): void }>();
+
+const draft = ref(props.value);
+watch(() => props.value, (v) => { draft.value = v; });
+
+const handleConfirm = () => emit('confirm', draft.value);
+const handleClickClose = () => {
+  draft.value = props.value;
+  emit('close');
+};
+</script>
+
+<template>
+  <dialog id="modal-sync-config" class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg pr-8">{{ $t('app.setting_sync_config_title') }}</h3>
+      <div class="pt-4">
+        <textarea v-model="draft" rows="8" class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-sm mr-2" @click="handleClickClose">
+              {{ $t('app.modal_sync_config_cancel') }}
+            </button>
+            <button class="btn btn-sm btn-primary" @click="handleConfirm">
+              {{ $t('app.setting_sync_adapter_save') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/tag-color-custom/index.vue b/components/modal/tag-color-custom/index.vue
new file mode 100644
index 0000000..61c3a62
--- /dev/null
+++ b/components/modal/tag-color-custom/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const emit = defineEmits([
+  'confirm',
+  'close',
+]);
+
+const hexInput = ref<string>('#');
+const isValidHex = computed(() => /^#([0-9A-Fa-f]{6})$/.test(hexInput.value));
+
+const handleConfirm = (e: Event) => {
+  if (!isValidHex.value) {
+    e.preventDefault();
+    return;
+  }
+
+  emit('confirm', hexInput.value);
+};
+
+const handleClickClose = () => {
+  emit('close');
+}
+</script>
+
+<template>
+  <dialog id="modal-tag-color-custom" class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-80 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">
+        {{ $t('app.modal_tag_color_custom_title') }}
+      </h3>
+      <div class="pt-4 flex items-center gap-3">
+        <span class="w-8 h-8 rounded-full shrink-0 border border-base-content/20"
+          :style="{ backgroundColor: isValidHex ? hexInput : 'transparent' }"></span>
+        <input v-model="hexInput" type="text" :placeholder="$t('app.modal_tag_color_custom_placeholder')"
+          class="input input-sm lg:input-md input-bordered w-full" @keydown.enter="handleConfirm" autocomplete="off"
+          autofocus />
+      </div>
+
+      <div class="modal-action">
+        <form method="dialog">
+          <!-- if there is a button in form, it will close the modal -->
+          <button class="btn btn-sm mr-2">{{ $t('app.modal_tag_form_cancel') }}</button>
+          <button class="btn btn-sm btn-primary" :disabled="!isValidHex" @click="handleConfirm">{{
+            $t('app.modal_tag_form_ok') }}</button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/components/modal/tag-form/index.vue b/components/modal/tag-form/index.vue
new file mode 100644
index 0000000..02b6a6e
--- /dev/null
+++ b/components/modal/tag-form/index.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+const props = defineProps([
+  'tagId',
+  'tagName',
+  'tagColor',
+]);
+
+const emit = defineEmits([
+  'confirm',
+  'close',
+]);
+
+const presetColors = [
+  '#ef4444',
+  '#f97316',
+  '#f59e0b',
+  '#22c55e',
+  '#14b8a6',
+  '#3b82f6',
+  '#6366f1',
+  '#a855f7',
+  '#ec4899',
+];
+
+const modalTagFormKey = ref(0);
+const newTagName = ref<string>(props.tagName || '');
+const selectedColor = ref<string>(props.tagColor || presetColors[0]);
+watch(() => [props.tagName, props.tagColor], ([newName, newColor]) => {
+  modalTagFormKey.value++;
+  newTagName.value = newName || '';
+  selectedColor.value = newColor || presetColors[0];
+});
+
+const isCustomColor = computed(() => !presetColors.includes(selectedColor.value));
+const isValidate = computed(() => newTagName.value.length > 0);
+const isEditMode = computed(() => !!props.tagId);
+
+const handleClickPresetColor = (color: string) => {
+  selectedColor.value = color;
+};
+
+const isShowModalTagColorCustom = ref<boolean>(false);
+const handleClickCustomColor = () => {
+  toggleModalTagColorCustom(true, isShowModalTagColorCustom);
+};
+const handleCloseModalTagColorCustom = () => {
+  toggleModalTagColorCustom(false, isShowModalTagColorCustom);
+};
+const handleConfirmCustomColor = (hex: string) => {
+  selectedColor.value = hex;
+  toggleModalTagColorCustom(false, isShowModalTagColorCustom);
+};
+
+const handleConfirmTagForm = (e: Event) => {
+  if (!isValidate.value) {
+    e.preventDefault();
+    return;
+  }
+
+  emit('confirm', {
+    tagId: props.tagId,
+    name: newTagName.value,
+    color: selectedColor.value,
+  });
+};
+
+const reset = () => {
+  newTagName.value = props.tagName || '';
+  selectedColor.value = props.tagColor || presetColors[0];
+}
+
+defineExpose({
+  reset,
+});
+
+const handleClickClose = () => {
+  emit('close');
+}
+</script>
+
+<template>
+  <dialog id="modal-tag-form" :key="modalTagFormKey"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
+      </form>
+      <h3 class="font-bold text-lg">
+        {{ isEditMode ? $t('app.modal_tag_form_title_edit') : $t('app.modal_tag_form_title_create') }}
+      </h3>
+      <div class="pt-4">
+        <label class="form-control w-full">
+          <div class="label">
+            <span class="font-semibold label-text">{{ $t('app.modal_tag_form_input_name') }}</span>
+          </div>
+          <input v-model="newTagName" type="text" class="input input-sm lg:input-md input-bordered w-full"
+            @keydown.enter="handleConfirmTagForm" autocomplete="off" autofocus />
+        </label>
+
+        <div class="mt-4">
+          <div class="label">
+            <span class="font-semibold label-text">{{ $t('app.modal_tag_form_input_color') }}</span>
+          </div>
+          <div class="flex flex-wrap gap-2 items-center">
+            <button v-for="color in presetColors" :key="color" type="button"
+              class="w-7 h-7 rounded-full shrink-0 flex items-center justify-center"
+              :class="{ 'ring-2 ring-offset-2 ring-base-content ring-offset-base-100': selectedColor === color }"
+              :style="{ backgroundColor: color }" @click="handleClickPresetColor(color)"></button>
+
+            <button type="button"
+              class="w-7 h-7 rounded-full shrink-0 flex items-center justify-center border-2 border-dashed border-base-content/40"
+              :class="{ 'ring-2 ring-offset-2 ring-base-content ring-offset-base-100 border-solid': isCustomColor }"
+              :style="isCustomColor ? { backgroundColor: selectedColor, borderStyle: 'solid' } : {}"
+              :title="$t('app.modal_tag_form_custom_color')" @click="handleClickCustomColor">
+              <span v-if="!isCustomColor" class="text-xs">+</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="modal-action">
+          <form method="dialog">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn btn-sm mr-2">{{ $t('app.modal_tag_form_cancel') }}</button>
+            <button class="btn btn-sm btn-primary" :disabled="!isValidate" @click="handleConfirmTagForm">{{
+              $t('app.modal_tag_form_ok') }}</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </dialog>
+
+  <ModalTagColorCustom v-if="isShowModalTagColorCustom" @confirm="handleConfirmCustomColor"
+    @close="handleCloseModalTagColorCustom" />
+</template>
diff --git a/components/modal/unlock-notes/index.vue b/components/modal/unlock-notes/index.vue
index c888d23..f615483 100644
--- a/components/modal/unlock-notes/index.vue
+++ b/components/modal/unlock-notes/index.vue
@@ -32,8 +32,9 @@ const handleClickClose = () => {
 </script>
 
 <template>
-  <dialog id="modal-unlock-notes" class="modal modal-top lg:modal-middle">
-    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-neutral">
+  <dialog id="modal-unlock-notes"
+    class="modal modal-top lg:modal-middle backdrop:bg-black/10 backdrop:backdrop-blur-sm">
+    <div class="modal-box mx-auto p-4 lg:p-6 w-5/6 lg:w-96 border border-base-content/15">
       <form method="dialog">
         <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" @click="handleClickClose">✕</button>
       </form>
@@ -47,8 +48,8 @@ const handleClickClose = () => {
           </div>
           <input ref="inputPasswordRef" v-model="password" type="password"
             :placeholder="$t('app.modal_unlock_notes_input_password_title')"
-            class="input input-sm lg:btn-md input-bordered w-full" @keydown.enter="handleConfirmPassword"
-            autocomplete="off" autofocus />
+            class="input input-sm input-bordered w-full" @keydown.enter="handleConfirmPassword" autocomplete="off"
+            autofocus />
         </div>
       </div>
     </div>
diff --git a/components/navbar/top/index.vue b/components/navbar/top/index.vue
index 3887001..8bcf5fc 100644
--- a/components/navbar/top/index.vue
+++ b/components/navbar/top/index.vue
@@ -2,13 +2,16 @@
 import { defineProps, onMounted } from 'vue';
 
 import S3ProxyAdapter from '~/adapter/s3';
+import { resetSyncedImages } from '~/services/image';
 import { toggleModalMenuEditor } from '~/utils/modal';
+import { useMobileBackToggle } from '~/utils/mobile-back';
+import SettingRow from '../../modal/setting/setting-row.vue';
+import SettingSelect from '../../modal/setting/setting-select.vue';
 import Menu from '../assets/svg/menu.svg?component';
 import Setting from '../assets/svg/settings.svg?component';
 import ArrowLeft from '../assets/svg/arrow-left.svg?component';
 import Info from '../assets/svg/info.svg?component';
 import Clipboard from '../assets/svg/clipboard.svg?component';
-import ChevronRight from '../assets/svg/chevron-right.svg?component';
 import Undo from '../assets/svg/corner-up-left.svg?component';
 import Redo from '../assets/svg/corner-up-right.svg?component';
 import Search from '../assets/svg/search.svg?component';
@@ -20,6 +23,8 @@ import Type from '../assets/svg/type.svg?component';
 const props = defineProps([
   'listFolders',
   'activeFolderId',
+  'listTags',
+  'activeTagId',
   'formNotes',
   'isInEditor',
   'isSyncing',
@@ -34,6 +39,10 @@ const emit = defineEmits([
   'rightClickFolderName',
   'renameFolderName',
   'reorderFolderName',
+  'clickTagName',
+  'rightClickTagName',
+  'clickTags',
+  'clickAddTag',
   'clickSearch',
   'clickCancelSearch',
   'clickSetting',
@@ -64,6 +73,7 @@ const { setLocale } = useI18n();
 // const colorMode = useColorMode();
 
 const isDrawerOpen = ref<boolean>(false);
+useMobileBackToggle(isDrawerOpen);
 
 const activeFolderName = computed(() => {
   if (props.activeFolderId === 'bottombar-trash') {
@@ -75,6 +85,7 @@ const activeFolderName = computed(() => {
 });
 
 const isShowSearchInput = ref(false);
+useMobileBackToggle(isShowSearchInput);
 const handleToggleSearch = () => {
   isShowSearchInput.value = !isShowSearchInput.value;
   if (isShowSearchInput.value) {
@@ -118,6 +129,24 @@ const handleReorderFolderName = (data: any[]) => {
   emit('reorderFolderName', data);
 };
 
+const isTagsTabActive = computed(() => props.activeFolderId === 'bottombar-tags');
+const handleClickTagName = (tagId: string) => {
+  emit('clickTagName', tagId);
+  isDrawerOpen.value = false;
+};
+const handleRightClickTagName = (data: any) => {
+  emit('rightClickTagName', data);
+};
+const handleClickAddTag = () => {
+  emit('clickAddTag');
+};
+const handleClickFoldersTab = () => {
+  emit('clickFolderName', '');
+};
+const handleClickTagsTab = () => {
+  emit('clickTags');
+};
+
 const handleClickSetting = () => {
   handleClickSettingBtn();
 };
@@ -131,6 +160,7 @@ const handleClickUpdateData = () => {
 };
 
 const isDrawerSettingOpen = ref<boolean>(false);
+useMobileBackToggle(isDrawerSettingOpen);
 const handleClickSettingBtn = () => {
   isDrawerSettingOpen.value = true;
 };
@@ -176,20 +206,48 @@ const handleChangeDefaultEditor = () => {
   handleSaveSettings();
   emit('changeDefaultEditor', true);
 }
+const handleChangeEditorView = () => {
+  handleSaveSettings();
+}
 // set password
 const handleClickSetPassword = () => {
   // Show modal set password
   emit('clickSetPassword');
 }
 const adapterSelect = ref<string>('');
+
+type S3Config = {
+  s3Endpoint: string;
+  s3AccessKey: string;
+  s3SecretKey: string;
+  s3Bucket: string;
+  workerUrl: string;
+};
+
+const buildDraft = (cfg: any): S3Config => ({
+  s3Endpoint: cfg?.s3Endpoint || '',
+  s3AccessKey: cfg?.s3AccessKey || '',
+  s3SecretKey: cfg?.s3SecretKey || '',
+  s3Bucket: cfg?.s3Bucket || '',
+  workerUrl: cfg?.workerUrl || '',
+});
+
+// Draft S3 config: what the user is currently editing in the form.
+// Only committed to settings.value when user clicks Save.
+const draftS3Config = ref<S3Config>(buildDraft(null));
+
 onMounted(() => {
   adapterSelect.value = settings.value.sync.adapter;
+  draftS3Config.value = buildDraft(props.settings?.imageSync);
 });
 // change adapter
 const isAdapterChanged = computed(() => adapterSelect.value !== settings.value.sync.adapter);
 const handleSaveAdapter = (e: Event) => {
   emit('saveAdapter', adapterSelect.value);
 }
+const handleCancelAdapterChange = () => {
+  adapterSelect.value = settings.value.sync.adapter;
+}
 
 const handleChangeLanguage = () => {
   setLocale(settings.value.general.lang);
@@ -217,24 +275,59 @@ const handleClickResetServiceWorker = () => {
     window.location.reload();
   });
 }
+const handleClickForceUpdate = async () => {
+  if ('caches' in window) {
+    const keys = await caches.keys();
+    await Promise.all(keys.map((key) => caches.delete(key)));
+  }
+  window.location.reload();
+}
 
 const imageSyncTestStatus = ref<'idle' | 'testing' | 'success' | 'failed'>('idle');
+const isShowModalConfirmImageSyncChange = ref(false);
+
+// Enable Save button when draft differs from last saved state
+const isS3ConfigDirty = computed(() => {
+  const saved = props.settings?.imageSync;
+  const draft = draftS3Config.value;
+  const fields: (keyof S3Config)[] = ['s3Endpoint', 's3Bucket', 's3AccessKey', 's3SecretKey', 'workerUrl'];
+  return fields.some((f) => (saved?.[f] || '') !== (draft[f] || ''));
+});
+
+// True only when storage location fields changed (triggers confirmation + image reset)
+const hasCriticalS3Changed = (): boolean => {
+  const saved = props.settings?.imageSync;
+  const draft = draftS3Config.value;
+  const critical: (keyof S3Config)[] = ['s3Endpoint', 's3Bucket', 's3AccessKey', 's3SecretKey'];
+  return critical.some((f) => (saved?.[f] || '') !== (draft[f] || ''));
+};
 
 const isS3ConfigComplete = computed(() => {
-  const cfg = settings.value.imageSync;
-  return cfg?.s3Endpoint && cfg?.s3AccessKey && cfg?.s3SecretKey && cfg?.s3Bucket;
+  const d = draftS3Config.value;
+  return Boolean(d.s3Endpoint && d.s3AccessKey && d.s3SecretKey && d.s3Bucket);
 });
 
+// Apply draft into settings.value before saving
+const applyDraftToSettings = () => {
+  settings.value = {
+    ...settings.value,
+    imageSync: {
+      ...settings.value.imageSync,
+      ...draftS3Config.value,
+    },
+  };
+};
+
 const handleTestImageSyncConnection = async () => {
   imageSyncTestStatus.value = 'testing';
 
   try {
     const adapter = new S3ProxyAdapter({
-      workerUrl: settings.value.imageSync?.workerUrl || '',
-      s3Endpoint: settings.value.imageSync?.s3Endpoint || '',
-      s3AccessKey: settings.value.imageSync?.s3AccessKey || '',
-      s3SecretKey: settings.value.imageSync?.s3SecretKey || '',
-      s3Bucket: settings.value.imageSync?.s3Bucket || '',
+      workerUrl: draftS3Config.value.workerUrl || '',
+      s3Endpoint: draftS3Config.value.s3Endpoint || '',
+      s3AccessKey: draftS3Config.value.s3AccessKey || '',
+      s3SecretKey: draftS3Config.value.s3SecretKey || '',
+      s3Bucket: draftS3Config.value.s3Bucket || '',
     });
 
     const isConnected = await adapter.checkConnection();
@@ -249,13 +342,71 @@ const handleTestImageSyncConnection = async () => {
 }
 
 const handleSaveImageSyncSettings = () => {
+  if (hasCriticalS3Changed()) {
+    isShowModalConfirmImageSyncChange.value = true;
+    setTimeout(() => {
+      (document.getElementById('modal-confirm-image-sync-change') as any)?.showModal();
+    }, 100);
+    return;
+  }
+  applyDraftToSettings();
   handleSaveSettings();
-}
+};
+
+const handleConfirmImageSyncChange = async () => {
+  (document.getElementById('modal-confirm-image-sync-change') as any)?.close();
+  isShowModalConfirmImageSyncChange.value = false;
+  applyDraftToSettings();
+  handleSaveSettings();
+  await resetSyncedImages();
+};
+
+const handleCancelImageSyncChange = () => {
+  (document.getElementById('modal-confirm-image-sync-change') as any)?.close();
+  isShowModalConfirmImageSyncChange.value = false;
+  draftS3Config.value = buildDraft(props.settings?.imageSync);
+};
+
+// Sync Configuration (JSON) modal
+const isShowModalSyncConfig = ref(false);
+const handleOpenSyncConfigModal = () => {
+  isShowModalSyncConfig.value = true;
+  setTimeout(() => (document.getElementById('modal-sync-config') as any)?.showModal(), 100);
+};
+const handleConfirmSyncConfig = (value: string) => {
+  settings.value.sync.configuration = value;
+  (document.getElementById('modal-sync-config') as any)?.close();
+  isShowModalSyncConfig.value = false;
+  handleSaveSettings();
+};
+const handleCloseSyncConfigModal = () => {
+  (document.getElementById('modal-sync-config') as any)?.close();
+  isShowModalSyncConfig.value = false;
+};
+
+// Image Sync S3 config modal
+const isShowModalImageSyncConfig = ref(false);
+const handleOpenImageSyncConfigModal = () => {
+  isShowModalImageSyncConfig.value = true;
+  setTimeout(() => (document.getElementById('modal-image-sync-config') as any)?.showModal(), 100);
+};
+const handleCloseImageSyncConfigModal = () => {
+  (document.getElementById('modal-image-sync-config') as any)?.close();
+  isShowModalImageSyncConfig.value = false;
+};
+const handleSaveImageSyncConfigModal = () => {
+  isShowModalImageSyncConfig.value = false;
+  handleSaveImageSyncSettings();
+};
 
 const settings = ref<any>(props.settings);
 watch(() => props.settings, (newValue) => {
+  const hasPendingAdapterChange = isAdapterChanged.value;
   settings.value = newValue;
-  adapterSelect.value = settings.value.sync.adapter;
+  if (!hasPendingAdapterChange) {
+    adapterSelect.value = settings.value.sync.adapter;
+  }
+  draftS3Config.value = buildDraft(newValue?.imageSync);
 }, { deep: true });
 
 const closeDrawer = () => {
@@ -337,7 +488,7 @@ defineExpose({
       <div class="flex-1 flex justify-between">
         <div class="font-semibold text-xl ml-1">{{ $t('app.navbar_top_note_title') }}</div>
 
-        <div class="flex">
+        <div class="flex" v-if="!props.formNotes.isLocked">
           <!-- <Clipboard class="press mr-4 cursor-pointer opacity-80" @click="handleClickCopyToClipboard" />
           <Info class="press mr-4 cursor-pointer opacity-80" @click="handleClickInfo" /> -->
           <ToolCase v-if="['Tiptap', 'Crepe'].includes(props.editorName)" class="press mr-4 cursor-pointer opacity-80"
@@ -379,10 +530,29 @@ defineExpose({
       <div class="menu p-0 w-2/3 min-h-full bg-base-100">
         <div class="flex flex-col justify-between items-center w-full" style="height: calc(100vh);">
           <div class="w-full">
+            <div class="lg:hidden mt-4 h-32 w-32 m-auto">
+              <img :src="'/logo-icon.png'" width="128" height="128" class="mb-4" alt="OpenNotas Logo" />
+            </div>
+
+            <div class="tabs tabs-bordered w-full">
+              <a class="tab flex-1" :class="{ 'tab-active': !isTagsTabActive }"
+                @click="handleClickFoldersTab">
+                {{ $t('app.tab_folders') }}
+              </a>
+              <a class="tab flex-1" :class="{ 'tab-active': isTagsTabActive }"
+                @click="handleClickTagsTab">
+                {{ $t('app.tab_tags') }}
+              </a>
+            </div>
+
             <div>
-              <ListFolder ref="listFolderRef" :listFolders="props.listFolders" :activeFolderId="props.activeFolderId"
-                @clickFolderName="handleClickFolderName" @rightClickFolderName="handleRightClickFolderName"
-                @renameFolderName="handleRenameFolderName" @reorderFolderName="handleReorderFolderName" />
+              <ListFolder v-if="!isTagsTabActive" ref="listFolderRef" :listFolders="props.listFolders"
+                :activeFolderId="props.activeFolderId" @clickFolderName="handleClickFolderName"
+                @rightClickFolderName="handleRightClickFolderName" @renameFolderName="handleRenameFolderName"
+                @reorderFolderName="handleReorderFolderName" />
+              <ListTag v-else :listTags="props.listTags" :activeTagId="props.activeTagId" :isCollapseFolder="false"
+                @clickTagName="handleClickTagName" @rightClickTagName="handleRightClickTagName"
+                @clickAddTag="handleClickAddTag" />
 
               <!-- <div class="px-2 pt-2">
                 <button class="btn btn-sm btn-block rounded" @click="handleClickAddFolder">
@@ -410,254 +580,225 @@ defineExpose({
       <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
 
 
-      <div class="menu p-0 w-10/12 min-h-full bg-base-100 overscroll-y-contain">
-        <div class="w-full">
+      <div class="menu p-0 w-10/12 h-screen bg-base-100 flex flex-col">
+        <div class="w-full flex-1 overflow-y-auto overscroll-y-contain">
           <!-- general setting -->
           <div class="p-4">
             <h2 class="text-lg font-semibold mb-2">{{ $t('app.setting_general_title') }}</h2>
-            <label class="form-control w-full">
-              <div class="label">
-                <span class="font-semibold label-text">{{ $t('app.setting_general_language_title') }}</span>
-              </div>
-              <select class="select select-sm select-bordered" v-model="settings.general.lang"
-                @change="handleChangeLanguage">
-                <option value="vi">{{ $t('app.setting_general_language_vi') }}</option>
-                <option value="en">{{ $t('app.setting_general_language_en') }}</option>
-                <option value="zhtw">{{ $t('app.setting_general_language_zhtw') }}</option>
-              </select>
-            </label>
-
-            <label class="form-control w-full pt-2">
-              <div class="label">
-                <span class="font-semibold label-text">{{ $t('app.setting_general_theme_title') }}</span>
-              </div>
-              <select v-model="$colorMode.preference" class="select select-sm select-bordered">
-                <option value="system">{{ $t('app.setting_general_theme_system') }}</option>
-                <option value="light">{{ $t('app.setting_general_theme_light') }}</option>
-                <option value="dark">{{ $t('app.setting_general_theme_dark') }}</option>
-              </select>
-            </label>
-
-            <label class="form-control w-full pt-2">
-              <div class="label">
-                <span class="font-semibold label-text">{{ $t('app.setting_general_default_editor_title') }}</span>
-              </div>
-              <select class="select select-sm select-bordered" v-model="settings.general.defaultEditor"
-                @change="handleChangeDefaultEditor">
-                <option value="Tiptap">{{ $t('app.setting_general_default_editor_tiptap') }}</option>
-                <option value="CodeMirror">{{ $t('app.setting_general_default_editor_codemirror') }}</option>
-                <option value="Crepe">Crepe</option>
-              </select>
-            </label>
+            <div class="">
+              <SettingRow :label="$t('app.setting_general_language_title')">
+                <SettingSelect v-model="settings.general.lang" @update:modelValue="handleChangeLanguage" :options="[
+                  { label: $t('app.setting_general_language_vi'), value: 'vi' },
+                  { label: $t('app.setting_general_language_en'), value: 'en' },
+                  { label: $t('app.setting_general_language_zhtw'), value: 'zhtw' },
+                ]" />
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_general_theme_title')">
+                <SettingSelect v-model="$colorMode.preference" :options="[
+                  { label: $t('app.setting_general_theme_system'), value: 'system' },
+                  { label: $t('app.setting_general_theme_light'), value: 'light' },
+                  { label: $t('app.setting_general_theme_dark'), value: 'dark' },
+                ]" />
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_general_default_editor_title')">
+                <SettingSelect v-model="settings.general.defaultEditor" @update:modelValue="handleChangeDefaultEditor"
+                  :options="[
+                    { label: $t('app.setting_general_default_editor_tiptap'), value: 'Tiptap' },
+                    { label: $t('app.setting_general_default_editor_codemirror'), value: 'CodeMirror' },
+                    { label: 'Crepe', value: 'Crepe' },
+                  ]" />
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_general_editor_view_title')">
+                <SettingSelect v-model="settings.general.editorView" @update:modelValue="handleChangeEditorView"
+                  :options="[
+                    { label: $t('app.setting_general_editor_view_full'), value: 'full' },
+                    { label: $t('app.setting_general_editor_view_compact'), value: 'compact' },
+                  ]" />
+              </SettingRow>
+
+              <SettingRow :label="$t('app.setting_general_font_title')">
+                <input v-model="settings.general.fontFamily" type="text" class="input input-sm input-bordered w-40"
+                  @change="handleSaveSettings" autocomplete="off" />
+              </SettingRow>
+            </div>
+          </div>
 
-            <label class="form-control w-full pt-2">
-              <div class="label">
-                <span class="font-semibold label-text">{{ $t('app.setting_general_font_title') }}</span>
-              </div>
-              <input v-model="settings.general.fontFamily" type="text"
-                class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveSettings"
-                autocomplete="off" />
-            </label>
+          <hr class="border-base-content/20">
 
-            <label class="form-control w-full pt-2">
-              <div class="label">
-                <span class="font-semibold label-text">{{ $t('app.setting_general_security_title') }}</span>
-              </div>
-              <button class="btn btn-sm btn-primary" @click="handleClickSetPassword">
-                {{ props.isPasswordExist ? $t('app.setting_general_security_change_password') :
-                  $t('app.setting_general_security_set_password') }}
-              </button>
-            </label>
+          <!-- security setting -->
+          <div class="p-4">
+            <h2 class="text-lg font-semibold mb-2">{{ $t('app.setting_security_title') }}</h2>
+            <div class="">
+              <SettingRow :label="$t('app.setting_general_security_title')">
+                <button class="btn rounded-md btn-sm font-normal shadow-none border border-base-content/20"
+                  @click="handleClickSetPassword">
+                  {{ props.isPasswordExist ? $t('app.setting_general_security_change_password') :
+                    $t('app.setting_general_security_set_password') }}
+                </button>
+              </SettingRow>
+            </div>
           </div>
 
-          <hr class="mt-6 mb-4 border-neutral">
+          <hr class="border-base-content/20">
 
           <!-- sync setting -->
           <div class="p-4">
             <h2 class="text-lg font-semibold mb-2">{{ $t('app.setting_sync_title') }}</h2>
 
-            <div class="label">
-              <span class="font-semibold label-text">{{ $t('app.setting_sync_adapter_title') }}</span>
-            </div>
-            <div class="grid grid-cols-12 gap-4">
-              <div class="col-span-8">
-                <label class="form-control w-full">
-                  <select v-model="adapterSelect" class="select select-sm select-bordered">
-                    <option value="LocalForage">LocalForage (Offline)</option>
-                    <option value="Turso">Turso (Online)</option>
-                  </select>
-                </label>
-
-                <a href="https://docs.opennotas.io/started/setup-sync" class="text-xs underline inline-block mt-2">
-                  {{ $t('app.setting_sync_adapter_setup_guide') }}
-                </a>
-              </div>
-              <div class="col-span-4">
-                <button class="btn btn-sm btn-primary w-full" :disabled="!isAdapterChanged" @click="handleSaveAdapter">
-                  {{ $t('app.setting_sync_adapter_save') }}
-                </button>
-              </div>
-            </div>
-
-            <div v-if="adapterSelect !== 'LocalForage'">
-              <label class="form-control w-full pt-2">
-                <div class="label">
-                  <span class="font-semibold label-text">{{ $t('app.setting_sync_sync_frequency_title') }}</span>
-                </div>
-                <select v-model="settings.sync.frequency" class="select select-sm select-bordered"
-                  @change="handleSaveSettings">
-                  <option value="5">5 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                  <option value="10">10 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                  <option value="15">15 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                  <option value="30">30 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                  <option value="60">60 {{ $t('app.setting_sync_sync_frequency_unit') }}</option>
-                </select>
-              </label>
-
-              <label class="form-control pt-2">
-                <div class="label">
-                  <span class="font-semibold label-text">{{ $t('app.setting_sync_config_title') }}</span>
-                </div>
-                <input v-model="settings.sync.configuration" type="text"
-                  class="input input-sm lg:input-md input-bordered w-full" @change="handleSaveSettings"
-                  autocomplete="off" />
-              </label>
-            </div>
-
-            <!-- Image Sync Settings -->
-            <div class="border-t border-neutral mt-4 pt-2">
-              <label class="form-control w-full">
-                <div class="label cursor-pointer justify-start gap-4">
-                  <input type="checkbox" v-model="settings.imageSync.enabled" class="toggle toggle-sm"
-                    @change="handleSaveImageSyncSettings" />
-                  <span class="font-semibold label-text">{{ $t('app.setting_image_sync_enable') }}</span>
+            <div class="space-y-6">
+              <!-- Note Sync -->
+              <div class="">
+                <div class="flex items-center justify-between gap-6 py-4">
+                  <div class="min-w-0">
+                    <p class="font-medium">{{ $t('app.setting_sync_adapter_title') }}</p>
+                    <p class="text-xs text-base-content/60 mt-1">
+                      {{ $t('app.setting_sync_adapter_description') }}
+                      <br /><a href="https://docs.opennotas.io/started/setup-sync" target="_blank"
+                        class="underline text-xs hover:text-primary">{{ $t('app.setting_sync_adapter_setup_guide')
+                        }}</a>
+                    </p>
+                  </div>
+                  <div class="shrink-0 flex items-center gap-2">
+                    <SettingSelect v-model="adapterSelect" :options="[
+                      { label: 'LocalForage (Offline)', value: 'LocalForage' },
+                      { label: 'Turso (Online)', value: 'Turso' },
+                    ]" />
+                  </div>
                 </div>
-              </label>
 
-              <a href="https://docs.opennotas.io/started/setup-sync/s3-storage"
-                class="text-xs underline inline-block mt-2">
-                {{ $t('app.setting_image_sync_setup_guide') }}
-              </a>
+                <SettingRow v-if="adapterSelect !== 'LocalForage'" :label="$t('app.setting_sync_sync_frequency_title')">
+                  <SettingSelect v-model="settings.sync.frequency" @update:modelValue="handleSaveSettings" :options="[
+                    { label: `5 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '5' },
+                    { label: `10 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '10' },
+                    { label: `15 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '15' },
+                    { label: `30 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '30' },
+                    { label: `60 ${$t('app.setting_sync_sync_frequency_unit')}`, value: '60' },
+                  ]" />
+                </SettingRow>
+
+                <SettingRow v-if="adapterSelect !== 'LocalForage'" :label="$t('app.setting_sync_config_title')">
+                  <button type="button"
+                    class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                    @click="handleOpenSyncConfigModal">
+                    {{ $t('app.setting_configure_button') }}
+                  </button>
+                </SettingRow>
+              </div>
 
-              <div v-if="settings.imageSync?.enabled">
-                <!-- S3 Configuration -->
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_endpoint') }}</span>
-                  </div>
-                  <input v-model="settings.imageSync.s3Endpoint" type="text" placeholder="https://s3.amazonaws.com"
-                    class="input input-sm input-bordered w-full" @change="handleSaveImageSyncSettings"
-                    autocomplete="off" />
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_access_key') }}</span>
-                  </div>
-                  <input v-model="settings.imageSync.s3AccessKey" type="text" placeholder="AKIAIOSFODNN7EXAMPLE"
-                    class="input input-sm input-bordered w-full" @change="handleSaveImageSyncSettings"
-                    autocomplete="off" />
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_secret_key') }}</span>
+              <!-- Image Sync -->
+              <div class="">
+                <SettingRow :label="$t('app.setting_image_sync_enable')">
+                  <input type="checkbox" v-model="settings.imageSync.enabled" class="toggle"
+                    @change="handleSaveSettings" />
+                </SettingRow>
+
+                <div v-if="settings.imageSync?.enabled" class="flex items-center justify-between gap-6 py-4">
+                  <div class="min-w-0">
+                    <p class="font-medium">{{ $t('app.setting_image_sync_config_title') }}</p>
+                    <p class="text-xs text-base-content/60 mt-1">
+                      {{ $t('app.setting_image_sync_description') }}
+                      <br /><a href="https://docs.opennotas.io/started/setup-sync/s3-storage" target="_blank"
+                        class="underline text-xs hover:text-primary">{{ $t('app.setting_image_sync_setup_guide') }}</a>
+                    </p>
                   </div>
-                  <input v-model="settings.imageSync.s3SecretKey" type="password" placeholder="••••••••"
-                    class="input input-sm input-bordered w-full" @change="handleSaveImageSyncSettings"
-                    autocomplete="off" />
-                </label>
-
-                <label class="form-control w-full pt-2">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_s3_bucket') }}</span>
-                  </div>
-                  <input v-model="settings.imageSync.s3Bucket" type="text" placeholder="my-bucket"
-                    class="input input-sm input-bordered w-full" @change="handleSaveImageSyncSettings"
-                    autocomplete="off" />
-                </label>
-
-                <!-- Worker URL (optional) -->
-                <label class="form-control w-full pt-4">
-                  <div class="label">
-                    <span class="font-semibold label-text">{{ $t('app.setting_image_sync_worker_url') }}</span>
-                    <span class="label-text-alt">{{ $t('app.setting_image_sync_worker_url_optional') }}</span>
-                  </div>
-                  <input v-model="settings.imageSync.workerUrl" type="text"
-                    :placeholder="$t('app.setting_image_sync_worker_url_placeholder')"
-                    class="input input-sm input-bordered w-full" @change="handleSaveImageSyncSettings"
-                    autocomplete="off" />
-                </label>
-
-                <label class="form-control w-full pt-4">
-                  <button class="btn btn-primary w-full btn-sm !text-sm"
-                    :class="{ 'btn-success': imageSyncTestStatus === 'success', 'btn-error': imageSyncTestStatus === 'failed' }"
-                    @click="handleTestImageSyncConnection"
-                    :disabled="imageSyncTestStatus === 'testing' || !isS3ConfigComplete">
-                    <span class="text-sm" v-if="imageSyncTestStatus === 'idle'">{{
-                      $t('app.setting_image_sync_test_connection') }}</span>
-                    <span v-else-if="imageSyncTestStatus === 'testing'"
-                      class="text-sm loading loading-spinner loading-sm"></span>
-                    <span v-else-if="imageSyncTestStatus === 'success'" class="text-sm">{{
-                      $t('app.setting_image_sync_connected') }}</span>
-                    <span v-else-if="imageSyncTestStatus === 'failed'" class="text-sm">{{
-                      $t('app.setting_image_sync_failed') }}</span>
+                  <button type="button"
+                    class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20 shrink-0"
+                    @click="handleOpenImageSyncConfigModal">
+                    {{ $t('app.setting_configure_button') }}
                   </button>
-                </label>
-
-                <p class="text-xs text-base-content/60 mt-2">
-                  {{ $t('app.setting_image_sync_hint') }}
-                </p>
+                </div>
               </div>
             </div>
           </div>
 
-          <hr class="mt-6 mb-4 border-neutral">
+          <hr class="border-base-content/20">
 
           <!-- tools setting -->
           <div class="p-4">
             <h2 class="text-lg font-semibold mb-2">{{ $t('app.setting_tools_title') }}</h2>
 
-            <div class="label">
-              <span class="font-semibold label-text">{{ $t('app.setting_tools_backup_title') }}</span>
-            </div>
-            <ul class="menu bg-base-100 border rounded-md border-neutral p-0 [&_li>*]:rounded-none">
-              <li @click="handleClickExportNotes">
-                <span class="w-full flex flex-row justify-between">
-                  {{ $t('app.setting_tools_backup_export') }}
-                  <ChevronRight />
-                </span>
-              </li>
-              <li @click="handleClickImportNotes">
-                <span class="w-full flex flex-row justify-between">
-                  {{ $t('app.setting_tools_backup_import') }}
-                  <ChevronRight />
-                </span>
-              </li>
-            </ul>
+            <div class="space-y-6">
+              <div class="">
+                <SettingRow :label="$t('app.setting_tools_backup_export')">
+                  <button type="button"
+                    class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                    @click="handleClickExportNotes">
+                    {{ $t('app.setting_tools_backup_export_button') }}
+                  </button>
+                </SettingRow>
 
-            <label class="form-control w-full pt-2">
-              <div class="label">
-                <span class="font-semibold label-text">Service Worker</span>
+                <SettingRow :label="$t('app.setting_tools_backup_import')">
+                  <button type="button"
+                    class="btn btn-sm rounded-md font-normal shadow-none border border-base-content/20"
+                    @click="handleClickImportNotes">
+                    {{ $t('app.setting_tools_backup_import_button') }}
+                  </button>
+                </SettingRow>
               </div>
-              <button class="btn btn-error btn-sm" @click="handleClickResetServiceWorker">
-                {{ $t('app.setting_tools_reset_service_worker_title') }}
-              </button>
-            </label>
+
+              <div class="">
+                <SettingRow label="Service Worker">
+                  <button class="btn btn-sm btn-outline btn-error" @click="handleClickResetServiceWorker">
+                    {{ $t('app.setting_tools_reset_service_worker_title') }}
+                  </button>
+                </SettingRow>
+
+                <SettingRow :label="$t('app.setting_tools_force_update_title')"
+                  :description="$t('app.setting_tools_force_update_description')">
+                  <button class="btn btn-sm btn-outline btn-error" @click="handleClickForceUpdate">
+                    {{ $t('app.setting_tools_force_update_button') }}
+                  </button>
+                </SettingRow>
+              </div>
+            </div>
+          </div>
+
+          <hr class="border-base-content/20">
+
+          <!-- about -->
+          <div class="p-4">
+            <h2 class="text-lg font-semibold mb-2">{{ $t('app.setting_about_title') }}</h2>
+            <div class="flex flex-col items-center py-4">
+              <img :src="'/logo-icon.png'" height="96" width="96" alt="OpenNotas Logo" />
+              <a class="underline" href="https://opennotas.io">
+                <h1 class="font-bold text-2xl mt-2">{{ $t('app_name') }}</h1>
+              </a>
+              <p class="mt-2 text-center text-sm">{{ $t('app.slogan') }}</p>
+            </div>
           </div>
 
           <div class="h-6"></div>
 
         </div>
+
+        <div v-if="isAdapterChanged"
+          class="shrink-0 border-t border-base-content/15 px-4 py-3 flex items-center justify-end gap-2 bg-base-100">
+          <button class="btn btn-sm" @click="handleCancelAdapterChange">
+            {{ $t('app.setting_sync_adapter_cancel') }}
+          </button>
+          <button class="btn btn-sm btn-primary" @click="handleSaveAdapter">
+            {{ $t('app.setting_sync_adapter_save') }}
+          </button>
+        </div>
       </div>
 
     </div>
   </div>
 
-  <ModalMenuEditor
-    @copyToClipboard="handleClickCopyToClipboard"
-    @clickInfo="handleClickInfo"
-  />
+  <ModalMenuEditor @copyToClipboard="handleClickCopyToClipboard" @clickInfo="handleClickInfo" />
+
+  <ModalConfirmImageSyncChange v-if="isShowModalConfirmImageSyncChange" @confirm="handleConfirmImageSyncChange"
+    @close="handleCancelImageSyncChange" />
+
+  <ModalSyncConfig v-if="isShowModalSyncConfig" :value="settings.sync.configuration" @confirm="handleConfirmSyncConfig"
+    @close="handleCloseSyncConfigModal" />
+
+  <ModalImageSyncConfig v-if="isShowModalImageSyncConfig" :s3Config="draftS3Config" :isDirty="isS3ConfigDirty"
+    :isComplete="isS3ConfigComplete" :testStatus="imageSyncTestStatus" @save="handleSaveImageSyncConfigModal"
+    @test="handleTestImageSyncConnection" @close="handleCloseImageSyncConfigModal" />
 </template>
 
 <style lang="scss">
diff --git a/components/toolbar/form-notes-format/index.vue b/components/toolbar/form-notes-format/index.vue
index 5f14f17..6626c88 100644
--- a/components/toolbar/form-notes-format/index.vue
+++ b/components/toolbar/form-notes-format/index.vue
@@ -166,7 +166,7 @@ const handleClickCodeBlock = () => {
     <div class="flex flex-row gap-2 items-center">
       <div class="dropdown dropdown-top dropdown-start flex items-center">
         <div tabindex="0" role="button"
-          class="btn btn-xs lg:btn-sm btn-square border-none bg-primary-content/20 hover:bg-primary-content/30 text-primary-content"
+          class="btn btn-xs lg:btn-sm btn-square border-content bg-primary-content/20 hover:bg-primary-content/30 text-primary-content"
           :class="{ '!bg-primary-content !text-primary': false }">
           <H class="size-4 lg:size-5 cursor-pointer" />
         </div>
diff --git a/components/toolbar/notes/index.vue b/components/toolbar/notes/index.vue
index 08b5175..67d842a 100644
--- a/components/toolbar/notes/index.vue
+++ b/components/toolbar/notes/index.vue
@@ -2,6 +2,10 @@
 import Search from '../assets/svg/search.svg?component';
 import Plus from '../assets/svg/plus.svg?component';
 
+const props = defineProps([
+  'hideAddButton',
+]);
+
 const emit = defineEmits([
   'clickAddNote',
   'clickSearch',
@@ -47,7 +51,7 @@ defineExpose({
       <input type="text" class="grow" :placeholder="$t('app.toolbar_note_search_placeholder')" v-model="searchInput" />
     </label>
 
-    <button class="btn btn-sm bg-primary text-primary-content flex items-center gap-1 hover:bg-primary/90"
+    <button v-if="!props.hideAddButton" class="btn btn-sm bg-primary text-primary-content flex items-center gap-1 hover:bg-primary/90"
       @click="handleClickAddNote">
       <Plus />
       {{ $t('app.toolbar_note_add') }}
diff --git a/components/toolbar/tag/index.vue b/components/toolbar/tag/index.vue
new file mode 100644
index 0000000..e06cf6b
--- /dev/null
+++ b/components/toolbar/tag/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import Plus from '~/assets/svg/plus.svg?component';
+
+const props = defineProps([
+  'isSyncing',
+  'isCollapseFolder',
+  'isShowToolbarFolder',
+]);
+
+const emit = defineEmits([
+  'clickAddTag',
+]);
+
+const handleClickAddTag = () => {
+  emit('clickAddTag');
+}
+
+const refreshRef = ref<HTMLElement | null>(null);
+watch(() => props.isSyncing, (value) => {
+  if (value) {
+    refreshRef.value?.classList.add('spin');
+  } else {
+    refreshRef.value?.classList.remove('spin');
+  }
+});
+</script>
+
+<template>
+  <div class="px-4 py-2 flex gap-4 justify-between items-center h-20 overflow-hidden"
+    :class="{ 'invisible': !props.isShowToolbarFolder || props.isCollapseFolder }">
+    <p class="text-md font-semibold text-base-content mr-4">OpenNotas</p>
+
+    <button class="btn btn-sm bg-primary text-primary-content flex items-center gap-1 hover:bg-primary/90"
+      @click="handleClickAddTag">
+      <Plus />
+      {{ $t('app.toolbar_tag_add') }}
+    </button>
+  </div>
+</template>
diff --git a/composables/useToast.ts b/composables/useToast.ts
new file mode 100644
index 0000000..ee4ff70
--- /dev/null
+++ b/composables/useToast.ts
@@ -0,0 +1,38 @@
+import { ref, readonly } from 'vue';
+
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+
+export type ToastItem = {
+  id: number;
+  message: string;
+  variant: ToastVariant;
+};
+
+const toasts = ref<ToastItem[]>([]);
+
+export function dismiss(id: number) {
+  toasts.value = toasts.value.filter((t) => t.id !== id);
+}
+
+export function showToast(message: string, variant: ToastVariant = 'info', duration = 5000) {
+  const id = Date.now();
+  toasts.value = [...toasts.value, { id, message, variant }];
+  setTimeout(() => dismiss(id), duration);
+}
+
+export const showInfo = (msg: string) => showToast(msg, 'info');
+export const showSuccess = (msg: string) => showToast(msg, 'success');
+export const showWarning = (msg: string) => showToast(msg, 'warning');
+export const showError = (msg: string) => showToast(msg, 'error');
+
+export function useToast() {
+  return {
+    toasts: readonly(toasts),
+    dismiss,
+    showToast,
+    showInfo,
+    showSuccess,
+    showWarning,
+    showError,
+  };
+}
diff --git a/locales/en.json b/locales/en.json
index a587b0c..151a34f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -83,7 +83,9 @@
     "menu_note_pin": "Pin Note",
     "menu_note_unpin": "Unpin Note",
     "menu_note_copy": "Copy Note",
+    "menu_note_move": "Move",
     "menu_note_info": "Note Info",
+    "menu_note_history": "History",
     "menu_note_change_editor": "Change Editor",
     "menu_note_lock": "Lock Note",
     "menu_note_unlock": "Unlock Note",
@@ -103,6 +105,7 @@
     "toolbar_form_note_info": "Info",
     "setting_title": "Settings",
     "setting_general_title": "General",
+    "setting_security_title": "Security",
     "setting_sync_title": "Sync",
     "setting_tools_title": "Tools",
     "setting_about_title": "About",
@@ -121,20 +124,54 @@
     "setting_general_editor_view_full": "Full",
     "setting_general_editor_view_compact": "Compact",
     "setting_general_font_title": "Font",
-    "setting_general_security_title": "Note Security",
+    "setting_general_font_save": "Save",
+    "setting_general_font_cancel": "Cancel",
+    "setting_general_security_title": "Note Password",
     "setting_general_security_set_password": "Set Note Password",
-    "setting_general_security_change_password": "Change Note Password",
+    "setting_general_security_change_password": "Change Password",
     "setting_sync_adapter_title": "Choose Adapter",
+    "setting_sync_adapter_description": "Choose where your notes are stored and synced.",
+    "setting_configure_button": "Configure",
     "setting_sync_adapter_setup_guide": "Adapter Setup Guide",
     "setting_image_sync_setup_guide": "Image Sync Setup Guide",
     "setting_sync_adapter_save": "Save",
-    "setting_sync_sync_frequency_title": "Sync Frequency",
+    "setting_sync_adapter_cancel": "Cancel",
+    "setting_sync_sync_frequency_title": "Frequency",
     "setting_sync_sync_frequency_unit": "seconds",
-    "setting_sync_config_title": "Sync Configuration for Adapter (JSON)",
-    "setting_tools_backup_title": "Backup/Restore Notes",
+    "setting_sync_config_title": "Configuration",
+    "modal_sync_config_cancel": "Cancel",
     "setting_tools_backup_export": "Export Notes",
+    "setting_tools_backup_export_button": "Export",
     "setting_tools_backup_import": "Import Notes",
-    "setting_tools_reset_service_worker_title": "Reset Service Worker",
+    "setting_tools_backup_import_button": "Import",
+    "setting_tools_reset_service_worker_title": "Reset",
+    "setting_tools_force_update_title": "Force Update",
+    "setting_tools_force_update_description": "Clear cached assets and reload the page to get the latest version from the server.",
+    "setting_tools_force_update_button": "Force Update",
+    "toolbar_tag_add": "Add",
+    "tab_folders": "Folders",
+    "tab_tags": "Tags",
+    "list_tag_empty": "Create new tag",
+    "menu_tag_edit": "Edit",
+    "menu_tag_delete": "Delete",
+    "menu_note_add_to_tag": "Add to tag",
+    "menu_note_tags_empty": "No tags yet",
+    "modal_tag_form_title_create": "Create tag",
+    "modal_tag_form_title_edit": "Edit tag",
+    "modal_tag_form_input_name": "Tag name",
+    "modal_tag_form_input_color": "Color",
+    "modal_tag_form_custom_color": "Custom",
+    "modal_tag_form_cancel": "Cancel",
+    "modal_tag_form_ok": "Confirm",
+    "modal_tag_color_custom_title": "Choose custom color",
+    "modal_tag_color_custom_placeholder": "#RRGGBB",
+    "modal_confirm_delete_tag_title": "Confirm delete tag",
+    "modal_confirm_delete_tag_content": "Deleting this tag will remove it from all notes. The notes themselves will not be deleted. Are you sure?",
+    "modal_confirm_delete_tag_cancel": "Cancel",
+    "modal_confirm_delete_tag_ok": "Confirm",
+    "message_tag_created": "Tag created",
+    "message_tag_updated": "Tag updated",
+    "message_tag_deleted": "Tag deleted",
     "modal_alert_set_password_title": "Set Note Password",
     "modal_alert_set_password_content": "You need to set a note password in \"Settings\" > \"General\" before locking the note",
     "modal_alert_set_password_ok": "Understood",
@@ -150,6 +187,18 @@
     "modal_confirm_delete_folder_content": "Deleting the folder will permanently delete the folder, and notes inside will be moved to the trash. Are you sure?",
     "modal_confirm_delete_folder_cancel": "Cancel",
     "modal_confirm_delete_folder_ok": "Sure",
+    "modal_confirm_restore_note_history_title": "Restore this backup?",
+    "modal_confirm_restore_note_history_content": "The current content will be saved to history before being replaced with this backup's content.",
+    "modal_confirm_restore_note_history_cancel": "Cancel",
+    "modal_confirm_restore_note_history_ok": "Restore",
+    "modal_confirm_delete_note_history_title": "Delete this backup?",
+    "modal_confirm_delete_note_history_content": "The selected backup will be permanently deleted and cannot be recovered.",
+    "modal_confirm_delete_note_history_cancel": "Cancel",
+    "modal_confirm_delete_note_history_ok": "Delete",
+    "modal_confirm_sample_data_title": "View Sample Data?",
+    "modal_confirm_sample_data_content": "OpenNotas can load a few sample notes so you can explore the app. Would you like to see them?",
+    "modal_confirm_sample_data_cancel": "No, thanks",
+    "modal_confirm_sample_data_ok": "Yes, show me",
     "modal_confirm_e2ee_key_title": "Confirm Secret Key",
     "modal_confirm_e2ee_key_content": "Before synchronizing data, you need to re-enter the previously backed up encryption key. If you've never synchronized before, click on \"Generate Key\" to get a new key.",
     "modal_confirm_e2ee_key_generate_key": "Generate Key",
@@ -165,12 +214,18 @@
     "modal_menu_note_pin": "Pin Note",
     "modal_menu_note_unpin": "Unpin Note",
     "modal_menu_note_copy": "Copy Note",
+    "modal_menu_note_move": "Move to Folder",
+    "modal_menu_note_info": "Note Info",
+    "modal_menu_note_history": "History",
     "modal_menu_note_lock": "Lock Note",
     "modal_menu_note_unlock": "Unlock Note",
     "modal_menu_note_delete": "Delete",
     "modal_menu_note_restore": "Restore",
     "modal_menu_note_delete_forever": "Delete from Trash",
+    "modal_move_note_title": "Move to folder",
+    "modal_move_note_empty": "No other folders available",
     "modal_menu_sidebar_new_folder": "New Folder",
+    "modal_menu_sidebar_new_tag": "New Tag",
     "modal_menu_sidebar_sync": "Sync Data",
     "modal_notes_detail_title": "Note Information",
     "modal_notes_detail_last_sync": "Last Sync",
@@ -178,12 +233,19 @@
     "modal_notes_detail_created_at": "Creation Date",
     "modal_notes_detail_word_count": "Word Count",
     "modal_notes_detail_character_count": "Character Count",
+    "modal_note_history_title": "Note History",
+    "modal_note_history_empty": "No backups yet",
+    "modal_note_history_diff_title": "Compare Changes",
+    "modal_note_history_diff_empty": "No changes",
+    "modal_note_history_diff_legend_current": "Current note content",
+    "modal_note_history_diff_legend_backup": "Backup content",
     "modal_set_password_title": "Set Password",
     "modal_set_password_change_title": "Change Password",
     "modal_set_password_old_password_input_title": "Old Password",
     "modal_set_password_new_password_input_title": "New Password",
     "modal_set_password_confirm_password_input_title": "Confirm Password",
     "modal_set_password_ok": "Confirm",
+    "modal_set_password_processing": "Processing...",
     "modal_set_password_old_password_wrong": "Old Password is Incorrect",
     "modal_unlock_notes_title": "Unlock Note",
     "modal_unlock_notes_input_password_title": "Enter Password",
@@ -197,6 +259,10 @@
     "message_note_copied_clipboard": "Note Copied",
     "message_note_copied_clipboard_lock_error": "It is not possible to copy a locked note",
     "message_note_restored": "Note Restored",
+    "message_note_deleted": "Note Deleted",
+    "message_note_moved": "Note Moved",
+    "message_note_history_restored": "Note Restored from History",
+    "message_note_history_deleted": "Backup Deleted",
     "message_setting_sync_adapter_saved": "Sync Configuration Saved",
     "message_sync_all_notes": "Sync All Notes",
     "sync_5_minutes": "Synced notes from the last 5 minutes",
@@ -207,6 +273,9 @@
     "sync_1_month": "Synced notes from the last 1 month",
     "message_import_notes": "Notes Imported",
     "message_change_password_success": "Password Changed",
+    "message_change_password_note_corrupted": "Cannot process a note's data, it may be corrupted. Nothing was changed.",
+    "message_change_password_failed": "Failed to change password, your data has been restored to a safe state.",
+    "message_change_password_recovered": "A previous password change was interrupted and has been safely rolled back.",
     "message_sync_network_offline_error": "You are offline",
     "message_sync_internal_error": "Cannot sync data",
     "message_sync_init": "Synchronizing data...",
@@ -214,6 +283,9 @@
     "message_search_no_result": "No results found",
     "message_note_can_not_save": "Cannot save notes, try switching to another editor like CodeMirror",
     "setting_image_sync_title": "Image Sync",
+    "setting_image_sync_config_title": "S3 Configuration",
+    "setting_image_sync_description": "Store and sync your images using S3-compatible storage.",
+    "modal_image_sync_config_cancel": "Cancel",
     "setting_image_sync_enable": "Enable Image Sync",
     "setting_image_sync_s3_endpoint": "S3 Endpoint",
     "setting_image_sync_s3_access_key": "S3 Access Key",
@@ -228,6 +300,16 @@
     "setting_image_sync_hint": "Enter your S3-compatible storage credentials. Images will be stored locally when offline and synced when online. You can deploy your own proxy worker or use the default one.",
     "message_image_sync_success": "Images synced successfully",
     "message_image_sync_failed": "Failed to sync images",
-    "message_image_sync_disabled": "Images are not synced, please enable image sync in settings"
+    "message_image_sync_disabled": "Images are not synced, please enable image sync in settings",
+    "message_image_sync_retry": "Sync failed, please try again later",
+    "image_sync_badge_pending": "Image not synced — click to sync",
+    "image_sync_badge_failed": "Image sync failed — click to retry",
+    "image_sync_badge_syncing": "Syncing...",
+    "setting_image_sync_save": "Save Configuration",
+    "confirm_image_sync_change_title": "Storage configuration changed",
+    "confirm_image_sync_change_message": "All previously synced images will be reset and re-uploaded to the new storage on the next sync. Images in the old storage will not be deleted automatically.",
+    "confirm_image_sync_change_confirm": "Confirm",
+    "confirm_image_sync_change_cancel": "Cancel",
+    "message_image_sync_reset": "Image sync status reset. Images will re-upload on the next sync."
   }
 }
\ No newline at end of file
diff --git a/locales/vi.json b/locales/vi.json
index 885d5b2..f1d2067 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -80,13 +80,15 @@
     "toolbar_note_search_tooltip": "Tìm kiếm",
     "toolbar_note_search_cancel": "Hủy",
     "toolbar_note_sort_by_title": "Sắp xếp",
-    "menu_note_pin": "Ghim ghi chú",
-    "menu_note_unpin": "Bỏ ghim ghi chú",
-    "menu_note_copy": "Sao chép ghi chú",
-    "menu_note_info": "Thông tin ghi chú",
+    "menu_note_pin": "Ghim",
+    "menu_note_unpin": "Bỏ ghim",
+    "menu_note_copy": "Sao chép",
+    "menu_note_move": "Di chuyển",
+    "menu_note_info": "Thông tin",
+    "menu_note_history": "Lịch sử",
     "menu_note_change_editor": "Thay đổi Editor",
-    "menu_note_lock": "Khóa ghi chú",
-    "menu_note_unlock": "Bỏ khóa ghi chú",
+    "menu_note_lock": "Khóa",
+    "menu_note_unlock": "Bỏ khóa",
     "menu_note_delete": "Xóa",
     "menu_note_restore": "Khôi phục",
     "menu_note_delete_forever": "Xóa",
@@ -103,6 +105,7 @@
     "toolbar_form_note_info": "Thông tin",
     "setting_title": "Cài đặt",
     "setting_general_title": "Chung",
+    "setting_security_title": "Bảo mật",
     "setting_sync_title": "Đồng bộ",
     "setting_tools_title": "Công cụ",
     "setting_about_title": "Giới thiệu",
@@ -121,20 +124,54 @@
     "setting_general_editor_view_full": "Đầy đủ",
     "setting_general_editor_view_compact": "Thu gọn",
     "setting_general_font_title": "Font",
+    "setting_general_font_save": "Lưu",
+    "setting_general_font_cancel": "Hủy",
     "setting_general_security_title": "Bảo mật ghi chú",
     "setting_general_security_set_password": "Đặt mật khẩu ghi chú",
     "setting_general_security_change_password": "Đổi mật khẩu ghi chú",
     "setting_sync_adapter_title": "Chọn Adapter",
+    "setting_sync_adapter_description": "Chọn nơi lưu trữ và đồng bộ ghi chú của bạn.",
+    "setting_configure_button": "Cấu hình",
     "setting_sync_adapter_setup_guide": "Hướng dẫn cài đặt",
     "setting_image_sync_setup_guide": "Hướng dẫn cài đặt",
     "setting_sync_adapter_save": "Lưu",
-    "setting_sync_sync_frequency_title": "Tần suất đồng bộ",
+    "setting_sync_adapter_cancel": "Hủy",
+    "setting_sync_sync_frequency_title": "Tần suất",
     "setting_sync_sync_frequency_unit": "giây",
-    "setting_sync_config_title": "Cấu hình đồng bộ cho Adapter (JSON)",
-    "setting_tools_backup_title": "Sao lưu/Phục hồi ghi chú",
+    "setting_sync_config_title": "Cấu hình",
+    "modal_sync_config_cancel": "Hủy",
     "setting_tools_backup_export": "Xuất ghi chú",
+    "setting_tools_backup_export_button": "Xuất",
     "setting_tools_backup_import": "Nhập ghi chú",
-    "setting_tools_reset_service_worker_title": "Đặt lại Service Worker",
+    "setting_tools_backup_import_button": "Nhập",
+    "setting_tools_reset_service_worker_title": "Đặt lại",
+    "setting_tools_force_update_title": "Buộc cập nhật",
+    "setting_tools_force_update_description": "Xóa cache asset và tải lại trang để lấy phiên bản mới nhất từ máy chủ.",
+    "setting_tools_force_update_button": "Cập nhật ngay",
+    "toolbar_tag_add": "Thêm",
+    "tab_folders": "Thư mục",
+    "tab_tags": "Tags",
+    "list_tag_empty": "Tạo tag mới",
+    "menu_tag_edit": "Sửa",
+    "menu_tag_delete": "Xóa",
+    "menu_note_add_to_tag": "Gắn thẻ",
+    "menu_note_tags_empty": "Chưa có tag nào",
+    "modal_tag_form_title_create": "Tạo tag mới",
+    "modal_tag_form_title_edit": "Sửa tag",
+    "modal_tag_form_input_name": "Tên tag",
+    "modal_tag_form_input_color": "Màu",
+    "modal_tag_form_custom_color": "Tuỳ chỉnh",
+    "modal_tag_form_cancel": "Hủy",
+    "modal_tag_form_ok": "Xác nhận",
+    "modal_tag_color_custom_title": "Chọn màu tuỳ chỉnh",
+    "modal_tag_color_custom_placeholder": "#RRGGBB",
+    "modal_confirm_delete_tag_title": "Xác nhận xóa tag",
+    "modal_confirm_delete_tag_content": "Xóa tag sẽ gỡ tag này khỏi tất cả ghi chú đang gắn. Ghi chú sẽ không bị xóa. Bạn chắc chứ?",
+    "modal_confirm_delete_tag_cancel": "Hủy",
+    "modal_confirm_delete_tag_ok": "Xác nhận",
+    "message_tag_created": "Đã tạo tag",
+    "message_tag_updated": "Đã cập nhật tag",
+    "message_tag_deleted": "Đã xóa tag",
     "modal_alert_set_password_title": "Đặt mật khẩu ghi chú",
     "modal_alert_set_password_content": "Bạn cần thiết lập mật khẩu ghi chú trong \"Cài đặt\" > \"Chung\" trước khi khóa ghi chú",
     "modal_alert_set_password_ok": "Hiểu rồi",
@@ -150,6 +187,18 @@
     "modal_confirm_delete_folder_content": "Xóa thư mục sẽ xóa vĩnh viễn thư mục và ghi chú bên trong sẽ được chuyển vào thùng rác. Bạn chắc chứ?",
     "modal_confirm_delete_folder_cancel": "Hủy",
     "modal_confirm_delete_folder_ok": "Chắc chắn",
+    "modal_confirm_restore_note_history_title": "Khôi phục bản sao lưu này?",
+    "modal_confirm_restore_note_history_content": "Nội dung hiện tại sẽ được lưu vào lịch sử trước khi thay thế bằng nội dung của bản sao lưu này.",
+    "modal_confirm_restore_note_history_cancel": "Hủy",
+    "modal_confirm_restore_note_history_ok": "Khôi phục",
+    "modal_confirm_delete_note_history_title": "Xóa bản sao lưu này?",
+    "modal_confirm_delete_note_history_content": "Bản sao lưu đã chọn sẽ bị xóa vĩnh viễn và không thể khôi phục.",
+    "modal_confirm_delete_note_history_cancel": "Hủy",
+    "modal_confirm_delete_note_history_ok": "Xóa",
+    "modal_confirm_sample_data_title": "Xem dữ liệu mẫu?",
+    "modal_confirm_sample_data_content": "OpenNotas có thể tạo sẵn vài ghi chú mẫu để bạn khám phá ứng dụng. Bạn có muốn xem không?",
+    "modal_confirm_sample_data_cancel": "Không, cảm ơn",
+    "modal_confirm_sample_data_ok": "Có, xem thử",
     "modal_confirm_e2ee_key_title": "Nhập khóa bí mật",
     "modal_confirm_e2ee_key_content": "Trước khi đồng bộ dữ liệu, bạn cần nhập lại khóa mã hóa đã sao lưu từ trước. Nếu chưa từng đồng bộ, bấm vào \"Tạo khóa\" để lấy khóa mới.",
     "modal_confirm_e2ee_key_generate_key": "Tạo khóa",
@@ -165,12 +214,18 @@
     "modal_menu_note_pin": "Ghim ghi chú",
     "modal_menu_note_unpin": "Bỏ ghim ghi chú",
     "modal_menu_note_copy": "Sao chép ghi chú",
+    "modal_menu_note_move": "Di chuyển đến thư mục",
+    "modal_menu_note_info": "Thông tin ghi chú",
+    "modal_menu_note_history": "Lịch sử",
     "modal_menu_note_lock": "Khóa ghi chú",
     "modal_menu_note_unlock": "Bỏ khóa ghi chú",
     "modal_menu_note_delete": "Xóa",
     "modal_menu_note_restore": "Khôi phục",
     "modal_menu_note_delete_forever": "Xóa khỏi thùng rác",
+    "modal_move_note_title": "Di chuyển đến thư mục",
+    "modal_move_note_empty": "Không có thư mục nào khác",
     "modal_menu_sidebar_new_folder": "Tạo thư mục mới",
+    "modal_menu_sidebar_new_tag": "Tạo tag mới",
     "modal_menu_sidebar_sync": "Đồng bộ dữ liệu",
     "modal_notes_detail_title": "Thông tin ghi chú",
     "modal_notes_detail_last_sync": "Lần đồng bộ cuối",
@@ -178,12 +233,19 @@
     "modal_notes_detail_created_at": "Ngày tạo",
     "modal_notes_detail_word_count": "Số từ",
     "modal_notes_detail_character_count": "Số ký tự",
+    "modal_note_history_title": "Lịch sử ghi chú",
+    "modal_note_history_empty": "Chưa có bản sao lưu nào",
+    "modal_note_history_diff_title": "So sánh thay đổi",
+    "modal_note_history_diff_empty": "Không có thay đổi",
+    "modal_note_history_diff_legend_current": "Nội dung hiện tại của ghi chú",
+    "modal_note_history_diff_legend_backup": "Nội dung trong bản sao lưu",
     "modal_set_password_title": "Đặt mật khẩu",
     "modal_set_password_change_title": "Đổi mật khẩu",
     "modal_set_password_old_password_input_title": "Mật khẩu cũ",
     "modal_set_password_new_password_input_title": "Mật khẩu mới",
     "modal_set_password_confirm_password_input_title": "Xác nhận mật khẩu",
     "modal_set_password_ok": "Xác nhận",
+    "modal_set_password_processing": "Đang xử lý...",
     "modal_set_password_old_password_wrong": "Mật khẩu cũ không đúng",
     "modal_unlock_notes_title": "Bỏ khóa ghi chú",
     "modal_unlock_notes_input_password_title": "Nhập mật khẩu",
@@ -197,6 +259,10 @@
     "message_note_copied_clipboard": "Đã sao chép ghi chú",
     "message_note_copied_clipboard_lock_error": "Không thể sao chép ghi chú đã khóa",
     "message_note_restored": "Đã khôi phục ghi chú",
+    "message_note_deleted": "Đã xóa ghi chú",
+    "message_note_moved": "Đã di chuyển ghi chú",
+    "message_note_history_restored": "Đã khôi phục ghi chú từ lịch sử",
+    "message_note_history_deleted": "Đã xóa bản sao lưu",
     "message_setting_sync_adapter_saved": "Đã lưu cấu hình đồng bộ",
     "message_sync_all_notes": "Đã đồng bộ tất cả ghi chú",
     "sync_5_minutes": "Đã đồng bộ ghi chú trong 5 phút gần đây",
@@ -207,6 +273,9 @@
     "sync_1_month": "Đã đồng bộ ghi chú trong 1 tháng gần đây",
     "message_import_notes": "Đã nhập ghi chú",
     "message_change_password_success": "Đã đổi mật khẩu",
+    "message_change_password_note_corrupted": "Không thể xử lý dữ liệu của một ghi chú, dữ liệu có thể bị lỗi. Không có gì bị thay đổi.",
+    "message_change_password_failed": "Đổi mật khẩu thất bại, dữ liệu đã được khôi phục về trạng thái an toàn.",
+    "message_change_password_recovered": "Lần đổi mật khẩu trước đã bị gián đoạn và đã được tự động khôi phục an toàn.",
     "message_sync_network_offline_error": "Bạn đang ngoại tuyến",
     "message_sync_internal_error": "Không thể đồng bộ dữ liệu",
     "message_sync_init": "Đang đồng bộ dữ liệu...",
@@ -214,6 +283,9 @@
     "message_search_no_result": "Không tìm thấy kết quả",
     "message_note_can_not_save": "Không thể lưu ghi chú, hãy thử chuyển sang trình soạn thảo khác như CodeMirror",
     "setting_image_sync_title": "Đồng bộ hình ảnh",
+    "setting_image_sync_config_title": "Cấu hình S3",
+    "setting_image_sync_description": "Lưu trữ và đồng bộ hình ảnh của bạn bằng dịch vụ lưu trữ tương thích S3.",
+    "modal_image_sync_config_cancel": "Hủy",
     "setting_image_sync_enable": "Bật đồng bộ hình ảnh",
     "setting_image_sync_s3_endpoint": "S3 Endpoint",
     "setting_image_sync_s3_access_key": "S3 Access Key",
@@ -228,6 +300,16 @@
     "setting_image_sync_hint": "Nhập thông tin S3-compatible storage của bạn. Hình ảnh sẽ được lưu cục bộ khi offline và đồng bộ khi online. Bạn có thể tự triển khai proxy worker hoặc dùng mặc định.",
     "message_image_sync_success": "Đồng bộ hình ảnh thành công",
     "message_image_sync_failed": "Đồng bộ hình ảnh thất bại",
-    "message_image_sync_disabled": "Hình ảnh không được đồng bộ, vui lòng bật đồng bộ hình ảnh trong cài đặt"
+    "message_image_sync_disabled": "Hình ảnh không được đồng bộ, vui lòng bật đồng bộ hình ảnh trong cài đặt",
+    "message_image_sync_retry": "Đồng bộ thất bại, vui lòng thử lại sau",
+    "image_sync_badge_pending": "Ảnh chưa được đồng bộ — nhấn để đồng bộ",
+    "image_sync_badge_failed": "Đồng bộ ảnh thất bại — nhấn để thử lại",
+    "image_sync_badge_syncing": "Đang đồng bộ...",
+    "setting_image_sync_save": "Lưu cấu hình",
+    "confirm_image_sync_change_title": "Cấu hình lưu trữ đã thay đổi",
+    "confirm_image_sync_change_message": "Tất cả ảnh đã đồng bộ sẽ được đặt lại và tải lên lại vào kho lưu trữ mới trong lần đồng bộ tiếp theo. Ảnh trong kho lưu trữ cũ sẽ không bị xóa tự động.",
+    "confirm_image_sync_change_confirm": "Xác nhận",
+    "confirm_image_sync_change_cancel": "Hủy",
+    "message_image_sync_reset": "Đã đặt lại trạng thái đồng bộ ảnh. Ảnh sẽ được tải lên lại trong lần đồng bộ tiếp theo."
   }
 }
\ No newline at end of file
diff --git a/locales/zhtw.json b/locales/zhtw.json
index c540b51..0ecab3a 100644
--- a/locales/zhtw.json
+++ b/locales/zhtw.json
@@ -82,7 +82,9 @@
         "menu_note_pin": "置頂筆記",
         "menu_note_unpin": "取消置頂筆記",
         "menu_note_copy": "複製筆記",
+        "menu_note_move": "移動到資料夾",
         "menu_note_info": "筆訊資訊",
+        "menu_note_history": "歷史記錄",
         "menu_note_change_editor": "切換編輯器",
         "menu_note_lock": "上鎖筆記",
         "menu_note_unlock": "解鎖筆記",
@@ -103,6 +105,7 @@
         "toolbar_note_sort_by_title": "排序",
         "setting_title": "設定",
         "setting_general_title": "一般",
+        "setting_security_title": "安全性",
         "setting_sync_title": "同步",
         "setting_tools_title": "工具",
         "setting_about_title": "關於",
@@ -121,20 +124,54 @@
         "setting_general_editor_view_full": "全屏",
         "setting_general_editor_view_compact": "細節",
         "setting_general_font_title": "字體",
+        "setting_general_font_save": "儲存",
+        "setting_general_font_cancel": "取消",
         "setting_general_security_title": "筆記安全性",
         "setting_general_security_set_password": "設定筆記密碼",
         "setting_general_security_change_password": "變更筆記密碼",
         "setting_sync_adapter_title": "選擇同步轉接器",
+        "setting_sync_adapter_description": "選擇筆記的儲存與同步方式。",
+        "setting_configure_button": "設定",
         "setting_sync_adapter_setup_guide": "轉接器設定指南",
         "setting_image_sync_setup_guide": "圖片同步設定指南",
         "setting_sync_adapter_save": "儲存",
+        "setting_sync_adapter_cancel": "取消",
         "setting_sync_sync_frequency_title": "同步頻率",
         "setting_sync_sync_frequency_unit": "秒",
-        "setting_sync_config_title": "同步設定（JSON 格式）",
-        "setting_tools_backup_title": "備份／還原筆記",
+        "setting_sync_config_title": "同步設定",
+        "modal_sync_config_cancel": "取消",
         "setting_tools_backup_export": "匯出筆記",
+        "setting_tools_backup_export_button": "匯出",
         "setting_tools_backup_import": "匯入筆記",
-        "setting_tools_reset_service_worker_title": "重設 Service Worker",
+        "setting_tools_backup_import_button": "匯入",
+        "setting_tools_reset_service_worker_title": "重設",
+        "setting_tools_force_update_title": "強制更新",
+        "setting_tools_force_update_description": "清除快取資源並重新載入頁面以取得伺服器上的最新版本。",
+        "setting_tools_force_update_button": "強制更新",
+        "toolbar_tag_add": "新增標籤",
+        "tab_folders": "資料夾",
+        "tab_tags": "標籤",
+        "list_tag_empty": "建立標籤",
+        "menu_tag_edit": "編輯",
+        "menu_tag_delete": "刪除",
+        "menu_note_add_to_tag": "加入標籤",
+        "menu_note_tags_empty": "尚無標籤",
+        "modal_tag_form_title_create": "建立標籤",
+        "modal_tag_form_title_edit": "編輯標籤",
+        "modal_tag_form_input_name": "標籤名稱",
+        "modal_tag_form_input_color": "顏色",
+        "modal_tag_form_custom_color": "自訂",
+        "modal_tag_form_cancel": "取消",
+        "modal_tag_form_ok": "確認",
+        "modal_tag_color_custom_title": "選擇自訂顏色",
+        "modal_tag_color_custom_placeholder": "#RRGGBB",
+        "modal_confirm_delete_tag_title": "確認刪除標籤",
+        "modal_confirm_delete_tag_content": "刪除此標籤將從所有筆記中移除它，筆記本身不會被刪除。確定要刪除嗎？",
+        "modal_confirm_delete_tag_cancel": "取消",
+        "modal_confirm_delete_tag_ok": "確認",
+        "message_tag_created": "已建立標籤",
+        "message_tag_updated": "已更新標籤",
+        "message_tag_deleted": "已刪除標籤",
         "modal_alert_set_password_title": "設定筆記密碼",
         "modal_alert_set_password_content": "你需要在「設定」>「一般」設定筆記密碼，才能將筆記上鎖。",
         "modal_alert_set_password_ok": "知道了",
@@ -150,6 +187,18 @@
         "modal_confirm_delete_folder_content": "刪除資料夾將會永久刪除該資料夾，且其中的筆記會被移至垃圾桶。是否確定？",
         "modal_confirm_delete_folder_cancel": "取消",
         "modal_confirm_delete_folder_ok": "確定",
+        "modal_confirm_restore_note_history_title": "還原此備份？",
+        "modal_confirm_restore_note_history_content": "目前的內容會先儲存至歷史紀錄，再替換為此備份的內容。",
+        "modal_confirm_restore_note_history_cancel": "取消",
+        "modal_confirm_restore_note_history_ok": "還原",
+        "modal_confirm_delete_note_history_title": "刪除此備份？",
+        "modal_confirm_delete_note_history_content": "所選的備份將被永久刪除，且無法復原。",
+        "modal_confirm_delete_note_history_cancel": "取消",
+        "modal_confirm_delete_note_history_ok": "刪除",
+        "modal_confirm_sample_data_title": "查看範例資料？",
+        "modal_confirm_sample_data_content": "OpenNotas 可以載入幾則範例筆記，讓您體驗這個應用程式。您想要查看嗎？",
+        "modal_confirm_sample_data_cancel": "不用了",
+        "modal_confirm_sample_data_ok": "好，看看",
         "modal_confirm_e2ee_key_title": "確認密鑰",
         "modal_confirm_e2ee_key_content": "在同步數據之前，您需要重新輸入之前備份的加密密鑰。如果您之前從未同步過，請點擊「產生密鑰」來取得新密鑰。",
         "modal_confirm_e2ee_key_generate_key": "產生密鑰",
@@ -165,12 +214,18 @@
         "modal_menu_note_pin": "置頂筆記",
         "modal_menu_note_unpin": "取消置頂筆記",
         "modal_menu_note_copy": "複製筆記",
+        "modal_menu_note_move": "移動到資料夾",
+        "modal_menu_note_info": "筆記資訊",
+        "modal_menu_note_history": "歷史記錄",
         "modal_menu_note_lock": "上鎖筆記",
         "modal_menu_note_unlock": "解鎖筆記",
         "modal_menu_note_delete": "刪除",
         "modal_menu_note_restore": "復原",
         "modal_menu_note_delete_forever": "從垃圾桶刪除",
+        "modal_move_note_title": "移動到資料夾",
+        "modal_move_note_empty": "沒有其他可用的資料夾",
         "modal_menu_sidebar_new_folder": "建立資料夾",
+        "modal_menu_sidebar_new_tag": "建立標籤",
         "modal_menu_sidebar_sync": "同步",
         "modal_notes_detail_title": "筆記資訊",
         "modal_notes_detail_last_sync": "上次同步時間",
@@ -178,12 +233,19 @@
         "modal_notes_detail_created_at": "建立日期",
         "modal_notes_detail_word_count": "字數",
         "modal_notes_detail_character_count": "字元數",
+        "modal_note_history_title": "筆記歷史記錄",
+        "modal_note_history_empty": "尚無備份",
+        "modal_note_history_diff_title": "比較變更",
+        "modal_note_history_diff_empty": "沒有變更",
+        "modal_note_history_diff_legend_current": "目前的筆記內容",
+        "modal_note_history_diff_legend_backup": "備份中的內容",
         "modal_set_password_title": "設定密碼",
         "modal_set_password_change_title": "變更密碼",
         "modal_set_password_old_password_input_title": "舊密碼",
         "modal_set_password_new_password_input_title": "新密碼",
         "modal_set_password_confirm_password_input_title": "確認密碼",
         "modal_set_password_ok": "確認",
+        "modal_set_password_processing": "處理中...",
         "modal_set_password_old_password_wrong": "舊密碼錯誤",
         "modal_unlock_notes_title": "解鎖筆記",
         "modal_unlock_notes_input_password_title": "輸入密碼",
@@ -197,6 +259,10 @@
         "message_note_copied_clipboard": "已複製筆記",
         "message_note_copied_clipboard_lock_error": "無法複製已上鎖的筆記",
         "message_note_restored": "已還原筆記",
+        "message_note_deleted": "已刪除筆記",
+        "message_note_moved": "已移動筆記",
+        "message_note_history_restored": "已從歷史記錄還原筆記",
+        "message_note_history_deleted": "已刪除備份",
         "message_setting_sync_adapter_saved": "已儲存同步設定",
         "message_sync_all_notes": "同步所有筆記",
         "sync_5_minutes": "已同步最近 5 分鐘的筆記",
@@ -207,6 +273,9 @@
         "sync_1_month": "已同步最近 1 個月的筆記",
         "message_import_notes": "筆記已匯入",
         "message_change_password_success": "密碼已變更",
+        "message_change_password_note_corrupted": "無法處理某則筆記的資料，資料可能已損壞。未做任何變更。",
+        "message_change_password_failed": "變更密碼失敗，資料已還原至安全狀態。",
+        "message_change_password_recovered": "上次的密碼變更曾被中斷，已自動安全還原。",
         "message_sync_network_offline_error": "您目前沒有網路連線",
         "message_sync_internal_error": "無法同步資料",
         "message_sync_init": "正在同步資料...",
@@ -214,6 +283,9 @@
         "message_search_no_result": "找不到符合的筆記",
         "message_note_can_not_save": "無法儲存筆記, 請嘗試切換到另一個編輯器如 CodeMirror",
         "setting_image_sync_title": "圖片同步",
+        "setting_image_sync_config_title": "S3 設定",
+        "setting_image_sync_description": "使用相容 S3 的儲存空間來儲存與同步您的圖片。",
+        "modal_image_sync_config_cancel": "取消",
         "setting_image_sync_enable": "啟用圖片同步",
         "setting_image_sync_s3_endpoint": "S3 Endpoint",
         "setting_image_sync_s3_access_key": "S3 存取金鑰",
@@ -228,6 +300,16 @@
         "setting_image_sync_hint": "請輸入您的 S3 相容儲存憑證。圖片將在離線時儲存在本機，並在線時同步。您可以部署自己的代理工作器或使用預設的代理工作器。",
         "message_image_sync_success": "圖片同步成功",
         "message_image_sync_failed": "圖片同步失敗",
-        "message_image_sync_disabled": "圖片未同步，請在設定中啟用圖片同步"
+        "message_image_sync_disabled": "圖片未同步，請在設定中啟用圖片同步",
+        "message_image_sync_retry": "同步失敗，請稍後再試",
+        "image_sync_badge_pending": "圖片尚未同步 — 點擊以同步",
+        "image_sync_badge_failed": "圖片同步失敗 — 點擊以重試",
+        "image_sync_badge_syncing": "同步中...",
+        "setting_image_sync_save": "儲存設定",
+        "confirm_image_sync_change_title": "儲存設定已變更",
+        "confirm_image_sync_change_message": "所有已同步的圖片將被重置，並在下次同步時重新上傳至新的儲存空間。舊儲存空間中的圖片不會自動刪除。",
+        "confirm_image_sync_change_confirm": "確認",
+        "confirm_image_sync_change_cancel": "取消",
+        "message_image_sync_reset": "圖片同步狀態已重置。圖片將在下次同步時重新上傳。"
     }
 }
\ No newline at end of file
diff --git a/migrate/drizzle/drizzle.config.ts b/migrate/drizzle/drizzle.config.ts
index cb509b0..219ea7c 100644
--- a/migrate/drizzle/drizzle.config.ts
+++ b/migrate/drizzle/drizzle.config.ts
@@ -1,8 +1,8 @@
 import type { Config } from "drizzle-kit";
 
 export default {
-  schema: "../../adapter/turso/models",
-  out: "../../adapter/turso/migrations",
+  schema: "adapter/turso/models",
+  out: "adapter/turso/migrations",
   driver: "turso",
   dbCredentials: {
     url: "",
diff --git a/migrate/scripts/apply-migrations.ts b/migrate/scripts/apply-migrations.ts
new file mode 100644
index 0000000..b713c03
--- /dev/null
+++ b/migrate/scripts/apply-migrations.ts
@@ -0,0 +1,89 @@
+import localforage from "localforage";
+
+// Each user hosts their own Turso DB (config comes from settings.sync.configuration),
+// so schema migrations must be applied by the client against that DB, not by a central CI job.
+const migrationModules = import.meta.glob<string>(
+  "../../adapter/turso/migrations/*.sql",
+  { eager: true, query: "?raw", import: "default" }
+);
+
+// One entry per migration file, in order; each entry is the list of SQL statements in that file.
+const migrations: string[][] = Object.keys(migrationModules)
+  .sort()
+  .map((path) =>
+    (migrationModules[path] as string)
+      .split("--> statement-breakpoint")
+      .map((statement) => statement.trim())
+      .filter(Boolean)
+  );
+
+// Derived from the number of bundled migration files, so it bumps automatically
+// whenever a new `000N_*.sql` file is added — no constant to remember to update.
+const CURRENT_SCHEMA_VERSION = migrations.length;
+
+const VERIFIED_VERSION_KEY = "tursoSchemaVerifiedVersion";
+
+let migrationInFlight: Promise<void> | null = null;
+
+function isBenignSchemaError(error: any): boolean {
+  const message = String(error?.message || "").toLowerCase();
+  return message.includes("already exists") || message.includes("duplicate column");
+}
+
+async function readRemoteSchemaVersion(client: any): Promise<number> {
+  try {
+    const result = await client.execute("SELECT schemaVersion FROM settings LIMIT 1");
+    const version = result.rows?.[0]?.schemaVersion;
+    return version ? Number(version) : 0;
+  } catch (error) {
+    // Pre-existing DB from before schemaVersion tracking existed (column/table not there yet).
+    return 0;
+  }
+}
+
+async function writeRemoteSchemaVersion(client: any, version: number): Promise<void> {
+  await client.execute({
+    sql: "INSERT INTO settings (id, schemaVersion) VALUES ('settings', ?) ON CONFLICT(id) DO UPDATE SET schemaVersion = ?",
+    args: [version, version],
+  });
+}
+
+async function runPendingMigrations(client: any): Promise<void> {
+  const remoteVersion = await readRemoteSchemaVersion(client);
+
+  for (let version = remoteVersion; version < CURRENT_SCHEMA_VERSION; version++) {
+    for (const statement of migrations[version]) {
+      try {
+        await client.execute(statement);
+      } catch (error) {
+        if (!isBenignSchemaError(error)) {
+          throw error;
+        }
+      }
+    }
+  }
+
+  await writeRemoteSchemaVersion(client, CURRENT_SCHEMA_VERSION);
+  await localforage.setItem(VERIFIED_VERSION_KEY, CURRENT_SCHEMA_VERSION);
+}
+
+// Skips the remote check entirely once this device already knows it's on the latest
+// bundled schema — only re-checks Turso when the app itself ships a new migration.
+async function applySchemaMigrations(client: any): Promise<void> {
+  const verifiedVersion = await localforage.getItem<number>(VERIFIED_VERSION_KEY);
+  if (verifiedVersion === CURRENT_SCHEMA_VERSION) {
+    return;
+  }
+
+  if (migrationInFlight) {
+    return migrationInFlight;
+  }
+
+  migrationInFlight = runPendingMigrations(client).finally(() => {
+    migrationInFlight = null;
+  });
+
+  return migrationInFlight;
+}
+
+export { applySchemaMigrations };
diff --git a/package.json b/package.json
index 1120e02..b821770 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
+    "db:generate": "drizzle-kit generate:sqlite --config=migrate/drizzle/drizzle.config.ts",
     "patch": "npm version patch",
     "minor": "npm version minor",
     "major": "npm version major"
diff --git a/pages/index/index.vue b/pages/index/index.vue
index a929e28..420370e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -19,6 +19,9 @@ import {
   updateLastPull,
   checkPasswordExist,
   setPassword,
+  getPasswordChangeBackup,
+  savePasswordChangeBackup,
+  clearPasswordChangeBackup,
   getSettings,
   getAllNotes,
   setSettings,
@@ -38,22 +41,28 @@ import {
   setFirstInit,
   setSortNote,
   getSortNote,
+  getNoteHistory,
+  addNoteHistorySnapshot,
+  deleteNoteHistorySnapshot,
+  getTags,
+  createTag,
+  updateTag,
+  deleteTag,
+  getNotesForTag,
+  getNoteTagsByNote,
+  getNoteTagsByTag,
+  addTagToNote,
+  removeTagFromNote,
 } from '../../services/main';
 import Mutex from "~/utils/mutex";
 import { removeMarkdownEscape } from "~/utils/string";
+import { pushMobileBackState, closeMobileBackState, initMobileBackHandler } from "~/utils/mobile-back";
 
 const { setLocale } = useI18n();
 const runtimeConfig = useRuntimeConfig();
 const colorMode = useColorMode();
-const route = useRoute();
 
 const isInEditor = ref<boolean>(false);
-watch(() => route.params, () => {
-  if (!route.query.noteId) {
-    isInEditor.value = false;
-    formNotes.value = {};
-  }
-});
 
 // function for update viewport height
 function updateViewportHeight() {
@@ -76,6 +85,7 @@ onMounted(async () => {
   window.history.replaceState({}, '', window.location.pathname); // reset query params
   outsideClickMenu(); // handle outside click for menu
   disableDefaultContextMenu();
+  initMobileBackHandler(); // handle back button/gesture on mobile
 
   document.addEventListener("visibilitychange", function () {
     if (document.visibilityState === 'visible') {
@@ -112,17 +122,39 @@ onMounted(async () => {
   // }
 });
 
+// recover notes left half-migrated if a previous password change was interrupted
+onMounted(async () => {
+  const backup = await getPasswordChangeBackup();
+  if (backup?.notes?.length) {
+    for (const item of backup.notes) {
+      await updateNote(item.id, { content: item.content }).catch(() => { });
+    }
+    await clearPasswordChangeBackup();
+    showInfo($i18n.t('app.message_change_password_recovered'));
+  }
+});
+
 
 // init data notes if first time access
+const isShowModalConfirmSampleData = ref<boolean>(false);
 onMounted(async () => {
   const isFirstInit = await checkIsFirstInit();
   if (isFirstInit) {
-    const notes = await fetch('/opennotas.json').then((res) => res.json());
-    await setImportData(notes);
-    await handleTriggerImportNotes();
-    await setFirstInit();
+    toggleModalConfirmSampleData(true, isShowModalConfirmSampleData);
   }
 });
+const handleConfirmSampleData = async () => {
+  toggleModalConfirmSampleData(false, isShowModalConfirmSampleData);
+
+  const notes = await fetch('/opennotas.json').then((res) => res.json());
+  await setImportData(notes);
+  await handleTriggerImportNotes();
+  await setFirstInit();
+};
+const handleCancelSampleData = async () => {
+  toggleModalConfirmSampleData(false, isShowModalConfirmSampleData);
+  await setFirstInit();
+};
 
 // reloadNotes & reloadFolder using for reload all data display on screen
 const listNotesKey = ref<number>(0);
@@ -151,7 +183,7 @@ const reloadFolder = async (isFirst: boolean = false, focus = true) => {
   await nextTick();
   listFoldersMenu.value = await loadFolder();
   const activeFolder = await loadActiveFolder();
-  activeFolderId.value = (isFirst && activeFolder === 'bottombar-trash') ? "" : activeFolder || "";
+  activeFolderId.value = (isFirst && (activeFolder === 'bottombar-trash' || activeFolder === 'bottombar-tags')) ? "" : activeFolder || "";
 
   await reloadNotes(focus, isFirst ? false : activeFolder === 'bottombar-trash');
 }
@@ -233,13 +265,14 @@ const SYNC_LEVELS = [
 ];
 const syncLevel = ref<number>(0);
 let syncLevelResetTimer: ReturnType<typeof setTimeout> | null = null;
-const handleClickUpdateData = async () => {
+const handleClickUpdateData = async (forcedLevelIndex?: number) => {
   toggleModalMenuSidebar(false, isShowModalMenuSidebar);
   navbarTopRef.value?.closeDrawer();
 
   isSyncingAll.value = true;
-  const level = SYNC_LEVELS[syncLevel.value];
-  isSyncAll.value = syncLevel.value === SYNC_LEVELS.length - 1;
+  const levelIndex = forcedLevelIndex ?? syncLevel.value;
+  const level = SYNC_LEVELS[levelIndex];
+  isSyncAll.value = levelIndex === SYNC_LEVELS.length - 1;
   lastPull.value = level.seconds === 0 ? 0 : nowUnix() - level.seconds;
 
   await pullPush().catch(() => { });
@@ -248,7 +281,7 @@ const handleClickUpdateData = async () => {
 
   showInfoSnackbar($i18n.t(level.labelKey));
 
-  syncLevel.value = (syncLevel.value + 1) % SYNC_LEVELS.length;
+  syncLevel.value = (levelIndex + 1) % SYNC_LEVELS.length;
 
   if (syncLevelResetTimer) clearTimeout(syncLevelResetTimer);
   syncLevelResetTimer = setTimeout(() => {
@@ -273,6 +306,7 @@ const handleClickFolderName = async (folderId: string) => {
   navbarTopRef.value?.resetSearchInput();
   toolbarNotesRef.value?.resetSearchInput();
   activeFolderId.value = folderId;
+  isCollapsePanel.value = false;
   setActiveFolder(folderId);
 
   reloadNotes();
@@ -282,6 +316,8 @@ const menuFolderKey = ref<number>(0);
 const handleRightClickFolderName = (data: any) => {
   // ẩn menu note
   hideMenuNote();
+  hideMenuMoveNote();
+  hideMenuNoteTags();
 
   if (isMobile.value) {
     handleClickFolderName(data.folderId);
@@ -353,13 +389,14 @@ const handleConfirmDeleteFolder = async (folderId: string) => {
   }
 
   toggleModalConfirmDeleteFolder(false, isShowModalConfirmDeleteFolder);
-  showInfoSnackbar($i18n.t('app.message_folder_deleted'));
+  showSuccess($i18n.t('app.message_folder_deleted'));
 
   await setActiveFolder('');
   reloadFolder();
 }
 const handleClickBottombarTrash = async () => {
   activeFolderId.value = 'bottombar-trash';
+  isCollapsePanel.value = false;
   setActiveFolder('bottombar-trash');
 
   listNotes.value = await loadTrashNotes();
@@ -370,6 +407,172 @@ const handleClickBottombarTrash = async () => {
     formNotes.value = {};
   }
 }
+
+// all logic for tags
+const activeTagId = ref<string>("");
+const listTagsMenu = ref<any[]>([]);
+const isTagsMode = computed(() => activeFolderId.value === 'bottombar-tags');
+const loadTags = async () => {
+  return getTags();
+}
+const loadNotesForActiveTag = async () => {
+  return getNotesForTag(activeTagId.value, sortType.value, $i18n.t('app.list_note_locked_title'), $i18n.t('app.list_note_locked_content'));
+}
+const handleClickTags = async () => {
+  activeFolderId.value = 'bottombar-tags';
+  isCollapsePanel.value = false;
+  setActiveFolder('bottombar-tags');
+
+  listTagsMenu.value = await loadTags();
+  activeTagId.value = '';
+  listNotes.value = [];
+  formNotes.value = {};
+}
+const handleClickTagName = async (tagId: string) => {
+  activeTagId.value = tagId;
+  listNotes.value = await loadNotesForActiveTag();
+  activeNoteId.value = await loadActiveNote() || "";
+
+  if (!isMobile.value) {
+    formNotes.value = await getNoteDetail(activeNoteId.value);
+  }
+  if (!isMobile.value && listNotes.value.find((note: any) => note.id === activeNoteId.value)) {
+    formNotesRef.value?.focus();
+  } else if (!isMobile.value) {
+    formNotes.value = {};
+  }
+}
+
+const isShowModalMenuTag = ref<boolean>(false);
+const menuTagKey = ref<number>(0);
+const handleRightClickTagName = (data: any) => {
+  hideMenuNote();
+  hideMenuMoveNote();
+  hideMenuNoteTags();
+
+  if (isMobile.value) {
+    activeTagId.value = data.tagId;
+    menuTagKey.value += 1;
+    toggleModalMenuTag(true, isShowModalMenuTag);
+  } else {
+    activeTagId.value = data.tagId;
+    menuTagKey.value += 1;
+    offsetMenuTag(data);
+  }
+};
+
+const isShowModalTagForm = ref<boolean>(false);
+const tagIdToEdit = ref<string>('');
+const tagFormInitial = computed(() => {
+  const tag = listTagsMenu.value.find((tag: any) => tag.id === tagIdToEdit.value);
+  return { name: tag?.name || '', color: tag?.color || '' };
+});
+const handleClickAddTag = () => {
+  tagIdToEdit.value = '';
+  toggleModalTagForm(true, isShowModalTagForm);
+}
+const handleClickEditTag = (tagId: string) => {
+  toggleModalMenuTag(false, isShowModalMenuTag);
+  tagIdToEdit.value = tagId;
+  toggleModalTagForm(true, isShowModalTagForm);
+}
+const handleClickCloseModalTagForm = () => {
+  toggleModalTagForm(false, isShowModalTagForm);
+}
+const handleConfirmTagForm = async (data: { tagId: string; name: string; color: string }) => {
+  if (!data.tagId) {
+    const newTag = await createTag({
+      id: randomUUID(),
+      name: data.name,
+      color: data.color,
+      lastSync: 0,
+      createdAt: nowUnix(),
+      updatedAt: nowUnix(),
+      deletedAt: null,
+    });
+    setActionObject('tag', newTag);
+    showSuccess($i18n.t('app.message_tag_created'));
+  } else {
+    const updatedTag = await updateTag(data.tagId, {
+      name: data.name,
+      color: data.color,
+      updatedAt: nowUnix(),
+    });
+    setActionObject('tag', updatedTag);
+    showSuccess($i18n.t('app.message_tag_updated'));
+  }
+
+  toggleModalTagForm(false, isShowModalTagForm);
+  listTagsMenu.value = await loadTags();
+}
+
+const tagWillDelete = ref<string>("");
+const isShowModalConfirmDeleteTag = ref<boolean>(false);
+const handleClickCloseModalConfirmDeleteTag = () => {
+  toggleModalConfirmDeleteTag(false, isShowModalConfirmDeleteTag);
+}
+const handleClickDeleteTag = (tagId: string) => {
+  tagWillDelete.value = tagId;
+  toggleModalMenuTag(false, isShowModalMenuTag);
+  toggleModalConfirmDeleteTag(true, isShowModalConfirmDeleteTag);
+}
+const handleConfirmDeleteTag = async (tagId: string) => {
+  toggleModalMenuTag(false, isShowModalMenuTag);
+
+  const noteTagsOfTag = await getNoteTagsByTag(tagId);
+  await deleteTag(tagId);
+  setActionObject('tag', { id: tagId, deletedAt: nowUnix() });
+  for (const noteTag of noteTagsOfTag) {
+    setActionObject('noteTag', { id: noteTag.id, deletedAt: nowUnix() });
+  }
+
+  toggleModalConfirmDeleteTag(false, isShowModalConfirmDeleteTag);
+  showSuccess($i18n.t('app.message_tag_deleted'));
+
+  listTagsMenu.value = await loadTags();
+  if (activeTagId.value === tagId) {
+    activeTagId.value = '';
+    listNotes.value = [];
+    formNotes.value = {};
+  }
+}
+
+const noteIdForTags = ref<string>('');
+const activeNoteTagIds = ref<string[]>([]);
+const handleClickAddNoteToTag = async (noteId: string) => {
+  noteIdForTags.value = noteId;
+  activeNoteTagIds.value = (await getNoteTagsByNote(noteId)).map((noteTag: any) => noteTag.tagId);
+
+  if (isMobile.value) {
+    toggleModalMenuNote(false, isShowModalMenuNote);
+    toggleModalMenuNoteTags(true, isShowModalMenuNoteTags);
+    return;
+  }
+
+  const menuNoteEl = document.getElementById('menu-note');
+  const rect = menuNoteEl?.getBoundingClientRect();
+  if (rect) {
+    offsetMenuNoteTags({ left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom });
+  }
+};
+const handleToggleNoteTag = async (tagId: string) => {
+  const isTagged = activeNoteTagIds.value.includes(tagId);
+
+  if (isTagged) {
+    const updated = await removeTagFromNote(noteIdForTags.value, tagId);
+    setActionObject('noteTag', updated);
+    activeNoteTagIds.value = activeNoteTagIds.value.filter((id: string) => id !== tagId);
+  } else {
+    const created = await addTagToNote(noteIdForTags.value, tagId);
+    setActionObject('noteTag', created);
+    activeNoteTagIds.value = [...activeNoteTagIds.value, tagId];
+  }
+
+  if (isTagsMode.value && activeTagId.value) {
+    listNotes.value = await loadNotesForActiveTag();
+  }
+};
+
 const isShowModalMenuSidebar = ref<boolean>(false);
 const handleClickMenuSidebar = (e: any) => {
   toggleModalMenuSidebar(true, isShowModalMenuSidebar);
@@ -454,7 +657,32 @@ const handleClickCancelSearch = async () => {
   listNotes.value = await loadNotes();
 }
 const activeNoteId = ref<string>("");
+const activeNoteBaseline = ref<{ noteId: string, content: string }>({ noteId: '', content: '' });
+watch(activeNoteId, async (newId) => {
+  if (!newId) {
+    activeNoteBaseline.value = { noteId: '', content: '' };
+    return;
+  }
+  const note = await getNoteDetail(newId);
+  activeNoteBaseline.value = { noteId: newId, content: note?.content ?? '' };
+});
+const snapshotNoteBeforeLeaving = async (noteId: string) => {
+  if (activeNoteBaseline.value.noteId !== noteId) {
+    return;
+  }
+  const current = await getNoteDetail(noteId);
+  if (current?.content === undefined) {
+    return;
+  }
+  if (current.content === activeNoteBaseline.value.content) {
+    return;
+  }
+  await saveNoteHistorySnapshot(noteId, activeNoteBaseline.value.content);
+};
 const handleClickNote = async (noteId: string, inEditor: boolean = false, shouldFocus: boolean = false) => {
+  if (activeNoteId.value && activeNoteId.value !== noteId) {
+    await snapshotNoteBeforeLeaving(activeNoteId.value);
+  }
   activeNoteId.value = noteId;
   setActiveNote(noteId);
   formNotes.value = await getNoteDetail(activeNoteId.value);
@@ -469,9 +697,12 @@ const handleClickNote = async (noteId: string, inEditor: boolean = false, should
   if (inEditor) {
     isInEditor.value = true;
 
-    // if mobile, push state to change url
+    // if mobile, push a back-stack entry so hardware/gesture back closes the editor
     if (isMobile.value) {
-      window.history.pushState({}, '', `?noteId=${noteId}`);
+      pushMobileBackState(() => {
+        isInEditor.value = false;
+        snapshotNoteBeforeLeaving(noteId);
+      });
     }
   }
 };
@@ -479,6 +710,9 @@ const isShowModalMenuNote = ref<boolean>(false);
 const handleRightClickNote = (data: any) => {
   // ẩn menu folder
   hideMenuFolder();
+  hideMenuMoveNote();
+  hideMenuTag();
+  hideMenuNoteTags();
 
   if (isMobile.value) {
     handleClickNote(data.noteId);
@@ -503,6 +737,7 @@ const handleClickDeleteNote = async (noteId: string) => {
 
   listNotes.value = await loadNotes();
   formNotes.value = {};
+  showSuccess($i18n.t('app.message_note_deleted'));
 }
 const handleClickDeleteNoteForever = async (noteId: string) => {
   const updatedNote = await updateNote(noteId, {
@@ -562,6 +797,7 @@ const handleClickLockNote = async (data: any) => {
     isLocked: data.status == 1 ? 0 : 1,
     content: data.status == 1 ? await decryptData(note.content, password)
       : await encryptData(note.content, password),
+    title: removeSpecialChar(substrTitle(note.content)),
     updatedAt: nowUnix(),
   });
 
@@ -580,18 +816,21 @@ const handleUnlockNote = async (data: any) => {
     }
 
     const note = await getNoteDetail(data.noteId);
+    const decryptedContent = await decryptData(note.content, password);
     const updatedNote = await updateNote(data.noteId, {
       isLocked: 0,
-      content: await decryptData(note.content, password),
+      content: decryptedContent,
+      title: removeSpecialChar(substrTitle(decryptedContent)),
       updatedAt: nowUnix(),
     });
     setActionObject('note', updatedNote);
 
     listNotes.value = await loadNotes();
     formNotes.value = await getNoteDetail(activeNoteId.value);
+    activeNoteBaseline.value = { noteId: activeNoteId.value, content: formNotes.value.content };
 
     toggleModalUnlockNotes(false, isShowModalUnlockNotes);
-    showInfoSnackbar($i18n.t('app.message_note_unlocked'));
+    showSuccess($i18n.t('app.message_note_unlocked'));
   } catch (error) {
     modalUnlockNotesRef.value?.showFailedPassword();
     showErrorSnackbar($i18n.t('app.message_note_unlocked_failed'));
@@ -609,7 +848,7 @@ const handleClickRestoreNote = async (noteId: string) => {
 
   listNotes.value = await loadTrashNotes();
   formNotes.value = {};
-  showInfoSnackbar($i18n.t('app.message_note_restored'));
+  showSuccess($i18n.t('app.message_note_restored'));
 }
 
 
@@ -635,12 +874,19 @@ const handleConfirmPassword = async (password: string) => {
     formNotes.value.content = await decryptData(formNotes.value.content, currentPassword);
     formNotes.value.isLocked = false;
     formNotesRef.value?.resetPassword();
-    showInfoSnackbar($i18n.t('app.message_note_unlocked'));
+    showSuccess($i18n.t('app.message_note_unlocked'));
   } catch (error) {
     formNotesRef.value?.wrongPassword();
     showErrorSnackbar($i18n.t('app.message_note_unlocked_failed'));
   }
 };
+const saveNoteHistorySnapshot = async (noteId: string, content: string) => {
+  if (!noteId || content === undefined) return;
+  const history = await getNoteHistory(noteId);
+  const lastSnapshot = history[0];
+  if (lastSnapshot?.content === content) return;
+  await addNoteHistorySnapshot(noteId, content);
+};
 let debounceChangeContent: any = null;
 const handleChangeContent = async ({ content: newVal, id }: { content: string, id: string }) => {
   await mutex.acquire();
@@ -685,7 +931,7 @@ const handleCopyToClipboard = async () => {
 
   const note = await getNoteDetail(activeNoteId.value);
   navigator.clipboard.writeText(removeMarkdownEscape(note.content));
-  showInfoSnackbar($i18n.t('app.message_note_copied_clipboard'));
+  showSuccess($i18n.t('app.message_note_copied_clipboard'));
 };
 const noteInfo = ref<any>({
   lastSync: 0,
@@ -707,15 +953,133 @@ const handleClickFormNotesInfo = async (noteId: string) => {
   };
   toggleModalNotesDetail(true, isShowModalNotesDetail);
 }
+const isShowModalNoteHistory = ref<boolean>(false);
+const historyNoteId = ref<string>('');
+const historyList = ref<any[]>([]);
+const historyIsLocked = ref<boolean>(false);
+const loadNoteHistory = async (noteId: string) => {
+  const note = await getNoteDetail(noteId);
+  historyIsLocked.value = !!note?.isLocked;
+  historyList.value = await getNoteHistory(noteId);
+};
+const handleClickFormNotesHistory = async (noteId: string) => {
+  historyNoteId.value = noteId;
+  await loadNoteHistory(noteId);
+  toggleModalNoteHistory(true, isShowModalNoteHistory);
+};
+const isShowModalMenuMoveNote = ref<boolean>(false);
+const noteIdToMove = ref<string>('');
+const moveNoteFolders = computed(() => {
+  const note = listNotes.value.find((note: any) => note.id === noteIdToMove.value);
+  return listFoldersMenu.value.filter((folder: any) => folder.id !== '' && folder.id !== note?.folderId);
+});
+const isShowModalMenuNoteTags = ref<boolean>(false);
+const handleClickMoveNote = (noteId: string) => {
+  noteIdToMove.value = noteId;
+
+  if (isMobile.value) {
+    toggleModalMenuNote(false, isShowModalMenuNote);
+    toggleModalMenuMoveNote(true, isShowModalMenuMoveNote);
+    return;
+  }
+
+  const menuNoteEl = document.getElementById('menu-note');
+  const rect = menuNoteEl?.getBoundingClientRect();
+  if (rect) {
+    offsetMenuMoveNote({ left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom });
+  }
+};
+const handleSelectMoveFolder = async (folderId: string) => {
+  toggleModalMenuMoveNote(false, isShowModalMenuMoveNote);
+
+  const updatedNote = await updateNote(noteIdToMove.value, {
+    folderId,
+    updatedAt: nowUnix(),
+  });
+  setActionObject('note', updatedNote);
+
+  listNotes.value = await loadNotes();
+  showSuccess($i18n.t('app.message_note_moved'));
+};
+const handleNoteHistoryRestored = async (noteId: string) => {
+  listNotes.value = await loadNotes();
+  if (activeNoteId.value === noteId) {
+    formNotes.value = await getNoteDetail(noteId);
+    formNotesRef.value?.slientUpdateValue(formNotes.value.content);
+    activeNoteBaseline.value = { noteId, content: formNotes.value.content };
+  }
+};
+const isShowModalNoteHistoryDiff = ref<boolean>(false);
+const diffSnapshotId = ref<string>('');
+const handleClickViewHistoryDiff = (snapshotId: string) => {
+  diffSnapshotId.value = snapshotId;
+  toggleModalNoteHistoryDiff(true, isShowModalNoteHistoryDiff);
+};
+const restoreSnapshotId = ref<string>('');
+const isShowModalConfirmRestoreNoteHistory = ref<boolean>(false);
+const handleRequestRestoreNoteHistory = (snapshotId: string) => {
+  restoreSnapshotId.value = snapshotId;
+  toggleModalConfirmRestoreNoteHistory(true, isShowModalConfirmRestoreNoteHistory);
+};
+const handleConfirmRestoreNoteHistory = async (snapshotId: string) => {
+  toggleModalConfirmRestoreNoteHistory(false, isShowModalConfirmRestoreNoteHistory);
+  const noteId = historyNoteId.value;
+  const snapshot = historyList.value.find((item: any) => item.id === snapshotId);
+  if (!snapshot) {
+    return;
+  }
+
+  const current = await getNoteDetail(noteId);
+  await deleteNoteHistorySnapshot(noteId, snapshotId);
+  if (current?.content !== undefined) {
+    await saveNoteHistorySnapshot(noteId, current.content);
+  }
+  await updateNote(noteId, {
+    content: snapshot.content,
+    updatedAt: nowUnix(),
+  });
+
+  toggleModalNoteHistory(false, isShowModalNoteHistory);
+  await handleNoteHistoryRestored(noteId);
+  showSuccess($i18n.t('app.message_note_history_restored'));
+};
+const deleteSnapshotId = ref<string>('');
+const isShowModalConfirmDeleteNoteHistory = ref<boolean>(false);
+const handleRequestDeleteNoteHistory = (snapshotId: string) => {
+  deleteSnapshotId.value = snapshotId;
+  toggleModalConfirmDeleteNoteHistory(true, isShowModalConfirmDeleteNoteHistory);
+};
+const handleConfirmDeleteNoteHistory = async (snapshotId: string) => {
+  toggleModalConfirmDeleteNoteHistory(false, isShowModalConfirmDeleteNoteHistory);
+  const noteId = historyNoteId.value;
+  historyList.value = await deleteNoteHistorySnapshot(noteId, snapshotId);
+  showSuccess($i18n.t('app.message_note_history_deleted'));
+};
+const handleClickCloseModalNoteHistory = () => {
+  toggleModalNoteHistory(false, isShowModalNoteHistory);
+};
+const handleClickCloseModalNoteHistoryDiff = () => {
+  toggleModalNoteHistoryDiff(false, isShowModalNoteHistoryDiff);
+};
+const handleClickCloseModalConfirmRestoreNoteHistory = () => {
+  toggleModalConfirmRestoreNoteHistory(false, isShowModalConfirmRestoreNoteHistory);
+};
+const handleClickCloseModalConfirmDeleteNoteHistory = () => {
+  toggleModalConfirmDeleteNoteHistory(false, isShowModalConfirmDeleteNoteHistory);
+};
 const handleClickResizeApp = () => {
   colsFoldersWidth.value = 234;
   colsNotesWidth.value = 400;
   setColsWidthData();
   window.resizeTo(1167, 700);
 }
-const handleClickBack = () => {
+const handleClickBack = async () => {
+  if (activeNoteId.value) {
+    await snapshotNoteBeforeLeaving(activeNoteId.value);
+  }
+
   if (window.history.length > 1) {
-    window.history.back();
+    closeMobileBackState();
   } else {
     window.location.href = '/';
   }
@@ -750,6 +1114,10 @@ watch(() => isCollapsePanel.value, (newValue) => {
 });
 const isCollapseFolder = ref<boolean>(false);
 const handleClickCollapseFolder = () => {
+  if (activeFolderId.value === 'bottombar-trash') {
+    return;
+  }
+
   isCollapseFolder.value = !isCollapseFolder.value;
 }
 const isShowFormatToolbar = ref<boolean>(false);
@@ -836,7 +1204,7 @@ const handleConfirmInsertImage = (data: any) => {
   formNotesRef.value?.handleInsertImage(data);
 }
 const handleAlertMessage = (message: string) => {
-  showErrorSnackbar(message);
+  showInfo(message);
 }
 
 // search notes feature
@@ -894,39 +1262,91 @@ const handleSetPassword = async (data: any) => {
   modalSettingRef.value?.closeSetPasswordModal();
   modalSetPasswordRef.value?.reset();
 }
+const isChangingPassword = ref<boolean>(false);
+const handleBeforeUnloadWarning = (e: BeforeUnloadEvent) => {
+  e.preventDefault();
+  e.returnValue = '';
+};
 const handleChangePassword = async (data: any) => {
+  if (isChangingPassword.value) {
+    return;
+  }
+  isChangingPassword.value = true;
+
   try {
     const password = await getPassword();
     const newHashPassword = await hashPassword(data.oldPassword);
     if (password !== newHashPassword) {
-      throw new Error($i18n.t('app.message_note_unlocked_failed'));
+      throw new Error('WRONG_OLD_PASSWORD');
     }
 
-    // find all notes locked and unlock
+    // Phase 1 - verify: decrypt every locked note with the old password first, no writes yet
     const allNotes = await getAllNotes();
     const notesLocked = allNotes.filter((note: any) => note.isLocked && !note.deleteCompletelyAt);
-    const hashNewPassword = await hashPassword(data.newPassword);
+    const decryptedNotes: { id: string; plainContent: string; oldContent: string }[] = [];
     for (const note of notesLocked) {
       const noteDetail = await getNoteDetail(note.id);
-      const decryptNoteDetailContent = await decryptData(noteDetail.content, password);
+      let plainContent: string;
+      try {
+        plainContent = await decryptData(noteDetail.content, password);
+      } catch (decryptError) {
+        throw new Error('DECRYPT_FAILED');
+      }
+      decryptedNotes.push({ id: note.id, plainContent, oldContent: noteDetail.content });
+    }
 
-      const updatedNote = await updateNote(note.id, {
-        isLocked: 1,
-        content: await encryptData(decryptNoteDetailContent, hashNewPassword),
-        updatedAt: nowUnix(),
-      });
-      setActionObject('note', updatedNote);
+    // Phase 2 - prepare: re-encrypt everything with the new password, still only in memory
+    const hashNewPassword = await hashPassword(data.newPassword);
+    const preparedNotes = await Promise.all(decryptedNotes.map(async (item) => ({
+      id: item.id,
+      newContent: await encryptData(item.plainContent, hashNewPassword),
+      oldContent: item.oldContent,
+    })));
+
+    // Phase 3 - commit: persist a recovery backup, then write, rolling back on failure
+    await savePasswordChangeBackup({
+      notes: preparedNotes.map((item) => ({ id: item.id, content: item.oldContent })),
+      createdAt: nowUnix(),
+    });
+    window.addEventListener('beforeunload', handleBeforeUnloadWarning);
+
+    const writtenNotes: typeof preparedNotes = [];
+    try {
+      for (const item of preparedNotes) {
+        const updatedNote = await updateNote(item.id, {
+          isLocked: 1,
+          content: item.newContent,
+          updatedAt: nowUnix(),
+        });
+        writtenNotes.push(item);
+        setActionObject('note', updatedNote);
+      }
+    } catch (writeError) {
+      for (const item of writtenNotes) {
+        await updateNote(item.id, { content: item.oldContent, updatedAt: nowUnix() }).catch(() => { });
+      }
+      throw new Error('WRITE_FAILED');
     }
 
-    await setPassword(await hashPassword(data.newPassword));
+    await setPassword(hashNewPassword);
     setActionObject('settings', { 'id': 'settings' });
+    await clearPasswordChangeBackup();
 
     toggleModalSetPassword(false, isShowModalSetPassword);
-    showInfoSnackbar($i18n.t('app.message_change_password_success'), document.getElementById('modal-settings')!);
+    showSuccess($i18n.t('app.message_change_password_success'));
     modalSetPasswordRef.value?.reset();
-  } catch (error) {
-    modalSetPasswordRef.value?.showOldPasswordWrong();
+  } catch (error: any) {
+    if (error?.message === 'DECRYPT_FAILED') {
+      showErrorSnackbar($i18n.t('app.message_change_password_note_corrupted'));
+    } else if (error?.message === 'WRITE_FAILED') {
+      showErrorSnackbar($i18n.t('app.message_change_password_failed'));
+    } else {
+      modalSetPasswordRef.value?.showOldPasswordWrong();
+    }
     return;
+  } finally {
+    window.removeEventListener('beforeunload', handleBeforeUnloadWarning);
+    isChangingPassword.value = false;
   }
 }
 const handleConfirmSetPassword = async (data: any) => {
@@ -974,10 +1394,10 @@ const handleConfirmChangeAdapter = async (e2eeKey: string) => {
   }
 
   toggleModalConfirmChangeAdapter(false, isShowModalConfirmChangeAdapter);
-  showInfoSnackbar($i18n.t('app.message_setting_sync_adapter_saved'));
+  showSuccess($i18n.t('app.message_setting_sync_adapter_saved'));
 
-  // trigger 1 time sync to push data to new adapter
-  handleClickUpdateData();
+  // trigger 1 time full sync to pull/push all data with the new adapter
+  handleClickUpdateData(SYNC_LEVELS.length - 1);
 }
 const isShowModalConfirmE2eeKey = ref<boolean>(false);
 const handleClickCloseModalConfirmE2eeKey = () => {
@@ -1107,7 +1527,7 @@ const handleTriggerImportNotes = async () => {
   await reloadFolder();
 
   toggleModalImportNotes(false, isShowModalImportNotes);
-  showInfoSnackbar($i18n.t('app.message_import_notes'));
+  showSuccess($i18n.t('app.message_import_notes'));
   navbarTopRef.value?.closeDrawer();
 }
 const modalExportNotesConfirm = ref<any>(null);
@@ -1304,6 +1724,7 @@ const pullPush = async () => {
   if (pull.needReloadActiveNote) {
     formNotes.value = await getNoteDetail(activeNoteId.value);
     formNotesRef.value?.slientUpdateValue(formNotes.value.content);
+    activeNoteBaseline.value = { noteId: activeNoteId.value, content: formNotes.value.content };
   }
 
   await pushData(
@@ -1387,10 +1808,12 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
     <!-- mobile nav top -->
     <div class="lg:hidden">
       <NavbarTop ref="navbarTopRef" :isInEditor="isInEditor" :listFolders="listFoldersMenu"
-        :activeFolderId="activeFolderId" :formNotes="formNotes" :isSyncing="isSyncAll" :settings="settings"
-        :isPasswordExist="isPasswordExist" :editorName="editorName" @clickFolderName="handleClickFolderName"
-        @rightClickFolderName="handleRightClickFolderName" @renameFolderName="handleRenameFolderName"
-        @reorderFolderName="handleReorderFolderName" @clickSetting="handleClickSetting" @clickBack="handleClickBack"
+        :activeFolderId="activeFolderId" :listTags="listTagsMenu" :activeTagId="activeTagId" :formNotes="formNotes"
+        :isSyncing="isSyncAll" :settings="settings" :isPasswordExist="isPasswordExist" :editorName="editorName"
+        @clickFolderName="handleClickFolderName" @rightClickFolderName="handleRightClickFolderName"
+        @renameFolderName="handleRenameFolderName" @reorderFolderName="handleReorderFolderName"
+        @clickTagName="handleClickTagName" @rightClickTagName="handleRightClickTagName" @clickTags="handleClickTags"
+        @clickAddTag="handleClickAddTag" @clickSetting="handleClickSetting" @clickBack="handleClickBack"
         @clickUpdateData="handleClickUpdateData" @clickTrash="handleClickBottombarTrash"
         @copyToClipboard="handleCopyToClipboard" @clickInfo="handleClickFormNotesInfo"
         @saveSettings="handleSaveSettings" @saveAdapter="handleSaveAdapter" @clickExportNotes="handleClickExportNotes"
@@ -1404,30 +1827,44 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
     <!-- cols personal -->
     <div class="hidden lg:block lg:float-left cols-personal w-20 bg-base-300">
       <ColsPersonal :activeFolderId="activeFolderId" :isCollapseFolder="isCollapseFolder" :isSyncing="isSyncingAll"
-        @clickNotes="handleClickFolderName('')" @clickTrash="handleClickBottombarTrash"
+        @clickNotes="handleClickFolderName('')" @clickTags="handleClickTags" @clickTrash="handleClickBottombarTrash"
         @clickSetting="handleClickSetting" @clickUpdateData="handleClickUpdateData"
         @clickCollapseFolder="handleClickCollapseFolder" />
     </div>
 
     <!-- cols folders -->
     <div class="hidden lg:block lg:float-left cols-folders transition-all duration-300 bg-base-300/80"
-      :class="{ '!w-0': activeFolderId === 'bottombar-trash' || isCollapsePanel, '!w-[4.5rem]': isCollapseFolder }"
+      :class="{ '!w-0': activeFolderId === 'bottombar-trash' || isCollapsePanel, '!w-[4.5rem]': isCollapseFolder && activeFolderId !== 'bottombar-trash' }"
       :style="{ width: colsFoldersWidth + 'px' }">
-      <div>
-        <ToolbarFolder :isSyncing="isSyncAll" :isCollapseFolder="isCollapseFolder"
-          :isShowToolbarFolder="isShowToolbarNotes" @clickAddFolder="handleClickAddFolder"
-          @clickSetting="handleClickSetting" @clickUpdateData="handleClickUpdateData" />
-      </div>
-      <!-- <hr class="hidden lg:block border-base-300"> -->
-
-      <div id="folders-instance" class="relative overflow-auto" style="height: calc(100vh - 77px)">
-        <ListFolder ref="listFolderRef" :listFolders="listFoldersMenu" :activeFolderId="activeFolderId"
-          :actionObjectKeys="actionObjectKeys" :isCollapseFolder="isCollapseFolder"
-          @clickFolderName="handleClickFolderName" @rightClickFolderName="handleRightClickFolderName"
-          @renameFolderName="handleRenameFolderName" @reorderFolderName="handleReorderFolderName" />
-      </div>
-      <!-- <hr class="border-base-300"> -->
-      <!-- <BottombarFolder :activeFolderId="activeFolderId" @clickTrash="handleClickBottombarTrash" /> -->
+      <template v-if="!isTagsMode">
+        <div>
+          <ToolbarFolder :isSyncing="isSyncAll" :isCollapseFolder="isCollapseFolder"
+            :isShowToolbarFolder="isShowToolbarNotes" @clickAddFolder="handleClickAddFolder"
+            @clickSetting="handleClickSetting" @clickUpdateData="handleClickUpdateData" />
+        </div>
+        <!-- <hr class="hidden lg:block border-base-300"> -->
+
+        <div id="folders-instance" class="relative overflow-auto" style="height: calc(100vh - 77px)">
+          <ListFolder ref="listFolderRef" :listFolders="listFoldersMenu" :activeFolderId="activeFolderId"
+            :actionObjectKeys="actionObjectKeys" :isCollapseFolder="isCollapseFolder"
+            @clickFolderName="handleClickFolderName" @rightClickFolderName="handleRightClickFolderName"
+            @renameFolderName="handleRenameFolderName" @reorderFolderName="handleReorderFolderName" />
+        </div>
+        <!-- <hr class="border-base-300"> -->
+        <!-- <BottombarFolder :activeFolderId="activeFolderId" @clickTrash="handleClickBottombarTrash" /> -->
+      </template>
+      <template v-else>
+        <div>
+          <ToolbarTag :isSyncing="isSyncAll" :isCollapseFolder="isCollapseFolder"
+            :isShowToolbarFolder="isShowToolbarNotes" @clickAddTag="handleClickAddTag" />
+        </div>
+
+        <div id="tags-instance" class="relative overflow-auto" style="height: calc(100vh - 77px)">
+          <ListTag :listTags="listTagsMenu" :activeTagId="activeTagId" :actionObjectKeys="actionObjectKeys"
+            :isCollapseFolder="isCollapseFolder" @clickTagName="handleClickTagName"
+            @rightClickTagName="handleRightClickTagName" @clickAddTag="handleClickAddTag" />
+        </div>
+      </template>
     </div>
 
 
@@ -1435,8 +1872,9 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
     <div class="cols-notes transition-all duration-300" :style="{ width: colsNotesWidth + 'px' }"
       :class="{ 'hidden': isMobile && isInEditor, '!w-full pt-[64px] absolute': isMobile, 'lg:w-3/12 lg:float-left bg-base-200 h-full': !isMobile, '!w-0': isCollapsePanel }">
       <div class="hidden lg:block">
-        <ToolbarNotes v-if="isShowToolbarNotes" ref="toolbarNotesRef" @clickAddNote="handleClickAddNote"
-          @clickSearch="handleClickSearch" @clickCancelSearch="handleClickCancelSearch" />
+        <ToolbarNotes v-if="isShowToolbarNotes" ref="toolbarNotesRef" :hideAddButton="isTagsMode"
+          @clickAddNote="handleClickAddNote" @clickSearch="handleClickSearch"
+          @clickCancelSearch="handleClickCancelSearch" />
       </div>
       <!-- <hr class="hidden lg:block border-base-300"> -->
 
@@ -1487,11 +1925,33 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
   <div id="menu-note" class="hidden absolute">
     <MenuNote :key="menuNoteKey" :noteId="activeNoteId" :formNotes="formNotes" @deleteNote="handleClickDeleteNote"
       @pinNote="handleClickPinNote" @lockNote="handleClickLockNote" @copyNote="handleCopyToClipboard"
-      @restoreNote="handleClickRestoreNote" @deleteNoteForever="handleClickDeleteNoteForever" />
+      @restoreNote="handleClickRestoreNote" @deleteNoteForever="handleClickDeleteNoteForever"
+      @clickInfo="handleClickFormNotesInfo" @clickHistory="handleClickFormNotesHistory"
+      @clickMove="handleClickMoveNote" @clickAddToTag="handleClickAddNoteToTag" />
+  </div>
+  <div id="menu-move-note" class="hidden absolute">
+    <MenuMoveNote :listFolders="moveNoteFolders" @selectFolder="handleSelectMoveFolder" />
+  </div>
+  <div id="menu-tag" class="hidden absolute">
+    <MenuTag :key="menuTagKey" :tagId="activeTagId" @editTag="handleClickEditTag" @deleteTag="handleClickDeleteTag" />
+  </div>
+  <div id="menu-note-tags" class="hidden absolute">
+    <MenuNoteTags :listTags="listTagsMenu" :noteTagIds="activeNoteTagIds" @toggleTag="handleToggleNoteTag" />
   </div>
 
   <!-- modal -->
+  <ModalConfirmSampleData v-if="isShowModalConfirmSampleData" @confirm="handleConfirmSampleData"
+    @close="handleCancelSampleData" />
   <ModalNotesDetail v-if="isShowModalNotesDetail" :noteInfo="noteInfo" @close="handleClickCloseNotesDetail" />
+  <ModalNoteHistory v-if="isShowModalNoteHistory" :history="historyList" :isLocked="historyIsLocked"
+    @close="handleClickCloseModalNoteHistory" @viewDiff="handleClickViewHistoryDiff"
+    @restoreRequested="handleRequestRestoreNoteHistory" @deleteRequested="handleRequestDeleteNoteHistory" />
+  <ModalNoteHistoryDiff v-if="isShowModalNoteHistoryDiff" :noteId="historyNoteId" :snapshotId="diffSnapshotId"
+    @close="handleClickCloseModalNoteHistoryDiff" />
+  <ModalConfirmRestoreNoteHistory v-if="isShowModalConfirmRestoreNoteHistory" :snapshotId="restoreSnapshotId"
+    @confirm="handleConfirmRestoreNoteHistory" @close="handleClickCloseModalConfirmRestoreNoteHistory" />
+  <ModalConfirmDeleteNoteHistory v-if="isShowModalConfirmDeleteNoteHistory" :snapshotId="deleteSnapshotId"
+    @confirm="handleConfirmDeleteNoteHistory" @close="handleClickCloseModalConfirmDeleteNoteHistory" />
   <ModalSetting v-if="isShowModalSettings" ref="modalSettingRef" :settings="settings" :isPasswordExist="isPasswordExist"
     @setPassword="handleSetPassword" @changePassword="handleChangePassword" @changeAdapter="handleChangeAdapter"
     @changeDefaultEditor="handleChangeDefaultEditor" @clickExportNotes="handleClickExportNotes"
@@ -1500,7 +1960,7 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
     @clickImportNotes="handleClickImportNotes" @closeSetting="handleClickCloseSettings" />
   <ModalAlertSetPassword v-if="isShowModalAlertSetPassword" @close="handleClickCloseModalAlertSetPassword" />
   <ModalSetPassword v-if="isShowModalSetPassword" ref="modalSetPasswordRef" :type="isPasswordExist ? 'change' : 'set'"
-    @confirm="handleConfirmSetPassword" @close="handleCloseSetPassword" />
+    :isLoading="isChangingPassword" @confirm="handleConfirmSetPassword" @close="handleCloseSetPassword" />
   <ModalConfirmChangeAdapter v-if="isShowModalConfirmChangeAdapter" :adapterName="''"
     :isShowModalConfirmChangeAdapter="isShowModalConfirmChangeAdapter" @confirm="handleConfirmChangeAdapterOnline"
     @close="handleClickCloseModalConfirmChangeAdapter" />
@@ -1522,15 +1982,27 @@ watch(() => settings.value.general.fontFamily, (newVal) => {
   <ModalMenuNote v-if="isShowModalMenuNote" :noteId="activeNoteId" :formNotes="formNotes"
     @deleteNote="handleClickDeleteNote" @pinNote="handleClickPinNote" @lockNote="handleClickLockNote"
     @copyNote="handleCopyToClipboard" @restoreNote="handleClickRestoreNote"
-    @deleteNoteForever="handleClickDeleteNoteForever" />
-  <ModalMenuSidebar v-if="isShowModalMenuSidebar" @clickAddFolder="handleClickAddFolder"
-    @clickForceSync="handleClickUpdateData" />
+    @deleteNoteForever="handleClickDeleteNoteForever" @clickInfo="handleClickFormNotesInfo"
+    @clickHistory="handleClickFormNotesHistory" @clickMove="handleClickMoveNote"
+    @clickAddToTag="handleClickAddNoteToTag" />
+  <ModalMenuMoveNote v-if="isShowModalMenuMoveNote" :listFolders="moveNoteFolders"
+    @selectFolder="handleSelectMoveFolder" />
+  <ModalMenuTag v-if="isShowModalMenuTag" :tagId="activeTagId" @editTag="handleClickEditTag"
+    @deleteTag="handleClickDeleteTag" />
+  <ModalMenuNoteTags v-if="isShowModalMenuNoteTags" :listTags="listTagsMenu" :noteTagIds="activeNoteTagIds"
+    @toggleTag="handleToggleNoteTag" />
+  <ModalTagForm v-if="isShowModalTagForm" :tagId="tagIdToEdit" :tagName="tagFormInitial.name"
+    :tagColor="tagFormInitial.color" @confirm="handleConfirmTagForm" @close="handleClickCloseModalTagForm" />
+  <ModalConfirmDeleteTag v-if="isShowModalConfirmDeleteTag" :tagId="tagWillDelete" @confirm="handleConfirmDeleteTag"
+    @close="handleClickCloseModalConfirmDeleteTag" />
+  <ModalMenuSidebar v-if="isShowModalMenuSidebar" :isTagsMode="isTagsMode" @clickAddFolder="handleClickAddFolder"
+    @clickAddTag="handleClickAddTag" @clickForceSync="handleClickUpdateData" />
   <ModalInsertLink v-if="isShowModalInsertLink" ref="modalInsertLinkRef" @confirm="handleConfirmInsertLink"
     @close="handleClickCloseModalInsertLink" />
   <ModalInsertImage v-if="isShowModalInsertImage" ref="modalInsertImageRef" @confirm="handleConfirmInsertImage"
     @close="handleClickCloseModalInsertImage" />
 
   <!-- float button create new note -->
-  <FloatNewNotes v-if="!formNotes.id && initedApp && activeFolderId !== 'bottombar-trash'"
+  <FloatNewNotes v-if="!isInEditor && initedApp && !isTagsMode && activeFolderId !== 'bottombar-trash'"
     @clickNewNote="handleClickAddNote" />
 </template>
diff --git a/repositories/index.ts b/repositories/index.ts
index 25bf24d..4af914d 100644
--- a/repositories/index.ts
+++ b/repositories/index.ts
@@ -9,6 +9,11 @@ import type {
   NoteSortType,
   NoteType,
   NoteUpdateType,
+  TagCreateType,
+  TagType,
+  TagUpdateType,
+  NoteTagCreateType,
+  NoteTagType,
 } from "./storage.type";
 
 class LocalForageRepository implements NotasRepository {
@@ -111,6 +116,41 @@ class LocalForageRepository implements NotasRepository {
     // await localForage.removeItem(`notes-${noteId}`);
     return true;
   }
+  async getNoteHistory(noteId: string): Promise<any[]> {
+    return JSON.parse(await localForage.getItem(`notes-history-${noteId}`) || '[]');
+  }
+  private historyDayKey(unixSeconds: number): string {
+    const d = new Date(unixSeconds * 1000);
+    return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  }
+  async addNoteHistorySnapshot(noteId: string, snapshot: any, maxDays: number = 3, maxPerDay: number = 5): Promise<any[]> {
+    let history = await this.getNoteHistory(noteId);
+    history.unshift(snapshot);
+
+    const dayKey = this.historyDayKey.bind(this);
+    const newDayKey = dayKey(snapshot.snapshotAt);
+
+    const sameDay = history.filter((item: any) => dayKey(item.snapshotAt) === newDayKey);
+    if (sameDay.length > maxPerDay) {
+      const dropIds = new Set(sameDay.slice(-(sameDay.length - maxPerDay)).map((item: any) => item.id));
+      history = history.filter((item: any) => !dropIds.has(item.id));
+    }
+
+    const days = Array.from(new Set(history.map((item: any) => dayKey(item.snapshotAt))));
+    if (days.length > maxDays) {
+      const keepDays = new Set(days.slice(0, maxDays));
+      history = history.filter((item: any) => keepDays.has(dayKey(item.snapshotAt)));
+    }
+
+    await localForage.setItem(`notes-history-${noteId}`, JSON.stringify(history));
+    return history;
+  }
+  async deleteNoteHistorySnapshot(noteId: string, snapshotId: string): Promise<any[]> {
+    const history = await this.getNoteHistory(noteId);
+    const filtered = history.filter((item: any) => item.id !== snapshotId);
+    await localForage.setItem(`notes-history-${noteId}`, JSON.stringify(filtered));
+    return filtered;
+  }
   async getActiveNote(): Promise<string | null> {
     return await localForage.getItem('activeNote') || null;
   }
@@ -126,6 +166,63 @@ class LocalForageRepository implements NotasRepository {
     return sort;
   }
 
+  // tags
+  async getAllTags(): Promise<TagType[]> {
+    const tags = JSON.parse(await localForage.getItem('tags') || '[]');
+    return tags as TagType[];
+  }
+  async getTags(): Promise<TagType[]> {
+    const tags = await this.getAllTags();
+    return tags.filter((tag: any) => !tag.deletedAt) as TagType[];
+  }
+  async getTagDetail(tagId: string): Promise<TagType> {
+    return JSON.parse(await localForage.getItem(`tags-${tagId}`) || '{}') as TagType;
+  }
+  async createTag(data: TagCreateType): Promise<TagType> {
+    const tags = await this.getAllTags();
+    const newTags = [data, ...tags];
+    await localForage.setItem('tags', JSON.stringify(newTags));
+    await localForage.setItem(`tags-${data.id}`, JSON.stringify(data));
+    return data as TagType;
+  }
+  async updateTag(tagId: string, data: TagUpdateType): Promise<TagType> {
+    const tags = await this.getAllTags();
+    const tagIndex = tags.findIndex((tag: any) => tag.id === tagId);
+    tags[tagIndex] = { ...tags[tagIndex], ...data };
+    await localForage.setItem('tags', JSON.stringify(tags));
+    await localForage.setItem(`tags-${tagId}`, JSON.stringify(tags[tagIndex]));
+    return tags[tagIndex] as TagType;
+  }
+
+  // note tags (map note <-> tag)
+  async getAllNoteTags(): Promise<NoteTagType[]> {
+    const noteTags = JSON.parse(await localForage.getItem('noteTags') || '[]');
+    return noteTags as NoteTagType[];
+  }
+  async getNoteTagsByNote(noteId: string): Promise<NoteTagType[]> {
+    const noteTags = await this.getAllNoteTags();
+    return noteTags.filter((noteTag: any) => noteTag.noteId === noteId && !noteTag.deletedAt) as NoteTagType[];
+  }
+  async getNoteTagsByTag(tagId: string): Promise<NoteTagType[]> {
+    const noteTags = await this.getAllNoteTags();
+    return noteTags.filter((noteTag: any) => noteTag.tagId === tagId && !noteTag.deletedAt) as NoteTagType[];
+  }
+  async createNoteTag(data: NoteTagCreateType): Promise<NoteTagType> {
+    const noteTags = await this.getAllNoteTags();
+    const newNoteTags = [data, ...noteTags];
+    await localForage.setItem('noteTags', JSON.stringify(newNoteTags));
+    await localForage.setItem(`noteTags-${data.id}`, JSON.stringify(data));
+    return data as NoteTagType;
+  }
+  async updateNoteTag(noteTagId: string, data: Partial<NoteTagType>): Promise<NoteTagType> {
+    const noteTags = await this.getAllNoteTags();
+    const noteTagIndex = noteTags.findIndex((noteTag: any) => noteTag.id === noteTagId);
+    noteTags[noteTagIndex] = { ...noteTags[noteTagIndex], ...data };
+    await localForage.setItem('noteTags', JSON.stringify(noteTags));
+    await localForage.setItem(`noteTags-${noteTagId}`, JSON.stringify(noteTags[noteTagIndex]));
+    return noteTags[noteTagIndex] as NoteTagType;
+  }
+
   // password | settings
   async getSettings(): Promise<any> {
     return JSON.parse(await localForage.getItem('settings') || '{}');
@@ -145,6 +242,17 @@ class LocalForageRepository implements NotasRepository {
     await localForage.setItem('password', password);
     return password;
   }
+  async getPasswordChangeBackup(): Promise<any> {
+    return JSON.parse(await localForage.getItem('passwordChangeBackup') || 'null');
+  }
+  async savePasswordChangeBackup(data: any): Promise<any> {
+    await localForage.setItem('passwordChangeBackup', JSON.stringify(data));
+    return data;
+  }
+  async clearPasswordChangeBackup(): Promise<boolean> {
+    await localForage.removeItem('passwordChangeBackup');
+    return true;
+  }
 
   // sync
   async getLastPull(): Promise<number> {
diff --git a/repositories/storage.ts b/repositories/storage.ts
index 412b3b5..8292f52 100644
--- a/repositories/storage.ts
+++ b/repositories/storage.ts
@@ -6,6 +6,11 @@ import type {
   NoteSortType,
   NoteType,
   NoteUpdateType,
+  TagCreateType,
+  TagType,
+  TagUpdateType,
+  NoteTagCreateType,
+  NoteTagType,
 } from "./storage.type";
 
 class NotasStorage {
@@ -65,6 +70,51 @@ class NotasStorage {
     throw new Error('Not implemented');
   }
 
+  // history
+  async getNoteHistory(noteId: string): Promise<any[]> {
+    throw new Error('Not implemented');
+  }
+  async addNoteHistorySnapshot(noteId: string, snapshot: any, maxDays: number = 3, maxPerDay: number = 5): Promise<any[]> {
+    throw new Error('Not implemented');
+  }
+  async deleteNoteHistorySnapshot(noteId: string, snapshotId: string): Promise<any[]> {
+    throw new Error('Not implemented');
+  }
+
+  // tags
+  async getAllTags(): Promise<TagType[]> {
+    throw new Error('Not implemented');
+  }
+  async getTags(): Promise<TagType[]> {
+    throw new Error('Not implemented');
+  }
+  async getTagDetail(tagId: string): Promise<TagType> {
+    throw new Error('Not implemented');
+  }
+  async createTag(data: TagCreateType): Promise<TagType> {
+    throw new Error('Not implemented');
+  }
+  async updateTag(tagId: string, data: TagUpdateType): Promise<TagType> {
+    throw new Error('Not implemented');
+  }
+
+  // note tags (map note <-> tag)
+  async getAllNoteTags(): Promise<NoteTagType[]> {
+    throw new Error('Not implemented');
+  }
+  async getNoteTagsByNote(noteId: string): Promise<NoteTagType[]> {
+    throw new Error('Not implemented');
+  }
+  async getNoteTagsByTag(tagId: string): Promise<NoteTagType[]> {
+    throw new Error('Not implemented');
+  }
+  async createNoteTag(data: NoteTagCreateType): Promise<NoteTagType> {
+    throw new Error('Not implemented');
+  }
+  async updateNoteTag(noteTagId: string, data: Partial<NoteTagType>): Promise<NoteTagType> {
+    throw new Error('Not implemented');
+  }
+
   // password | settings
   async getSettings(): Promise<any> {
     throw new Error('Not implemented');
@@ -75,6 +125,15 @@ class NotasStorage {
   async setPassword(password: string): Promise<string> {
     throw new Error('Not implemented');
   }
+  async getPasswordChangeBackup(): Promise<any> {
+    throw new Error('Not implemented');
+  }
+  async savePasswordChangeBackup(data: any): Promise<any> {
+    throw new Error('Not implemented');
+  }
+  async clearPasswordChangeBackup(): Promise<boolean> {
+    throw new Error('Not implemented');
+  }
 
   // sync
   async getLastPull(): Promise<number> {
diff --git a/repositories/storage.type.ts b/repositories/storage.type.ts
index f91ec44..5894763 100644
--- a/repositories/storage.type.ts
+++ b/repositories/storage.type.ts
@@ -29,6 +29,7 @@ type NoteType = {
   id: string;
   folderId: string;
   content: string;
+  title?: string;
   isPinned: boolean;
   isLocked: boolean;
   lastSync: number;
@@ -41,6 +42,7 @@ type NoteCreateType = {
   id: string;
   folderId: string;
   content: string;
+  title?: string;
   isPinned: boolean;
   isLocked: boolean;
   lastSync: number;
@@ -53,6 +55,7 @@ type NoteCreateType = {
 type NoteUpdateType = {
   folderId: string;
   content: string;
+  title?: string;
   isPinned: boolean;
   isLocked: boolean;
   lastSync: number;
@@ -64,6 +67,39 @@ type NoteUpdateType = {
 
 type NoteSortType = 'createdAt' | 'updatedAt';
 
+type TagType = {
+  id: string;
+  name: string;
+  color?: string;
+  lastSync: number;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number | null;
+}
+
+type TagCreateType = TagType;
+
+type TagUpdateType = {
+  name: string;
+  color?: string;
+  lastSync: number;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number | null;
+}
+
+type NoteTagType = {
+  id: string;
+  noteId: string;
+  tagId: string;
+  lastSync: number;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number | null;
+}
+
+type NoteTagCreateType = NoteTagType;
+
 export type {
   FolderType,
   FolderCreateType,
@@ -73,4 +109,11 @@ export type {
   NoteCreateType,
   NoteUpdateType,
   NoteSortType,
+
+  TagType,
+  TagCreateType,
+  TagUpdateType,
+
+  NoteTagType,
+  NoteTagCreateType,
 }
diff --git a/services/image.ts b/services/image.ts
index 0b3240f..6e22f79 100644
--- a/services/image.ts
+++ b/services/image.ts
@@ -248,6 +248,16 @@ function cleanupBlobUrlCache(): void {
   blobUrlCache.clear();
 }
 
+async function resetSyncedImages(): Promise<number> {
+  const metas = await imageRepository.getAllImagesMeta();
+  const synced = metas.filter((m) => m.syncStatus === 'synced');
+  for (const meta of synced) {
+    await imageRepository.updateSyncStatus(meta.id, 'pending');
+  }
+  cleanupBlobUrlCache();
+  return synced.length;
+}
+
 async function getSyncStats(): Promise<{
   total: number;
   pending: number;
@@ -285,4 +295,5 @@ export {
   resolveContentImageUrls,
   cleanupBlobUrlCache,
   getSyncStats,
+  resetSyncedImages,
 };
diff --git a/services/main.ts b/services/main.ts
index 8f134fa..8d28411 100644
--- a/services/main.ts
+++ b/services/main.ts
@@ -60,7 +60,7 @@ async function getAllNotes() {
 async function getNotes(folderId: string, sortType: 'createdAt' | 'updatedAt', lockedTitle: string, lockedContent: string) {
   const notes = await storage.getNotes(folderId);
   const reformatNotes = notes.map((note: any) => {
-    const title = !note.isLocked ? removeSpecialChar(substrTitle(note.content)) : lockedTitle;
+    const title = !note.isLocked ? removeSpecialChar(substrTitle(note.content)) : (note.title || lockedTitle);
     const content = !note.isLocked ? removeSpecialChar(substrContent(note.content)) : lockedContent;
     return {
       ...note,
@@ -119,6 +119,16 @@ async function setSortNote(sort: 'createdAt' | 'updatedAt') {
   return storage.setSortNote(sort);
 }
 
+async function getNoteHistory(noteId: string) {
+  return storage.getNoteHistory(noteId);
+}
+async function addNoteHistorySnapshot(noteId: string, content: string) {
+  return storage.addNoteHistorySnapshot(noteId, { id: randomUUID(), content, snapshotAt: nowUnix() });
+}
+async function deleteNoteHistorySnapshot(noteId: string, snapshotId: string) {
+  return storage.deleteNoteHistorySnapshot(noteId, snapshotId);
+}
+
 async function getNoteDetail(noteId: string) {
   return storage.getNoteDetail(noteId);
 }
@@ -126,7 +136,7 @@ async function getNoteDetail(noteId: string) {
 async function getDeletedNotes(lockedTitle: string, lockedContent: string) {
   const notes = await storage.getDeletedNotes();
   const reformatNotes = notes.map((note: any) => {
-    const title = !note.isLocked ? removeSpecialChar(note.content.split('\n')[0]) : lockedTitle;
+    const title = !note.isLocked ? removeSpecialChar(note.content.split('\n')[0]) : (note.title || lockedTitle);
     const content = !note.isLocked ? removeSpecialChar(note.content.split('\n').slice(1).join('\n').substr(0, 60)) : lockedContent;
     return {
       ...note,
@@ -142,6 +152,103 @@ async function getDeletedNotes(lockedTitle: string, lockedContent: string) {
   return sortNotes;
 }
 
+async function getAllTags() {
+  return storage.getAllTags();
+}
+async function getTags() {
+  return storage.getTags();
+}
+async function getTagDetail(tagId: string) {
+  return storage.getTagDetail(tagId);
+}
+async function createTag(tagData?: any) {
+  const tagPayload = tagData || {
+    id: randomUUID(),
+    name: "New Tag",
+    lastSync: 0,
+    createdAt: nowUnix(),
+    updatedAt: nowUnix(),
+    deletedAt: null,
+  };
+  return storage.createTag(tagPayload);
+}
+async function updateTag(tagId: string, data: any) {
+  return storage.updateTag(tagId, { ...data });
+}
+async function deleteTag(tagId: string) {
+  const tag = await storage.getTagDetail(tagId);
+  await storage.updateTag(tagId, { ...tag, deletedAt: nowUnix(), updatedAt: nowUnix() });
+
+  const noteTags = await storage.getNoteTagsByTag(tagId);
+  for (const noteTag of noteTags) {
+    await storage.updateNoteTag(noteTag.id, { deletedAt: nowUnix(), updatedAt: nowUnix() });
+  }
+  return true;
+}
+
+async function getTagsForNote(noteId: string) {
+  const noteTags = await storage.getNoteTagsByNote(noteId);
+  const tags = await Promise.all(noteTags.map((noteTag: any) => storage.getTagDetail(noteTag.tagId)));
+  return tags;
+}
+async function getNotesForTag(tagId: string, sortType: 'createdAt' | 'updatedAt', lockedTitle: string, lockedContent: string) {
+  const noteTags = await storage.getNoteTagsByTag(tagId);
+  const notes = await Promise.all(noteTags.map((noteTag: any) => storage.getNoteDetail(noteTag.noteId)));
+  const reformatNotes = notes.filter((note: any) => note.id && !note.deletedAt).map((note: any) => {
+    const title = !note.isLocked ? removeSpecialChar(substrTitle(note.content)) : (note.title || lockedTitle);
+    const content = !note.isLocked ? removeSpecialChar(substrContent(note.content)) : lockedContent;
+    return {
+      ...note,
+      title,
+      content,
+    };
+  });
+
+  return reformatNotes.sort((a: any, b: any) => {
+    if (a.isPinned && !b.isPinned) return -1;
+    if (!a.isPinned && b.isPinned) return 1;
+    if (sortType === 'createdAt') {
+      return b.createdAt - a.createdAt;
+    } else {
+      return b.updatedAt - a.updatedAt;
+    }
+  });
+}
+
+// raw passthrough, used both by pull-merge (utils/sync.ts) and the UI-facing helpers below
+async function getNoteTagsByNote(noteId: string) {
+  return storage.getNoteTagsByNote(noteId);
+}
+async function getNoteTagsByTag(tagId: string) {
+  return storage.getNoteTagsByTag(tagId);
+}
+async function getNoteTagDetail(noteTagId: string) {
+  const noteTags = await storage.getAllNoteTags();
+  return noteTags.find((noteTag: any) => noteTag.id === noteTagId) || {};
+}
+async function createNoteTag(noteTagData: any) {
+  return storage.createNoteTag(noteTagData);
+}
+async function updateNoteTag(noteTagId: string, data: any) {
+  return storage.updateNoteTag(noteTagId, { ...data });
+}
+
+async function addTagToNote(noteId: string, tagId: string) {
+  const noteTagPayload = {
+    id: `${noteId}:${tagId}`,
+    noteId,
+    tagId,
+    lastSync: 0,
+    createdAt: nowUnix(),
+    updatedAt: nowUnix(),
+    deletedAt: null,
+  };
+  return storage.createNoteTag(noteTagPayload);
+}
+async function removeTagFromNote(noteId: string, tagId: string) {
+  return storage.updateNoteTag(`${noteId}:${tagId}`, { deletedAt: nowUnix(), updatedAt: nowUnix() });
+}
+
 async function getSettings() {
   return storage.getSettings();
 }
@@ -174,6 +281,15 @@ async function getPassword() {
 async function setPassword(password: string) {
   return storage.setPassword(password);
 }
+async function getPasswordChangeBackup() {
+  return storage.getPasswordChangeBackup();
+}
+async function savePasswordChangeBackup(data: any) {
+  return storage.savePasswordChangeBackup(data);
+}
+async function clearPasswordChangeBackup() {
+  return storage.clearPasswordChangeBackup();
+}
 
 // import
 async function getImportData() {
@@ -245,8 +361,28 @@ export {
   setSortNote,
   getNoteDetail,
 
+  getNoteHistory,
+  addNoteHistorySnapshot,
+  deleteNoteHistorySnapshot,
+
   getDeletedNotes,
 
+  getAllTags,
+  getTags,
+  getTagDetail,
+  createTag,
+  updateTag,
+  deleteTag,
+  getTagsForNote,
+  getNotesForTag,
+  getNoteTagsByNote,
+  getNoteTagsByTag,
+  getNoteTagDetail,
+  createNoteTag,
+  updateNoteTag,
+  addTagToNote,
+  removeTagFromNote,
+
   getSettings,
   setSettings,
 
@@ -258,6 +394,9 @@ export {
   checkPasswordExist,
   getPassword,
   setPassword,
+  getPasswordChangeBackup,
+  savePasswordChangeBackup,
+  clearPasswordChangeBackup,
 
   getImportData,
   setImportData,
diff --git a/utils/interact-cols.ts b/utils/interact-cols.ts
index 75b73db..dadc289 100644
--- a/utils/interact-cols.ts
+++ b/utils/interact-cols.ts
@@ -7,8 +7,10 @@ function handleInteractCols(
 ) {
   setTimeout(() => {
     if (document.querySelector('.cols-notes')) {
-      const mc = new (window as any).Hammer.Manager(document.querySelector('.cols-notes'));
-      mc.add(new (window as any).Hammer.Swipe({ threshold: 10 }));
+      const mc = new (window as any).Hammer.Manager(document.querySelector('.cols-notes'), {
+        touchAction: 'pan-y',
+      });
+      mc.add(new (window as any).Hammer.Swipe({ threshold: 10, direction: (window as any).Hammer.DIRECTION_HORIZONTAL }));
       mc.on("swipeleft swiperight", function (ev: any) {
         switch (ev.type) {
           case 'swipeleft':
diff --git a/utils/menu.ts b/utils/menu.ts
index d640954..bddd511 100644
--- a/utils/menu.ts
+++ b/utils/menu.ts
@@ -9,6 +9,21 @@ function outsideClickMenu() {
     if (menuNote.style.display === 'block') {
       menuNote.style.display = 'none';
     }
+
+    const menuMoveNote: any = document.getElementById('menu-move-note') || {};
+    if (menuMoveNote.style.display === 'block') {
+      menuMoveNote.style.display = 'none';
+    }
+
+    const menuTag: any = document.getElementById('menu-tag') || {};
+    if (menuTag.style.display === 'block') {
+      menuTag.style.display = 'none';
+    }
+
+    const menuNoteTags: any = document.getElementById('menu-note-tags') || {};
+    if (menuNoteTags.style.display === 'block') {
+      menuNoteTags.style.display = 'none';
+    }
   });
 }
 
@@ -36,6 +51,56 @@ function offsetMenuNote(data: any) {
   }
 }
 
+// submenu opened beside menu-note, so it needs its own width/height estimate
+// to decide whether to flip left/up when the note menu is near a viewport edge
+const MOVE_MENU_WIDTH = 190;
+const MOVE_MENU_MAX_HEIGHT = 300;
+
+function offsetMenuMoveNote(data: any) {
+  const menuMoveNote: any = document.getElementById('menu-move-note') || {};
+  menuMoveNote.style.display = 'block';
+
+  const openLeft = data.right + MOVE_MENU_WIDTH > window.innerWidth;
+  menuMoveNote.style.left = openLeft ? `${data.left - MOVE_MENU_WIDTH}px` : `${data.right}px`;
+
+  let top = data.top;
+  if (top + MOVE_MENU_MAX_HEIGHT > window.innerHeight) {
+    top = Math.max(8, window.innerHeight - MOVE_MENU_MAX_HEIGHT - 8);
+  }
+  menuMoveNote.style.top = `${top}px`;
+}
+
+function offsetMenuTag(data: any) {
+  const menuTag: any = document.getElementById('menu-tag') || {};
+  menuTag.style.display = 'block';
+  menuTag.style.left = `${data.x}px`;
+  menuTag.style.top = `${data.y}px`;
+
+  // if data.y is near bottom, then push y up 150px
+  if (window.innerHeight - data.y < 200) {
+    menuTag.style.top = `${data.y - 150}px`;
+  }
+}
+
+// submenu opened beside menu-note, so it needs its own width/height estimate
+// to decide whether to flip left/up when the note menu is near a viewport edge
+const NOTE_TAGS_MENU_WIDTH = 220;
+const NOTE_TAGS_MENU_MAX_HEIGHT = 300;
+
+function offsetMenuNoteTags(data: any) {
+  const menuNoteTags: any = document.getElementById('menu-note-tags') || {};
+  menuNoteTags.style.display = 'block';
+
+  const openLeft = data.right + NOTE_TAGS_MENU_WIDTH > window.innerWidth;
+  menuNoteTags.style.left = openLeft ? `${data.left - NOTE_TAGS_MENU_WIDTH}px` : `${data.right}px`;
+
+  let top = data.top;
+  if (top + NOTE_TAGS_MENU_MAX_HEIGHT > window.innerHeight) {
+    top = Math.max(8, window.innerHeight - NOTE_TAGS_MENU_MAX_HEIGHT - 8);
+  }
+  menuNoteTags.style.top = `${top}px`;
+}
+
 function hideMenuFolder() {
   const menuFolder: any = document.getElementById('menu-folder') || {};
   menuFolder.style.display = 'none';
@@ -46,6 +111,21 @@ function hideMenuNote() {
   menuNote.style.display = 'none';
 }
 
+function hideMenuMoveNote() {
+  const menuMoveNote: any = document.getElementById('menu-move-note') || {};
+  menuMoveNote.style.display = 'none';
+}
+
+function hideMenuTag() {
+  const menuTag: any = document.getElementById('menu-tag') || {};
+  menuTag.style.display = 'none';
+}
+
+function hideMenuNoteTags() {
+  const menuNoteTags: any = document.getElementById('menu-note-tags') || {};
+  menuNoteTags.style.display = 'none';
+}
+
 function disableDefaultContextMenu() {
   document.addEventListener('contextmenu', (e) => {
     const target = e.target as HTMLElement;
@@ -64,7 +144,13 @@ export {
   outsideClickMenu,
   offsetMenuFolder,
   offsetMenuNote,
+  offsetMenuMoveNote,
+  offsetMenuTag,
+  offsetMenuNoteTags,
   hideMenuFolder,
   hideMenuNote,
+  hideMenuMoveNote,
+  hideMenuTag,
+  hideMenuNoteTags,
   disableDefaultContextMenu,
 };
diff --git a/utils/mobile-back.ts b/utils/mobile-back.ts
new file mode 100644
index 0000000..758d9a1
--- /dev/null
+++ b/utils/mobile-back.ts
@@ -0,0 +1,52 @@
+import { watch, type Ref } from "vue";
+
+type BackHandler = () => void;
+
+const backStack: BackHandler[] = [];
+let isProgrammaticBack = false;
+
+function pushMobileBackState(onBack: BackHandler) {
+  window.history.pushState({}, '');
+  backStack.push(onBack);
+}
+
+function closeMobileBackState() {
+  if (!backStack.length) return;
+  backStack.pop();
+  isProgrammaticBack = true;
+  window.history.back();
+}
+
+function initMobileBackHandler() {
+  window.addEventListener('popstate', () => {
+    if (isProgrammaticBack) {
+      isProgrammaticBack = false;
+      return;
+    }
+
+    const onBack = backStack.pop();
+    onBack?.();
+  });
+}
+
+function useMobileBackToggle(stateRef: Ref<boolean>) {
+  let isClosingViaBack = false;
+  watch(stateRef, (isOpen) => {
+    if (isOpen) {
+      pushMobileBackState(() => {
+        isClosingViaBack = true;
+        stateRef.value = false;
+      });
+      return;
+    }
+
+    if (isClosingViaBack) {
+      isClosingViaBack = false;
+      return;
+    }
+
+    closeMobileBackState();
+  });
+}
+
+export { pushMobileBackState, closeMobileBackState, initMobileBackHandler, useMobileBackToggle };
diff --git a/utils/modal.ts b/utils/modal.ts
index cd15064..fcdae6c 100644
--- a/utils/modal.ts
+++ b/utils/modal.ts
@@ -23,10 +23,38 @@ function toggleModalConfirmDeleteFolder(isOpen: boolean, state: Ref<boolean>) {
   _toggleModal("modal-confirm-delete-folder", isOpen, state);
 }
 
+function toggleModalConfirmSampleData(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-confirm-sample-data", isOpen, state);
+}
+
 function toggleModalMenuNote(isOpen: boolean, state: Ref<boolean>) {
   _toggleModal("modal-menu-note", isOpen, state);
 }
 
+function toggleModalMenuMoveNote(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-menu-move-note", isOpen, state);
+}
+
+function toggleModalMenuTag(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-menu-tag", isOpen, state);
+}
+
+function toggleModalTagForm(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-tag-form", isOpen, state);
+}
+
+function toggleModalTagColorCustom(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-tag-color-custom", isOpen, state);
+}
+
+function toggleModalConfirmDeleteTag(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-confirm-delete-tag", isOpen, state);
+}
+
+function toggleModalMenuNoteTags(isOpen: boolean, state: Ref<boolean>) {
+  _toggleModal("modal-menu-note-tags", isOpen, state);
+}
+
 function toggleModalSortNote(isOpen: boolean, state: Ref<boolean>) {
   _toggleModal("modal-sort-note", isOpen, state);
 }
@@ -51,6 +79,22 @@ function toggleModalNotesDetail(isOpen: boolean, state: Ref) {
   _toggleModal("modal-notes-detail", isOpen, state);
 }
 
+function toggleModalNoteHistory(isOpen: boolean, state: Ref) {
+  _toggleModal("modal-note-history", isOpen, state);
+}
+
+function toggleModalNoteHistoryDiff(isOpen: boolean, state: Ref) {
+  _toggleModal("modal-note-history-diff", isOpen, state);
+}
+
+function toggleModalConfirmRestoreNoteHistory(isOpen: boolean, state: Ref) {
+  _toggleModal("modal-confirm-restore-note-history", isOpen, state);
+}
+
+function toggleModalConfirmDeleteNoteHistory(isOpen: boolean, state: Ref) {
+  _toggleModal("modal-confirm-delete-note-history", isOpen, state);
+}
+
 function toggleModalConfirmChangeAdapter(isOpen: boolean, state: Ref<boolean>) {
   _toggleModal("modal-confirm-change-adapter", isOpen, state);
 }
@@ -87,13 +131,24 @@ export {
   toggleModalMenuFolder,
   toggleModalChangeFolderName,
   toggleModalConfirmDeleteFolder,
+  toggleModalConfirmSampleData,
   toggleModalMenuNote,
+  toggleModalMenuMoveNote,
+  toggleModalMenuTag,
+  toggleModalTagForm,
+  toggleModalTagColorCustom,
+  toggleModalConfirmDeleteTag,
+  toggleModalMenuNoteTags,
   toggleModalSortNote,
   toggleModalMenuSidebar,
   toggleModalMenuEditor,
   toggleModalUnlockNotes,
   toggleModalAlertSetPassword,
   toggleModalNotesDetail,
+  toggleModalNoteHistory,
+  toggleModalNoteHistoryDiff,
+  toggleModalConfirmRestoreNoteHistory,
+  toggleModalConfirmDeleteNoteHistory,
   toggleModalConfirmChangeAdapter,
   toggleModalConfirmE2eeKey,
   toggleModalExportNotesConfirm,
diff --git a/utils/snackbar.ts b/utils/snackbar.ts
index c69add6..c4e4a5f 100644
--- a/utils/snackbar.ts
+++ b/utils/snackbar.ts
@@ -1,23 +1,14 @@
-function showInfoSnackbar(message: string, elm?: HTMLElement) {
-  const snackbar = document.createElement('div');
-  snackbar.classList.add('fixed', 'bottom-20', 'left-1/2', 'transform', '-translate-x-1/2', 'text-sm', 'bg-base-content', 'text-base-200', 'px-2.5', 'py-1.5', 'rounded', 'z-1000', 'text-center', 'w-4/5', 'lg:w-max',);
-  snackbar.innerText = message;
-  elm ? elm.appendChild(snackbar) : document.body.appendChild(snackbar);
+import { showInfo, showError } from '~/composables/useToast';
 
-  setTimeout(() => {
-    snackbar.remove();
-  }, 5000);
+// Legacy wrappers kept for backward compatibility.
+// The `elm` parameter (modal-scoped positioning) is intentionally ignored —
+// the global toast positioned bottom-right is visible in all contexts.
+function showInfoSnackbar(message: string, _elm?: HTMLElement) {
+  showInfo(message);
 }
 
-function showErrorSnackbar(message: string, elm?: HTMLElement) {
-  const snackbar = document.createElement('div');
-  snackbar.classList.add('fixed', 'bottom-20', 'left-1/2', 'transform', '-translate-x-1/2', 'text-sm', 'bg-error', 'text-base-100', 'px-2.5', 'py-1.5', 'rounded', 'z-1000', 'text-center', 'w-4/5', 'lg:w-max');
-  snackbar.innerText = message;
-  elm ? elm.appendChild(snackbar) : document.body.appendChild(snackbar);
-
-  setTimeout(() => {
-    snackbar.remove();
-  }, 5000);
+function showErrorSnackbar(message: string, _elm?: HTMLElement) {
+  showError(message);
 }
 
 export {
diff --git a/utils/sync.ts b/utils/sync.ts
index d11c595..d420b8f 100644
--- a/utils/sync.ts
+++ b/utils/sync.ts
@@ -9,6 +9,12 @@ import {
   setPassword,
   updateFolder,
   updateNote,
+  getTagDetail,
+  createTag,
+  updateTag,
+  getNoteTagDetail,
+  createNoteTag,
+  updateNoteTag,
 } from "~/services/main";
 import { syncImages } from "~/utils/image-sync";
 
@@ -65,6 +71,8 @@ async function pullData(
     let pullFolders = await syncAdapter.pullFolders(lastPull.value);
     let pullNotes = await syncAdapter.pullNotes(lastPull.value);
     let pullSettings = await syncAdapter.pullSettings(lastPull.value);
+    let pullTags = await syncAdapter.pullTags(lastPull.value);
+    let pullNoteTags = await syncAdapter.pullNoteTags(lastPull.value);
 
     pullFolders = pullFolders.filter((folder: any) => {
       return folder.lastSync > lastPushData;
@@ -73,6 +81,12 @@ async function pullData(
       return note.lastSync > lastPushData;
     });
     pullSettings = pullSettings?.lastSync > lastPushData ? pullSettings : {};
+    pullTags = pullTags.filter((tag: any) => {
+      return tag.lastSync > lastPushData;
+    });
+    pullNoteTags = pullNoteTags.filter((noteTag: any) => {
+      return noteTag.lastSync > lastPushData;
+    });
 
     idPulled.value = [
       ...pullFolders.map((folder: any) => folder.id),
@@ -124,6 +138,42 @@ async function pullData(
       }
     }
 
+    if (pullTags.length > 0) {
+      for (const tag of pullTags) {
+        const isTagExist = await getTagDetail(tag.id);
+        if (!isTagExist.id) {
+          await createTag(tag);
+        } else {
+          await updateTag(
+            tag.id,
+            tag.updatedAt > isTagExist.updatedAt ? tag : isTagExist
+          );
+        }
+
+        if (lastDataAt < +tag.updatedAt) {
+          lastDataAt = +tag.updatedAt;
+        }
+      }
+    }
+
+    if (pullNoteTags.length > 0) {
+      for (const noteTag of pullNoteTags) {
+        const isNoteTagExist: any = await getNoteTagDetail(noteTag.id);
+        if (!isNoteTagExist.id) {
+          await createNoteTag(noteTag);
+        } else {
+          await updateNoteTag(
+            noteTag.id,
+            noteTag.updatedAt > isNoteTagExist.updatedAt ? noteTag : isNoteTagExist
+          );
+        }
+
+        if (lastDataAt < +noteTag.updatedAt) {
+          lastDataAt = +noteTag.updatedAt;
+        }
+      }
+    }
+
     if (pullSettings) {
       if (pullSettings.password) {
         await setPassword(pullSettings.password);
@@ -212,6 +262,24 @@ async function pushData(
         });
         break;
       }
+      case "tag": {
+        const tag = await getTagDetail(id);
+        await syncAdapter.pushTag({
+          ...tag,
+          lastSync: now,
+          updatedAt: tag.updatedAt,
+        });
+        break;
+      }
+      case "noteTag": {
+        const noteTag: any = await getNoteTagDetail(id);
+        await syncAdapter.pushNoteTag({
+          ...noteTag,
+          lastSync: now,
+          updatedAt: noteTag.updatedAt,
+        });
+        break;
+      }
     }
 
     lastPushData.value = now;