diff --git a/packages/design-system/src/new-ui/Icons/Download02.tsx b/packages/design-system/src/new-ui/Icons/Download02.tsx
new file mode 100644
index 0000000000..ab31ab5e5c
--- /dev/null
+++ b/packages/design-system/src/new-ui/Icons/Download02.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const Download02 = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M19 19H1M16 9L10 15M10 15L4 9M10 15V1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+Download02.displayName = "Download02";
diff --git a/packages/design-system/src/new-ui/Icons/FastBackward.tsx b/packages/design-system/src/new-ui/Icons/FastBackward.tsx
new file mode 100644
index 0000000000..fe2235c2f3
--- /dev/null
+++ b/packages/design-system/src/new-ui/Icons/FastBackward.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const FastBackward = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M21.9997 16.437C21.9997 17.567 21.9997 18.1321 21.7714 18.4091C21.5731 18.6497 21.2739 18.7841 20.9623 18.7724C20.6036 18.759 20.1813 18.3836 19.3367 17.6329L14.345 13.1958C13.8797 12.7822 13.6471 12.5754 13.5614 12.3312C13.4861 12.1168 13.4861 11.8831 13.5614 11.6687C13.6471 11.4245 13.8797 11.2177 14.345 10.8041L19.3367 6.36706C20.1813 5.61631 20.6036 5.24093 20.9623 5.22751C21.2739 5.21584 21.5731 5.35021 21.7714 5.59086C21.9997 5.86787 21.9997 6.43288 21.9997 7.56291V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.9997 16.437C10.9997 17.567 10.9997 18.1321 10.7714 18.4091C10.5731 18.6497 10.2739 18.7841 9.96228 18.7724C9.60359 18.759 9.1813 18.3836 8.3367 17.6329L3.34502 13.1958C2.87973 12.7822 2.64709 12.5754 2.56135 12.3312C2.48606 12.1168 2.48606 11.8831 2.56135 11.6687C2.64709 11.4245 2.87973 11.2177 3.34502 10.8041L8.3367 6.36706C9.1813 5.61631 9.60359 5.24093 9.96228 5.22751C10.2739 5.21584 10.5731 5.35021 10.7714 5.59086C10.9997 5.86787 10.9997 6.43288 10.9997 7.56291V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+FastBackward.displayName = "FastBackward";
diff --git a/packages/design-system/src/new-ui/Icons/FastForward.tsx b/packages/design-system/src/new-ui/Icons/FastForward.tsx
new file mode 100644
index 0000000000..6690debe60
--- /dev/null
+++ b/packages/design-system/src/new-ui/Icons/FastForward.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const FastForward = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M13 16.437C13 17.5671 13 18.1321 13.2283 18.4091C13.4266 18.6497 13.7258 18.7841 14.0374 18.7725C14.3961 18.759 14.8184 18.3837 15.663 17.6329L20.6547 13.1959C21.12 12.7823 21.3526 12.5755 21.4383 12.3313C21.5136 12.1168 21.5136 11.8832 21.4383 11.6687C21.3526 11.4245 21.12 11.2177 20.6547 10.8041L15.663 6.36709C14.8184 5.61634 14.3961 5.24096 14.0374 5.22754C13.7258 5.21588 13.4266 5.35024 13.2283 5.59089C13 5.8679 13 6.43291 13 7.56295V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 16.437C2 17.5671 2 18.1321 2.22827 18.4091C2.42657 18.6497 2.72579 18.7841 3.0374 18.7725C3.39609 18.759 3.81839 18.3837 4.66298 17.6329L9.65466 13.1959C10.12 12.7823 10.3526 12.5755 10.4383 12.3313C10.5136 12.1168 10.5136 11.8832 10.4383 11.6687C10.3526 11.4245 10.12 11.2177 9.65466 10.8041L4.66298 6.36709C3.81839 5.61634 3.39609 5.24096 3.0374 5.22754C2.72579 5.21588 2.42657 5.35024 2.22827 5.59089C2 5.8679 2 6.43291 2 7.56295V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+FastForward.displayName = "FastForward";
diff --git a/packages/design-system/src/new-ui/Icons/VolumeMax.tsx b/packages/design-system/src/new-ui/Icons/VolumeMax.tsx
new file mode 100644
index 0000000000..25f11f2fea
--- /dev/null
+++ b/packages/design-system/src/new-ui/Icons/VolumeMax.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const VolumeMax = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M19.7479 4.99999C21.1652 6.97023 22 9.38762 22 12C22 14.6124 21.1652 17.0298 19.7479 19M15.7453 7.99999C16.5362 9.13382 17 10.5127 17 12C17 13.4872 16.5362 14.8662 15.7453 16M9.63432 5.36567L6.46863 8.53136C6.29568 8.70431 6.2092 8.79079 6.10828 8.85263C6.01881 8.90746 5.92127 8.94786 5.81923 8.97236C5.70414 8.99999 5.58185 8.99999 5.33726 8.99999H3.6C3.03995 8.99999 2.75992 8.99999 2.54601 9.10898C2.35785 9.20485 2.20487 9.35784 2.10899 9.546C2 9.75991 2 10.0399 2 10.6V13.4C2 13.96 2 14.2401 2.10899 14.454C2.20487 14.6421 2.35785 14.7951 2.54601 14.891C2.75992 15 3.03995 15 3.6 15H5.33726C5.58185 15 5.70414 15 5.81923 15.0276C5.92127 15.0521 6.01881 15.0925 6.10828 15.1473C6.2092 15.2092 6.29568 15.2957 6.46863 15.4686L9.63431 18.6343C10.0627 19.0627 10.2769 19.2769 10.4608 19.2913C10.6203 19.3039 10.7763 19.2393 10.8802 19.1176C11 18.9773 11 18.6744 11 18.0686V5.93136C11 5.32554 11 5.02264 10.8802 4.88237C10.7763 4.76067 10.6203 4.69608 10.4608 4.70864C10.2769 4.72311 10.0627 4.9373 9.63432 5.36567Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+VolumeMax.displayName = "VolumeMax";
diff --git a/packages/design-system/src/new-ui/Icons/VolumeX.tsx b/packages/design-system/src/new-ui/Icons/VolumeX.tsx
new file mode 100644
index 0000000000..8380dc0d4a
--- /dev/null
+++ b/packages/design-system/src/new-ui/Icons/VolumeX.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const VolumeX = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M22 8.99999L16 15M16 8.99999L22 15M9.63432 5.36567L6.46863 8.53136C6.29568 8.70431 6.2092 8.79079 6.10828 8.85263C6.01881 8.90746 5.92127 8.94786 5.81923 8.97236C5.70414 8.99999 5.58185 8.99999 5.33726 8.99999H3.6C3.03995 8.99999 2.75992 8.99999 2.54601 9.10898C2.35785 9.20485 2.20487 9.35784 2.10899 9.546C2 9.75991 2 10.0399 2 10.6V13.4C2 13.96 2 14.2401 2.10899 14.454C2.20487 14.6421 2.35785 14.7951 2.54601 14.891C2.75992 15 3.03995 15 3.6 15H5.33726C5.58185 15 5.70414 15 5.81923 15.0276C5.92127 15.0521 6.01881 15.0925 6.10828 15.1473C6.2092 15.2092 6.29568 15.2957 6.46863 15.4686L9.63431 18.6343C10.0627 19.0627 10.2769 19.2769 10.4608 19.2913C10.6203 19.3039 10.7763 19.2393 10.8802 19.1176C11 18.9773 11 18.6744 11 18.0686V5.93136C11 5.32554 11 5.02264 10.8802 4.88237C10.7763 4.76067 10.6203 4.69608 10.4608 4.70864C10.2769 4.72311 10.0627 4.9373 9.63432 5.36567Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+VolumeX.displayName = "VolumeX";
diff --git a/packages/design-system/src/new-ui/Icons/index.ts b/packages/design-system/src/new-ui/Icons/index.ts
index 6fa188b970..01f201fc38 100644
--- a/packages/design-system/src/new-ui/Icons/index.ts
+++ b/packages/design-system/src/new-ui/Icons/index.ts
@@ -35,6 +35,7 @@ import { Chip02 } from "./Chip02";
 import { Cube01 } from "./Cube01";
 import { CubeOutline } from "./CubeOutline";
 import { Database01 } from "./Database01";
