diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
index d1090f0188..c4c7c65b2b 100644
--- a/packages/toolkit/package.json
+++ b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.80.4-rc.11",
+  "version": "0.80.4-rc.13",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",
diff --git a/packages/toolkit/src/components/card-pipeline/Head.tsx b/packages/toolkit/src/components/card-pipeline/Head.tsx
index 107ec10927..4c11958ed8 100644
--- a/packages/toolkit/src/components/card-pipeline/Head.tsx
+++ b/packages/toolkit/src/components/card-pipeline/Head.tsx
@@ -64,7 +64,7 @@ export const Head = ({
     <div className="flex flex-row p-3">
       <div className="mr-auto flex flex-row gap-x-2">
         <EntityAvatar
-          src={pipeline.owner?.profile?.avatar ?? null}
+          src={pipeline.owner?.profile_avatar ?? null}
           className="h-8 w-8"
           entityName={ownerID}
           fallbackImg={
diff --git a/packages/toolkit/src/lib/vdp-sdk/pipeline/types.ts b/packages/toolkit/src/lib/vdp-sdk/pipeline/types.ts
index 03eabeebb7..ed7ee76d18 100644
--- a/packages/toolkit/src/lib/vdp-sdk/pipeline/types.ts
+++ b/packages/toolkit/src/lib/vdp-sdk/pipeline/types.ts
@@ -118,6 +118,7 @@ export type PipelineRelease = {
   visibility: Visibility;
   openapi_schema: OpenAPIV3.Document;
   metadata: GeneralRecord;
+  alias?: string;
 };
 
 export type PipelineTrace = {
diff --git a/packages/toolkit/src/view/pipeline-builder/components/dialogs/share-pipeline-dialog/TabShare.tsx b/packages/toolkit/src/view/pipeline-builder/components/dialogs/share-pipeline-dialog/TabShare.tsx
index c5733a7ee8..992796cfb8 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/dialogs/share-pipeline-dialog/TabShare.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/dialogs/share-pipeline-dialog/TabShare.tsx
@@ -184,7 +184,7 @@ export const TabShare = () => {
       <div className="flex flex-row">
         <div className="mr-auto flex flex-row gap-x-2">
           <EntityAvatar
-            src={pipeline.data?.owner?.profile.avatar ?? null}
+            src={pipeline.data?.owner?.profile_avatar ?? null}
             entityName={pipeline.data?.owner_name ?? ""}
             className="h-[30px] w-[30px]"
             fallbackImg={
diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/Head.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/Head.tsx
index 9061f6dd4f..f58e2ccbce 100644
--- a/packages/toolkit/src/view/pipeline/view-pipeline/Head.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipeline/Head.tsx
@@ -7,11 +7,16 @@ import {
   Tag,
   TabMenu,
   Skeleton,
+  Popover,
+  ScrollArea,
+  toast,
 } from "@instill-ai/design-system";
 import {
   InstillStore,
   Nullable,
   isPublicPipeline,
+  toastInstillError,
+  useDeleteUserPipeline,
   useEntity,
   useInstillStore,
   useOrganization,
@@ -22,19 +27,31 @@ import {
 } from "../../../lib";
 import { ClonePipelineDialog, EntityAvatar } from "../../../components";
 import { EditMetadataDialog } from "./EditMetadataDialog";
+import cn from "clsx";
+import { Menu } from "./Menu";
 
 const selector = (store: InstillStore) => ({
   accessToken: store.accessToken,
   enabledQuery: store.enabledQuery,
 });
 
-export const Head = () => {
+type HeadProps = {
+  handleVersion: (version: string) => void;
+  currentVersion: string;
+};
+
+export const Head = (props: HeadProps) => {
   const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+
+  const { currentVersion, handleVersion } = props;
+
   const router = useRouter();
   const { id, entity } = router.query;
   const [selectedTab, setSelectedTab] =
     React.useState<Nullable<string>>("overview");
 
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
   const entityObject = useEntity();
 
   const user = useUser({
@@ -75,6 +92,29 @@ export const Head = () => {
     enabledQuery: enabledQuery && entityObject.isSuccess,
   });
 
+  const deletePipeline = useDeleteUserPipeline();
+  async function handleDeletePipeline() {
+    try {
+      await deletePipeline.mutateAsync({
+        pipelineName: pipeline.data?.name || "",
+        accessToken: accessToken ? accessToken : null,
+      });
+
+      toast({
+        title: "Pipeline deleted",
+        variant: "alert-success",
+        size: "large",
+      });
+      router.push(`/${entityObject.entity}/pipelines`);
+    } catch (error) {
+      toastInstillError({
+        title: "Something went wrong when delete the pipeline",
+        error,
+        toast,
+      });
+    }
+  }
+
   return (
     <React.Fragment>
       <style jsx>{`
@@ -96,7 +136,7 @@ export const Head = () => {
                     <EntityAvatar
                       src={organization.data?.profile?.avatar ?? null}
                       entityName={organization.data?.name ?? ""}
-                      className="h-6 w-6"
+                      className="my-auto h-6 w-6"
                       fallbackImg={
                         <div className="flex h-6 w-6 rounded-full bg-semantic-bg-secondary">
                           <Icons.User02 className="m-auto h-4 w-4 stroke-semantic-fg-disabled" />
@@ -107,7 +147,7 @@ export const Head = () => {
                     <EntityAvatar
                       src={user.data?.profile?.avatar ?? null}
                       entityName={user.data?.name ?? ""}
-                      className="h-6 w-6"
+                      className="my-auto h-6 w-6"
                       fallbackImg={
                         <div className="flex h-6 w-6 rounded-full bg-semantic-bg-secondary">
                           <Icons.User02 className="m-auto h-4 w-4 stroke-semantic-fg-disabled" />
@@ -119,9 +159,9 @@ export const Head = () => {
                   <Skeleton className="h-6 w-6 rounded-full" />
                 )}
 
-                {pipeline.isSuccess ? (
+                {releases && pipeline.isSuccess ? (
                   <React.Fragment>
-                    <div className="product-headings-heading-4">
+                    <div className="my-auto product-headings-heading-4">
                       <span
                         onClick={() => {
                           router.push(`/${entity}`);
@@ -133,20 +173,97 @@ export const Head = () => {
                       <span className="text-semantic-fg-disabled">/</span>
                       <span className="text-semantic-fg-primary">{id}</span>
                     </div>
+
+                    {releases.length && pipeline.isSuccess ? (
+                      <Popover.Root
+                        onOpenChange={() => setIsOpen(!isOpen)}
+                        open={isOpen}
+                      >
+                        <Popover.Trigger asChild={true} className="my-auto">
+                          <Button
+                            className={cn(
+                              "!h-8 !w-[145px] gap-x-1 !rounded-sm !border border-[#E1E6EF] !py-1 px-3 !transition-opacity !duration-300 !ease-in-out",
+                              isOpen
+                                ? "border-opacity-100 !bg-semantic-accent-bg "
+                                : "border-opacity-0"
+                            )}
+                            size="sm"
+                            variant="tertiaryColour"
+                            type="button"
+                            onClick={() => setIsOpen(true)}
+                          >
+                            <Tag
+                              size="sm"
+                              variant="darkPurple"
+                              className="h-6 gap-x-2"
+                            >
+                              Version{" "}
+                              {currentVersion === "latest"
+                                ? releases[0]?.id
+                                : currentVersion}
+                            </Tag>
+                            <Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-primary" />
+                          </Button>
+                        </Popover.Trigger>
+                        <Popover.Content
+                          side="top"
+                          sideOffset={4}
+                          align="start"
+                          className="flex h-[180px] w-[145px] flex-col !rounded-sm !p-0"
+                        >
+                          <ScrollArea.Root>
+                            <div className="flex flex-col gap-y-1 px-1.5 py-1">
+                              {releases.length > 0 ? (
+                                <React.Fragment>
+                                  {releases.map((release) => (
+                                    <VersionButton
+                                      key={release.id}
+                                      id={release.id}
+                                      currentVersion={
+                                        currentVersion === "latest"
+                                          ? releases[0].id
+                                          : currentVersion
+                                      }
+                                      createTime={release.create_time}
+                                      onClick={() => {
+                                        handleVersion(release.id);
+                                        setIsOpen(false);
+                                      }}
+                                    />
+                                  ))}
+                                </React.Fragment>
+                              ) : (
+                                <div className="p-2 text-semantic-fg-disabled product-body-text-4-medium">
+                                  This pipeline has no released versions.
+                                </div>
+                              )}
+                            </div>
+                          </ScrollArea.Root>
+                        </Popover.Content>
+                      </Popover.Root>
+                    ) : null}
                     {pipeline.isSuccess ? (
-                      <Tag className="!py-0" variant="darkBlue" size="sm">
-                        {isPublicPipeline(pipeline.data) ? "Public" : "Private"}
+                      <Tag
+                        className="my-auto h-6 !border-0 !py-0"
+                        variant="lightNeutral"
+                        size="sm"
+                      >
+                        {isPublicPipeline(pipeline.data) ? (
+                          <div className="flex flex-row gap-x-1">
+                            <span className="my-auto">Public</span>
+                          </div>
+                        ) : (
+                          <div className="flex flex-row gap-x-1">
+                            <span className="my-auto">Private</span>
+                            <Icons.Lock03 className="my-auto h-3 w-3 stroke-semantic-fg-primary" />
+                          </div>
+                        )}
                       </Tag>
                     ) : null}
                   </React.Fragment>
                 ) : (
                   <PipelineNameSkeleton />
                 )}
-                {releases[0] ? (
-                  <Tag className="!py-0" size="sm" variant="darkBlue">
-                    {releases[0]?.id}
-                  </Tag>
-                ) : null}
               </div>
             </div>
             {pipeline.isSuccess ? (
@@ -161,7 +278,7 @@ export const Head = () => {
                     />
                   </div>
                 ) : (
-                  <div className="flex w-full flex-row items-center gap-x-2">
+                  <div className="flex w-full flex-row items-center gap-x-2 p-1">
                     <p className="font-mono text-xs italic text-semantic-fg-disabled">
                       This is a placeholder brief of this pipeline
                     </p>
@@ -190,6 +307,13 @@ export const Head = () => {
             </TabMenu.Root>
           </div>
           <div className="mt-auto flex flex-row gap-x-2 pb-1">
+            {pipeline.isSuccess ? (
+              <Menu
+                pipeline={pipeline.data}
+                handleDeletePipeline={handleDeletePipeline}
+              />
+            ) : null}
+
             {pipeline.isSuccess ? (
               <React.Fragment>
                 {me.isSuccess ? (
@@ -259,3 +383,38 @@ const HeaderControllerSkeleton = () => {
     </React.Fragment>
   );
 };
+
+const VersionButton = ({
+  id,
+  currentVersion,
+  onClick,
+  createTime,
+}: {
+  id: string;
+  currentVersion: Nullable<string>;
+  createTime?: string;
+  onClick: () => void;
+}) => {
+  return (
+    <Button
+      key={id}
+      className={cn(
+        "w-full !px-2 !py-1.5",
+        currentVersion === id ? "!bg-semantic-bg-secondary" : ""
+      )}
+      variant={"tertiaryColour"}
+      onClick={onClick}
+    >
+      <div className="flex w-full flex-row gap-x-2">
+        <div className="my-auto h-2 w-[9px] rounded-full bg-semantic-secondary-default"></div>
+        <p
+          className={cn(
+            "w-full text-left text-semantic-fg-secondary product-body-text-3-medium"
+          )}
+        >
+          Version {id}
+        </p>
+      </div>
+    </Button>
+  );
+};
diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
index ba5c692b42..98e05cef7e 100644
--- a/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipeline/InOutPut.tsx
@@ -24,7 +24,7 @@ import {
   Skeleton,
   useToast,
 } from "@instill-ai/design-system";
-import { recursiveHelpers } from "../../pipeline-builder";
+import { recursiveHelpers, useSortedReleases } from "../../pipeline-builder";
 import { ComponentOutputs } from "../../pipeline-builder/components/ComponentOutputs";
 import { getPipelineInputOutputSchema } from "../../pipeline-builder/lib/getPipelineInputOutputSchema";
 import { LoadingSpin } from "../../../components";
@@ -34,7 +34,11 @@ const selector = (store: InstillStore) => ({
   enabledQuery: store.enabledQuery,
 });
 
-export const InOutPut = () => {
+type InOutPutProps = {
+  currentVersion: string;
+};
+
+export const InOutPut = ({ currentVersion }: InOutPutProps) => {
   const { amplitudeIsInit } = useAmplitudeCtx();
   const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
   const router = useRouter();
@@ -53,13 +57,21 @@ export const InOutPut = () => {
     accessToken,
   });
 
-  const startComponent = React.useMemo(() => {
-    if (!pipeline.isSuccess) return null;
+  const releases = useSortedReleases({
+    pipelineName: entityObject.pipelineName,
+    accessToken,
+    enabledQuery: enabledQuery && entityObject.isSuccess,
+  });
 
+  const startComponent = React.useMemo(() => {
+    const pipelineVersion = releases.find(
+      (release) =>
+        release.id === currentVersion || release.alias === currentVersion
+    );
     return (
-      pipeline.data.recipe.components.find((c) => c.id === "start") ?? null
+      pipelineVersion?.recipe.components.find((c) => c.id === "start") ?? null
     );
-  }, [pipeline.isSuccess, pipeline.data]);
+  }, [releases, currentVersion]);
 
   const { fields, form, Schema } = useStartOperatorTriggerPipelineForm({
     mode: "demo",
diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/Menu.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/Menu.tsx
new file mode 100644
index 0000000000..d198a18e05
--- /dev/null
+++ b/packages/toolkit/src/view/pipeline/view-pipeline/Menu.tsx
@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Button, DropdownMenu, Icons } from "@instill-ai/design-system";
+import {
+  InstillStore,
+  Pipeline,
+  useInstillStore,
+  useShallow,
+} from "./../../../lib";
+import {
+  ClonePipelineDialog,
+  GeneralDeleteResourceDialog,
+} from "./../../../components";
+import {
+  PublishPipelineDialog,
+  SharePipelineDialog,
+} from "../../pipeline-builder";
+
+const selector = (store: InstillStore) => ({
+  dialogSharePipelineIsOpen: store.dialogSharePipelineIsOpen,
+  updateDialogSharePipelineIsOpen: store.updateDialogSharePipelineIsOpen,
+});
+
+export type MenuProps = {
+  pipeline: Pipeline;
+  handleDeletePipeline: () => Promise<void>;
+};
+
+export const Menu = ({ pipeline, handleDeletePipeline }: MenuProps) => {
+  const [deleteDialogIsOpen, setDeleteDialogIsOpen] = React.useState(false);
+  const [cloneDialogIsOpen, setCloneDialogIsOpen] = React.useState(false);
+
+  const { dialogSharePipelineIsOpen, updateDialogSharePipelineIsOpen } =
+    useInstillStore(useShallow(selector));
+
+  return (
+    <React.Fragment>
+      <div className="flex justify-center">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Button className="!h-8 !px-2 !py-2" variant="secondaryGrey">
+              <Icons.DotsVertical className="h-4 w-4 stroke-semantic-fg-primary" />
+            </Button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content
+            align="end"
+            className="w-[129px] !rounded !px-0 !py-2"
+          >
+            <DropdownMenu.Item
+              onClick={() => updateDialogSharePipelineIsOpen((prev) => !prev)}
+              className="gap-x-2 !px-4 !py-2.5 !product-button-button-2"
+              key="share"
+            >
+              <Icons.Share07 className="my-auto h-4 w-4 stroke-semantic-fg-primary" />
+              Share
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              onClick={() => {
+                setDeleteDialogIsOpen(true);
+              }}
+              className="gap-x-2 !px-4 !py-2.5 !text-semantic-error-default !product-button-button-2"
+              key="delete"
+            >
+              <Icons.Trash01 className="my-auto h-4 w-4 stroke-semantic-error-default" />
+              Delete
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+      <SharePipelineDialog />
+      <PublishPipelineDialog />
+      <ClonePipelineDialog
+        pipeline={pipeline}
+        open={cloneDialogIsOpen}
+        onOpenChange={(open) => setCloneDialogIsOpen(open)}
+        trigger={null}
+      />
+      <GeneralDeleteResourceDialog
+        open={deleteDialogIsOpen}
+        onOpenChange={(open) => setDeleteDialogIsOpen(open)}
+        resourceID={pipeline.id}
+        title={`Delete ${pipeline.id}`}
+        description="This action cannot be undone. This will permanently delete the pipeline."
+        handleDeleteResource={async () => {
+          await handleDeletePipeline();
+          setDeleteDialogIsOpen(false);
+        }}
+        trigger={null}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/ViewPipeline.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/ViewPipeline.tsx
index 45edb02568..0b2fed7230 100644
--- a/packages/toolkit/src/view/pipeline/view-pipeline/ViewPipeline.tsx
+++ b/packages/toolkit/src/view/pipeline/view-pipeline/ViewPipeline.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import {
   InstillStore,
+  Nullable,
   useEntity,
   useInstillStore,
   useShallow,
@@ -20,9 +21,14 @@ const selector = (store: InstillStore) => ({
 
 export const ViewPipeline = () => {
   const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+  const [currentVersion, setCurrentVersion] = React.useState<string>("latest");
 
   const router = useRouter();
 
+  function handleVersion(version: string) {
+    setCurrentVersion(version);
+  }
+
   const me = useAuthenticatedUser({
     enabled: enabledQuery,
     accessToken,
@@ -41,6 +47,7 @@ export const ViewPipeline = () => {
     if (!pipeline.isSuccess || !me.isSuccess) {
       return false;
     }
+    setCurrentVersion(pipeline.data?.releases[0]?.id);
 
     return pipeline.data.owner_name === me.data.name;
   }, [pipeline.isSuccess, pipeline.data, me.isSuccess, me.data]);
@@ -51,15 +58,32 @@ export const ViewPipeline = () => {
     }
   }, [pipeline.isError, router]);
 
+  const pipelineRelease = React.useMemo(() => {
+    if (pipeline.data?.releases && currentVersion) {
+      return pipeline.data.releases.find(
+        (release) => release.id === currentVersion
+      );
+    }
+    return pipeline.data;
+  }, [pipeline.isSuccess, pipeline.data, currentVersion]);
+
   return (
     <div className="flex h-full flex-col">
-      <Head />
+      <Head handleVersion={handleVersion} currentVersion={currentVersion} />
       <div className="mx-auto flex flex-1 flex-row px-8">
         <div className="flex h-full w-[718px] flex-col gap-y-6 py-10 pr-10">
           <ReadOnlyPipelineBuilder
             pipelineName={pipeline.isSuccess ? pipeline.data.name : null}
-            recipe={pipeline.isSuccess ? pipeline.data.recipe : null}
-            metadata={pipeline.isSuccess ? pipeline.data.metadata : null}
+            recipe={
+              pipeline.isSuccess && pipelineRelease
+                ? pipelineRelease.recipe
+                : null
+            }
+            metadata={
+              pipeline.isSuccess && pipelineRelease
+                ? pipelineRelease.metadata
+                : null
+            }
             className="h-[378px] w-full"
           />
           <div className="w-full bg-semantic-bg-base-bg px-3 py-2 text-semantic-fg-primary product-body-text-1-semibold">
@@ -71,7 +95,7 @@ export const ViewPipeline = () => {
           />
         </div>
         <div className="flex w-[594px] flex-col py-10 pr-4">
-          <InOutPut />
+          <InOutPut currentVersion={currentVersion} />
         </div>
       </div>
     </div>