diff --git a/gui/pages/Content/APM/ApmDashboard.js b/gui/pages/Content/APM/ApmDashboard.js
index 8da446ab0..939d7f3b0 100644
--- a/gui/pages/Content/APM/ApmDashboard.js
+++ b/gui/pages/Content/APM/ApmDashboard.js
@@ -221,8 +221,9 @@ export default function ApmDashboard(key) {
                     <tbody>
                     {toolsUsed.map((tool, index) => (
                       <tr key={index}>
-                        <td className="table_data" style={{width: '100%', display:'flex', alignItems:'center'}}>
-                          <Image className="image_class" style={{background: 'black'}} width={20} height={20} src={returnToolkitIcon(tool.toolkit)} alt="tool-icon"/>
+                        <td className="table_data" style={{width: '100%', display: 'flex', alignItems: 'center'}}>
+                          <Image className="image_class" style={{background: 'black'}} width={20} height={20}
+                                 src={returnToolkitIcon(tool.toolkit)} alt="tool-icon"/>
                           <span>{tool.tool_name}</span>
                         </td>
                         <td className="table_data text_align_right" style={{width: '22%'}}>{tool.unique_agents}</td>
@@ -248,14 +249,37 @@ export default function ApmDashboard(key) {
                   <thead>
                   <tr style={{borderTop: 'none'}}>
                     <th className="table_header" style={{width: '20%'}}>Agent Name</th>
-                    <th className="table_header text_align_right" style={{width: '10%'}}>Model <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
-                    <th className="table_header text_align_right" style={{width: '12%'}}>Tokens Consumed <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
-                    <th className="table_header text_align_right" style={{width: '6%'}}>Runs <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
+                    <th className="table_header text_align_right" style={{width: '10%'}}>Model <img width={14}
+                                                                                                    height={14}
+                                                                                                    src="/images/arrow_downward.svg"
+                                                                                                    alt="arrow_down"/>
+                    </th>
+                    <th className="table_header text_align_right" style={{width: '12%'}}>Tokens Consumed <img width={14}
+                                                                                                              height={14}
+                                                                                                              src="/images/arrow_downward.svg"
+                                                                                                              alt="arrow_down"/>
+                    </th>
+                    <th className="table_header text_align_right" style={{width: '6%'}}>Runs <img width={14} height={14}
+                                                                                                  src="/images/arrow_downward.svg"
+                                                                                                  alt="arrow_down"/>
+                    </th>
                     <th className="table_header text_align_right" style={{width: '12%'}}>Avg tokens per run <img
                       width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
-                    <th className="table_header text_align_right" style={{width: '20%'}}>Tools <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
-                    <th className="table_header text_align_right" style={{width: '10%'}}>Calls <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
-                    <th className="table_header text_align_right" style={{width: '10%'}}>Avg Run Time <img width={14} height={14} src="/images/arrow_downward.svg" alt="arrow_down"/></th>
+                    <th className="table_header text_align_right" style={{width: '20%'}}>Tools <img width={14}
+                                                                                                    height={14}
+                                                                                                    src="/images/arrow_downward.svg"
+                                                                                                    alt="arrow_down"/>
+                    </th>
+                    <th className="table_header text_align_right" style={{width: '10%'}}>Calls <img width={14}
+                                                                                                    height={14}
+                                                                                                    src="/images/arrow_downward.svg"
+                                                                                                    alt="arrow_down"/>
+                    </th>
+                    <th className="table_header text_align_right" style={{width: '10%'}}>Avg Run Time <img width={14}
+                                                                                                           height={14}
+                                                                                                           src="/images/arrow_downward.svg"
+                                                                                                           alt="arrow_down"/>
+                    </th>
                   </tr>
                   </thead>
                 </table>
diff --git a/gui/pages/Content/Agents/ActivityFeed.js b/gui/pages/Content/Agents/ActivityFeed.js
index 8c8d83cc5..25258c7db 100644
--- a/gui/pages/Content/Agents/ActivityFeed.js
+++ b/gui/pages/Content/Agents/ActivityFeed.js
@@ -4,7 +4,7 @@ import {getExecutionFeeds, getDateTime} from "@/pages/api/DashboardService";
 import Image from "next/image";
 import {loadingTextEffect, formatTimeDifference} from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
-import { ClipLoader } from 'react-spinners';
+import {ClipLoader} from 'react-spinners';
 
 export default function ActivityFeed({selectedRunId, selectedView, setFetchedData, agent}) {
   const [loadingText, setLoadingText] = useState("Thinking");
@@ -121,7 +121,8 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
               This agent is scheduled to start on {scheduleDate}, at {scheduleTime}
             </div>
           </div> : <div>
-            {feeds && feeds.map((f, index) => (<div key={index} className={styles.history_box} style={{background: '#272335', padding: '20px', cursor: 'default'}}>
+            {feeds && feeds.map((f, index) => (<div key={index} className={styles.history_box}
+                                                    style={{background: '#272335', padding: '20px', cursor: 'default'}}>
               <div style={{display: 'flex'}}>
                 {f.role === 'user' && <div className={styles.feed_icon}>💁</div>}
                 {f.role === 'system' && <div className={styles.feed_icon}>🛠️ </div>}
@@ -165,11 +166,19 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
           </div>
         }
         {feeds.length < 1 && !agent?.is_running && !agent?.is_scheduled ?
-            (isLoading ?
+          (isLoading ?
             <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
-                  <ClipLoader/>
-                </div>
-                : <div style={{color: 'white', fontSize: '14px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', width: '100%'}}>The Agent is not scheduled</div>): null
+              <ClipLoader/>
+            </div>
+            : <div style={{
+              color: 'white',
+              fontSize: '14px',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              width: '100%'
+            }}>The Agent is not scheduled</div>) : null
         }
       </div>
       {feedContainerRef.current && feedContainerRef.current.scrollTop >= 1200 &&
diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index fa7d0d4fe..7913c9ce7 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -16,7 +16,7 @@ import {
   openNewTab,
   removeTab,
   setLocalStorageValue,
-  setLocalStorageArray, returnResourceIcon, getUserTimezone, createInternalId,preventDefault,excludedToolkits
+  setLocalStorageArray, returnResourceIcon, getUserTimezone, createInternalId, preventDefault, excludedToolkits
 } from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
 import styles from "@/pages/Content/Agents/Agents.module.css";
@@ -146,7 +146,7 @@ export default function AgentCreate({
         const models = response.data || [];
         const selected_model = localStorage.getItem("agent_model_" + String(internalId)) || '';
         setModelsArray(models);
-        if(models.length > 0 && !selected_model) {
+        if (models.length > 0 && !selected_model) {
           setLocalStorageValue("agent_model_" + String(internalId), models[0], setModel);
         } else {
           setModel(selected_model);
@@ -424,7 +424,7 @@ export default function AgentCreate({
       return false;
     }
 
-    if(!modelsArray.includes(model)) {
+    if (!modelsArray.includes(model)) {
       toast.error("Your key does not have access to the selected model", {autoClose: 1800});
       return false;
     }
@@ -466,7 +466,7 @@ export default function AgentCreate({
       "permission_type": permission_type,
       "LTM_DB": longTermMemory ? database : null,
       "user_timezone": getUserTimezone(),
-      "knowledge" : toolNames.includes('Knowledge Search') ? selectedKnowledgeId : null,
+      "knowledge": toolNames.includes('Knowledge Search') ? selectedKnowledgeId : null,
     };
 
     const scheduleAgentData = {
@@ -859,16 +859,23 @@ export default function AgentCreate({
                    style={{width: '100%', alignItems: 'flex-start'}}>
                 <div style={{display: 'flex', flexWrap: 'wrap', width: '100%', alignItems: 'start'}}>
                   {toolNames && toolNames.length > 0 && toolNames.map((tool, index) => (
-                      <div key={index} className="tool_container" style={{margin: '2px'}} onClick={preventDefault}>
-                        <div className={styles.tool_text}>{tool}</div>
-                        <div><Image width={12} height={12} src='/images/close_light.svg' alt="close-icon"
-                                    style={{margin: '-2px -5px 0 2px'}} onClick={() => removeTool(index)}/></div>
-                      </div>
+                    <div key={index} className="tool_container" style={{margin: '2px'}} onClick={preventDefault}>
+                      <div className={styles.tool_text}>{tool}</div>
+                      <div><Image width={12} height={12} src='/images/close.svg' alt="close-icon"
+                                  style={{margin: '-2px -5px 0 2px'}} onClick={() => removeTool(index)}/></div>
+                    </div>
                   ))}
-                  <input type="text" className="dropdown_search_text" value={searchValue} style={{flexGrow: 1}} onChange={(e) => setSearchValue(e.target.value)}
-                      onFocus={() => {setToolkitDropdown(true);setShowPlaceholder(false);}} onBlur={() => {setShowPlaceholder(true);}}
-                      onClick={(e) => e.stopPropagation()}/>
-                  {toolNames && toolNames.length === 0 && showPlaceholder && searchValue.length ===0 && <div style={{color: '#666666',position:'absolute'}}>Select Tools</div>}
+                  <input type="text" className="dropdown_search_text" value={searchValue} style={{flexGrow: 1}}
+                         onChange={(e) => setSearchValue(e.target.value)}
+                         onFocus={() => {
+                           setToolkitDropdown(true);
+                           setShowPlaceholder(false);
+                         }} onBlur={() => {
+                    setShowPlaceholder(true);
+                  }}
+                         onClick={(e) => e.stopPropagation()}/>
+                  {toolNames && toolNames.length === 0 && showPlaceholder && searchValue.length === 0 &&
+                    <div style={{color: '#666666', position: 'absolute'}}>Select Tools</div>}
                 </div>
                 <div style={{display: 'inline-flex'}}>
                   <Image width={20} height={21} onClick={(e) => clearTools(e)} src='/images/clear_input.svg'
@@ -1202,7 +1209,10 @@ export default function AgentCreate({
               </button>
             )}
             <div style={{display: 'flex', position: 'relative'}}>
-              {createDropdown && (<div className="create_agent_dropdown_options" onClick={() => {setCreateModal(true);setCreateDropdown(false);}}>Create & Schedule Run
+              {createDropdown && (<div className="create_agent_dropdown_options" onClick={() => {
+                setCreateModal(true);
+                setCreateDropdown(false);
+              }}>Create & Schedule Run
               </div>)}
               <div className="primary_button"
                    style={{backgroundColor: 'white', marginBottom: '4px', paddingLeft: '0', paddingRight: '5px'}}>
diff --git a/gui/pages/Content/Agents/AgentSchedule.js b/gui/pages/Content/Agents/AgentSchedule.js
index 574c0e6c7..e815ac3c2 100644
--- a/gui/pages/Content/Agents/AgentSchedule.js
+++ b/gui/pages/Content/Agents/AgentSchedule.js
@@ -9,7 +9,15 @@ import {agentScheduleComponent, createAndScheduleRun, updateSchedule} from "@/pa
 import {EventBus} from "@/utils/eventBus";
 import moment from 'moment';
 
-export default function AgentSchedule({internalId, closeCreateModal, type, agentId, setCreateModal, setCreateEditModal, env}) {
+export default function AgentSchedule({
+                                        internalId,
+                                        closeCreateModal,
+                                        type,
+                                        agentId,
+                                        setCreateModal,
+                                        setCreateEditModal,
+                                        env
+                                      }) {
   const [isRecurring, setIsRecurring] = useState(false);
   const [timeDropdown, setTimeDropdown] = useState(false);
   const [expiryDropdown, setExpiryDropdown] = useState(false);
diff --git a/gui/pages/Content/Agents/AgentTemplatesList.js b/gui/pages/Content/Agents/AgentTemplatesList.js
index 905f28dff..0dedde4b2 100644
--- a/gui/pages/Content/Agents/AgentTemplatesList.js
+++ b/gui/pages/Content/Agents/AgentTemplatesList.js
@@ -116,7 +116,7 @@ export default function AgentTemplatesList({
         </div> : <AgentCreate sendKnowledgeData={sendKnowledgeData} knowledge={knowledge} internalId={internalId}
                               organisationId={organisationId} sendAgentData={sendAgentData}
                               selectedProjectId={selectedProjectId} fetchAgents={fetchAgents} toolkits={toolkits}
-                              template={sendTemplate} env={env} />}
+                              template={sendTemplate} env={env}/>}
     </div>
   )
 };
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index 02016580c..ff2db7c12 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -374,9 +374,16 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
                   <li className="dropdown_item" onClick={handleStopScheduleClick}>Stop Schedule</li>
                 </div>) : (<div>
                   {agent && !agent?.is_running && !agent?.is_scheduled &&
-                    <li className="dropdown_item" onClick={() => {setDropdown(false);setCreateModal(true)}}>Schedule Run</li>}
+                    <li className="dropdown_item" onClick={() => {
+                      setDropdown(false);
+                      setCreateModal(true)
+                    }}>Schedule Run</li>}
                 </div>)}
-                <li className="dropdown_item" onClick={() => {setDropdown(false);setDeleteModal(true)}}>Delete Agent</li>
+                <li className="dropdown_item" onClick={() => {
+                  setDropdown(false);
+                  setDeleteModal(true)
+                }}>Delete Agent
+                </li>
               </ul>
             </div>}
 
@@ -384,7 +391,8 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
               <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="schedule_agent"
                              agentId={agentId} setCreateModal={() => setCreateModal(false)}/>}
             {createEditModal &&
-              <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="edit_schedule_agent"
+              <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal}
+                             type="edit_schedule_agent"
                              agentId={agentId} setCreateEditModal={() => setCreateEditModal(false)}/>}
             {createStopModal && (
               <div className="modal" onClick={closeCreateModal}>
diff --git a/gui/pages/Content/Agents/Details.js b/gui/pages/Content/Agents/Details.js
index 0bbdb5db3..4ac348f79 100644
--- a/gui/pages/Content/Agents/Details.js
+++ b/gui/pages/Content/Agents/Details.js
@@ -11,6 +11,22 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
   const [filteredInstructions, setFilteredInstructions] = useState(false);
   const [scheduleText, setScheduleText] = useState('Agent is not Scheduled');
 
+  const info_text = {
+    marginLeft: '7px',
+  };
+
+  const info_text_secondary = {
+    marginLeft: '3px',
+    marginTop: '2px',
+    color: '#888888',
+    lineHeight: '13px',
+    fontSize: '11px'
+  };
+
+  const openToolkitTab = (toolId) => {
+    EventBus.emit('openToolkitTab', {toolId: toolId});
+  }
+
   useEffect(() => {
     setFilteredInstructions(instructions?.filter(instruction => instruction.trim() !== ''));
   }, [instructions]);
@@ -46,22 +62,6 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
     }
   }, [agentScheduleDetails]);
 
-  const info_text = {
-    marginLeft: '7px',
-  };
-
-  const info_text_secondary = {
-    marginLeft: '3px',
-    marginTop: '2px',
-    color: '#888888',
-    lineHeight: '13px',
-    fontSize: '11px'
-  };
-
-  const openToolkitTab = (toolId) => {
-    EventBus.emit('openToolkitTab', {toolId: toolId});
-  }
-
   return (<>
     <div className={styles.history_box} style={{background: '#272335', padding: '15px', cursor: 'default'}}>
       <div className={styles.detail_name}>{agentDetails?.name || ''}</div>
diff --git a/gui/pages/Content/Agents/ResourceList.js b/gui/pages/Content/Agents/ResourceList.js
index 0207211ce..45e65f8e9 100644
--- a/gui/pages/Content/Agents/ResourceList.js
+++ b/gui/pages/Content/Agents/ResourceList.js
@@ -34,8 +34,8 @@ export default function ResourceList({files, channel, runs}) {
   )
 
   return (
-      <div>
-        {channel === 'output' && (!isAnyFileWithAgentId || files.length <= 0 ?
+    <div>
+      {channel === 'output' && (!isAnyFileWithAgentId || files.length <= 0 ?
           <div className="vertical_container">
             <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
             <span className={styles.feed_title} style={{marginTop: '8px'}}>No Output files!</span>
@@ -43,30 +43,30 @@ export default function ResourceList({files, channel, runs}) {
           :
           <div id="division_by_runs">
             {filesByRun.map((filesRun, index) => (
-          <div key={filesByRun.length - index - 1}>
-            <div className="horizontal_container justify_space_between cursor_pointer" style={{padding: '8px 6px'}}
-                 onClick={() => setSelectedRunId(filesRun.run.id === selectedRunId ? null : filesRun.run.id)}>
-              <div className="horizontal_container">
-                <Image
-                    src={selectedRunId === filesRun.run.id ? "/images/arrow_downward_dropdown.svg" : "/images/arrow_forward.svg"}
-                    alt="arrow" width={14} height={14}/>
-                <span className="text_12 ml_8">{filesRun.run.name}</span>
-                <div className="resource_manager_tip ml_8"><Image src="/images/bolt.svg" alt="bolt" width={10}
-                                                                  height={10}/> <span
-                    className="text_9">Run {filesByRun.length - index}</span></div>
-              </div>
-              <Image src="/images/download.svg" alt="download_icon" width={16} height={16}
-                     onClick={() => downloadRunFiles(filesRun.run.id, filesRun.run.name)}/>
-            </div>
+              <div key={filesByRun.length - index - 1}>
+                <div className="horizontal_container justify_space_between cursor_pointer" style={{padding: '8px 6px'}}
+                     onClick={() => setSelectedRunId(filesRun.run.id === selectedRunId ? null : filesRun.run.id)}>
+                  <div className="horizontal_container">
+                    <Image
+                      src={selectedRunId === filesRun.run.id ? "/images/arrow_downward_dropdown.svg" : "/images/arrow_forward.svg"}
+                      alt="arrow" width={14} height={14}/>
+                    <span className="text_12 ml_8">{filesRun.run.name}</span>
+                    <div className="resource_manager_tip ml_8"><Image src="/images/bolt.svg" alt="bolt" width={10}
+                                                                      height={10}/> <span
+                      className="text_9">Run {filesByRun.length - index}</span></div>
+                  </div>
+                  <Image src="/images/download.svg" alt="download_icon" width={16} height={16}
+                         onClick={() => downloadRunFiles(filesRun.run.id, filesRun.run.name)}/>
+                </div>
 
-            {selectedRunId === filesRun.run.id && (
-              <div className={styles.resources} style={{padding: '2px 8px'}}>
-                {filesRun.files.map((file, index) => <File key={index} file={file}/>)}
+                {selectedRunId === filesRun.run.id && (
+                  <div className={styles.resources} style={{padding: '2px 8px'}}>
+                    {filesRun.files.map((file, index) => <File key={index} file={file}/>)}
+                  </div>
+                )}
               </div>
-            )}
+            ))}
           </div>
-          ))}
-        </div>
       )}
 
       {channel === 'input' &&
diff --git a/gui/pages/Content/Agents/ResourceManager.js b/gui/pages/Content/Agents/ResourceManager.js
index f3acd2743..af60a61a7 100644
--- a/gui/pages/Content/Agents/ResourceManager.js
+++ b/gui/pages/Content/Agents/ResourceManager.js
@@ -16,7 +16,7 @@ export default function ResourceManager({agentId, runs}) {
 
   function handleFile(files) {
     if (files.length > 0) {
-      const sizeInMB = files[0].size / (1024*1024);
+      const sizeInMB = files[0].size / (1024 * 1024);
       if (sizeInMB > 5) {
         toast.error('File size should not exceed 5MB', {autoClose: 1800});
       } else {
diff --git a/gui/pages/Content/Knowledge/KnowledgeDetails.js b/gui/pages/Content/Knowledge/KnowledgeDetails.js
index 1d45b5fb3..39d104c6f 100644
--- a/gui/pages/Content/Knowledge/KnowledgeDetails.js
+++ b/gui/pages/Content/Knowledge/KnowledgeDetails.js
@@ -32,12 +32,11 @@ export default function KnowledgeDetails({internalId, knowledgeId}) {
       deleteMarketplaceKnowledge(knowledgeName)
         .then((response) => {
           console.log(response)
-          if(response.data.success){
+          if (response.data.success) {
             toast.success("Knowledge uninstalled successfully", {autoClose: 1800});
             removeTab(knowledgeId, knowledgeName, "Knowledge", internalId);
             EventBus.emit('reFetchKnowledge', {});
-          }
-          else{
+          } else {
             toast.error("Unable to uninstall knowledge", {autoClose: 1800});
           }
         })
@@ -49,12 +48,11 @@ export default function KnowledgeDetails({internalId, knowledgeId}) {
       deleteCustomKnowledge(knowledgeId)
         .then((response) => {
           console.log(response)
-          if(response.data.success) {
+          if (response.data.success) {
             toast.success("Knowledge uninstalled successfully", {autoClose: 1800});
             removeTab(knowledgeId, knowledgeName, "Knowledge", internalId);
             EventBus.emit('reFetchKnowledge', {});
-          }
-          else {
+          } else {
             toast.error("Unable to uninstall knowledge", {autoClose: 1800});
           }
         })
diff --git a/gui/pages/Content/Marketplace/KnowledgeTemplate.js b/gui/pages/Content/Marketplace/KnowledgeTemplate.js
index f0b9cf5c4..4f9fd2998 100644
--- a/gui/pages/Content/Marketplace/KnowledgeTemplate.js
+++ b/gui/pages/Content/Marketplace/KnowledgeTemplate.js
@@ -110,12 +110,11 @@ export default function KnowledgeTemplate({template, env}) {
 
     installKnowledgeTemplate(template.name, indexId)
       .then((response) => {
-        if(response.data.success) {
+        if (response.data.success) {
           toast.success("Knowledge installed", {autoClose: 1800});
           setInstalled('Installed');
           EventBus.emit('reFetchKnowledge', {});
-        }
-        else {
+        } else {
           toast.error("Error installing Knowledge: ", {autoClose: 1800});
           setInstalled('Install');
         }
@@ -133,11 +132,10 @@ export default function KnowledgeTemplate({template, env}) {
   const uninstallKnowledge = () => {
     deleteMarketplaceKnowledge(template.name)
       .then((response) => {
-        if(response.data.success) {
+        if (response.data.success) {
           toast.success("Knowledge uninstalled successfully", {autoClose: 1800});
           handleBackClick()
-        }
-        else {
+        } else {
           toast.error("Unable to uninstall knowledge", {autoClose: 1800});
         }
       })
@@ -177,12 +175,14 @@ export default function KnowledgeTemplate({template, env}) {
               <span style={{fontSize: '12px', marginTop: '15px',}}
                     className={styles.tool_publisher}>by {templateData?.contributed_by}&nbsp;{'\u00B7'}&nbsp;<Image
                 width={14} height={14} src="/images/upload_icon.svg"
-                alt="upload-icon" style={{marginBottom:'1px'}} />&nbsp;{'\u00B7'}&nbsp;{templateData?.install_number || 0}</span>
+                alt="upload-icon"
+                style={{marginBottom: '1px'}}/>&nbsp;{'\u00B7'}&nbsp;{templateData?.install_number || 0}</span>
 
               {!template?.is_installed && <div className="dropdown_container_search" style={{width: '100%'}}>
                 <div className="primary_button" onClick={() => setIndexDropdown(!indexDropdown)}
                      style={{marginTop: '15px', cursor: 'pointer', width: '100%'}}>
-                  <Image width={14} height={14} src="/images/upload_icon_dark.svg" alt="upload-icon"/>&nbsp;<span>{installed}</span>{installed === 'Installing' && <span className="loader ml_10"></span>}
+                  <Image width={14} height={14} src="/images/upload_icon_dark.svg" alt="upload-icon"/>&nbsp;
+                  <span>{installed}</span>{installed === 'Installing' && <span className="loader ml_10"></span>}
                 </div>
                 <div>
                   {indexDropdown && installed === 'Install' &&
diff --git a/gui/pages/Content/Marketplace/MarketKnowledge.js b/gui/pages/Content/Marketplace/MarketKnowledge.js
index a1cf2c9d3..31ba5cc51 100644
--- a/gui/pages/Content/Marketplace/MarketKnowledge.js
+++ b/gui/pages/Content/Marketplace/MarketKnowledge.js
@@ -50,16 +50,24 @@ export default function MarketKnowledge() {
       <div className={styles.rowContainer} style={{maxHeight: '78vh', overflowY: 'auto'}}>
         {!isLoading ? <div>
           {knowledgeTemplates.length > 0 ? <div className={styles.resources}>{knowledgeTemplates.map((item, index) => (
-            <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer',display:'block'}}
+            <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer', display: 'block'}}
                  onClick={() => handleTemplateClick(item)}>
               <div style={{display: 'inline', overflow: 'auto'}}>
                 {/*<Image style={{borderRadius: '25px',background:'black',position:'absolute'}} width={40} height={40} src="/images/app-logo-light.png" alt="tool-icon"/>*/}
-                <div style={{display:'flex',flexDirection:'row',width:'100%',justifyContent:'space-between'}}>
+                <div style={{display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
                   <span>{item.name}</span>
-                  {item.is_installed && <div className={styles1.installed_knowledge_card_class}>{'\u2713'}&nbsp;Installed</div>}
+                  {item.is_installed &&
+                    <div className={styles1.installed_knowledge_card_class}>{'\u2713'}&nbsp;Installed</div>}
+                </div>
+                <div style={{
+                  color: '#888888',
+                  lineHeight: '16px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  marginTop: item.is_installed ? '-2.5%' : ''
+                }}>by {item.contributed_by}&nbsp;{'\u00B7'}&nbsp;<Image
+                  width={14} height={14} src="/images/upload_icon.svg" alt="upload-icon"/>&nbsp;{item.install_number}
                 </div>
-                <div style={{color: '#888888', lineHeight: '16px', display: 'flex', alignItems: 'center', marginTop: item.is_installed ? '-2.5%':'' }}>by {item.contributed_by}&nbsp;{'\u00B7'}&nbsp;<Image
-                  width={14} height={14} src="/images/upload_icon.svg" alt="upload-icon"/>&nbsp;{item.install_number}</div>
                 <div className={styles.tool_description}>{item.description}</div>
               </div>
             </div>
diff --git a/gui/pages/Content/Toolkits/ToolkitWorkspace.js b/gui/pages/Content/Toolkits/ToolkitWorkspace.js
index 47cbcbaf2..048b6b331 100644
--- a/gui/pages/Content/Toolkits/ToolkitWorkspace.js
+++ b/gui/pages/Content/Toolkits/ToolkitWorkspace.js
@@ -26,10 +26,9 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
 
   function getGoogleToken(client_data) {
     var redirect_uri = "";
-    if (env == "PROD"){
+    if (env == "PROD") {
       redirect_uri = 'https://app.superagi.com/api/google/oauth-tokens';
-    }
-    else {
+    } else {
       redirect_uri = "http://localhost:3000/api/google/oauth-tokens";
     }
     const client_id = client_data.client_id
diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
index 403550ebe..633e3889b 100644
--- a/gui/pages/Dashboard/Content.js
+++ b/gui/pages/Dashboard/Content.js
@@ -56,7 +56,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
       const response = await getAgents(selectedProjectId);
       const data = response.data || [];
       const updatedData = data.map(item => {
-        return { ...item, contentType: "Agents" };
+        return {...item, contentType: "Agents"};
       });
       setAgents(updatedData);
     } catch (error) {
@@ -79,7 +79,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
       const response = await getToolKit();
       const data = response.data || [];
       const updatedData = data.map(item => {
-        return { ...item, contentType: "Toolkits", isOpen: false, internalId: createInternalId() };
+        return {...item, contentType: "Toolkits", isOpen: false, internalId: createInternalId()};
       });
       setToolkits(updatedData);
     } catch (error) {
@@ -102,7 +102,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
       const response = await getKnowledge();
       const data = response.data || [];
       const updatedData = data.map(item => {
-        return { ...item, contentType: "Knowledge", internalId: createInternalId() };
+        return {...item, contentType: "Knowledge", internalId: createInternalId()};
       });
       setKnowledge(updatedData);
     } catch (error) {
@@ -414,10 +414,12 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                 <div key={index}>
                   {selectedTab === index && <div>
                     {tab.contentType === 'Agents' &&
-                      <AgentWorkspace internalId={tab.internalId || index} agentId={tab.id} agentName={tab.name} selectedView={selectedView}
+                      <AgentWorkspace internalId={tab.internalId || index} agentId={tab.id} agentName={tab.name}
+                                      selectedView={selectedView}
                                       agents={agents} fetchAgents={getAgentList}/>}
                     {tab.contentType === 'Toolkits' &&
-                      <ToolkitWorkspace env={env} internalId={tab.internalId || index} toolkitDetails={toolkitDetails}/>}
+                      <ToolkitWorkspace env={env} internalId={tab.internalId || index}
+                                        toolkitDetails={toolkitDetails}/>}
                     {tab.contentType === 'Knowledge' &&
                       <KnowledgeDetails internalId={tab.internalId || index} knowledgeId={tab.id}/>}
                     {tab.contentType === 'Database' &&
diff --git a/gui/pages/Dashboard/Settings/AddDatabase.js b/gui/pages/Dashboard/Settings/AddDatabase.js
index 4d21c272f..6ba9f1519 100644
--- a/gui/pages/Dashboard/Settings/AddDatabase.js
+++ b/gui/pages/Dashboard/Settings/AddDatabase.js
@@ -168,7 +168,7 @@ export default function AddDatabase({internalId, sendDatabaseDetailsData}) {
 
       connectPinecone(pineconeData)
         .then((response) => {
-            connectResponse(response.data);
+          connectResponse(response.data);
         })
         .catch((error) => {
           toast.error("Unable to connect database", {autoClose: 1800});
@@ -205,8 +205,8 @@ export default function AddDatabase({internalId, sendDatabaseDetailsData}) {
 
       connectQdrant(qdrantData)
         .then((response) => {
-            connectResponse(response.data);
-         })
+          connectResponse(response.data);
+        })
         .catch((error) => {
           toast.error("Unable to connect database", {autoClose: 1800});
           console.error('Error fetching vector databases:', error);
diff --git a/gui/pages/Dashboard/Settings/Database.js b/gui/pages/Dashboard/Settings/Database.js
index d0f4b8b71..e3e4cae3f 100644
--- a/gui/pages/Dashboard/Settings/Database.js
+++ b/gui/pages/Dashboard/Settings/Database.js
@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {ToastContainer, toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import agentStyles from "@/pages/Content/Agents/Agents.module.css";
-import {createInternalId, formatTimeDifference, loadingTextEffect} from "@/utils/utils";
+import {createInternalId, formatTimeDifference, loadingTextEffect, preventDefault} from "@/utils/utils";
 import styles from "@/pages/Content/Marketplace/Market.module.css";
 import knowledgeStyles from "@/pages/Content/Knowledge/Knowledge.module.css";
 import Image from "next/image";
@@ -16,10 +16,6 @@ export default function Database({sendDatabaseData}) {
   const [deleteModal, setDeleteModal] = useState(false);
   const [selectedDatabase, setSelectedDatabase] = useState(null);
 
-  const preventDefault = (e) => {
-    e.stopPropagation();
-  };
-
   function fetchDatabases() {
     setIsLoading(true);
 
@@ -168,7 +164,8 @@ export default function Database({sendDatabaseData}) {
       <div className="modal-content" style={{width: '35%'}} onClick={preventDefault}>
         <div className={styles.detail_name}>Delete {selectedDatabase.name}</div>
         <div>
-          <label className={styles.form_label}>Deleting database will delete all the corresponding knowledge also. Do you want to delete database?</label>
+          <label className={styles.form_label}>Deleting database will delete all the corresponding knowledge also. Do
+            you want to delete database?</label>
         </div>
         <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: '20px'}}>
           <button className="secondary_button" style={{marginRight: '10px'}} onClick={() => setDeleteModal(false)}>
diff --git a/gui/pages/Dashboard/Settings/DatabaseDetails.js b/gui/pages/Dashboard/Settings/DatabaseDetails.js
index 5e4f3f4d7..0a7996ad4 100644
--- a/gui/pages/Dashboard/Settings/DatabaseDetails.js
+++ b/gui/pages/Dashboard/Settings/DatabaseDetails.js
@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {ToastContainer, toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import agentStyles from "@/pages/Content/Agents/Agents.module.css";
-import {removeTab, returnDatabaseIcon, setLocalStorageArray} from "@/utils/utils";
+import {removeTab, returnDatabaseIcon, setLocalStorageArray, preventDefault} from "@/utils/utils";
 import knowledgeStyles from "@/pages/Content/Knowledge/Knowledge.module.css";
 import styles from "@/pages/Content/Marketplace/Market.module.css";
 import Image from "next/image";
@@ -43,10 +43,6 @@ export default function DatabaseDetails({internalId, databaseId}) {
     }
   }, [collections]);
 
-  const preventDefault = (e) => {
-    e.stopPropagation();
-  };
-
   const addCollection = () => {
     setLocalStorageArray("db_details_collections_" + String(internalId), [...collections, 'collection name'], setCollections);
   };
@@ -85,12 +81,11 @@ export default function DatabaseDetails({internalId, databaseId}) {
   const updateChanges = () => {
     updateVectorDB(databaseId, collections)
       .then((response) => {
-        if(response.data.success) {
+        if (response.data.success) {
           toast.success("Database updated successfully", {autoClose: 1800});
           setInitialCollections(collections);
           setHasChanges(false);
-        }
-        else
+        } else
           toast.error("Unable to update database", {autoClose: 1800});
       })
       .catch((error) => {
@@ -193,7 +188,8 @@ export default function DatabaseDetails({internalId, databaseId}) {
       <div className="modal-content" style={{width: '35%'}} onClick={preventDefault}>
         <div className={styles.detail_name}>Delete {databaseDetails?.name}</div>
         <div>
-          <label className={styles.form_label}>Deleting database will delete all the corresponding knowledge also. Do you want to delete database?</label>
+          <label className={styles.form_label}>Deleting database will delete all the corresponding knowledge also. Do
+            you want to delete database?</label>
         </div>
         <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: '20px'}}>
           <button className="secondary_button" style={{marginRight: '10px'}} onClick={() => setDeleteModal(false)}>
diff --git a/gui/pages/Dashboard/Settings/Model.js b/gui/pages/Dashboard/Settings/Model.js
index 8d8dadc2f..c348ca00e 100644
--- a/gui/pages/Dashboard/Settings/Model.js
+++ b/gui/pages/Dashboard/Settings/Model.js
@@ -75,10 +75,6 @@ export default function Model({organisationId}) {
     setSourceDropdown(false);
   };
 
-  const preventDefault = (e) => {
-    e.stopPropagation();
-  };
-
   const saveSettings = () => {
     if (modelApiKey === null || modelApiKey.replace(/\s/g, '') === '') {
       toast.error("API key is empty", {autoClose: 1800});
diff --git a/gui/pages/_app.css b/gui/pages/_app.css
index 80e37636d..89bf47054 100644
--- a/gui/pages/_app.css
+++ b/gui/pages/_app.css
@@ -428,15 +428,8 @@ input[type="range"]::-moz-range-track {
 }
 
 .custom_select_option:hover, .create_agent_dropdown_options:hover {
-    pointer-events: none;
-    font-size: 12px;
-    color: #888888;
-    font-weight: normal;
-    height: auto;
-    max-width: 240px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    background: #3B3B49;
+    border-radius: 8px;
 }
 
 .custom_select_option:hover {
diff --git a/gui/pages/api/DashboardService.js b/gui/pages/api/DashboardService.js
index 095f46e9f..ed1a45daa 100644
--- a/gui/pages/api/DashboardService.js
+++ b/gui/pages/api/DashboardService.js
@@ -58,7 +58,7 @@ export const updateExecution = (executionId, executionData) => {
 
 export const editAgentTemplate = (agentTemplateId, agentTemplateData) => {
   return api.put(`/agent_templates/update_agent_template/${agentTemplateId}`, agentTemplateData)
-}
+};
 
 export const addExecution = (executionData) => {
   return api.post(`/agentexecutions/add`, executionData);
@@ -74,211 +74,212 @@ export const getLastActiveAgent = (projectId) => {
 
 export const uploadFile = (agentId, formData) => {
   return api.post(`/resources/add/${agentId}`, formData);
-}
+};
 
 export const validateAccessToken = () => {
   return api.get(`/validate-access-token`);
-}
+};
 
 export const validateLLMApiKey = (model_source, model_api_key) => {
-  return api.post(`/validate-llm-api-key`,{model_source, model_api_key});
-}
+  return api.post(`/validate-llm-api-key`, {model_source, model_api_key});
+};
+
 export const checkEnvironment = () => {
   return api.get(`/configs/get/env`);
-}
+};
 
 export const getOrganisationConfig = (organisationId, key) => {
   return api.get(`/configs/get/organisation/${organisationId}/key/${key}`);
-}
+};
 
 export const updateOrganisationConfig = (organisationId, configData) => {
   return api.post(`/configs/add/organisation/${organisationId}`, configData);
-}
+};
 
 export const fetchAgentTemplateList = () => {
   return api.get('/agent_templates/list?template_source=marketplace');
-}
+};
 
 export const fetchAgentTemplateDetails = (templateId) => {
   return api.get(`/agent_templates/get/${templateId}`);
-}
+};
 
 export const getToolConfig = (toolKitName) => {
   return api.get(`/tool_configs/get/toolkit/${toolKitName}`);
-}
+};
 
 export const updateToolConfig = (toolKitName, configData) => {
   return api.post(`/tool_configs/add/${toolKitName}`, configData);
-}
+};
 
 export const fetchAgentTemplateListLocal = () => {
   return api.get('/agent_templates/list?template_source=local');
-}
+};
 
 export const saveAgentAsTemplate = (agentId) => {
   return api.post(`/agent_templates/save_agent_as_template/${agentId}`);
-}
+};
 
 export const fetchAgentTemplateConfig = (templateId) => {
   return api.get(`/agent_templates/get/${templateId}?template_source=marketplace`);
-}
+};
 
 export const installAgentTemplate = (templateId) => {
   return api.post(`/agent_templates/download?agent_template_id=${templateId}`);
-}
+};
 
 export const fetchAgentTemplateConfigLocal = (templateId) => {
   return api.get(`/agent_templates/agent_config?agent_template_id=${templateId}`);
-}
+};
 
 export const updatePermissions = (permissionId, data) => {
   return api.put(`/agentexecutionpermissions/update/status/${permissionId}`, data)
-}
+};
 
 export const deleteAgent = (agentId) => {
   return api.put(`/agents/delete/${agentId}`)
-}
+};
 
 export const authenticateGoogleCred = (toolKitId) => {
   return api.get(`/google/get_google_creds/toolkit_id/${toolKitId}`);
-}
+};
 
 export const authenticateTwitterCred = (toolKitId) => {
   return api.get(`/twitter/get_twitter_creds/toolkit_id/${toolKitId}`);
-}
+};
 
 export const sendTwitterCreds = (twitter_creds) => {
   return api.post(`/twitter/send_twitter_creds/${twitter_creds}`);
-}
+};
 
 export const sendGoogleCreds = (google_creds, toolkit_id) => {
   return api.post(`/google/send_google_creds/toolkit_id/${toolkit_id}`, google_creds);
-}
+};
 
 export const fetchToolTemplateList = () => {
   return api.get(`/toolkits/get/list?page=0`);
-}
+};
 
 export const fetchKnowledgeTemplateList = () => {
   return api.get(`/knowledges/get/list?page=0`);
-}
+};
 
 export const fetchToolTemplateOverview = (toolTemplateName) => {
   return api.get(`/toolkits/marketplace/readme/${toolTemplateName}`);
-}
+};
 
 export const installToolkitTemplate = (templateName) => {
   return api.get(`/toolkits/get/install/${templateName}`);
-}
+};
 
 export const getExecutionDetails = (executionId, agentId) => {
   return api.get(`/agent_executions_configs/details/agent/${agentId}/agent_execution/${executionId}`);
-}
+};
 
 export const stopSchedule = (agentId) => {
   return api.post(`/agents/stop/schedule?agent_id=${agentId}`);
-}
+};
 
 export const createAndScheduleRun = (requestData) => {
   return api.post(`/agentexecutions/schedule`, requestData);
-}
+};
 
 export const agentScheduleComponent = (agentId) => {
   return api.get(`/agents/get/schedule_data/${agentId}`);
-}
+};
 
 export const updateSchedule = (requestData) => {
   return api.put(`/agents/edit/schedule`, requestData);
-}
+};
 
 export const getDateTime = (agentId) => {
   return api.get(`/agents/get/schedule_data/${agentId}`);
-}
+};
 
 export const getMetrics = () => {
   return api.get(`/analytics/metrics`)
-}
+};
 
 export const getAllAgents = () => {
   return api.get(`/analytics/agents/all`)
-}
+};
 
 export const getAgentRuns = (agent_id) => {
   return api.get(`analytics/agents/${agent_id}`);
-}
+};
 
 export const getActiveRuns = () => {
   return api.get(`analytics/runs/active`);
-}
+};
 
 export const getToolsUsage = () => {
   return api.get(`analytics/tools/used`);
-}
+};
 
 export const getLlmModels = () => {
   return api.get(`organisations/llm_models`);
-}
+};
 
 export const fetchVectorDBList = () => {
   return api.get(`/vector_dbs/get/list`);
-}
+};
 
 export const getVectorDatabases = () => {
   return api.get(`/vector_dbs/user/list`);
-}
+};
 
 export const getVectorDBDetails = (vectorDBId) => {
   return api.get(`/vector_dbs/get/db/details/${vectorDBId}`);
-}
+};
 
 export const deleteVectorDB = (vectorDBId) => {
   return api.post(`/vector_dbs/delete/${vectorDBId}`);
-}
+};
 
 export const updateVectorDB = (vectorDBId, newIndices) => {
   return api.put(`/vector_dbs/update/vector_db/${vectorDBId}`, newIndices);
-}
+};
 
 export const connectPinecone = (pineconeData) => {
   return api.post(`/vector_dbs/connect/pinecone`, pineconeData);
-}
+};
 
 export const connectQdrant = (qdrantData) => {
   return api.post(`/vector_dbs/connect/qdrant`, qdrantData);
-}
+};
 
 export const getKnowledge = () => {
   return api.get(`/knowledges/user/list`);
-}
+};
 
 export const getKnowledgeDetails = (knowledgeId) => {
   return api.get(`/knowledges/user/get/details/${knowledgeId}`);
-}
+};
 
 export const deleteCustomKnowledge = (knowledgeId) => {
   return api.post(`/knowledges/delete/${knowledgeId}`);
-}
+};
 
 export const deleteMarketplaceKnowledge = (knowledgeName) => {
   return api.post(`/knowledges/uninstall/${knowledgeName}`);
-}
+};
 
 export const addUpdateKnowledge = (knowledgeData) => {
   return api.post(`/knowledges/add_or_update/data`, knowledgeData);
-}
+};
 
 export const getValidIndices = () => {
   return api.get(`/vector_db_indices/get/user/valid_indices`);
-}
+};
 
 export const getValidMarketplaceIndices = (knowledgeName) => {
   return api.get(`/vector_db_indices/get/marketplace/valid_indices/${knowledgeName}`);
-}
+};
 
 export const fetchKnowledgeTemplateOverview = (knowledgeName) => {
   return api.get(`/knowledges/marketplace/get/details/${knowledgeName}`);
-}
+};
 
 export const installKnowledgeTemplate = (knowledgeName, indexId) => {
   return api.get(`/knowledges/install/${knowledgeName}/index/${indexId}`);
-}
+};
diff --git a/gui/utils/utils.js b/gui/utils/utils.js
index 3543cc62e..f43ba5225 100644
--- a/gui/utils/utils.js
+++ b/gui/utils/utils.js
@@ -200,7 +200,7 @@ export const refreshUrl = () => {
     return;
   }
 
-  const { origin, pathname } = window.location;
+  const {origin, pathname} = window.location;
   const urlWithoutToken = origin + pathname;
   window.history.replaceState({}, document.title, urlWithoutToken);
 };
@@ -447,6 +447,7 @@ export const convertToTitleCase = (str) => {
   const capitalizedWords = words.map((word) => word.charAt(0).toUpperCase() + word.slice(1));
   return capitalizedWords.join(' ');
 };
+
 export const preventDefault = (e) => {
   e.stopPropagation();
 };