diff --git a/apps/web/src/components/chat/message-deliverables.tsx b/apps/web/src/components/chat/message-deliverables.tsx
index e4f9b3b8..8a721e63 100644
--- a/apps/web/src/components/chat/message-deliverables.tsx
+++ b/apps/web/src/components/chat/message-deliverables.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useEffect, useId, useState } from "react";
 import { toast } from "sonner";
 import { formatBytes } from "@/components/chat/message-deliverable-model";
+import { MessageDoubleShell } from "@/components/chat/message-part-blocks";
 import type { ArtifactData } from "@/components/chat/message-parts.types";
 import {
   type OutputImagePreviewState,
@@ -36,18 +37,17 @@ interface DeliverablesBlockProps {
 export function DeliverablesBlock({ items, threadId }: DeliverablesBlockProps) {
   useAutoOpenLatestImage(items, threadId);
   return (
-    <div
-      className="cc-fade-in rounded-[14px] border border-thread-border bg-[var(--thread-code-bg)] p-3"
-      data-chat-deliverables="true"
-    >
-      <div className="mb-2 text-[10px] text-thread-text-muted uppercase tracking-[0.18em]">
-        Deliverables
-      </div>
-      <div className="space-y-2">
-        {items.map((item) => (
-          <DeliverableCard data={item} key={item.outputId} threadId={threadId} />
-        ))}
-      </div>
+    <div data-chat-deliverables="true">
+      <MessageDoubleShell innerClassName="p-3">
+        <div className="mb-2 text-[10px] text-thread-text-muted uppercase tracking-[0.18em]">
+          Deliverables
+        </div>
+        <div className="space-y-2">
+          {items.map((item) => (
+            <DeliverableCard data={item} key={item.outputId} threadId={threadId} />
+          ))}
+        </div>
+      </MessageDoubleShell>
     </div>
   );
 }
diff --git a/apps/web/src/components/chat/message-part-blocks.tsx b/apps/web/src/components/chat/message-part-blocks.tsx
index b0d67151..274e4a3b 100644
--- a/apps/web/src/components/chat/message-part-blocks.tsx
+++ b/apps/web/src/components/chat/message-part-blocks.tsx
@@ -8,13 +8,30 @@ export function MessageStatusShell({
 }: {
   children: ReactNode;
   tone?: "danger" | "neutral";
+}) {
+  return (
+    <MessageDoubleShell innerClassName="px-4 py-3.5" tone={tone}>
+      {children}
+    </MessageDoubleShell>
+  );
+}
+
+export function MessageDoubleShell({
+  children,
+  innerClassName,
+  tone = "neutral",
+}: {
+  children: ReactNode;
+  innerClassName?: string;
+  tone?: "danger" | "neutral";
 }) {
   return (
     <div className="cc-fade-in overflow-hidden rounded-[20px] border-2 border-border bg-background p-0.5">
       <div
         className={cn(
-          "rounded-[16px] bg-gradient-to-b to-background px-4 py-3.5",
+          "rounded-[16px] bg-gradient-to-b to-background",
           tone === "danger" ? "from-danger-bg" : "from-bg-secondary",
+          innerClassName,
         )}
       >
         {children}