diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 5df12291bf..090af13ca3 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -2,7 +2,12 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container absolute right-0 bottom-[54px] z-1000 flex"
+    :class="
+      cn(
+        'minimap-main-container absolute right-0 bottom-[54px] z-1000 flex',
+        isMobile ? 'flex-col' : 'flex-row'
+      )
+    "
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -12,6 +17,7 @@
       :show-groups="showGroups"
       :render-bypass="renderBypass"
       :render-error="renderError"
+      :is-mobile="isMobile"
       @update-option="updateOption"
     />
 
@@ -70,14 +76,18 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import MiniMapPanel from './MiniMapPanel.vue'
 
+const isMobile = useBreakpoints(breakpointsTailwind).smaller('md')
+
 const commandStore = useCommandStore()
 const minimapRef = ref<HTMLDivElement>()
 const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index f32a7c3a31..8d3f97ed6c 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,6 +1,11 @@
 <template>
   <div
-    class="minimap-panel mr-2 flex flex-col gap-2 bg-comfy-menu-bg p-3 text-sm shadow-interface"
+    :class="
+      cn(
+        'minimap-panel flex flex-col gap-2 bg-comfy-menu-bg p-3 text-sm shadow-interface',
+        isMobile ? 'mb-2' : 'mr-2'
+      )
+    "
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">
@@ -79,9 +84,10 @@
 
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, Ref } from 'vue'
 
 import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
+import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
   panelStyles: CSSProperties
@@ -90,6 +96,7 @@ defineProps<{
   showGroups: boolean
   renderBypass: boolean
   renderError: boolean
+  isMobile: Ref<boolean> | boolean
 }>()
 
 defineEmits<{