diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index c142e8e270..897715b2b6 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -60,6 +60,7 @@
   --assistants-width: 275px;
   --topic-list-width: 275px;
   --settings-width: 250px;
+  --scrollbar-width: 5px;
 
   --chat-background: #111111;
   --chat-background-user: #28b561;
diff --git a/src/renderer/src/components/Popups/FloatingSidebar.tsx b/src/renderer/src/components/Popups/FloatingSidebar.tsx
index d5a576309d..1c281bc0d2 100644
--- a/src/renderer/src/components/Popups/FloatingSidebar.tsx
+++ b/src/renderer/src/components/Popups/FloatingSidebar.tsx
@@ -5,8 +5,6 @@ import { FC, useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styled from 'styled-components'
 
-import Scrollbar from '../Scrollbar'
-
 interface Props {
   children: React.ReactNode
   activeAssistant: Assistant
@@ -55,7 +53,8 @@ const FloatingSidebar: FC<Props> = ({
         forceToSeeAllTab={true}
         style={{
           background: 'transparent',
-          border: 'none'
+          border: 'none',
+          maxHeight: maxHeight
         }}
       />
     </PopoverContent>
@@ -81,9 +80,8 @@ const FloatingSidebar: FC<Props> = ({
   )
 }
 
-const PopoverContent = styled(Scrollbar)<{ maxHeight: number }>`
+const PopoverContent = styled.div<{ maxHeight: number }>`
   max-height: ${(props) => props.maxHeight}px;
-  overflow-y: auto;
 `
 
 export default FloatingSidebar
diff --git a/src/renderer/src/pages/home/Chat.tsx b/src/renderer/src/pages/home/Chat.tsx
index 1c82a46b03..c2ee47d43c 100644
--- a/src/renderer/src/pages/home/Chat.tsx
+++ b/src/renderer/src/pages/home/Chat.tsx
@@ -36,9 +36,9 @@ const Chat: FC<Props> = (props) => {
 
   const maxWidth = useMemo(() => {
     const showRightTopics = showTopics && topicPosition === 'right'
-    const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
-    const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
+    const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
+    const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
   }, [showAssistants, showTopics, topicPosition])
 
   useHotkeys('esc', () => {
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index 8270c192c9..52e4abe7b5 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -86,9 +86,9 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
 
   const maxWidth = useMemo(() => {
     const showRightTopics = showTopics && topicPosition === 'right'
-    const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
-    const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
+    const minusAssistantsWidth = showAssistants ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
+    const minusRightTopicsWidth = showRightTopics ? `- var(--assistants-width) - var(--scrollbar-width)` : ''
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
   }, [showAssistants, showTopics, topicPosition])
 
   const scrollToBottom = useCallback(() => {