diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/cards/Cards.tsx b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/cards/Cards.tsx
index 2345e3b54cc100..d7c7d8c9c347e1 100644
--- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/cards/Cards.tsx
+++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/cards/Cards.tsx
@@ -88,11 +88,25 @@ export default function Cards(props: IFDSViewSectionProps) {
 		);
 	};
 
-	const clearFDSCardSection = async (cardSection: ICardsSection) => {
+	const clearFDSCardSection = async ({
+		cardsSection,
+		closeModal,
+	}: {
+		cardsSection: ICardsSection;
+		closeModal?: Function;
+	}) => {
+		if (!cardsSection.externalReferenceCode) {
+			if (closeModal) {
+				closeModal();
+			}
+
+			return;
+		}
+
 		setSaveButtonDisabled(true);
 
 		const response = await fetch(
-			`${API_URL.FDS_CARDS_SECTIONS}/by-external-reference-code/${cardSection.externalReferenceCode}`,
+			`${API_URL.FDS_CARDS_SECTIONS}/by-external-reference-code/${cardsSection.externalReferenceCode}`,
 			{method: 'DELETE'}
 		);
 
@@ -104,13 +118,17 @@ export default function Cards(props: IFDSViewSectionProps) {
 			return;
 		}
 
+		if (closeModal) {
+			closeModal();
+		}
+
 		setCardsSections(
 			cardsSections.map((section) => {
-				if (section.name !== cardSection.name) {
+				if (section.name !== cardsSection.name) {
 					return section;
 				}
 
-				const nextCardSection = {...cardSection};
+				const nextCardSection = {...cardsSection};
 
 				delete nextCardSection.externalReferenceCode;
 				delete nextCardSection.field;
@@ -118,6 +136,8 @@ export default function Cards(props: IFDSViewSectionProps) {
 				return nextCardSection;
 			})
 		);
+
+		openDefaultSuccessToast();
 	};
 
 	const saveFDSCardsSection = async ({
@@ -161,9 +181,25 @@ export default function Cards(props: IFDSViewSectionProps) {
 			return;
 		}
 
+		const fdsCardSection: IFDSCardsSection = await response.json();
+
 		closeModal();
 
-		getFDSCardsSections();
+		setCardsSections(
+			cardsSections.map((cardSection) => {
+				if (cardSection.name !== fdsCardSection.name) {
+					return cardSection;
+				}
+
+				return {
+					...cardSection,
+					externalReferenceCode: fdsCardSection.externalReferenceCode,
+					field: {
+						name: fdsCardSection.fieldName,
+					},
+				};
+			})
+		);
 
 		openDefaultSuccessToast();
 	};
@@ -209,14 +245,19 @@ export default function Cards(props: IFDSViewSectionProps) {
 							key={cardsSection.name}
 							modalProps={props}
 							onClearSelection={() => {
-								clearFDSCardSection(cardsSection);
+								clearFDSCardSection({cardsSection});
 							}}
 							onSelect={({closeModal, selectedField}) => {
-								saveFDSCardsSection({
-									cardsSection,
-									closeModal,
-									field: selectedField,
-								});
+								selectedField
+									? saveFDSCardsSection({
+											cardsSection,
+											closeModal,
+											field: selectedField,
+									  })
+									: clearFDSCardSection({
+											cardsSection,
+											closeModal,
+									  });
 							}}
 							saveButtonDisabled={saveButtonDisabled}
 						/>
diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/list/List.tsx b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/list/List.tsx
index 7ea0fa887c0349..5710a47383eb8c 100644
--- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/list/List.tsx
+++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/visualization_modes/list/List.tsx
@@ -87,7 +87,21 @@ export default function List(props: IFDSViewSectionProps) {
 		);
 	};
 
-	const clearFDSListSection = async (listSection: IListSection) => {
+	const clearFDSListSection = async ({
+		closeModal,
+		listSection,
+	}: {
+		closeModal?: Function;
+		listSection: IListSection;
+	}) => {
+		if (!listSection.externalReferenceCode) {
+			if (closeModal) {
+				closeModal();
+			}
+
+			return;
+		}
+
 		setSaveButtonDisabled(true);
 
 		const response = await fetch(
@@ -103,6 +117,10 @@ export default function List(props: IFDSViewSectionProps) {
 			return;
 		}
 
+		if (closeModal) {
+			closeModal();
+		}
+
 		setListSections(
 			listSections.map((section) => {
 				if (section.name !== listSection.name) {
@@ -117,6 +135,8 @@ export default function List(props: IFDSViewSectionProps) {
 				return nextListSection;
 			})
 		);
+
+		openDefaultSuccessToast();
 	};
 
 	const saveFDSListSection = async ({
@@ -224,14 +244,19 @@ export default function List(props: IFDSViewSectionProps) {
 							listSection={listSection}
 							modalProps={props}
 							onClearSelection={() => {
-								clearFDSListSection(listSection);
+								clearFDSListSection({listSection});
 							}}
 							onSelect={({closeModal, selectedField}) => {
-								saveFDSListSection({
-									closeModal,
-									field: selectedField,
-									listSection,
-								});
+								selectedField
+									? saveFDSListSection({
+											closeModal,
+											field: selectedField,
+											listSection,
+									  })
+									: clearFDSListSection({
+											closeModal,
+											listSection,
+									  });
 							}}
 							saveButtonDisabled={saveButtonDisabled}
 						/>