diff --git a/frontend/src/component/addons/AddonList/AddonList.jsx b/frontend/src/component/addons/AddonList/AddonList.jsx
index 0e0f3a4b8d..a849d2672b 100644
--- a/frontend/src/component/addons/AddonList/AddonList.jsx
+++ b/frontend/src/component/addons/AddonList/AddonList.jsx
@@ -1,5 +1,4 @@
-import React, { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
 import ConfiguredAddons from './ConfiguredAddons';
 import AvailableAddons from './AvailableAddons';
 import { Avatar } from '@material-ui/core';
@@ -14,6 +13,8 @@ import webhooksIcon from '../../../assets/icons/webhooks.svg';
 import teamsIcon from '../../../assets/icons/teams.svg';
 import dataDogIcon from '../../../assets/icons/datadog.svg';
 import { formatAssetPath } from '../../../utils/format-path';
+import useAddons from '../../../hooks/api/getters/useAddons/useAddons';
+import { useHistory } from 'react-router-dom';
 
 const style = {
     width: '40px',
@@ -73,18 +74,14 @@ const getIcon = name => {
     }
 };
 
-const AddonList = ({
-    addons,
-    providers,
-    fetchAddons,
-    removeAddon,
-    toggleAddon,
-    history,
-}) => {
+const AddonList = () => {
     const { hasAccess } = useContext(AccessContext);
+    const { addons, providers, refetchAddons } = useAddons();
+    const history = useHistory();
+
     useEffect(() => {
         if (addons.length === 0) {
-            fetchAddons();
+            refetchAddons();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [addons.length]);
@@ -96,9 +93,7 @@ const AddonList = ({
                 show={
                     <ConfiguredAddons
                         addons={addons}
-                        toggleAddon={toggleAddon}
                         hasAccess={hasAccess}
-                        removeAddon={removeAddon}
                         getIcon={getIcon}
                     />
                 }
@@ -115,13 +110,4 @@ const AddonList = ({
     );
 };
 
-AddonList.propTypes = {
-    addons: PropTypes.array.isRequired,
-    providers: PropTypes.array.isRequired,
-    fetchAddons: PropTypes.func.isRequired,
-    removeAddon: PropTypes.func.isRequired,
-    toggleAddon: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
-};
-
 export default AddonList;
diff --git a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.jsx b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.jsx
index 95fb25e755..138881d9bc 100644
--- a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.jsx
+++ b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.jsx
@@ -13,6 +13,8 @@ import { CREATE_ADDON } from '../../../providers/AccessProvider/permissions';
 import PropTypes from 'prop-types';
 
 const AvailableAddons = ({ providers, getIcon, hasAccess, history }) => {
+    
+    console.log('this is ', providers)
     const renderProvider = provider => (
         <ListItem key={provider.name}>
             <ListItemAvatar>{getIcon(provider.name)}</ListItemAvatar>
diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.jsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.jsx
index 7346408721..4b6b23e9ab 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.jsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.jsx
@@ -17,15 +17,51 @@ import {
 import { Link } from 'react-router-dom';
 import PageContent from '../../../common/PageContent/PageContent';
 import PropTypes from 'prop-types';
+import useAddons from '../../../../hooks/api/getters/useAddons/useAddons';
+import useToast from '../../../../hooks/useToast';
+import useAddonsApi from '../../../../hooks/api/actions/useAddonsApi/useAddonsApi';
+
+const ConfiguredAddons = ({ addons, hasAccess, getIcon }) => {
+    const { refetchAddons } = useAddons();
+    const { updateAddon, removeAddon } = useAddonsApi();
+    const { setToastData } = useToast();
+
+    const toggleAddon = async addon => {
+        try {
+            await updateAddon({ ...addon, enabled: !addon.enabled });
+            refetchAddons();
+            setToastData({
+                type: 'success',
+                title: 'Success',
+                text: 'Addon state switched successfully',
+            });
+        } catch (e) {
+            setToastData({
+                type: 'error',
+                title: 'Error',
+                text: 'Can not change addon state',
+            });
+        }
+    };
+
+    const onRemoveAddon = addon => async () => {
+        try {
+            await removeAddon(addon.id);
+            refetchAddons();
+            setToastData({
+                type: 'success',
+                title: 'Success',
+                text: 'Deleted addon successfully',
+            });
+        } catch (e) {
+            setToastData({
+                type: 'error',
+                title: 'Error',
+                text: 'Can not delete addon',
+            });
+        }
+    };
 
-const ConfiguredAddons = ({
-    addons,
-    hasAccess,
-    removeAddon,
-    getIcon,
-    toggleAddon,
-}) => {
-    const onRemoveAddon = addon => () => removeAddon(addon);
     const renderAddon = addon => (
         <ListItem key={addon.id}>
             <ListItemAvatar>{getIcon(addon.provider)}</ListItemAvatar>
@@ -95,7 +131,6 @@ const ConfiguredAddons = ({
 ConfiguredAddons.propTypes = {
     addons: PropTypes.array.isRequired,
     hasAccess: PropTypes.func.isRequired,
-    removeAddon: PropTypes.func.isRequired,
     toggleAddon: PropTypes.func.isRequired,
     getIcon: PropTypes.func.isRequired,
 };
diff --git a/frontend/src/component/addons/form-addon-component.jsx b/frontend/src/component/addons/form-addon-component.jsx
index ab8fa4260f..e4483d6593 100644
--- a/frontend/src/component/addons/form-addon-component.jsx
+++ b/frontend/src/component/addons/form-addon-component.jsx
@@ -10,15 +10,15 @@ import cloneDeep from 'lodash.clonedeep';
 
 import styles from './form-addon-component.module.scss';
 import PageContent from '../common/PageContent/PageContent';
+import useAddonsApi from '../../hooks/api/actions/useAddonsApi/useAddonsApi';
+import useToast from '../../hooks/useToast';
+import { useHistory } from 'react-router-dom';
+
+const AddonFormComponent = ({ editMode, provider, addon, fetch }) => {
+    const { createAddon, updateAddon } = useAddonsApi();
+    const { setToastData, setToastApiError } = useToast();
+    const history = useHistory();
 
-const AddonFormComponent = ({
-    editMode,
-    provider,
-    addon,
-    fetch,
-    cancel,
-    submit,
-}) => {
     const [config, setConfig] = useState(addon);
     const [errors, setErrors] = useState({
         parameters: {},
@@ -73,6 +73,10 @@ const AddonFormComponent = ({
         setErrors({ ...errors, events: undefined });
     };
 
+    const handleCancel = () => {
+        history.goBack();
+    };
+
     const onSubmit = async evt => {
         evt.preventDefault();
         if (!provider) return;
@@ -100,8 +104,25 @@ const AddonFormComponent = ({
         }
 
         try {
-            await submit(config);
+            if (editMode) {
+                await updateAddon(config);
+                history.push('/addons');
+                setToastData({
+                    type: 'success',
+                    title: 'Addon updated successfully',
+                });
+            } else {
+                await createAddon(config);
+                history.push('/addons');
+                setToastData({
+                    type: 'success',
+                    title: 'Addon created successfully',
+                });
+            }
         } catch (e) {
+            setToastApiError({
+                text: e.toString(),
+            });
             setErrors({ parameters: {}, general: e.message });
         }
     };
@@ -175,7 +196,7 @@ const AddonFormComponent = ({
                     />
                 </section>
                 <section className={styles.formSection}>
-                    <FormButtons submitText={submitText} onCancel={cancel} />
+                    <FormButtons submitText={submitText} onCancel={handleCancel} />
                 </section>
             </form>
         </PageContent>
diff --git a/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts b/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
index 2dd5b48536..bf2e8855b6 100644
--- a/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
+++ b/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
@@ -1,8 +1,7 @@
-import { SWRConfiguration } from 'swr';
 import { IAddons } from '../../../../interfaces/addons';
 import useAPI from '../useApi/useApi';
 
-const useAddonsApi = (options: SWRConfiguration = {}) => {
+const useAddonsApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
diff --git a/frontend/src/hooks/api/getters/useAddons/useAddons.ts b/frontend/src/hooks/api/getters/useAddons/useAddons.ts
index 9479641740..24c29c22aa 100644
--- a/frontend/src/hooks/api/getters/useAddons/useAddons.ts
+++ b/frontend/src/hooks/api/getters/useAddons/useAddons.ts
@@ -17,7 +17,7 @@ const useAddons = (options: SWRConfiguration = {}) => {
     const { data, error } = useSWR(KEY, fetcher, options);
     const [loading, setLoading] = useState(!error && !data);
 
-    const refetch = () => {
+    const refetchAddons = () => {
         mutate(KEY);
     };
 
@@ -26,10 +26,11 @@ const useAddons = (options: SWRConfiguration = {}) => {
     }, [data, error]);
 
     return {
-        addons: data || [],
+        addons: data?.addons || [],
+        providers: data?.providers || [],
         error,
         loading,
-        refetch,
+        refetchAddons,
     };
 };