diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index 21a04bcb..3813916c 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -1096,7 +1096,7 @@ const ChannelsTable = ({ }) => {
           style={{
             display: 'flex',
             flexDirection: 'column',
-            height: 'calc(100vh - 58px)',
+            height: 'calc(100vh - 60px)',
             backgroundColor: '#27272A',
           }}
         >
@@ -1119,7 +1119,7 @@ const ChannelsTable = ({ }) => {
               style={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: 'calc(100vh - 110px)',
+                height: 'calc(100vh - 100px)',
               }}
             >
               <Box
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 73fee4c7..64f9bbef 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -170,7 +170,7 @@ const StreamRowActions = ({
   );
 };
 
-const StreamsTable = ({}) => {
+const StreamsTable = ({ }) => {
   const theme = useMantineTheme();
 
   /**
@@ -653,7 +653,7 @@ const StreamsTable = ({}) => {
 
       <Paper
         style={{
-          height: 'calc(100vh - 75px)',
+          height: 'calc(100vh - 60px)',
           backgroundColor: '#27272A',
         }}
       >
@@ -678,10 +678,10 @@ const StreamsTable = ({}) => {
               style={
                 selectedStreamIds.length > 0 && selectedChannelIds.length === 1
                   ? {
-                      borderWidth: '1px',
-                      borderColor: theme.tailwind.green[5],
-                      color: 'white',
-                    }
+                    borderWidth: '1px',
+                    borderColor: theme.tailwind.green[5],
+                    color: 'white',
+                  }
                   : undefined
               }
               disabled={
@@ -801,7 +801,7 @@ const StreamsTable = ({}) => {
             style={{
               display: 'flex',
               flexDirection: 'column',
-              height: 'calc(100vh - 110px)',
+              height: 'calc(100vh - 100px)',
             }}
           >
             <Box
diff --git a/frontend/src/pages/Channels.jsx b/frontend/src/pages/Channels.jsx
index fe15e713..93300f1b 100644
--- a/frontend/src/pages/Channels.jsx
+++ b/frontend/src/pages/Channels.jsx
@@ -12,7 +12,6 @@ const ChannelsPage = () => {
   if (!authUser.id) {
     return <></>;
   }
-
   if (authUser.user_level <= USER_LEVELS.STANDARD) {
     return (
       <Box style={{ padding: 10 }}>
@@ -22,17 +21,22 @@ const ChannelsPage = () => {
   }
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex' }}>
+    <div style={{ height: '100vh', width: '100%', display: 'flex', overflowX: 'auto' }}>
       <Allotment
         defaultSizes={[50, 50]}
-        style={{ height: '100%', width: '100%' }}
+        style={{ height: '100%', width: '100%', minWidth: '600px' }}
         className="custom-allotment"
+        minSize={100}
       >
-        <div style={{ padding: 10 }}>
-          <ChannelsTable />
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
+          <div style={{ minWidth: '600px' }}>
+            <ChannelsTable />
+          </div>
         </div>
-        <div style={{ padding: 10 }}>
-          <StreamsTable />
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
+          <div style={{ minWidth: '600px' }}>
+            <StreamsTable />
+          </div>
         </div>
       </Allotment>
     </div>