diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
index 83319959a..1d0990847 100644
--- a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
@@ -5,6 +5,7 @@ import AssistScript from './AssistScript';
 import AssistNpm from './AssistNpm';
 import { Tabs } from 'UI';
 import { useState } from 'react';
+import { connect } from 'react-redux';
 
 const NPM = 'NPM';
 const SCRIPT = 'SCRIPT';
@@ -53,4 +54,4 @@ const AssistDoc = (props) => {
 
 AssistDoc.displayName = 'AssistDoc';
 
-export default AssistDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(AssistDoc)
diff --git a/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js b/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
index 5290babd7..80ae5e0a7 100644
--- a/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
+++ b/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const AxiosDoc = (props) => {
     const { projectKey } = props;
@@ -65,4 +66,4 @@ function MyApp() {
 
 AxiosDoc.displayName = 'AxiosDoc';
 
-export default AxiosDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(AxiosDoc)
diff --git a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js b/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
index 5dbc0734c..761d4160b 100644
--- a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
+++ b/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const FetchDoc = (props) => {
     const { projectKey } = props;
@@ -69,4 +70,4 @@ fetch('https://api.openreplay.com/').then(response => console.log(response.json(
 
 FetchDoc.displayName = 'FetchDoc';
 
-export default FetchDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(FetchDoc)
diff --git a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
index 36e883f25..e8779f962 100644
--- a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
+++ b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import DocLink from 'Shared/DocLink/DocLink';
 import ToggleContent from 'Shared/ToggleContent';
+import { connect } from 'react-redux';
 
 const GraphQLDoc = (props) => {
     const { projectKey } = props;
@@ -69,4 +70,4 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`}
 
 GraphQLDoc.displayName = 'GraphQLDoc';
 
-export default GraphQLDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(GraphQLDoc)
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index c418a0529..8e301ac8a 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -156,7 +156,7 @@ const integrations = [
     },
     {
         title: 'Plugins',
-        isProject: false,
+        isProject: true,
         description:
             "Reproduce issues as if they happened in your own browser. Plugins help capture your application's store, HTTP requeets, GraphQL queries, and more.",
         integrations: [
diff --git a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
index bbe36d45b..127839feb 100644
--- a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
+++ b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const MobxDoc = (props) => {
     const { projectKey } = props;
@@ -66,4 +67,4 @@ function SomeFunctionalComponent() {
 
 MobxDoc.displayName = 'MobxDoc';
 
-export default MobxDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(MobxDoc)
diff --git a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
index 956e4f57e..0e508af2b 100644
--- a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
+++ b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const NgRxDoc = (props) => {
     const { projectKey } = props;
@@ -79,4 +80,4 @@ const metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of ava
 
 NgRxDoc.displayName = 'NgRxDoc';
 
-export default NgRxDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(NgRxDoc)
diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
index f5ffab724..092a0778a 100644
--- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
+++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const ProfilerDoc = (props) => {
     const { projectKey } = props;
@@ -73,4 +74,4 @@ const fn = profiler('call_name')(() => {
 
 ProfilerDoc.displayName = 'ProfilerDoc';
 
-export default ProfilerDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ProfilerDoc)
diff --git a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
index e16eecbba..e154c80bd 100644
--- a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
+++ b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from '../../../shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const ReduxDoc = (props) => {
     const { projectKey } = props;
@@ -72,4 +73,4 @@ const store = createStore(
 
 ReduxDoc.displayName = 'ReduxDoc';
 
-export default ReduxDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ReduxDoc)
diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 7d0cdc610..79c6b2a00 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -7,14 +7,12 @@ import { useModal } from 'App/components/Modal';
 import { Button } from 'UI';
 
 interface Props {
-    onEdit: (integration: any) => void;
+    onEdit?: (integration: any) => void;
     istance: any;
     fetchList: any;
     init: any;
 }
 const SlackForm = (props: Props) => {
-    const { istance } = props;
-    const { hideModal } = useModal();
     const [active, setActive] = React.useState(false);
 
     const onEdit = () => {
diff --git a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
index cece7c01e..c2ad189d1 100644
--- a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
+++ b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight from 'react-highlight';
 import ToggleContent from '../../../shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
 
 const VueDoc = (props) => {
     const { projectKey } = props;
@@ -75,4 +76,4 @@ const store = new Vuex.Store({
 
 VueDoc.displayName = 'VueDoc';
 
-export default VueDoc;
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(VueDoc)