diff --git a/apps/dcellar-web-ui/src/components/common/ManageTags/index.tsx b/apps/dcellar-web-ui/src/components/common/ManageTags/index.tsx
index 0eb5ba84..a1eb2472 100644
--- a/apps/dcellar-web-ui/src/components/common/ManageTags/index.tsx
+++ b/apps/dcellar-web-ui/src/components/common/ManageTags/index.tsx
@@ -14,6 +14,7 @@ import {
 } from '@node-real/uikit';
 import { memo, useState } from 'react';
 import { DCButton } from '../DCButton';
+import { countBytes } from '@/utils/coder';
 
 export const DEFAULT_TAG = { key: '', value: '' };
 
@@ -26,12 +27,15 @@ interface ManageTagsProps {
 export const ManageTags = memo<ManageTagsProps>(function ManageTags({ onSave, onCancel, tags }) {
   const [internalTags, setInternalTags] = useState(tags);
 
-  const isInvalid = (type: string, value: string) => {
-    if (type === 'key' && value.length > 32) {
-      return 'Should not exceed 32 characters.';
-    }
-    if (type === 'value' && value.length > 64) {
-      return 'Should not exceed 64 characters.';
+  const isInvalid = (type: 'key' | 'value', value: string): string | false => {
+    const bytesLength = countBytes(value);
+    const limits: { [key: string]: number } = {
+      key: 32,
+      value: 64,
+    };
+
+    if (bytesLength > limits[type]) {
+      return `Should not exceed ${limits[type]} bytes.`;
     }
 
     return false;
diff --git a/apps/dcellar-web-ui/src/utils/coder.ts b/apps/dcellar-web-ui/src/utils/coder.ts
index 29a12ee5..1d800a3a 100644
--- a/apps/dcellar-web-ui/src/utils/coder.ts
+++ b/apps/dcellar-web-ui/src/utils/coder.ts
@@ -134,3 +134,9 @@ export function decodeBase64(data: string): Uint8Array {
 
   return bytes;
 }
+
+export function countBytes(str: string) {
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(str);
+  return bytes.length;
+}