diff --git a/src/core/main/setting.ts b/src/core/main/setting.ts
index b5c6f6f..aa5af11 100644
--- a/src/core/main/setting.ts
+++ b/src/core/main/setting.ts
@@ -394,18 +394,20 @@ mainSetting
     );
 
 loading.once('coreInit', () => {
+    const get = core.getLocalStorage;
     mainSetting.reset({
         'screen.fullscreen': false,
-        'screen.halo': !!core.getLocalStorage('showHalo', true),
-        'screen.frag': !!core.getLocalStorage('frag', true),
-        'screen.itemDetail': !!core.getLocalStorage('itemDetail', true),
-        'screen.transition': !!core.getLocalStorage('transition', false),
-        'screen.antiAlias': !!core.getLocalStorage('antiAlias', false),
-        'screen.fontSize': core.getLocalStorage('fontSize', 16),
-        'screen.smoothView': !!core.getLocalStorage('smoothView', true),
-        'action.fixed': !!core.getLocalStorage('fixed', true),
-        'utils.betterLoad': !!core.getLocalStorage('betterLoad', true),
-        'utils.autoScale': !!core.getLocalStorage('autoScale', true)
+        'screen.halo': !!get('showHalo', true),
+        'screen.frag': !!get('frag', true),
+        'screen.itemDetail': !!get('itemDetail', true),
+        'screen.transition': !!get('transition', false),
+        'screen.antiAlias': !!get('antiAlias', false),
+        'screen.fontSize': get('fontSize', 16),
+        'screen.smoothView': !!get('smoothView', true),
+        'screen.criticalGem': !!get('criticalGem', false),
+        'action.fixed': !!get('fixed', true),
+        'utils.betterLoad': !!get('betterLoad', true),
+        'utils.autoScale': !!get('autoScale', true)
     });
 });
 
diff --git a/src/ui/settings.vue b/src/ui/settings.vue
index b2533c3..3c539aa 100644
--- a/src/ui/settings.vue
+++ b/src/ui/settings.vue
@@ -21,7 +21,9 @@
                                     :selected="item === info.item"
                                     @click="click(item.key, i, item)"
                                 >
-                                    <span>{{ item.name }}</span>
+                                    <span class="setting-name">{{
+                                        item.name
+                                    }}</span>
                                     <span
                                         :selected="item === info.item"
                                         class="setting-cascade"
@@ -259,6 +261,8 @@ onUnmounted(() => {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
+        width: 100%;
+        overflow: hidden;
     }
 
     .setting-cascade {
@@ -273,9 +277,17 @@ onUnmounted(() => {
         color: cyan;
     }
 
+    .setting-name {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 70%;
+        overflow: hidden;
+    }
+
     .setting-value {
         margin-right: 10px;
         color: rgb(242, 255, 101);
+        white-space: nowrap;
     }
 }