diff --git a/src/components/itembox/tib-calendar-material.vue b/src/components/itembox/tib-calendar-material.vue
new file mode 100644
index 00000000..187c447a
--- /dev/null
+++ b/src/components/itembox/tib-calendar-material.vue
@@ -0,0 +1,23 @@
+<template>
+  <TItemBox2 v-model="box" />
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TItemBox2, { TItemBox2Data } from "../main/t-itembox-2.vue";
+
+interface TMiniWeaponProps {
+  item: TGApp.App.Calendar.Material;
+}
+const props = defineProps<TMiniWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: props.item.bg,
+    icon: props.item.icon,
+    star: props.item.starIcon,
+    width: "150px",
+    height: "45px",
+    name: props.item.name,
+  } as TItemBox2Data;
+});
+</script>
diff --git a/src/components/main/t-itembox-2.vue b/src/components/main/t-itembox-2.vue
new file mode 100644
index 00000000..fd1396c7
--- /dev/null
+++ b/src/components/main/t-itembox-2.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="tib2-box">
+    <div class="tib2-left">
+      <slot name="left">
+        <div v-if="props.modelValue.bg !== undefined" class="tib2-bg">
+          <img :src="props.modelValue.bg" alt="bg">
+        </div>
+        <div class="tib2-icon">
+          <img :src="props.modelValue.icon" alt="icon">
+        </div>
+        <div v-if="props.modelValue.star !== undefined" class="tib2-star">
+          <img :src="props.modelValue.star" alt="element">
+        </div>
+      </slot>
+    </div>
+    <div class="tib2-right">
+      {{ props.modelValue.name }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+export interface TItemBox2Data {
+  width: string,
+  height: string,
+  bg?: string,
+  icon: string,
+  star?: string,
+  name: string,
+}
+
+interface TItemBox2Props {
+  modelValue: TItemBox2Data,
+}
+
+const props = defineProps<TItemBox2Props>();
+</script>
+<style lang="css" scoped>
+.tib2-box {
+  position: relative;
+  height: v-bind(props["modelValue"]["height"]);
+  width: v-bind(props["modelValue"]["width"]);
+  display: flex;
+  border-radius: 5px;
+  background: rgb(20 20 20 / 30%);
+}
+
+.tib2-left {
+  width: v-bind(props["modelValue"]["height"]);
+  height: v-bind(props["modelValue"]["height"]);
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  overflow: hidden;
+}
+
+.tib2-bg,
+.tib2-icon {
+  position: absolute;
+  top: 0;
+  width: v-bind(props["modelValue"]["height"]);
+  height: v-bind(props["modelValue"]["height"]);
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  overflow: hidden;
+}
+
+.tib2-bg img,
+.tib2-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib2-star {
+  position: absolute;
+  bottom: -5px;
+  width: v-bind(props["modelValue"]["height"]);
+  height: auto;
+}
+
+.tib2-star img {
+  width: 100%;
+}
+
+.tib2-right {
+  margin-left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(0.2 * v-bind(props["modelValue"]["height"]));
+  color: var(--common-color-white);
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/mini/t-calendar-material.vue b/src/components/mini/t-calendar-material.vue
deleted file mode 100644
index dd6929d6..00000000
--- a/src/components/mini/t-calendar-material.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="card-box">
-    <!-- 左侧图标 -->
-    <div class="card-left">
-      <!-- 底层背景图 -->
-      <div class="card-bg">
-        <img :src="item.bg" alt="bg">
-      </div>
-      <!-- 中层内容图 -->
-      <div class="card-icon">
-        <img :src="item.icon" alt="icon">
-      </div>
-      <!-- 上层星级 -->
-      <div class="card-star">
-        <img :src="item.starIcon" alt="element">
-      </div>
-    </div>
-    <!-- 右侧内容 -->
-    <div class="card-name">
-      {{ item.name }}
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-interface TMiniWeaponProps {
-  item: TGApp.App.Calendar.Material;
-}
-defineProps<TMiniWeaponProps>();
-</script>
-<style lang="css" scoped>
-.card-box {
-    position: relative;
-    width: 150px;
-    height: 45px;
-		display: flex;
-		flex-direction: row;
-		border-radius: 5px;
-    background: rgb(20 20 20 / 30%);
-}
-
-.card-left {
-		position: relative;
-		width: 45px;
-		height: 45px;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-		overflow: hidden;
-}
-
-.card-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 45px;
-    height: 45px;
-    border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
-    overflow: hidden;
-}
-
-.card-bg img {
-    width: 45px;
-    height: 45px;
-    object-fit: cover;
-}
-
-.card-icon {
-    position: relative;
-    width: 45px;
-    height: 45px;
-    border-radius: 5px;
-}
-
-.card-icon img {
-		padding: 2px;
-    width: 41px;
-    height: 41px;
-}
-
-.card-star {
-    position: absolute;
-    bottom: 0;
-    width: 45px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-		background: rgb(0 0 0 / 30%);
-		border-bottom-left-radius: 5px;
-}
-
-.card-star img {
-    width: 45px;
-		height: auto;
-}
-
-.card-name {
-		width: calc(100% - 50px);
-		height: 45px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-left: 5px;
-		position: relative;
-    color: #fff;
-		font-size: 12px;
-    font-family: Genshin-Light, serif;
-}
-</style>
diff --git a/src/components/overlay/to-calendar.vue b/src/components/overlay/to-calendar.vue
index e802a408..f66b961c 100644
--- a/src/components/overlay/to-calendar.vue
+++ b/src/components/overlay/to-calendar.vue
@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel">
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
     <div class="toc-box">
       <div class="box-div">
         <div class="toc-top">
@@ -8,7 +8,7 @@
             <TibCalendarWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" style="cursor: default" />
           </div>
           <div class="toc-material-grid">
-            <TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
+            <TibCalendarMaterial v-for="item in itemVal.materials" :item="item" />
           </div>
         </div>
         <img src="/source/UI/item-line.webp" alt="line" class="toc-line">
@@ -45,9 +45,9 @@
 // vue
 import { computed, ref } from "vue";
 import TOverlay from "../main/t-overlay.vue";
-import TCalendarMaterial from "../mini/t-calendar-material.vue";
 import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
 import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
+import TibCalendarMaterial from "../itembox/tib-calendar-material.vue";
 // utils
 import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
 import { createTGWindow } from "../../utils/TGWindow";