diff --git a/apps/web/public/locales/en.json b/apps/web/public/locales/en.json
index 9fb1aa0..b8c298d 100644
--- a/apps/web/public/locales/en.json
+++ b/apps/web/public/locales/en.json
@@ -17,6 +17,7 @@
       "search": "Search document...",
       "empty": "No documents found",
       "hint": "Drag and drop a document to upload",
+      "view": "View document",
       "delete": "Delete document",
       "download": "Download document",
       "columns": {
diff --git a/apps/web/public/locales/id.json b/apps/web/public/locales/id.json
index 51c4b81..1368c6b 100644
--- a/apps/web/public/locales/id.json
+++ b/apps/web/public/locales/id.json
@@ -17,6 +17,7 @@
       "search": "Cari dokumen...",
       "empty": "Tidak ada dokumen",
       "hint": "Seret dan lepas dokumen di sini untuk mengunggah",
+      "view": "Lihat dokumen",
       "delete": "Hapus dokumen",
       "download": "Unduh dokumen",
       "columns": {
diff --git a/apps/web/src/app/(app)/@admin/documents/table.tsx b/apps/web/src/app/(app)/@admin/documents/table.tsx
index 49b266f..b2a0c48 100644
--- a/apps/web/src/app/(app)/@admin/documents/table.tsx
+++ b/apps/web/src/app/(app)/@admin/documents/table.tsx
@@ -2,6 +2,7 @@
 
 import type { Document } from "@/server/api/routers/documents/documents.schema";
 import React, { useMemo } from "react";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { api } from "@/trpc/react";
 import {
@@ -25,6 +26,7 @@ import {
 } from "@nextui-org/react";
 import moment from "moment";
 import { useTranslations } from "next-intl";
+import { IoOpenOutline } from "react-icons/io5";
 import { MdOutlineDownloadForOffline } from "react-icons/md";
 import { RiDeleteBin2Line } from "react-icons/ri";
 
@@ -110,6 +112,18 @@ export function DocumentsTable() {
         case "actions":
           return (
             <div className="flex items-center gap-2">
+              <Tooltip content={t("view")} color="default" className="p-2">
+                <Link href={`/api/documents/${file.id}`} target="_blank">
+                  <Button
+                    className="pointer-events-auto"
+                    isIconOnly
+                    variant="light"
+                    color="default"
+                  >
+                    <IoOpenOutline />
+                  </Button>
+                </Link>
+              </Tooltip>
               <Tooltip content={t("download")} color="primary" className="p-2">
                 <Button
                   className="pointer-events-auto"
diff --git a/apps/web/src/app/api/documents/[fileId]/route.ts b/apps/web/src/app/api/documents/[fileId]/route.ts
index 857cffc..04935a1 100644
--- a/apps/web/src/app/api/documents/[fileId]/route.ts
+++ b/apps/web/src/app/api/documents/[fileId]/route.ts
@@ -13,5 +13,19 @@ export async function GET(_: Request, context: { params: { fileId: string } }) {
   const res = await fetch(
     env.BACKEND_URL + "/files/download/" + context.params.fileId,
   );
-  return res;
+
+  if (!res.ok) {
+    return await res.json();
+  }
+
+  return new Response(await res.arrayBuffer(), {
+    headers: {
+      "Content-Type": "application/pdf",
+      "Content-Disposition":
+        res.headers
+          .get("Content-Disposition")
+          ?.replace("attachment", "inline") ??
+        'inline; filename="document.pdf"',
+    },
+  });
 }