diff --git a/bun.lock b/bun.lock
index f12a1c3..89096d4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "registry",
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
index d309c28..7a51eb8 100644
--- a/src/app/[id]/page.tsx
+++ b/src/app/[id]/page.tsx
@@ -145,12 +145,25 @@ const Pattern = ({ params }: { params: Promise<{ id: string }> }) => {
       blueprint.props.clientStatus === Status.Failed ||
       blueprint.props.serverStatus === Status.Failed
     ) {
+      const errorMessage = blueprint.props.clientError || blueprint.props.serverError;
       return (
         <div className="flex flex-col gap-1 rounded-3xl border border-grey-500 bg-white p-6 shadow-[2px_4px_2px_0px_rgba(0,0,0,0.02),_2px_3px_4.5px_0px_rgba(0,0,0,0.07)]">
           <h4 className="text-lg font-bold text-grey-800">Compilation Failed :(</h4>
           <p className="text-base font-medium text-grey-700">
-            The blueprint failed due to some technical reasons. Please recompile again.
+            {errorMessage
+              ? 'The blueprint compilation failed. See error details below.'
+              : 'The blueprint failed due to some technical reasons. Please recompile again.'}
           </p>
+          {errorMessage && (
+            <details className="mt-2">
+              <summary className="cursor-pointer text-sm font-medium text-grey-600 hover:text-grey-800">
+                Show error details
+              </summary>
+              <pre className="mt-2 max-h-64 overflow-auto rounded-lg bg-grey-100 p-3 text-xs text-grey-800">
+                {errorMessage}
+              </pre>
+            </details>
+          )}
           <Image
             src="/assets/CompilationFailed.svg"
             alt="compilation failed"
diff --git a/src/app/[id]/versions/VersionCard.tsx b/src/app/[id]/versions/VersionCard.tsx
index a6a0467..38c9a90 100644
--- a/src/app/[id]/versions/VersionCard.tsx
+++ b/src/app/[id]/versions/VersionCard.tsx
@@ -167,6 +167,17 @@ const VersionCard = ({
       <div>
         <p className="text-grey-700">{blueprint.props.description}</p>
       </div>
+      {getBlueprintStatus() === Status.Failed &&
+        (blueprint.props.clientError || blueprint.props.serverError) && (
+          <details>
+            <summary className="cursor-pointer text-sm font-medium text-red-600 hover:text-red-800">
+              Show error details
+            </summary>
+            <pre className="mt-2 max-h-48 overflow-auto rounded-lg bg-grey-100 p-3 font-mono text-xs text-grey-800">
+              {blueprint.props.clientError || blueprint.props.serverError}
+            </pre>
+          </details>
+        )}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           {getBlueprintStatus() === Status.Done ? (