diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
index 4e4e2c4cd91..ae8451e3bdb 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
@@ -38,8 +38,9 @@ const FeatureOverviewEnvSwitch = ({
     const {
         onSuggestToggle,
         onSuggestToggleClose,
+        onSuggestToggleConfirm,
         suggestChangesDialogDetails,
-    } = useSuggestToggle();
+    } = useSuggestToggle(projectId);
 
     const handleToggleEnvironmentOn = async () => {
         try {
@@ -123,7 +124,7 @@ const FeatureOverviewEnvSwitch = ({
                 onClose={onSuggestToggleClose}
                 featureName={featureId}
                 environment={suggestChangesDialogDetails?.environment}
-                onConfirm={() => {}}
+                onConfirm={onSuggestToggleConfirm}
             />
         </div>
     );
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 2a81cc61e3e..3fc6f8db921 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -104,8 +104,9 @@ export const ProjectFeatureToggles = ({
     const {
         onSuggestToggle,
         onSuggestToggleClose,
+        onSuggestToggleConfirm,
         suggestChangesDialogDetails,
-    } = useSuggestToggle();
+    } = useSuggestToggle(projectId);
 
     const onToggle = useCallback(
         async (
@@ -521,7 +522,7 @@ export const ProjectFeatureToggles = ({
                 onClose={onSuggestToggleClose}
                 featureName={suggestChangesDialogDetails?.featureName}
                 environment={suggestChangesDialogDetails?.environment}
-                onConfirm={() => {}}
+                onConfirm={onSuggestToggleConfirm}
             />
         </PageContent>
     );
diff --git a/frontend/src/component/suggestChanges/DraftBanner/DraftBanner.tsx b/frontend/src/component/suggestChanges/DraftBanner/DraftBanner.tsx
index e46101b4e62..8d60898522c 100644
--- a/frontend/src/component/suggestChanges/DraftBanner/DraftBanner.tsx
+++ b/frontend/src/component/suggestChanges/DraftBanner/DraftBanner.tsx
@@ -17,7 +17,7 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ environment }) => {
         <Box
             sx={{
                 position: 'sticky',
-                top: 0,
+                top: -1,
                 zIndex: theme => theme.zIndex.appBar,
                 borderTop: theme => `1px solid ${theme.palette.warning.border}`,
                 borderBottom: theme =>
diff --git a/frontend/src/component/suggestChanges/SuggestChangeConfirmDialog/SuggestChangeConfirmDialog.tsx b/frontend/src/component/suggestChanges/SuggestChangeConfirmDialog/SuggestChangeConfirmDialog.tsx
index b1b451622df..1eb5ff04768 100644
--- a/frontend/src/component/suggestChanges/SuggestChangeConfirmDialog/SuggestChangeConfirmDialog.tsx
+++ b/frontend/src/component/suggestChanges/SuggestChangeConfirmDialog/SuggestChangeConfirmDialog.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react';
-import { Alert, Box, Typography } from '@mui/material';
+import { Alert, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import useToast from 'hooks/useToast';
-import { formatUnknownError } from 'utils/formatUnknownError';
 
 interface ISuggestChangesDialogueProps {
     isOpen: boolean;
@@ -20,39 +18,26 @@ export const SuggestChangesDialogue: FC<ISuggestChangesDialogueProps> = ({
     enabled,
     featureName,
     environment,
-}) => {
-    const { setToastData, setToastApiError } = useToast();
-
-    const onSuggestClick = async () => {
-        try {
-            alert('Suggesting changes');
-            onConfirm();
-        } catch (error: unknown) {
-            setToastApiError(formatUnknownError(error));
-        }
-    };
-
-    return (
-        <Dialogue
-            open={isOpen}
-            primaryButtonText="Add to draft"
-            secondaryButtonText="Cancel"
-            onClick={onSuggestClick}
-            onClose={onClose}
-            title="Suggest changes"
-        >
-            <Alert severity="info" sx={{ mb: 2 }}>
-                Suggest changes is enabled for {environment}. Your changes needs
-                to be approved before they will be live. All the changes you do
-                now will be added into a draft that you can submit for review.
-            </Alert>
-            <Typography variant="body2" color="text.secondary">
-                Suggested changes:
-            </Typography>
-            <Typography>
-                <strong>{enabled ? 'Disable' : 'Enable'}</strong> feature toggle{' '}
-                <strong>{featureName}</strong> in <strong>{environment}</strong>
-            </Typography>
-        </Dialogue>
-    );
-};
+}) => (
+    <Dialogue
+        open={isOpen}
+        primaryButtonText="Add to draft"
+        secondaryButtonText="Cancel"
+        onClick={onConfirm}
+        onClose={onClose}
+        title="Suggest changes"
+    >
+        <Alert severity="info" sx={{ mb: 2 }}>
+            Suggest changes is enabled for {environment}. Your changes needs to
+            be approved before they will be live. All the changes you do now
+            will be added into a draft that you can submit for review.
+        </Alert>
+        <Typography variant="body2" color="text.secondary">
+            Suggested changes:
+        </Typography>
+        <Typography>
+            <strong>{enabled ? 'Disable' : 'Enable'}</strong> feature toggle{' '}
+            <strong>{featureName}</strong> in <strong>{environment}</strong>
+        </Typography>
+    </Dialogue>
+);
diff --git a/frontend/src/hooks/api/actions/useSuggestChangeApi/useSuggestChangeApi.ts b/frontend/src/hooks/api/actions/useSuggestChangeApi/useSuggestChangeApi.ts
new file mode 100644
index 00000000000..7ed4eeda859
--- /dev/null
+++ b/frontend/src/hooks/api/actions/useSuggestChangeApi/useSuggestChangeApi.ts
@@ -0,0 +1,40 @@
+import useAPI from '../useApi/useApi';
+
+interface ISuggestChangeSchema {
+    feature: string;
+    action:
+        | 'updateEnabled'
+        | 'strategyAdd'
+        | 'strategyUpdate'
+        | 'strategyDelete';
+    payload: string | boolean | object | number;
+}
+
+export const useSuggestChangeApi = (project: string) => {
+    const { makeRequest, createRequest, errors, loading } = useAPI({
+        propagateErrors: true,
+    });
+
+    const addSuggestion = async (
+        environment: string,
+        payload: ISuggestChangeSchema
+    ) => {
+        const path = `api/admin/projects/${project}/environments/${environment}/suggest-changes`;
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
+        try {
+            const response = await makeRequest(req.caller, req.id);
+            return await response.json();
+        } catch (e) {
+            throw e;
+        }
+    };
+
+    return {
+        addSuggestion,
+        errors,
+        loading,
+    };
+};
diff --git a/frontend/src/hooks/useSuggestToggle.ts b/frontend/src/hooks/useSuggestToggle.ts
index 29ab1b0cd18..5048164bb4b 100644
--- a/frontend/src/hooks/useSuggestToggle.ts
+++ b/frontend/src/hooks/useSuggestToggle.ts
@@ -1,6 +1,11 @@
 import { useCallback, useState } from 'react';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
+import { useSuggestChangeApi } from './api/actions/useSuggestChangeApi/useSuggestChangeApi';
 
-export const useSuggestToggle = () => {
+export const useSuggestToggle = (project: string) => {
+    const { setToastData, setToastApiError } = useToast();
+    const { addSuggestion } = useSuggestChangeApi(project);
     const [suggestChangesDialogDetails, setSuggestChangesDialogDetails] =
         useState<{
             enabled?: boolean;
@@ -25,9 +30,30 @@ export const useSuggestToggle = () => {
         setSuggestChangesDialogDetails({ isOpen: false });
     }, []);
 
+    const onSuggestToggleConfirm = useCallback(async () => {
+        try {
+            await addSuggestion(suggestChangesDialogDetails.environment!, {
+                feature: suggestChangesDialogDetails.featureName!,
+                action: 'updateEnabled',
+                payload: {
+                    enabled: Boolean(suggestChangesDialogDetails.enabled),
+                },
+            });
+            setSuggestChangesDialogDetails({ isOpen: false });
+            setToastData({
+                type: 'success',
+                title: 'Changes added to the draft!',
+            });
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
+            setSuggestChangesDialogDetails({ isOpen: false });
+        }
+    }, [addSuggestion]);
+
     return {
         onSuggestToggle,
         onSuggestToggleClose,
+        onSuggestToggleConfirm,
         suggestChangesDialogDetails,
     };
 };