diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index bc6a19a5..c5fce026 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -743,7 +743,9 @@ const ChannelsTable = ({ }) => {
       const hasStreams = row.original.streams && row.original.streams.length > 0;
       return hasStreams
         ? {} // Default style for channels with streams
-        : { backgroundColor: 'rgba(255, 0, 0, 0.15)' }; // Increase opacity to 15% for better visibility
+        : {
+          className: 'no-streams-row' // Add a class instead of background color
+        };
     }
   });
 
diff --git a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
index 02c996e4..e83c2c53 100644
--- a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
+++ b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
@@ -76,18 +76,22 @@ const CustomTableBody = ({
     // Get custom styles for this row if the function exists
     const customRowStyles = getRowStyles ? getRowStyles(row) : {};
 
+    // Extract any className from customRowStyles
+    const customClassName = customRowStyles.className || '';
+    delete customRowStyles.className; // Remove from object so it doesn't get applied as inline style
+
     return (
       <Box style={style} key={`row-${row.id}`}>
         <Box
           key={`tr-${row.id}`}
-          className={`tr ${index % 2 == 0 ? 'tr-even' : 'tr-odd'}`}
+          className={`tr ${index % 2 == 0 ? 'tr-even' : 'tr-odd'} ${customClassName}`}
           style={{
             display: 'flex',
             width: '100%',
             ...(row.getIsSelected() && {
               backgroundColor: '#163632',
             }),
-            ...customRowStyles, // Apply the custom styles here
+            ...customRowStyles, // Apply the remaining custom styles here
           }}
         >
           {row.getVisibleCells().map((cell) => {
diff --git a/frontend/src/components/tables/table.css b/frontend/src/components/tables/table.css
index c3651246..23d885e7 100644
--- a/frontend/src/components/tables/table.css
+++ b/frontend/src/components/tables/table.css
@@ -93,6 +93,16 @@ html {
   background-color: #27272A;
 }
 
+/* Style for rows with no streams */
+.no-streams-row {
+  background-color: rgba(255, 68, 68, 0.15) !important;
+}
+
+/* Make sure hover effect still works on rows with no streams */
+.table-striped .tbody .tr.no-streams-row:hover {
+  background-color: rgb(68, 68, 68) !important;
+}
+
 /* Prevent text selection when shift key is pressed */
 .shift-key-active {
   cursor: pointer !important;