diff --git a/src/components/common/VnDate.vue b/src/components/common/VnDate.vue
index 4b65ec4da..cdfa0d258 100644
--- a/src/components/common/VnDate.vue
+++ b/src/components/common/VnDate.vue
@@ -9,3 +9,39 @@ const model = defineModel({ type: [String, Number], required: true });
         :options="$attrs.options"
     />
 </template>
+<style lang="scss" scoped>
+.q-date {
+    width: 240px;
+    min-width: none;
+
+    :deep(.q-date__calendar) {
+        padding-bottom: 0;
+    }
+    :deep(.q-date__view) {
+        min-height: 240px;
+        padding: 8px;
+    }
+    :deep(.q-date__calendar-days-container) {
+        min-height: 160px;
+        height: unset;
+    }
+}
+.q-date--portrait-standard :deep(.q-date__header) {
+    padding: 2px 2px 5px 12px;
+    height: 60px;
+}
+
+@media (min-width: $breakpoint-xs-max) {
+    .q-date--landscape-standard {
+        min-width: 280px;
+
+        :deep(.q-date__header) {
+            min-width: 0;
+            padding: 10px 8px 0 8px;
+        }
+    }
+    .q-date--landscape-standard :deep(.q-date__view) {
+        width: 220px;
+    }
+}
+</style>
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index ceb4e8468..1b57c20d0 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -58,7 +58,7 @@ defineExpose({
         :class="{ zoomIn: zoom }"
         :src="getUrl()"
         v-bind="$attrs"
-        @click.stop="show = $props.zoom ? true : false"
+        @click.stop="show = $props.zoom"
         spinner-color="primary"
     />
     <QDialog v-if="$props.zoom" v-model="show">