diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..2934ca6
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,358 @@
+# Copilot Instructions
+
+This is a frontend React-based repository for the Walrus Archive platform. It focuses on artifact submission, discovery, and governance using Sui + Walrus storage. Please follow these guidelines when contributing.
+
+---
+
+## Code Standards
+
+### Code Philosophy
+
+Follow these principles when writing frontend code:
+
+- Prefer **simple solutions**
+- Avoid **unnecessary abstractions**
+- Favor **readability over clever code**
+- Write **maintainable and predictable code**
+- Follow **existing patterns in the codebase**
+
+<!-- ---
+
+## Development Flow
+
+- Dev: `npm run dev`
+- Build: `npm run build`
+- Test: `npm run test` (Jest)
+- Lint/format: follow project ESLint + Prettier config -->
+
+---
+
+## Tech Stack
+
+### Languages
+
+- TypeScript
+- JavaScript
+
+### Frontend
+
+- React (functional components only)
+- React Router
+- TailwindCSS
+
+### Testing
+
+- Jest
+
+---
+
+## Repository Structure (Expected)
+
+- `components/` — reusable UI components
+- `pages/` — route-level pages
+- `hooks/` — custom hooks
+- `services/` — API / GraphQL / blockchain logic
+- `utils/` — helpers
+- `assets/` — static files (SVGs, etc.)
+- `docs/` — documentation
+
+---
+
+## React Component Rules
+
+### Functional Components Only
+
+Always use **functional components**.  
+Avoid class components.
+
+---
+
+### Component Design
+
+Prefer **small reusable components**.
+
+Example structure:
+
+```
+components/
+  Button/
+    index.tsx
+  Avatar/
+    index.tsx
+```
+
+Avoid large monolithic components.
+
+---
+
+### JSX Rules
+
+Keep JSX **clean and readable**.
+
+Move complex logic **outside the return statement**.
+
+Prefer optional chaining instead of long logical chains.
+
+**Bad:**
+
+```tsx
+<div>{user && user.profile && user.profile.name}</div>
+```
+
+**Preferred:**
+
+```tsx
+const name = user?.profile?.name;
+
+<div>{name}</div>;
+```
+
+---
+
+## Styling & Layout
+
+### Layout Primitives
+
+Use layout primitives instead of raw layout CSS.
+
+Preferred components:
+
+- `Flex`
+- `Stack`
+- `Center`
+
+Avoid inline layout styles like:
+
+```tsx
+<div style={{ display: "flex" }}>
+```
+
+---
+
+### Tailwind Rules
+
+Use **TailwindCSS utilities** for styling.
+
+Avoid:
+
+- custom CSS files
+- `<style>` blocks
+- inline CSS
+
+Unless absolutely necessary.
+
+---
+
+### Variable Usage
+
+Create variables **only when reused or improving readability**.
+
+Avoid wrapping simple values used once.
+
+**Bad:**
+
+```tsx
+const imgSrc = "https://example.com/avatar.png";
+<img src={imgSrc} />;
+```
+
+**Preferred:**
+
+```tsx
+<img src="https://example.com/avatar.png" />
+```
+
+---
+
+## State Management
+
+- Keep state **close to where it is used**
+- Avoid unnecessary **global state**
+
+---
+
+## SVG Usage Rules
+
+### Rendering
+
+All SVGs must use the **react-inlinesvg** library.
+
+```tsx
+import SVG from "react-inlinesvg";
+```
+
+---
+
+### Do Not Use `<img>` for SVG
+
+Never render SVG icons using:
+
+```tsx
+<img src="/assets/icon.svg" />
+```
+
+Using `react-inlinesvg` allows Tailwind classes to control:
+
+- color
+- size
+
+---
+
+### Do Not Inline Raw SVG
+
+Avoid placing raw SVG markup directly inside JSX.
+
+**Bad:**
+
+```tsx
+<svg>
+  <path d="..." />
+</svg>
+```
+
+Instead:
+
+- store SVG files in `/public/assets/`
+- load them using `react-inlinesvg`
+
+---
+
+## Design Implementation (Accuracy Policy)
+
+### 90–95% Rule
+
+If a complex visual effect cannot be reproduced with **~90–95% accuracy**, skip the effect rather than implementing a poor approximation.
+
+Examples of complex effects:
+
+- glow effects
+- shader-like button lighting
+- complex gradients
+- layered overlays
+- advanced blur masks
+
+---
+
+### Reporting Skipped Effects
+
+If a visual effect is skipped, clearly document it in the **PR or task notes**.
+
+Example:
+
+```
+Skipped effects:
+- Glow effect on hero card
+- Gradient overlay on background image
+```
+
+---
+
+### Priority Order
+
+Even when effects are skipped, the following must remain accurate:
+
+- layout structure
+- spacing
+- typography
+- base colors
+
+---
+
+## TypeScript & Consistency
+
+### Strict Typing
+
+Always use strict TypeScript types.
+
+Avoid:
+
+```ts
+any;
+```
+
+---
+
+### Codebase Consistency
+
+When modifying code:
+
+- follow existing naming conventions
+- match existing file structures
+- avoid refactoring unrelated code
+- maintain consistency with existing components
+
+---
+
+## Architecture Context (Important)
+
+This project is part of the **Walrus Archive system**:
+
+- **Sui blockchain** → stores metadata (`Artifact`)
+- **Walrus storage** → stores immutable file content
+
+Each file is referenced by:
+
+- `blobId`
+- `quiltPatchId`
+- `endEpoch`
+
+Frontend responsibilities:
+
+- artifact submission (upload + metadata)
+- discovery (search, filter, browse)
+- artifact detail (download + verification)
+
+---
+
+## Key Product Concepts
+
+### Artifact
+
+A structured unit containing:
+
+- metadata (title, authors, topics, etc.)
+- files (stored on Walrus)
+
+Properties:
+
+- versioned (tree structure)
+- independently verifiable on-chain
+
+---
+
+### File Handling Rules
+
+- Files are uploaded as **Walrus quilts**
+- Never mutate file content
+- Never assume local persistence
+- Always rely on:
+  - `quiltPatchId` for retrieval
+  - `blobId` for on-chain reference
+
+---
+
+## Testing
+
+- Use **Jest**
+- Write tests for:
+  - utilities
+  - hooks
+  - critical logic
+
+---
+
+## General Guidelines
+
+1. Prefer **simple and predictable implementations**
+2. Avoid adding new dependencies unless necessary
+3. Use **existing utilities and patterns first**
+4. Prioritize **readability and maintainability**
+5. Keep components small and composable
+
+---
+
+## When in Doubt
+
+- Follow existing code patterns
+- Keep solutions minimal
+- Optimize for clarity over cleverness
diff --git a/frontend/app/components/Markdown/index.tsx b/frontend/app/components/Markdown/index.tsx
index 109860a..de86f68 100644
--- a/frontend/app/components/Markdown/index.tsx
+++ b/frontend/app/components/Markdown/index.tsx
@@ -6,35 +6,37 @@ interface MarkdownProps {
 
 export default ({ content }: MarkdownProps) => {
   return (
-    <Markdown
-      components={{
-        code: ({ children, className, ...props }) => {
-          const match = /language-(\w+)/.exec(className || "");
+    <div className=" text-[#BACAC4] whitespace-pre-line break-all">
+      <Markdown
+        components={{
+          code: ({ children, className, ...props }) => {
+            const match = /language-(\w+)/.exec(className || "");
 
-          // when array?, possible <li> inside <list>
-          const content = Array.isArray(children)
-            ? children.join("")
-            : String(children);
+            // when array?, possible <li> inside <list>
+            const content = Array.isArray(children)
+              ? children.join("")
+              : String(children);
 
-          const isSpecialBlock = /[┌┐└┘│─]/.test(content);
+            const isSpecialBlock = /[┌┐└┘│─]/.test(content);
+
+            if (match || isSpecialBlock) {
+              return (
+                <div className="p-4 bg-[#191F2D] border border-white/12 whitespace-pre-wrap rounded-sm">
+                  <code {...props}>{children}</code>
+                </div>
+              );
+            }
 
-          if (match || isSpecialBlock) {
             return (
-              <div className="p-4 bg-[#191F2D] border border-white/12 rounded-sm">
-                <code {...props}>{children}</code>
-              </div>
+              <code className="bg-white/10" {...props}>
+                {children}
+              </code>
             );
-          }
-
-          return (
-            <code className="bg-white/10" {...props}>
-              {children}
-            </code>
-          );
-        },
-      }}
-    >
-      {content}
-    </Markdown>
+          },
+        }}
+      >
+        {content}
+      </Markdown>
+    </div>
   );
 };
diff --git a/frontend/app/components/ui/drawer.tsx b/frontend/app/components/ui/drawer.tsx
new file mode 100644
index 0000000..738ad92
--- /dev/null
+++ b/frontend/app/components/ui/drawer.tsx
@@ -0,0 +1,155 @@
+import { VisuallyHidden } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={tv({
+        base: [
+          "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        ],
+      })({
+        className,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={tv({
+          base: [
+            "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          ],
+        })({
+          className,
+        })}
+        {...props}
+      >
+        <VisuallyHidden.Root>
+          <DrawerTitle />
+        </VisuallyHidden.Root>
+
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={tv({
+        base: [
+          "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        ],
+      })({
+        className,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={tv({
+        base: ["mt-auto flex flex-col gap-2 p-4"],
+      })({
+        className,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={tv({
+        base: ["text-base font-medium text-foreground"],
+      })({
+        className,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={tv({
+        base: ["text-sm text-muted-foreground"],
+      })({
+        className,
+      })}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/frontend/app/hook/useDownloadFile.ts b/frontend/app/hook/useDownloadFile.ts
new file mode 100644
index 0000000..bb7b322
--- /dev/null
+++ b/frontend/app/hook/useDownloadFile.ts
@@ -0,0 +1,110 @@
+import graphqlApp from "app/services/graphql-app";
+import {
+  useIncrementDownloadMutation,
+  type ArtifactFile,
+} from "app/services/graphql-app/generated";
+import { downloadFileWithBlob } from "app/utils";
+import utilsWalrus from "app/utils/utils.walrus";
+import JSZip from "jszip";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export default () => {
+  const [downloading, setDownloading] = useState<string>();
+
+  const incrementDownload = useIncrementDownloadMutation(graphqlApp.client);
+
+  const downloadZip = async (params: {
+    files: ArtifactFile[];
+    name: string;
+    rootId: string;
+    onRefetch?: () => void;
+  }) => {
+    try {
+      setDownloading("download");
+
+      const zip = new JSZip();
+
+      await Promise.all(
+        params.files.map(async (meta) => {
+          const request = await fetch(
+            utilsWalrus.getQuiltPatchId(meta.patchId),
+          );
+
+          if (!request.ok) {
+            throw new Error(`Download failed for ${meta.name}`);
+          }
+
+          const blob = await request.blob();
+
+          zip.file(meta.name, blob);
+        }),
+      );
+
+      const zipBlob = await zip.generateAsync({
+        type: "blob",
+      });
+
+      downloadFileWithBlob(zipBlob, "application/zip", params.name);
+
+      incrementDownload.mutate(
+        {
+          rootId: params.rootId,
+        },
+        {
+          onSuccess: params?.onRefetch,
+        },
+      );
+    } catch (error) {
+      toast.error(JSON.stringify(error, null, 4));
+    } finally {
+      setDownloading(undefined);
+    }
+  };
+
+  const downloadFile = async (params: {
+    file: ArtifactFile;
+    rootId: string;
+    onRefetch?: () => void;
+  }) => {
+    try {
+      setDownloading(params.file.patchId);
+
+      const request = await fetch(
+        utilsWalrus.getQuiltPatchId(params.file.patchId),
+      );
+
+      if (!request.ok) {
+        throw new Error(`Download failed for ${params.file.name}`);
+      }
+
+      downloadFileWithBlob(
+        await request.blob(),
+        params.file.mimeType,
+        params.file.name,
+      );
+
+      incrementDownload.mutate(
+        {
+          rootId: params.rootId,
+        },
+        {
+          onSuccess: params?.onRefetch,
+        },
+      );
+    } catch (error) {
+      console.log(error);
+
+      toast.error(JSON.stringify(error, null, 4));
+    } finally {
+      setDownloading(undefined);
+    }
+  };
+
+  return {
+    downloadZip,
+    downloadFile,
+
+    downloading,
+  };
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileCSV.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileCSV/index.tsx
similarity index 100%
rename from frontend/app/layout/Artifact/ArtifactFile/ArtifactFileCSV.tsx
rename to frontend/app/layout/Artifact/ArtifactFile/ArtifactFileCSV/index.tsx
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileFallback/index.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileFallback/index.tsx
new file mode 100644
index 0000000..79234ff
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileFallback/index.tsx
@@ -0,0 +1,42 @@
+import Spinner from "app/components/Spinner";
+import Stack from "app/components/Stack";
+import Typography from "app/components/Typography";
+import useDownloadFile from "app/hook/useDownloadFile";
+import type { ArtifactFile } from "app/services/graphql-app/generated";
+import FilesLine from "public/assets/line/files.svg";
+
+interface ArtifactFileFallbackProps {
+  file: ArtifactFile;
+  rootId: string;
+  onRefetch: () => void;
+}
+
+export default ({ file, rootId, onRefetch }: ArtifactFileFallbackProps) => {
+  const { downloadFile, downloading } = useDownloadFile();
+
+  return (
+    <Stack className="gap-4 text-[#BACAC4] border border-[#352F2F] py-16">
+      <FilesLine className="size-8" />
+
+      <Stack className="gap-0.5">
+        <Typography>This file is not supported for preview.</Typography>
+
+        <button
+          disabled={!!downloading?.length}
+          className="flex items-center gap-2"
+          onClick={async () => {
+            return await downloadFile({
+              file,
+              rootId,
+              onRefetch,
+            });
+          }}
+        >
+          {downloading?.length ? <Spinner /> : null}
+
+          <Typography className="text-blue-500">raw</Typography>
+        </button>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList.tsx
deleted file mode 100644
index 9fb6c68..0000000
--- a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import DownloadLine from "public/assets/line/download.svg";
-import FilesLine from "public/assets/line/files.svg";
-import FolderLine from "public/assets/line/folder.svg";
-import Hstack from "app/components/Hstack";
-import Typography from "app/components/Typography";
-import Center from "app/components/Center";
-import { tv } from "tailwind-variants";
-import { type ArtifactFile } from "app/services/graphql-app/generated";
-import { useIncrementDownloadMutation } from "app/services/graphql-app/generated";
-import graphqlApp from "app/services/graphql-app";
-import { downloadFileWithBlob, formatBytesSizes } from "app/utils";
-import utilsWalrus from "app/utils/utils.walrus";
-import { useRef, useState } from "react";
-import useClickOutside from "app/hook/useClickOutside";
-import Spinner from "app/components/Spinner";
-import { extension } from "mime-types";
-
-interface ArtifactFileListProps {
-  files: ArtifactFile[];
-  rootId: string;
-  onRefetch: () => void;
-}
-
-export default ({ files, rootId, onRefetch }: ArtifactFileListProps) => {
-  const [loading, setLoading] = useState<string>();
-  const incrementDownload = useIncrementDownloadMutation(graphqlApp.client);
-
-  const fileRef = useRef<HTMLButtonElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useClickOutside(containerRef, () => {
-    removeSelectedFile();
-  });
-
-  const addSelectedFile = (currentTarget: EventTarget & HTMLButtonElement) => {
-    fileRef.current = currentTarget;
-    fileRef.current?.classList.add("isSelected");
-  };
-
-  const removeSelectedFile = () => {
-    if (fileRef.current?.classList.contains("isSelected")) {
-      fileRef.current?.classList.remove("isSelected");
-    }
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className="bg-[#080E1B] border border-[#352F2F] rounded-xl w-full"
-    >
-      <Center
-        className={tv({
-          base: [
-            "justify-between",
-            "bg-[#272B33]/65",
-            "border-b border-inherit",
-            "px-9 h-10",
-            "text-xs font-bold",
-          ],
-        })()}
-      >
-        <Typography font="jetbrains">NAME</Typography>
-
-        <Typography font="jetbrains">SIZE</Typography>
-      </Center>
-
-      {files.map((meta) => {
-        return (
-          <button
-            key={meta.patchId}
-            disabled={loading === meta.patchId}
-            className={tv({
-              base: [
-                "flex gap-6 justify-between",
-                "text-[#BACAC4] text-xs",
-                "w-full h-10 px-3.5",
-                "not-last:border-b not-last:border-inherit",
-                "hover:bg-[#272B33]/65",
-
-                "[&.isSelected]:bg-[#272B33]",
-              ],
-            })()}
-            onClick={({ currentTarget }) => {
-              removeSelectedFile();
-              addSelectedFile(currentTarget);
-            }}
-            onDoubleClick={() => {
-              removeSelectedFile();
-
-              alert(`preview ${meta.mimeType}`);
-            }}
-          >
-            <Hstack>
-              {extension(meta.mimeType) === "zip" ? (
-                <FolderLine />
-              ) : (
-                <FilesLine />
-              )}
-
-              <Typography
-                font="jetbrains"
-                className="text-left line-clamp-1 flex-1"
-              >
-                {meta.name}
-              </Typography>
-            </Hstack>
-
-            <Hstack className="whitespace-pre">
-              <Typography>{formatBytesSizes(meta.sizeBytes)}</Typography>
-
-              {loading === meta.patchId ? (
-                <Spinner />
-              ) : (
-                <DownloadLine
-                  onClick={async (event) => {
-                    try {
-                      event.stopPropagation();
-
-                      setLoading(meta.patchId);
-
-                      const request = await fetch(
-                        utilsWalrus.getQuiltPatchId(meta.patchId),
-                      );
-
-                      if (!request.ok) {
-                        throw new Error(`Download failed for ${meta.name}`);
-                      }
-
-                      const blob = await request.blob();
-
-                      downloadFileWithBlob(blob, meta.mimeType, meta.name);
-
-                      incrementDownload.mutate(
-                        {
-                          rootId,
-                        },
-                        {
-                          onSuccess: onRefetch,
-                        },
-                      );
-                    } finally {
-                      setLoading(undefined);
-                    }
-                  }}
-                />
-              )}
-            </Hstack>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList/index.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList/index.tsx
new file mode 100644
index 0000000..68649a0
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileList/index.tsx
@@ -0,0 +1,125 @@
+import DownloadLine from "public/assets/line/download.svg";
+import FilesLine from "public/assets/line/files.svg";
+import FolderLine from "public/assets/line/folder.svg";
+import Hstack from "app/components/Hstack";
+import Typography from "app/components/Typography";
+import Center from "app/components/Center";
+import { tv } from "tailwind-variants";
+import { type ArtifactFile } from "app/services/graphql-app/generated";
+import { formatBytesSizes } from "app/utils";
+import { type HTMLAttributes } from "react";
+import Spinner from "app/components/Spinner";
+import { extension } from "mime-types";
+import { Link } from "react-router";
+import useDownloadFile from "app/hook/useDownloadFile";
+
+interface ArtifactFileListProps {
+  files: ArtifactFile[];
+  rootId: string | undefined;
+  suiObjectId: string;
+  select?: string;
+  onRefetch: () => void;
+  variant?: HTMLAttributes<HTMLDivElement>;
+}
+
+export default ({
+  files,
+  rootId,
+  suiObjectId,
+  select,
+  onRefetch,
+  variant,
+}: ArtifactFileListProps) => {
+  const { downloadFile, downloading } = useDownloadFile();
+
+  return (
+    <div
+      {...variant}
+      className={tv({
+        base: ["bg-[#080E1B] border border-[#352F2F] rounded-xl w-full"],
+      })({
+        className: variant?.className,
+      })}
+    >
+      <Center
+        className={tv({
+          base: [
+            "justify-between",
+            "bg-[#272B33]/65",
+            "border-b border-inherit",
+            "px-9 h-10",
+            "text-xs font-bold",
+          ],
+        })()}
+      >
+        <Typography font="jetbrains">NAME</Typography>
+
+        <Typography font="jetbrains">SIZE</Typography>
+      </Center>
+
+      {files.map((meta) => {
+        const isSelectedFile = select === meta.name;
+        const isLoading = downloading === meta.patchId;
+
+        return (
+          <Link
+            key={meta.patchId}
+            to={`/artifact/${suiObjectId}?file=${meta.name}`}
+            onClick={(event) => {
+              if (isLoading) event.preventDefault();
+            }}
+            className={tv({
+              base: [
+                isSelectedFile && "bg-[#272B33]/65",
+
+                "flex gap-6 justify-between",
+                "text-[#BACAC4] text-xs",
+                "w-full h-10 px-3.5",
+                "not-last:border-b not-last:border-inherit",
+                "hover:bg-[#272B33]/65",
+              ],
+            })()}
+          >
+            <Hstack className="min-w-0 flex-1">
+              {isSelectedFile && <div className="bg-blue-400 h-full w-0.5" />}
+
+              {extension(meta.mimeType) === "zip" ? (
+                <FolderLine />
+              ) : (
+                <FilesLine />
+              )}
+
+              <Typography
+                font="jetbrains"
+                className="flex-1 truncate text-left"
+              >
+                {meta.name}
+              </Typography>
+            </Hstack>
+
+            <Hstack className="whitespace-pre">
+              <Typography>{formatBytesSizes(meta.sizeBytes)}</Typography>
+
+              {isLoading ? (
+                <Spinner />
+              ) : (
+                <DownloadLine
+                  onClick={async (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+
+                    return await downloadFile({
+                      file: meta,
+                      rootId: rootId || suiObjectId,
+                      onRefetch,
+                    });
+                  }}
+                />
+              )}
+            </Hstack>
+          </Link>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown/index.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown/index.tsx
new file mode 100644
index 0000000..c8e34a0
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown/index.tsx
@@ -0,0 +1,31 @@
+import { Skeleton } from "app/components/ui/skeleton";
+import Vstack from "app/components/Vstack";
+import type { ArtifactFile } from "app/services/graphql-app/generated";
+
+import Markdown from "app/components/Markdown";
+import useGetFileByPatchId from "app/hook/useGetFileByPatchId";
+
+interface ArtifactFileMarkdownProps {
+  file: ArtifactFile;
+}
+
+export default ({ file }: ArtifactFileMarkdownProps) => {
+  const { data, isError, isLoading } = useGetFileByPatchId(file, "text");
+
+  if (isLoading) {
+    return (
+      <Vstack className="w-full p-3.5 border border-[#352F2F] rounded-xl">
+        <Skeleton className="min-h-10" />
+        <Skeleton className="min-h-56" />
+      </Vstack>
+    );
+  }
+
+  if (!data?.length || isError) return null;
+
+  return (
+    <div className="w-full p-3.5 border border-[#352F2F] rounded-xl overflow-scroll">
+      <Markdown content={data} />
+    </div>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePDF.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePDF/index.tsx
similarity index 100%
rename from frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePDF.tsx
rename to frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePDF/index.tsx
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreview404.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreview404.tsx
new file mode 100644
index 0000000..7d5dc56
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreview404.tsx
@@ -0,0 +1,35 @@
+import Stack from "app/components/Stack";
+import Typography from "app/components/Typography";
+import { Link } from "react-router";
+import WarnLine from "public/assets/line/warn.svg";
+
+interface ArtifactFilePreview404Props {
+  select: string;
+  suiObjectId: string;
+}
+
+export default ({ select, suiObjectId }: ArtifactFilePreview404Props) => {
+  return (
+    <Stack className="gap-4 text-[#BACAC4] border border-[#352F2F] py-16">
+      <WarnLine className="size-8" />
+
+      <Stack className="gap-0.5">
+        <Typography>404 - page not found</Typography>
+
+        <Typography>
+          the list file does not contain the path&nbsp;
+          <Typography variant="span" className="text-white font-medium">
+            {select}
+          </Typography>
+        </Typography>
+      </Stack>
+
+      <Link
+        to={`/artifact/${suiObjectId}`}
+        className="bg-green-500/65 text-white py-2 px-4 rounded-sm"
+      >
+        Return to the artifact
+      </Link>
+    </Stack>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewDirectory.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewDirectory.tsx
new file mode 100644
index 0000000..161681b
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewDirectory.tsx
@@ -0,0 +1,22 @@
+import Hstack from "app/components/Hstack";
+import Typography from "app/components/Typography";
+import { Link } from "react-router";
+
+interface ArtifactFilePreviewDirectoryProps {
+  suiObjectId: string;
+  name: string;
+}
+
+export default ({ suiObjectId, name }: ArtifactFilePreviewDirectoryProps) => {
+  return (
+    <Hstack className="gap-1.5 text-sm">
+      <Link to={`/artifact/${suiObjectId}`}>
+        <Typography className="text-blue-400">Root</Typography>
+      </Link>
+
+      <Typography className="text-white/65">/</Typography>
+
+      <Typography className="text-white/65">{name}</Typography>
+    </Hstack>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewExpand.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewExpand.tsx
new file mode 100644
index 0000000..1533301
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/ArtifactFilePreviewExpand.tsx
@@ -0,0 +1,40 @@
+import { Drawer, DrawerContent, DrawerTrigger } from "app/components/ui/drawer";
+import ArrowExpandLine from "public/assets/line/arrow-expand.svg";
+import ArtifactFileList from "../ArtifactFileList";
+import type { ArtifactFilePreviewProps } from ".";
+import { useEffect, useState } from "react";
+
+export default ({
+  files,
+  rootId,
+  suiObjectId,
+  select,
+  onRefetch,
+}: ArtifactFilePreviewProps) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [select]);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} direction="left">
+      <DrawerTrigger className="size-8 text-white/80 bg-white/14 rounded-sm min-[992px]:hidden">
+        <ArrowExpandLine className="mx-auto size-3.5" />
+      </DrawerTrigger>
+
+      <DrawerContent className="px-0 bg-background border-[#352F2F]">
+        <ArtifactFileList
+          files={files}
+          rootId={rootId}
+          suiObjectId={suiObjectId}
+          select={select}
+          onRefetch={onRefetch}
+          variant={{
+            className: "overflow-y-auto border-none",
+          }}
+        />
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/index.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/index.tsx
new file mode 100644
index 0000000..2ad8efe
--- /dev/null
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFilePreview/index.tsx
@@ -0,0 +1,109 @@
+import type { ArtifactFile } from "app/services/graphql-app/generated";
+import ArtifactFileList from "../ArtifactFileList";
+import ArtifactFilePDF from "../ArtifactFilePDF";
+import ArtifactFileMarkdown from "../ArtifactFileMarkdown";
+import utilsWalrus from "app/utils/utils.walrus";
+import ArtifactFileSVG from "../ArtifactFileSVG";
+import ArtifactFileCSV from "../ArtifactFileCSV";
+import Flex from "app/components/Flex";
+import { renderSectionFile } from "app/utils";
+
+import ArtifactFilePreviewExpand from "./ArtifactFilePreviewExpand";
+import ArtifactFilePreview404 from "./ArtifactFilePreview404";
+import ArtifactFilePreviewDirectory from "./ArtifactFilePreviewDirectory";
+import ArtifactFileFallback from "../ArtifactFileFallback";
+
+export interface ArtifactFilePreviewProps {
+  files: ArtifactFile[];
+  rootId: string | undefined;
+  suiObjectId: string;
+  select: string;
+  onRefetch: () => void;
+}
+
+export default ({
+  files,
+  rootId,
+  suiObjectId,
+  select,
+  onRefetch,
+}: ArtifactFilePreviewProps) => {
+  const getSelectFile = files.find((file) => file.name === select);
+
+  return (
+    <Flex className="gap-6 p-4 flex-col min-[992px]:flex-row">
+      <div className="min-w-96 max-w-96 min-h-dvh hidden min-[992px]:block border border-[#352F2F]">
+        <ArtifactFileList
+          files={files}
+          rootId={rootId}
+          suiObjectId={suiObjectId}
+          select={select}
+          onRefetch={onRefetch}
+          variant={{
+            className: `sticky top-18 max-h-[calc(100dvh-4.5rem-1.5rem)] overflow-y-auto border-none`,
+          }}
+        />
+      </div>
+
+      <div className="flex-1">
+        {(function () {
+          if (!getSelectFile) {
+            return (
+              <ArtifactFilePreview404
+                select={select}
+                suiObjectId={suiObjectId}
+              />
+            );
+          }
+
+          return (
+            <>
+              <Flex className="gap-3 h-12 items-center sticky top-18 bg-background">
+                <ArtifactFilePreviewExpand
+                  files={files}
+                  rootId={rootId}
+                  suiObjectId={suiObjectId}
+                  select={select}
+                  onRefetch={onRefetch}
+                />
+
+                <ArtifactFilePreviewDirectory
+                  suiObjectId={suiObjectId}
+                  name={getSelectFile.name}
+                />
+              </Flex>
+
+              {renderSectionFile(getSelectFile.mimeType, {
+                csv: <ArtifactFileCSV file={getSelectFile} />,
+                svg: <ArtifactFileSVG file={getSelectFile} />,
+                image: (
+                  <img
+                    src={utilsWalrus.getQuiltPatchId(getSelectFile.patchId)}
+                    alt={getSelectFile.name}
+                    className="aspect-video object-cover"
+                  />
+                ),
+                video: (
+                  <video
+                    src={utilsWalrus.getQuiltPatchId(getSelectFile.patchId)}
+                    controls={true}
+                    className="aspect-video object-cover"
+                  />
+                ),
+                markdown: <ArtifactFileMarkdown file={getSelectFile} />,
+                pdf: <ArtifactFilePDF file={getSelectFile} />,
+                fallback: (
+                  <ArtifactFileFallback
+                    file={getSelectFile}
+                    rootId={rootId || suiObjectId}
+                    onRefetch={onRefetch}
+                  />
+                ),
+              })}
+            </>
+          );
+        })()}
+      </div>
+    </Flex>
+  );
+};
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileReadme/index.tsx
similarity index 87%
rename from frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown.tsx
rename to frontend/app/layout/Artifact/ArtifactFile/ArtifactFileReadme/index.tsx
index b991528..b8f505d 100644
--- a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileMarkdown.tsx
+++ b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileReadme/index.tsx
@@ -8,11 +8,11 @@ import OpenBookLine from "public/assets/line/open-book.svg";
 import Markdown from "app/components/Markdown";
 import useGetFileByPatchId from "app/hook/useGetFileByPatchId";
 
-interface ArtifactFileMarkdownProps {
+interface ArtifactFileReadmeProps {
   file: ArtifactFile;
 }
 
-export default ({ file }: ArtifactFileMarkdownProps) => {
+export default ({ file }: ArtifactFileReadmeProps) => {
   const { data, isError, isLoading } = useGetFileByPatchId(file, "text");
 
   if (isLoading) {
@@ -34,7 +34,7 @@ export default ({ file }: ArtifactFileMarkdownProps) => {
         <Typography className="text-sm">{file.name}</Typography>
       </Hstack>
 
-      <div className="p-3.5 text-[#BACAC4] whitespace-pre-line break-all">
+      <div className="p-3.5">
         <Markdown content={data} />
       </div>
     </div>
diff --git a/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileSVG.tsx b/frontend/app/layout/Artifact/ArtifactFile/ArtifactFileSVG/index.tsx
similarity index 100%
rename from frontend/app/layout/Artifact/ArtifactFile/ArtifactFileSVG.tsx
rename to frontend/app/layout/Artifact/ArtifactFile/ArtifactFileSVG/index.tsx
diff --git a/frontend/app/layout/Artifact/ArtifactStatistic/index.tsx b/frontend/app/layout/Artifact/ArtifactStatistic/index.tsx
index c803445..6984ffc 100644
--- a/frontend/app/layout/Artifact/ArtifactStatistic/index.tsx
+++ b/frontend/app/layout/Artifact/ArtifactStatistic/index.tsx
@@ -1,4 +1,3 @@
-import JSZip from "jszip";
 import DownloadLine from "public/assets/line/download.svg";
 import Hstack from "app/components/Hstack";
 import Typography from "app/components/Typography";
@@ -9,21 +8,13 @@ import EyesLine from "public/assets/line/eyes.svg";
 import HeartLine from "public/assets/line/heart.svg";
 import ShareLine from "public/assets/line/share.svg";
 import type { ArtifactQuery } from "app/services/graphql-app/generated";
-import {
-  useIncrementViewMutation,
-  useIncrementDownloadMutation,
-} from "app/services/graphql-app/generated";
+import { useIncrementViewMutation } from "app/services/graphql-app/generated";
 import graphqlApp from "app/services/graphql-app";
-import utilsWalrus from "app/utils/utils.walrus";
-import {
-  downloadFileWithBlob,
-  formatCount,
-  formatGrammarCount,
-} from "app/utils";
-import { useState } from "react";
+import { formatCount, formatGrammarCount } from "app/utils";
 import useMount from "app/hook/useMount";
 import Spinner from "app/components/Spinner";
 import { useCurrentAccount } from "@mysten/dapp-kit-react";
+import useDownloadFile from "app/hook/useDownloadFile";
 
 interface ArtifactStatisticProps {
   artifact: NonNullable<ArtifactQuery["artifact"]>;
@@ -31,25 +22,25 @@ interface ArtifactStatisticProps {
 }
 
 export default ({ artifact, onRefetch }: ArtifactStatisticProps) => {
-  const [loading, setLoading] = useState<string>();
   const currentAccount = useCurrentAccount();
 
   const incrementView = useIncrementViewMutation(graphqlApp.client);
-  const incrementDownload = useIncrementDownloadMutation(graphqlApp.client);
 
-  const effectiveRootId = artifact.rootId ?? artifact.suiObjectId;
+  const rootId = artifact.rootId ?? artifact.suiObjectId;
+
+  const { downloadZip, downloading } = useDownloadFile();
 
   useMount(() => {
     incrementView.mutate(
       {
-        rootId: effectiveRootId,
+        rootId,
         viewerAddress: currentAccount!.address,
       },
       {
         onSuccess: onRefetch,
       },
     );
-  }, [effectiveRootId, currentAccount?.address]);
+  }, [rootId, currentAccount?.address]);
 
   return (
     <Stack
@@ -64,56 +55,20 @@ export default ({ artifact, onRefetch }: ArtifactStatisticProps) => {
       <Vstack className="w-full gap-2.5 text-sm font-bold">
         <button
           className="text-[#00382E] rounded-lg h-10 flex gap-2 items-center justify-center"
-          disabled={!!loading?.length}
+          disabled={!!downloading?.length}
           style={{
             background: "linear-gradient(135deg, #46F1CF 0%, #00D4B4 100%)",
           }}
           onClick={async () => {
-            try {
-              setLoading("download");
-
-              const zip = new JSZip();
-
-              await Promise.all(
-                artifact.files.map(async (meta) => {
-                  const request = await fetch(
-                    utilsWalrus.getQuiltPatchId(meta.patchId),
-                  );
-
-                  if (!request.ok) {
-                    throw new Error(`Download failed for ${meta.name}`);
-                  }
-
-                  const blob = await request.blob();
-
-                  zip.file(meta.name, blob);
-                }),
-              );
-
-              const zipBlob = await zip.generateAsync({
-                type: "blob",
-              });
-
-              downloadFileWithBlob(
-                zipBlob,
-                "application/zip",
-                `artifact-${artifact.createdAt}`,
-              );
-
-              incrementDownload.mutate(
-                {
-                  rootId: effectiveRootId,
-                },
-                {
-                  onSuccess: onRefetch,
-                },
-              );
-            } finally {
-              setLoading(undefined);
-            }
+            return await downloadZip({
+              files: artifact.files,
+              name: `artifact-${artifact.createdAt}`,
+              rootId,
+              onRefetch,
+            });
           }}
         >
-          {loading?.length ? <Spinner /> : <DownloadLine />}
+          {downloading?.length ? <Spinner /> : <DownloadLine />}
 
           <Typography font="grotesk">DOWNLOAD ARTIFACT</Typography>
         </button>
diff --git a/frontend/app/layout/Artifact/index.tsx b/frontend/app/layout/Artifact/index.tsx
index bb579ad..4b689f3 100644
--- a/frontend/app/layout/Artifact/index.tsx
+++ b/frontend/app/layout/Artifact/index.tsx
@@ -18,6 +18,10 @@ import useGetConfig, { contributorConfigEnum } from "app/hook/useGetConfig";
 import { useCurrentAccount } from "@mysten/dapp-kit-react";
 import { useSearchParams } from "react-router";
 import ArtifactRelease from "./ArtifactRelease";
+import { renderSectionFile } from "app/utils";
+import ArtifactFileReadme from "./ArtifactFile/ArtifactFileReadme";
+import ArtifactFilePreview from "./ArtifactFile/ArtifactFilePreview";
+import ArtifactFileFallback from "./ArtifactFile/ArtifactFileFallback";
 
 const ArtifactFileCSV = lazy(() => import("./ArtifactFile/ArtifactFileCSV"));
 
@@ -38,6 +42,8 @@ export default ({ loaderData, params }: Route.ComponentProps) => {
     },
   );
 
+  const getSelectFile = searchParams?.get?.("file");
+
   const getSingleFile = artifact.data?.artifact?.files?.[0];
 
   const getREADME = artifact.data?.artifact?.files?.find?.(
@@ -68,6 +74,18 @@ export default ({ loaderData, params }: Route.ComponentProps) => {
     );
   }
 
+  if (getSelectFile?.length) {
+    return (
+      <ArtifactFilePreview
+        files={artifact.data.artifact.files}
+        rootId={artifact.data.artifact?.rootId}
+        suiObjectId={artifact.data.artifact.suiObjectId}
+        select={getSelectFile}
+        onRefetch={artifact.refetch}
+      />
+    );
+  }
+
   return (
     <Flex
       className={tv({
@@ -84,56 +102,53 @@ export default ({ loaderData, params }: Route.ComponentProps) => {
         {(function () {
           if (!artifact.data.artifact?.files?.length) return null;
 
-          if (artifact.data.artifact.files.length === 1) {
-            if (getSingleFile?.mimeType === "text/csv") {
-              return <ArtifactFileCSV file={getSingleFile} />;
-            }
-
-            if (getSingleFile?.mimeType === "image/svg+xml") {
-              return <ArtifactFileSVG file={getSingleFile} />;
-            }
-
-            if (getSingleFile?.mimeType?.startsWith?.("image")) {
-              return (
+          if (artifact.data.artifact.files.length === 1 && getSingleFile) {
+            return renderSectionFile(getSingleFile.mimeType, {
+              csv: <ArtifactFileCSV file={getSingleFile} />,
+              svg: <ArtifactFileSVG file={getSingleFile} />,
+              image: (
                 <img
                   src={utilsWalrus.getQuiltPatchId(getSingleFile.patchId)}
                   alt={getSingleFile.name}
                   className="aspect-video object-cover"
                 />
-              );
-            }
-
-            if (getSingleFile?.mimeType?.startsWith?.("video")) {
-              return (
+              ),
+              video: (
                 <video
                   src={utilsWalrus.getQuiltPatchId(getSingleFile.patchId)}
                   controls={true}
                   className="aspect-video object-cover"
                 />
-              );
-            }
-
-            if (getSingleFile?.mimeType === "text/markdown") {
-              return <ArtifactFileMarkdown file={getSingleFile} />;
-            }
-
-            if (getSingleFile?.mimeType === "application/pdf") {
-              return <ArtifactFilePDF file={getSingleFile} />;
-            }
+              ),
+              markdown: getREADME ? (
+                <ArtifactFileReadme file={getREADME} />
+              ) : (
+                <ArtifactFileMarkdown file={getSingleFile} />
+              ),
+              pdf: <ArtifactFilePDF file={getSingleFile} />,
+              fallback: (
+                <ArtifactFileFallback
+                  file={getSingleFile}
+                  rootId={
+                    artifact.data.artifact?.rootId ||
+                    artifact.data.artifact.suiObjectId
+                  }
+                  onRefetch={artifact.refetch}
+                />
+              ),
+            });
           }
 
           return (
             <>
               <ArtifactFileList
                 files={artifact.data.artifact.files}
-                rootId={
-                  artifact.data.artifact?.rootId ||
-                  artifact.data.artifact.suiObjectId
-                }
+                rootId={artifact.data.artifact?.rootId}
+                suiObjectId={artifact.data.artifact.suiObjectId}
                 onRefetch={artifact.refetch}
               />
 
-              {getREADME && <ArtifactFileMarkdown file={getREADME} />}
+              {getREADME && <ArtifactFileReadme file={getREADME} />}
             </>
           );
         })()}
diff --git a/frontend/app/utils/index.tsx b/frontend/app/utils/index.tsx
index e4de9d8..1c7d08f 100644
--- a/frontend/app/utils/index.tsx
+++ b/frontend/app/utils/index.tsx
@@ -3,6 +3,7 @@ import { SUI_DECIMALS } from "@mysten/sui/utils";
 import utilsConstants from "./utils.constants";
 import utilsSui from "./utils.sui";
 import { extension } from "mime-types";
+import type { JSX } from "react";
 
 export const waitForSeconds = async (cb?: () => void, seconds?: number) => {
   await new Promise((resolve) => {
@@ -158,7 +159,7 @@ export const downloadFileWithBlob = (
   fileName: string,
 ) => {
   const blobUrl = URL.createObjectURL(blob);
-  const type = `.${extension(mimeType)}`; // convert mime to correct type, image/png => png
+  const type = `${extension(mimeType)}`; // convert mime to correct type, image/png => png
   const name = fileName.replace(type, ""); // no duplicate name, banner.png => banner
 
   const anchor = document.createElement("a");
@@ -228,3 +229,27 @@ export const formatGrammarCount = (text: string, length: number) => {
 
   return text;
 };
+
+export const renderSectionFile = (
+  mimeType: string,
+  children: Partial<
+    Record<
+      "csv" | "svg" | "image" | "video" | "markdown" | "pdf" | "fallback",
+      JSX.Element
+    >
+  >,
+): JSX.Element | undefined => {
+  if (mimeType === "text/csv") return children.csv;
+
+  if (mimeType === "image/svg+xml") return children.svg;
+
+  if (mimeType?.startsWith?.("image")) return children.image;
+
+  if (mimeType?.startsWith?.("video")) return children.video;
+
+  if (mimeType === "text/markdown") return children.markdown;
+
+  if (mimeType === "application/pdf") return children.pdf;
+
+  if (mimeType === "fallback") return children.fallback;
+};
diff --git a/frontend/package.json b/frontend/package.json
index 74343a6..51a8230 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,8 @@
     "react-router": "7.12.0",
     "shadcn": "^4.1.0",
     "sonner": "^2.0.7",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.2.2",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index b7594b5..f64cdbc 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.2)
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     devDependencies:
       '@eslint/js':
         specifier: ^10.0.1
@@ -5869,6 +5872,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -12602,6 +12611,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
diff --git a/frontend/public/assets/line/arrow-expand.svg b/frontend/public/assets/line/arrow-expand.svg
new file mode 100644
index 0000000..bcb8de6
--- /dev/null
+++ b/frontend/public/assets/line/arrow-expand.svg
@@ -0,0 +1,25 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_118_1024)">
+    <path d="M9.71429 6.2857L15.4286 0.571411" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M10.8571 0.571411H15.4285V5.14284" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M6.2857 6.2857L0.571411 0.571411" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M5.14284 0.571411H0.571411V5.14284" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M9.71429 9.71423L15.4286 15.4285" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M10.8571 15.4286H15.4285V10.8572" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M6.2857 9.71423L0.571411 15.4285" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M5.14284 15.4286H0.571411V10.8572" stroke="currentColor" stroke-width="1.14286" stroke-linecap="round"
+      stroke-linejoin="round" />
+  </g>
+  <defs>
+    <clipPath id="clip0_118_1024">
+      <rect width="16" height="16" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/public/assets/line/warn.svg b/frontend/public/assets/line/warn.svg
new file mode 100644
index 0000000..5fa1b9d
--- /dev/null
+++ b/frontend/public/assets/line/warn.svg
@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_114_1002)">
+    <path
+      d="M7.99998 14.6667C11.6819 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6819 1.33337 7.99998 1.33337C4.31808 1.33337 1.33331 4.31814 1.33331 8.00004C1.33331 11.6819 4.31808 14.6667 7.99998 14.6667Z"
+      stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M8 5.33337V8.00004" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M8 10.6666H8.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+      stroke-linejoin="round" />
+  </g>
+  <defs>
+    <clipPath id="clip0_114_1002">
+      <rect width="16" height="16" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file