diff --git a/.env b/.env
new file mode 100644
index 0000000..637e35e
--- /dev/null
+++ b/.env
@@ -0,0 +1,7 @@
+VITE_SEARCH_ENDPOINT = https://www.ebi.ac.uk/ols4/api/search?
+VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
+# VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
+VITE_VOCAB_ENDPOINT = https://locutus-dev-110109177269.us-central1.run.app/api # dev
+# VITE_VOCAB_ENDPOINT = https://locutus-uat-1066621297011.us-central1.run.app/api # uat
+VITE_CLIENT_ID = 159970607373-mvkv4lfl4ovpul5bssatuf1re4ucvg8n.apps.googleusercontent.com
+VITE_MAPDRAGON_VERSION = "Development"
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 6363339..52637e5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import { message } from 'antd';
 import { useState, createContext, useRef, useEffect } from 'react';
 import { AppRouter } from './AppRouter';
 import { GoogleOAuthProvider } from '@react-oauth/google';
+import { getSessionStatus } from './components/Manager/SessionsManager';
 
 export const myContext = createContext();
 
@@ -36,11 +37,15 @@ function App() {
   const [study, setStudy] = useState(initialStudy);
   const [selectedKey, setSelectedKey] = useState(null);
   const [user, setUser] = useState(null);
+  const [userPic, setUserPic] = useState(null);
   const [ontologyForPagination, setOntologyForPagination] = useState([]);
 
   message.config({
     top: '25vh',
   });
+  useEffect(() => {
+    // getSessionStatus(vocabUrl);
+  });
   return (
     <GoogleOAuthProvider clientId={clientId}>
       <myContext.Provider
@@ -75,6 +80,8 @@ function App() {
           setExportState,
           user,
           setUser,
+          userPic,
+          setUserPic,
           importState,
           setImportState,
           ontologyForPagination,
diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx
index a4039a1..4b8de64 100644
--- a/src/AppRouter.jsx
+++ b/src/AppRouter.jsx
@@ -29,9 +29,10 @@ import { SearchContextRoot } from './Contexts/SearchContext.jsx';
 import { About } from './components/About/About.jsx';
 
 export const AppRouter = () => {
+  const { user, vocabUrl } = useContext(myContext);
   const isLoggedIn = () => {
     const storedUser = localStorage.getItem('user');
-
+    
     if (storedUser) {
       return true;
     } else {
diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx
index 99e230a..1acac0f 100644
--- a/src/components/Auth/Login.jsx
+++ b/src/components/Auth/Login.jsx
@@ -3,19 +3,22 @@ import { jwtDecode } from 'jwt-decode';
 import { useContext, useEffect } from 'react';
 import { Logout } from './Logout';
 import { myContext } from '../../App';
+import { startSession } from '../Manager/SessionsManager';
 
 export const Login = () => {
-  const { user, setUser } = useContext(myContext);
+  const { user, setUser,setUserPic, userPic, vocabUrl } = useContext(myContext);
 
   useEffect(() => {
     const storedUser = localStorage.getItem('user');
+    const storedUserPic = localStorage.getItem('userPic');
     if (storedUser) {
       setUser(JSON.parse(storedUser));
+      setUserPic(JSON.parse(storedUserPic));
     }
   }, []);
   // If there is a user, it displays the Logout function with user information. Otherwise, it displays the login button
   return user ? (
-    <Logout user={user} setUser={setUser} />
+    <Logout user={user} setUser={setUser} userPic={userPic} setUserPic={setUserPic} />
   ) : (
     // Logs user in, decodes the JWT token, saves the decoded JWT in local storage and sets user to it
     <div>
@@ -25,11 +28,18 @@ export const Login = () => {
           const credentialResponseDecoded = jwtDecode(
             credentialResponse.credential
           );
-          setUser(credentialResponseDecoded);
+          console.log(credentialResponseDecoded,"credentialResponseDecoded");
           localStorage.setItem(
             'user',
-            JSON.stringify(credentialResponseDecoded)
+            JSON.stringify(credentialResponseDecoded.email)
           );
+          localStorage.setItem(
+            'picture',
+            JSON.stringify(credentialResponseDecoded.picture)
+          );
+          startSession(vocabUrl, credentialResponseDecoded.email);
+          setUser(credentialResponseDecoded.email);
+          setUserPic(credentialResponseDecoded.picture);
         }}
         onError={() => {
           console.log('Login Failed');
@@ -37,4 +47,4 @@ export const Login = () => {
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx
index 9df1e10..04f31bc 100644
--- a/src/components/Auth/LoginPage.jsx
+++ b/src/components/Auth/LoginPage.jsx
@@ -1,14 +1,14 @@
 import { Login } from "./Login"
 import { useContext } from 'react';
 import { myContext } from '../../App';
+import { getSessionStatus } from "../Manager/SessionsManager";
 export const LoginPage = () => {
-    const {user} = useContext(myContext);
+    const {user,vocabUrl} = useContext(myContext);
     return <div style={{background:"rgba(0,0,0,.2"}}>
         {user &&
         <h2 style={{textAlign:"center",paddingTop:'5rem'}}>You are logged in and can navigate to the rest of the site</h2>}
         <div style={{ height:"5rem",display:"flex",flexDirection:"column",justifyContent:"space-around",alignItems:"center"}}>
             <Login />
         </div>
-        
     </div>
 }
\ No newline at end of file
diff --git a/src/components/Auth/Logout.jsx b/src/components/Auth/Logout.jsx
index 3aa8d16..02c03c6 100644
--- a/src/components/Auth/Logout.jsx
+++ b/src/components/Auth/Logout.jsx
@@ -2,11 +2,19 @@ import { googleLogout } from '@react-oauth/google';
 import './Auth.scss';
 import { LogoutOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
+import { endSession } from '../Manager/SessionsManager';
+import { useContext } from 'react';
+import { myContext } from '../../App';
+
+export const Logout = ({ user, setUser,userPic,setUserPic }) => {
+  const { vocabUrl } = useContext(myContext)
 
-export const Logout = ({ user, setUser }) => {
   const logOut = () => {
+
     googleLogout();
+    endSession(vocabUrl);
     setUser(null);
+    setUserPic(null);
     localStorage.removeItem('user');
   };
 
@@ -14,8 +22,8 @@ export const Logout = ({ user, setUser }) => {
     <>
       <div className="logged_in_user">
         <div className="user_email">
-          <img className="user_image" src={user.picture} />
-          {user?.email}
+          <img className="user_image" src={userPic} />
+          {user}
         </div>
         <Tooltip mouseEnterDelay={0.5} placement="bottom" title="Log out">
           <LogoutOutlined
@@ -26,4 +34,4 @@ export const Logout = ({ user, setUser }) => {
       </div>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/Manager/FetchManager.jsx b/src/components/Manager/FetchManager.jsx
index 374d1cd..875475a 100644
--- a/src/components/Manager/FetchManager.jsx
+++ b/src/components/Manager/FetchManager.jsx
@@ -4,6 +4,7 @@ import { ontologyReducer } from './Utilitiy';
 export const getAll = (vocabUrl, name, navigate) => {
   return fetch(`${vocabUrl}/${name}`, {
     method: 'GET',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -24,6 +25,7 @@ export const getAll = (vocabUrl, name, navigate) => {
 export const getById = async (vocabUrl, name, id, navigate) => {
   return fetch(`${vocabUrl}/${name}/${id}`, {
     method: 'GET',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -46,13 +48,12 @@ export const getById = async (vocabUrl, name, id, navigate) => {
 
 // Deletes one element by its id
 export const handleDelete = (evt, vocabUrl, name, component, user) => {
-  const options = { method: 'DELETE' };
+  const options = { method: 'DELETE', credentials: 'include', };
 
   if (name === 'Table' || name === 'Terminology') {
     options.headers = {
       'Content-Type': 'application/json',
     };
-    options.body = JSON.stringify({ editor: user.email });
   }
   return fetch(`${vocabUrl}/${name}/${component.id}`, options)
     .then(response => {
@@ -82,6 +83,7 @@ export const handleDelete = (evt, vocabUrl, name, component, user) => {
 export const handleUpdate = (vocabUrl, name, component, values) => {
   return fetch(`${vocabUrl}/${name}/${component.id}`, {
     method: 'PUT',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -101,6 +103,7 @@ export const handleUpdate = (vocabUrl, name, component, values) => {
 export const handlePost = (vocabUrl, name, body) => {
   return fetch(`${vocabUrl}/${name}`, {
     method: 'POST',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -119,6 +122,7 @@ export const handlePost = (vocabUrl, name, body) => {
 export const handlePatch = (vocabUrl, name, component, body) => {
   return fetch(`${vocabUrl}/${name}/${component.id}/rename`, {
     method: 'PATCH',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -137,6 +141,7 @@ export const handlePatch = (vocabUrl, name, component, body) => {
 export const getProvenanceByCode = async (vocabUrl, name, id, code) => {
   return fetch(`${vocabUrl}/Provenance/${name}/${id}/code/${code}`, {
     method: 'GET',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -154,6 +159,7 @@ export const getProvenanceByCode = async (vocabUrl, name, id, code) => {
 export const getOntologies = vocabUrl => {
   return fetch(`${vocabUrl}/OntologyAPI`, {
     method: 'GET',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
     },
@@ -189,6 +195,7 @@ export const olsFilterOntologiesSearch = (
     `${searchUrl}q=${query}&ontology=${ontologiesToSearch}&rows=${entriesPerPage}&start=${pageStart}`,
     {
       method: 'GET',
+      credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
       },
@@ -248,6 +255,7 @@ export const getFiltersByCode = (
     }`,
     {
       method: 'GET',
+      credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
       },
diff --git a/src/components/Manager/MappingsFunctions/AssignMappings.jsx b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
index 187f8de..2304e7a 100644
--- a/src/components/Manager/MappingsFunctions/AssignMappings.jsx
+++ b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
@@ -70,7 +70,6 @@ export const AssignMappings = ({
     }));
     const mappingsDTO = {
       mappings: selectedMappings,
-      editor: user.email,
     };
 
     fetch(
diff --git a/src/components/Manager/MappingsFunctions/ClearMappings.jsx b/src/components/Manager/MappingsFunctions/ClearMappings.jsx
index bf2506b..2459cf3 100644
--- a/src/components/Manager/MappingsFunctions/ClearMappings.jsx
+++ b/src/components/Manager/MappingsFunctions/ClearMappings.jsx
@@ -18,10 +18,6 @@ export const ClearMappings = ({ propId, component }) => {
   const handleDelete = evt => {
     return fetch(`${vocabUrl}/${component}/${propId}/mapping`, {
       method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ editor: user.email }),
     })
       .then(res => {
         if (res.ok) {
diff --git a/src/components/Manager/MappingsFunctions/FilterAPI.jsx b/src/components/Manager/MappingsFunctions/FilterAPI.jsx
index 281151a..d75011e 100644
--- a/src/components/Manager/MappingsFunctions/FilterAPI.jsx
+++ b/src/components/Manager/MappingsFunctions/FilterAPI.jsx
@@ -59,6 +59,7 @@ export const FilterAPI = ({
     return (
       setTableLoading(true),
       fetch(`${vocabUrl}/OntologyAPI/${active}`, {
+        credentials: 'include',
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
diff --git a/src/components/Manager/MappingsFunctions/FilterReset.jsx b/src/components/Manager/MappingsFunctions/FilterReset.jsx
index 8efc0f4..393d1a9 100644
--- a/src/components/Manager/MappingsFunctions/FilterReset.jsx
+++ b/src/components/Manager/MappingsFunctions/FilterReset.jsx
@@ -20,14 +20,14 @@ export const FilterReset = ({ table, terminology }) => {
       `${vocabUrl}/${
         table
           ? `Table/${table.id}/filter/self`
-          : `Terminology/${terminology.id}/filter}`
+          : `Terminology/${terminology.id}/filter`
       }`,
       {
+        credentials: 'include',
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ editor: user.email }),
       }
     )
       .then(res => {
@@ -48,9 +48,10 @@ export const FilterReset = ({ table, terminology }) => {
           `${vocabUrl}/${
             table
               ? `Table/${table.id}/filter/self`
-              : `Terminology/${terminology.id}/filter}`
+              : `Terminology/${terminology.id}/filter`
           }`,
           {
+            credentials: 'include',
             method: 'GET',
             headers: {
               'Content-Type': 'application/json',
diff --git a/src/components/Manager/MappingsFunctions/FilterSelect.jsx b/src/components/Manager/MappingsFunctions/FilterSelect.jsx
index 5de5553..e8861fb 100644
--- a/src/components/Manager/MappingsFunctions/FilterSelect.jsx
+++ b/src/components/Manager/MappingsFunctions/FilterSelect.jsx
@@ -124,7 +124,6 @@ export const FilterSelect = ({ component, table, terminology }) => {
 
     const apiPreferenceDTO = {
       api_preference: apiPreference?.api_preference,
-      editor: user.email,
     };
 
     const method =
@@ -138,6 +137,7 @@ export const FilterSelect = ({ component, table, terminology }) => {
         ? `Table/${table.id}/filter/self`
         : `Terminology/${terminology.id}/filter`)}`,
       {
+        credentials: 'include',
         method: method,
         headers: {
           'Content-Type': 'application/json',
@@ -158,6 +158,7 @@ export const FilterSelect = ({ component, table, terminology }) => {
             ? `Table/${table.id}/filter/self`
             : `Terminology/${terminology.id}/filter`)}`,
           {
+            credentials: 'include',
             method: 'GET',
             headers: {
               'Content-Type': 'application/json',
diff --git a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
index 424e43e..a11baf7 100644
--- a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
+++ b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
@@ -165,10 +165,10 @@ export const GetMappingsModal = ({
 
     const mappingsDTO = {
       mappings: selectedMappings,
-      editor: user.email,
     };
 
     setLoading(true);
+    console.log(user);
     fetch(
       `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}?user_input=true&user=${user?.email}`,
       {
diff --git a/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmit.jsx b/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmit.jsx
index e1c0fc5..c5ccf3c 100644
--- a/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmit.jsx
+++ b/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmit.jsx
@@ -22,6 +22,7 @@ export const OntologyFilterCodeSubmit = (
     apiPreference.api_preference.ols = apiPreferencesCode;
 
     fetch(`${vocabUrl}/Table/${table.id}/filter/${mappingProp}`, {
+      credentials: 'include',
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/components/Manager/SessionsManager.jsx b/src/components/Manager/SessionsManager.jsx
new file mode 100644
index 0000000..eedb533
--- /dev/null
+++ b/src/components/Manager/SessionsManager.jsx
@@ -0,0 +1,59 @@
+export const startSession = (vocabUrl, email) => {  
+  const body = {
+    'user_id': email,
+    // 'affiliation': 'affiliation',
+  };
+  return fetch(`${vocabUrl}/session/start`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then(async res => {
+    const data = await res.json();
+    if (res.ok) {
+      console.log(data.message);
+      return data;
+    } else {
+      throw new Error(data.message || 'Unknown error occurred'); 
+    }
+  });
+};
+
+export const endSession = vocabUrl => {  
+  return fetch(`${vocabUrl}/session/terminate`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then(async res => {
+    const data = await res.json();
+    if (res.ok) {
+      console.log(data.message,'ended');
+      
+      return data;
+    } else {
+      throw new Error(data.message || 'Unknown error occurred'); 
+    }
+  });
+};
+
+export const getSessionStatus = vocabUrl => {
+  return fetch(`${vocabUrl}/session/status`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+  }).then(async res => {
+    const data = await res.json();
+    if (res.ok) {
+      console.log(data.message);
+      return data;
+    } else {
+      throw new Error(data.message || 'Unknown error occurred'); 
+    }
+  });
+};
diff --git a/src/components/Manager/ShowHistory.jsx b/src/components/Manager/ShowHistory.jsx
index 6d171d6..14bc620 100644
--- a/src/components/Manager/ShowHistory.jsx
+++ b/src/components/Manager/ShowHistory.jsx
@@ -34,7 +34,7 @@ export const ShowHistory = ({
   const valuesRender = text => {
     if (!text) return null;
     return text
-      .split(',')
+      ?.split(',')
       .map((item, index) => <div key={index}>{item.trim()}</div>);
   };
 
@@ -74,24 +74,25 @@ export const ShowHistory = ({
   };
 
   const dataSource =
-    provData?.changes?.map((prov, index) => ({
-      key: index,
-      timestamp: prov.timestamp,
-      action: prov.action,
-      old_value: prov.old_value,
-      new_value: prov.new_value,
-      editor: prov.editor,
-    })).sort((a, b) => {
-      const dateA = new Date(a.timestamp);
-      const dateB = new Date(b.timestamp);
-      return dateB - dateA;
-    }) ?? [];
+    provData?.changes
+      ?.map((prov, index) => ({
+        key: index,
+        timestamp: prov.timestamp,
+        action: prov.action,
+        old_value: prov.old_value,
+        new_value: prov.new_value,
+        editor: prov.editor,
+      }))
+      .sort((a, b) => {
+        const dateA = new Date(a.timestamp);
+        const dateB = new Date(b.timestamp);
+        return dateB - dateA;
+      }) ?? [];
 
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
 
-
   return (
     showHistory === tableData.key && (
       <Modal
@@ -125,7 +126,7 @@ export const ShowHistory = ({
                 showSizeChanger: true,
                 pageSizeOptions: ['10', '20', '30'],
                 pageSize: pageSize, // Use the stored pageSize
-                onChange: handleTableChange
+                onChange: handleTableChange,
               }} // Capture pagination changes
               size="small"
             />
diff --git a/src/components/Projects/DataDictionaries/RemoveTableDD.jsx b/src/components/Projects/DataDictionaries/RemoveTableDD.jsx
index 0327fd1..744b283 100644
--- a/src/components/Projects/DataDictionaries/RemoveTableDD.jsx
+++ b/src/components/Projects/DataDictionaries/RemoveTableDD.jsx
@@ -19,6 +19,7 @@ export const RemoveTableDD = ({ DDId, table, getDDTables }) => {
   // Then fetches the updated DD data with the table removed.
   const handleRemove = () => {
     return fetch(`${vocabUrl}/DataDictionary/${DDId}/Table/${table.id}`, {
+      credentials: 'include',
       method: 'DELETE',
     })
       .then(res => {
diff --git a/src/components/Projects/Tables/AddVariable.jsx b/src/components/Projects/Tables/AddVariable.jsx
index 8b22e62..bc274ca 100644
--- a/src/components/Projects/Tables/AddVariable.jsx
+++ b/src/components/Projects/Tables/AddVariable.jsx
@@ -1,6 +1,15 @@
 import { useContext, useState } from 'react';
 import { myContext } from '../../../App';
-import { Button, Form, Input, message, Modal, Select, Space } from 'antd';
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  notification,
+  Select,
+  Space,
+} from 'antd';
 import DataTypeSubForm from './DataTypeSubForm';
 import { ModalSpinner } from '../../Manager/Spinner';
 import { RequiredLogin } from '../../Auth/RequiredLogin';
@@ -27,7 +36,7 @@ export const AddVariable = ({ table, setTable }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ...values, editor: user.email }),
+      body: JSON.stringify(values),
     })
       .then(res => {
         if (res.ok) {
@@ -40,9 +49,18 @@ export const AddVariable = ({ table, setTable }) => {
         setTable(data);
         form.resetFields();
         setAddRow(false);
+        message.success('Variable added successfully.');
       })
-      // Displays a self-closing message that the udpates have been successfully saved.
-      .then(() => message.success('Variable added successfully.'))
+      .catch(error => {
+        if (error) {
+          notification.error({
+            message: 'Error',
+            description: 'An error occurred saving the variable.',
+          });
+        }
+        return error;
+      })
+
       .finally(() => setLoading(false));
   };
 
diff --git a/src/components/Projects/Tables/DeleteTable.jsx b/src/components/Projects/Tables/DeleteTable.jsx
index 67b315d..76307ce 100644
--- a/src/components/Projects/Tables/DeleteTable.jsx
+++ b/src/components/Projects/Tables/DeleteTable.jsx
@@ -18,7 +18,6 @@ export const DeleteTable = ({ DDId, studyId }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ editor: user.email }),
     })
       .then(res => {
         if (res.ok) {
diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index aac6938..b6b4021 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -141,7 +141,6 @@ export const EditMappingsTableModal = ({
 
           return parsedMapping;
         }) ?? [],
-      editor: user.email,
     };
 
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${editMappings.code}`, {
@@ -202,7 +201,6 @@ export const EditMappingsTableModal = ({
         }) ?? []),
         ...(selectedMappings ?? []),
       ],
-      editor: user.email,
     };
 
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${editMappings.code}`, {
diff --git a/src/components/Projects/Tables/EditTableDetails.jsx b/src/components/Projects/Tables/EditTableDetails.jsx
index cae5c4c..8b03650 100644
--- a/src/components/Projects/Tables/EditTableDetails.jsx
+++ b/src/components/Projects/Tables/EditTableDetails.jsx
@@ -26,7 +26,6 @@ export const EditTableDetails = ({ table, setTable, edit, setEdit }) => {
       ...values,
       filename: table.filename,
       variables: table?.variables,
-      editor: user.email,
     })
       .then(data => {
         setTable(data);
diff --git a/src/components/Projects/Tables/EditVariable.jsx b/src/components/Projects/Tables/EditVariable.jsx
index a87daa7..405d55b 100644
--- a/src/components/Projects/Tables/EditVariable.jsx
+++ b/src/components/Projects/Tables/EditVariable.jsx
@@ -74,7 +74,6 @@ export const EditVariable = ({
     if (!table.variables.some(item => item?.name === values?.name)) {
       handlePatch(vocabUrl, 'Table', table, {
         ...updatedName,
-        editor: user.email,
       })
         .catch(error => {
           if (error) {
@@ -91,7 +90,7 @@ export const EditVariable = ({
             headers: {
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ ...values, editor: user.email }),
+            body: JSON.stringify(values),
           })
             .then(res => {
               if (res.ok) {
@@ -129,7 +128,6 @@ export const EditVariable = ({
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ ...values, editor: user.email }),
       })
         .then(res => {
           if (res.ok) {
@@ -144,6 +142,16 @@ export const EditVariable = ({
           setEditRow('');
           message.success('Changes saved successfully.');
         })
+        .catch(error => {
+          if (error) {
+            notification.error({
+              message: 'Error',
+              description: 'An error occurred editing the variable.',
+            });
+          }
+          return error;
+        })
+        .finally(() => setLoading(false))
 
         .then(() =>
           getById(vocabUrl, 'Table', `${tableId}/mapping`)
diff --git a/src/components/Projects/Tables/LoadVariables.jsx b/src/components/Projects/Tables/LoadVariables.jsx
index feff7ce..b0a5306 100644
--- a/src/components/Projects/Tables/LoadVariables.jsx
+++ b/src/components/Projects/Tables/LoadVariables.jsx
@@ -19,7 +19,7 @@ export const LoadVariables = ({ load, setLoad }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ...values, editor: user.email }),
+      body: JSON.stringify(values),
     })
       .then(res => {
         if (res.status === 400) {
diff --git a/src/components/Projects/Tables/ResetTableMappings.jsx b/src/components/Projects/Tables/ResetTableMappings.jsx
index ad63bd8..c0c95b4 100644
--- a/src/components/Projects/Tables/ResetTableMappings.jsx
+++ b/src/components/Projects/Tables/ResetTableMappings.jsx
@@ -18,7 +18,6 @@ export const ResetTableMappings = ({ tableId, editMappings, setReset }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ editor: user.email }),
     })
       .then(response => {
         if (response.ok) {
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index fdaf8ec..6a5abc2 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -78,7 +78,6 @@ export const TableDetails = () => {
     // setLoading(true);
     const mappingsDTO = {
       mappings: mapArr,
-      editor: user.email,
     };
 
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${mappingCode}`, {
diff --git a/src/components/Projects/Tables/TableMenu.jsx b/src/components/Projects/Tables/TableMenu.jsx
index 83c261a..337a893 100644
--- a/src/components/Projects/Tables/TableMenu.jsx
+++ b/src/components/Projects/Tables/TableMenu.jsx
@@ -59,7 +59,6 @@ export const TableMenu = ({
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ editor: user.email }),
     })
       .then(res => {
         if (res.ok) {
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 609bd6b..10cf06e 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -75,3 +75,30 @@ input::file-selector-button:hover {
   gap: 10px;
   margin-left: 50px;
 }
+
+.mapping {
+  &-display {
+    white-space: nowrap;
+  }
+  display: flex;
+  .remove-mapping {
+    padding-left: 0.25rem;
+    cursor: pointer;
+    opacity: 0;
+
+    &:hover {
+      transition: all 0.4s linear;
+      opacity: 1;
+    }
+  }
+}
+
+.mapping_relationship {
+  padding: 2px 6px;
+  border: 1px solid $greyColor;
+  border-radius: 4px;
+  &:hover {
+    background-color: rgb(245, 245, 245);
+    transition: all 0.3s linear;
+  }
+}
diff --git a/src/components/Projects/Tables/UploadTable.jsx b/src/components/Projects/Tables/UploadTable.jsx
index 850976e..2d5cd75 100644
--- a/src/components/Projects/Tables/UploadTable.jsx
+++ b/src/components/Projects/Tables/UploadTable.jsx
@@ -37,7 +37,7 @@ export const UploadTable = ({ addTable, setAddTable }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ...values, editor: user.email }),
+      body: JSON.stringify(values),
     })
       .then(res => {
         if (res.status === 400) {
diff --git a/src/components/Projects/Terminologies/AddCode.jsx b/src/components/Projects/Terminologies/AddCode.jsx
index 56f3701..7c7f984 100644
--- a/src/components/Projects/Terminologies/AddCode.jsx
+++ b/src/components/Projects/Terminologies/AddCode.jsx
@@ -23,7 +23,7 @@ export const AddCode = ({ terminology, setTerminology }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ...values, editor: user.email }),
+      body: JSON.stringify(values),
     })
       .then(res => {
         if (res.ok) {
diff --git a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
index 4b539b7..d5aa834 100644
--- a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
+++ b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
@@ -64,7 +64,6 @@ export const AssignMappingsViaButton = ({
     }));
     const mappingsDTO = {
       mappings: selectedMappings,
-      editor: user.email,
     };
 
     fetch(
diff --git a/src/components/Projects/Terminologies/DeleteTerminology.jsx b/src/components/Projects/Terminologies/DeleteTerminology.jsx
index ba01443..4a791ba 100644
--- a/src/components/Projects/Terminologies/DeleteTerminology.jsx
+++ b/src/components/Projects/Terminologies/DeleteTerminology.jsx
@@ -17,7 +17,6 @@ export const DeleteTerminology = ({ setTerms, deleteId, setDeleteId }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ editor: user.email }),
     })
       .then(res => {
         if (res.ok) {
diff --git a/src/components/Projects/Terminologies/EditCode.jsx b/src/components/Projects/Terminologies/EditCode.jsx
index 466c1c5..b4e1363 100644
--- a/src/components/Projects/Terminologies/EditCode.jsx
+++ b/src/components/Projects/Terminologies/EditCode.jsx
@@ -76,7 +76,6 @@ export const EditCode = ({
 
     handlePatch(vocabUrl, 'Terminology', terminology, {
       ...updatedRowDTO,
-      editor: user.email,
     })
       .then(data => {
         setTerminology(data);
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 92b2259..07cb649 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -142,6 +142,16 @@ export const EditMappingsModal = ({
           return parsedMapping;
         }) ?? [],
       editor: user.email,
+      mappings:
+        values?.mappings?.map(v => {
+          const parsedMapping = JSON.parse(v);
+          if (idsForSelect[parsedMapping.code]) {
+            parsedMapping.mapping_relationship =
+              idsForSelect[parsedMapping.code];
+          }
+
+          return parsedMapping;
+        }) ?? [],
     };
     fetch(
       `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true&user=${user?.email}`,
@@ -204,7 +214,6 @@ export const EditMappingsModal = ({
         }) ?? []),
         ...(selectedMappings ?? []),
       ],
-      editor: user.email,
     };
 
     fetch(
diff --git a/src/components/Projects/Terminologies/PreferredTerminology.jsx b/src/components/Projects/Terminologies/PreferredTerminology.jsx
index ef66b10..c300fb6 100644
--- a/src/components/Projects/Terminologies/PreferredTerminology.jsx
+++ b/src/components/Projects/Terminologies/PreferredTerminology.jsx
@@ -66,7 +66,6 @@ export const PreferredTerminology = ({ terminology, setTerminology }) => {
 
     const preferredTermDTO = () => {
       return {
-        'editor': user.email,
         'preferred_terminologies': preferredTerminologies,
       };
     };
diff --git a/src/components/Projects/Terminologies/ResetMappings.jsx b/src/components/Projects/Terminologies/ResetMappings.jsx
index 86dc52b..630cabb 100644
--- a/src/components/Projects/Terminologies/ResetMappings.jsx
+++ b/src/components/Projects/Terminologies/ResetMappings.jsx
@@ -20,7 +20,6 @@ export const ResetMappings = ({ terminologyId, editMappings, setReset }) => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ editor: user.email }),
       }
     )
       .then(response => {
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 73da018..15b1773 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -54,8 +54,6 @@ export const Terminology = () => {
     mapping,
     setMapping,
     setRelationshipOptions,
-    comment,
-    setComment,
   } = useContext(MappingContext);
 
   const [pageSize, setPageSize] = useState(
@@ -87,10 +85,9 @@ export const Terminology = () => {
   const navigate = useNavigate();
 
   const updateMappings = (mapArr, mappingCode) => {
-    // setLoading(true);
+    setLoading(true);
     const mappingsDTO = {
       mappings: mapArr,
-      editor: user.email,
     };
 
     fetch(
@@ -113,8 +110,8 @@ export const Terminology = () => {
       .then(data => {
         setMapping(data.codes);
         setEditMappings(null);
-        form.resetFields();
         message.success('Mapping removed.');
+        form.resetFields();
       })
       .catch(error => {
         console.log(error, 'error');
diff --git a/src/components/Projects/Terminologies/TerminologyMenu.jsx b/src/components/Projects/Terminologies/TerminologyMenu.jsx
index 54b5ed5..423f8b6 100644
--- a/src/components/Projects/Terminologies/TerminologyMenu.jsx
+++ b/src/components/Projects/Terminologies/TerminologyMenu.jsx
@@ -71,8 +71,7 @@ export const TerminologyMenu = ({
       method: 'DELETE',
       headers: {
         'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ editor: user.email }),
+      }
     })
       .then(res => {
         if (res.ok) {