diff --git a/src/renderer/windows/main/pages/HomePage.vue b/src/renderer/windows/main/pages/HomePage.vue
index b3b0ed2b8..d4ab8a87f 100644
--- a/src/renderer/windows/main/pages/HomePage.vue
+++ b/src/renderer/windows/main/pages/HomePage.vue
@@ -1,11 +1,18 @@
 <template>
-  <v-layout
-    row
-    wrap
-  >
+  <v-layout class="home-page" row wrap>
     <v-icon
       v-ripple
-      style="position: absolute; right: 0; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
+      style="
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 2;
+        margin: 0;
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 2px;
+        user-select: none;
+      "
       dark
       @click="quit"
     >
@@ -13,7 +20,17 @@
     </v-icon>
     <v-icon
       v-ripple
-      style="position: absolute; right: 44px; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
+      style="
+        position: absolute;
+        right: 44px;
+        top: 0;
+        z-index: 2;
+        margin: 0;
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 2px;
+        user-select: none;
+      "
       dark
       @click="showFeedbackDialog"
     >
@@ -21,7 +38,17 @@
     </v-icon>
     <v-icon
       v-ripple
-      style="position: absolute; right: 88px; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
+      style="
+        position: absolute;
+        right: 88px;
+        top: 0;
+        z-index: 2;
+        margin: 0;
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 2px;
+        user-select: none;
+      "
       dark
       @click="showInstanceFolder"
     >
@@ -36,40 +63,18 @@
       <home-header />
     </v-flex>
 
-    <v-flex
-      v-if="isServer"
-      d-flex
-      xs12
-      style="margin: 40px;"
-    >
+    <v-flex v-if="isServer" d-flex xs12 style="margin: 40px">
       <server-status-bar />
     </v-flex>
 
-    <v-tooltip top>
-      <template v-slot:activator="{ on }">
-        <v-btn
-          style="position: absolute; left: 20px; bottom: 10px; -webkit-user-drag: none"
-          flat
-          icon
-          dark
-          to="/base-setting"
-          v-on="on"
-        >
-          <v-icon dark>more_vert</v-icon>
-        </v-btn>
-      </template>
-      {{ $t('profile.setting') }}
-    </v-tooltip>
+    <more-speed-dial :refreshing="refreshing" />
 
-    <export-speed-dial
-      :refreshing="refreshing"
-      @show="showExport"
-    />
+    <export-speed-dial :refreshing="refreshing" @show="showExport" />
 
     <v-tooltip top>
       <template v-slot:activator="{ on }">
         <v-btn
-          style="position: absolute; left: 140px; bottom: 10px; "
+          style="position: absolute; left: 140px; bottom: 10px"
           flat
           icon
           dark
@@ -79,7 +84,7 @@
           <v-icon dark>subtitles</v-icon>
         </v-btn>
       </template>
-      {{ $t('profile.logsCrashes.title') }}
+      {{ $t("profile.logsCrashes.title") }}
     </v-tooltip>
 
     <problems-bar />
@@ -135,13 +140,8 @@
       class="launch-button"
       @click="launch"
     >
-      {{ $t('launch.launch') }}
-      <v-icon
-        v-if="launchStatus === 'ready'"
-        right
-      >
-        play_arrow
-      </v-icon>
+      {{ $t("launch.launch") }}
+      <v-icon v-if="launchStatus === 'ready'" right> play_arrow </v-icon>
       <v-progress-circular
         v-else
         class="v-icon--right"
@@ -150,16 +150,16 @@
         :width="2"
       />
     </v-btn>
-    <log-dialog
-      v-model="isLogDialogShown"
-      :hide="hideLogDialog"
-    />
+    <log-dialog v-model="isLogDialogShown" :hide="hideLogDialog" />
     <game-exit-dialog />
     <feedback-dialog />
     <export-dialog
       :value="isExportingCurseforge || isExportingModpack"
       :is-curseforge="isExportingCurseforge"
