diff --git a/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx b/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
index 11b2dffe2..24f6f0b36 100644
--- a/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
+++ b/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
@@ -452,7 +452,7 @@ function Bookmark(props: BookmarkProps & { isExpanded?: boolean; onToggleFolder?
     );
 }
 
-function HorizontalScroller({ children, className, customRef }: React.PropsWithChildren<{ className?: string; customRef?: (node: HTMLDivElement) => void; }>) {
+export function HorizontalScroller({ children, className, customRef }: React.PropsWithChildren<{ className?: string; customRef?: (node: HTMLDivElement) => void; }>) {
     const internalRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -461,7 +461,7 @@ function HorizontalScroller({ children, className, customRef }: React.PropsWithC
 
         const handleWheel = (e: WheelEvent) => {
             e.preventDefault();
-            element.scrollLeft += e.deltaY;
+            element.scrollLeft += e.deltaX + e.deltaY;
         };
 
         element.addEventListener("wheel", handleWheel);
diff --git a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
index e7df8227a..3210785d1 100644
--- a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
+++ b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
@@ -14,7 +14,7 @@ import { findComponentByCodeLazy, findStoreLazy } from "@webpack";
 import { Button, ContextMenuApi, Flex, FluxDispatcher, useCallback, useEffect, useRef, UserStore, useState, useStateFromStores } from "@webpack/common";
 
 import { BasicChannelTabsProps, ChannelTabsProps, clearStaleNavigationContext, closeTab, createTab, handleChannelSwitch, isNavigationFromSource, isTabSelected, moveToTab, openedTabs, openStartupTabs, saveTabs, settings, setUpdaterFunction, useGhostTabs } from "../util";
-import BookmarkContainer from "./BookmarkContainer";
+import BookmarkContainer, { HorizontalScroller } from "./BookmarkContainer";
 import ChannelTab, { PreviewTab } from "./ChannelTab";
 import { BasicContextMenu } from "./ContextMenus";
 
@@ -100,7 +100,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     }, [userId]);
 
     const ref = useRef<HTMLDivElement>(null);
-    const tabScrollerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         setUpdaterFunction(update);
@@ -296,11 +295,11 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
                 <div className={cl("separator")} />
             </>}
             <div className={cl("tab-container")}>
-                <div className={cl("tab-scroller")} ref={tabScrollerRef}>
+                <HorizontalScroller className={cl("tab-scroller")}>
                     {openedTabs.filter(tab => tab != null).map((tab, i) =>
                         <ChannelTab {...tab} index={i} key={tab.id} />
                     )}
-                </div>
+                </HorizontalScroller>
 
                 <button
                     onClick={() => createTab(props, true)}
@@ -316,11 +315,11 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     );
 }
 
-export function ChannelTabsPreview(p) {
+export function ChannelTabsPreview(p: { setValue: (v: TabSet) => void; }) {
     const id = UserStore.getCurrentUser()?.id;
     if (!id) return <Paragraph>there's no logged in account?????</Paragraph>;
 
-    const { setValue }: { setValue: (v: TabSet) => void; } = p;
+    const { setValue } = p;
     const { tabSet }: { tabSet: TabSet; } = settings.use(["tabSet"]);
 
     const placeholder = [{ guildId: "@me", channelId: undefined as any }];