diff --git a/backend/types/view_type.go b/backend/types/view_type.go
index 9c706f7..ddc5206 100644
--- a/backend/types/view_type.go
+++ b/backend/types/view_type.go
@@ -13,3 +13,4 @@ const DECODE_GZIP = "GZip"
 const DECODE_DEFLATE = "Deflate"
 const DECODE_ZSTD = "ZStd"
 const DECODE_BROTLI = "Brotli"
+const DECODE_MSGPACK = "Msgpack"
diff --git a/backend/utils/string/common.go b/backend/utils/string/common.go
index b26f44d..129baab 100644
--- a/backend/utils/string/common.go
+++ b/backend/utils/string/common.go
@@ -15,6 +15,9 @@ func containsBinary(str string) bool {
 	//}
 	rs := []rune(str)
 	for _, r := range rs {
+		if r == unicode.ReplacementChar {
+			return true
+		}
 		if !unicode.IsPrint(r) && !unicode.IsSpace(r) {
 			return true
 		}
diff --git a/backend/utils/string/convert.go b/backend/utils/string/convert.go
index 37d4008..aef8533 100644
--- a/backend/utils/string/convert.go
+++ b/backend/utils/string/convert.go
@@ -11,6 +11,7 @@ import (
 	"github.com/klauspost/compress/flate"
 	"github.com/klauspost/compress/gzip"
 	"github.com/klauspost/compress/zstd"
+	"github.com/vmihailenco/msgpack/v5"
 	"io"
 	"regexp"
 	"strconv"
@@ -137,6 +138,11 @@ func autoDecode(str string) (value, resultDecode string) {
 			//	resultDecode = types.DECODE_BROTLI
 			//	return
 			//}
+
+			if value, ok = decodeMsgpack(str); ok {
+				resultDecode = types.DECODE_MSGPACK
+				return
+			}
 		}
 	}
 
@@ -242,7 +248,7 @@ func decodeToHex(str string) (string, bool) {
 	var resultStr strings.Builder
 	for i := 0; i < len(decodeStr); i += 2 {
 		resultStr.WriteString("\\x")
-		resultStr.WriteString(decodeStr[i : i+2])
+		resultStr.WriteString(strings.ToUpper(decodeStr[i : i+2]))
 	}
 	return resultStr.String(), true
 }
@@ -285,6 +291,22 @@ func decodeBrotli(str string) (string, bool) {
 	return str, false
 }
 
+func decodeMsgpack(str string) (string, bool) {
+	var decodedStr string
+	if err := msgpack.Unmarshal([]byte(str), &decodedStr); err == nil {
+		return decodedStr, true
+	}
+
+	var decodedObj map[string]any
+	if err := msgpack.Unmarshal([]byte(str), &decodedObj); err == nil {
+		if b, err := json.Marshal(decodedObj); err == nil {
+			return string(b), true
+		}
+	}
+
+	return str, false
+}
+
 func SaveAs(str, format, decode string) (value string, err error) {
 	value = str
 	switch format {
@@ -352,6 +374,14 @@ func SaveAs(str, format, decode string) (value string, err error) {
 			err = errors.New("fail to build brotli")
 		}
 		return
+
+	case types.DECODE_MSGPACK:
+		if msgpackStr, ok := encodeMsgpack(str); ok {
+			value = msgpackStr
+		} else {
+			err = errors.New("fail to build msgpack")
+		}
+		return
 	}
 	return str, nil
 }
@@ -462,3 +492,14 @@ func encodeBrotli(str string) (string, bool) {
 	}
 	return str, false
 }
+
+func encodeMsgpack(str string) (string, bool) {
+	var err error
+	var buf bytes.Buffer
+	enc := msgpack.NewEncoder(&buf)
+	if err = enc.EncodeString(str); err == nil {
+		return buf.String(), true
+	}
+
+	return str, false
+}
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index bf530f8..e2534fd 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watchEffect } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Copy from '@/components/icons/Copy.vue'
 import Save from '@/components/icons/Save.vue'
@@ -82,13 +82,13 @@ const showMemoryUsage = computed(() => {
     return !isNaN(props.size) && props.size > 0
 })
 
-watchEffect(
-    () => {
-        if (props.value !== undefined) {
+watch(
+    () => props.value,
+    (val) => {
+        if (!isEmpty(val)) {
             onFormatChanged(viewAs.decode, viewAs.format)
         }
     },
-    { flush: 'post' },
 )
 
 const converting = ref(false)
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index 06ab299..b551917 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -58,7 +58,7 @@ const onSelectOptions = async (select) => {
                 t-tooltip="interface.new_group"
                 @click="dialogStore.openNewGroupDialog()" />
             <n-divider vertical />
-            <n-input v-model:value="filterPattern" :placeholder="$t('interface.filter')" clearable>
+            <n-input v-model:value="filterPattern" :autofocus="false" :placeholder="$t('interface.filter')" clearable>
                 <template #prefix>
                     <n-icon :component="Filter" size="20" />
                 </template>
diff --git a/frontend/src/consts/value_view_type.js b/frontend/src/consts/value_view_type.js
index cdd69d0..b8f4f31 100644
--- a/frontend/src/consts/value_view_type.js
+++ b/frontend/src/consts/value_view_type.js
@@ -22,6 +22,7 @@ export const decodeTypes = {
     DEFLATE: 'Deflate',
     ZSTD: 'ZStd',
     BROTLI: 'Brotli',
+    MSGPACK: 'Msgpack',
     // PHP: 'PHP',
     // Java: 'Java',
 }