diff --git a/src/renderer/src/components/NewThread.vue b/src/renderer/src/components/NewThread.vue
index 5121074a8..c1e55dab5 100644
--- a/src/renderer/src/components/NewThread.vue
+++ b/src/renderer/src/components/NewThread.vue
@@ -64,8 +64,14 @@
                 />
               </PopoverContent>
             </Popover>
-            <Popover v-model:open="settingsPopoverOpen" @update:open="handleSettingsPopoverUpdate">
-              <PopoverTrigger as-child>
+            <ScrollablePopover
+              v-model:open="settingsPopoverOpen"
+              @update:open="handleSettingsPopoverUpdate"
+              align="start"
+              content-class="w-80"
+              :enable-scrollable="true"
+            >
+              <template #trigger>
                 <Button
                   class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300"
                   :class="{
@@ -77,21 +83,19 @@
                 >
                   <Icon icon="lucide:settings-2" class="w-4 h-4" />
                 </Button>
-              </PopoverTrigger>
-              <PopoverContent align="start" class="p-0 w-80">
-                <ChatConfig
-                  v-model:temperature="temperature"
-                  v-model:context-length="contextLength"
-                  v-model:max-tokens="maxTokens"
-                  v-model:system-prompt="systemPrompt"
-                  v-model:artifacts="artifacts"
-                  :context-length-limit="contextLengthLimit"
-                  :max-tokens-limit="maxTokensLimit"
-                  :model-id="activeModel?.id"
-                  :provider-id="activeModel?.providerId"
-                />
-              </PopoverContent>
-            </Popover>
+              </template>
+              <ChatConfig
+                v-model:temperature="temperature"
+                v-model:context-length="contextLength"
+                v-model:max-tokens="maxTokens"
+                v-model:system-prompt="systemPrompt"
+                v-model:artifacts="artifacts"
+                :context-length-limit="contextLengthLimit"
+                :max-tokens-limit="maxTokensLimit"
+                :model-id="activeModel?.id"
+                :provider-id="activeModel?.providerId"
+              />
+            </ScrollablePopover>
           </div>
         </template>
       </ChatInput>
@@ -104,6 +108,7 @@
 import { useI18n } from 'vue-i18n'
 import ChatInput from './ChatInput.vue'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import ScrollablePopover from './ScrollablePopover.vue'
 import { Button } from '@/components/ui/button'
 import ModelIcon from './icons/ModelIcon.vue'
 import { Badge } from '@/components/ui/badge'
diff --git a/src/renderer/src/components/ScrollablePopover.vue b/src/renderer/src/components/ScrollablePopover.vue
new file mode 100644
index 000000000..7afa43c45
--- /dev/null
+++ b/src/renderer/src/components/ScrollablePopover.vue
@@ -0,0 +1,34 @@
+<template>
+  <Popover v-bind="$attrs">
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverContent
+      :align="align"
+      :class="cn('p-0', contentClass, enableScrollable && 'max-h-96 overflow-hidden')"
+    >
+      <div v-if="enableScrollable" class="max-h-96 overflow-y-auto">
+        <slot />
+      </div>
+      <slot v-else />
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+interface ScrollablePopoverProps {
+  align?: 'start' | 'center' | 'end'
+  enableScrollable?: boolean
+  contentClass?: HTMLAttributes['class']
+}
+
+withDefaults(defineProps<ScrollablePopoverProps>(), {
+  align: 'center',
+  enableScrollable: false,
+  contentClass: ''
+})
+</script>
diff --git a/src/renderer/src/components/TitleView.vue b/src/renderer/src/components/TitleView.vue
index ba27aba6f..7618af8b0 100644
--- a/src/renderer/src/components/TitleView.vue
+++ b/src/renderer/src/components/TitleView.vue
@@ -43,30 +43,28 @@
     </div>
 
     <div class="flex items-center gap-2">
-      <Popover>
-        <PopoverTrigger as-child>
+      <ScrollablePopover align="end" content-class="w-80" :enable-scrollable="true">
+        <template #trigger>
           <Button class="w-7 h-7 rounded-md" size="icon" variant="outline">
             <Icon icon="lucide:settings-2" class="w-4 h-4" />
           </Button>
-        </PopoverTrigger>
-        <PopoverContent align="end" class="p-0 w-80">
-          <ChatConfig
-            v-model:system-prompt="systemPrompt"
-            :temperature="temperature"
-            :context-length="contextLength"
-            :max-tokens="maxTokens"
-            :artifacts="artifacts"
-            :thinking-budget="thinkingBudget"
-            :model-id="chatStore.chatConfig.modelId"
-            :provider-id="chatStore.chatConfig.providerId"
-            @update:temperature="updateTemperature"
-            @update:context-length="updateContextLength"
-            @update:max-tokens="updateMaxTokens"
-            @update:artifacts="updateArtifacts"
-            @update:thinking-budget="updateThinkingBudget"
-          />
-        </PopoverContent>
-      </Popover>
+        </template>
+        <ChatConfig
+          v-model:system-prompt="systemPrompt"
+          :temperature="temperature"
+          :context-length="contextLength"
+          :max-tokens="maxTokens"
+          :artifacts="artifacts"
+          :thinking-budget="thinkingBudget"
+          :model-id="chatStore.chatConfig.modelId"
+          :provider-id="chatStore.chatConfig.providerId"
+          @update:temperature="updateTemperature"
+          @update:context-length="updateContextLength"
+          @update:max-tokens="updateMaxTokens"
+          @update:artifacts="updateArtifacts"
+          @update:thinking-budget="updateThinkingBudget"
+        />
+      </ScrollablePopover>
     </div>
   </div>
 </template>
@@ -77,6 +75,7 @@ import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import ScrollablePopover from './ScrollablePopover.vue'
 import ChatConfig from './ChatConfig.vue'
 import ModelSelect from './ModelSelect.vue'
 import ModelIcon from './icons/ModelIcon.vue'
diff --git a/src/renderer/src/components/ui/popover/PopoverContent.vue b/src/renderer/src/components/ui/popover/PopoverContent.vue
index 10ae0adde..6744b583b 100644
--- a/src/renderer/src/components/ui/popover/PopoverContent.vue
+++ b/src/renderer/src/components/ui/popover/PopoverContent.vue
@@ -10,7 +10,9 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PopoverContentProps & {
+    class?: HTMLAttributes['class']
+  }>(),
   {
     align: 'center',
     sideOffset: 4