diff --git a/frontend/src/components/forms/Channel.jsx b/frontend/src/components/forms/Channel.jsx
index d6041492..71f7c7b2 100644
--- a/frontend/src/components/forms/Channel.jsx
+++ b/frontend/src/components/forms/Channel.jsx
@@ -584,7 +584,7 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
                         height={200} // Set max height for visible items
                         itemCount={filteredLogos.length}
                         itemSize={20} // Adjust row height for each item
-                        width="100%"
+                        style={{ width: '100%' }}
                         ref={logoListRef}
                       >
                         {({ index, style }) => (
@@ -772,7 +772,7 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
                       height={200} // Set max height for visible items
                       itemCount={filteredTvgs.length}
                       itemSize={40} // Adjust row height for each item
-                      width="100%"
+                      style={{ width: '100%' }}
                       ref={listRef}
                     >
                       {({ index, style }) => (
@@ -781,7 +781,7 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
                             key={filteredTvgs[index].id}
                             variant="subtle"
                             color="gray"
-                            width="100%"
+                            style={{ width: '100%' }}
                             justify="left"
                             size="xs"
                             onClick={() => {
diff --git a/frontend/src/components/forms/M3U.jsx b/frontend/src/components/forms/M3U.jsx
index 053e8efd..8e8fd932 100644
--- a/frontend/src/components/forms/M3U.jsx
+++ b/frontend/src/components/forms/M3U.jsx
@@ -203,7 +203,7 @@ const M3U = ({
         <Group justify="space-between" align="top">
           <Stack gap="5" style={{ flex: 1 }}>
             <TextInput
-              width="100%"
+              style={{ width: '100%' }}
               id="name"
               name="name"
               label="Name"
@@ -212,7 +212,7 @@ const M3U = ({
               key={form.key('name')}
             />
             <TextInput
-              width="100%"
+              style={{ width: '100%' }}
               id="server_url"
               name="server_url"
               label="URL"
@@ -290,7 +290,7 @@ const M3U = ({
 
           <Stack gap="5" style={{ flex: 1 }}>
             <TextInput
-              width="100%"
+              style={{ width: '100%' }}
               id="max_streams"
               name="max_streams"
               label="Max Streams"
diff --git a/frontend/src/components/forms/M3UProfiles.jsx b/frontend/src/components/forms/M3UProfiles.jsx
index 9848f798..f8cf9927 100644
--- a/frontend/src/components/forms/M3UProfiles.jsx
+++ b/frontend/src/components/forms/M3UProfiles.jsx
@@ -74,7 +74,7 @@ const M3UProfiles = ({ playlist = null, isOpen, onClose }) => {
           // .filter((playlist) => playlist.is_default == false)
           .map((item) => (
             <Card
-            // key={item.id}
+              key={item.id} // Uncomment/add key prop to fix the list warning
             // sx={{
             //   display: 'flex',
             //   alignItems: 'center',
@@ -137,7 +137,7 @@ const M3UProfiles = ({ playlist = null, isOpen, onClose }) => {
             color="primary"
             size="small"
             onClick={editProfile}
-            width="100%"
+            style={{ width: '100%' }}
           >
             New
           </Button>