diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
new file mode 100644
index 000000000..b0b0316ad
--- /dev/null
+++ b/src/components/ui/VnLv.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+const $props = defineProps({
+  label: { type: String, default: null },
+  value: {
+    type: [String, Boolean],
+    default: null,
+  },
+  info: { type: String, default: null },
+});
+const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+
+</script>
+<template>
+  <div class="vn-label-value">
+    <div v-if="$props.label || $slots.label" class="label">
+      <div v-if="!$slots.label">{{ $props.label }}</div>
+      <slot name="label"></slot>
+    </div>
+    <div v-if="$props.value || $slots.value" class="value">
+      <span v-if="isBooleanValue">
+        <QIcon :name="$props.value ? `check` : `close`" :color="$props.value ? `positive` : `negative`" />
+      </span>
+      <span v-else>
+        <slot name="value"></slot>
+      </span>
+    </div>
+    <div class="info" v-if="$props.info">
+      <QIcon name="info">
+        <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
+          {{ $props.info }}
+        </QTooltip>
+      </QIcon>
+    </div>
+  </div>
+</template>