diff --git a/package.json b/package.json
index a7402951..625742ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qryn-view",
-  "version": "3.2.11",
+  "version": "3.3.0",
   "description": "Data Explorer UI for qryn",
   "repository": {
     "type": "git",
diff --git a/packages/main/package.json b/packages/main/package.json
index f0aa75e4..ec2a31eb 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ui/main",
   "private": true,
-  "version": "3.2.11",
+  "version": "3.3.0",
   "type": "module",
   "scripts": {
     "dev": "VITE_APP_VERSION=$npm_package_version vite",
diff --git a/packages/main/qrynui/Table/models/tableModels.tsx b/packages/main/qrynui/Table/models/tableModels.tsx
index c376fd57..e3a73564 100644
--- a/packages/main/qrynui/Table/models/tableModels.tsx
+++ b/packages/main/qrynui/Table/models/tableModels.tsx
@@ -12,7 +12,6 @@ import {
     RankingInfo,
 } from "@tanstack/match-sorter-utils";
 
-
 export const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
     // Rank the item
     const itemRank = rankItem(row.getValue(columnId), value);
@@ -49,24 +48,22 @@ export const defaultColumn: Partial<ColumnDef<any>> = {
     cell: (info: any) => info.getValue(),
 };
 
-
 export const getTableMeta = (
     setData: React.Dispatch<React.SetStateAction<any[]>>,
     skipAutoResetPageIndex: () => void
-) =>
-    ({
-        updateData: (rowIndex, columnId, value) => {
-            // Skip age index reset until after next rerender
-            skipAutoResetPageIndex();
-            setData((old) =>
-                old.map((row, index) => {
-                    if (index !== rowIndex) return row;
+): TableMeta => ({
+    updateData: (rowIndex, columnId, value) => {
+        // Skip age index reset until after next rerender
+        skipAutoResetPageIndex();
+        setData((old) =>
+            old.map((row, index) => {
+                if (index !== rowIndex) return row;
 
-                    return {
-                        ...old[rowIndex]!,
-                        [columnId]: value,
-                    };
-                })
-            );
-        },
-    } as TableMeta);
+                return {
+                    ...old[rowIndex]!,
+                    [columnId]: value,
+                };
+            })
+        );
+    },
+});
diff --git a/packages/main/src/components/DataViews/components/Charts/index.tsx b/packages/main/src/components/DataViews/components/Charts/QrynChart.tsx
similarity index 77%
rename from packages/main/src/components/DataViews/components/Charts/index.tsx
rename to packages/main/src/components/DataViews/components/Charts/QrynChart.tsx
index b86b94cd..2c31e624 100644
--- a/packages/main/src/components/DataViews/components/Charts/index.tsx
+++ b/packages/main/src/components/DataViews/components/Charts/QrynChart.tsx
@@ -9,7 +9,7 @@ import "react-flot/flot-override/jquery.flot.resize";
 import "react-flot/flot/jquery.flot.stack.min.js";
 //React
 import { useState, useEffect, useRef, useMemo } from "react";
-import { useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
 //Packages
 import moment from "moment";
 import { format } from "date-fns";
@@ -37,14 +37,43 @@ import UseTooltip from "./UseTooltip";
 import { useChartOptions, useMatrixData } from "./hooks";
 import { FlotChart } from "./FlotChart";
 import useTheme from "@ui/theme/useTheme";
-
-
-export default function QrynChart(props: any): any {
+import { type QueryType } from "@ui/store/actions/types";
+
+export type ActualQuery = {
+    id: string;
+    expr: string;
+    dataSourceType: string;
+    queryType: QueryType;
+    limit: number;
+    panel: any;
+    isLogsVolume: boolean;
+    start: any;
+    stop: any;
+};
+
+export type QrynChartProps = {
+    matrixData?: any;
+    actualQuery?: ActualQuery;
+    type?: string;
+    tWidth?: any;
+    vHeight?: any;
+};
+
+export default function QrynChart(props: QrynChartProps) {
     const { matrixData, actualQuery, type } = props;
     const { tWidth } = props;
 
-    const { expr, dataSourceType, queryType, limit, panel, id, isLogsVolume } =
-        actualQuery;
+    const {
+        expr,
+        dataSourceType,
+        queryType,
+        limit,
+        panel,
+        id,
+        isLogsVolume,
+        start,
+        stop,
+    } = actualQuery;
 
     const chartRef = useRef(null);
 
@@ -59,6 +88,7 @@ export default function QrynChart(props: any): any {
         matrixData,
         isLogsVolume && type === "stream"
     );
+
     const dispatch: any = useDispatch();
 
     const [isSpliced, setIsSpliced] = useState(true);
@@ -78,17 +108,9 @@ export default function QrynChart(props: any): any {
     const [chartOptions, setChartOptions] = useState(chartOpts);
 
     const getInitialChartType = useMemo(() => {
+        if (isLogsVolume && type === "stream") return "bar";
         let localType = getTypeFromLocal();
-        if (isLogsVolume && type === "stream") {
-            return "bar";
-        } else {
-            if (localType !== "") {
-                return localType;
-            } else {
-                return "line";
-            }
-        }
-           
+        return localType ?? "line"
     }, [isLogsVolume]);
 
     const [chartType, setChartType] = useState(getInitialChartType);
@@ -100,7 +122,17 @@ export default function QrynChart(props: any): any {
         }
 
         const chartSeries = setChartTypeSeries(type, barWidth);
-        const { timeformat, min, max } = formatDateRange(data);
+
+        const startDate = new Date(start).getTime() * 1000;
+
+        const stopDate = new Date(stop).getTime() * 1000;
+
+        const { timeformat, min, max } = formatDateRange(
+            data,
+            startDate,
+            stopDate
+        );
+
         return $q.plot(
             element,
             data,
@@ -113,7 +145,9 @@ export default function QrynChart(props: any): any {
 
     function onSetChartType(type: any) {
         const element = $q(chartRef.current);
+
         const data = isSpliced ? chartData : allData;
+
         const newData = getNewData(data, type);
 
         try {
@@ -134,9 +168,10 @@ export default function QrynChart(props: any): any {
         event.preventDefault();
 
         let newData = [];
-        const lSelected =
+        const labels_selected =
             JSON.parse(localStorage.getItem("labelsSelected") || "null") || [];
-        if (lSelected?.length > 0) {
+        // if there are labels already selected
+        if (labels_selected?.length > 0) {
             let barWidth = 0;
             if (isLogsVolume && type === "stream") {
                 barWidth = getBarWidth(getTimeSpan(data), tWidth);
@@ -147,7 +182,7 @@ export default function QrynChart(props: any): any {
                 barWidth,
                 isLogsVolume && type === "stream"
             );
-            const ids = lSelected?.map((m: any) => m.id);
+            const ids = labels_selected?.map((m: any) => m.id);
             const dataMapped = data?.map((series: any) => {
                 if (!ids.includes(series.id)) {
                     return {
@@ -170,20 +205,32 @@ export default function QrynChart(props: any): any {
                     };
                 }
             });
+       
             newData = dataMapped;
+            setChartData(() => dataMapped);
         } else {
+          
+            setChartData(() => data);
             newData = data;
         }
 
         try {
+            //
+            // const startDate = (new Date(start).getTime()) * 1000
+
+            // const stopDate = ( new Date(stop).getTime() ) * 1000
+
+            const { first, last } = getTimeSpan(newData);
+
             let plot = $q.plot(
                 element,
                 newData,
                 $q.extend(true, {}, chartOptions, {
                     xaxis: {
-                        min: ranges.xaxis.from - 100000,
-                        max: ranges.xaxis.to + 100000,
-                        timeformat: formatDateRange(newData).timeformat,
+                        min: Math.round(ranges.xaxis.from) - 100000,
+                        max: Math.round(ranges.xaxis.to) + 100000,
+                        timeformat: formatDateRange(newData, first, last)
+                            .timeformat,
                     },
                 })
             );
@@ -222,20 +269,33 @@ export default function QrynChart(props: any): any {
         }
     }
 
-    function onLabelClick(e: any, v: any) {
+    function onLabelClick(event: any, value: any) {
+        // actions on label click
         let newList = [];
-        const lSelected =
+        //  1- check for labels selected
+        const labels_selected =
             JSON.parse(localStorage.getItem("labelsSelected") || "null") || [];
 
-        if (lSelected.some(({ id }: any) => id === v.id)) {
-            const filtered = lSelected.filter((f: any) => f.id !== v.id);
+        // check if same label value whas selected
+
+        if (labels_selected.some(({ id }: any) => id === value.id)) {
+            const filtered = labels_selected.filter(
+                (filtered: any) => filtered.id !== value.id
+            );
+            // if selected, store on localstorage
             localStorage.setItem("labelsSelected", JSON.stringify(filtered));
+            // set the newList of labels as the filtered
             newList = filtered;
+
         } else {
-            newList = lSelected.concat(v);
+            // if no labels selected, just concat new value and save in localstorage
+
+            newList = labels_selected.concat(value);
             localStorage.setItem("labelsSelected", JSON.stringify(newList));
         }
 
+
+
         if (newList.length > 0) {
             const ids = newList?.map((m: any) => m.id);
 
@@ -243,7 +303,8 @@ export default function QrynChart(props: any): any {
                 chartType,
                 0
             );
-            let dataSelected = e?.map((series: any) => {
+
+            let dataSelected = event?.map((series: any) => {
                 if (!ids.includes(series.id)) {
                     return {
                         ...series,
@@ -262,7 +323,15 @@ export default function QrynChart(props: any): any {
                 }
             });
 
-            const { timeformat, min, max } = formatDateRange(dataSelected);
+            const startDate = new Date(start).getTime() * 1000;
+
+            const stopDate = new Date(stop).getTime() * 1000;
+
+            const { timeformat, min, max } = formatDateRange(
+                dataSelected,
+                startDate,
+                stopDate
+            );
             let barWidth = 0;
             if (isLogsVolume && type === "stream") {
                 barWidth = getBarWidth(getTimeSpan(dataSelected), tWidth);
@@ -303,7 +372,15 @@ export default function QrynChart(props: any): any {
                     shadowSize: 0,
                 };
             });
-            const { timeformat, min, max } = formatDateRange(newData);
+            const startDate = new Date(start).getTime() * 1000;
+
+            const stopDate = new Date(stop).getTime() * 1000;
+
+            const { timeformat, min, max } = formatDateRange(
+                newData,
+                startDate,
+                stopDate
+            );
 
             let plot = $q.plot(
                 element,
@@ -331,14 +408,12 @@ export default function QrynChart(props: any): any {
         //setChartData(getDataParsed(isSpliced));
         setChartData(matrix);
         localStorage.setItem("labelsSelected", JSON.stringify([]));
-         
     }, []);
 
     useEffect(() => {
         setChartOptions(chartOptions);
         setElement(chartRef.current);
         drawChartFromData();
-       
     }, [matrixData, isSpliced]);
 
     function drawChartFromData() {
@@ -352,7 +427,15 @@ export default function QrynChart(props: any): any {
                 barWidth = getBarWidth(getTimeSpan(newData), tWidth);
             }
 
-            const { timeformat, min, max } = formatDateRange(newData);
+            const startDate = new Date(start).getTime() * 1000;
+
+            const stopDate = new Date(stop).getTime() * 1000;
+
+            const { timeformat, min, max } = formatDateRange(
+                newData,
+                startDate,
+                stopDate
+            );
 
             let { bars, lines, points, stack } = getSeriesFromChartType(
                 chartType,
@@ -409,7 +492,6 @@ export default function QrynChart(props: any): any {
         if (pointSet.size === 1 && chartType !== "bar") {
             onSetChartType("bar");
         }
-       
         return <FlotChart {...flotChartProps} />;
     }
 
diff --git a/packages/main/src/components/DataViews/components/Charts/consts.ts b/packages/main/src/components/DataViews/components/Charts/consts.ts
index 0f731a3b..067f0a46 100644
--- a/packages/main/src/components/DataViews/components/Charts/consts.ts
+++ b/packages/main/src/components/DataViews/components/Charts/consts.ts
@@ -65,7 +65,7 @@ export const CHART_OPTIONS = (isLogsVolume = false) => ({
 // pass the bar width
 // calculate here the span width
 
-export const CHART_BAR_SERIES = (barWidth=0, isLogsVolume = false) => ({
+export const CHART_BAR_SERIES = (barWidth = 0, isLogsVolume = false) => ({
     stack: isLogsVolume,
     lines: {
         show: false,
diff --git a/packages/main/src/components/DataViews/components/Charts/consts/index.ts b/packages/main/src/components/DataViews/components/Charts/consts/index.ts
index d50b5c02..bb36a3bb 100644
--- a/packages/main/src/components/DataViews/components/Charts/consts/index.ts
+++ b/packages/main/src/components/DataViews/components/Charts/consts/index.ts
@@ -51,7 +51,7 @@ export const CHART_OPTIONS = (isLogsVolume=false)=>({
             shadowSize: 0,
             zero: false,
         },
-        points: { show: true, radius: 1, shadowSize: 0, zero: false },
+        points: { show: true, radius: 1, shadowSize: 0, zero: true},
     },
     markings: {
         clickable: false,
diff --git a/packages/main/src/components/DataViews/components/Charts/helpers/index.tsx b/packages/main/src/components/DataViews/components/Charts/helpers/index.tsx
index 6b1758eb..5ee0aca6 100644
--- a/packages/main/src/components/DataViews/components/Charts/helpers/index.tsx
+++ b/packages/main/src/components/DataViews/components/Charts/helpers/index.tsx
@@ -129,19 +129,25 @@ export const getBarWidth = (tSpan: TimeSpan, width: number) => {
     return barWidth;
 };
 
-export function formatDateRange(data: any) {
-    const { timeSpan, first, last } = getTimeSpan(data);
+export function formatDateRange(data: any, start, stop) {
+
+
+
+    // first and last should be only when selecting with range
+     const { timeSpan, } = getTimeSpan(data);
 
     const formatted =
-        timeSpan > 1
+        timeSpan > 0
             ? "%m/%d %H:%M"
             : timeSpan > 30
             ? "%y/%m/%d %H:%M"
             : "%H:%M:%S";
     return {
         timeformat: formatted,
-        min: first,
-        max: last,
+        // min: first,
+        // max: last,
+        min: start / 1000,
+        max: stop / 1000,
     };
 }
 
diff --git a/packages/main/src/components/DataViews/views/LogsView.tsx b/packages/main/src/components/DataViews/views/LogsView.tsx
index c9b10756..533e3eb4 100644
--- a/packages/main/src/components/DataViews/views/LogsView.tsx
+++ b/packages/main/src/components/DataViews/views/LogsView.tsx
@@ -5,7 +5,7 @@ import { VectorTable } from "../components/Table/VectorTable/VectorTable";
 import { ViewHeader } from "../components/ViewHeader";
 import { TabsListq, Tabq, TabPanelq, ViewStyled } from "./styled";
 import { localTabsState } from "../helpers";
-import QrynChart from "../components/Charts";
+import QrynChart from "../components/Charts/QrynChart";
 import { LogRows } from "../components/Logs/LogRows";
 import ReactJson from "@microlink/react-json-view";
 import React from "react";
diff --git a/packages/main/src/components/DataViews/views/MatrixView.tsx b/packages/main/src/components/DataViews/views/MatrixView.tsx
index c64f398c..454a7f7a 100644
--- a/packages/main/src/components/DataViews/views/MatrixView.tsx
+++ b/packages/main/src/components/DataViews/views/MatrixView.tsx
@@ -1,4 +1,4 @@
-import QrynChart from "../components/Charts";
+import QrynChart from "../components/Charts/QrynChart";
 import { VectorTable } from "../components/Table/VectorTable/VectorTable";
 import { ViewHeader } from "../components/ViewHeader";
 import { Tabs } from "@mui/base";
diff --git a/packages/main/src/components/DataViews/views/VectorView.tsx b/packages/main/src/components/DataViews/views/VectorView.tsx
index e804d4e9..b19e161a 100644
--- a/packages/main/src/components/DataViews/views/VectorView.tsx
+++ b/packages/main/src/components/DataViews/views/VectorView.tsx
@@ -1,6 +1,6 @@
 import { Tabs } from "@mui/base";
 import { useMemo, useRef, useState, SyntheticEvent } from "react";
-import QrynChart from "../components/Charts";
+import QrynChart from "../components/Charts/QrynChart";
 import { VectorTable } from "../components/Table/VectorTable/VectorTable";
 import { ViewHeader } from "../components/ViewHeader";
 import { TabsListq, Tabq, TabPanelq, ViewStyled } from "./styled";
diff --git a/packages/main/views/DataSources/ConfirmDialog.tsx b/packages/main/views/DataSources/ConfirmDialog.tsx
new file mode 100644
index 00000000..58c3fada
--- /dev/null
+++ b/packages/main/views/DataSources/ConfirmDialog.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Button } from "./ui";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import DOMPurify from "isomorphic-dompurify";
+import useTheme from "@ui/theme/useTheme";
+
+export type ConfirmDialogProps = {
+    saveDataSource: () => void;
+    changed: boolean;
+};
+
+export default function ConfirmDialog({
+    saveDataSource,
+    changed,
+}: ConfirmDialogProps) {
+    const [open, setOpen] = React.useState(false);
+    const theme = useTheme();
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleSave = () => {
+        saveDataSource();
+        handleClose();
+    };
+
+    const handleCancel = () => {
+        handleClose();
+    };
+
+    return (
+        <React.Fragment>
+            <Button
+                primary={changed}
+                value={DOMPurify.sanitize("Save")}
+                onClick={handleClickOpen}
+            />
+
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle
+                    id="alert-dialog-title"
+                    style={{ background: theme.shadow, color: theme.contrast }}
+                >
+                    {"Save DataSource Settings"}
+                </DialogTitle>
+                <DialogContent style={{ background: theme.shadow }}>
+                    <DialogContentText
+                        style={{ color: theme.contrast }}
+                        id="alert-dialog-description"
+                    >
+                        Are you sure you want to store and modify current
+                        DataSource settings?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions style={{ background: theme.shadow }}>
+                    <Button
+                        onClick={handleCancel}
+                        value={DOMPurify.sanitize("Cancel")}
+                        primary={false}
+                    />
+                    <Button
+                        value={DOMPurify.sanitize("Save")}
+                        onClick={handleSave}
+                        primary={changed}
+                        autoFocus
+                    />
+                </DialogActions>
+            </Dialog>
+        </React.Fragment>
+    );
+}
diff --git a/packages/main/views/DataSources/DataSource.tsx b/packages/main/views/DataSources/DataSource.tsx
index a52c16ad..b25ce9c3 100644
--- a/packages/main/views/DataSources/DataSource.tsx
+++ b/packages/main/views/DataSources/DataSource.tsx
@@ -5,10 +5,12 @@ import { useCookies } from "react-cookie";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { createAlert } from "@ui/store/actions";
-
+import ConfirmDialog from "./ConfirmDialog";
+import { useStoreSettings } from "./hooks/useStoreSettings";
 import { Header } from "./components";
 import setDataSources from "./store/setDataSources";
 import { Container } from "./styles/Container";
+import { Button as FileButton } from "@mui/material";
 import { Button, Icon } from "./ui";
 import { Settings } from "./views";
 import DOMPurify from "isomorphic-dompurify";
@@ -42,7 +44,9 @@ function setCookieFromParams(parsedDs: string, user: string, password: string) {
 
 export function DataSourceSetting(props: any) {
     const {
+        id,
         url,
+        type,
         auth: {
             basicAuth,
             fields: {
@@ -51,15 +55,38 @@ export function DataSourceSetting(props: any) {
         },
     } = props;
 
+    console.log(props);
+
+    const theme = useTheme();
+
     // eslint-disable-next-line
     const [cookie, setCookie] = useCookies([
         "qryn-dev-cookie",
         "qryn-settings",
     ]); // for testing cookies feature
+
     const dispatch: any = useDispatch();
     const dataSources = useSelector((store: any) => store.dataSources);
+    const isDsSaved = useSelector((store: any) => store.isDsSaved);
+    const { storeDataSources, setSettings, storeSettings, settings } =
+        useStoreSettings();
+
+    const onSave = () => {
+        storeDataSources();
+        dispatch(
+            createAlert({
+                type: "success",
+                message: "Data Source Setting Saved SuccessFully",
+            })
+        );
+    };
+
+    const cancelAction = () => {
+        setSettings(dataSources);
+    };
+
     const useForAll = () => {
-        const dsCP = [...dataSources];
+        const dsCP = JSON.parse(JSON.stringify(settings));
         const prevDs = JSON.parse(JSON.stringify(dsCP));
 
         const newDs = prevDs?.map((m: any) => ({
@@ -120,14 +147,16 @@ export function DataSourceSetting(props: any) {
     }
 
     function downLoadJson() {
-        const { headers, id, name, linkedFields } = props;
-
-        const headersMapped = headers?.map(({ header, value }) => ({
-            [header]: value,
-        }));
-
-        const datasources = { id, name, headers: headersMapped, linkedFields };
 
+        const { headers, id, name, linkedFields, url } = props;
+        const datasources = {
+            id,
+            name,
+            type,
+            url,
+            headers,
+            linkedFields,
+        };
         const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
             JSON.stringify(datasources)
         )}`;
@@ -135,26 +164,90 @@ export function DataSourceSetting(props: any) {
         const link = document.createElement("a");
         link.href = jsonString;
         link.download = `${name}_${id}.json`;
-
         link.click();
     }
 
+    const onFileOpen = (evt) => {
+        let reader = new FileReader();
+        reader.onload = onReaderLoad;
+        reader.readAsText(evt.target.files[0]);
+    };
+
+    function onReaderLoad(event) {
+        let obj = JSON.parse(event.target.result);
+        const newDs = JSON.parse(JSON.stringify(settings));
+        let copy = [];
+        for (let ds of newDs) {
+            let datasource = {};
+            if (ds.type === obj.type && ds.name === obj.name) {
+                console.log(ds);
+                datasource = { ...ds, ...obj, id };
+            } else {
+                datasource = ds;
+            }
+
+            copy.push(datasource);
+        }
+        storeSettings(copy);
+        dispatch(
+            createAlert({
+                message: "Datasources Setting Imported Successfully",
+                type: "success",
+            })
+        );
+    }
+
+    // here should add buttons
+
     return (
         <div className="ds-cont">
             <div className={cx(HeaderRow)}>
                 <DataSourceSettingHeader {...props} />
-                <div style={{ display: "flex", alignItems: "center" }}>
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: ".5em",
+                    }}
+                >
                     <Button
                         title={"Download Datasource settings as JSON"}
                         value={DOMPurify.sanitize("Download JSON")}
                         onClick={downLoadJson}
-                        primary={true}
+                        primary={false}
                     />
+
+                    <>
+                        <input
+                            style={{ display: "none" }}
+                            accept="application/json"
+                            onChange={onFileOpen}
+                            id={`preview-${id}`}
+                            type="file"
+                        />
+                        <label htmlFor={`preview-${id}`}>
+                            <FileButton
+                                style={{
+                                    background: theme.neutral,
+                                    color: theme.contrast,
+                                    fontFamily: "sans-serif",
+                                    textTransform: "none",
+                                    padding: "3px 12px",
+                                    height: "26px",
+                                }}
+                                component="span"
+                                size="small"
+                            >
+                                Import JSON
+                            </FileButton>
+                        </label>
+                    </>
+
                     <Button
                         title={"Set Cookie with name: qryn-settings"}
                         value={DOMPurify.sanitize("Save Cookie")}
                         onClick={addCookie}
-                        primary={true}
+                        primary={false}
                     />
 
                     <Button
@@ -163,7 +256,25 @@ export function DataSourceSetting(props: any) {
                         }
                         value={DOMPurify.sanitize("Use For All")}
                         onClick={useForAll}
-                        primary={true}
+                        primary={false}
+                    />
+                </div>
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "1em",
+                    }}
+                >
+                    <ConfirmDialog
+                        saveDataSource={onSave}
+                        changed={isDsSaved}
+                    />
+                    <Button
+                        value={DOMPurify.sanitize("Cancel")}
+                        onClick={cancelAction}
+                        editing={true}
+                        primary={false}
                     />
                 </div>
             </div>
@@ -193,7 +304,9 @@ export const DataSourceSettingHeader = (props: any) => {
 export function DataSource() {
     let { id } = useParams();
     const theme = useTheme();
+
     const dataSources = useSelector((store: any) => store.dataSources);
+
     const datasource = useMemo(() => {
         if (!dataSources || dataSources.length === 0) {
             return {};
diff --git a/packages/main/views/DataSources/DataSources.tsx b/packages/main/views/DataSources/DataSources.tsx
index 2b124df4..a898fb7b 100644
--- a/packages/main/views/DataSources/DataSources.tsx
+++ b/packages/main/views/DataSources/DataSources.tsx
@@ -42,8 +42,7 @@ export default function DataSources() {
         <ThemeProvider theme={theme}>
             <PageContainer>
                 <div className="cont">
-                    <List />
-
+          <List />
                     <div style={{ display: "flex", flex: 1 }}>
                         <div
                             style={{
diff --git a/packages/main/views/DataSources/components/AuthFields.tsx b/packages/main/views/DataSources/components/AuthFields.tsx
index 4d392482..ddc2edaf 100644
--- a/packages/main/views/DataSources/components/AuthFields.tsx
+++ b/packages/main/views/DataSources/components/AuthFields.tsx
@@ -1,42 +1,47 @@
 import { useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import setDataSources from "../store/setDataSources";
 import { InputCol, InputCont } from "../styles";
 import { QrynSwitch, Select, Field } from "../ui";
 import { TextAreaField } from "../ui/TextArea";
 import { SectionHeader } from "./SectionHeader";
 import DOMPurify from "isomorphic-dompurify";
 
-export function AuthFields(props: any) {
-    const { auth, id } = props;
-    const dispatch: any = useDispatch();
-
-    const dataSources = useSelector((store: any) => store.dataSources);
+export type AuthFieldsProps = {
+    auth?: any;
+    id?: string;
+    dataSources?: any;
+    onDsChange?: (prev: any) => void;
+    fieldErrors?: any;
+};
 
+export function AuthFields(props: AuthFieldsProps) {
+    const { auth, id, dataSources, onDsChange } = props;
     const [activeFields, setActiveFields] = useState<any>([]);
     const [isEditing, setIsEditing] = useState(false);
     const fields = useMemo(() => {
-        return Object.entries(auth)
-            ?.map(([name, field]: [name: any, field: any]) => ({
-                name,
-                ...field,
-            }))
-            .filter((f) => f.name !== "fields");
+        if (auth) {
+            return Object.entries(auth)
+                ?.map(([name, field]: [name: any, field: any]) => ({
+                    name,
+                    ...field,
+                }))
+                .filter((f) => f.name !== "fields");
+        }
     }, [auth]);
 
     const certFields = useMemo(() => {
-        return Object.entries(auth)
-            ?.map(([name, field]: [name: any, field: any]) => ({
-                name,
-                ...field,
-            }))
-            .find((f) => f.name === "fields");
+        if (auth) {
+            return Object.entries(auth)
+                ?.map(([name, field]: [name: any, field: any]) => ({
+                    name,
+                    ...field,
+                }))
+                .find((f) => f.name === "fields");
+        }
     }, [auth]);
 
     const onValueChange = (value: any, name: any) => {
         const newAuth = JSON.parse(JSON.stringify(auth));
         newAuth[name].value = value;
-
         const dsCP = JSON.parse(JSON.stringify(dataSources));
         const newDataSources = dsCP.map((dataSource: any) => {
             if (dataSource.id === id) {
@@ -45,16 +50,13 @@ export function AuthFields(props: any) {
             return dataSource;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-
-        dispatch(setDataSources(newDataSources));
-
+        onDsChange(newDataSources);
         return newDataSources;
     };
 
     useEffect(() => {
         const certFields = fields
-            .filter((f) => f.form_type === "switch" && !!f?.value)
+            ?.filter((f) => f.form_type === "switch" && !!f?.value)
             ?.filter((f) => !!f.withFields)
             ?.map((m) => m.name);
         setActiveFields(certFields);
@@ -72,7 +74,6 @@ export function AuthFields(props: any) {
     const onSwitchChange = (e: any, name: any) => {
         setIsEditing(() => true);
         const value = e.target.checked;
-
         onValueChange(value, name);
         setTimeout(() => {
             setIsEditing(() => false);
@@ -83,7 +84,6 @@ export function AuthFields(props: any) {
         setIsEditing(() => true);
         const value = e.target.value;
         const prevAuth = JSON.parse(JSON.stringify(auth));
-
         const newAuth = {
             ...prevAuth,
             fields: {
@@ -97,7 +97,6 @@ export function AuthFields(props: any) {
                 }),
             },
         };
-
         const prevDataSources = JSON.parse(JSON.stringify([...dataSources]));
         const newDataSources = prevDataSources?.map((ds: any) => {
             if (ds.id === id) {
@@ -107,8 +106,7 @@ export function AuthFields(props: any) {
             return ds;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        onDsChange(newDataSources);
 
         setTimeout(() => {
             setIsEditing(() => false);
@@ -158,17 +156,18 @@ export function AuthFields(props: any) {
                         return null;
                     })}
                 <InputCol>
-                    {activeFields &&
-                        activeFields.map((val: any, key: any) => {
+                    {activeFields?.length > 0 &&
+                        certFields &&
+                        activeFields?.map((val: any, key: any) => {
                             return (
                                 <InputCol key={key}>
                                     {certFields[val] &&
                                         certFields[val]?.map(
                                             (cert: any, y: any) => {
                                                 if (
-                                                    cert.form_type ===
+                                                    cert?.form_type ===
                                                         "input" ||
-                                                    cert.form_type ===
+                                                    cert?.form_type ===
                                                         "password"
                                                 ) {
                                                     return (
@@ -198,7 +197,7 @@ export function AuthFields(props: any) {
                                                 }
 
                                                 if (
-                                                    cert.form_type ===
+                                                    cert?.form_type ===
                                                     "textarea"
                                                 ) {
                                                     return (
diff --git a/packages/main/views/DataSources/components/ConfirmSave.tsx b/packages/main/views/DataSources/components/ConfirmSave.tsx
new file mode 100644
index 00000000..b502170c
--- /dev/null
+++ b/packages/main/views/DataSources/components/ConfirmSave.tsx
@@ -0,0 +1,20 @@
+import { cx } from "@emotion/css";
+import { QrynTheme } from "@ui/theme/types";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { confirmSaveLoaderCont, confirmSaveLoaderIcon } from "./header.styles";
+
+export type ConfirmSaveProps = {
+    setIsSaved: (boolean) => void;
+    theme: QrynTheme;
+};
+
+export const ConfirmSave = ({ setIsSaved, theme }: ConfirmSaveProps) => {
+    return (
+        <div
+            className={cx(confirmSaveLoaderCont(theme))}
+            onClick={() => setIsSaved(false)}
+        >
+            <CheckCircleIcon className={cx(confirmSaveLoaderIcon)} />{" "}
+        </div>
+    );
+};
diff --git a/packages/main/views/DataSources/components/DataSourceHeaders.tsx b/packages/main/views/DataSources/components/DataSourceHeaders.tsx
index 7b7f5b6e..49eb739e 100644
--- a/packages/main/views/DataSources/components/DataSourceHeaders.tsx
+++ b/packages/main/views/DataSources/components/DataSourceHeaders.tsx
@@ -1,21 +1,30 @@
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
 import { nanoid } from "nanoid";
 import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import setDataSources from "../store/setDataSources";
+//import setDataSources from "../store/setDataSources";
 import { InputCol, InputGroup, Label } from "../styles";
 import { Field } from "../ui";
 import { SectionHeader } from "./SectionHeader";
 import DOMPurify from "isomorphic-dompurify";
 import { Switch } from "@mui/material";
 
-export const DataSourceHeaders = (props: any) => {
-    const dispatch: any = useDispatch();
+type HeaderEntry = {
+    id: string;
+    header: string;
+    value: string;
+};
+type DataSourceHadersProps = {
+    id: string;
+    cors?: boolean;
+    headers: HeaderEntry[];
+    dataSources: any;
+    onDsChange: (prev: any) => void;
+};
 
-    const dataSources = useSelector((store: any) => store.dataSources);
+export const DataSourceHeaders = (props: DataSourceHadersProps) => {
     const [editing, setEditing] = useState(false);
 
-    const { headers, id } = props;
+    const { headers, id, onDsChange, dataSources } = props;
     const [cors, setCors] = useState(props?.cors || false);
 
     const onCorsChange = (e: any) => {
@@ -27,9 +36,9 @@ export const DataSourceHeaders = (props: any) => {
             }
             return ds;
         });
+
         setCors(() => value);
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        onDsChange(newDataSources);
     };
 
     const onChange = (e: any, headerId: any, name: any) => {
@@ -53,8 +62,7 @@ export const DataSourceHeaders = (props: any) => {
             return ds;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        onDsChange(newDataSources);
         setTimeout(() => {
             setEditing(() => false);
         }, 800);
@@ -84,9 +92,7 @@ export const DataSourceHeaders = (props: any) => {
                 }
                 return ds;
             });
-
-            localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-            dispatch(setDataSources(newDataSources));
+            onDsChange(newDataSources);
         }
     };
 
@@ -102,8 +108,7 @@ export const DataSourceHeaders = (props: any) => {
             return ds;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        onDsChange(newDataSources);
     };
 
     return (
diff --git a/packages/main/views/DataSources/components/DataSourcesFiller.tsx b/packages/main/views/DataSources/components/DataSourcesFiller.tsx
index 9e578ac5..7c2a8b50 100644
--- a/packages/main/views/DataSources/components/DataSourcesFiller.tsx
+++ b/packages/main/views/DataSources/components/DataSourcesFiller.tsx
@@ -57,7 +57,7 @@ export const urlSchema = z.string().url()
 
 const DEFAULT_URL = window.location.origin
 
-export const DataSourcesFiller = (props: any) => {
+export const DataSourcesFiller = () => {
 
     const [url, setUrl] = useState("");
     const [user, setUser] = useState("");
diff --git a/packages/main/views/DataSources/components/FieldErrors.tsx b/packages/main/views/DataSources/components/FieldErrors.tsx
new file mode 100644
index 00000000..180847c1
--- /dev/null
+++ b/packages/main/views/DataSources/components/FieldErrors.tsx
@@ -0,0 +1,30 @@
+import { InputErrorWarning } from "./InputErrorWarning";
+
+export const FIELD_ERROR_TEXT = {
+    protocol: "mixed_content",
+    url: "complete_url",
+};
+
+type FieldError = Record<keyof typeof FIELD_ERROR_TEXT, boolean>;
+
+export type FieldErrorProps = {
+    fieldErrors?: FieldError;
+};
+
+export const mapErrors = (fieldErrors: FieldError) => {
+    return Object.keys(fieldErrors)
+        .map((error) => error)
+        .filter((f) => Boolean(fieldErrors[f]));
+};
+
+export const FieldErrors = (props: FieldErrorProps) => {
+    const { fieldErrors } = props;
+    if (!fieldErrors) return <></>;
+    return (
+        <>
+            {mapErrors(fieldErrors)?.map((error, key) => (
+                <InputErrorWarning key={key} error={FIELD_ERROR_TEXT[error]} />
+            ))}
+        </>
+    );
+};
diff --git a/packages/main/views/DataSources/components/Header.tsx b/packages/main/views/DataSources/components/Header.tsx
index de0ff105..1dc72880 100644
--- a/packages/main/views/DataSources/components/Header.tsx
+++ b/packages/main/views/DataSources/components/Header.tsx
@@ -1,11 +1,9 @@
-import { useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-
-import setIsDatasourceSaved from "../store/setIsDataSourceSaved";
 import { Button, QrynLogo } from "../ui";
 import DOMPurify from "isomorphic-dompurify";
-import useTheme from "@ui/theme/useTheme"
+import useTheme from "@ui/theme/useTheme";
+
 export interface HeaderProps {
     title: string;
     datasource?: any;
@@ -14,54 +12,38 @@ export interface HeaderProps {
 export function Header(props: HeaderProps) {
     const navigate = useNavigate();
     const theme = useTheme();
-    const urlLocation = useSelector((store: any) => store.urlLocation);
-    const dispatch: any = useDispatch();
     const { title } = props;
     const isDsSaved = useSelector((store: any) => store.isDsSaved);
-    const buttonMessage = useMemo(() => {
-        if (isDsSaved) {
-            return "Save";
-        }
-        return "Back";
-    }, [isDsSaved]);
 
     const backOne = () => {
-        let isLocation = urlLocation?.length > 0;
-        dispatch(setIsDatasourceSaved(false));
-        if (
-            (isLocation || buttonMessage === "Back") &&
-            title !== "DataSources"
-        ) {
-            navigate(-1);
-        } else {
-            navigate("");
-        }
+        navigate(-1);
     };
 
     return (
         <div className="ds-header">
             <div style={{ display: "flex", alignItems: "center" }}>
-                <div style={{display:'flex', flexDirection:'column'}}>
-                <div style={{display:'flex'}}>
-                <QrynLogo />
-                <h1>{title}</h1>
-                </div>
-               
-                <p
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                    <div style={{ display: "flex" }}>
+                        <QrynLogo />
+                        <h1>{title}</h1>
+                    </div>
+
+                    <p
                         style={{
                             color: theme.contrast,
                             fontSize: "10px",
-                            marginTop:'5px',
-                            marginLeft:'10px',
-                            opacity:'.5',
+                            marginTop: "5px",
+                            marginLeft: "10px",
+                            opacity: ".5",
                         }}
                     >
                         v{import.meta.env.VITE_APP_VERSION}
                     </p>
+                </div>
             </div>
-            </div>
+
             <Button
-                value={DOMPurify.sanitize(buttonMessage)}
+                value={DOMPurify.sanitize("Back")}
                 onClick={backOne}
                 editing={true}
                 primary={isDsSaved}
diff --git a/packages/main/views/DataSources/components/InputErrorWarning.tsx b/packages/main/views/DataSources/components/InputErrorWarning.tsx
new file mode 100644
index 00000000..d6703450
--- /dev/null
+++ b/packages/main/views/DataSources/components/InputErrorWarning.tsx
@@ -0,0 +1,22 @@
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { cx } from '@emotion/css'
+import { confirmSaveLoaderIcon, inputErrorCont } from "./header.styles";
+
+export const WARNING_ERRORS = {
+    mixed_content: "Insecure Mixed Content. Mixing HTTP and HTTPS is insecure and is not supported.",
+    complete_url: "Please complete API URL"
+}
+
+export type InputErrorWarningProps = {
+    error:  keyof typeof WARNING_ERRORS
+}
+
+export const InputErrorWarning = (props: InputErrorWarningProps) => {
+    const {error} = props 
+    return (
+        <div className={cx(inputErrorCont)}>
+            <ErrorOutlineIcon className={cx(confirmSaveLoaderIcon)} />{" "}
+            <span>{WARNING_ERRORS[error]}</span>
+        </div>
+    );
+};
diff --git a/packages/main/views/DataSources/components/LinkedField.tsx b/packages/main/views/DataSources/components/LinkedField.tsx
index 8759a965..081a5d1a 100644
--- a/packages/main/views/DataSources/components/LinkedField.tsx
+++ b/packages/main/views/DataSources/components/LinkedField.tsx
@@ -1,11 +1,9 @@
-import { useDispatch, useSelector } from "react-redux";
 import { LinkFieldsGroup, InputCol } from "../styles";
 import { Field, QrynSwitch, Select } from "../ui";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
-import setDataSources from "../store/setDataSources";
 import { useMemo } from "react";
-import DOMPurify from 'isomorphic-dompurify'
-export const LinkedField = (props:any) => {
+import DOMPurify from "isomorphic-dompurify";
+export const LinkedField = (props: any) => {
     const {
         id,
         name,
@@ -15,36 +13,34 @@ export const LinkedField = (props:any) => {
         linkType,
         locked,
         dataSourceId,
-        fieldEditing
+        fieldEditing,
+        dataSources,
+        dsChange,
     } = props;
 
-    const dispatch: any = useDispatch();
-
-    const dataSources = useSelector((store:any) => store.dataSources);
-
     const dataSourcesOpts = useMemo(() => {
-        return dataSources.map((m:any) => ({
+        return dataSources?.map((m: any) => ({
             name: m.name,
             value: m.id,
         }));
     }, [dataSources]);
 
-    const onLinkedFieldChange = (prop:any, value:any) => {
-        fieldEditing()
+    const onLinkedFieldChange = (prop: any, value: any) => {
+        fieldEditing();
 
         const prevDataSources = JSON.parse(JSON.stringify(dataSources));
-        const prevDs = prevDataSources.find((f:any) => f.id === dataSourceId);
+        const prevDs = prevDataSources.find((f: any) => f.id === dataSourceId);
 
         const prevLinked = prevDs["linkedFields"];
 
-        const newLinked = prevLinked.map((m:any) => {
+        const newLinked = prevLinked?.map((m: any) => {
             if (m.id === id) {
                 return { ...m, [prop]: value };
             }
             return m;
         });
 
-        return prevDataSources.map((m:any) => {
+        return prevDataSources?.map((m: any) => {
             if (m.id === dataSourceId) {
                 return { ...m, linkedFields: newLinked };
             }
@@ -52,43 +48,36 @@ export const LinkedField = (props:any) => {
         });
     };
 
-    const onLinkedFieldRemove = (e:any) => {
-        fieldEditing()
+    const onLinkedFieldRemove = () => {
+        fieldEditing();
         const prevDataSources = JSON.parse(JSON.stringify(dataSources));
-        const prevDs = prevDataSources.find((f:any) => f.id === dataSourceId);
+        const prevDs = prevDataSources?.find((f: any) => f.id === dataSourceId);
         const prevLinked = prevDs["linkedFields"];
-        const newLinked = prevLinked.filter((f:any) => f.id !== id);
+        const newLinked = prevLinked?.filter((f: any) => f.id !== id);
 
-        const newDataSources = prevDataSources.map((m:any) => {
+        const newDataSources = prevDataSources?.map((m: any) => {
             if (m.id === dataSourceId) {
                 return { ...m, linkedFields: [...newLinked] };
             }
             return m;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        dsChange(newDataSources);
     };
 
-    const onChange = (e:any, name:any) => {
-        fieldEditing()
+    const onChange = (e: any, name: any) => {
+        fieldEditing();
         const value = e.target.value;
-        // setNewDataSources
-
         const newVal = onLinkedFieldChange(name, value);
-
-        localStorage.setItem("dataSources", JSON.stringify(newVal));
-
-        dispatch(setDataSources(newVal));
+        dsChange(newVal);
     };
 
-    const onSwitchChange = (e:any, name:any) => {
-        fieldEditing()
+    const onSwitchChange = (e: any, name: any) => {
+        fieldEditing();
         const value = Boolean(e.target.checked);
 
         const newVal = onLinkedFieldChange(name, value);
-        localStorage.setItem("dataSources", JSON.stringify(newVal));
-        dispatch(setDataSources(newVal));
+        dsChange(newVal);
     };
 
     return (
@@ -97,26 +86,26 @@ export const LinkedField = (props:any) => {
                 <Field
                     value={DOMPurify.sanitize(name)}
                     label={"Name"}
-                    onChange={(e:any) => onChange(e, "name")}
+                    onChange={(e: any) => onChange(e, "name")}
                 />
 
                 <Field
                     value={DOMPurify.sanitize(regex)}
                     label={"Regex"}
-                    onChange={(e:any) => onChange(e, "regex")}
+                    onChange={(e: any) => onChange(e, "regex")}
                 />
 
                 <Field
                     value={DOMPurify.sanitize(urlLabel)}
                     label={"URL Label"}
-                    onChange={(e:any) => onChange(e, "urlLabel")}
+                    onChange={(e: any) => onChange(e, "urlLabel")}
                 />
 
                 <DeleteOutlineOutlinedIcon
                     onClick={onLinkedFieldRemove}
                     fontSize={"small"}
                     style={{
-                        marginLeft:'10px',
+                        marginLeft: "10px",
                         cursor: "pointer",
                         display: locked ? "none" : "inline-block",
                     }}
@@ -127,7 +116,7 @@ export const LinkedField = (props:any) => {
                 <QrynSwitch
                     value={internalLink}
                     label={"Internal Link"}
-                    onChange={(e:any) => onSwitchChange(e, "internalLink")}
+                    onChange={(e: any) => onSwitchChange(e, "internalLink")}
                 />
 
                 <Select
@@ -135,7 +124,7 @@ export const LinkedField = (props:any) => {
                     value={DOMPurify.sanitize(linkType)}
                     opts={dataSourcesOpts}
                     selectType={"linkedField"}
-                    onChange={(e:any) => onChange(e, "linkID")}
+                    onChange={(e: any) => onChange(e, "linkID")}
                 />
             </InputCol>
         </LinkFieldsGroup>
diff --git a/packages/main/views/DataSources/components/LinkedFields.tsx b/packages/main/views/DataSources/components/LinkedFields.tsx
index 8a85f880..6398b814 100644
--- a/packages/main/views/DataSources/components/LinkedFields.tsx
+++ b/packages/main/views/DataSources/components/LinkedFields.tsx
@@ -1,30 +1,29 @@
 import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+//import { useDispatch, useSelector } from "react-redux";
 import { LinkedFieldItem } from "../classes/LinkedFieldItem";
-import setDataSources from "../store/setDataSources";
+//import setDataSources from "../store/setDataSources";
 import { InputCont } from "../styles";
 import { LinkedField } from "./LinkedField";
 import { SectionHeader } from "./SectionHeader";
 
-export const LinkedFields = (props: any) => {
-    const { linkedFields, name, id } = props;
-
-    const dataSources = useSelector((store: any) => store.dataSources);
+export type LinkedFieldsProps = {
+    id: string;
+    name: string;
+    linkedFields: any;
+    dataSources: any;
+    onDsChange: (prev: any) => void;
+};
 
-    const dispatch: any = useDispatch();
+export const LinkedFields = (props: LinkedFieldsProps) => {
+    const { linkedFields, name, id, dataSources, onDsChange } = props;
     const [isEditing, setIsEditing] = useState(false);
-
     const onAddLinkedField = () => {
-        // modify to add linked filed into datasources => linkedFields
         const newLinked = new LinkedFieldItem();
         newLinked.dataSource = name;
         newLinked.create();
         const linkedClone = JSON.parse(JSON.stringify(linkedFields));
-
         const newList = [...linkedClone, { ...newLinked }];
-
         const prevDataSources = JSON.parse(JSON.stringify(dataSources));
-
         const newDataSources = prevDataSources?.map((m: any) => {
             if (m.id === id) {
                 return {
@@ -35,8 +34,7 @@ export const LinkedFields = (props: any) => {
             return m;
         });
 
-        localStorage.setItem("dataSources", JSON.stringify(newDataSources));
-        dispatch(setDataSources(newDataSources));
+        onDsChange(newDataSources);
     };
 
     const fieldEditing = () => {
@@ -58,15 +56,18 @@ export const LinkedFields = (props: any) => {
                 />
 
                 <InputCont>
-                    {linkedFields?.map((val: any, key: any) => (
-                        <LinkedField
-                            key={key}
-                            {...val}
-                            dataSourceId={id}
-                            locked={false}
-                            fieldEditing={fieldEditing}
-                        />
-                    ))}
+                    {linkedFields &&
+                        linkedFields?.map((val: any, key: any) => (
+                            <LinkedField
+                                key={key}
+                                {...val}
+                                dataSourceId={id}
+                                locked={false}
+                                fieldEditing={fieldEditing}
+                                dsChange={onDsChange}
+                                dataSources={dataSources}
+                            />
+                        ))}
                 </InputCont>
             </>
         );
diff --git a/packages/main/views/DataSources/components/SectionHeader.tsx b/packages/main/views/DataSources/components/SectionHeader.tsx
index a64b5ae0..3c38780d 100644
--- a/packages/main/views/DataSources/components/SectionHeader.tsx
+++ b/packages/main/views/DataSources/components/SectionHeader.tsx
@@ -1,87 +1,25 @@
 import { SettingsTitle } from "../styles";
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
-import CachedOutlinedIcon from "@mui/icons-material/CachedOutlined";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import { cx, css } from "@emotion/css";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import setIsDatasourceSaved from "../store/setIsDataSourceSaved";
-import useTheme from "@ui/theme/useTheme"
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import useTheme from "@ui/theme/useTheme";
+import { ConfirmSave } from "./ConfirmSave";
+import { FieldErrors } from "./FieldErrors";
+import { Tooltip } from "@mui/material";
 
-const confirmSaveLoaderIcon = css`
-    height: 12px !important;
-    width: 12px !important;
-    color: white;
-    margin: 0px 4px;
-`;
-
-const confirmSaveLoaderCont = (theme: any) => css`
-    display: flex;
-    align-items: center;
-    background: ${theme.primary};
-    color: white;
-    font-size: 11px;
-    padding: 4px;
-    border-radius: 3px;
-    margin-right: 10px;
-    cursor: pointer;
-    span {
-        margin-right: 4px;
-        font-weight: bold;
-    }
-`;
-
-const inputErrorCont = css`
-    display: flex;
-    align-items: center;
-    background: #b62c14;
-    color: white;
-    font-size: 12px;
-    padding: 4px;
-    border-radius: 3px;
-    margin-right: 10px;
-    cursor: pointer;
-    span {
-        margin-right: 4px;
-        font-weight: bold;
-    }
-`;
-
-const SavingLoader = css`
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    &.loading-icon {
-        height: 14px;
-        width: 14px;
-    }
-`;
-
-const ConfirmSave = ({ setIsSaved }: { setIsSaved: any }) => {
-    const theme = useTheme();
-    return (
-        <div
-            className={cx(confirmSaveLoaderCont(theme))}
-            onClick={(e) => setIsSaved(false)}
-        >
-            <CheckCircleIcon className={cx(confirmSaveLoaderIcon)} />{" "}
-            <span>Saved</span>
-        </div>
-    );
-};
-
-const InputErrorWarning = ({ errorText }: { errorText: string }) => {
-    return (
-        <div className={cx(inputErrorCont)}>
-            <ErrorOutlineIcon className={cx(confirmSaveLoaderIcon)} />{" "}
-            <span>{errorText}</span>
-        </div>
-    );
+export type SectionHeaderProps = {
+    isEditing?: boolean;
+    isEdit?: boolean;
+    isAdd?: boolean;
+    title?: string;
+    fieldErrors?: any;
+    onClickAdd?: (e?: any) => void;
 };
 
-export function SectionHeader(props: any) {
+export function SectionHeader(props: SectionHeaderProps) {
     const { onClickAdd, isAdd, title, isEditing, fieldErrors } = props;
+    const theme = useTheme();
     const dispatch: any = useDispatch();
     const [isSaved, setIsSaved] = useState(false);
 
@@ -100,46 +38,36 @@ export function SectionHeader(props: any) {
         return () => {
             setIsSaved(false);
         };
-          
     }, [isEditing]);
 
     return (
         <SettingsTitle>
-            {title}
-            <div className="edit-buttons">
-                {isEditing && (
-                    <div className={SavingLoader}>
-                        <CachedOutlinedIcon
-                            style={{ height: "13px", width: "13px" }}
-                        />{" "}
-                        Saving ...
-                    </div>
-                )}
-                {fieldErrors?.protocol && (
-                    <InputErrorWarning
-                        errorText={
-                            "Insecure Mixed Content. Mixing HTTP and HTTPS is insecure and is not supported."
-                        }
-                    />
-                )}
-                {fieldErrors?.url && (
-                    <InputErrorWarning errorText={"Please complete API URL"} />
-                )}
-                {isSaved && <ConfirmSave setIsSaved={setIsSaved} />}
-
+            <div style={{ display: "flex", alignItems: "center", gap: ".5em" }}>
+                {title}
                 {isAdd && (
                     <>
-                        <AddOutlinedIcon
-                            fontSize={"small"}
-                            style={{
-                                cursor: "pointer",
-                                display: "flex",
-                            }}
-                            onClick={onClickAdd}
-                        />
+                        <Tooltip title={`Add ${title}`}>
+                            <AddOutlinedIcon
+                                fontSize={"small"}
+                                style={{
+                                    cursor: "pointer",
+                                    display: "flex",
+                                }}
+                                onClick={onClickAdd}
+                            />
+                        </Tooltip>
                     </>
                 )}
             </div>
+
+            <div className="edit-buttons">
+
+                <FieldErrors fieldErrors={fieldErrors} />
+
+                {isSaved && (
+                    <ConfirmSave theme={theme} setIsSaved={setIsSaved} />
+                )}
+            </div>
         </SettingsTitle>
     );
 }
diff --git a/packages/main/views/DataSources/components/header.styles.ts b/packages/main/views/DataSources/components/header.styles.ts
new file mode 100644
index 00000000..addb7d03
--- /dev/null
+++ b/packages/main/views/DataSources/components/header.styles.ts
@@ -0,0 +1,51 @@
+import { css } from '@emotion/css'
+import { QrynTheme } from '@ui/theme/types';
+
+export const confirmSaveLoaderIcon = css`
+    height: 12px !important;
+    width: 12px !important;
+    color: white;
+    margin: 0px 4px;
+`;
+
+export const confirmSaveLoaderCont = (theme: QrynTheme) => css`
+    display: flex;
+    align-items: center;
+    background: ${theme.primary};
+    color: white;
+    font-size: 11px;
+    padding: 4px;
+    border-radius: 3px;
+    margin-right: 10px;
+    cursor: pointer;
+    span {
+        margin-right: 4px;
+        font-weight: bold;
+    }
+`;
+
+export const SavingLoader = css`
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    &.loading-icon {
+        height: 14px;
+        width: 14px;
+    }
+`;
+
+export const inputErrorCont = css`
+    display: flex;
+    align-items: center;
+    background: #b62c14;
+    color: white;
+    font-size: 12px;
+    padding: 4px;
+    border-radius: 3px;
+    margin-right: 10px;
+    cursor: pointer;
+    span {
+        margin-right: 4px;
+        font-weight: bold;
+    }
+`;
\ No newline at end of file
diff --git a/packages/main/views/DataSources/hooks/useStoreSettings.ts b/packages/main/views/DataSources/hooks/useStoreSettings.ts
new file mode 100644
index 00000000..b449a2ac
--- /dev/null
+++ b/packages/main/views/DataSources/hooks/useStoreSettings.ts
@@ -0,0 +1,39 @@
+import { useDispatch } from "react-redux";
+import setDataSources from "../store/setDataSources";
+import { create } from "zustand";
+import store from "@ui/store/store";
+
+export type SettingsStoreType = {
+    settings: any;
+    setSettings: (settings: any) => void;
+};
+const initialData = {
+    settings: store.getState().dataSources,
+};
+
+const settingsStore = create<SettingsStoreType>((set) => ({
+    ...initialData,
+    setSettings: (newSettings: any) => set(() => ({ settings: newSettings })),
+}));
+
+export const useStoreSettings = () => {
+    const dispatch: any = useDispatch();
+
+    const { settings, setSettings } = settingsStore();
+
+    const storeDataSources = () => {
+        localStorage.setItem("dataSources", JSON.stringify(settings));
+        dispatch(setDataSources(settings));
+    };
+
+    const storeSettings = (newSetting) => {
+        setSettings(newSetting);
+    };
+
+    return {
+        settings,
+        setSettings,
+        storeSettings,
+        storeDataSources,
+    };
+};
diff --git a/packages/main/views/DataSources/store/setDataSources.ts b/packages/main/views/DataSources/store/setDataSources.ts
index c87d3ce0..45e18fc5 100644
--- a/packages/main/views/DataSources/store/setDataSources.ts
+++ b/packages/main/views/DataSources/store/setDataSources.ts
@@ -1,10 +1,8 @@
 const setDataSources = (dataSources: any) => (dispatch: any) => {
     dispatch({
-        type: 'SET_DATA_SOURCES',
-        dataSources
+        type: "SET_DATA_SOURCES",
+        dataSources,
+    });
+};
 
-    })
-} 
-
-
-export default setDataSources
\ No newline at end of file
+export default setDataSources;
diff --git a/packages/main/views/DataSources/styles.ts b/packages/main/views/DataSources/styles.ts
index 49da7a20..e5dbfd55 100644
--- a/packages/main/views/DataSources/styles.ts
+++ b/packages/main/views/DataSources/styles.ts
@@ -1,11 +1,12 @@
 import styled from "@emotion/styled";
 import { BtnSmall } from "@ui/theme/styles/Button";
+import { QrynTheme } from "@ui/theme/types";
 
-export const PageContainer: any = styled.div`
+export const PageContainer = styled.div<{ theme?: QrynTheme }>`
     overflow-x: hidden;
     border-radius: 3px;
-    background: ${({ theme }: any) => theme.background};
-    color: ${({ theme }: any) => theme.contrast};
+    background: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.contrast};
     width: 100%;
     height: 100%;
     overflow-y: auto;
@@ -20,7 +21,7 @@ export const PageContainer: any = styled.div`
         padding: 10px;
         margin: 10px;
         width: 100%;
-        background: ${({ theme }: any) => theme.shadow};
+        background: ${({ theme }) => theme.shadow};
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -42,9 +43,9 @@ export const PageContainer: any = styled.div`
     }
     .ds-cont {
         margin-bottom: 10px;
-        border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+        border: 1px solid ${({ theme }) => theme.accentNeutral};
         border-radius: 3px;
-        color: ${({ theme }: any) => theme.contrast};
+        color: ${({ theme }) => theme.contrast};
     }
 
     .ds-item {
@@ -53,7 +54,7 @@ export const PageContainer: any = styled.div`
         border-radius: 3px 3px 0px 0px;
         padding-bottom: 14px;
         display: flex;
-        color: ${({ theme }: any) => theme.contrast};
+        color: ${({ theme }) => theme.contrast};
         .logo {
             padding: 10px;
             padding-right: 20px;
@@ -68,7 +69,7 @@ export const PageContainer: any = styled.div`
             font-size: 18px;
             padding: 10px;
             padding-left: 0px;
-            color: ${({ theme }: any) => theme.contrast};
+            color: ${({ theme }) => theme.contrast};
         }
         small {
             font-size: 12px;
@@ -78,7 +79,7 @@ export const PageContainer: any = styled.div`
             cursor: pointer;
         }
         .ds-settings {
-            background: ${({ theme }: any) => theme.shadow};
+            background: ${({ theme }) => theme.shadow};
         }
     }
     .plugins-cont {
@@ -87,7 +88,7 @@ export const PageContainer: any = styled.div`
         margin: 0px 10px;
         flex-direction: column;
         padding: 10px 20px;
-        border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+        border: 1px solid ${({ theme }) => theme.accentNeutral};
         border-radius: 3px;
         height: fit-content;
         .title {
@@ -97,57 +98,62 @@ export const PageContainer: any = styled.div`
     }
 `;
 
-export const Label: any = styled.div`
-    color: ${({ theme }: any) => theme.contrast};
+export const Label = styled.div<{ theme?: QrynTheme; width?: number }>`
+    color: ${({ theme }) => theme.contrast};
     display: flex;
     align-items: center;
     font-size: 12px;
     padding: 0px 10px;
     //flex: 0;
     white-space: nowrap;
-    ${(props: any) => (props.width !== null ? `width:${props.width}px;` : "")}
+    ${({ width }) => (width !== null ? `width:${width}px;` : "")}
     border-radius: 3px 0px 0px 3px;
     display: flex;
     align-items: center;
     height: 26px;
 `;
 
-export const Input: any = styled.input`
+export const Input = styled.input<{
+    theme?: QrynTheme;
+    error: boolean | string;
+}>`
     display: flex;
     flex: 1;
-    background: ${({ theme }: any) => theme.deep};
-    color: ${({ theme }: any) => theme.contrast};
+    background: ${({ theme }) => theme.deep};
+    color: ${({ theme }) => theme.contrast};
     border: 1px solid
-        ${(props: any) => (props.error ? "#b62c14" : props.theme.accentNeutral)};
+        ${({ error, theme }) => (error ? "#b62c14" : theme.accentNeutral)};
     border-radius: 3px;
     justify-self: flex-end;
     height: 26px;
     padding-left: 8px;
 `;
 
-export const TextArea: any = styled.textarea`
+export const TextArea = styled.textarea<{ theme?: QrynTheme }>`
     display: flex;
     flex: 1;
-    background: ${({ theme }: any) => theme.deep};
-    color: ${({ theme }: any) => theme.contrast};
-    border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+    background: ${({ theme }) => theme.deep};
+    color: ${({ theme }) => theme.contrast};
+    border: 1px solid ${({ theme }) => theme.accentNeutral};
     border-radius: 3px;
     justify-self: flex-end;
     padding-left: 8px;
 `;
 
-export const InputGroup: any = styled.div`
+export const InputGroup = styled.div<{
+    theme?: QrynTheme;
+    width?: number | string;
+}>`
     display: flex;
     flex-direction: row;
     margin-top: 5px;
     align-items: center;
-    ${(props: any) =>
-        props?.width && props?.width === "normal" ? "" : "flex:1;"}
+    ${({ width }) => (width && width === "normal" ? "" : "flex:1;")}
     //flex: 1;
     select {
-        background: ${({ theme }: any) => theme.deep};
-        color: ${({ theme }: any) => theme.contrast};
-        border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+        background: ${({ theme }) => theme.deep};
+        color: ${({ theme }) => theme.contrast};
+        border: 1px solid ${({ theme }) => theme.accentNeutral};
         border-radius: 3px;
         font-size: 12px;
         height: 30px;
@@ -165,7 +171,7 @@ export const InputGroup: any = styled.div`
     }
 `;
 
-export const InputCol: any = styled.div`
+export const InputCol = styled.div`
     display: flex;
     margin: 15px 0px;
     margin-left: 14px;
@@ -177,24 +183,24 @@ export const InputCol: any = styled.div`
     }
 `;
 
-export const InputHeaderCol: any = styled.div`
+export const InputHeaderCol = styled.div`
     display: flex;
     margin: 15px 0px;
     margin-left: 14px;
     align-items: center;
 `;
-export const InputCont: any = styled.div`
+export const InputCont = styled.div`
     padding: 10px;
 `;
-export const LinkFieldsGroup: any = styled.div`
+export const LinkFieldsGroup = styled.div<{ theme?: QrynTheme }>`
     margin: 10px 0px;
     padding-bottom: 10px;
-    border-bottom: 1px solid ${({ theme }: any) => theme.background};
+    border-bottom: 1px solid ${({ theme }) => theme.background};
 `;
 
-export const SettingsTitle: any = styled.div`
+export const SettingsTitle = styled.div<{ theme?: QrynTheme }>`
     padding: 10px;
-    border-bottom: 1px solid ${({ theme }: any) => theme.shadow};
+    border-bottom: 1px solid ${({ theme }) => theme.shadow};
     border-radius: 3px;
     display: flex;
     flex: 1;
@@ -209,20 +215,23 @@ export const SettingsTitle: any = styled.div`
     }
 `;
 
-export const DataSourceSettingsCont: any = styled.div`
+export const DataSourceSettingsCont = styled.div<{ theme?: QrynTheme }>`
     padding: 10px;
     border-radius: 0px 0px 3px 3px;
-    border-top: 1px solid ${({ theme }: any) => theme.accentNeutral};
+    border-top: 1px solid ${({ theme }) => theme.accentNeutral};
 `;
 
-export const DsButtonStyled: any = styled(BtnSmall)`
-    
-    background: ${(props: any) =>
-        props.primary ? props.theme.primary : props.theme.neutral};
+export const DsButtonStyled = styled(BtnSmall)<{
+    theme?: QrynTheme;
+    primary?: boolean;
+    disabled?: boolean;
+}>`
+    background: ${({ primary, theme }) =>
+        primary ? theme.primary : theme.neutral};
 
-    border: 1px solid ${({ theme }: any) => theme.accentNeutral};
-    color: ${(props: any) =>
-        props.primary ? props.theme.maxContrast : props.theme.contrast};
+    border: 1px solid ${({ theme }) => theme.accentNeutral};
+    color: ${({ primary, theme }) =>
+        primary ? theme.maxContrast : theme.contrast};
     margin-left: 5px;
     transition: 0.25s all;
     justify-content: center;
@@ -230,15 +239,16 @@ export const DsButtonStyled: any = styled(BtnSmall)`
     height: 26px;
     display: flex;
     &:hover {
-        background: ${({ theme, disabled }: any) => disabled ? theme.neutral : theme.primaryLight};
-        color: ${(props: any) =>
-            props.primary ? props.theme.contrast : props.theme.maxContrast};
+        background: ${({ theme, disabled }) =>
+            disabled ? theme.neutral : theme.primaryLight};
+        color: ${({ primary, theme }) =>
+            primary ? theme.contrast : theme.maxContrast};
     }
     &:disabled {
-        background: ${({ theme }: any) => theme.neutral};
-        border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+        background: ${({ theme }) => theme.neutral};
+        border: 1px solid ${({ theme }) => theme.accentNeutral};
         cursor: not-allowed;
-        color: ${({ theme }: any) => theme.contrast};
+        color: ${({ theme }) => theme.contrast};
     }
     @media screen and (max-width: 1070px) {
         display: flex;
diff --git a/packages/main/views/DataSources/ui/Field.tsx b/packages/main/views/DataSources/ui/Field.tsx
index 3b5d492b..38194298 100644
--- a/packages/main/views/DataSources/ui/Field.tsx
+++ b/packages/main/views/DataSources/ui/Field.tsx
@@ -2,7 +2,10 @@ import { InputGroup, Label, Input } from "../styles";
 import DOMPurify from "isomorphic-dompurify";
 export const Field = (props: any) => {
     const { value, label, onChange, locked, type, placeholder, error, labelWidth} = props;
-    return (
+  
+  // set an initial value and a value for cancelling 
+  // that should be previous stored value
+  return (
         <InputGroup>
             <Label width={labelWidth||null}>{label}</Label>
             <Input
diff --git a/packages/main/views/DataSources/ui/Select.tsx b/packages/main/views/DataSources/ui/Select.tsx
index 438af267..57d4de4a 100644
--- a/packages/main/views/DataSources/ui/Select.tsx
+++ b/packages/main/views/DataSources/ui/Select.tsx
@@ -1,5 +1,5 @@
 import { cx, css } from "@emotion/css";
-import DOMPurify from 'isomorphic-dompurify'
+import DOMPurify from "isomorphic-dompurify";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { InputGroup, Label } from "../styles";
 
@@ -7,7 +7,7 @@ const FlexOne = (fullWidth: any) => css`
     display: flex;
     min-width: 100px;
     flex: ${fullWidth ? 1 : 0};
-    -ms-flex:${fullWidth ? 1 : 0};
+    -ms-flex: ${fullWidth ? 1 : 0};
 `;
 
 export const Select = ({
@@ -25,13 +25,12 @@ export const Select = ({
     const selectRef: any = useRef(null);
 
     const formattedSelect = useMemo(() => {
-        if (typeof opts[0] === "string") {
-            return opts.map((k: string) => ({
+        if (opts && opts[0] && typeof opts[0] === "string") {
+            return opts?.map((k: string) => ({
                 value: k,
-                name:k,
+                name: k,
             }));
-        } else
-       return opts
+        } else return opts;
     }, [opts]);
 
     useEffect(() => {
@@ -42,12 +41,13 @@ export const Select = ({
             setInitialValue(selected);
             selectRef.current.value = selected;
         }
-          
     }, [value]);
 
     return (
         <InputGroup width={width}>
-            {label?.length > 0 && <Label width={labelWidth || null}>{label}</Label>}
+            {label?.length > 0 && (
+                <Label width={labelWidth || null}>{label}</Label>
+            )}
             <select
                 ref={selectRef}
                 className={cx(FlexOne(fullWidth))}
@@ -56,10 +56,7 @@ export const Select = ({
                 onChange={(e) => onChange(e, name)}
             >
                 {formattedSelect?.map((field: any, key: number) => (
-                    <option
-                        key={key}
-                        value={DOMPurify.sanitize(field.value)}
-                    >
+                    <option key={key} value={DOMPurify.sanitize(field.value)}>
                         {field.name}
                     </option>
                 ))}
diff --git a/packages/main/views/DataSources/views/Settings.tsx b/packages/main/views/DataSources/views/Settings.tsx
index 3f552e9d..40065002 100644
--- a/packages/main/views/DataSources/views/Settings.tsx
+++ b/packages/main/views/DataSources/views/Settings.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+
 import DOMPurify from "isomorphic-dompurify";
 import {
     DataSourceHeaders,
@@ -7,31 +7,27 @@ import {
     SectionHeader,
     AuthFields,
 } from "../components";
-import setDataSources from "../store/setDataSources";
 
 import { DataSourceSettingsCont, InputCont, InputCol } from "../styles";
 import { Field } from "../ui";
+import { useStoreSettings } from "../hooks/useStoreSettings";
 
 export const Settings = (props: any) => {
-    const { headers, id, linkedFields, name, url, cors }: any = props;
-
-    const dispatch: any = useDispatch();
+    const [settingsData, setSettingsData] = useState(props);
+    const { settings, storeSettings } = useStoreSettings();
 
-    const state = useSelector(({ dataSources }: any) => dataSources);
     const [fieldErrors, setFieldErrors] = useState({
         url: false,
         protocol: false,
     });
     const onFieldChange = (prop: any, value: any) => {
         let val = value;
-        const arrayClone = JSON.parse(JSON.stringify(state));
-        
+        const arrayClone = JSON.parse(JSON.stringify(settings));
         arrayClone.forEach((field: any) => {
-            if (field.id === id) {
+            if (field.id === settingsData.id) {
                 field[prop] = val;
             }
         });
-
         return arrayClone;
     };
 
@@ -50,7 +46,7 @@ export const Settings = (props: any) => {
     const onChange = (e: any, name: any) => {
         setIsEditing(() => true);
         const value = e.target.value;
-        // check here if name === url
+
         if (name === "url") {
             const protocol_match = checkURLProtocol(value);
 
@@ -68,9 +64,11 @@ export const Settings = (props: any) => {
                     protocol: false,
                     url: false,
                 }));
+
                 const newVal = onFieldChange(name, value);
-                localStorage.setItem("dataSources", JSON.stringify(newVal));
-                dispatch(setDataSources(newVal));
+
+                storeSettings(newVal);
+
                 setTimeout(() => {
                     setIsEditing(() => false);
                 }, 800);
@@ -78,13 +76,19 @@ export const Settings = (props: any) => {
         }
 
         const newVal = onFieldChange(name, value);
-        localStorage.setItem("dataSources", JSON.stringify(newVal));
-        dispatch(setDataSources(newVal));
+        storeSettings(newVal);
         setTimeout(() => {
             setIsEditing(() => false);
         }, 800);
     };
 
+    useEffect(() => {
+        setSettingsData((prev) => ({
+            ...prev,
+            ...settings?.find((f) => f.id === prev.id),
+        }));
+    }, [settings]);
+
     return (
         <DataSourceSettingsCont>
             <SectionHeader
@@ -98,13 +102,13 @@ export const Settings = (props: any) => {
             <InputCont>
                 <InputCol>
                     <Field
-                        value={DOMPurify.sanitize(name)}
+                        value={DOMPurify.sanitize(settingsData.name)}
                         label={"Name"}
                         onChange={(e: any) => onChange(e, "name")}
                     />
 
                     <Field
-                        value={DOMPurify.sanitize(url)}
+                        value={DOMPurify.sanitize(settingsData.url)}
                         label={"URL"}
                         error={fieldErrors.url || fieldErrors.protocol}
                         onChange={(e: any) => onChange(e, "url")}
@@ -112,11 +116,28 @@ export const Settings = (props: any) => {
                 </InputCol>
             </InputCont>
 
-            <AuthFields {...props} />
+            <AuthFields
+                id={settingsData.id}
+                auth={settingsData.auth}
+                dataSources={settings}
+                onDsChange={storeSettings}
+            />
 
-            <DataSourceHeaders cors={cors} headers={headers} id={id} />
+            <DataSourceHeaders
+                id={settingsData.id}
+                cors={settingsData.cors}
+                headers={settingsData.headers}
+                dataSources={settings}
+                onDsChange={storeSettings}
+            />
 
-            <LinkedFields {...props} linkedFields={linkedFields} />
+            <LinkedFields
+                id={settingsData.id}
+                name={settingsData.name}
+                onDsChange={storeSettings}
+                dataSources={settings}
+                linkedFields={settingsData.linkedFields}
+            />
         </DataSourceSettingsCont>
     );
 };