diff --git a/src/widgets/detail/sertifikat.tsx b/src/widgets/detail/sertifikat.tsx
new file mode 100644
index 0000000..f913e67
--- /dev/null
+++ b/src/widgets/detail/sertifikat.tsx
@@ -0,0 +1,55 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { FileDown, Loader2 } from 'lucide-react';
+import React, { useState } from 'react';
+
+const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+export default function Sertifikat({ document_id }: { document_id: number }) {
+  const t = useTranslations();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    try {
+      const url = `${baseUrl}/documents/${document_id}/certificate/`;
+      const res = await fetch(url);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      window.open(objectUrl, '_blank');
+      URL.revokeObjectURL(objectUrl);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={loading}
+      className="
+        group relative inline-flex items-center gap-2.5
+        px-5 py-2.5 rounded-xl
+        bg-linear-to-br from-amber-400 to-amber-500
+        hover:from-amber-500 hover:to-amber-600
+        disabled:from-amber-300 disabled:to-amber-400
+        text-white font-semibold text-sm
+        shadow-md shadow-amber-200
+        hover:shadow-lg hover:shadow-amber-300
+        transition-all duration-200
+        active:scale-[0.97]
+        disabled:cursor-not-allowed disabled:scale-100
+      "
+    >
+      {loading ? (
+        <Loader2 size={16} className="animate-spin shrink-0" />
+      ) : (
+        <FileDown
+          size={16}
+          className="shrink-0 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+        />
+      )}
+      {loading ? '...' : t('upload')}
+    </button>
+  );
+}