diff --git a/src/renderer/src/components/Scrollbar/index.tsx b/src/renderer/src/components/Scrollbar/index.tsx
index 0c45f783..670e3789 100644
--- a/src/renderer/src/components/Scrollbar/index.tsx
+++ b/src/renderer/src/components/Scrollbar/index.tsx
@@ -1,5 +1,5 @@
 import { throttle } from 'lodash'
-import { FC, forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
@@ -7,7 +7,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   ref?: any
 }
 
-const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+const Scrollbar: FC<Props> = ({ ref, ...props }: Props & { ref?: React.RefObject<HTMLDivElement | null> }) => {
   const [isScrolling, setIsScrolling] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -35,7 +35,7 @@ const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
       {props.children}
     </Container>
   )
-})
+}
 
 const Container = styled.div<{ isScrolling: boolean; right?: boolean }>`
   overflow-y: auto;
diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index ec4f32f9..c85a13eb 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
@@ -153,7 +153,6 @@ const Container = styled.div`
   justify-content: space-between;
   padding: 7px 10px;
   position: relative;
-  margin: 0 10px;
   font-family: Ubuntu;
   border-radius: var(--list-item-border-radius);
   border: 0.5px solid transparent;
diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
index 4b3312ac..f2455a8a 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
@@ -78,8 +78,7 @@ const Assistants: FC<AssistantsTabProps> = ({
 const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
-  padding-top: 11px;
-  user-select: none;
+  padding: 10px;
 `
 
 const AssistantAddItem = styled.div`
@@ -88,7 +87,6 @@ const AssistantAddItem = styled.div`
   justify-content: space-between;
   padding: 7px 12px;
   position: relative;
-  margin: 0 10px;
   padding-right: 35px;
   font-family: Ubuntu;
   border-radius: var(--list-item-border-radius);
diff --git a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
index 514160f3..6d68ac28 100644
--- a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
@@ -410,14 +410,11 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
 const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
-  padding-top: 11px;
-  user-select: none;
+  padding: 10px;
 `
 
 const TopicListItem = styled.div`
   padding: 7px 12px;
-  margin-left: 10px;
-  margin-right: 4px;
   border-radius: var(--list-item-border-radius);
   font-family: Ubuntu;
   font-size: 13px;
@@ -429,6 +426,7 @@ const TopicListItem = styled.div`
   cursor: pointer;
   border: 0.5px solid transparent;
   position: relative;
+  width: calc(var(--assistants-width) - 20px);
   .menu {
     opacity: 0;
     color: var(--color-text-3);