-      @input="isExportingModpack = false; isExportingCurseforge = false"
+      @input="
+        isExportingModpack = false;
+        isExportingCurseforge = false;
+      "
     />
   </v-layout>
 </template>
@@ -186,6 +186,7 @@ import ProblemsBar from './HomePageProblemsBar.vue';
 import ServerStatusBar from './HomePageServerStatusBar.vue';
 import ExportDialog from './HomePageExportDialog.vue';
 import ExportSpeedDial from './HomePageExportSpeedDial.vue';
+import MoreSpeedDial from './HomePageMoreSpeedDial.vue';
 
 function setupLaunch() {
   const { launch, status: launchStatus } = useLaunch();
@@ -228,6 +229,7 @@ export default defineComponent({
     FeedbackDialog,
     ExportDialog,
     ExportSpeedDial,
+    MoreSpeedDial,
   },
   setup() {
     const { $t } = useI18n();
@@ -332,4 +334,10 @@ export default defineComponent({
   max-width: 159px;
   min-width: 159px;
 }
+.home-page .more-button {
+  position: absolute;
+  left: 20px;
+  bottom: 10px;
+  -webkit-user-drag: none;
+}
 </style>
diff --git a/src/renderer/windows/main/pages/HomePageMoreSpeedDial.vue b/src/renderer/windows/main/pages/HomePageMoreSpeedDial.vue
new file mode 100644
index 000000000..79e676049
--- /dev/null
+++ b/src/renderer/windows/main/pages/HomePageMoreSpeedDial.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-tooltip :close-delay="0" right>
+    <template v-slot:activator="{ on }">
+      <v-speed-dial
+        open-on-hover
+        class="more-button"
+        direction="top"
+        transition="slide-y-reverse-transition"
+      >
+        <template v-slot:activator>
+          <v-btn
+            flat
+            icon
+            to="/base-setting"
+            dark
+            :loading="refreshing"
+            v-on="on"
+            @click="$emit('show', 'normal')"
+          >
+            <v-icon dark>more_vert</v-icon>
+          </v-btn>
+        </template>
+        <v-btn
+          flat
+          icon
+          dark
+          :loading="refreshing"
+          to="/advanced-setting"
+          v-on="on"
+          @mouseenter="enter($t('profile.launchingDetail'))"
+        >
+          <v-icon dark>settings_applications</v-icon>
+        </v-btn>
+        <v-btn
+          flat
+          icon
+          dark
+          :loading="refreshing"
+          to="/mod-setting"
+          v-on="on"
+          @mouseenter="enter($tc('mod.name', 2) )"
+        >
+          <v-icon dark style="margin-left: 24px">extensions</v-icon>
+        </v-btn>
+        <v-btn
+          flat
+          icon
+          dark
+          :loading="refreshing"
+          to="/resource-pack-setting"
+          v-on="on"
+          @click="$emit('show', 'resourcepacks')"
+          @mouseenter="enter($tc('resourcepack.name', 2) )"
+        >
+          <v-icon dark>palette</v-icon>
+        </v-btn>
+        <v-btn
+          flat
+          icon
+          dark
+          :loading="refreshing"
+          to="/save"
+          v-on="on"
+          @click="$emit('show', 'saves')"
+          @mouseenter="enter($tc('save.name', 2) )"
+        >
+          <v-icon dark>map</v-icon>
+        </v-btn>
+      </v-speed-dial>
+    </template>
+    {{ text }}
+  </v-tooltip>
+</template>
+
+<script lang=ts>
+import { defineComponent, reactive, toRefs } from '@vue/composition-api';
+import { useI18n } from '@/hooks';
+
+export default defineComponent({
+  props: {
+    refreshing: Boolean,
+  },
+  setup() {
+    const { $t } = useI18n();
+    const data = reactive({ text: $t('profile.modpack.export') });
+    const enter = (text: string) => {
+      setTimeout(() => { data.text = text; }, 100);
+    };
+    return {
+      ...toRefs(data),
+      enter,
+    };
+  },
+});
+</script>