diff --git a/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js b/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
index 15d8ddef1..f58154f91 100644
--- a/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
+++ b/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
@@ -3,31 +3,39 @@ import { tokenRE } from 'Types/integrations/bugsnagConfig';
 import IntegrationForm from '../IntegrationForm';
 import ProjectListDropdown from './ProjectListDropdown';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const BugsnagForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Bugsnag</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate Bugsnag with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate Bugsnag" url="https://docs.openreplay.com/integrations/bugsnag" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="bugsnag"
-            formFields={[
-                {
-                    key: 'authorizationToken',
-                    label: 'Authorisation Token',
-                },
-                {
-                    key: 'bugsnagProjectId',
-                    label: 'Project',
-                    checkIfDisplayed: (config) => tokenRE.test(config.authorizationToken),
-                    component: ProjectListDropdown,
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Bugsnag' icon='integrations/bugsnag'
+                          description='Integrate Bugsnag to access the OpenReplay session linked to the JS exception within its interface.' />
+
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Generate Bugsnag Auth Token</li>
+        <li>Enter the token below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate Bugsnag' url='https://docs.openreplay.com/integrations/bugsnag' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='bugsnag'
+      formFields={[
+        {
+          key: 'authorizationToken',
+          label: 'Authorisation Token'
+        },
+        {
+          key: 'bugsnagProjectId',
+          label: 'Project',
+          checkIfDisplayed: (config) => tokenRE.test(config.authorizationToken),
+          component: ProjectListDropdown
+        }
+      ]}
+    />
+  </div>
 );
 
 BugsnagForm.displayName = 'BugsnagForm';
diff --git a/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js b/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
index bd9604b01..ca4e6ae3b 100644
--- a/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
+++ b/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
@@ -4,43 +4,51 @@ import IntegrationForm from '../IntegrationForm';
 import LogGroupDropdown from './LogGroupDropdown';
 import RegionDropdown from './RegionDropdown';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const CloudwatchForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Cloud Watch</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate CloudWatch with OpenReplay and see backend errors alongside session replays.</div>
-            <DocLink className="mt-4" label="Integrate CloudWatch" url="https://docs.openreplay.com/integrations/cloudwatch" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="cloudwatch"
-            formFields={[
-                {
-                    key: 'awsAccessKeyId',
-                    label: 'AWS Access Key ID',
-                },
-                {
-                    key: 'awsSecretAccessKey',
-                    label: 'AWS Secret Access Key',
-                },
-                {
-                    key: 'region',
-                    label: 'Region',
-                    component: RegionDropdown,
-                },
-                {
-                    key: 'logGroupName',
-                    label: 'Log Group Name',
-                    component: LogGroupDropdown,
-                    checkIfDisplayed: (config) =>
-                        config.awsSecretAccessKey.length === SECRET_ACCESS_KEY_LENGTH &&
-                        config.region !== '' &&
-                        config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH,
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Cloud Watch' icon='integrations/aws'
+                          description='Integrate CloudWatch to see backend logs and errors alongside session replay.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Create a Service Account</li>
+        <li>Enter the details below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate CloudWatch'
+               url='https://docs.openreplay.com/integrations/cloudwatch' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='cloudwatch'
+      formFields={[
+        {
+          key: 'awsAccessKeyId',
+          label: 'AWS Access Key ID'
+        },
+        {
+          key: 'awsSecretAccessKey',
+          label: 'AWS Secret Access Key'
+        },
+        {
+          key: 'region',
+          label: 'Region',
+          component: RegionDropdown
+        },
+        {
+          key: 'logGroupName',
+          label: 'Log Group Name',
+          component: LogGroupDropdown,
+          checkIfDisplayed: (config) =>
+            config.awsSecretAccessKey.length === SECRET_ACCESS_KEY_LENGTH &&
+            config.region !== '' &&
+            config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH
+        }
+      ]}
+    />
+  </div>
 );
 
 CloudwatchForm.displayName = 'CloudwatchForm';
diff --git a/frontend/app/components/Client/Integrations/DatadogForm.js b/frontend/app/components/Client/Integrations/DatadogForm.js
index 46360259c..0835d135e 100644
--- a/frontend/app/components/Client/Integrations/DatadogForm.js
+++ b/frontend/app/components/Client/Integrations/DatadogForm.js
@@ -1,30 +1,37 @@
 import React from 'react';
 import IntegrationForm from './IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const DatadogForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Datadog</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate Datadog with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate Datadog" url="https://docs.openreplay.com/integrations/datadog" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="datadog"
-            formFields={[
-                {
-                    key: 'apiKey',
-                    label: 'API Key',
-                    autoFocus: true,
-                },
-                {
-                    key: 'applicationKey',
-                    label: 'Application Key',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Datadog' icon='integrations/datadog'
+                          description='Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Generate Datadog API Key & Application Key</li>
+        <li>Enter the API key below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate Datadog' url='https://docs.openreplay.com/integrations/datadog' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='datadog'
+      formFields={[
+        {
+          key: 'apiKey',
+          label: 'API Key',
+          autoFocus: true
+        },
+        {
+          key: 'applicationKey',
+          label: 'Application Key'
+        }
+      ]}
+    />
+  </div>
 );
 
 DatadogForm.displayName = 'DatadogForm';
diff --git a/frontend/app/components/Client/Integrations/ElasticsearchForm.js b/frontend/app/components/Client/Integrations/ElasticsearchForm.js
index ad33b6302..2c30cea47 100644
--- a/frontend/app/components/Client/Integrations/ElasticsearchForm.js
+++ b/frontend/app/components/Client/Integrations/ElasticsearchForm.js
@@ -4,85 +4,94 @@ import IntegrationForm from './IntegrationForm';
 import { withRequest } from 'HOCs';
 import { edit } from 'Duck/integrations/actions';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 @connect(
-    (state) => ({
-        config: state.getIn(['elasticsearch', 'instance']),
-    }),
-    { edit }
+  (state) => ({
+    config: state.getIn(['elasticsearch', 'instance'])
+  }),
+  { edit }
 )
 @withRequest({
-    dataName: 'isValid',
-    initialData: false,
-    dataWrapper: (data) => data.state,
-    requestName: 'validateConfig',
-    endpoint: '/integrations/elasticsearch/test',
-    method: 'POST',
+  dataName: 'isValid',
+  initialData: false,
+  dataWrapper: (data) => data.state,
+  requestName: 'validateConfig',
+  endpoint: '/integrations/elasticsearch/test',
+  method: 'POST'
 })
 export default class ElasticsearchForm extends React.PureComponent {
-    componentWillReceiveProps(newProps) {
-        const {
-            config: { host, port, apiKeyId, apiKey },
-        } = this.props;
-        const { loading, config } = newProps;
-        const valuesChanged = host !== config.host || port !== config.port || apiKeyId !== config.apiKeyId || apiKey !== config.apiKey;
-        if (!loading && valuesChanged && newProps.config.validateKeys() && newProps) {
-            this.validateConfig(newProps);
-        }
+  componentWillReceiveProps(newProps) {
+    const {
+      config: { host, port, apiKeyId, apiKey }
+    } = this.props;
+    const { loading, config } = newProps;
+    const valuesChanged = host !== config.host || port !== config.port || apiKeyId !== config.apiKeyId || apiKey !== config.apiKey;
+    if (!loading && valuesChanged && newProps.config.validateKeys() && newProps) {
+      this.validateConfig(newProps);
     }
+  }
 
-    validateConfig = (newProps) => {
-        const { config } = newProps;
-        this.props
-            .validateConfig({
-                host: config.host,
-                port: config.port,
-                apiKeyId: config.apiKeyId,
-                apiKey: config.apiKey,
-            })
-            .then((res) => {
-                const { isValid } = this.props;
-                this.props.edit('elasticsearch', { isValid: isValid });
-            });
-    };
+  validateConfig = (newProps) => {
+    const { config } = newProps;
+    this.props
+      .validateConfig({
+        host: config.host,
+        port: config.port,
+        apiKeyId: config.apiKeyId,
+        apiKey: config.apiKey
+      })
+      .then((res) => {
+        const { isValid } = this.props;
+        this.props.edit('elasticsearch', { isValid: isValid });
+      });
+  };
 
-    render() {
-        const props = this.props;
-        return (
-            <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-                <h3 className="p-5 text-2xl">Elasticsearch</h3>
-                <div className="p-5 border-b mb-4">
-                    <div>How to integrate Elasticsearch with OpenReplay and see backend errors alongside session recordings.</div>
-                    <DocLink className="mt-4" label="Integrate Elasticsearch" url="https://docs.openreplay.com/integrations/elastic" />
-                </div>
-                <IntegrationForm
-                    {...props}
-                    name="elasticsearch"
-                    formFields={[
-                        {
-                            key: 'host',
-                            label: 'Host',
-                        },
-                        {
-                            key: 'apiKeyId',
-                            label: 'API Key ID',
-                        },
-                        {
-                            key: 'apiKey',
-                            label: 'API Key',
-                        },
-                        {
-                            key: 'indexes',
-                            label: 'Indexes',
-                        },
-                        {
-                            key: 'port',
-                            label: 'Port',
-                            type: 'number',
-                        },
-                    ]}
-                />
-            </div>
-        );
-    }
+  render() {
+    const props = this.props;
+    return (
+      <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+        <IntegrationModalCard title='Elasticsearch' icon='integrations/elasticsearch'
+                              description='Integrate Elasticsearch with session replays to seamlessly observe backend errors.' />
+
+        <div className='p-5 border-b mb-4'>
+          <div className='font-medium mb-1'>How it works?</div>
+          <ol className="list-decimal list-inside">
+            <li>Create a new Elastic API key</li>
+            <li>Enter the API key below</li>
+            <li>Propagate openReplaySessionToken</li>
+          </ol>
+          <DocLink className='mt-4' label='Integrate Elasticsearch'
+                   url='https://docs.openreplay.com/integrations/elastic' />
+        </div>
+        <IntegrationForm
+          {...props}
+          name='elasticsearch'
+          formFields={[
+            {
+              key: 'host',
+              label: 'Host'
+            },
+            {
+              key: 'apiKeyId',
+              label: 'API Key ID'
+            },
+            {
+              key: 'apiKey',
+              label: 'API Key'
+            },
+            {
+              key: 'indexes',
+              label: 'Indexes'
+            },
+            {
+              key: 'port',
+              label: 'Port',
+              type: 'number'
+            }
+          ]}
+        />
+      </div>
+    );
+  }
 }
diff --git a/frontend/app/components/Client/Integrations/GithubForm.js b/frontend/app/components/Client/Integrations/GithubForm.js
index 7d140732b..b54343c5f 100644
--- a/frontend/app/components/Client/Integrations/GithubForm.js
+++ b/frontend/app/components/Client/Integrations/GithubForm.js
@@ -1,29 +1,31 @@
 import React from 'react';
 import IntegrationForm from './IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const GithubForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Github</h3>
-        <div className="p-5 border-b mb-4">
-            <div>Integrate GitHub with OpenReplay and create issues directly from the recording page.</div>
-            <div className="mt-8">
-                <DocLink className="mt-4" label="Integrate Github" url="https://docs.openreplay.com/integrations/github" />
-            </div>
-        </div>
-        <IntegrationForm
-            {...props}
-            ignoreProject
-            name="github"
-            customPath="github"
-            formFields={[
-                {
-                    key: 'token',
-                    label: 'Token',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Github' icon='integrations/github'
+                          description='Integrate GitHub with OpenReplay to enable the direct creation of a new issue from a session.' />
+    <div className='p-5 border-b mb-4'>
+      <div>Integrate GitHub with OpenReplay and create issues directly from the recording page.</div>
+      <div className='mt-8'>
+        <DocLink className='mt-4' label='Integrate Github' url='https://docs.openreplay.com/integrations/github' />
+      </div>
     </div>
+    <IntegrationForm
+      {...props}
+      ignoreProject
+      name='github'
+      customPath='github'
+      formFields={[
+        {
+          key: 'token',
+          label: 'Token'
+        }
+      ]}
+    />
+  </div>
 );
 
 GithubForm.displayName = 'GithubForm';
diff --git a/frontend/app/components/Client/Integrations/IntegrationItem.tsx b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
index cd8b5f005..27f518c5c 100644
--- a/frontend/app/components/Client/Integrations/IntegrationItem.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
@@ -15,14 +15,17 @@ const IntegrationItem = (props: Props) => {
   const { integration, integrated, hide = false } = props;
   return hide ? <></> : (
     <div
-      className={cn('flex flex-col border p-3 bg-white relative justify-between cursor-pointer hover:bg-active-blue')}
+      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' }}
     >
       <div className='flex gap-3'>
-        {integration.icon.length ?
-          <img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' /> :
-          (<span style={{ fontSize: '3rem', lineHeight: '3rem' }}>{integration.header}</span>)}
+        {/*{integration.icon.length ?*/}
+        {/*  <img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' /> :*/}
+        {/*  (<span style={{ fontSize: '3rem', lineHeight: '3rem' }}>{integration.header}</span>)}*/}
+        <div className="shrink-0">
+          <img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' />
+        </div>
         <div className='flex flex-col'>
           <h4 className='text-lg'>{integration.title}</h4>
           <p className='text-sm color-gray-medium m-0 p-0 h-3'>{integration.subtitle && integration.subtitle}</p>
diff --git a/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx b/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx
new file mode 100644
index 000000000..4864b092b
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from 'UI';
+import DocLink from 'Shared/DocLink';
+
+interface Props {
+  title: string;
+  icon: string;
+  description: string;
+}
+
+function IntegrationModalCard(props: Props) {
+  const { title, icon, description } = props;
+  return (
+    <div className='flex items-start p-5 gap-4'>
+      <div className='border rounded-lg p-2 shrink-0'>
+        <img className='h-20 w-20' src={'/assets/' + icon + '.svg'} alt='integration' />
+      </div>
+      <div>
+        <h3 className='text-2xl'>{title}</h3>
+        <div>{description}</div>
+      </div>
+    </div>
+  );
+}
+
+export default IntegrationModalCard;
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 444c77da3..1c6d0f58a 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -251,7 +251,7 @@ const integrations = [
         component: <SumoLogicForm />
       },
       {
-        title: 'Stackdriver',
+        title: 'Google Cloud',
         subtitle: 'Integrate Google Cloud to view backend logs and errors in conjunction with session replay',
         slug: 'stackdriver',
         icon: 'integrations/google-cloud',
diff --git a/frontend/app/components/Client/Integrations/JiraForm/JiraForm.js b/frontend/app/components/Client/Integrations/JiraForm/JiraForm.js
index 906794155..c417f0626 100644
--- a/frontend/app/components/Client/Integrations/JiraForm/JiraForm.js
+++ b/frontend/app/components/Client/Integrations/JiraForm/JiraForm.js
@@ -2,43 +2,55 @@ import React from 'react';
 import IntegrationForm from '../IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
 import { useModal } from 'App/components/Modal';
+import { Icon } from 'UI';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const JiraForm = (props) => {
-    const { hideModal } = useModal();
-    return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-            <h3 className="p-5 text-2xl">Jira</h3>
-            <div className="p-5 border-b mb-4">
-                <div>How to integrate Jira Cloud with OpenReplay.</div>
-                <div className="mt-8">
-                    <DocLink className="mt-4" label="Integrate Jira Cloud" url="https://docs.openreplay.com/integrations/jira" />
-                </div>
-            </div>
-            <IntegrationForm
-                {...props}
-                ignoreProject={true}
-                name="jira"
-                customPath="jira"
-                onClose={hideModal}
-                formFields={[
-                    {
-                        key: 'username',
-                        label: 'Username',
-                        autoFocus: true,
-                    },
-                    {
-                        key: 'token',
-                        label: 'API Token',
-                    },
-                    {
-                        key: 'url',
-                        label: 'JIRA URL',
-                        placeholder: 'E.x. https://myjira.atlassian.net',
-                    },
-                ]}
-            />
+  const { hideModal } = useModal();
+  return (
+    <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+      <IntegrationModalCard title='Jira' icon='integrations/jira'
+                            description='Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.' />
+
+
+      <div className='border-b my-4 p-5'>
+        <div className='font-medium mb-1'>How it works?</div>
+        <ol className='list-decimal list-inside'>
+          <li>Create a new API token</li>
+          <li>Enter the token below</li>
+        </ol>
+        <div className='mt-8'>
+          <DocLink className='mt-4' label='Integrate Jira Cloud'
+                   url='https://docs.openreplay.com/integrations/jira' />
         </div>
-    )
+      </div>
+
+
+      <IntegrationForm
+        {...props}
+        ignoreProject={true}
+        name='jira'
+        customPath='jira'
+        onClose={hideModal}
+        formFields={[
+          {
+            key: 'username',
+            label: 'Username',
+            autoFocus: true
+          },
+          {
+            key: 'token',
+            label: 'API Token'
+          },
+          {
+            key: 'url',
+            label: 'JIRA URL',
+            placeholder: 'E.x. https://myjira.atlassian.net'
+          }
+        ]}
+      />
+    </div>
+  );
 };
 
 JiraForm.displayName = 'JiraForm';
diff --git a/frontend/app/components/Client/Integrations/NewrelicForm/NewrelicForm.js b/frontend/app/components/Client/Integrations/NewrelicForm/NewrelicForm.js
index 670656583..3d3d829b1 100644
--- a/frontend/app/components/Client/Integrations/NewrelicForm/NewrelicForm.js
+++ b/frontend/app/components/Client/Integrations/NewrelicForm/NewrelicForm.js
@@ -1,34 +1,41 @@
 import React from 'react';
 import IntegrationForm from '../IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const NewrelicForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">New Relic</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate NewRelic with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate NewRelic" url="https://docs.openreplay.com/integrations/newrelic" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="newrelic"
-            formFields={[
-                {
-                    key: 'applicationId',
-                    label: 'Application Id',
-                },
-                {
-                    key: 'xQueryKey',
-                    label: 'X-Query-Key',
-                },
-                {
-                    key: 'region',
-                    label: 'EU Region',
-                    type: 'checkbox',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='New Relic' icon='integrations/newrelic'
+                          description='Integrate NewRelic with session replays to seamlessly observe backend errors.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Create Query Key</li>
+        <li>Enter the details below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate NewRelic' url='https://docs.openreplay.com/integrations/newrelic' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='newrelic'
+      formFields={[
+        {
+          key: 'applicationId',
+          label: 'Application Id'
+        },
+        {
+          key: 'xQueryKey',
+          label: 'X-Query-Key'
+        },
+        {
+          key: 'region',
+          label: 'EU Region',
+          type: 'checkbox'
+        }
+      ]}
+    />
+  </div>
 );
 
 NewrelicForm.displayName = 'NewrelicForm';
diff --git a/frontend/app/components/Client/Integrations/RollbarForm.js b/frontend/app/components/Client/Integrations/RollbarForm.js
index 441819323..624ec9bf2 100644
--- a/frontend/app/components/Client/Integrations/RollbarForm.js
+++ b/frontend/app/components/Client/Integrations/RollbarForm.js
@@ -1,25 +1,32 @@
 import React from 'react';
 import IntegrationForm from './IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const RollbarForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Rollbar</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate Rollbar with OpenReplay and see backend errors alongside session replays.</div>
-            <DocLink className="mt-4" label="Integrate Rollbar" url="https://docs.openreplay.com/integrations/rollbar" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="rollbar"
-            formFields={[
-                {
-                    key: 'accessToken',
-                    label: 'Access Token',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Rollbar' icon='integrations/rollbar'
+                          description='Integrate Rollbar with session replays to seamlessly observe backend errors.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Create Rollbar Access Tokens</li>
+        <li>Enter the token below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate Rollbar' url='https://docs.openreplay.com/integrations/rollbar' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='rollbar'
+      formFields={[
+        {
+          key: 'accessToken',
+          label: 'Access Token'
+        }
+      ]}
+    />
+  </div>
 );
 
 RollbarForm.displayName = 'RollbarForm';
diff --git a/frontend/app/components/Client/Integrations/SentryForm.js b/frontend/app/components/Client/Integrations/SentryForm.js
index bd119ba31..506aec48c 100644
--- a/frontend/app/components/Client/Integrations/SentryForm.js
+++ b/frontend/app/components/Client/Integrations/SentryForm.js
@@ -1,33 +1,40 @@
 import React from 'react';
 import IntegrationForm from './IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const SentryForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Sentry</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate Sentry with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate Sentry" url="https://docs.openreplay.com/integrations/sentry" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="sentry"
-            formFields={[
-                {
-                    key: 'organizationSlug',
-                    label: 'Organization Slug',
-                },
-                {
-                    key: 'projectSlug',
-                    label: 'Project Slug',
-                },
-                {
-                    key: 'token',
-                    label: 'Token',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Sentry' icon='integrations/sentry'
+                          description='Integrate Sentry with session replays to seamlessly observe backend errors.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Generate Sentry Auth Token</li>
+        <li>Enter the token below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='See detailed steps' url='https://docs.openreplay.com/integrations/sentry' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='sentry'
+      formFields={[
+        {
+          key: 'organizationSlug',
+          label: 'Organization Slug'
+        },
+        {
+          key: 'projectSlug',
+          label: 'Project Slug'
+        },
+        {
+          key: 'token',
+          label: 'Token'
+        }
+      ]}
+    />
+  </div>
 );
 
 SentryForm.displayName = 'SentryForm';
diff --git a/frontend/app/components/Client/Integrations/StackdriverForm.js b/frontend/app/components/Client/Integrations/StackdriverForm.js
index ce137bd99..92935e67b 100644
--- a/frontend/app/components/Client/Integrations/StackdriverForm.js
+++ b/frontend/app/components/Client/Integrations/StackdriverForm.js
@@ -1,30 +1,38 @@
 import React from 'react';
 import IntegrationForm from './IntegrationForm';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const StackdriverForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Stackdriver</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate Stackdriver with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate Stackdriver" url="https://docs.openreplay.com/integrations/stackdriver" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="stackdriver"
-            formFields={[
-                {
-                    key: 'logName',
-                    label: 'Log Name',
-                },
-                {
-                    key: 'serviceAccountCredentials',
-                    label: 'Service Account Credentials (JSON)',
-                    component: 'textarea',
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Google Cloud' icon='integrations/google-cloud'
+                          description='Integrate Google Cloud Watch to see backend logs and errors alongside session replay.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Create Google Cloud Service Account</li>
+        <li>Enter the details below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate Stackdriver'
+               url='https://docs.openreplay.com/integrations/stackdriver' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='stackdriver'
+      formFields={[
+        {
+          key: 'logName',
+          label: 'Log Name'
+        },
+        {
+          key: 'serviceAccountCredentials',
+          label: 'Service Account Credentials (JSON)',
+          component: 'textarea'
+        }
+      ]}
+    />
+  </div>
 );
 
 StackdriverForm.displayName = 'StackdriverForm';
diff --git a/frontend/app/components/Client/Integrations/SumoLogicForm/SumoLogicForm.js b/frontend/app/components/Client/Integrations/SumoLogicForm/SumoLogicForm.js
index 6aea9fe6e..af72ccbcf 100644
--- a/frontend/app/components/Client/Integrations/SumoLogicForm/SumoLogicForm.js
+++ b/frontend/app/components/Client/Integrations/SumoLogicForm/SumoLogicForm.js
@@ -2,34 +2,41 @@ import React from 'react';
 import IntegrationForm from '../IntegrationForm';
 import RegionDropdown from './RegionDropdown';
 import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const SumoLogicForm = (props) => (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-        <h3 className="p-5 text-2xl">Sumologic</h3>
-        <div className="p-5 border-b mb-4">
-            <div>How to integrate SumoLogic with OpenReplay and see backend errors alongside session recordings.</div>
-            <DocLink className="mt-4" label="Integrate SumoLogic" url="https://docs.openreplay.com/integrations/sumo" />
-        </div>
-        <IntegrationForm
-            {...props}
-            name="sumologic"
-            formFields={[
-                {
-                    key: 'accessId',
-                    label: 'Access ID',
-                },
-                {
-                    key: 'accessKey',
-                    label: 'Access Key',
-                },
-                {
-                    key: 'region',
-                    label: 'Region',
-                    component: RegionDropdown,
-                },
-            ]}
-        />
+  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
+    <IntegrationModalCard title='Sumologic' icon='integrations/sumologic'
+                          description='Integrate Sumo Logic with session replays to seamlessly observe backend errors.' />
+    <div className='p-5 border-b mb-4'>
+      <div className='font-medium mb-1'>How it works?</div>
+      <ol className="list-decimal list-inside">
+        <li>Create a new Access ID and Access Key</li>
+        <li>Enter the details below</li>
+        <li>Propagate openReplaySessionToken</li>
+      </ol>
+      <DocLink className='mt-4' label='Integrate SumoLogic' url='https://docs.openreplay.com/integrations/sumo' />
     </div>
+    <IntegrationForm
+      {...props}
+      name='sumologic'
+      formFields={[
+        {
+          key: 'accessId',
+          label: 'Access ID'
+        },
+        {
+          key: 'accessKey',
+          label: 'Access Key'
+        },
+        {
+          key: 'region',
+          label: 'Region',
+          component: RegionDropdown
+        }
+      ]}
+    />
+  </div>
 );
 
 SumoLogicForm.displayName = 'SumoLogicForm';
diff --git a/frontend/app/components/shared/DocLink/DocLink.js b/frontend/app/components/shared/DocLink/DocLink.js
index 004f154ef..3647e79e5 100644
--- a/frontend/app/components/shared/DocLink/DocLink.js
+++ b/frontend/app/components/shared/DocLink/DocLink.js
@@ -8,7 +8,7 @@ export default function DocLink({ className = '', url, label }) {
   
   return (
     <div className={className}>
-      <Button variant="outline" onClick={openLink}>
+      <Button variant="text-primary" onClick={openLink}>
           <span className="mr-2">{ label }</span>
           <Icon name="external-link-alt" color="teal" />
       </Button>