diff --git a/apps/web/src/app/(ui)/layout.tsx b/apps/web/src/app/(ui)/layout.tsx
index bf340e2..5c5beec 100644
--- a/apps/web/src/app/(ui)/layout.tsx
+++ b/apps/web/src/app/(ui)/layout.tsx
@@ -62,7 +62,7 @@ export default async function RootLayout({
                     <div className="flex flex-1 pt-16">
                       {/* pt-16 for navbar height */}
                       <Sidebar className="pt-16" />
-                      <main className="flex-1 overflow-auto">{children}</main>
+                      <main className="flex-1 overflow-y-auto overflow-x-hidden">{children}</main>
                     </div>
                     <Toaster />
                   </StreamInfoProvider>
diff --git a/apps/web/src/components/app/StreamGrid/StreamGrid.tsx b/apps/web/src/components/app/StreamGrid/StreamGrid.tsx
index 6351b32..80897c3 100644
--- a/apps/web/src/components/app/StreamGrid/StreamGrid.tsx
+++ b/apps/web/src/components/app/StreamGrid/StreamGrid.tsx
@@ -56,7 +56,7 @@ export default function StreamGrid({ liveStreams, offlineStreams }: StreamGridPr
         <section>
           <SectionHeading label="Offline channels" count={offlineStreams.length} />
           <div className="px-10">
-            <Carousel opts={{ align: 'start', dragFree: true, containScroll: 'trimSnaps' }}>
+            <Carousel className="w-full" opts={{ align: 'start', dragFree: true, containScroll: 'trimSnaps' }}>
               <CarouselContent className="-ml-2">
                 {offlineStreams.map((stream) => (
                   <CarouselItem key={stream.id} className="basis-auto pl-2">