diff --git a/src/vs/workbench/contrib/void/browser/media/void.css b/src/vs/workbench/contrib/void/browser/media/void.css
index c6358adc..0ec9730b 100644
--- a/src/vs/workbench/contrib/void/browser/media/void.css
+++ b/src/vs/workbench/contrib/void/browser/media/void.css
@@ -71,3 +71,36 @@
 	color: #3b82f6;
 	cursor: pointer;
 }
+
+
+
+
+.void-scrollable-element *::-webkit-scrollbar {
+    width: 14px !important;
+    height: 14px !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb {
+    background-color: transparent !important;
+    border-radius: 0px !important;
+}
+
+.void-scrollable-element.show-scrollbar *::-webkit-scrollbar-thumb {
+    background-color: var(--vscode-scrollbarSlider-background) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--vscode-scrollbarSlider-hoverBackground) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb:active {
+    background-color: var(--vscode-scrollbarSlider-activeBackground) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-corner {
+    background-color: transparent !important;
+}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 66fb4c99..c7a514e1 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -417,6 +417,63 @@ const ChatBubble = ({ chatMessage, isLoading }: {
 
 
 
+const useScrollFade = (ref: React.MutableRefObject<HTMLDivElement | null>) => {
+    useEffect(() => {
+        if (!ref.current) return;
+
+        let fadeTimeout: NodeJS.Timeout | null = null;
+        const parent = ref.current;
+        const scrollElement = parent.querySelector('[class*="void-overflow-"]');
+        if (!scrollElement) return;
+
+        const onMouseEnter = () => {
+            parent.classList.add('show-scrollbar');
+        };
+
+        const onMouseLeave = () => {
+            if (fadeTimeout) {
+                clearTimeout(fadeTimeout);
+            }
+            fadeTimeout = setTimeout(() => {
+                parent.classList.remove('show-scrollbar');
+            }, 1000);
+        };
+
+        scrollElement.addEventListener('mouseenter', onMouseEnter);
+        scrollElement.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+            scrollElement.removeEventListener('mouseenter', onMouseEnter);
+            scrollElement.removeEventListener('mouseleave', onMouseLeave);
+            if (fadeTimeout) {
+                clearTimeout(fadeTimeout);
+            }
+        };
+    }, [ref]);
+};
+
+
+const Test = ({ children, className = "", }: { children: React.ReactNode; className?: string; maxHeight?: string; maxWidth?: string; }) => {
+
+
+	const ref = useRef<HTMLDivElement | null>(null)
+
+	useScrollFade(ref)
+
+	return (
+		<div ref={ref}
+			className={`@@void-scrollable-element`}
+		>
+			<div
+				className='relative overflow-auto max-h-80 max-w-80 bg-blue-400'
+			>
+				{children}
+			</div>
+		</div>
+	);
+};
+
+
 export const SidebarChat = () => {
 
 	const inputBoxRef: React.MutableRefObject<InputBox | null> = useRef(null);
@@ -579,6 +636,11 @@ export const SidebarChat = () => {
 		ref={sidebarRef}
 		className={`w-full h-full`}
 	>
+		<Test>
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+		</Test>
 		{/* thread selector */}
 		<div ref={historyRef}
 			className={`w-full h-auto mb-2 ${isHistoryOpen ? '' : 'hidden'} ring-2 ring-widget-shadow z-10`}