diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 92c050ea0..33d0520d4 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -80,7 +80,7 @@ function Integrations(props: Props) {
                         <h2 className="font-medium text-lg">{cat.title}</h2>
                         {cat.isProject && (
                             <div className="flex items-center">
-                                <div className="flex flex-wrap ml-4">
+                                <div className="flex flex-wrap mx-4">
                                     <SiteDropdown value={props.siteId} onChange={onChangeSelect} />
                                 </div>
                                 {loading && cat.isProject && <AnimatedSVG name={ICONS.LOADER} size={20} />}
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
index 07f1aa123..8d25b4454 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
@@ -27,7 +27,11 @@ function SlackChannelList(props) {
                 show={list.size === 0}
             >
                 {list.map((c) => (
-                    <div key={c.webhookId} className="border-t px-5 py-2 flex items-center justify-between cursor-pointer" onClick={() => onEdit(c)}>
+                    <div
+                        key={c.webhookId}
+                        className="border-t px-5 py-2 flex items-center justify-between cursor-pointer hover:bg-active-blue"
+                        onClick={() => onEdit(c)}
+                    >
                         <div className="flex-grow-0" style={{ maxWidth: '90%' }}>
                             <div>{c.name}</div>
                             <div className="truncate test-xs color-gray-medium">{c.endpoint}</div>
diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 207f9b765..e04c02de6 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -24,16 +24,16 @@ const SlackForm = (props: Props) => {
     }, []);
 
     return (
-        <div className="bg-white h-screen overflow-y-auto flex items-start" style={{ width: active ? '650px' : '350px' }}>
-            <div style={{ width: '350px' }}>
-                <h3 className="p-5 text-2xl">Slack</h3>
-                <SlackChannelList onEdit={onEdit} />
-            </div>
+        <div className="bg-white h-screen overflow-y-auto flex items-start" style={{ width: active ? '700px' : '350px' }}>
             {active && (
-                <div className="border-l h-full">
+                <div className="border-r h-full" style={{ width: '350px' }}>
                     <SlackAddForm onClose={() => setActive(false)} />
                 </div>
             )}
+            <div className="shrink-0" style={{ width: '350px' }}>
+                <h3 className="p-5 text-2xl">Slack</h3>
+                <SlackChannelList onEdit={onEdit} />
+            </div>
         </div>
     );
 };