diff --git a/app/hooks/scenarios/index.ts b/app/hooks/scenarios/index.ts
index 5e7576ba44..50afaa0ee4 100644
--- a/app/hooks/scenarios/index.ts
+++ b/app/hooks/scenarios/index.ts
@@ -20,6 +20,7 @@ import { useMe } from 'hooks/me';
 import { useProjectUsers } from 'hooks/project-users';
 
 import { ItemProps } from 'components/scenarios/item/component';
+import { CostSurface } from 'types/api/cost-surface';
 import { Job } from 'types/api/job';
 import { Project } from 'types/api/project';
 import { Scenario } from 'types/api/scenario';
@@ -474,11 +475,11 @@ export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
   ]);
 }
 
-export function useScenario(id: Scenario['id']) {
+export function useScenario(id: Scenario['id'], params = {}) {
   const { data: session } = useSession();
 
   return useQuery({
-    queryKey: ['scenario', id],
+    queryKey: ['scenario', id, params],
     queryFn: async () =>
       SCENARIOS.request<{ data: Scenario }>({
         method: 'GET',
@@ -486,6 +487,7 @@ export function useScenario(id: Scenario['id']) {
         headers: {
           Authorization: `Bearer ${session.accessToken}`,
         },
+        params,
       }).then((response) => response.data),
     enabled: !!id,
     placeholderData: {
@@ -1080,3 +1082,45 @@ export function useDownloadSolutionsSummary() {
     },
   });
 }
+
+export function useLinkScenarioToCostSurface() {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+
+  const linkScenario = ({ sid, csid }: { sid: Scenario['id']; csid: CostSurface['id'] }) => {
+    return SCENARIOS.request<unknown>({
+      method: 'POST',
+      url: `/${sid}/cost-surface/${csid}`,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    });
+  };
+
+  return useMutation(linkScenario, {
+    onSuccess: async (data, variables) => {
+      await queryClient.invalidateQueries(['scenario', variables.sid]);
+    },
+  });
+}
+
+export function useUnlinkScenarioToCostSurface() {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+
+  const unlinkScenario = ({ sid }: { sid: Scenario['id'] }) => {
+    return SCENARIOS.request<unknown>({
+      method: 'DELETE',
+      url: `/${sid}/cost-surface`,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    });
+  };
+
+  return useMutation(unlinkScenario, {
+    onSuccess: async (data, variables) => {
+      await queryClient.invalidateQueries(['scenario', variables.sid]);
+    },
+  });
+}
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts
index 15dc04b69c..d458ead34d 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts
@@ -17,7 +17,7 @@ export function bulkDeleteCostSurfaceFromProject(
     pid: Project['id'];
     csid: CostSurface['id'];
   }) => {
-    return PROJECTS.delete(`/${pid}/cost-surface/${csid}`, {
+    return PROJECTS.delete(`/${pid}/cost-surfaces/${csid}`, {
       headers: {
         Authorization: `Bearer ${session.accessToken}`,
       },
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx
index 60f2d46bbe..e82991610c 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import {
   setLayerSettings,
-  setSelectedCostSurfaces as setVisibleCostSurface,
+  setSelectedCostSurface as setVisibleCostSurface,
 } from 'store/slices/projects/[id]';
 
 import { orderBy } from 'lodash';
diff --git a/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
index f01c6c8a66..e5af34d1bb 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
@@ -1,34 +1,74 @@
-import { useCallback, useState } from 'react';
+import { ComponentProps, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Form as FormRFF, FormProps, Field } from 'react-final-form';
 
 import { useRouter } from 'next/router';
 
+import { useAppDispatch } from 'store/hooks';
+import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
+
 import { motion } from 'framer-motion';
+import { sortBy } from 'lodash';
 import { HiOutlineArrowUpOnSquareStack } from 'react-icons/hi2';
 
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
 import { useCanEditScenario } from 'hooks/permissions';
 import { useDownloadShapefileTemplate } from 'hooks/projects';
+import {
+  useLinkScenarioToCostSurface,
+  useUnlinkScenarioToCostSurface,
+  useScenario,
+} from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
+import Select from 'components/forms/select';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import CostSurfaceUploadModal from 'layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/upload';
 import Section from 'layout/section';
+import { Scenario } from 'types/api/scenario';
 
 import COST_LAND_IMG from 'images/info-buttons/img_cost_surface_marine.png';
 import COST_SEA_IMG from 'images/info-buttons/img_cost_surface_terrestrial.png';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
+export type FormFields = {
+  costSurfaceId: Scenario['costSurface']['id'];
+};
+
 export const GridSetupCostSurface = (): JSX.Element => {
   const [opened, setOpened] = useState(false);
   const [successFile, setSuccessFile] = useState<{ name: string }>(null);
-
-  const { addToast } = useToasts();
   const { query } = useRouter();
   const { pid, sid } = query as { pid: string; sid: string };
 
+  const formRef = useRef<FormProps<FormFields>['form']>(null);
+  const dispatch = useAppDispatch();
+  const scenarioSlice = getScenarioEditSlice(sid);
+  const { setSelectedCostSurface, setLayerSettings } = scenarioSlice.actions;
+
+  const { addToast } = useToasts();
+
   const editable = useCanEditScenario(pid, sid);
+  const costSurfaceQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        sortBy(
+          data.filter(({ isDefault }) => !isDefault),
+          'name'
+        )?.map(({ id, name }) => ({ value: id, label: name })),
+    }
+  );
+  const scenarioQuery = useScenario(sid, {
+    include: 'costSurface',
+  });
+  const linkScenarioMutation = useLinkScenarioToCostSurface();
+  const unlinkScenarioMutation = useUnlinkScenarioToCostSurface();
+
   const downloadShapefileTemplateMutation = useDownloadShapefileTemplate();
 
   const onDownload = useCallback(() => {
@@ -55,6 +95,104 @@ export const GridSetupCostSurface = (): JSX.Element => {
     setSuccessFile(null);
   }, []);
 
+  const onChangeCostSurface = useCallback(
+    (value: string) => {
+      formRef.current.change('costSurfaceId', value);
+
+      dispatch(setSelectedCostSurface(value));
+      dispatch(
+        setLayerSettings({
+          id: value,
+          settings: {
+            visibility: true,
+          },
+        })
+      );
+    },
+    [dispatch, setSelectedCostSurface, setLayerSettings]
+  );
+
+  const handleCostSurfaceChange = useCallback(
+    (data: Parameters<ComponentProps<typeof FormRFF<FormFields>>['onSubmit']>[0]) => {
+      if (!data.costSurfaceId) {
+        return unlinkScenarioMutation.mutate(
+          { sid },
+          {
+            onSuccess: () => {
+              addToast(
+                'scenario-cost-surface-unlink-success',
+                <>
+                  <h2 className="font-medium">Cost surface unlinked successfully</h2>
+                </>,
+                {
+                  level: 'success',
+                }
+              );
+            },
+            onError: () => {
+              addToast(
+                'scenario-cost-surface-error',
+                <>
+                  <h2 className="font-medium">Something went wrong</h2>
+                  <ul className="text-sm">Cost surface could not be unlinke.</ul>
+                </>,
+                {
+                  level: 'error',
+                }
+              );
+            },
+          }
+        );
+      }
+
+      linkScenarioMutation.mutate(
+        { sid, csid: data.costSurfaceId },
+        {
+          onSuccess: () => {
+            addToast(
+              'scenario-cost-surface-success',
+              <>
+                <h2 className="font-medium">Cost surface applied successfully</h2>
+              </>,
+              {
+                level: 'success',
+              }
+            );
+          },
+          onError: () => {
+            addToast(
+              'scenario-cost-surface-error',
+              <>
+                <h2 className="font-medium">Something went wrong</h2>
+                <ul className="text-sm">Cost surface could not be updated</ul>
+              </>,
+              {
+                level: 'error',
+              }
+            );
+          },
+        }
+      );
+    },
+    [linkScenarioMutation, unlinkScenarioMutation, sid, addToast]
+  );
+
+  useEffect(() => {
+    if (scenarioQuery.isSuccess) {
+      const costSurfaceId = scenarioQuery.data.costSurface?.id;
+      dispatch(setSelectedCostSurface(costSurfaceId));
+
+      dispatch(
+        setLayerSettings({
+          id: costSurfaceId,
+          settings: {
+            visibility: true,
+          },
+        })
+      );
+    }
+  }, [scenarioQuery, dispatch, setSelectedCostSurface, setLayerSettings]);
+
   return (
     <motion.div
       key="cost-surface"
@@ -94,8 +232,52 @@ export const GridSetupCostSurface = (): JSX.Element => {
           </div>
         </div>
 
+        <FormRFF<FormFields>
+          onSubmit={handleCostSurfaceChange}
+          initialValues={{
+            costSurfaceId: scenarioQuery.data.costSurface?.id || null,
+          }}
+          keepDirtyOnReinitialize
+        >
+          {(fprops) => {
+            formRef.current = fprops.form;
+
+            return (
+              <form
+                id="form-cost-surface-scenario"
+                onSubmit={fprops.handleSubmit}
+                autoComplete="off"
+                className="space-y-3"
+              >
+                <Field name="costSurfaceId">
+                  {() => (
+                    <Select
+                      maxHeight={300}
+                      size="base"
+                      theme="dark"
+                      selected={fprops.values.costSurfaceId}
+                      options={costSurfaceQuery.data}
+                      clearSelectionActive
+                      onChange={onChangeCostSurface}
+                    />
+                  )}
+                </Field>
+                <Button
+                  type="submit"
+                  theme="primary-alt"
+                  size="base"
+                  className="w-full"
+                  disabled={!fprops.dirty}
+                >
+                  Apply cost surface
+                </Button>
+              </form>
+            );
+          }}
+        </FormRFF>
+
         <div className="relative mt-1 flex min-h-0 w-full flex-grow flex-col overflow-hidden text-sm">
-          <p className="pt-2">
+          <p className="mt-2 text-xs">
             By default all projects have an equal area cost surface which means that planning units
             with the same area have the same cost
           </p>
diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts
index 98b8d0dabf..ab8479393a 100644
--- a/app/layout/projects/show/map/legend/hooks/index.ts
+++ b/app/layout/projects/show/map/legend/hooks/index.ts
@@ -5,7 +5,7 @@ import {
   setSelectedFeatures,
   setLayerSettings,
   setSelectedWDPAs as setVisibleWDPAs,
-  setSelectedCostSurfaces as setVisibleCostSurface,
+  setSelectedCostSurface as setVisibleCostSurface,
 } from 'store/slices/projects/[id]';
 
 import chroma from 'chroma-js';
diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
index 973a015f42..65421fc0f7 100644
--- a/app/layout/scenarios/edit/map/component.tsx
+++ b/app/layout/scenarios/edit/map/component.tsx
@@ -11,6 +11,7 @@ import { sortBy } from 'lodash';
 import { FiLayers } from 'react-icons/fi';
 
 import { useAccessToken } from 'hooks/auth';
+import { useProjectCostSurface } from 'hooks/cost-surface';
 import { useSelectedFeatures, useTargetedFeatures } from 'hooks/features';
 import { useAllGapAnalysis } from 'hooks/gap-analysis';
 import {
@@ -22,6 +23,7 @@ import {
   // useLegend,
   useBBOX,
   useTargetedPreviewLayers,
+  useCostSurfaceLayer,
 } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 import { useCostSurfaceRange, useScenario, useScenarioPU } from 'hooks/scenarios';
@@ -50,6 +52,9 @@ import { centerMap } from 'utils/map';
 
 import { useScenarioLegend } from './legend/hooks';
 
+const minZoom = 2;
+const maxZoom = 20;
+
 export const ScenariosEditMap = (): JSX.Element => {
   const [open, setOpen] = useState(true);
   const [mapInteractive, setMapInteractive] = useState(false);
@@ -200,8 +205,8 @@ export const ScenariosEditMap = (): JSX.Element => {
   });
   const bestSolution = bestSolutionData;
 
-  const minZoom = 2;
-  const maxZoom = 20;
+  const costSurfaceQuery = useProjectCostSurface(pid, selectedCostSurface);
+
   const [viewport, setViewport] = useState({});
   const [bounds, setBounds] = useState<MapProps['bounds']>(null);
 
@@ -307,33 +312,27 @@ export const ScenariosEditMap = (): JSX.Element => {
     },
   });
 
+  const costSurfaceLayer = useCostSurfaceLayer({
+    active: Boolean(selectedCostSurface) && costSurfaceQuery.isSuccess,
+    pid,
+    costSurfaceId: selectedCostSurface,
+    layerSettings: {
+      ...layerSettings[selectedCostSurface],
+      min: costSurfaceQuery.data?.min,
+      max: costSurfaceQuery.data?.max,
+    } as Parameters<typeof useCostSurfaceLayer>[0]['layerSettings'],
+  });
+
   const LAYERS = [
     // PUGridPreviewLayer,
     // AdminPreviewLayer,
     PUGridLayer,
+    costSurfaceLayer,
     WDPApreviewLayer,
     ...FeaturePreviewLayers,
     ...TargetedPreviewLayers,
   ].filter((l) => !!l);
 
-  // const LEGEND = useLegend({
-  //   layers,
-  //   options: {
-  //     wdpaIucnCategories: protectedAreas,
-  //     wdpaThreshold:
-  //       tab === TABS['scenario-protected-areas'] ? wdpaThreshold : scenarioData?.wdpaThreshold,
-  //     cost: costSurfaceRangeData,
-  //     items: selectedPreviewFeatures,
-  //     puAction,
-  //     puIncludedValue: [...puIncludedValue, ...puTmpIncludedValue],
-  //     puExcludedValue: [...puExcludedValue, ...puTmpExcludedValue],
-  //     puAvailableValue: [...puAvailableValue, ...puTmpAvailableValue],
-  //     runId: selectedSolution?.runId || bestSolution?.runId,
-  //     numberOfRuns: scenarioData?.numberOfRuns || 0,
-  //     layerSettings,
-  //   },
-  // });
-
   useEffect(() => {
     setBounds({
       bbox: BBOX,
diff --git a/app/store/slices/projects/[id].ts b/app/store/slices/projects/[id].ts
index 56ece7ffda..84bdcccbc4 100644
--- a/app/store/slices/projects/[id].ts
+++ b/app/store/slices/projects/[id].ts
@@ -76,7 +76,7 @@ const projectsDetailSlice = createSlice({
       state.selectedFeatures = action.payload;
     },
     // COST SURFACE
-    setSelectedCostSurfaces: (
+    setSelectedCostSurface: (
       state,
       action: PayloadAction<ProjectShowStateProps['selectedCostSurface']>
     ) => {
@@ -95,7 +95,7 @@ export const {
   setSort,
   setLayerSettings,
   setSelectedFeatures,
-  setSelectedCostSurfaces,
+  setSelectedCostSurface,
   setSelectedWDPAs,
   setSidebarVisibility,
 } = projectsDetailSlice.actions;
diff --git a/app/types/api/scenario.ts b/app/types/api/scenario.ts
index 0d7ea3bb4e..6f69fb3a8c 100644
--- a/app/types/api/scenario.ts
+++ b/app/types/api/scenario.ts
@@ -1,5 +1,7 @@
 import { Job } from 'types/api/job';
 
+import { CostSurface } from './cost-surface';
+
 export interface Scenario {
   id: string;
   projectId: number;
@@ -9,6 +11,12 @@ export interface Scenario {
   lastUpdate: string;
   lock?: Record<string, any>;
   lastUpdateDistance: string;
+  costSurface: {
+    type: 'costSurfaces';
+    id: CostSurface['id'];
+    name: CostSurface['name'];
+    isDefault: CostSurface['isDefault'];
+  };
   name: string;
   numberOfRuns: number;
   metadata: {