diff --git a/packages/toolkit/src/components/ReferenceHintTag.tsx b/packages/toolkit/src/components/ReferenceHintTag.tsx
new file mode 100644
index 0000000000..d7895248e8
--- /dev/null
+++ b/packages/toolkit/src/components/ReferenceHintTag.tsx
@@ -0,0 +1,62 @@
+import cn from "clsx";
+import * as React from "react";
+import { Icons } from "@instill-ai/design-system";
+
+export const ReferenceHintTagRoot = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex h-5 flex-row items-center gap-x-1 rounded-full bg-semantic-accent-bg px-2 py-1",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const ReferenceHintTagIcon = ({
+  type,
+  className,
+}: {
+  type: "x" | "check";
+  className?: string;
+}) => {
+  return type === "x" ? (
+    <Icons.ReferenceIconX
+      className={cn("h-[9px] w-[18px] stroke-semantic-fg-secondary", className)}
+    />
+  ) : (
+    <Icons.ReferenceIconCheck
+      className={cn(
+        "h-[9px] w-[18px] stroke-semantic-accent-default",
+        className
+      )}
+    />
+  );
+};
+export const ReferenceHintTagLabel = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <p className={cn("font-sans text-[11px] font-medium", className)}>
+      {children}
+    </p>
+  );
+};
+
+export const ReferenceHintTag = {
+  Root: ReferenceHintTagRoot,
+  Icon: ReferenceHintTagIcon,
+  Label: ReferenceHintTagLabel,
+};
diff --git a/packages/toolkit/src/components/index.ts b/packages/toolkit/src/components/index.ts
index 9c0a89edb2..bb193d5282 100644
--- a/packages/toolkit/src/components/index.ts
+++ b/packages/toolkit/src/components/index.ts
@@ -25,6 +25,7 @@ export * from "./ObjectViewer";
 export * from "./PageBase";
 export * from "./PageHead";
 export * from "./PageTitle";