+import { Download02 } from "./Download02";
 import { DotsHorizontal } from "./DotsHorizontal";
 import { DotsVertical } from "./DotsVertical";
 import { DownloadCloud01 } from "./DownloadCloud01";
@@ -43,6 +44,8 @@ import { Edit05 } from "./Edit05";
 import { File02 } from "./File02";
 import { File04 } from "./File04";
 import { File05 } from "./File05";
+import { FastBackward } from "./FastBackward";
+import { FastForward } from "./FastForward";
 import { FileMinus01 } from "./FileMinus01";
 import { FilePlus01 } from "./FilePlus01";
 import { FilePlus02 } from "./FilePlus02";
@@ -102,6 +105,8 @@ import { User01 } from "./User01";
 import { User02 } from "./User02";
 import { UserPlus01 } from "./UserPlus01";
 import { Video } from "./Video";
+import { VolumeMax } from "./VolumeMax";
+import { VolumeX } from "./VolumeX";
 import { VideoRecorder } from "./VideoRecorder";
 import { Visa } from "./Visa";
 import { VisualQuestionAnswering } from "./VisualQuestionAnswering";
@@ -145,6 +150,7 @@ export const Icons = {
   Cube01,
   CubeOutline,
   Database01,
+  Download02,
   DotsHorizontal,
   DotsVertical,
   DownloadCloud01,
@@ -157,6 +163,8 @@ export const Icons = {
   FilePlus01,
   FilePlus02,
   FilterLines,
+  FastBackward,
+  FastForward,
   Gear01,
   Globe01,
   HelpCircle,
@@ -212,6 +220,8 @@ export const Icons = {
   User02,
   UserPlus01,
   Video,
+  VolumeMax,
+  VolumeX,
   VideoRecorder,
   Visa,
   VisualQuestionAnswering,
diff --git a/packages/design-system/src/new-ui/Icons/test.svg b/packages/design-system/src/new-ui/Icons/test.svg
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioField.tsx
index 283b8bd2f4..ecbca56831 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioField.tsx
@@ -2,6 +2,8 @@
 
 import { Nullable } from "../../../type";
 import { ComponentOutputFieldBaseProps } from "../../types";
+import AudioPlayer from "./AudioPlayer";
+import { DownloadButton } from "./DownloadButton";
 import { FieldRoot } from "./FieldRoot";
 
 export type AudioFieldProps = {
@@ -14,8 +16,17 @@ export const AudioField = (props: AudioFieldProps) => {
   return (
     <FieldRoot title={title} fieldKey={`${title}-field`}>
       {audio && !hideField ? (
-        <div className="flex w-full">
-          <audio className="w-full" controls={true} src={audio} />
+        <div className="rounded border">
+          <div className="flex w-full flex-row rounded-t-[4px] border-b border-semantic-bg-line bg-[#F0F0F0] px-2 py-0.5">
+            <div className="ml-auto flex flex-row gap-x-1">
+              <DownloadButton className="my-auto" text={audio ?? ""} />
+            </div>
+          </div>
+          <div className="flex h-[150px] items-center">
+            <div className="w-full">
+              <AudioPlayer currentSong={audio} />
+            </div>
+          </div>
         </div>
       ) : null}
     </FieldRoot>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioPlayer.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioPlayer.tsx
new file mode 100644
index 0000000000..1360c017e7
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/AudioPlayer.tsx
@@ -0,0 +1,212 @@
+import * as React from "react";
+import { Icons } from "@instill-ai/design-system";
+
+interface ProgressCSSProps extends React.CSSProperties {
+  "--progress-width": number;
+  "--buffered-width": number;
+}
+
+interface AudioProgressBarProps
+  extends React.ComponentPropsWithoutRef<"input"> {
+  duration: number;
+  currentProgress: number;
+  buffered: number;
+}
+
+function AudioProgressBar(props: AudioProgressBarProps) {
+  const { duration, currentProgress, buffered, ...rest } = props;
+
+  const progressBarWidth = isNaN(currentProgress / duration)
+    ? 0
+    : currentProgress / duration;
+  const bufferedWidth = isNaN(buffered / duration) ? 0 : buffered / duration;
+
+  const progressStyles: ProgressCSSProps = {
+    "--progress-width": progressBarWidth,
+    "--buffered-width": bufferedWidth,
+  };
+
+  return (
+    <div className="group absolute -top-[4px] left-3 right-3 h-1 w-[96%]">
+      <input
+        type="range"
+        name="progress"
+        className={`progress-bar after:bg-semantic-fg-secondary/50 absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none bg-transparent accent-semantic-fg-secondary transition-all before:absolute before:inset-0 before:h-full before:w-full before:origin-left before:bg-semantic-fg-secondary after:absolute after:h-full after:w-full hover:accent-semantic-fg-secondary group-hover:h-2 dark:bg-gray-700`}
+        style={progressStyles}
+        min={0}
+        max={duration}
+        value={currentProgress}
+        {...rest}
+      />
+    </div>
+  );
+}
+
+export function IconButton({ ...props }) {
+  return (
+    <button className="rounded p-1 hover:bg-semantic-bg-secondary" {...props} />
+  );
+}
+
+function formatDurationDisplay(duration: number) {
+  const min = Math.floor(duration / 60);
+  const sec = Math.floor(duration - min * 60);
+
+  const formatted = [min, sec].map((n) => (n < 10 ? "0" + n : n)).join(":");
+
+  return formatted;
+}
+
+interface AudioPlayerProps {
+  currentSong?: string;
+}
+
+export default function AudioPlayer({ currentSong }: AudioPlayerProps) {
+  const audioRef = React.useRef<HTMLAudioElement | null>(null);
+
+  const [isReady, setIsReady] = React.useState(false);
+  const [duration, setDuration] = React.useState(0);
+  const [currrentProgress, setCurrrentProgress] = React.useState(0);
+  const [buffered, setBuffered] = React.useState(0);
+  const [volume, setVolume] = React.useState(0.2);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+
+  const durationDisplay = formatDurationDisplay(duration);
+  const elapsedDisplay = formatDurationDisplay(currrentProgress);
+
+  React.useEffect(() => {
+    audioRef.current?.pause();
+
+    const timeout = setTimeout(() => {
+      audioRef.current?.play();
+    }, 500);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  const togglePlayPause = () => {
+    if (isPlaying) {
+      audioRef.current?.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current?.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const handleBufferProgress: React.ReactEventHandler<HTMLAudioElement> = (
+    e
+  ) => {
+    const audio = e.currentTarget;
+    const dur = audio.duration;
+    if (dur > 0) {
+      for (let i = 0; i < audio.buffered.length; i++) {
+        if (
+          audio.buffered.start(audio.buffered.length - 1 - i) <
+          audio.currentTime
+        ) {
+          const bufferedLength = audio.buffered.end(
+            audio.buffered.length - 1 - i
+          );
+          setBuffered(bufferedLength);
+          break;
+        }
+      }
+    }
+  };
+
+  const handleMuteUnmute = () => {
+    if (!audioRef.current) return;
+
+    if (audioRef.current.volume !== 0) {
+      audioRef.current.volume = 0;
+    } else {
+      audioRef.current.volume = 1;
+    }
+  };
+
+  return (
+    <div className="relative p-3 text-slate-400">
+      {currentSong && (
+        <audio
+          ref={audioRef}
+          preload="metadata"
+          onDurationChange={(e) => setDuration(e.currentTarget.duration)}
+          onPlaying={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onCanPlay={(e) => {
+            e.currentTarget.volume = volume;
+            setIsReady(true);
+          }}
+          onTimeUpdate={(e) => {
+            setCurrrentProgress(e.currentTarget.currentTime);
+            handleBufferProgress(e);
+          }}
+          onProgress={handleBufferProgress}
+          onVolumeChange={(e) => setVolume(e.currentTarget.volume)}
+        >
+          <source type="audio/mpeg" src={currentSong} />
+        </audio>
+      )}
+      <AudioProgressBar
+        duration={duration}
+        currentProgress={currrentProgress}
+        buffered={buffered}
+        onChange={(e) => {
+          if (!audioRef.current) return;
+
+          audioRef.current.currentTime = e.currentTarget.valueAsNumber;
+
+          setCurrrentProgress(e.currentTarget.valueAsNumber);
+        }}
+      />
+      <div className="flex flex-row">
+        <div className="flex w-1/2 justify-start">
+          <span className="text-xs">{elapsedDisplay}</span>
+        </div>
+        <div className="flex w-1/2 justify-end">
+          <span className="text-xs">{durationDisplay}</span>
+        </div>
+      </div>
+      <div className="mt-4 grid grid-cols-3 items-center">
+        <div className="flex items-center gap-3 justify-self-start">
+          <IconButton
+            intent="secondary"
+            size="sm"
+            onClick={handleMuteUnmute}
+            aria-label={volume === 0 ? "unmute" : "mute"}
+          >
+            {volume === 0 ? (
+              <Icons.VolumeX className="h-6 w-6 stroke-semantic-fg-secondary" />
+            ) : (
+              <Icons.VolumeMax className="h-6 w-6 stroke-semantic-fg-secondary" />
+            )}
+          </IconButton>
+        </div>
+        <div className="flex items-center gap-4 justify-self-center">
+          <IconButton aria-label="go to previous" intent="secondary">
+            <Icons.FastBackward className="h-8 w-8 stroke-semantic-fg-secondary" />
+          </IconButton>
+          <IconButton
+            disabled={!isReady}
+            onClick={togglePlayPause}
+            aria-label={isPlaying ? "Pause" : "Play"}
+            size="lg"
+          >
+            {isPlaying ? (
+              <Icons.PauseCircle className="h-8 w-8 stroke-semantic-fg-secondary" />
+            ) : (
+              <Icons.PlayCircle className="h-8 w-8 stroke-semantic-fg-secondary" />
+            )}
+          </IconButton>
+          <IconButton aria-label="go to next" intent="secondary">
+            <Icons.FastForward className="h-8 w-8 stroke-semantic-fg-secondary" />
+          </IconButton>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/CopyButton.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/CopyButton.tsx
index 38167f6466..c8a5a2bbe9 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/CopyButton.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/CopyButton.tsx
@@ -26,7 +26,9 @@ export const CopyButton = ({
         }, 1000);
       }}
     >
-      <p className="font-sans text-[10px] font-semibold">Copy</p>
+      <p className="font-sans text-[10px] font-semibold text-semantic-fg-disabled">
+        Copy
+      </p>
       {copied ? (
         <Icons.Check className="h-3 w-3 stroke-semantic-fg-disabled" />
       ) : (
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/DownloadButton.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/DownloadButton.tsx
new file mode 100644
index 0000000000..b1d382a774
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/DownloadButton.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import cn from "clsx";
+import { Icons } from "@instill-ai/design-system";
+
+function getFileExtensionFromMimeType(mimeType: string): string {
+  const mimeTypeMap: { [key: string]: string } = {
+    "application/pdf": "pdf",
+    "image/jpeg": "jpeg",
+    "image/png": "png",
+    "audio/mpeg": "mp3",
+    "audio/wav": "wav",
+    "video/mp4": "mp4",
+    "text/plain": "txt",
+    // Add more mappings as needed
+  };
+
+  const defaultExtension = "bin"; // Default extension if no mapping found
+
+  return mimeTypeMap[mimeType] || defaultExtension;
+}
+
+function extractMimeType(contentBase64: string): string | null {
+  const mimeRegex = /^data:(.*?);base64/;
+  const mimeTypeMatch = contentBase64.match(mimeRegex);
+  return mimeTypeMatch ? mimeTypeMatch[1] : null;
+}
+
+function downloadBase64File(contentBase64: string): void {
+  // Extracting MIME type from the contentBase64 string
+  const extractedMimeType = extractMimeType(contentBase64);
+  if (!extractedMimeType) {
+    console.error("Failed to extract MIME type from contentBase64 string.");
+    return;
+  }
+
+  // Getting file extension from MIME type
+  const fileExtension = getFileExtensionFromMimeType(extractedMimeType);
+
+  // Constructing the file name
+  const fileName = `instill-ai-download.${fileExtension}`;
+
+  // Constructing the link source
+  const linkSource: string = contentBase64;
+
+  // Creating a download link
+  const downloadLink: HTMLAnchorElement = document.createElement("a");
+  document.body.appendChild(downloadLink);
+
+  // Setting download link attributes
+  downloadLink.href = linkSource;
+  downloadLink.target = "_self";
+  downloadLink.download = fileName;
+
+  // Triggering the download
+  downloadLink.click();
+}
+
+export const DownloadButton = ({
+  className,
+  text,
+}: {
+  text: string;
+  className?: string;
+}) => {
+  const [, setCopied] = React.useState(false);
+
+  return (
+    <button
+      className={cn(
+        "flex flex-row items-center gap-x-1 rounded px-1 py-0.5 hover:bg-semantic-bg-base-bg",
+        className
+      )}
+      type="button"
+      onClick={async () => {
+        // await navigator.clipboard.writeText(text);
+        downloadBase64File(text);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1000);
+      }}
+    >
+      <p className="font-sans text-[10px] font-semibold text-semantic-fg-disabled">
+        Download
+      </p>
+      <Icons.Download02 className="h-3 w-3 stroke-semantic-fg-disabled" />
+    </button>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/FieldRoot.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/FieldRoot.tsx
index 11c2eab19f..1e4712d8a3 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/FieldRoot.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/FieldRoot.tsx
@@ -19,7 +19,7 @@ export const FieldRoot = ({
     <div
       key={fieldKey}
       className={cn(
-        "flex w-full flex-col gap-y-2 rounded-[6px] bg-semantic-bg-primary p-2",
+        "flex w-full flex-col gap-y-2 rounded-[6px] bg-semantic-bg-alt-primary p-2",
         className
       )}
       data-testid={`output-${fieldKey}`}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImageField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImageField.tsx
index 128df0753a..f396c5815c 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImageField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImageField.tsx
@@ -2,6 +2,7 @@
 
 import { Nullable } from "../../../type";
 import { ComponentOutputFieldBaseProps } from "../../types";
+import { DownloadButton } from "./DownloadButton";
 import { FieldRoot } from "./FieldRoot";
 
 export type ImageFieldProps = {
@@ -14,8 +15,17 @@ export const ImageField = (props: ImageFieldProps) => {
   return (
     <FieldRoot title={title} fieldKey={`${title}-field`}>
       {!hideField && image ? (
-        <div className="flex w-full">
-          <img src={image} alt={`${title}`} className="object-contain" />
+        <div className="nodrag nowheel flex flex-col rounded-sm border border-semantic-bg-line">
+          <div className="flex flex-row rounded-t-[4px] border-b border-semantic-bg-line bg-[#F0F0F0] px-2 py-0.5">
+            <div className="ml-auto flex flex-row gap-x-1">
+              <DownloadButton className="my-auto" text={image ?? ""} />
+            </div>
+          </div>
+          <div>
+            <div className="flex w-full flex-wrap gap-2">
+              <img src={image} alt={`${title}`} className="object-contain" />
+            </div>
+          </div>
         </div>
       ) : null}
     </FieldRoot>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
index b4e5a763c3..2c6c393a18 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import React from "react";
 import { Nullable } from "../../../type";
 import { ComponentOutputFieldBaseProps } from "../../types";
+import { DownloadButton } from "./DownloadButton";
 import { FieldRoot } from "./FieldRoot";
 
 export type ImagesFieldProps = {
@@ -14,19 +16,28 @@ export const ImagesField = (props: ImagesFieldProps) => {
   return (
     <FieldRoot title={title} fieldKey={`${title}-field`}>
       {images && !hideField ? (
-        <div className="flex w-full flex-wrap gap-2">
-          {images?.map((image) => {
-            if (!image) return null;
+        <div className="nodrag nowheel flex flex-col rounded-sm border border-semantic-bg-line">
+          <div className="flex w-full flex-wrap gap-2">
+            {images?.map((image) => {
+              if (!image) return null;
 
-            return (
-              <img
-                key={`${title}-${image}-field`}
-                alt={`${title}-images-{idx}`}
-                src={image}
-                className="object-contain"
-              />
-            );
-          })}
+              return (
+                <div key={`${title}-${image}-field`}>
+                  <div className="flex w-full flex-row rounded-t-[4px] border-b border-semantic-bg-line bg-[#F0F0F0] px-2 py-0.5">
+                    <div className="ml-auto flex flex-row gap-x-1">
+                      <DownloadButton className="my-auto" text={image ?? ""} />
+                    </div>
+                  </div>
+                  <img
+                    key={`${title}-${image}-field`}
+                    alt={`${title}-images-{idx}`}
+                    src={image}
+                    className="object-contain"
+                  />
+                </div>
+              );
+            })}
+          </div>
         </div>
       ) : null}
     </FieldRoot>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
index 2e1e3119b7..80a16a50e3 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
@@ -27,7 +27,7 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
         }
       `}</style>
       <div className="nodrag nowheel flex flex-col rounded-sm border border-semantic-bg-line">
-        <div className="flex flex-row rounded-t-sm border-b border-semantic-bg-line bg-semantic-bg-secondary px-2 py-1">
+        <div className="flex flex-row rounded-t-sm border-b border-semantic-bg-line bg-[#F0F0F0] px-2 py-0">
           <div className="flex flex-row gap-x-1">
             <p className="my-auto text-semantic-fg-primary product-body-text-4-medium">
               Formatted
@@ -42,7 +42,8 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
               />
             </div>
           </div>
-          <div className="ml-auto flex flex-row">
+          <div className="ml-auto flex flex-row gap-x-1">
+            {/* <DownloadButton className="my-auto" text={text ?? ""} /> */}
             <CopyButton className="my-auto" text={text ?? ""} />
           </div>
         </div>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/ShareButton.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/ShareButton.tsx
new file mode 100644
index 0000000000..eb21b46c8b
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/ShareButton.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import cn from "clsx";
+import { Icons } from "@instill-ai/design-system";
+
+export const ShareButton = ({
+  className,
+  text,
+}: {
+  text: string;
+  className?: string;
+}) => {
+  const [, setCopied] = React.useState(false);
+
+  return (
+    <button
+      className={cn(
+        "flex flex-row items-center gap-x-1 rounded px-1 py-0.5 hover:bg-semantic-bg-base-bg",
+        className
+      )}
+      type="button"
+      onClick={async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1000);
+      }}
+    >
+      <p className="font-sans text-[10px] font-semibold text-semantic-fg-disabled">
+        Share
+      </p>
+      <Icons.Share07 className="h-3 w-3 stroke-semantic-fg-disabled" />
+    </button>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts b/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
index dcee27d412..dadda2325e 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
@@ -10,6 +10,8 @@ import { TextField } from "./TextField";
 import { TextsField } from "./TextsField";
 import { VideoField } from "./VideoField";
 import { VideosField } from "./VideosField";
+import { DownloadButton } from "./DownloadButton";
+import { ShareButton } from "./ShareButton";
 
 export const ComponentOutputFields = {
   AudioField,
@@ -24,4 +26,6 @@ export const ComponentOutputFields = {
   TextsField,
   VideoField,
   VideosField,
+  DownloadButton,
+  ShareButton,
 };
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudioField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudioField.tsx
index 02f26a030c..3eb2b96dde 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudioField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudioField.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import cn from "clsx";
 import { Form } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps, Nullable } from "../../..";
 import { readFileToBinary } from "../../../../view";
@@ -8,6 +9,7 @@ import { FieldHead } from "./FieldHead";
 import { UploadFileInput } from "./UploadFileInput";
 import { AudioListItem } from "./AudioListItem";
 import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { Icons } from "@instill-ai/design-system";
 
 export const AudioField = ({
   mode,
@@ -46,26 +48,48 @@ export const AudioField = ({
               disabledReferenceHint={disabledReferenceHint}
             />
 
-            <div className="flex">
-              <Form.Control>
-                <UploadFileInput
-                  ref={inputRef}
-                  keyPrefix={keyPrefix}
-                  title="Upload audio"
-                  fieldKey={path}
-                  accept="audio/*"
-                  onChange={async (e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      setAudioFile(file);
-                      const binary = await readFileToBinary(file);
-                      field.onChange(binary);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-            </div>
+            <label
+              htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+              className="cursor-pointer"
+            >
+              <div
+                key={`${path}-audio-placeholder`}
+                className={cn(
+                  "flex w-full flex-col items-center justify-center",
+                  mode === "build"
+                    ? "h-[150px] bg-semantic-bg-secondary"
+                    : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                )}
+              >
+                <div className="hidden">
+                  <Form.Control>
+                    <UploadFileInput
+                      ref={inputRef}
+                      keyPrefix={keyPrefix}
+                      title="Upload audio"
+                      fieldKey={path}
+                      accept="audio/*"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) {
+                          setAudioFile(file);
+                          const binary = await readFileToBinary(file);
+                          field.onChange(binary);
+                        }
+                      }}
+                      disabled={disabled}
+                    />
+                  </Form.Control>
+                </div>
+                <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                  Drag-and-drop audio, or{" "}
+                  <span className="text-semantic-accent-default">
+                    browse computer
+                  </span>
+                </p>
+              </div>
+            </label>
             {audioFile ? (
               <AudioListItem
                 src={URL.createObjectURL(audioFile)}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudiosField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudiosField.tsx
index 9cd6da3245..6ace494846 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudiosField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/AudiosField.tsx
@@ -9,6 +9,7 @@ import { FieldHead } from "./FieldHead";
 import { UploadFileInput } from "./UploadFileInput";
 import { AudioListItem } from "./AudioListItem";
 import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { Icons } from "@instill-ai/design-system";
 
 export const AudiosField = ({
   mode,
@@ -47,88 +48,114 @@ export const AudiosField = ({
               disabledReferenceHint={disabledReferenceHint}
             />
 
-            <div className="flex flex-row gap-x-1">
-              <Form.Control>
-                <UploadFileInput
-                  ref={inputRef}
-                  keyPrefix={keyPrefix}
-                  title="Upload audios"
-                  fieldKey={path}
-                  accept="audio/*"
-                  multiple={true}
-                  onChange={async (e) => {
-                    if (e.target.files && e.target.files.length > 0) {
-                      const files: File[] = [];
-                      const binaries: string[] = [];
-                      for (const file of e.target.files) {
-                        const binary = await readFileToBinary(file);
-                        files.push(file);
-                        binaries.push(binary);
-                      }
-                      field.onChange(binaries);
-                      setAudioFiles((prev) => [...prev, ...files]);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-              {audioFiles.length > 0 ? (
-                <button
-                  type="button"
-                  className="flex cursor-pointer rounded-full bg-semantic-error-bg px-2 py-0.5 font-sans text-xs font-medium text-semantic-error-default hover:bg-semantic-error-bg-alt"
-                  onClick={() => {
-                    field.onChange([]);
-                    setAudioFiles([]);
-
-                    if (inputRef.current) {
-                      inputRef.current.value = "";
-                    }
-                  }}
-                >
-                  Delete all
-                </button>
-              ) : null}
-            </div>
-            {audioFiles.length > 0 ? (
-              <ScrollArea.Root
+            <label
+              htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+              className="cursor-pointer"
+            >
+              <div
+                key={`${path}-audios-placeholder`}
                 className={cn(
-                  "nowheel h-[216px] rounded-sm p-2",
+                  "flex w-full flex-col items-center justify-center",
                   mode === "build"
-                    ? "bg-semantic-bg-secondary"
-                    : "border border-semantic-bg-line"
+                    ? "h-[150px] bg-semantic-bg-secondary"
+                    : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
                 )}
               >
-                <div className="flex h-full flex-col gap-y-2">
-                  {audioFiles.map((e, i) => (
-                    <AudioListItem
-                      key={`${path}-${e.name}-item`}
-                      name={e.name}
-                      src={URL.createObjectURL(e)}
-                      onDelete={async () => {
-                        const newFiles = audioFiles.filter(
-                          (_, index) => index !== i
-                        );
-
-                        const newBinaries: string[] = [];
-
-                        for (const file of newFiles) {
-                          const binary = await readFileToBinary(file);
-                          newBinaries.push(binary);
-                        }
-
-                        field.onChange(newBinaries);
-                        setAudioFiles(newFiles);
-
-                        // We directly remove the browser input value, we don't need it
-                        // and it may cause some surprise when user reupload the same file
-                        if (inputRef.current) {
-                          inputRef.current.value = "";
+                <div className="hidden">
+                  <Form.Control>
+                    <UploadFileInput
+                      ref={inputRef}
+                      keyPrefix={keyPrefix}
+                      title="Upload audios"
+                      fieldKey={path}
+                      accept="audio/*"
+                      multiple={true}
+                      onChange={async (e) => {
+                        if (e.target.files && e.target.files.length > 0) {
+                          const files: File[] = [];
+                          const binaries: string[] = [];
+                          for (const file of e.target.files) {
+                            const binary = await readFileToBinary(file);
+                            files.push(file);
+                            binaries.push(binary);
+                          }
+                          field.onChange(binaries);
+                          setAudioFiles((prev) => [...prev, ...files]);
                         }
                       }}
+                      disabled={disabled}
                     />
-                  ))}
+                  </Form.Control>
+                </div>
+                <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                  Drag-and-drop audios, or{" "}
+                  <span className="text-semantic-accent-default">
+                    browse computer
+                  </span>
+                </p>
+              </div>
+            </label>
+
+            {audioFiles.length > 0 ? (
+              <React.Fragment>
+                <div className="flex flex-row gap-x-1">
+                  <button
+                    type="button"
+                    className="flex cursor-pointer rounded-full bg-semantic-error-bg px-2 py-0.5 font-sans text-xs font-medium text-semantic-error-default hover:bg-semantic-error-bg-alt"
+                    onClick={() => {
+                      field.onChange([]);
+                      setAudioFiles([]);
+
+                      if (inputRef.current) {
+                        inputRef.current.value = "";
+                      }
+                    }}
+                  >
+                    Delete all
+                  </button>
                 </div>
-              </ScrollArea.Root>
+
+                <ScrollArea.Root
+                  className={cn(
+                    "nowheel h-[216px] rounded-sm p-2",
+                    mode === "build"
+                      ? "bg-semantic-bg-secondary"
+                      : "border border-semantic-bg-line"
+                  )}
+                >
+                  <div className="flex h-full flex-col gap-y-2">
+                    {audioFiles.map((e, i) => (
+                      <AudioListItem
+                        key={`${path}-${e.name}-item`}
+                        name={e.name}
+                        src={URL.createObjectURL(e)}
+                        onDelete={async () => {
+                          const newFiles = audioFiles.filter(
+                            (_, index) => index !== i
+                          );
+
+                          const newBinaries: string[] = [];
+
+                          for (const file of newFiles) {
+                            const binary = await readFileToBinary(file);
+                            newBinaries.push(binary);
+                          }
+
+                          field.onChange(newBinaries);
+                          setAudioFiles(newFiles);
+
+                          // We directly remove the browser input value, we don't need it
+                          // and it may cause some surprise when user reupload the same file
+                          if (inputRef.current) {
+                            inputRef.current.value = "";
+                          }
+                        }}
+                      />
+                    ))}
+                  </div>
+                </ScrollArea.Root>
+              </React.Fragment>
             ) : null}
             <Form.Description
               className="nodrag nopan cursor-text select-text !text-xs"
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FileField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FileField.tsx
index 12cbd8a12d..81a629c6e9 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FileField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FileField.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { Form } from "@instill-ai/design-system";
+import cn from "clsx";
+import { Form, Icons } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps, Nullable } from "../../..";
 import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
@@ -45,26 +46,49 @@ export const FileField = ({
               disabledFieldControl={disabledFieldControl}
               disabledReferenceHint={disabledReferenceHint}
             />
-            <div className="flex">
-              <Form.Control>
-                <UploadFileInput
-                  keyPrefix={keyPrefix}
-                  ref={inputRef}
-                  title="Upload file"
-                  fieldKey={path}
-                  accept="*/*"
-                  onChange={async (e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      const binary = await readFileToBinary(file);
-                      field.onChange(binary);
-                      setUploadedFiles(file);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-            </div>
+            <label
+              htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+              className="cursor-pointer"
+            >
+              <div
+                key={`${path}-image-placeholder`}
+                className={cn(
+                  "flex w-full flex-col items-center justify-center",
+                  mode === "build"
+                    ? "h-[150px] bg-semantic-bg-secondary"
+                    : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                )}
+              >
+                <div className="hidden">
+                  <Form.Control>
+                    <UploadFileInput
+                      keyPrefix={keyPrefix}
+                      ref={inputRef}
+                      title="Upload file"
+                      fieldKey={path}
+                      accept="*/*"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) {
+                          const binary = await readFileToBinary(file);
+                          field.onChange(binary);
+                          setUploadedFiles(file);
+                        }
+                      }}
+                      disabled={disabled}
+                    />
+                  </Form.Control>
+                </div>
+                <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                  Drag-and-drop file, or{" "}
+                  <span className="text-semantic-accent-default">
+                    browse computer
+                  </span>
+                </p>
+              </div>
+            </label>
+
             {uploadedFile ? (
               <FileListItem
                 name={uploadedFile.name}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FilesField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FilesField.tsx
index 0f9fb98a4b..5120c5a67f 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FilesField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/FilesField.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import cn from "clsx";
-import { Form, ScrollArea } from "@instill-ai/design-system";
+import { Form, Icons, ScrollArea } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps } from "../../..";
 import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
@@ -47,32 +47,57 @@ export const FilesField = ({
               disabledReferenceHint={disabledReferenceHint}
             />
 
-            <div className="flex flex-row gap-x-1">
-              <Form.Control>
-                <UploadFileInput
-                  ref={inputRef}
-                  keyPrefix={keyPrefix}
-                  title="Upload files"
-                  fieldKey={path}
-                  accept="*/*"
-                  multiple={true}
-                  onChange={async (e) => {
-                    if (e.target.files && e.target.files.length > 0) {
-                      const files: File[] = [];
-                      const binaries: string[] = [];
-                      for (const file of e.target.files) {
-                        const binary = await readFileToBinary(file);
-                        files.push(file);
-                        binaries.push(binary);
-                      }
-                      field.onChange(binaries);
-                      setUploadedFiles((prev) => [...prev, ...files]);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-              {uploadedFiles.length > 0 ? (
+            <label
+              htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+              className="cursor-pointer"
+            >
+              <div
+                key={`${path}-audios-placeholder`}
+                className={cn(
+                  "flex w-full flex-col items-center justify-center",
+                  mode === "build"
+                    ? "h-[150px] bg-semantic-bg-secondary"
+                    : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                )}
+              >
+                <div className="hidden">
+                  <Form.Control>
+                    <UploadFileInput
+                      ref={inputRef}
+                      keyPrefix={keyPrefix}
+                      title="Upload files"
+                      fieldKey={path}
+                      accept="*/*"
+                      multiple={true}
+                      onChange={async (e) => {
+                        if (e.target.files && e.target.files.length > 0) {
+                          const files: File[] = [];
+                          const binaries: string[] = [];
+                          for (const file of e.target.files) {
+                            const binary = await readFileToBinary(file);
+                            files.push(file);
+                            binaries.push(binary);
+                          }
+                          field.onChange(binaries);
+                          setUploadedFiles((prev) => [...prev, ...files]);
+                        }
+                      }}
+                      disabled={disabled}
+                    />
+                  </Form.Control>
+                </div>
+                <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                  Drag-and-drop files, or{" "}
+                  <span className="text-semantic-accent-default">
+                    browse computer
+                  </span>
+                </p>
+              </div>
+            </label>
+
+            {uploadedFiles.length > 0 ? (
+              <div className="flex flex-row gap-x-1">
                 <button
                   type="button"
                   className="flex cursor-pointer rounded-full bg-semantic-error-bg px-2 py-0.5 font-sans text-xs font-medium text-semantic-error-default hover:bg-semantic-error-bg-alt"
@@ -86,8 +111,8 @@ export const FilesField = ({
                 >
                   Delete all
                 </button>
-              ) : null}
-            </div>
+              </div>
+            ) : null}
             {uploadedFiles.length > 0 ? (
               <ScrollArea.Root
                 className={cn(
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImageField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImageField.tsx
index b658d80237..db7e64d403 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImageField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImageField.tsx
@@ -9,6 +9,7 @@ import { FieldHead } from "./FieldHead";
 import { FileListItem } from "./FileListItem";
 import { UploadFileInput } from "./UploadFileInput";
 import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { Icons } from "@instill-ai/design-system";
 
 export const ImageField = ({
   mode,
@@ -59,37 +60,51 @@ export const ImageField = ({
                   )}
                 />
               ) : (
-                <div
-                  key={`${path}-image-placeholder`}
-                  className={cn(
-                    "flex w-full items-center justify-center",
-                    mode === "build"
-                      ? "h-[150px] bg-semantic-bg-secondary"
-                      : "h-[260px] rounded-sm border border-semantic-bg-line bg-transparent"
-                  )}
-                ></div>
+                <label
+                  htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+                  className="cursor-pointer"
+                >
+                  <div
+                    key={`${path}-image-placeholder`}
+                    className={cn(
+                      "flex w-full flex-col items-center justify-center",
+                      mode === "build"
+                        ? "h-[150px] bg-semantic-bg-secondary"
+                        : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                    )}
+                  >
+                    <div className="hidden">
+                      <Form.Control>
+                        <UploadFileInput
+                          keyPrefix={keyPrefix}
+                          ref={inputRef}
+                          title="Upload image"
+                          fieldKey={path}
+                          accept="image/*"
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                              const binary = await readFileToBinary(file);
+                              field.onChange(binary);
+                              setImageFile(file);
+                            }
+                          }}
+                          disabled={disabled}
+                        />
+                      </Form.Control>
+                    </div>
+                    <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                    <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                      Drag-and-drop image, or{" "}
+                      <span className="text-semantic-accent-default">
+                        browse computer
+                      </span>
+                    </p>
+                  </div>
+                </label>
               )}
             </div>
-            <div className="flex">
-              <Form.Control>
-                <UploadFileInput
-                  keyPrefix={keyPrefix}
-                  ref={inputRef}
-                  title="Upload image"
-                  fieldKey={path}
-                  accept="image/*"
-                  onChange={async (e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      const binary = await readFileToBinary(file);
-                      field.onChange(binary);
-                      setImageFile(file);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-            </div>
+
             {imageFile ? (
               <FileListItem
                 name={imageFile.name}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImagesField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImagesField.tsx
index b2c57d84e9..21b95d85df 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImagesField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/ImagesField.tsx
@@ -9,6 +9,7 @@ import { FieldHead } from "./FieldHead";
 import { FileListItem } from "./FileListItem";
 import { UploadFileInput } from "./UploadFileInput";
 import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { Icons } from "@instill-ai/design-system";
 
 export const ImagesField = ({
   mode,
@@ -47,78 +48,116 @@ export const ImagesField = ({
               disabledReferenceHint={disabledReferenceHint}
             />
 
-            <div
-              className={cn(
-                "grid w-full grid-flow-row grid-cols-4",
-                mode === "build"
-                  ? ""
-                  : "rounded-sm border border-semantic-bg-line"
-              )}
-            >
-              {imageFiles.length > 0
-                ? fillArrayWithZeros(imageFiles, 8)
-                    .slice(0, 8)
-                    .map((file, i) => {
-                      return file ? (
-                        <img
-                          key={`${path}-${file.name}`}
-                          src={URL.createObjectURL(file)}
-                          alt={`${path}-${file.name}`}
-                          className={cn(
-                            mode === "build"
-                              ? "h-[55px] object-cover"
-                              : "h-[140px] object-contain"
-                          )}
-                        />
-                      ) : (
-                        <div
-                          key={`${path}-${i}`}
-                          className={cn(
-                            "w-full bg-semantic-bg-secondary",
-                            mode === "build"
-                              ? "h-[55px] object-cover"
-                              : "h-[140px] object-contain"
-                          )}
-                        />
-                      );
-                    })
-                : Array.from({ length: 8 }).map((_, i) => (
-                    <div
-                      key={`${path}-${i}`}
-                      className={cn(
-                        "w-full",
-                        mode === "build"
-                          ? "h-[55px] bg-semantic-bg-secondary object-cover"
-                          : "h-[140px] object-contain"
-                      )}
-                    />
-                  ))}
-            </div>
-            <div className="flex flex-row gap-x-1">
-              <Form.Control>
-                <UploadFileInput
-                  keyPrefix={keyPrefix}
-                  fieldKey={path}
-                  title="Upload images"
-                  accept="images/*"
-                  multiple={true}
-                  onChange={async (e) => {
-                    if (e.target.files && e.target.files.length > 0) {
-                      const files: File[] = [];
-                      const binaries: string[] = [];
-                      for (const file of e.target.files) {
-                        const binary = await readFileToBinary(file);
-                        files.push(file);
-                        binaries.push(binary);
+            {imageFiles.length > 0 ? (
+              <div
+                className={cn(
+                  "grid w-full grid-flow-row grid-cols-4",
+                  mode === "build" ? "" : "rounded-sm bg-semantic-bg-base-bg"
+                )}
+              >
+                {fillArrayWithZeros(imageFiles, 8)
+                  .slice(0, 8)
+                  .map((file, i) => {
+                    return file ? (
+                      <img
+                        key={`${path}-${file.name}`}
+                        src={URL.createObjectURL(file)}
+                        alt={`${path}-${file.name}`}
+                        className={cn(
+                          mode === "build"
+                            ? "h-[55px] object-cover"
+                            : "h-[140px] object-contain"
+                        )}
+                      />
+                    ) : (
+                      <div
+                        key={`${path}-${i}`}
+                        className={cn(
+                          "w-full bg-semantic-bg-secondary",
+                          mode === "build"
+                            ? "h-[55px] object-cover"
+                            : "h-[140px] object-contain"
+                        )}
+                      />
+                    );
+                  })}
+              </div>
+            ) : (
+              <label
+                htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+                className="cursor-pointer"
+              >
+                <div
+                  key={`${path}-images-placeholder`}
+                  className={cn(
+                    "flex w-full flex-col items-center justify-center",
+                    mode === "build"
+                      ? "h-[150px] bg-semantic-bg-secondary"
+                      : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                  )}
+                >
+                  <div className="hidden">
+                    <Form.Control>
+                      <UploadFileInput
+                        keyPrefix={keyPrefix}
+                        fieldKey={path}
+                        title="Upload images"
+                        accept="images/*"
+                        multiple={true}
+                        onChange={async (e) => {
+                          if (e.target.files && e.target.files.length > 0) {
+                            const files: File[] = [];
+                            const binaries: string[] = [];
+                            for (const file of e.target.files) {
+                              const binary = await readFileToBinary(file);
+                              files.push(file);
+                              binaries.push(binary);
+                            }
+                            field.onChange(binaries);
+                            setImageFiles((prev) => [...prev, ...files]);
+                          }
+                        }}
+                        disabled={disabled}
+                      />
+                    </Form.Control>
+                  </div>
+                  <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                  <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                    Drag-and-drop images, or{" "}
+                    <span className="text-semantic-accent-default">
+                      browse computer
+                    </span>
+                  </p>
+                </div>
+              </label>
+            )}
+
+            {imageFiles.length >= 1 && (
+              <div className="flex flex-row gap-x-1">
+                <Form.Control>
+                  <UploadFileInput
+                    keyPrefix={keyPrefix}
+                    fieldKey={path}
+                    title="Upload images"
+                    accept="images/*"
+                    multiple={true}
+                    onChange={async (e) => {
+                      if (e.target.files && e.target.files.length > 0) {
+                        const files: File[] = [];
+                        const binaries: string[] = [];
+                        for (const file of e.target.files) {
+                          const binary = await readFileToBinary(file);
+                          files.push(file);
+                          binaries.push(binary);
+                        }
+                        field.onChange(binaries);
+                        setImageFiles((prev) => [...prev, ...files]);
                       }
-                      field.onChange(binaries);
-                      setImageFiles((prev) => [...prev, ...files]);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-              {imageFiles.length > 0 ? (
+                    }}
+                    disabled={disabled}
+                  />
+                </Form.Control>
+
                 <button
                   type="button"
                   className="flex cursor-pointer rounded-full bg-semantic-error-bg px-2 py-0.5 font-sans text-xs font-medium text-semantic-error-default hover:bg-semantic-error-bg-alt"
@@ -132,8 +171,8 @@ export const ImagesField = ({
                 >
                   Delete all
                 </button>
-              ) : null}
-            </div>
+              </div>
+            )}
             {imageFiles.length > 0 ? (
               <ScrollArea.Root
                 className={cn(
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideoField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideoField.tsx
index 09bad24346..dea49cbb71 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideoField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideoField.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import cn from "clsx";
-import { Form } from "@instill-ai/design-system";
+import { Form, Icons } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps, Nullable } from "../../..";
 import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
@@ -55,37 +55,50 @@ export const VideoField = ({
                   className={mode === "build" ? "h-[150px]" : "h-[360px]"}
                 />
               ) : (
-                <div
-                  key={`${path}-image-placeholder`}
-                  className={cn(
-                    "flex w-full items-center justify-center",
-                    mode === "build"
-                      ? "h-[150px] bg-semantic-bg-secondary"
-                      : "h-[260px] rounded-sm border border-semantic-bg-line bg-transparent"
-                  )}
-                ></div>
+                <label
+                  htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+                  className="cursor-pointer"
+                >
+                  <div
+                    key={`${path}-video-placeholder`}
+                    className={cn(
+                      "flex w-full flex-col items-center justify-center",
+                      mode === "build"
+                        ? "h-[150px] bg-semantic-bg-secondary"
+                        : "h-[260px] rounded-sm border border-semantic-bg-line bg-transparent"
+                    )}
+                  >
+                    <div className="hidden">
+                      <Form.Control>
+                        <UploadFileInput
+                          keyPrefix={keyPrefix}
+                          ref={inputRef}
+                          title="Upload video"
+                          fieldKey={path}
+                          accept="video/*"
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                              const binary = await readFileToBinary(file);
+                              field.onChange(binary);
+                              setVideoFile(file);
+                            }
+                          }}
+                          disabled={disabled}
+                        />
+                      </Form.Control>
+                    </div>
+                    <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                    <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                      Drag-and-drop video, or{" "}
+                      <span className="text-semantic-accent-default">
+                        browse computer
+                      </span>
+                    </p>
+                  </div>
+                </label>
               )}
             </div>
-            <div className="flex">
-              <Form.Control>
-                <UploadFileInput
-                  keyPrefix={keyPrefix}
-                  ref={inputRef}
-                  title="Upload video"
-                  fieldKey={path}
-                  accept="video/*"
-                  onChange={async (e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      const binary = await readFileToBinary(file);
-                      field.onChange(binary);
-                      setVideoFile(file);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-            </div>
             {videoFile ? (
               <FileListItem
                 name={videoFile.name}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideosField.tsx b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideosField.tsx
index 852570d27c..1a4cabf5f6 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideosField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/trigger-request-form-fields/VideosField.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import cn from "clsx";
-import { Form, ScrollArea } from "@instill-ai/design-system";
+import { Form, Icons, ScrollArea } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps, fillArrayWithZeros } from "../../..";
 import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
@@ -48,77 +48,116 @@ export const VideosField = ({
               disabledReferenceHint={disabledReferenceHint}
             />
 
-            <div
-              className={cn(
-                "grid w-full grid-flow-row grid-cols-4",
-                mode === "build"
-                  ? ""
-                  : "rounded-sm border border-semantic-bg-line"
-              )}
-            >
-              {videosFiles.length > 0
-                ? fillArrayWithZeros(videosFiles, 8)
-                    .slice(0, 8)
-                    .map((file, i) => {
-                      return file ? (
-                        <VideoPreview
-                          key={`${path}-${file.name}`}
-                          src={URL.createObjectURL(file)}
-                          className={
-                            mode === "build"
-                              ? "h-[55px] object-cover"
-                              : "h-[140px] object-contain"
+            {videosFiles.length > 0 ? (
+              <div
+                className={cn(
+                  "grid w-full grid-flow-row grid-cols-4",
+                  mode === "build"
+                    ? ""
+                    : "rounded-sm border border-semantic-bg-line"
+                )}
+              >
+                {fillArrayWithZeros(videosFiles, 8)
+                  .slice(0, 8)
+                  .map((file, i) => {
+                    return file ? (
+                      <VideoPreview
+                        key={`${path}-${file.name}`}
+                        src={URL.createObjectURL(file)}
+                        className={
+                          mode === "build"
+                            ? "h-[55px] object-cover"
+                            : "h-[140px] object-contain"
+                        }
+                      />
+                    ) : (
+                      <div
+                        key={`${path}-${i}`}
+                        className={cn(
+                          "w-full bg-semantic-bg-secondary",
+                          mode === "build"
+                            ? "h-[55px] object-cover"
+                            : "h-[140px] object-contain"
+                        )}
+                      />
+                    );
+                  })}
+              </div>
+            ) : (
+              <label
+                htmlFor={`upload-file-input-${path}-${keyPrefix}`}
+                className="cursor-pointer"
+              >
+                <div
+                  key={`${path}-videos-placeholder`}
+                  className={cn(
+                    "flex w-full flex-col items-center justify-center",
+                    mode === "build"
+                      ? "h-[150px] bg-semantic-bg-secondary"
+                      : "h-[230px] rounded-sm bg-semantic-bg-base-bg"
+                  )}
+                >
+                  <div className="hidden">
+                    <Form.Control>
+                      <UploadFileInput
+                        keyPrefix={keyPrefix}
+                        fieldKey={path}
+                        title="Upload videos"
+                        accept="video/*"
+                        multiple={true}
+                        onChange={async (e) => {
+                          if (e.target.files && e.target.files.length > 0) {
+                            const files: File[] = [];
+                            const binaries: string[] = [];
+                            for (const file of e.target.files) {
+                              const binary = await readFileToBinary(file);
+                              files.push(file);
+                              binaries.push(binary);
+                            }
+                            field.onChange(binaries);
+                            setVideoFiles((prev) => [...prev, ...files]);
                           }
-                        />
-                      ) : (
-                        <div
-                          key={`${path}-${i}`}
-                          className={cn(
-                            "w-full bg-semantic-bg-secondary",
-                            mode === "build"
-                              ? "h-[55px] object-cover"
-                              : "h-[140px] object-contain"
-                          )}
-                        />
-                      );
-                    })
-                : Array.from({ length: 8 }).map((_, i) => (
-                    <div
-                      key={`${path}-${i}`}
-                      className={cn(
-                        "w-full",
-                        mode === "build"
-                          ? "h-[55px] bg-semantic-bg-secondary object-cover"
-                          : "h-[140px] object-contain"
-                      )}
-                    />
-                  ))}
-            </div>
-            <div className="flex flex-row gap-x-1">
-              <Form.Control>
-                <UploadFileInput
-                  keyPrefix={keyPrefix}
-                  fieldKey={path}
-                  title="Upload videos"
-                  accept="video/*"
-                  multiple={true}
-                  onChange={async (e) => {
-                    if (e.target.files && e.target.files.length > 0) {
-                      const files: File[] = [];
-                      const binaries: string[] = [];
-                      for (const file of e.target.files) {
-                        const binary = await readFileToBinary(file);
-                        files.push(file);
-                        binaries.push(binary);
+                        }}
+                        disabled={disabled}
+                      />
+                    </Form.Control>
+                  </div>
+                  <Icons.Upload01 className="h-8 w-8 stroke-semantic-fg-secondary" />
+                  <p className="mt-4 font-sans text-[12px] font-normal text-semantic-fg-primary">
+                    Drag-and-drop videos, or{" "}
+                    <span className="text-semantic-accent-default">
+                      browse computer
+                    </span>
+                  </p>
+                </div>
+              </label>
+            )}
+
+            {videosFiles.length >= 1 ? (
+              <div className="flex flex-row gap-x-1">
+                <Form.Control>
+                  <UploadFileInput
+                    keyPrefix={keyPrefix}
+                    fieldKey={path}
+                    title="Upload videos"
+                    accept="video/*"
+                    multiple={true}
+                    onChange={async (e) => {
+                      if (e.target.files && e.target.files.length > 0) {
+                        const files: File[] = [];
+                        const binaries: string[] = [];
+                        for (const file of e.target.files) {
+                          const binary = await readFileToBinary(file);
+                          files.push(file);
+                          binaries.push(binary);
+                        }
+                        field.onChange(binaries);
+                        setVideoFiles((prev) => [...prev, ...files]);
                       }
-                      field.onChange(binaries);
-                      setVideoFiles((prev) => [...prev, ...files]);
-                    }
-                  }}
-                  disabled={disabled}
-                />
-              </Form.Control>
-              {videosFiles.length > 0 ? (
+                    }}
+                    disabled={disabled}
+                  />
+                </Form.Control>
                 <button
                   type="button"
                   className="flex cursor-pointer rounded-full bg-semantic-error-bg px-2 py-0.5 font-sans text-xs font-medium text-semantic-error-default hover:bg-semantic-error-bg-alt"
@@ -132,8 +171,8 @@ export const VideosField = ({
                 >
                   Delete all
                 </button>
-              ) : null}
-            </div>
+              </div>
+            ) : null}
             {videosFiles.length > 0 ? (
               <ScrollArea.Root
                 className={cn(
diff --git a/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
index cfe5a32d02..3c62219602 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/ComponentOutputs.tsx
@@ -74,7 +74,7 @@ export const ComponentOutputs = ({
         className="nodrag nowheel h-full"
         viewPortClassName="max-h-[400px]"
       >
-        <div className="flex flex-col gap-y-1 rounded bg-semantic-bg-primary">
+        <div className="flex flex-col gap-y-1 rounded bg-semantic-bg-alt-primary">
           {componentOutputFields}
         </div>
       </ScrollArea.Root>
diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
index 15105bbc1e..4978f453a5 100644
--- a/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
@@ -221,7 +221,7 @@ export const InOutPut = ({ currentVersion }: InOutPutProps) => {
 
   return (
     <div className="flex flex-col">
-      <div className="mb-3 flex flex-col gap-y-6">
+      <div className="mb-3 flex flex-col gap-y-3">
         <div className="bg-semantic-bg-base-bg px-3 py-2 product-body-text-1-semibold">
           Input
         </div>
@@ -273,7 +273,7 @@ export const InOutPut = ({ currentVersion }: InOutPutProps) => {
           <div className="h-8 w-20 animate-pulse rounded bg-gradient-to-r from-[#DBDBDB]" />
         )}
       </div>
-      <div className="mb-6 flex flex-col gap-y-6">
+      <div className="mb-6 flex flex-col gap-y-3">
         <div className="bg-semantic-bg-base-bg px-3 py-2 product-body-text-1-semibold">
           Output
         </div>
@@ -295,7 +295,7 @@ export const InOutPut = ({ currentVersion }: InOutPutProps) => {
                   );
                 }}
               >
-                Setup
+                Setups
               </Button>
             </div>
           ) : (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d72ecc8437..d5cf3b3496 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19185,4 +19185,4 @@ packages:
 
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-    dev: false
+    dev: false
\ No newline at end of file