diff --git a/frontend/app/components/Client/Integrations/IntegrationItem.tsx b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
index 27f518c5c..52d02ae78 100644
--- a/frontend/app/components/Client/Integrations/IntegrationItem.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
@@ -17,7 +17,7 @@ const IntegrationItem = (props: Props) => {
     <div
       className={cn('flex flex-col border rounded-lg p-3 bg-white relative justify-between cursor-pointer hover:bg-active-blue')}
       onClick={(e) => props.onClick(e)}
-      style={{ height: '126px' }}
+      style={{ height: '136px' }}
     >
       <div className='flex gap-3'>
         {/*{integration.icon.length ?*/}
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 05a81c736..8ce590499 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -113,7 +113,18 @@ function Integrations(props: Props) {
       <div className='mb-4' />
 
       {filteredIntegrations.map((cat: any) => (
-        <div className={cn('grid grid-cols-3 gap-3 auto-cols-max', cat.integrations.length > 0 ? 'p-2' : '')}>
+        <div className={cn(`
+          grid 
+          gap-3 
+          auto-cols-max 
+          ${cat.integrations.length > 0 ? 'p-2' : ''}
+          grid-cols-1   // default to 1 column
+          sm:grid-cols-1 // 2 columns on small screens and up
+          md:grid-cols-2 // 3 columns on medium screens and up
+          lg:grid-cols-3 // and so on as per your design requirements
+          xl:grid-cols-3
+        `
+        )}>
           {cat.integrations.map((integration: any) => (
             <IntegrationItem
               integrated={integratedList.includes(integration.slug)}