diff --git a/app/assets/styles/utils.scss b/app/assets/styles/utils.scss
index cf745b9..53a6e87 100644
--- a/app/assets/styles/utils.scss
+++ b/app/assets/styles/utils.scss
@@ -132,9 +132,9 @@ $class-types: (
   ),
 );
 
-// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ───────────────────
+// ─── Numeric: w-0 → w-96, h-0 → h-96, size-0 → size-96 ───────────────────
 @each $prefix, $props in $class-types {
-  @for $i from 0 through 48 {
+  @for $i from 0 through 96 {
     .#{$prefix}-#{$i} {
       @include set-props($props, calc(var(--spacing) * #{$i}));
     }
@@ -341,9 +341,9 @@ $inset-types: (
   ),
 );
 
-// ─── Numeric: 0 → 48, using the same --spacing scale ──────────────────────
+// ─── Numeric: 0 → 96, using the same --spacing scale ──────────────────────
 @each $prefix, $props in $inset-types {
-  @for $i from 0 through 48 {
+  @for $i from 0 through 96 {
     .#{$prefix}-#{$i} {
       @include set-props($props, calc(var(--spacing) * #{$i}));
     }
@@ -375,3 +375,98 @@ $inset-keywords: (
     }
   }
 }
+
+// ─── Max/Min width & height ────────────────────────────────────────────────
+$minmax-types: (
+  "max-w": (
+    max-width,
+  ),
+  "min-w": (
+    min-width,
+  ),
+  "max-h": (
+    max-height,
+  ),
+  "min-h": (
+    min-height,
+  ),
+);
+
+// ─── Numeric: 0 → 96, using --spacing scale ───────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @for $i from 0 through 96 {
+    .#{$prefix}-#{$i} {
+      @include set-props($props, calc(var(--spacing) * #{$i}));
+    }
+  }
+}
+
+// ─── Fractions ─────────────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $pair in $fractions {
+    $num: list.nth($pair, 1);
+    $den: list.nth($pair, 2);
+    .#{$prefix}-#{$name} {
+      @include set-props($props, calc(#{$num} / #{$den} * 100%));
+    }
+  }
+}
+
+// ─── Shared keywords ───────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $value in $shared-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}
+
+// ─── Viewport keywords ─────────────────────────────────────────────────────
+@each $prefix, $props in $minmax-types {
+  @each $name, $value in $viewport-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}
+
+// ─── Container sizes (max-w- / min-w- only) ───────────────────────────────
+@each $name in $containers {
+  .max-w-#{$name} {
+    max-width: var(--container-#{$name});
+  }
+  .min-w-#{$name} {
+    min-width: var(--container-#{$name});
+  }
+}
+
+// ─── Screen ────────────────────────────────────────────────────────────────
+.max-w-screen {
+  max-width: 100vw;
+}
+.min-w-screen {
+  min-width: 100vw;
+}
+.max-h-screen {
+  max-height: 100vh;
+}
+.min-h-screen {
+  min-height: 100vh;
+}
+
+// ─── none (max only) ───────────────────────────────────────────────────────
+.max-w-none {
+  max-width: none;
+}
+.max-h-none {
+  max-height: none;
+}
+
+// ─── Opacity ───────────────────────────────────────────────────────────────
+$opacity-values: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+
+@each $val in $opacity-values {
+  .opacity-#{$val} {
+    opacity: calc($val / 100);
+  }
+}
diff --git a/app/components/media/Camera.vue b/app/components/media/Camera.vue
index 9fa880b..d274e2d 100644
--- a/app/components/media/Camera.vue
+++ b/app/components/media/Camera.vue
@@ -1,33 +1,59 @@
 <template>
   <div>
-    <div>
+    <div class="block rounded-md is-clipped">
       <video
         ref="video"
-        id="video"
-        width="640"
         height="480"
         autoplay
+        class="w-full is-block"
       ></video>
     </div>
-    <div class="mt-2">
-      <button
-        class="button is-primary"
-        id="snap"
-        v-on:click="capture()"
-      >
-        Chụp ảnh
-      </button>
-      <a
-        class="ml-6"
-        @click="switchView()"
-      >
-        <SvgIcon v-bind="{ name: 'camera_switch.svg', type: 'black', size: 40 }"></SvgIcon>
-      </a>
+    <div class="fixed-grid has-12-cols mb-0">
+      <div class="grid">
+        <div class="cell is-flex is-justify-content-center is-align-items-center">
+          <button
+            @click="$emit('close')"
+            class="button is-light rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:close-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
+        <div class="cell is-col-span-10 has-text-centered">
+          <button
+            @click="capture"
+            class="button is-primary is-medium rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:photo-camera-outline-rounded"
+                :size="24"
+              />
+            </span>
+          </button>
+        </div>
+        <div class="cell is-flex is-justify-content-center is-align-items-center">
+          <button
+            @click="flip"
+            class="button is-light is-primary rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:flip-camera-ios-outline-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
+      </div>
     </div>
     <canvas
       v-show="false"
       ref="canvas"
-      id="canvas"
       width="640"
       height="480"
     ></canvas>
@@ -35,14 +61,14 @@
 </template>
 <script>
 export default {
-  data: function () {
+  data() {
     return {
       video: {},
       canvas: {},
       current: "front",
     };
   },
-  mounted: function () {
+  mounted() {
     this.openCamera();
   },
   beforeDestroy() {
@@ -54,46 +80,61 @@ export default {
   },
   methods: {
     openCamera() {
-      let f = this.current === "front" ? { facingMode: "user" } : { facingMode: { exact: "environment" } };
       this.video = this.$refs.video;
+      const facingConstraint = {
+        facingMode: this.current === "front" ? "user" : { exact: "environment" },
+      };
+
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia({ video: f, audio: false }).then((stream) => {
-          video.srcObject = stream;
-          this.video.play();
-        });
+        navigator.mediaDevices
+          .getUserMedia({ video: facingConstraint, audio: false })
+          .then((stream) => {
+            this.video.srcObject = stream;
+            this.video.play();
+          })
+          .catch((err) => {
+            if (this.current === "back" && (err.name === "OverconstrainedError" || err.name === "NotFoundError")) {
+              this.current = "front";
+              this.$snackbar("Không tìm thấy camera sau", "Error");
+              this.openCamera(); // retry front cam
+            }
+          });
       }
     },
     capture() {
       this.canvas = this.$refs.canvas;
-      let scale = 600 / this.video.videoWidth;
-      let w = this.video.videoWidth * scale;
-      let h = this.video.videoHeight * scale;
+      const scale = 600 / this.video.videoWidth;
+      const w = this.video.videoWidth * scale;
+      const h = this.video.videoHeight * scale;
       this.canvas.width = w;
       this.canvas.height = h;
-      var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
-      this.canvas.toBlob((blod) => this.saveAs(blod));
+      this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
+      this.canvas.toBlob((blob) => this.saveAs(blob));
     },
-    async saveAs(blod) {
-      var form = new FormData();
-      let name = `${this.$id()}.png`;
+    async saveAs(blob) {
+      const form = new FormData();
+      const name = `${this.$id()}.png`;
       this.fileName = `${this.$dayjs(new Date()).format("YYYYMMDDhhmmss")}-${name}`;
+
       form.append("filename", this.fileName);
       form.append("name", name);
-      form.append("file", blod);
+      form.append("file", blob);
       form.append("type", "image");
       form.append("size", 100);
-      form.append("user", this.$store.state.login.id);
-      let result = await this.$insertapi("upload", { data: form });
+      form.append("user", this.$store.login.id || 1);
+
+      const result = await this.$insertapi("upload", { data: form });
       if (result === "error") return;
-      let row = result.rows[0];
-      const file = new File([blod], name, { type: "image/png" });
-      row.source = { file: file };
+
+      const row = result.rows[0];
+      const file = new File([blob], name, { type: "image/png" });
+      row.source = { file };
       this.$emit("modalevent", { name: "selectimage", data: row });
       this.$emit("close");
     },
-    switchView() {
+    flip() {
       this.current = this.current === "front" ? "back" : "front";
-      var vidTrack = this.video.srcObject.getVideoTracks();
+      const vidTrack = this.video.srcObject.getVideoTracks();
       vidTrack.forEach((track) => {
         track.stop();
         track.enabled = false;
diff --git a/app/components/media/CropImage.vue b/app/components/media/CropImage.vue
index a022eb8..1087548 100644
--- a/app/components/media/CropImage.vue
+++ b/app/components/media/CropImage.vue
@@ -1,66 +1,97 @@
 <template>
   <div
-    class="tile is-ancestor py-5 px-3 mx-0"
     v-if="image"
+    class="fixed-grid has-12-cols"
   >
-    <div class="tile is-1" />
-    <div class="tile is-7">
-      <Cropper
-        ref="cropper"
-        :src="image"
-        @change="onChange"
-        :stencil-props="getRatio"
-      />
-    </div>
-    <div class="tile is-1"></div>
-    <div class="tile">
-      <div v-if="avatar !== true">
-        <p class="mt-2 fs-16">Chọn tỷ lệ hoặc nhập chiều rộng và cao</p>
-        <div class="tags are-medium mt-2">
-          <a
-            :class="curRatio.k === v.k ? 'tag is-primary' : 'tag'"
-            v-for="(v, i) in ratios"
-            :key="i"
-            @click="curRatio = v"
-            >{{ v.k }}</a
-          >
-        </div>
-        <div class="block mt-5">
-          <b-radio
-            v-model="radio"
-            native-value="replace"
-          >
-            Ghi đè
-          </b-radio>
-          <b-radio
-            v-model="radio"
-            class="ml-3"
-            native-value="new"
-          >
-            Tạo file mới
-          </b-radio>
-        </div>
-        <p class="mt-4">
-          <a
-            class="button is-primary mr-4 mb-2"
-            :class="loading ? 'is-loading' : ''"
-            @click="updateImage()"
-            >Lưu lại</a
-          >
-        </p>
-        <p
-          class="mt-2"
-          v-if="coordinates"
-        >
-          Hình ảnh cắt,
-          {{ "W: " + coordinates.width + ", H: " + coordinates.height + ", W/H: " + coordinates.ratio }}
-        </p>
+    <div class="grid is-gap-2">
+      <div class="cell is-col-span-8">
+        <Cropper
+          ref="cropper"
+          :src="image"
+          :canvas="false"
+          @change="onChange"
+          :stencil-props="getRatio"
+        />
       </div>
-      <div
-        class="is-italic has-text-grey"
-        v-else
-      >
-        * Di chuyển khung để chọn hình ảnh phù hợp
+      <div class="cell is-col-span-4">
+        <div
+          v-if="avatar"
+          class="is-italic has-text-grey"
+        >
+          * Di chuyển khung để chọn hình ảnh phù hợp
+        </div>
+        <div v-else>
+          <p class="label">Chọn tỷ lệ:</p>
+          <div class="fixed-grid has-12-cols">
+            <div class="grid is-gap-0.5">
+              <div
+                class="cell is-col-span-3"
+                v-for="ratio in ratios"
+                :key="ratio"
+              >
+                <button
+                  :class="['button is-fullwidth is-small', curRatio === ratio ? 'is-primary' : 'is-light']"
+                  @click="curRatio = ratio"
+                >
+                  {{ ratio }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div
+            v-if="coordinates"
+            class="fixed-grid has-3-cols is-family-monospace"
+          >
+            <div class="grid">
+              <div class="cell p-2 rounded has-background-white-ter has-text-centered">
+                <p class="fs-11 is-uppercase has-text-grey">width</p>
+                <p class="font-semibold">{{ coordinates.width }}</p>
+              </div>
+              <div class="cell p-2 rounded has-background-white-ter has-text-centered">
+                <p class="fs-11 is-uppercase has-text-grey">height</p>
+                <p class="font-semibold">{{ coordinates.height }}</p>
+              </div>
+              <div class="cell p-2 rounded has-background-white-ter has-text-centered">
+                <p class="fs-11 is-uppercase has-text-grey">ratio</p>
+                <p class="font-semibold">{{ coordinates.ratio }}</p>
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div class="block is-flex is-gap-1 is-flex-wrap-wrap">
+            <button
+              v-for="v in [
+                { name: 'Ghi đè', value: 'replace' },
+                { name: 'Tạo file mới', value: 'new' },
+              ]"
+              :key="v.value"
+              @click="radio = v.value"
+              :class="['button fs-14', radio === v.value ? 'is-primary is-light' : 'is-white']"
+            >
+              <span class="icon">
+                <Icon
+                  :name="
+                    radio === v.value
+                      ? 'material-symbols:radio-button-checked-outline'
+                      : 'material-symbols:radio-button-unchecked'
+                  "
+                  :size="18"
+                />
+              </span>
+              <span>{{ v.name }}</span>
+            </button>
+          </div>
+          <div class="block">
+            <button
+              class="button is-primary"
+              :class="loading && 'is-loading'"
+              @click="updateImage"
+            >
+              Lưu lại
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -68,6 +99,7 @@
 <script>
 import { CircleStencil, Cropper } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
+
 export default {
   components: {
     Cropper,
@@ -78,61 +110,67 @@ export default {
     return {
       coordinates: undefined,
       ratios: [
-        { k: "1/1" },
-        { k: "5/4" },
-        { k: "4/3" },
-        { k: "3/2" },
-        { k: "5/3" },
-        { k: "16/9" },
-        { k: "2/1" },
-        { k: "3/1" },
-        { k: "4/5" },
-        { k: "3/4" },
-        { k: "2/3" },
-        { k: "3/5" },
-        { k: "9/16" },
-        { k: "1/2" },
-        { k: "1/3" },
+        "1/1",
+        "5/4",
+        "4/3",
+        "3/2",
+        "5/3",
+        "16/9",
+        "2/1",
+        "3/1",
+        "4/5",
+        "3/4",
+        "2/3",
+        "3/5",
+        "9/16",
+        "1/2",
+        "1/3",
       ],
-      curRatio: { k: "1/1" },
+      curRatio: "1/1",
       radio: this.avatar ? "new" : "replace",
-      rectangle: true,
       loading: false,
     };
   },
   computed: {
     getRatio() {
-      return { aspectRatio: this.$calc(this.curRatio.k) };
+      return { aspectRatio: this.$calc(this.curRatio) };
     },
   },
   methods: {
-    onChange({ coordinates, canvas }) {
+    onChange({ coordinates }) {
       this.coordinates = coordinates;
-      this.coordinates.ratio = ((this.coordinates.width * 1.0) / this.coordinates.height).toFixed(2);
+      this.coordinates.ratio = (this.coordinates.width / this.coordinates.height).toFixed(2);
     },
     updateImage() {
       const { canvas } = this.$refs.cropper.getResult();
-      if (canvas) canvas.toBlob((blod) => this.saveAs(blod));
+      if (canvas) canvas.toBlob((blob) => this.saveAs(blob));
     },
-    async saveAs(blod) {
-      this.loading = true;
-      var form = new FormData();
-      let name =
-        this.selected.file.indexOf("-") > 0
-          ? this.selected.file.substring(15, this.selected.file.length)
-          : this.selected.file;
-      this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + name;
-      if (this.radio === "replace") this.fileName = this.selected.file;
-      form.append("filename", this.fileName);
-      form.append("name", name);
-      form.append("file", blod);
-      form.append("type", "file");
-      form.append("size", this.selected.size);
-      form.append("user", this.$store.state.login.id);
-      let result = await this.$insertapi("upload", { data: form });
-      this.loading = false;
-      if (result === "error") return;
-      this.$emit("modalevent", { name: "image", data: result.rows[0] });
+    async saveAs(blob) {
+      try {
+        this.loading = true;
+        const form = new FormData();
+        const name =
+          this.selected.file.indexOf("-") > 0
+            ? this.selected.file.substring(15, this.selected.file.length)
+            : this.selected.file;
+        this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + name;
+        if (this.radio === "replace") this.fileName = this.selected.file;
+
+        form.append("filename", this.fileName);
+        form.append("name", name);
+        form.append("file", blob);
+        form.append("type", "file");
+        form.append("size", this.selected.size);
+        form.append("user", this.$store.login.id);
+
+        const result = await this.$insertapi("upload", { data: form });
+        if (result === "error") return;
+        this.$emit("modalevent", { name: "image", data: result.rows[0] });
+      } catch (error) {
+        console.error(error);
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/app/components/media/FileGallery.vue b/app/components/media/FileGallery.vue
index 016343c..31fcca7 100644
--- a/app/components/media/FileGallery.vue
+++ b/app/components/media/FileGallery.vue
@@ -1,31 +1,31 @@
 <template>
   <div v-if="files">
     <div
-      class="has-text-right"
       v-if="!hideopt && $getEditRights()"
+      class="has-text-right"
     >
       <FileUpload
         v-bind="{ type: ['file'], position }"
         @files="getFiles"
-      ></FileUpload>
+      />
     </div>
     <div>
       <div
+        v-if="files.length === 0 && info"
         class="mt-3 has-text-grey fs-15"
-        v-if="files.length === 0 && info !== false"
       >
         Chưa có tài liệu được tải lên
       </div>
       <DataView
-        v-bind="vbind"
         v-else-if="vbind"
-      ></DataView>
+        v-bind="vbind"
+      />
     </div>
     <Modal
-      @close="showmodal = undefined"
-      v-bind="showmodal"
       v-if="showmodal"
-    ></Modal>
+      v-bind="showmodal"
+      @close="showmodal = undefined"
+    />
   </div>
 </template>
 <script>
diff --git a/app/components/media/Imagebox.vue b/app/components/media/Imagebox.vue
index 7865f87..e06b198 100644
--- a/app/components/media/Imagebox.vue
+++ b/app/components/media/Imagebox.vue
@@ -10,144 +10,147 @@
       <div class="control">
         <div class="file is-primary">
           <label class="file-label">
+            <button :class="['button is-primary is-small', loading && 'is-loading']">
+              <span class="icon">
+                <Icon
+                  name="material-symbols:upload-rounded"
+                  :size="18"
+                />
+              </span>
+              <span>Tải lên từ máy tính</span>
+            </button>
             <input
-              class="file-input"
               type="file"
-              :id="docid"
+              @change="doChange"
               multiple
               name="resume"
-              @change="doChange"
+              class="file-input is-clickable"
+              :id="docid"
             />
-            <a
-              class="button is-primary is-rounded is-small"
-              :class="loading ? 'is-loading' : null"
-            >
-              <SvgIcon v-bind="{ name: 'add5.svg', type: 'white', size: 18 }"></SvgIcon>
-              <span class="fs-14 ml-1">Tải lên từ máy tính</span>
-            </a>
           </label>
         </div>
       </div>
-      <div :class="`control ${showUrl ? '' : 'is-expanded'}`">
-        <a
-          class="button is-dark is-rounded is-small"
-          @click="displayInput()"
+      <div :class="['control', !showUrl && 'is-expanded']">
+        <button
+          class="button is-small"
+          @click="displayInput"
         >
-          <SvgIcon v-bind="{ name: 'add5.svg', type: 'white', size: 18 }"></SvgIcon>
-          <span class="fs-14 ml-1">Tải lên từ đường dẫn</span>
-        </a>
+          <span class="icon">
+            <Icon
+              name="material-symbols:link-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Tải lên từ đường dẫn</span>
+        </button>
       </div>
       <div
-        class="control is-expanded"
         v-if="showUrl"
+        class="field has-addons is-flex-grow-1 mb-0"
       >
-        <input
-          class="input is-small is-rounded"
-          id="url"
-          v-model="url"
-          style="width: 250px"
-          type="text"
-          placeholder="Nhập đường dẫn vào đây"
-        />
-        <a
-          class="button is-primary is-small px-4 ml-3"
-          @click="checkUrl()"
-        >
-          <SvgIcon v-bind="{ name: 'upload.svg', type: 'white', size: 22 }"></SvgIcon>
-        </a>
-        <a
-          class="ml-4"
-          @click="showUrl = false"
-        >
-          <SvgIcon v-bind="{ name: 'close.svg', type: 'dark', size: 22 }"></SvgIcon>
-        </a>
+        <div class="control">
+          <input
+            class="input is-small w-60"
+            id="url"
+            v-model.trim="url"
+            type="text"
+            placeholder="Nhập đường dẫn"
+          />
+        </div>
+        <div class="control">
+          <button
+            class="button is-light is-small rounded-full"
+            @click="showUrl = false"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:close-rounded"
+                :size="18"
+              />
+            </span>
+          </button>
+        </div>
+        <div class="control">
+          <button
+            class="button is-primary is-small"
+            :disabled="!url"
+            @click="checkUrl"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:arrow-forward-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
       </div>
-      <div class="control">
+      <div class="control has-icons-left">
         <input
-          class="input is-small is-rounded"
           v-model="search"
-          style="width: 250px"
           type="text"
-          placeholder="Tìm kiếm"
           @keyup="beginSearch"
+          class="input is-small is-rounded w-2xs"
+          placeholder="Tìm kiếm"
         />
-      </div>
-      <div class="control">
         <span
-          class="is-clickable"
-          @click="mode = 'image'"
+          class="icon is-small is-left"
+          style="left: 2px"
         >
-          <SvgIcon v-bind="{ name: 'image3.svg', type: 'dark', size: 25 }"></SvgIcon>
+          <Icon
+            name="material-symbols:search"
+            :size="18"
+          />
         </span>
       </div>
-      <div class="control">
-        <span
-          class="is-clickable"
-          @click="mode = 'list'"
-        >
-          <SvgIcon v-bind="{ name: 'list.png', type: 'dark', size: 25 }"></SvgIcon>
-        </span>
+      <div class="tabs is-toggle m-0">
+        <ul class="is-flex-grow-0 ml-auto">
+          <li
+            v-for="viewMode in viewModes"
+            :key="viewMode.name"
+            :class="[viewMode.name === mode && 'is-active']"
+            @click="mode = viewMode.name"
+          >
+            <a class="px-3 py-1">
+              <span class="icon m-0">
+                <Icon
+                  :name="viewMode.icon"
+                  :size="18"
+                />
+              </span>
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
     <DataView
-      class="mt-3"
-      v-bind="vbind"
       v-if="mode === 'list'"
-    ></DataView>
-    <div
-      class="tile is-ancestor mx-0 px-0 pt-3"
-      v-else
-    >
-      <div class="tile is-vertical">
-        <div
-          class="tile is-parent"
-          v-for="(v, i) in group"
-          :key="i"
-        >
-          <article
-            class="tile is-child"
+      v-bind="vbind"
+      class="mt-3"
+    />
+    <div v-else>
+      <div
+        class="fixed-grid has-5-cols"
+        v-for="(_, i) in group"
+        :key="i"
+      >
+        <div class="grid">
+          <div
             v-for="(k, j) in getData(i)"
             :key="j"
             @mouseover="focus = k"
+            @mouseleave="focus = undefined"
+            class="cell relative rounded-md is-clipped"
           >
-            <div
-              class="image px-2 pb-2"
+            <figure
               v-if="k.file && type === 'image'"
+              class="image is-square mx-auto is-flex is-align-items-center"
             >
               <NuxtImg
                 :src="`${path}download?name=${k.file}`"
                 :id="'commentImage' + k.id"
               />
-              <div
-                class="text-image"
-                v-if="focus === k"
-              >
-                <a
-                  class="button is-primary is-small"
-                  @click="selectMedia(k)"
-                >
-                  <SvgIcon v-bind="{ name: 'checked.svg', type: 'white', size: 22 }"></SvgIcon>
-                </a>
-                <a
-                  class="button is-primary is-small ml-2"
-                  @click="editImage(k)"
-                >
-                  <SvgIcon v-bind="{ name: 'crop.svg', type: 'white', size: 22 }"></SvgIcon>
-                </a>
-                <a
-                  class="button is-primary is-small ml-2"
-                  @click="copyMedia(k, 'image')"
-                >
-                  <SvgIcon v-bind="{ name: 'copy.svg', type: 'white', size: 22 }"></SvgIcon>
-                </a>
-                <a
-                  class="button is-danger is-small ml-2"
-                  @click="deleteMedia(k, 'file')"
-                >
-                  <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 22 }"></SvgIcon>
-                </a>
-              </div>
-            </div>
+            </figure>
             <div
               class="ml-2 mr-2"
               v-else-if="k.file && type === 'video'"
@@ -164,12 +167,17 @@
                   class="mt-2"
                   v-if="focus === k"
                 >
-                  <a
+                  <button
                     class="button is-primary"
                     @click="selectMedia(k)"
                   >
-                    <SvgIcon v-bind="{ name: 'check3.svg', type: 'primary', size: 22 }"></SvgIcon>
-                  </a>
+                    <span class="icon">
+                      <Icon
+                        name="material-symbols:check-rounded"
+                        :size="18"
+                      />
+                    </span>
+                  </button>
                 </div>
               </vue-plyr>
             </div>
@@ -182,28 +190,88 @@
                 class="mt-2"
                 v-if="focus === k"
               >
-                <a
+                <button
                   class="button is-primary"
                   @click="selectMedia(k)"
                 >
-                  <SvgIcon v-bind="{ name: 'check3.svg', type: 'primary', size: 22 }"></SvgIcon>
-                </a>
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:check-rounded"
+                      :size="18"
+                    />
+                  </span>
+                </button>
               </div>
             </div>
-          </article>
+            <div
+              v-if="focus === k"
+              class="absolute top-0 size-full"
+            >
+              <div class="size-full has-background-black opacity-15"></div>
+              <div class="buttons has-addons absolute left-0 right-0 bottom-2 mx-auto w-fit">
+                <button
+                  class="button is-small is-white"
+                  @click="selectMedia(k)"
+                >
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:check-rounded"
+                      :size="18"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="button is-small is-white"
+                  @click="editImage(k)"
+                >
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:crop-free-rounded"
+                      :size="18"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="button is-small is-white"
+                  @click="copyMedia(k)"
+                >
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:content-copy-outline-rounded"
+                      :size="18"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="button is-small is-white"
+                  @click="deleteMedia(k, 'file')"
+                >
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:delete-outline-rounded"
+                      :size="18"
+                      class="has-text-danger"
+                    />
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <Modal
-      @close="showmodal = undefined"
+      v-if="showmodal"
       v-bind="showmodal"
+      @close="showmodal = undefined"
       @image="updateImage"
       @files="getFiles"
-      v-if="showmodal"
     />
   </div>
 </template>
 <script>
+import DataView from "~/components/datatable/DataView.vue";
+
 export default {
   props: ["source"],
   data() {
@@ -222,6 +290,10 @@ export default {
       url: undefined,
       search: undefined,
       mode: "image",
+      viewModes: [
+        { name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
+        { name: "image", icon: "material-symbols:grid-view-outline-rounded" },
+      ],
       timer: undefined,
       vbind: { api: "file", setting: "image-fields" },
       dataFiles: [],
@@ -230,13 +302,15 @@ export default {
     };
   },
   async created() {
-    let found = this.$findapi("file");
-    found.params = {
-      filter: { user: this.login.id },
+    const fileApi = this.$findapi("file");
+    fileApi.params = {
       sort: "-create_time",
-      type__code: this.type,
+      filter: {
+        user: this.login.id,
+        type__code: this.type,
+      },
     };
-    let result = await this.$getapi([found]);
+    const result = await this.$getapi([fileApi]);
     this.data = result[0].data.rows;
   },
   watch: {
@@ -298,7 +372,7 @@ export default {
       this.timer = setTimeout(() => this.startSearch(e.target.value), 150);
     },
     async startSearch(value) {
-      const filter = { user: this.login.id };
+      const filter = { user: this.login.id, type__code: this.type };
       if (!this.$empty(value)) filter.name__icontains = value.toLowerCase();
       this.data = await this.$getdata("file", { filter });
     },
@@ -307,29 +381,25 @@ export default {
       this.url = undefined;
       setTimeout(() => document.getElementById("url").focus(), 100);
     },
-    checkUrl() {
+    async checkUrl() {
       if (this.$empty(this.url)) return this.$snackbar("Đường dẫn không hợp lệ", "Error");
-      let self = this;
-      this.loading = true;
-      this.$axios
-        .get(this.url, { responseType: "blob" })
-        .then(function (response) {
-          var reader = new window.FileReader();
-          reader.onload = (e) => {
-            self.image = e.target.result;
-            setTimeout(() => self.doUpload(e.target.result), 100);
-          };
-          reader.readAsDataURL(response.data);
-          self.loading = false;
-        })
-        .catch((e) => {
-          self.$buefy.toast.open({
-            duration: 3000,
-            message: `Đường dẫn không hợp lệ`,
-            type: "is-danger",
-          });
-          self.loading = false;
-        });
+
+      try {
+        const self = this;
+        this.loading = true;
+        const res = await $fetch(this.url);
+        const reader = new window.FileReader();
+        reader.onload = (e) => {
+          self.image = e.target.result;
+          setTimeout(() => self.doUpload(e.target.result), 100);
+        };
+        reader.readAsDataURL(res);
+      } catch (error) {
+        this.$snackbar("Đường dẫn không hợp lệ", "Error");
+        console.error(error);
+      } finally {
+        this.loading = false;
+      }
     },
     doUpload() {
       const image = document.getElementById("image");
@@ -340,102 +410,103 @@ export default {
       ctx.drawImage(image, 0, 0);
       if (canvas) canvas.toBlob((blod) => this.saveAs(blod));
     },
-    async saveAs(blod) {
-      var form = new FormData();
+    async saveAs(blob) {
+      const form = new FormData();
       const fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + this.$id() + ".png";
+
       form.append("filename", fileName);
       form.append("name", `${this.$id()}.png`);
-      form.append("file", blod);
+      form.append("file", blob);
       form.append("type", "image");
       form.append("size", 100);
       form.append("user", this.$store.login.id);
-      let result = await this.$insertapi("upload", { data: form });
+
+      const result = await this.$insertapi("upload", { data: form });
       if (result === "error") return;
       this.updateImage(result.rows[0]);
       this.showUrl = false;
     },
     async uploadImage(file) {
       this.loading = true;
-      let result = await this.$insertapi("upload", { data: file.form });
+      const result = await this.$insertapi("upload", { data: file.form });
       this.data.splice(0, 0, result.rows[0]);
       this.loading = false;
     },
     getData(i) {
-      if (this.type === "video") {
-        var list = this.data.slice(i * 5, i * 5 + 5);
-        for (let index = 0; index < 5; index++) {
-          if (list.length < index + 1) list.push({ file: undefined });
-        }
-      } else {
-        list = this.data.slice(i * 6, i * 6 + 6);
-        for (let index = 0; index < 6; index++) {
-          if (list.length < index + 1) list.push({ file: undefined });
-        }
+      const list = this.data.slice(i * 5, i * 5 + 5);
+      for (let index = 0; index < 5; index++) {
+        if (list.length < index + 1) list.push({ file: undefined });
       }
       return list;
     },
-    selectMedia(v) {
-      let copy = this.media ? this.$copy(this.media) : {};
+    async selectMedia(v) {
+      const copy = this.media ? this.$copy(this.media) : {};
       copy.type = "image";
       copy.open = false;
       copy.select = v;
       this.media = copy;
-      let row = this.$copy(v);
+      const row = this.$copy(v);
+
       if (this.source) {
-        let params = { name: v.file, type: "file" };
-        this.$axios
-          .get(`${this.path}download/`, {
-            params: params,
-            responseType: "blob",
-          })
-          .then(function (response) {
-            var reader = new window.FileReader();
-            reader.onload = (e) => {
-              fetch(e.target.result)
-                .then((res) => res.blob())
-                .then((blob) => {
-                  const file = new File([blob], v.name, { type: "image/png" });
-                  row.source = { file: file };
-                });
-            };
-            reader.readAsDataURL(response.data);
-          });
+        const res = await $fetch(`${this.path}download/`, {
+          params: {
+            name: v.file,
+            type: "file",
+          },
+        });
+
+        const reader = new window.FileReader();
+        reader.onload = (e) => {
+          fetch(e.target.result)
+            .then((res) => res.blob())
+            .then((blob) => {
+              const file = new File([blob], v.name, { type: "image/png" });
+              row.source = { file };
+            });
+        };
+        reader.readAsDataURL(res);
       }
       this.$emit("modalevent", { name: "selectimage", data: row });
     },
-    editImage(v) {
+    async editImage(v) {
       this.loading = true;
       this.selected = v;
-      let self = this;
-      let params = { name: v.file, type: "file" };
-      this.$axios.get(`${this.path}download/`, { params: params, responseType: "blob" }).then(function (response) {
-        var reader = new window.FileReader();
-        reader.onload = (e) => {
-          self.image = e.target.result;
-          self.showmodal = {
-            component: "media/CropImage",
-            width: "65%",
-            title: "Cắt hình ảnh",
-            vbind: { selected: self.selected, image: self.image },
-          };
-        };
-        reader.readAsDataURL(response.data);
-        self.loading = false;
+      const self = this;
+
+      const res = await $fetch(`${this.path}download/`, {
+        params: {
+          name: v.file,
+          type: "file",
+        },
       });
+
+      const reader = new window.FileReader();
+      reader.onload = (e) => {
+        self.image = e.target.result;
+        self.showmodal = {
+          component: "media/CropImage",
+          title: "Cắt hình ảnh",
+          width: "90%",
+          height: "auto",
+          vbind: { selected: self.selected, image: self.image },
+        };
+      };
+      reader.readAsDataURL(res);
+      self.loading = false;
     },
     copyMedia(v) {
       this.$copyToClipboard(`${this.path}download/?name=${v.file}`);
     },
     deleteMedia(v, name) {
       let self = this;
-      var remove = async function () {
-        let result = await self.$deleteapi(name, v.id);
-        let idx = self.data.findIndex((x) => x.id === v.id);
+      const remove = async function () {
+        await self.$deleteapi(name, v.id);
+        const idx = self.data.findIndex((x) => x.id === v.id);
         self.$delete(self.data, idx);
       };
       this.$buefy.dialog.confirm({
         message: "Bạn muốn xóa file: " + v.file,
-        onConfirm: () => remove(),
+        onConfirm: remove,
       });
     },
     updateImage(v) {
@@ -445,3 +516,10 @@ export default {
   },
 };
 </script>
+<style scoped>
+.tabs {
+  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
+}
+</style>
diff --git a/app/components/media/Picture.vue b/app/components/media/Picture.vue
index 4b7a056..85ba19c 100644
--- a/app/components/media/Picture.vue
+++ b/app/components/media/Picture.vue
@@ -1,39 +1,55 @@
 <template>
-  <div>
+  <div class="is-flex is-gap-1">
     <div
-      class="image-container"
       v-if="picture"
+      class="image is-128x128 relative"
     >
-      <img
-        :src="picture"
-        style="max-height: 250px !important"
-      />
-      <div class="image-label">
-        <span
-          class="is-clickable"
-          @click="remove()"
+      <NuxtImg :src="picture" />
+      <div class="absolute top-2 right-2">
+        <button
+          class="button is-small is-light is-danger"
+          @click="remove"
         >
-          <SvgIcon v-bind="{ name: 'bin.svg', type: 'danger', size: 30 }"></SvgIcon>
-        </span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:delete-outline-rounded"
+              :size="20"
+            />
+          </span>
+        </button>
       </div>
     </div>
     <div
-      style="width: 130px; border-style: dashed; border-width: 1px"
       v-else
+      @click="openImage()"
+      class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
+      style="border: 1px dashed var(--bulma-grey-light)"
     >
-      <a @click="openImage()"><SvgIcon v-bind="{ name: 'image.svg', type: 'grey', size: 120 }"></SvgIcon></a>
+      <Icon
+        name="material-symbols:add-photo-alternate-outline-rounded"
+        :size="50"
+        class="has-text-grey-light"
+      />
     </div>
-    <div class="mt-2">
-      <a @click="openCamera()">
-        <SvgIcon v-bind="{ name: 'camera.svg', type: 'dark', size: 28 }"></SvgIcon>
-      </a>
+    <div>
+      <button
+        class="button is-medium is-light is-primary"
+        @click="openCamera()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:photo-camera-outline-rounded"
+            :size="24"
+          />
+        </span>
+      </button>
     </div>
     <Modal
       @close="showmodal = undefined"
       v-bind="showmodal"
       v-if="showmodal"
       @selectimage="selectImage"
-    ></Modal>
+    />
   </div>
 </template>
 <script>
@@ -58,8 +74,8 @@ export default {
     },
     selectImage(files) {
       this.showmodal = undefined;
-      let v = files;
-      this.picture = `${this.$path()}download/?name=${v.file__file || v.file}&type=file`;
+      const v = files;
+      this.picture = `${this.$getpath()}download/?name=${v.file__file || v.file}&type=file`;
       v.image = this.$copy(this.picture);
       this.vfile = v;
       this.$emit("picture", v);
@@ -71,8 +87,8 @@ export default {
     openCamera() {
       this.showmodal = {
         component: "media/Camera",
-        title: "Chụp ảnh",
-        width: "650px",
+        width: "700px",
+        height: "auto",
       };
     },
   },
diff --git a/app/components/parameter/ImportData.vue b/app/components/parameter/ImportData.vue
index eb172b0..fc65410 100644
--- a/app/components/parameter/ImportData.vue
+++ b/app/components/parameter/ImportData.vue
@@ -199,7 +199,7 @@ export default {
       if (files.length === 0) return;
 
       const file = files.item(0);
-      let thefile = this.$upload(file, "file", 1);
+      const thefile = this.$upload(file, "file", 1);
 
       if (thefile.error) {
         this.$snackbar(thefile.text, "Error");
@@ -214,7 +214,7 @@ export default {
         this.msgInfo.push({ message, type: "error" });
         return (this.isloading = false);
       }
-      let result = await this.$insertapi("upload", { data: thefile.form, notify: false });
+      const result = await this.$insertapi("upload", { data: thefile.form, notify: false });
       if (result === "error") {
         const message = this.$find(
           this.$store.syspara,
diff --git a/app/plugins/01-common.js b/app/plugins/01-common.js
index 544a199..3d72428 100644
--- a/app/plugins/01-common.js
+++ b/app/plugins/01-common.js
@@ -140,26 +140,26 @@ export default defineNuxtPlugin((nuxtApp) => {
         text: "Kích thước video phải dưới 1GB",
       };
     }
-    let data = new FormData();
-    let fileName = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + file.name;
-    data.append("name", file.name);
-    data.append("filename", fileName);
-    data.append("file", file);
-    data.append("type", type);
-    data.append("size", file.size);
-    data.append("user", user);
-    data.append("convert", convert);
+    const form = new FormData();
+    const filename = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + file.name;
+    form.append("name", file.name);
+    form.append("filename", filename);
+    form.append("file", file);
+    form.append("type", type);
+    form.append("size", file.size);
+    form.append("user", user);
+    form.append("convert", convert);
     // Thêm quality nếu convert được bật và quality được cung cấp
     if (convert && quality !== null && quality !== undefined) {
-      data.append("quality", quality);
+      form.append("quality", quality);
     }
     return {
-      form: data,
-      type: type,
-      size: file.size,
-      file: file,
+      form,
+      type,
+      file,
+      filename,
       name: file.name,
-      filename: fileName,
+      size: file.size,
     };
   };