diff --git a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
index 170c28b..b24fc07 100644
--- a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
+++ b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
@@ -10,7 +10,7 @@
   flex-direction: row;
 }
 .ontology_form {
-  width: 10vw;
+  width: 10.5vw;
   height: 50vh;
   overflow: auto;
   position: fixed;
@@ -28,26 +28,24 @@
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: flex-start;
-  align-items: end;
+  align-items: center;
   z-index: 10;
   flex: 1;
   border-bottom: solid 1px #eeee;
   h4 {
-    margin:0;
-    padding-right:1rem;
+    margin: 0;
+    padding-right: 1rem;
   }
   .mappings_search_bar {
+    margin: 0 0 0 8px;
     width: 60%;
   }
   .search-desc {
     flex: 0 0 100%;
-    margin-bottom:1rem;
+    margin-bottom: 1rem;
   }
 }
 
-
-
-
 .inactive_term,
 .active_term {
   padding: 10px;
@@ -120,3 +118,7 @@
 .view_more_wrapper {
   margin-left: 11vw;
 }
+
+.onto_search_bar {
+  margin-bottom: 8px;
+}
diff --git a/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx b/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx
index 123f96c..14d33ad 100644
--- a/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx
+++ b/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx
@@ -1,4 +1,4 @@
-import { Checkbox, Form } from 'antd';
+import { Checkbox, Form, Input } from 'antd';
 import { ontologyCounts } from '../Utilitiy';
 import { useContext, useEffect, useState } from 'react';
 import { SearchContext } from '../../../Contexts/SearchContext';
@@ -9,14 +9,19 @@ export const OntologyCheckboxes = ({ apiPreferences }) => {
     setApiPreferencesCode,
     facetCounts,
     ontologyApis,
-    component,
   } = useContext(SearchContext);
+  const { Search } = Input;
+
   const [checkedOntologies, setCheckedOntologies] = useState([]);
+  const [searchText, setSearchText] = useState('');
 
   const defaultOntologies = ['mondo', 'hp', 'maxo', 'ncit'];
 
   let processedApiPreferencesCode;
 
+  // Ensures the data sent to the API is in the correct format.
+  // If apiPreferencesCode is an array, sets processedApiPreferencesCode equal to it.
+  // If it is a comma-separated string, it splits it by the commas and adds them to an array
   if (Array.isArray(apiPreferencesCode)) {
     processedApiPreferencesCode = apiPreferencesCode;
   } else if (typeof apiPreferencesCode === 'string') {
@@ -81,15 +86,29 @@ export const OntologyCheckboxes = ({ apiPreferences }) => {
     ? checkedOntologies
     : [];
 
+  const getFilteredItems = searchText => {
+    const filtered = countsResult?.filter(item => {
+      const key = Object.keys(item)[0];
+      return key.startsWith(searchText);
+    });
+    return filtered;
+  };
+
   return (
     <div className="ontology_form">
+      <Search
+        placeholder="Ontologies"
+        className="onto_search_bar"
+        value={searchText}
+        onChange={e => setSearchText(e.target.value)}
+      />
       <Form.Item
         name="selected_ontologies"
         valuePropName="value"
         rules={[{ required: false }]}
       >
         <div className="modal_display_results">
-          {countsResult
+          {getFilteredItems(searchText)
             ?.sort((a, b) => {
               const aValue = Object.values(a)[0];
               const bValue = Object.values(b)[0];
diff --git a/src/components/Nav/Breadcrumbs.jsx b/src/components/Nav/Breadcrumbs.jsx
index f6b29ee..245d2f0 100644
--- a/src/components/Nav/Breadcrumbs.jsx
+++ b/src/components/Nav/Breadcrumbs.jsx
@@ -1,30 +1,34 @@
-import { Breadcrumb } from "antd"
+import { Breadcrumb } from 'antd';
 import { useLocation, Link } from 'react-router-dom';
 // import { Link } from 'react-router';
 export const Breadcrumbs = () => {
-   const location = useLocation();
-   const pathParts = location.pathname.split('/').filter(Boolean);
-   const pathArr = []
-   pathParts.forEach(path => {
-      pathArr.push({ title: path, path: path });
-   });
-  
-   console.log(location,'location');
-   
+  const location = useLocation();
+  const pathParts = location.pathname.split('/').filter(Boolean);
+  const pathArr = [];
+  pathParts.forEach(path => {
+    pathArr.push({ title: path, path: path });
+  });
 
-   return <span className="breadcrumbs">
-       <li><Link to={'/'}>Home</Link> {location.pathname != '/' && <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>}</li>
+  return (
+    <span className="breadcrumbs">
+      <li>
+        <Link to={'/'}>Home</Link>{' '}
+        {location.pathname != '/' && <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>}
+      </li>
       <Breadcrumb itemRender={itemRender} items={pathArr} />
-   </span>
-}
+    </span>
+  );
+};
 function itemRender(currentRoute, params, items, pathArr) {
-   const isLast = currentRoute?.path === items[items.length - 1]?.path;
+  const isLast = currentRoute?.path === items[items.length - 1]?.path;
 
-   return <>
-   {isLast ? (
-      <span>{currentRoute.title}</span>
-   ) : (
-      <Link to={`/${pathArr.join("/")}`}>{currentRoute.title}</Link>
-   )}
-   </>
-}
\ No newline at end of file
+  return (
+    <>
+      {isLast ? (
+        <span>{currentRoute.title}</span>
+      ) : (
+        <Link to={`/${pathArr.join('/')}`}>{currentRoute.title}</Link>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index ca17c9d..327a105 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -42,7 +42,8 @@ export const TableDetails = () => {
   const [load, setLoad] = useState(false);
 
   const [pageSize, setPageSize] = useState(
-    parseInt(localStorage.getItem('pageSize'), 10) || 10);
+    parseInt(localStorage.getItem('pageSize'), 10) || 10
+  );
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
@@ -54,21 +55,17 @@ export const TableDetails = () => {
   const login = RequiredLogin({ handleSuccess: handleSuccess });
 
   useEffect(() => {
-
     setDataSource(tableData(table));
     localStorage.setItem('pageSize', pageSize);
   }, [table, mapping, pageSize]);
 
-
-  const updateMappings = (mapArr,mappingCode ) => {
-    
+  const updateMappings = (mapArr, mappingCode) => {
     // setLoading(true);
     const mappingsDTO = {
       mappings: mapArr,
       editor: user.email,
     };
-    console.log(mappingsDTO,"mappingsDTO");
-    
+
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${mappingCode}`, {
       method: 'PUT',
       headers: {
@@ -87,11 +84,11 @@ export const TableDetails = () => {
         setMapping(data.codes);
         setEditMappings(null);
         form.resetFields();
-        notification.success({ description:'Mapping removed.'});
+        notification.success({ description: 'Mapping removed.' });
       })
       .catch(error => {
-        console.log(error,'error');
-        
+        console.log(error, 'error');
+
         if (error) {
           notification.error({
             message: 'Error',
@@ -103,7 +100,6 @@ export const TableDetails = () => {
       .finally(() => setLoading(false));
   };
 
-
   const alphabetizeOntologies = ontologies => {
     // Sort the keys alphabetically
     const sortedKeys = Object.keys(ontologies).sort();
@@ -131,8 +127,8 @@ export const TableDetails = () => {
               .then(data => setMapping(data.codes))
               .catch(error => {
                 if (error) {
-                  console.log(error,"error");
-                  
+                  console.log(error, 'error');
+
                   notification.error({
                     message: 'Error',
                     description: 'An error occurred loading mappings.',
@@ -236,37 +232,52 @@ variable in the table, AND the mappings array length for the variable is > 0, th
 and returns the length of the mapping array (i.e. returns the number of variables mapped to the table variable). 
 It then shows the mappings as table data and alows the user to delete a mapping from the table.*/
   const noMapping = variable => {
-    return <Button onClick={() => setGetMappings({ name: variable.name, code: variable.code })}>
-      Get Mappings
-    </Button>
-  }
+    return (
+      <Button
+        onClick={() =>
+          setGetMappings({ name: variable.name, code: variable.code })
+        }
+      >
+        Get Mappings
+      </Button>
+    );
+  };
 
   const matchCode = variable => {
-
-
     if (!mapping?.length) {
       return noMapping(variable);
     }
 
-    const variableMappings = mapping.find(item => item?.code === variable?.code);
+    const variableMappings = mapping.find(
+      item => item?.code === variable?.code
+    );
 
     if (variableMappings && variableMappings.mappings?.length) {
-      return variableMappings.mappings.map(code => <div className='mapping' key={code.display}><span className='mapping-display'>{code.display}</span><span className='remove-mapping' onClick={() => handleRemoveMapping(variableMappings,code)}><CloseCircleOutlined  style={{color:"red", }} /></span></div>);
+      return variableMappings.mappings.map(code => (
+        <div className="mapping" key={code.display}>
+          <span className="mapping-display">{code.display}</span>
+          <span
+            className="remove-mapping"
+            onClick={() => handleRemoveMapping(variableMappings, code)}
+          >
+            <CloseCircleOutlined style={{ color: 'red' }} />
+          </span>
+        </div>
+      ));
     } else {
       return noMapping(variable);
     }
   };
 
-  const handleRemoveMapping = (variableMappings,code) => {
-    // console.log(variableMappings,"variableMappings");
+  const handleRemoveMapping = (variableMappings, code) => {
     const mappingToRemove = variableMappings.mappings.indexOf(code);
     //remove mapping from mappings
-    {mappingToRemove !== -1 && variableMappings.mappings.splice(mappingToRemove,1)}   
-    updateMappings(variableMappings?.mappings,variableMappings?.code);    
-  
-  }
-
-
+    {
+      mappingToRemove !== -1 &&
+        variableMappings.mappings.splice(mappingToRemove, 1);
+    }
+    updateMappings(variableMappings?.mappings, variableMappings?.code);
+  };
 
   // data for the table columns. Each table has an array of variables. Each variable has a name, description, and data type.
   // The integer and quantity data types include additional details.
@@ -285,9 +296,11 @@ It then shows the mappings as table data and alows the user to delete a mapping
         max: variable.max,
         units: variable.units,
         enumeration: variable.data_type === 'ENUMERATION' && (
-          console.log(variable.enumerations.reference,"variable.enumerations.reference"),
-          
-          <Link to={`/Study/${studyId}/DataDictionary/${DDId}/Table/${tableId}/${variable.enumerations.reference}`}>View/Edit</Link>
+          <Link
+            to={`/Study/${studyId}/DataDictionary/${DDId}/Table/${tableId}/${variable.enumerations.reference}`}
+          >
+            View/Edit
+          </Link>
         ),
         mapped_terms: matchCode(variable),
       };
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 5316c5f..b3c4709 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -55,7 +55,6 @@ export const Terminology = () => {
       mappings: mapArr,
       editor: user.email,
     };
-    console.log(tableId, 'tableId');
 
     fetch(`${vocabUrl}/Terminology/${terminologyId}/mapping/${mappingCode}`, {
       method: 'PUT',
@@ -139,7 +138,6 @@ It then shows the mappings as table data and alows the user to delete a mapping
   };
 
   const handleRemoveMapping = (variableMappings, code) => {
-    // console.log(variableMappings,"variableMappings");
     const mappingToRemove = variableMappings.mappings.indexOf(code);
     //remove mapping from mappings
     {