diff --git a/src/app/(app)/feed/page.tsx b/src/app/(app)/feed/page.tsx
index e1703a4..65b062b 100644
--- a/src/app/(app)/feed/page.tsx
+++ b/src/app/(app)/feed/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { FeedList } from "@/components/feed/FeedList";
+import { StoryTray } from "@/components/stories/StoryTray";
 
 /**
  * /feed — Home feed page (RSC shell).
@@ -18,9 +19,11 @@ export const metadata: Metadata = {
 
 export default function FeedPage() {
   return (
-    <div className="max-w-[640px] mx-auto px-6 py-8">
-      {/* TODO(02-05): StoryTray above feed */}
-      <FeedList />
+    <div className="max-w-[640px] mx-auto py-8">
+      <StoryTray />
+      <div className="px-6">
+        <FeedList />
+      </div>
     </div>
   );
 }
diff --git a/src/components/feed/PostCard.tsx b/src/components/feed/PostCard.tsx
index a557222..0114ea0 100644
--- a/src/components/feed/PostCard.tsx
+++ b/src/components/feed/PostCard.tsx
@@ -36,6 +36,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { getAvatarUrl } from "@/lib/avatar-url";
 import { getMediaUrl } from "@/lib/media-url";
+import { PawRing } from "@/components/stories/PawRing";
 import { BlockDialog } from "@/components/safety/BlockDialog";
 import { ReportSheet } from "@/components/safety/ReportSheet";
 
@@ -183,9 +184,8 @@ export function PostCard({ post, onDeleted }: PostCardProps) {
     <article className="bg-card border border-border rounded-lg overflow-hidden">
       {/* Header row — 16px horizontal padding, 12px vertical */}
       <div className="flex items-center gap-3 px-4 py-3">
-        {/* Avatar with story ring seam */}
-        {/* TODO(02-05): StoryRing wrapper — wrap with ring-1 ring-orange-500 ring-offset-1 when hasActiveStory */}
-        <div className="rounded-full shrink-0">
+        {/* PawRing: shows paw-print outline when pet has an active story (STORY-02) */}
+        <PawRing petId={pet.id} size={32}>
           <Avatar className="w-8 h-8">
             {avatarUrl && (
               <AvatarImage src={avatarUrl} alt={pet.name} />
@@ -194,7 +194,7 @@ export function PostCard({ post, onDeleted }: PostCardProps) {
               {pet.name[0]?.toUpperCase() ?? "?"}
             </AvatarFallback>
           </Avatar>
-        </div>
+        </PawRing>
 
         <div className="flex-1 min-w-0">
           {/* Pet name — text-base font-semibold (UI-SPEC section heading) */}
diff --git a/src/components/post-creation/PostTypeSheet.tsx b/src/components/post-creation/PostTypeSheet.tsx
index 4e71284..9044496 100644
--- a/src/components/post-creation/PostTypeSheet.tsx
+++ b/src/components/post-creation/PostTypeSheet.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { PhotoPostForm } from "@/components/post-creation/PhotoPostForm";
+import { StoryForm } from "@/components/stories/StoryForm";
 
 /**
  * PostTypeSheet — bottom Sheet with 3 post type choices (D-01).
@@ -50,6 +51,11 @@ export function PostTypeSheet({ open, onOpenChange }: PostTypeSheetProps) {
   // TODO(02-06): MilestoneForm — open milestone dialog
   const [milestoneDialogOpen, setMilestoneDialogOpen] = useState(false);
 
+  function handleStoryClose() {
+    setStoryDialogOpen(false);
+    setSelectedType(null);
+  }
+
   function handleSelectType(type: PostType) {
     setSelectedType(type);
     onOpenChange(false); // close the Sheet
@@ -121,16 +127,13 @@ export function PostTypeSheet({ open, onOpenChange }: PostTypeSheetProps) {
         </DialogContent>
       </Dialog>
 
-      {/* Story Dialog seam — TODO(02-05): replace null with StoryForm */}
+      {/* Story Dialog (D-02) */}
       <Dialog open={storyDialogOpen} onOpenChange={setStoryDialogOpen}>
-        <DialogContent className="sm:max-w-[512px]">
-          <DialogHeader>
+        <DialogContent className="sm:max-w-[512px] max-h-[90dvh] overflow-y-auto p-0">
+          <DialogHeader className="px-4 pt-4 pb-2">
             <DialogTitle className="text-xl font-semibold">New Story</DialogTitle>
           </DialogHeader>
-          <div className="p-4 text-center text-sm text-muted-foreground">
-            {/* TODO(02-05): StoryForm — swap this div with <StoryForm onClose={() => setStoryDialogOpen(false)} /> */}
-            Story creation coming soon.
-          </div>
+          <StoryForm onClose={handleStoryClose} />
         </DialogContent>
       </Dialog>