+export * from "./ReferenceHintTag";
 export * from "./cells";
 export * from "./TableError";
 export * from "./UserProfileCard";
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ListField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ListField.tsx
new file mode 100644
index 0000000000..ad5338e707
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ListField.tsx
@@ -0,0 +1,35 @@
+import { ReferenceHintTag } from "../../../../components";
+
+export const ListField = ({
+  componentID,
+  path,
+  title,
+  instillFormat,
+  description,
+}: {
+  componentID?: string;
+  path: string;
+  title: string;
+  instillFormat: string;
+  description?: string;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <p className="mb-2 text-semantic-fg-secondary product-body-text-4-medium">
+        {`${title} [${instillFormat}]`}
+      </p>
+      <div className="mb-1 flex">
+        <ReferenceHintTag.Root>
+          <ReferenceHintTag.Label className="text-semantic-accent-default">
+            {componentID ? `${componentID}.` + path : path}
+          </ReferenceHintTag.Label>
+        </ReferenceHintTag.Root>
+      </div>
+      {description ? (
+        <p className="text-[#1D243380] product-body-text-4-regular">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ObjectArrayField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ObjectArrayField.tsx
new file mode 100644
index 0000000000..2a26d2fceb
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/ObjectArrayField.tsx
@@ -0,0 +1,43 @@
+import { ComponentOutputReferenceHints } from ".";
+import { ComponentOutoutReferenceHint } from "../../type";
+
+export const ObjectArrayField = ({
+  hints,
+  parentPath,
+  componentID,
+}: {
+  hints: ComponentOutoutReferenceHint[];
+  parentPath: string;
+  componentID?: string;
+}) => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <p className="mb-1 text-semantic-fg-secondary product-body-text-4-medium">
+        {`${parentPath} [array]`}
+      </p>
+      <div className="flex flex-col gap-y-2 rounded border border-semantic-bg-line p-2">
+        <p className="text-semantic-fg-secondary product-body-text-4-regular">
+          <span>{"The "}</span>
+          <span className="product-body-text-4-medium">{parentPath}</span>
+          <span>
+            {
+              " is an array with this object, you need to add the index to correctly reference its value"
+            }
+          </span>
+        </p>
+        {hints.map((hint) => {
+          return (
+            <ComponentOutputReferenceHints.ListField
+              key={componentID + hint.path}
+              componentID={componentID}
+              title={hint.title}
+              path={hint.path.replace(parentPath, `${parentPath}[index]`)}
+              instillFormat={hint.instillFormat}
+              description={hint.description}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/index.ts b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/index.ts
new file mode 100644
index 0000000000..f7739d4a6c
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/index.ts
@@ -0,0 +1,7 @@
+import { ListField } from "./ListField";
+import { ObjectArrayField } from "./ObjectArrayField";
+
+export const ComponentOutputReferenceHints = {
+  ListField,
+  ObjectArrayField,
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/index.ts b/packages/toolkit/src/lib/use-instill-form/index.ts
index cd6c4b8cd9..a327974d02 100644
--- a/packages/toolkit/src/lib/use-instill-form/index.ts
+++ b/packages/toolkit/src/lib/use-instill-form/index.ts
@@ -2,3 +2,4 @@ export * from "./type";
 export * from "./useComponentOutputFields";
 export * from "./useInstillForm";
 export * from "./useStartOperatorTriggerPipelineForm";
+export * from "./useComponentOutputReferenceHintFields";
diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
index b710af89a0..151d7f7d39 100644
--- a/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
@@ -93,7 +93,7 @@ export function pickComponentOutputFieldsFromInstillFormTree(
   }
 
   // Process objectArray
-  // Becase we don't know the index of the output objectArray, we need to user
+  // Becase we don't know the index of the output objectArray, we need to use
   // the data as a hint here
 
   if (tree._type === "objectArray") {
diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickComponentsFromReferenceHints.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentsFromReferenceHints.tsx
new file mode 100644
index 0000000000..3b53a22db7
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentsFromReferenceHints.tsx
@@ -0,0 +1,58 @@
+import { groupBy } from "../../utility";
+import { ComponentOutputReferenceHints } from "../components/component-output-reference-hints";
+import { ComponentOutoutReferenceHint } from "../type";
+
+export type PickComponentsFromReferenceHintsOptions = {
+  mode?: "groupByFormat" | "list";
+  componentID?: string;
+};
+
+export function pickComponentsFromReferenceHints(
+  hints: ComponentOutoutReferenceHint[],
+  options?: PickComponentsFromReferenceHintsOptions
+) {
+  const mode = options?.mode ?? "list";
+  const componentID = options?.componentID ?? undefined;
+  const fields: React.ReactNode[] = [];
+
+  if (mode === "list") {
+    const nonObjectArrayHints: ComponentOutoutReferenceHint[] = [];
+    const objectArrayHints: ComponentOutoutReferenceHint[] = [];
+
+    hints.forEach((hint) => {
+      if (hint.isObjectArrayChild) {
+        objectArrayHints.push(hint);
+      } else {
+        nonObjectArrayHints.push(hint);
+      }
+    });
+
+    const groupedObjectArrayHints = groupBy(objectArrayHints, (hint) =>
+      hint.isObjectArrayChild ? hint.objectArrayParentPath : ""
+    );
+
+    nonObjectArrayHints.forEach((hint) => {
+      fields.push(
+        <ComponentOutputReferenceHints.ListField
+          title={hint.title}
+          path={hint.path}
+          instillFormat={hint.instillFormat}
+          description={hint.description}
+          componentID={componentID}
+        />
+      );
+    });
+
+    Object.entries(groupedObjectArrayHints).forEach(([parentPath, hints]) => {
+      fields.push(
+        <ComponentOutputReferenceHints.ObjectArrayField
+          parentPath={parentPath}
+          hints={hints}
+          componentID={componentID}
+        />
+      );
+    });
+  }
+
+  return fields;
+}
diff --git a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillFormTreeToReferenceHints.ts b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillFormTreeToReferenceHints.ts
new file mode 100644
index 0000000000..b75b09b2c7
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillFormTreeToReferenceHints.ts
@@ -0,0 +1,83 @@
+import { ComponentOutoutReferenceHint, InstillFormTree } from "../type";
+
+export function transformInstillFormTreeToReferenceHints(
+  tree: InstillFormTree,
+  isObjectArrayChild?: boolean,
+  objectArrayParentPath?: string
+): ComponentOutoutReferenceHint[] {
+  // 1. Preprocess
+  const title = tree.title ?? tree.fieldKey;
+  let referenceHints: ComponentOutoutReferenceHint[] = [];
+
+  // Normall a objectArray child will be a formGroup with the same
+  // path, so we only need to pass the isObjectArrayChild flag and
+  // objectArrayParentPath to the children
+
+  // 2. Process
+
+  if (tree._type === "formGroup") {
+    for (const property of tree.properties) {
+      const hints = transformInstillFormTreeToReferenceHints(
+        property,
+        isObjectArrayChild,
+        objectArrayParentPath
+      );
+      referenceHints = [...referenceHints, ...hints];
+    }
+    return referenceHints;
+  }
+
+  // The component output don't have formCondition
+  if (tree._type === "formCondition") {
+    return referenceHints;
+  }
+
+  if (tree._type === "objectArray") {
+    // ObjectArray need to have the path (by instill protocol the top level won't be the
+    // objectArray, so we can safely assume that the path is not null)
+    if (tree.path) {
+      const hints = transformInstillFormTreeToReferenceHints(
+        tree.properties,
+        true,
+        tree.path
+      );
+      referenceHints = [...referenceHints, ...hints];
+    }
+    return referenceHints;
+  }
+
+  // Process const field
+  if (tree.const || !tree.path) {
+    return referenceHints;
+  }
+
+  // We don't need to hint a field that is lacking instillFormat
+  if (!tree.instillFormat) {
+    return referenceHints;
+  }
+
+  // We don't need to hint a field that is lacking title and key
+  if (!title) {
+    return referenceHints;
+  }
+
+  // Process a normal field
+
+  const hint: ComponentOutoutReferenceHint =
+    isObjectArrayChild && objectArrayParentPath
+      ? {
+          title,
+          path: tree.path,
+          instillFormat: tree.instillFormat,
+          isObjectArrayChild: isObjectArrayChild ?? false,
+          objectArrayParentPath,
+        }
+      : {
+          title,
+          path: tree.path,
+          instillFormat: tree.instillFormat,
+          isObjectArrayChild: false,
+        };
+
+  return [...referenceHints, hint];
+}
diff --git a/packages/toolkit/src/lib/use-instill-form/type.ts b/packages/toolkit/src/lib/use-instill-form/type.ts
index 9bffc21dd9..915742e4c5 100644
--- a/packages/toolkit/src/lib/use-instill-form/type.ts
+++ b/packages/toolkit/src/lib/use-instill-form/type.ts
@@ -161,3 +161,20 @@ export type StartOperatorFreeFormFieldBaseProps = {
   disabledFieldControl?: boolean;
   disabledReferenceHint?: boolean;
 };
+
+export type ComponentOutoutReferenceHint =
+  | {
+      instillFormat: string;
+      path: string;
+      title: string;
+      description?: string;
+      isObjectArrayChild: false;
+    }
+  | {
+      instillFormat: string;
+      path: string;
+      title: string;
+      description?: string;
+      isObjectArrayChild: true;
+      objectArrayParentPath: string;
+    };
diff --git a/packages/toolkit/src/lib/use-instill-form/useComponentOutputFields.tsx b/packages/toolkit/src/lib/use-instill-form/useComponentOutputFields.tsx
index dd037ea5b8..4b6612f387 100644
--- a/packages/toolkit/src/lib/use-instill-form/useComponentOutputFields.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/useComponentOutputFields.tsx
@@ -23,6 +23,8 @@ export function useComponentOutputFields(props: UseComponentOutputFieldsProps) {
 
     const outputFormTree = transformInstillJSONSchemaToFormTree(props.schema);
 
+    console.log(outputFormTree);
+
     const fields = pickComponentOutputFieldsFromInstillFormTree({
       ...props,
       tree: outputFormTree,
diff --git a/packages/toolkit/src/lib/use-instill-form/useComponentOutputReferenceHintFields.tsx b/packages/toolkit/src/lib/use-instill-form/useComponentOutputReferenceHintFields.tsx
new file mode 100644
index 0000000000..710928c938
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/useComponentOutputReferenceHintFields.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { InstillJSONSchema } from "./type";
+import { Nullable } from "../type";
+import { transformInstillJSONSchemaToFormTree } from "./transform";
+import { pickComponentsFromReferenceHints } from "./pick/pickComponentsFromReferenceHints";
+import { transformInstillFormTreeToReferenceHints } from "./transform/transformInstillFormTreeToReferenceHints";
+
+export type UseComponentOutputReferenceHintFieldsOptions = {
+  componentID: string;
+};
+
+export function useComponentOutputReferenceHintFields(
+  schema: Nullable<InstillJSONSchema>,
+  options?: UseComponentOutputReferenceHintFieldsOptions
+) {
+  const componentID = options?.componentID ?? undefined;
+
+  const fields = React.useMemo(() => {
+    if (!schema) {
+      return [];
+    }
+
+    const outputFormTree = transformInstillJSONSchemaToFormTree(schema);
+    const hints = transformInstillFormTreeToReferenceHints(outputFormTree);
+    const fields = pickComponentsFromReferenceHints(hints, { componentID });
+
+    return fields;
+  }, [schema, componentID]);
+
+  return fields;
+}
diff --git a/packages/toolkit/src/lib/use-instill-form/useInstillForm.test.tsx b/packages/toolkit/src/lib/use-instill-form/useInstillForm.test.tsx
index 16fe9f0051..a1e150855a 100644
--- a/packages/toolkit/src/lib/use-instill-form/useInstillForm.test.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/useInstillForm.test.tsx
@@ -9,7 +9,6 @@ import {
 import { useInstillForm } from "./useInstillForm";
 import { InstillJSONSchema } from "./type";
 import { Form } from "@instill-ai/design-system";
-import exp from "constants";
 
 const SimpleFormSchema: InstillJSONSchema = {
   title: "Simple Form JSON",
diff --git a/packages/toolkit/src/lib/vdp-sdk/connector/actions.ts b/packages/toolkit/src/lib/vdp-sdk/connector/actions.ts
index 7e4837b291..307091a28c 100644
--- a/packages/toolkit/src/lib/vdp-sdk/connector/actions.ts
+++ b/packages/toolkit/src/lib/vdp-sdk/connector/actions.ts
@@ -1,6 +1,6 @@
 import { Nullable } from "../../type";
 import { createInstillAxiosClient } from "../helper";
-import { Connector, ConnectorState, ConnectorWithDefinition } from "./types";
+import { ConnectorState, ConnectorWithDefinition } from "./types";
 
 export type TestUserConnectorConnectionResponse = {
   state: ConnectorState;
diff --git a/packages/toolkit/src/view/model/CreateModelForm.tsx b/packages/toolkit/src/view/model/CreateModelForm.tsx
index fc547fca1e..2d65188523 100644
--- a/packages/toolkit/src/view/model/CreateModelForm.tsx
+++ b/packages/toolkit/src/view/model/CreateModelForm.tsx
@@ -20,7 +20,6 @@ import {
   type Model,
   type Nullable,
   type CreateResourceFormStore,
-  useAmplitudeCtx,
   sendAmplitudeData,
   useCreateResourceFormStore,
   getInstillApiErrorMessage,
@@ -85,7 +84,6 @@ export const CreateModelForm = (props: CreateModelFormProps) => {
    * Initialize form state
    * -----------------------------------------------------------------------*/
 
-  const { amplitudeIsInit } = useAmplitudeCtx();
   const queryClient = useQueryClient();
 
   const {
@@ -233,7 +231,7 @@ export const CreateModelForm = (props: CreateModelFormProps) => {
         model_definition_name: modelDefinitionName,
       });
     },
-    [amplitudeIsInit, accessToken, queryClient, setFieldValue]
+    [accessToken, queryClient, setFieldValue]
   );
 
   const deployUserModel = useDeployUserModel();
diff --git a/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputReferenceHints.tsx b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputReferenceHints.tsx
new file mode 100644
index 0000000000..ba0f850545
--- /dev/null
+++ b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputReferenceHints.tsx
@@ -0,0 +1,47 @@
+import { ScrollArea } from "@instill-ai/design-system";
+import {
+  InstillJSONSchema,
+  Nullable,
+  useComponentOutputReferenceHintFields,
+} from "../../../lib";
+import { ReferenceHintTag } from "../../../components";
+
+export const ComponentOutputReferenceHints = ({
+  componentID,
+  outputSchema,
+}: {
+  componentID: string;
+  outputSchema: Nullable<InstillJSONSchema>;
+}) => {
+  const hintFields = useComponentOutputReferenceHintFields(outputSchema, {
+    componentID,
+  });
+
+  return (
+    <div className="flex flex-col">
+      <p className="mb-2 text-semantic-fg-secondary product-body-text-4-medium">
+        Output
+      </p>
+
+      <ScrollArea.Root
+        className="nodrag nowheel h-full"
+        viewPortClassName="max-h-[400px]"
+      >
+        <div className="flex flex-col rounded bg-semantic-bg-primary p-4">
+          <div className="mb-2 flex">
+            <ReferenceHintTag.Root className="!bg-semantic-bg-primary !px-0">
+              <ReferenceHintTag.Icon
+                type="check"
+                className="!stroke-semantic-fg-disabled"
+              />
+              <ReferenceHintTag.Label className="!text-semantic-fg-disabled">
+                references
+              </ReferenceHintTag.Label>
+            </ReferenceHintTag.Root>
+          </div>
+          <div className="flex flex-col gap-y-2">{hintFields}</div>
+        </div>
+      </ScrollArea.Root>
+    </div>
+  );
+};
diff --git a/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
index 612117b946..4b626d0103 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
@@ -58,7 +58,9 @@ export const ComponentOutputs = ({
   return (
     <div className="flex flex-col">
       {nodeType === "connector" ? (
-        <div className="mb-2 product-body-text-4-medium">output</div>
+        <div className="mb-2 text-semantic-fg-secondary product-body-text-4-medium">
+          Output
+        </div>
       ) : null}
       <ScrollArea.Root
         className="nodrag nowheel h-full"
diff --git a/packages/toolkit/src/view/pipeline-builder/components/index.ts b/packages/toolkit/src/view/pipeline-builder/components/index.ts
index b5c4de2e90..69ba1f3bcc 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/index.ts
+++ b/packages/toolkit/src/view/pipeline-builder/components/index.ts
@@ -6,6 +6,7 @@ export * from "./CustomHandle";
 export * from "./PipelineNameForm";
 export * from "./PipelineToolkitModal";
 export * from "./ReadOnlyPipelineBuilder";
+export * from "./ComponentOutputReferenceHints";
 
 export * from "./dialogs";
 export * from "./nodes";
diff --git a/packages/toolkit/src/view/pipeline-builder/components/nodes/connector-node/ConnectorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/nodes/connector-node/ConnectorNode.tsx
index 84ff2543f6..26a31adda3 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/nodes/connector-node/ConnectorNode.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/nodes/connector-node/ConnectorNode.tsx
@@ -23,7 +23,6 @@ import { ConnectorIDTag } from "./ConnectorIDTag";
 import { DataConnectorFreeForm } from "./DataConnectorFreeForm";
 import { ResourceNotCreatedWarning } from "./ResourceNotCreatedWarning";
 import { ConnectorOperatorControlPanel } from "../control-panel";
-import { ComponentOutputs } from "../../ComponentOutputs";
 import { OpenAdvancedConfigurationButton } from "../../OpenAdvancedConfigurationButton";
 import { useCheckIsHidden } from "../../useCheckIsHidden";
 import { useUpdaterOnNode } from "../../useUpdaterOnNode";
@@ -35,6 +34,7 @@ import {
   NodeWrapper,
   useNodeIDEditorForm,
 } from "../common";
+import { ComponentOutputReferenceHints } from "../../ComponentOutputReferenceHints";
 
 const selector = (store: InstillStore) => ({
   selectedConnectorNodeId: store.selectedConnectorNodeId,
@@ -295,7 +295,11 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
         (e) => e.name === data.component.definition_name
       ) ?? null
     );
-  }, [connectorDefinitions.isSuccess, connectorDefinitions.data]);
+  }, [
+    connectorDefinitions.isSuccess,
+    connectorDefinitions.data,
+    data.component,
+  ]);
 
   return (
     <NodeWrapper
@@ -473,12 +477,16 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
 
           <div className="mb-4 w-full">
             {!resourceNotCreated && !enableEdit ? (
-              <ComponentOutputs
+              // <ComponentOutputs
+              //   componentID={data.component.id}
+              //   outputSchema={outputSchema}
+              //   nodeType="connector"
+              //   response={testModeTriggerResponse}
+              //   chooseTitleFrom="key"
+              // />
+              <ComponentOutputReferenceHints
                 componentID={data.component.id}
                 outputSchema={outputSchema}
-                nodeType="connector"
-                response={testModeTriggerResponse}
-                chooseTitleFrom="key"
               />
             ) : null}
           </div>
diff --git a/packages/toolkit/src/view/pipeline-builder/components/nodes/operator-node/OperatorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/nodes/operator-node/OperatorNode.tsx
index 4d8b11cba1..eadaaa1e75 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/nodes/operator-node/OperatorNode.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/nodes/operator-node/OperatorNode.tsx
@@ -19,7 +19,6 @@ import { ImageWithFallback, ObjectViewer } from "../../../../../components";
 import { useShallow } from "zustand/react/shallow";
 import { ConnectorOperatorControlPanel } from "../control-panel";
 import { OpenAdvancedConfigurationButton } from "../../OpenAdvancedConfigurationButton";
-import { ComponentOutputs } from "../../ComponentOutputs";
 import { getOperatorInputOutputSchema } from "../../../lib/getOperatorInputOutputSchema";
 import { useCheckIsHidden } from "../../useCheckIsHidden";
 import { useUpdaterOnNode } from "../../useUpdaterOnNode";
@@ -31,6 +30,7 @@ import {
   NodeWrapper,
   useNodeIDEditorForm,
 } from "../common";
+import { ComponentOutputReferenceHints } from "../../ComponentOutputReferenceHints";
 
 const selector = (store: InstillStore) => ({
   selectedConnectorNodeId: store.selectedConnectorNodeId,
@@ -339,12 +339,9 @@ export const OperatorNode = ({ data, id }: NodeProps<OperatorNodeData>) => {
             />
           </div>
 
-          <ComponentOutputs
+          <ComponentOutputReferenceHints
             componentID={data.component.id}
             outputSchema={outputSchema}
-            nodeType="connector"
-            response={testModeTriggerResponse}
-            chooseTitleFrom="title"
           />
         </>
       )}
diff --git a/packages/toolkit/src/view/pipeline-builder/components/nodes/start-operator-node/StartOperatorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/nodes/start-operator-node/StartOperatorNode.tsx
index 4f45211081..535aaeb93f 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/nodes/start-operator-node/StartOperatorNode.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/nodes/start-operator-node/StartOperatorNode.tsx
@@ -30,7 +30,6 @@ import {
 
 import { pickSelectedTypeFromInstillFormat } from "./pickSelectedTypeFromInstillFormat";
 import { arrayMove } from "@dnd-kit/sortable";
-import { constructFieldKey } from "./constructFieldKey";
 import { StartEndOperatorControlPanel } from "../control-panel";
 import { NodeHead, NodeSortableFieldWrapper, NodeWrapper } from "../common";
 import { VerticalSortableWrapper } from "../../VerticalSortableWrapper";
diff --git a/packages/toolkit/src/view/pipeline-builder/lib/getReferencesFromString.ts b/packages/toolkit/src/view/pipeline-builder/lib/getReferencesFromString.ts
index 1253ee4de7..1fa17dba82 100644
--- a/packages/toolkit/src/view/pipeline-builder/lib/getReferencesFromString.ts
+++ b/packages/toolkit/src/view/pipeline-builder/lib/getReferencesFromString.ts
@@ -1,4 +1,4 @@
-import { InstillReference, ReferenceValueSet } from "../type";
+import { InstillReference } from "../type";
 
 export function getReferencesFromString(value: string): InstillReference[] {
   const dollarBraceReferences: InstillReference[] = [];
diff --git a/packages/toolkit/src/view/pipeline/view-pipelines/CreatePipelineDialog.tsx b/packages/toolkit/src/view/pipeline/view-pipelines/CreatePipelineDialog.tsx
index 306924ec4a..5cacdec977 100644
--- a/packages/toolkit/src/view/pipeline/view-pipelines/CreatePipelineDialog.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipelines/CreatePipelineDialog.tsx
@@ -68,7 +68,6 @@ export const CreatePipelineDialog = ({ className }: { className?: string }) => {
   const [permission, setPermission] =
     React.useState<Nullable<Permission>>("private");
   const router = useRouter();
-  const { entity } = router.query;
 
   const { toast } = useToast();
 
@@ -101,7 +100,13 @@ export const CreatePipelineDialog = ({ className }: { className?: string }) => {
       });
     }
     return orgsAndUserList;
-  }, [organizations.isSuccess, entityObject.isSuccess]);
+  }, [
+    organizations.isSuccess,
+    organizations.data,
+    entityObject.isSuccess,
+    entityObject.entity,
+    entityObject.entityName,
+  ]);
 
   const createPipeline = useCreateUserPipeline();
   async function onSubmit(data: z.infer<typeof CreatePipelineSchema>) {
diff --git a/packages/toolkit/src/view/pipeline/view-pipelines/ViewPipelines.tsx b/packages/toolkit/src/view/pipeline/view-pipelines/ViewPipelines.tsx
index 1ee048a31d..8f808ec7af 100644
--- a/packages/toolkit/src/view/pipeline/view-pipelines/ViewPipelines.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipelines/ViewPipelines.tsx
@@ -73,7 +73,7 @@ export const ViewPipelines = ({
     }
 
     return all;
-  }, [pipelines.data, pipelines.isSuccess, searchCode]);
+  }, [pipelines.data, pipelines.isSuccess]);
 
   return (
     <div className="flex flex-row px-20">