diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index ed8bc3aa238b..d27fdb7e2c17 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -5,14 +5,10 @@ import { useUpdateNodeInternals } from "reactflow";
 import { default as IconComponent } from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
-import { Case } from "../../../../shared/components/caseComponent";
 import useFlowStore from "../../../../stores/flowStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
-import {
-  NodeOutputFieldComponentType,
-  ParameterComponentType,
-} from "../../../../types/components";
+import { NodeOutputFieldComponentType } from "../../../../types/components";
 import {
   getGroupOutputNodeId,
   scapedJSONStringfy,
@@ -20,7 +16,6 @@ import {
 import {
   classNames,
   cn,
-  isThereModal,
   logHasMessage,
   logTypeIsError,
   logTypeIsUnknown,
@@ -194,36 +189,38 @@ export default function NodeOutputField({
                   : "Please build the component first"
               }
             >
-              <OutputModal
-                disabled={!displayOutputPreview || unknownOutput}
-                nodeId={flowPoolId}
-                outputName={internalOutputName}
-              >
-                <Button
-                  unstyled
+              <div>
+                <OutputModal
                   disabled={!displayOutputPreview || unknownOutput}
-                  data-testid={`output-inspection-${title.toLowerCase()}`}
+                  nodeId={flowPoolId}
+                  outputName={internalOutputName}
                 >
-                  {errorOutput ? (
-                    <IconComponent
-                      className={classNames(
-                        "h-5 w-5 rounded-md text-status-red",
-                      )}
-                      name={"X"}
-                    />
-                  ) : (
-                    <IconComponent
-                      className={classNames(
-                        "h-5 w-5 rounded-md",
-                        displayOutputPreview && !unknownOutput
-                          ? "hover:text-medium-indigo"
-                          : "cursor-not-allowed text-muted-foreground",
-                      )}
-                      name={"ScanEye"}
-                    />
-                  )}
-                </Button>
-              </OutputModal>
+                  <Button
+                    unstyled
+                    disabled={!displayOutputPreview || unknownOutput}
+                    data-testid={`output-inspection-${title.toLowerCase()}`}
+                  >
+                    {errorOutput ? (
+                      <IconComponent
+                        className={classNames(
+                          "h-5 w-5 rounded-md text-status-red",
+                        )}
+                        name={"X"}
+                      />
+                    ) : (
+                      <IconComponent
+                        className={classNames(
+                          "h-5 w-5 rounded-md",
+                          displayOutputPreview && !unknownOutput
+                            ? "hover:text-medium-indigo"
+                            : "cursor-not-allowed text-muted-foreground",
+                        )}
+                        name={"ScanEye"}
+                      />
+                    )}
+                  </Button>
+                </OutputModal>
+              </div>
             </ShadTooltip>
           </div>
         </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
index f8496e1eafbc..1aa48efe7272 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
@@ -1,6 +1,5 @@
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useState } from "react";
-import { Button } from "../../../../components/ui/button";
 import BaseModal from "../../../../modals/baseModal";
 import SwitchOutputView from "./components/switchOutputView";
 
@@ -38,7 +37,7 @@ export default function OutputModal({
         />
       </BaseModal.Content>
       <BaseModal.Footer close></BaseModal.Footer>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
     </BaseModal>
   );
 }
diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
index 8324620aabcd..128d80fa79b8 100644
--- a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
+++ b/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
@@ -17,8 +17,8 @@ const SideBarButtonsComponent = ({
 }: SideBarButtonsComponentProps) => {
   return (
     <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
-      {items.map((item) => (
-        <CustomLink to={item.href!}>
+      {items.map((item, index) => (
+        <CustomLink key={index} to={item.href!}>
           <div
             key={item.title}
             data-testid={`sidebar-nav-${item.title}`}
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 722d65cd6519..62493280fa00 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -122,7 +122,9 @@ const TableComponent = forwardRef<
         }
       }, 50);
       setTimeout(() => {
-        realRef?.current?.api?.hideOverlay();
+        if (!realRef?.current?.api?.isDestroyed) {
+          realRef?.current?.api?.hideOverlay();
+        }
       }, 1000);
       if (props.onGridReady) props.onGridReady(params);
     };
diff --git a/src/frontend/src/icons/AstraDB/AstraDB.jsx b/src/frontend/src/icons/AstraDB/AstraDB.jsx
index c54bee90ad46..e32ec69964d0 100644
--- a/src/frontend/src/icons/AstraDB/AstraDB.jsx
+++ b/src/frontend/src/icons/AstraDB/AstraDB.jsx
@@ -7,7 +7,7 @@ const AstraSVG = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clip-path="url(#clip0_702_1449)">
+    <g clipPath="url(#clip0_702_1449)">
       {/* <rect width="96" height="96" rx="6" fill="white"/> */}
       <path
         d="M38.0469 33H12V62.1892H38.0469L44.5902 57.1406V38.0485L38.0469 33ZM17.0478 38.0485H39.5424V57.1459H17.0478V38.0485Z"
diff --git a/src/frontend/src/icons/Unstructured/Unstructured.jsx b/src/frontend/src/icons/Unstructured/Unstructured.jsx
index eb509e488958..b2ca5c82a021 100644
--- a/src/frontend/src/icons/Unstructured/Unstructured.jsx
+++ b/src/frontend/src/icons/Unstructured/Unstructured.jsx
@@ -5,7 +5,7 @@ const SvgGoogleGenerativeAI = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clip-path="url(#clip0_6067_405)">
+    <g clipPath="url(#clip0_6067_405)">
       <rect width="24" height="24" fill="#0ADDF8" />
       <path
         d="M14.2453 4.39688C13.9172 4.57031 13.7672 4.83281 13.7953 5.19375C13.8281 5.61563 14.0625 5.83125 14.6953 6.02344C15.2156 6.18281 15.3516 6.35156 15.1406 6.5625C14.9578 6.74531 14.5312 6.67031 14.2922 6.41719L14.1609 6.27656L13.9219 6.40781C13.7953 6.47813 13.6875 6.55313 13.6875 6.56719C13.6875 6.58125 13.7484 6.67969 13.8234 6.78281C14.0297 7.06875 14.3672 7.21875 14.7984 7.21875C15.4781 7.21875 15.8578 6.90469 15.8578 6.34688C15.8578 5.88281 15.6234 5.65313 14.9391 5.44688C14.4516 5.30156 14.3297 5.18906 14.4516 4.99688C14.4937 4.93594 14.5828 4.875 14.6484 4.85625C14.7984 4.81875 15.0937 4.89375 15.2437 5.01094L15.3562 5.10469L15.5766 4.95469C15.6937 4.87031 15.7969 4.78125 15.7969 4.75313C15.7969 4.72969 15.7406 4.65 15.6703 4.57969C15.3141 4.24219 14.6953 4.1625 14.2453 4.39688Z"
diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
index eada8c66add8..43d4d59f907e 100644
--- a/src/frontend/src/modals/secretKeyModal/index.tsx
+++ b/src/frontend/src/modals/secretKeyModal/index.tsx
@@ -76,7 +76,7 @@ export default function SecretKeyModal({
       open={open}
       setOpen={setOpen}
     >
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={
           renderKey ? (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx
index eed367820e96..afcda7268eef 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx
@@ -1,13 +1,11 @@
 import ShadTooltip from "@/components/shadTooltipComponent";
 import { nodeColors, nodeIconsLucide, nodeNames } from "@/utils/styleUtils";
 import { removeCountFromString } from "@/utils/utils";
-import { Fragment } from "react/jsx-runtime";
 import DisclosureComponent from "../../DisclosureComponent";
 import SidebarDraggableComponent from "../sideBarDraggableComponent";
 import sensitiveSort from "../utils/sensitive-sort";
 
 export function SidebarCategoryComponent({
-  index,
   search,
   getFilterEdge,
   category,
@@ -15,54 +13,50 @@ export function SidebarCategoryComponent({
   onDragStart,
 }) {
   return (
-    <Fragment
-      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
+    <DisclosureComponent
+      isChild={false}
+      defaultOpen={
+        getFilterEdge.length !== 0 || search.length !== 0 ? true : false
+      }
+      button={{
+        title: nodeNames[name] ?? nodeNames.unknown,
+        Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
+      }}
     >
-      <DisclosureComponent
-        isChild={false}
-        defaultOpen={
-          getFilterEdge.length !== 0 || search.length !== 0 ? true : false
-        }
-        button={{
-          title: nodeNames[name] ?? nodeNames.unknown,
-          Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
-        }}
-      >
-        <div className="side-bar-components-gap">
-          {Object.keys(category)
-            .sort((a, b) =>
-              sensitiveSort(category[a].display_name, category[b].display_name),
-            )
-            .map((SBItemName: string, index) => (
-              <ShadTooltip
-                content={category[SBItemName].display_name}
-                side="right"
-                key={index}
-              >
-                <SidebarDraggableComponent
-                  sectionName={name as string}
-                  apiClass={category[SBItemName]}
-                  key={index}
-                  onDragStart={(event) =>
-                    onDragStart(event, {
-                      //split type to remove type in nodes saved with same name removing it's
-                      type: removeCountFromString(SBItemName),
-                      node: category[SBItemName],
-                    })
-                  }
-                  color={nodeColors[name]}
-                  itemName={SBItemName}
-                  //convert error to boolean
-                  error={!!category[SBItemName].error}
-                  display_name={category[SBItemName].display_name}
-                  official={
-                    category[SBItemName].official === false ? false : true
-                  }
-                />
-              </ShadTooltip>
-            ))}
-        </div>
-      </DisclosureComponent>
-    </Fragment>
+      <div className="side-bar-components-gap">
+        {Object.keys(category)
+          .sort((a, b) =>
+            sensitiveSort(category[a].display_name, category[b].display_name),
+          )
+          .map((SBItemName: string, idx) => (
+            <ShadTooltip
+              content={category[SBItemName].display_name}
+              side="right"
+              key={idx}
+            >
+              <SidebarDraggableComponent
+                sectionName={name as string}
+                apiClass={category[SBItemName]}
+                key={idx}
+                onDragStart={(event) =>
+                  onDragStart(event, {
+                    //split type to remove type in nodes saved with same name removing it's
+                    type: removeCountFromString(SBItemName),
+                    node: category[SBItemName],
+                  })
+                }
+                color={nodeColors[name]}
+                itemName={SBItemName}
+                //convert error to boolean
+                error={!!category[SBItemName].error}
+                display_name={category[SBItemName].display_name}
+                official={
+                  category[SBItemName].official === false ? false : true
+                }
+              />
+            </ShadTooltip>
+          ))}
+      </div>
+    </DisclosureComponent>
   );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8138008c5f82..3d086849ca79 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -233,7 +233,7 @@ export default function ExtraSidebar(): JSX.Element {
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
               <SidebarCategoryComponent
-                index={index}
+                key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                 search={search}
                 getFilterEdge={getFilterEdge}
                 category={dataFilter[SBSectionName]}
@@ -264,7 +264,7 @@ export default function ExtraSidebar(): JSX.Element {
             .map((SBSectionName: keyof APIObjectType, index) =>
               Object.keys(dataFilter[SBSectionName]).length > 0 ? (
                 <SidebarCategoryComponent
-                  index={index}
+                  key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                   search={search}
                   getFilterEdge={getFilterEdge}
                   category={dataFilter[SBSectionName]}
@@ -324,7 +324,7 @@ export default function ExtraSidebar(): JSX.Element {
                 .map((SBSectionName: keyof APIObjectType, index) =>
                   Object.keys(dataFilter[SBSectionName]).length > 0 ? (
                     <SidebarCategoryComponent
-                      index={index}
+                      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                       search={search}
                       getFilterEdge={getFilterEdge}
                       category={dataFilter[SBSectionName]}
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx
index 08beb19fdb0f..302272c9ac90 100644
--- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx
@@ -30,7 +30,6 @@ const TabsSearchComponent = ({
         newLocation = location.replace(/.*\/(?:flows|components)/, "/all");
         break;
     }
-    console.log(newLocation);
     navigate(newLocation);
   };
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
index e94a2e4a18a3..1879f1b36d9d 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@@ -15,7 +15,7 @@ const ApiKeyHeaderComponent = ({
 }: ApiKeyHeaderComponentProps) => {
   return (
     <>
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Langflow API
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index 32a6057bd611..24ef1324bcb1 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
@@ -37,8 +37,8 @@ export default function ProfilePictureChooserComponent({
       {loading || !imagesLoaded ? (
         <Loading />
       ) : (
-        Object.keys(profilePictures!).map((folder, idx) => (
-          <div className="flex flex-col gap-2">
+        Object.keys(profilePictures!).map((folder, index) => (
+          <div className="flex flex-col gap-2" key={index}>
             <div className="edit-flow-arrangement">
               <span className="font-normal">{folder}</span>
             </div>
@@ -46,6 +46,7 @@ export default function ProfilePictureChooserComponent({
               <div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-muted px-1 custom-scroll">
                 {profilePictures![folder].map((path, idx) => (
                   <Button
+                    key={idx}
                     ref={value === folder + "/" + path ? ref : undefined}
                     unstyled
                     onClick={() => onChange(folder + "/" + path)}
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index cd0531633cb9..46a5c055988f 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -62,6 +62,9 @@ export default function GlobalVariablesPage() {
     {
       headerName: "Apply To Fields",
       field: "default_fields",
+      valueFormatter: (params) => {
+        return params.value.join(", ");
+      },
       flex: 1,
       editable: false,
       resizable: false,
@@ -92,7 +95,7 @@ export default function GlobalVariablesPage() {
 
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Global Variables
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 04df1224e011..a914595f7bd4 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -57,7 +57,7 @@ export default function ShortcutsPage() {
 
   return (
     <div className="flex h-full w-full flex-col gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Shortcuts
@@ -71,7 +71,7 @@ export default function ShortcutsPage() {
           </p>
         </div>
         <div>
-          <div className="align-end mb-4 flex w-full justify-end">
+          <div className="align-end flex w-full justify-end">
             <div className="justify center flex items-center">
               {open && (
                 <EditShortcutButton