diff --git a/apps/web/components/community/__tests__/create-post-dialog.test.tsx b/apps/web/components/community/__tests__/create-post-dialog.test.tsx
new file mode 100644
index 000000000..505102e2b
--- /dev/null
+++ b/apps/web/components/community/__tests__/create-post-dialog.test.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+import {
+    render,
+    screen,
+    fireEvent,
+    waitFor,
+    act,
+} from "@testing-library/react";
+import CreatePostDialog from "../create-post-dialog";
+import { ProfileContext } from "@components/contexts";
+
+jest.mock("../../ui/button", () => ({
+    Button: ({ children, ...props }: any) => (
+        <button {...props}>{children}</button>
+    ),
+}));
+
+jest.mock("../../ui/input", () => ({
+    Input: (props: any) => <input {...props} />,
+}));
+
+jest.mock("../../ui/textarea", () => ({
+    Textarea: (props: any) => <textarea {...props} />,
+}));
+
+jest.mock("../../ui/progress", () => ({
+    Progress: ({ value }: { value: number }) => (
+        <div data-testid="progress">{value}</div>
+    ),
+}));
+
+jest.mock("../../ui/avatar", () => ({
+    Avatar: ({ children }: any) => <div>{children}</div>,
+    AvatarFallback: ({ children }: any) => <div>{children}</div>,
+    AvatarImage: (props: any) => <img {...props} alt={props.alt || "avatar"} />,
+}));
+
+jest.mock("../../ui/dialog", () => ({
+    Dialog: ({ children }: any) => <div>{children}</div>,
+    DialogContent: ({ children }: any) => <div>{children}</div>,
+    DialogHeader: ({ children }: any) => <div>{children}</div>,
+    DialogTitle: ({ children }: any) => <div>{children}</div>,
+    DialogTrigger: ({ children }: any) => <>{children}</>,
+    DialogFooter: ({ children }: any) => <div>{children}</div>,
+    DialogClose: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock("../../ui/popover", () => ({
+    Popover: ({ children }: any) => <div>{children}</div>,
+    PopoverTrigger: ({ children }: any) => <>{children}</>,
+    PopoverContent: ({ children }: any) => <div>{children}</div>,
+}));
+
+jest.mock("../../ui/select", () => ({
+    Select: ({ value, onValueChange, children }: any) => (
+        <select
+            aria-label="category"
+            value={value}
+            onChange={(e) => onValueChange(e.target.value)}
+        >
+            <option value="">Select a category</option>
+            {children}
+        </select>
+    ),
+    SelectContent: ({ children }: any) => <>{children}</>,
+    SelectItem: ({ value, children }: any) => (
+        <option value={value}>{children}</option>
+    ),
+    SelectTrigger: ({ children }: any) => <>{children}</>,
+    SelectValue: () => null,
+}));
+
+jest.mock("../emoji-picker", () => ({
+    EmojiPicker: () => <div>EmojiPicker</div>,
+}));
+
+jest.mock("../gif-selector", () => ({
+    GifSelector: () => <div>GifSelector</div>,
+}));
+
+jest.mock("../media-preview", () => ({
+    MediaPreview: () => <div>MediaPreview</div>,
+}));
+
+const renderDialog = (
+    createPost: any,
+    overrides: Partial<React.ComponentProps<typeof CreatePostDialog>> = {},
+) =>
+    render(
+        <ProfileContext.Provider
+            value={{
+                profile: {
+                    name: "Test User",
+                    email: "test@example.com",
+                    avatar: undefined,
+                },
+                setProfile: jest.fn(),
+            }}
+        >
+            <CreatePostDialog
+                isOpen={true}
+                onOpenChange={jest.fn()}
+                createPost={createPost}
+                categories={["General", "Announcements"]}
+                isFileUploading={false}
+                fileUploadProgress={0}
+                fileBeingUploadedNumber={0}
+                {...overrides}
+            />
+        </ProfileContext.Provider>,
+    );
+
+const flushMicrotasks = async () => {
+    await act(async () => {
+        await Promise.resolve();
+    });
+};
+
+describe("CreatePostDialog", () => {
+    it("keeps submit disabled until title, content and category are present", async () => {
+        const createPost = jest.fn().mockResolvedValue(undefined);
+
+        renderDialog(createPost);
+        await flushMicrotasks();
+
+        const postButton = screen.getByRole("button", { name: "Post" });
+        expect(postButton).toBeDisabled();
+
+        fireEvent.change(screen.getByPlaceholderText("Title"), {
+            target: { value: "My title" },
+        });
+        fireEvent.change(screen.getByPlaceholderText("What's on your mind?"), {
+            target: { value: "My content" },
+        });
+        expect(postButton).toBeDisabled();
+
+        fireEvent.change(screen.getByLabelText("category"), {
+            target: { value: "General" },
+        });
+
+        await waitFor(() => {
+            expect(postButton).toBeEnabled();
+        });
+    });
+
+    it("shows posting state while submit is pending and restores after completion", async () => {
+        let resolveSubmit: (() => void) | undefined;
+        const createPost = jest.fn().mockImplementation(
+            () =>
+                new Promise<void>((resolve) => {
+                    resolveSubmit = resolve;
+                }),
+        );
+
+        renderDialog(createPost, { category: "General" });
+        await flushMicrotasks();
+
+        fireEvent.change(screen.getByPlaceholderText("Title"), {
+            target: { value: "My title" },
+        });
+        fireEvent.change(screen.getByPlaceholderText("What's on your mind?"), {
+            target: { value: "My content" },
+        });
+        fireEvent.change(screen.getByLabelText("category"), {
+            target: { value: "General" },
+        });
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "Post" })).toBeEnabled();
+        });
+
+        fireEvent.click(screen.getByRole("button", { name: "Post" }));
+
+        await waitFor(() => {
+            expect(createPost).toHaveBeenCalledTimes(1);
+        });
+        expect(
+            screen.getByRole("button", { name: "Posting..." }),
+        ).toBeDisabled();
+
+        await act(async () => {
+            resolveSubmit?.();
+        });
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "Post" })).toBeDisabled();
+        });
+    });
+});
diff --git a/apps/web/components/community/__tests__/media-preview.test.tsx b/apps/web/components/community/__tests__/media-preview.test.tsx
new file mode 100644
index 000000000..1ef620578
--- /dev/null
+++ b/apps/web/components/community/__tests__/media-preview.test.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MediaPreview } from "../media-preview";
+
+jest.mock("../../ui/button", () => ({
+    Button: ({ children, ...props }: any) => (
+        <button {...props}>{children}</button>
+    ),
+}));
+
+jest.mock("../../ui/scroll-area", () => ({
+    ScrollArea: ({ children }: any) => <div>{children}</div>,
+    ScrollBar: () => null,
+}));
+
+describe("MediaPreview", () => {
+    it("renders image using media thumbnail when url is missing", () => {
+        render(
+            <MediaPreview
+                items={[
+                    {
+                        type: "image",
+                        title: "CourseLit Notification System.png",
+                        media: {
+                            mediaId: "m1",
+                            thumbnail: "https://cdn.example.com/thumb.png",
+                            file: "https://cdn.example.com/file.png",
+                        },
+                    } as any,
+                ]}
+                onRemove={jest.fn()}
+            />,
+        );
+
+        const image = screen.getByAltText(
+            "CourseLit Notification System.png",
+        ) as HTMLImageElement;
+        expect(image).toBeInTheDocument();
+        expect(image.src).toContain("https://cdn.example.com/thumb.png");
+    });
+
+    it("renders image using url when available", () => {
+        render(
+            <MediaPreview
+                items={[
+                    {
+                        type: "image",
+                        title: "Local",
+                        url: "blob:http://localhost/abc",
+                    } as any,
+                ]}
+                onRemove={jest.fn()}
+            />,
+        );
+
+        const image = screen.getByAltText("Local") as HTMLImageElement;
+        expect(image).toBeInTheDocument();
+        expect(image.getAttribute("src")).toBe("blob:http://localhost/abc");
+    });
+});
diff --git a/apps/web/components/community/comment-section.tsx b/apps/web/components/community/comment-section.tsx
index c53f71510..f6f8161a2 100644
--- a/apps/web/components/community/comment-section.tsx
+++ b/apps/web/components/community/comment-section.tsx
@@ -107,6 +107,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -183,6 +184,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -278,6 +280,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -364,6 +367,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
@@ -517,6 +521,7 @@ export default function CommentSection({
                             mediaId
                             file
                             thumbnail
+                            size
                         }
                     }
                     likesCount
diff --git a/apps/web/components/community/comment.tsx b/apps/web/components/community/comment.tsx
index 50fd6f874..0e30dff68 100644
--- a/apps/web/components/community/comment.tsx
+++ b/apps/web/components/community/comment.tsx
@@ -194,11 +194,7 @@ export function Comment({
                                 {comment.user.name}
                             </span>
                             <span className="text-xs text-muted-foreground">
-                                {formattedLocaleDate(
-                                    comment.updatedAt
-                                        ? new Date(comment.updatedAt).getTime()
-                                        : undefined,
-                                )}
+                                {formattedLocaleDate(comment.updatedAt)}
                             </span>
                         </div>
                         {!comment.deleted && (
diff --git a/apps/web/components/community/create-post-dialog.tsx b/apps/web/components/community/create-post-dialog.tsx
index e396092e1..7e2195546 100644
--- a/apps/web/components/community/create-post-dialog.tsx
+++ b/apps/web/components/community/create-post-dialog.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { useState, useContext, useMemo } from "react";
+import {
+    useState,
+    useContext,
+    useMemo,
+    useEffect,
+    useCallback,
+    useRef,
+} from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -17,7 +24,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
-import { Paperclip, Video, Smile, Image } from "lucide-react";
+import { Paperclip, Video, Smile, Image as ImageIcon } from "lucide-react";
 import { EmojiPicker } from "./emoji-picker";
 import { GifSelector } from "./gif-selector";
 import { MediaPreview } from "./media-preview";
@@ -25,23 +32,45 @@ import { CommunityMediaTypes, CommunityPost } from "@courselit/common-models";
 import { type MediaItem } from "./media-item";
 import { ProfileContext } from "@components/contexts";
 import {
-    AlertDialog,
-    AlertDialogContent,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from "@components/ui/alert-dialog";
-import {
-    AlertDialogAction,
-    AlertDialogCancel,
-} from "@radix-ui/react-alert-dialog";
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+    DialogFooter,
+    DialogClose,
+} from "@/components/ui/dialog";
 import { Progress } from "@/components/ui/progress";
 
+const createClientId = () => {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+
+    return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+};
+
+const withClientIds = (items: MediaItem[]) =>
+    items.map((item) =>
+        item.clientId ? item : { ...item, clientId: createClientId() },
+    );
+
+const EMPTY_MEDIA: MediaItem[] = [];
+
 interface CreatePostDialogProps {
+    postId?: string;
+    title?: string;
+    content?: string;
+    category?: string;
+    media?: MediaItem[];
+    trigger?: React.ReactNode;
+    hideTrigger?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
     createPost: (
         post: Pick<CommunityPost, "title" | "content" | "category"> & {
             media: MediaItem[];
+            postId?: string;
         },
     ) => void;
     categories: string[];
@@ -51,19 +80,39 @@ interface CreatePostDialogProps {
 }
 
 export default function CreatePostDialog({
+    postId,
+    title: initialTitle = "",
+    content: initialContent = "",
+    category: initialCategory = "",
+    media: initialMedia = EMPTY_MEDIA,
+    trigger,
+    hideTrigger = false,
+    isOpen: controlledIsOpen,
+    onOpenChange: controlledOnOpenChange,
     createPost,
     categories,
     isFileUploading,
     fileUploadProgress,
     fileBeingUploadedNumber = 0,
 }: CreatePostDialogProps) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [title, setTitle] = useState("");
-    const [content, setContent] = useState("");
-    const [category, setCategory] = useState("");
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const initialMediaWithClientIds = useMemo(
+        () => withClientIds(initialMedia),
+        [initialMedia],
+    );
+
+    // Use controlled state if provided, otherwise use internal state
+    const isOpen =
+        controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+    const setIsOpen = controlledOnOpenChange || setInternalIsOpen;
+
+    const [title, setTitle] = useState(initialTitle);
+    const [content, setContent] = useState(initialContent);
+    const [category, setCategory] = useState(initialCategory);
     const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
     const [isGifSelectorOpen, setIsGifSelectorOpen] = useState(false);
-    const [media, setMedia] = useState<MediaItem[]>([]);
+    const [media, setMedia] = useState<MediaItem[]>(initialMediaWithClientIds);
+    const [videoUrl, setVideoUrl] = useState("");
     const [errors, setErrors] = useState<{
         title?: string;
         content?: string;
@@ -71,57 +120,107 @@ export default function CreatePostDialog({
     }>({});
     const { profile } = useContext(ProfileContext);
     const [isPosting, setIsPosting] = useState(false);
+    const mediaRef = useRef<MediaItem[]>(initialMediaWithClientIds);
+
+    const revokeMediaObjectUrls = useCallback((items: MediaItem[]) => {
+        for (const item of items) {
+            if (item.file && item.url?.startsWith("blob:")) {
+                URL.revokeObjectURL(item.url);
+            }
+        }
+    }, []);
+
+    // Re-sync form state from props whenever the dialog opens with new data
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        revokeMediaObjectUrls(mediaRef.current);
+        setTitle(initialTitle);
+        setContent(initialContent);
+        setCategory(initialCategory);
+        setMedia(initialMediaWithClientIds);
+        mediaRef.current = initialMediaWithClientIds;
+        setVideoUrl("");
+        setErrors({});
+    }, [
+        isOpen,
+        initialTitle,
+        initialContent,
+        initialCategory,
+        initialMediaWithClientIds,
+        revokeMediaObjectUrls,
+    ]);
+
+    useEffect(() => {
+        mediaRef.current = media;
+    }, [media]);
+
+    useEffect(() => {
+        return () => {
+            revokeMediaObjectUrls(mediaRef.current);
+        };
+    }, [revokeMediaObjectUrls]);
 
     const isPostButtonDisabled = useMemo(
-        () => title.trim() === "" || content.trim() === "" || isPosting,
-        [title, content, isPosting],
+        () =>
+            title.trim() === "" ||
+            content.trim() === "" ||
+            category.trim() === "" ||
+            isPosting,
+        [title, content, category, isPosting],
     );
 
-    const handleEmojiSelect = (emoji: string) => {
+    const handleEmojiSelect = useCallback((emoji: string) => {
         setContent((prevContent) => prevContent + emoji);
         setIsEmojiPickerOpen(false);
-    };
+    }, []);
 
-    const handleGifSelect = (gifUrl: string) => {
+    const handleGifSelect = useCallback((gifUrl: string) => {
         setMedia((prevMedia) => [
             ...prevMedia,
             {
                 type: "gif",
                 url: gifUrl,
                 title: "GIF",
+                clientId: createClientId(),
             },
         ]);
         setIsGifSelectorOpen(false);
-    };
+    }, []);
 
-    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const files = event.target.files;
-        if (files) {
-            Array.from(files).forEach((file) => {
-                const url = URL.createObjectURL(file);
-                const isPdf = file.type === "application/pdf";
-                const isImage = file.type.startsWith("image/");
-                const type = isPdf ? "pdf" : isImage ? "image" : "video";
+    const handleFileUpload = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            const files = event.target.files;
+            if (files) {
+                const nextItems: MediaItem[] = Array.from(files).map((file) => {
+                    const url = URL.createObjectURL(file);
+                    const isPdf = file.type === "application/pdf";
+                    const isImage = file.type.startsWith("image/");
+                    const type = isPdf ? "pdf" : isImage ? "image" : "video";
 
-                setMedia((prevMedia) => [
-                    ...prevMedia,
-                    {
+                    return {
                         type,
                         url,
                         title: file.name,
                         file,
-                        // fileSize: `${(file.size / (1024 * 1024)).toFixed(1)}mb`,
-                    },
-                ]);
-            });
-        }
-    };
+                        clientId: createClientId(),
+                        fileSize: `${(file.size / (1024 * 1024)).toFixed(1)}mb`,
+                    };
+                });
+
+                setMedia((prevMedia) => [...prevMedia, ...nextItems]);
+            }
+        },
+        [],
+    );
 
     // const handleLinkAdd = (url: string) => {
     //     setContent((prevContent) => `${prevContent} ${url} `);
     // };
 
-    const handleVideoAdd = (url: string) => {
+    const handleVideoAdd = useCallback((url: string) => {
         if (url.includes("youtube.com") || url.includes("youtu.be")) {
             const videoId = url.includes("youtu.be")
                 ? url.split("/").pop()
@@ -134,17 +233,25 @@ export default function CreatePostDialog({
                         type: "youtube",
                         url: `https://www.youtube.com/embed/${videoId}`,
                         title: "YouTube Video",
+                        clientId: createClientId(),
                     },
                 ]);
             }
         } else {
             setContent((prevContent) => `${prevContent} ${url} `);
         }
-    };
+    }, []);
 
-    const handleMediaRemove = (index: number) => {
-        setMedia((prevMedia) => prevMedia.filter((_, i) => i !== index));
-    };
+    const handleMediaRemove = useCallback((index: number) => {
+        setMedia((prevMedia) => {
+            const mediaToRemove = prevMedia[index];
+            if (mediaToRemove?.file && mediaToRemove.url?.startsWith("blob:")) {
+                URL.revokeObjectURL(mediaToRemove.url);
+            }
+
+            return prevMedia.filter((_, i) => i !== index);
+        });
+    }, []);
 
     const handlePost = async () => {
         if (title.trim() === "" || content.trim() === "") {
@@ -165,27 +272,41 @@ export default function CreatePostDialog({
         }
 
         setIsPosting(true);
-        await createPost({
-            category,
-            title,
-            content,
-            media,
-        });
-        setIsPosting(false);
+        try {
+            await createPost({
+                postId,
+                category,
+                title,
+                content,
+                media,
+            });
 
-        resetForm();
+            resetForm();
+        } finally {
+            setIsPosting(false);
+        }
     };
 
-    const resetForm = () => {
+    const resetForm = useCallback(() => {
+        revokeMediaObjectUrls(mediaRef.current);
         setIsOpen(false);
-        setTitle("");
-        setContent("");
-        setCategory("");
-        setMedia([]);
+        setTitle(initialTitle);
+        setContent(initialContent);
+        setCategory(initialCategory);
+        setMedia(initialMediaWithClientIds);
+        mediaRef.current = initialMediaWithClientIds;
+        setVideoUrl("");
         setErrors({});
-    };
+    }, [
+        setIsOpen,
+        initialTitle,
+        initialContent,
+        initialCategory,
+        initialMediaWithClientIds,
+        revokeMediaObjectUrls,
+    ]);
 
-    const getUploadableMediaCount = () => {
+    const uploadableMediaCount = useMemo(() => {
         return media.filter((x) =>
             [
                 CommunityMediaTypes.IMAGE,
@@ -193,26 +314,31 @@ export default function CreatePostDialog({
                 CommunityMediaTypes.PDF,
             ].includes(x.type as any),
         ).length;
-    };
+    }, [media]);
 
     if (!profile) {
         return null;
     }
 
     return (
-        <AlertDialog open={isOpen}>
-            <AlertDialogTrigger asChild>
-                <Button
-                    variant="outline"
-                    className="w-full !text-left cursor-text"
-                    onClick={() => setIsOpen(true)}
-                >
-                    Write something...
-                </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent className="sm:max-w-[90vw] md:max-w-[600px] w-full overflow-y-auto max-h-[calc(100vh-4rem)] my-8">
-                <AlertDialogHeader>
-                    <AlertDialogTitle>
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            {!hideTrigger &&
+                (trigger ? (
+                    <DialogTrigger asChild>{trigger}</DialogTrigger>
+                ) : (
+                    <DialogTrigger asChild>
+                        <div
+                            role="button"
+                            tabIndex={0}
+                            className="flex items-start w-full rounded-md border border-input bg-background px-3 pt-3 pb-8 text-sm text-muted-foreground ring-offset-background cursor-text hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                        >
+                            Write something...
+                        </div>
+                    </DialogTrigger>
+                ))}
+            <DialogContent className="sm:max-w-[90vw] md:max-w-[600px] w-full overflow-y-auto max-h-[calc(100vh-4rem)] my-8">
+                <DialogHeader>
+                    <DialogTitle>
                         <div className="flex items-center gap-2 mb-4">
                             <Avatar className="h-10 w-10">
                                 <AvatarImage
@@ -236,8 +362,8 @@ export default function CreatePostDialog({
                                 </span>
                             </div>
                         </div>
-                    </AlertDialogTitle>
-                </AlertDialogHeader>
+                    </DialogTitle>
+                </DialogHeader>
 
                 <div className="space-y-4">
                     <div>
@@ -363,17 +489,16 @@ export default function CreatePostDialog({
                                         id="video"
                                         type="url"
                                         placeholder="https://youtube.com/watch?v="
-                                        onChange={(e) => {}}
+                                        value={videoUrl}
+                                        onChange={(e) =>
+                                            setVideoUrl(e.target.value)
+                                        }
                                     />
                                     <Button
                                         size="sm"
                                         onClick={() => {
-                                            const videoInput =
-                                                document.getElementById(
-                                                    "video",
-                                                ) as HTMLInputElement;
-                                            handleVideoAdd(videoInput.value);
-                                            videoInput.value = "";
+                                            handleVideoAdd(videoUrl);
+                                            setVideoUrl("");
                                         }}
                                     >
                                         Add Video
@@ -413,7 +538,7 @@ export default function CreatePostDialog({
                                     size="icon"
                                     className="h-9 w-9"
                                 >
-                                    <Image className="h-5 w-5" />
+                                    <ImageIcon className="h-5 w-5" />
                                     <span className="sr-only">Add GIF</span>
                                 </Button>
                             </PopoverTrigger>
@@ -438,13 +563,6 @@ export default function CreatePostDialog({
                                             {category}
                                         </SelectItem>
                                     ))}
-                                    {/* <SelectItem value="general">
-                                        General Discussion
-                                    </SelectItem>
-                                    <SelectItem value="tips">Tips</SelectItem>
-                                    <SelectItem value="questions">
-                                        Questions
-                                    </SelectItem> */}
                                 </SelectContent>
                             </Select>
                             {errors.category && (
@@ -454,34 +572,19 @@ export default function CreatePostDialog({
                             )}
                         </div>
                     </div>
-                    {/* <div className="flex items-center gap-2">
-                        <Button
-                            variant="ghost"
-                            onClick={() => setIsOpen(false)}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            className="px-8"
-                            onClick={handlePost}
-                            disabled={isPostButtonDisabled}
-                        >
-                            Post
-                        </Button>
-                    </div> */}
                 </div>
-                {isPosting && getUploadableMediaCount() > 0 && (
+                {isFileUploading && uploadableMediaCount > 0 && (
                     <>
                         <p className="text-xs text-muted-foreground">
                             Uploading {fileBeingUploadedNumber} of{" "}
-                            {getUploadableMediaCount()} files -{" "}
+                            {uploadableMediaCount} files -{" "}
                             {Math.round(fileUploadProgress)}%
                         </p>
                         <Progress value={fileUploadProgress} className="h-2" />
                     </>
                 )}
-                <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
+                <DialogFooter className="flex space-x-2">
+                    <DialogClose asChild>
                         <Button
                             onClick={resetForm}
                             variant="outline"
@@ -489,17 +592,21 @@ export default function CreatePostDialog({
                         >
                             Cancel
                         </Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                        <Button
-                            onClick={handlePost}
-                            disabled={isPostButtonDisabled}
-                        >
-                            {isPosting ? "Posting..." : "Post"}
-                        </Button>
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
+                    </DialogClose>
+                    <Button
+                        onClick={handlePost}
+                        disabled={isPostButtonDisabled}
+                    >
+                        {isPosting
+                            ? postId
+                                ? "Saving..."
+                                : "Posting..."
+                            : postId
+                              ? "Save"
+                              : "Post"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 }
diff --git a/apps/web/components/community/emoji-picker.tsx b/apps/web/components/community/emoji-picker.tsx
index db32f4529..9fd3e0da7 100644
--- a/apps/web/components/community/emoji-picker.tsx
+++ b/apps/web/components/community/emoji-picker.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { memo } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
 
@@ -99,14 +100,9 @@ const emojis = [
     "🤕",
 ];
 
-export function EmojiPicker({ onEmojiSelect }: EmojiPickerProps) {
+function EmojiPickerComponent({ onEmojiSelect }: EmojiPickerProps) {
     return (
         <div className="w-full space-y-4">
-            {/* <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input placeholder="Search emojis" className="pl-8" />
-            </div> */}
-
             <ScrollArea className="h-[300px]">
                 <div className="grid grid-cols-8 gap-2">
                     {emojis.map((emoji) => (
@@ -124,3 +120,5 @@ export function EmojiPicker({ onEmojiSelect }: EmojiPickerProps) {
         </div>
     );
 }
+
+export const EmojiPicker = memo(EmojiPickerComponent);
diff --git a/apps/web/components/community/gif-selector.tsx b/apps/web/components/community/gif-selector.tsx
index 0ddb487e2..048fd8dfd 100644
--- a/apps/web/components/community/gif-selector.tsx
+++ b/apps/web/components/community/gif-selector.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { useState, useEffect, useCallback, useContext } from "react";
+import {
+    useState,
+    useEffect,
+    useCallback,
+    useContext,
+    memo,
+    useMemo,
+    useRef,
+} from "react";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Search } from "lucide-react";
@@ -11,38 +19,64 @@ interface GifSelectorProps {
     onGifSelect: (gifUrl: string) => void;
 }
 
-export function GifSelector({ onGifSelect }: GifSelectorProps) {
+function GifSelectorComponent({ onGifSelect }: GifSelectorProps) {
     const [search, setSearch] = useState("");
     const [gifs, setGifs] = useState<string[]>([]);
     const [loading, setLoading] = useState(false);
     const address = useContext(AddressContext);
+    const requestSeqRef = useRef(0);
+    const abortControllerRef = useRef<AbortController | null>(null);
 
-    const fetchGifs = async (searchTerm: string) => {
-        setLoading(true);
-        try {
-            const endpoint = searchTerm
-                ? `${address.backend}/api/gifs/search?q=${encodeURIComponent(searchTerm)}`
-                : `${address.backend}/api/gifs/trending`;
+    const fetchGifs = useCallback(
+        async (searchTerm: string) => {
+            const requestId = ++requestSeqRef.current;
+            abortControllerRef.current?.abort();
+            const controller = new AbortController();
+            abortControllerRef.current = controller;
+            setLoading(true);
 
-            const response = await fetch(endpoint);
-            const data = await response.json();
-            setGifs(data.data.map((gif: any) => gif.images.fixed_height.url));
-        } catch (error) {
-            console.error("Error fetching GIFs:", error);
-        } finally {
-            setLoading(false);
-        }
-    };
+            try {
+                const endpoint = searchTerm
+                    ? `${address.backend}/api/gifs/search?q=${encodeURIComponent(searchTerm)}`
+                    : `${address.backend}/api/gifs/trending`;
+
+                const response = await fetch(endpoint, {
+                    signal: controller.signal,
+                });
+                const data = await response.json();
+                if (requestId === requestSeqRef.current) {
+                    setGifs(
+                        data.data.map(
+                            (gif: any) => gif.images.fixed_height.url,
+                        ),
+                    );
+                }
+            } catch (error) {
+                if ((error as Error).name !== "AbortError") {
+                    console.error("Error fetching GIFs:", error);
+                }
+            } finally {
+                if (requestId === requestSeqRef.current) {
+                    setLoading(false);
+                }
+            }
+        },
+        [address.backend],
+    );
 
-    const debouncedFetchGifs = useCallback(
-        debounce((searchTerm: string) => fetchGifs(searchTerm), 300),
-        [],
+    const debouncedFetchGifs = useMemo(
+        () =>
+            debounce((searchTerm: string) => {
+                void fetchGifs(searchTerm);
+            }, 300),
+        [fetchGifs],
     );
 
     useEffect(() => {
         debouncedFetchGifs(search);
         return () => {
             debouncedFetchGifs.cancel();
+            abortControllerRef.current?.abort();
         };
     }, [search, debouncedFetchGifs]);
 
@@ -84,3 +118,5 @@ export function GifSelector({ onGifSelect }: GifSelectorProps) {
         </div>
     );
 }
+
+export const GifSelector = memo(GifSelectorComponent);
diff --git a/apps/web/components/community/index.tsx b/apps/web/components/community/index.tsx
index 63c17b98c..1fd20d633 100644
--- a/apps/web/components/community/index.tsx
+++ b/apps/web/components/community/index.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { useState, useEffect, useRef, useContext, useCallback } from "react";
+import {
+    useState,
+    useEffect,
+    useRef,
+    useContext,
+    useCallback,
+    useMemo,
+} from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -16,11 +23,12 @@ import {
     MoreVertical,
     Trash,
     FlagTriangleRight,
+    Maximize2,
+    ArrowLeft,
 } from "lucide-react";
 import {
     Dialog,
     DialogContent,
-    DialogTrigger,
     DialogTitle,
     DialogDescription,
     DialogFooter,
@@ -82,10 +90,20 @@ export function CommunityForum({
     const router = useRouter();
     const [showAllCategories, setShowAllCategories] = useState(false);
     const [posts, setPosts] = useState<CommunityPost[]>([]);
+    const [openPostId, setOpenPostId] = useState<string | null>(null);
+    const openPost = useMemo(
+        () => posts.find((p) => p.postId === openPostId) || null,
+        [posts, openPostId],
+    );
     const commentsEndRef = useRef<HTMLDivElement>(null);
     const address = useContext(AddressContext);
     const { toast } = useToast();
     const [categories, setCategories] = useState<string[]>(["All"]);
+    const postCategories = useMemo(
+        () => categories.filter((x) => x !== "All"),
+        [categories],
+    );
+    const [fullscreenImage, setFullscreenImage] = useState<string | null>(null);
     const [page, setPage] = useState(1);
     const [totalPosts, setTotalPosts] = useState(0);
     const [postToDelete, setPostToDelete] = useState<CommunityPost | null>(
@@ -100,6 +118,8 @@ export function CommunityForum({
     const [postToReport, setPostToReport] = useState<CommunityPost | null>(
         null,
     );
+    const [postToEdit, setPostToEdit] = useState<CommunityPost | null>(null);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
     const [refreshCommunityStatus, setRefreshCommunityStatus] = useState(0);
     const { isUploading, uploadProgress, uploadFile } = useMediaLit({
         signatureEndpoint: `${address.backend}/api/media/presigned`,
@@ -107,8 +127,7 @@ export function CommunityForum({
     });
     const [fileBeingUploadedNumber, setFileBeingUploadedNumber] = useState(0);
 
-    const formatTimestamp = (value?: string) =>
-        formattedLocaleDate(value ? new Date(value).getTime() : undefined);
+    const formatTimestamp = (value?: string) => formattedLocaleDate(value);
 
     useEffect(() => {
         if (membership) {
@@ -168,6 +187,7 @@ export function CommunityForum({
                             file
                             thumbnail
                             originalFileName
+                            size
                         }
                     }
                     likesCount
@@ -399,16 +419,68 @@ export function CommunityForum({
         );
     };
 
-    const createPost = async (
-        newPost: Pick<CommunityPost, "title" | "content" | "category"> & {
-            media: MediaItem[];
-        },
-    ) => {
-        try {
-            if (newPost.media.length > 0) {
-                newPost.media = await uploadAttachments(newPost.media);
-            }
-            const mutation = `
+    const createPost = useCallback(
+        async (
+            newPost: Pick<CommunityPost, "title" | "content" | "category"> & {
+                media: MediaItem[];
+                postId?: string;
+            },
+        ) => {
+            try {
+                if (newPost.media.length > 0) {
+                    newPost.media = await uploadAttachments(newPost.media);
+                }
+
+                const effectivePostId =
+                    newPost.postId ||
+                    (isEditModalOpen ? postToEdit?.postId : undefined);
+                const isEdit = !!effectivePostId;
+                const mutation = isEdit
+                    ? `
+                mutation ($communityId: String!, $postId: String!, $title: String, $content: String, $category: String, $media: [CommunityPostInputMedia]) {
+                    post: updateCommunityPost(
+                        communityId: $communityId,
+                        postId: $postId,
+                        title: $title,
+                        content: $content,
+                        category: $category,
+                        media: $media
+                    ) {
+                        communityId
+                        postId
+                        title
+                        content
+                        category
+                        media {
+                            type
+                            title
+                            url
+                            media {
+                                mediaId
+                                file
+                                thumbnail
+                                originalFileName
+                                size
+                            }
+                        }
+                        likesCount
+                        commentsCount
+                        updatedAt
+                        hasLiked
+                        user {
+                            userId
+                            name
+                            avatar {
+                                mediaId
+                                file
+                                thumbnail
+                            }
+                        }
+                        pinned
+                    }
+                }
+            `
+                    : `
                 mutation ($id: String!, $title: String!, $content: String!, $category: String!, $media: [CommunityPostInputMedia]) {
                     post: createCommunityPost(
                         id: $id,
@@ -431,6 +503,7 @@ export function CommunityForum({
                                 file
                                 thumbnail
                                 originalFileName
+                                size
                             }
                         }
                         likesCount
@@ -451,44 +524,84 @@ export function CommunityForum({
                 }
             `;
 
-            const fetch = new FetchBuilder()
-                .setUrl(`${address.backend}/api/graph`)
-                .setPayload({
-                    query: mutation,
-                    variables: {
-                        id: community?.communityId,
-                        content: newPost.content,
-                        category: newPost.category,
-                        title: newPost.title,
-                        media: newPost.media.map((m) => ({
-                            type: m.type,
-                            title: m.title,
-                            url: m.url,
-                            media: m.media,
-                        })),
-                    },
-                })
-                .setIsGraphQLEndpoint(true)
-                .build();
-            const response = await fetch.exec();
-            if (response.post) {
-                setPosts((prevPosts) => [response.post, ...prevPosts]);
-            } else {
+                const fetch = new FetchBuilder()
+                    .setUrl(`${address.backend}/api/graph`)
+                    .setPayload(
+                        isEdit
+                            ? {
+                                  query: mutation,
+                                  variables: {
+                                      communityId: community?.communityId,
+                                      postId: effectivePostId,
+                                      content: newPost.content,
+                                      category: newPost.category,
+                                      title: newPost.title,
+                                      media: newPost.media.map((m) => ({
+                                          type: m.type,
+                                          title: m.title,
+                                          url: m.url,
+                                          media: m.media,
+                                      })),
+                                  },
+                              }
+                            : {
+                                  query: mutation,
+                                  variables: {
+                                      id: community?.communityId,
+                                      content: newPost.content,
+                                      category: newPost.category,
+                                      title: newPost.title,
+                                      media: newPost.media.map((m) => ({
+                                          type: m.type,
+                                          title: m.title,
+                                          url: m.url,
+                                          media: m.media,
+                                      })),
+                                  },
+                              },
+                    )
+                    .setIsGraphQLEndpoint(true)
+                    .build();
+                const response = await fetch.exec();
+                if (response.post) {
+                    if (isEdit) {
+                        setPosts((prevPosts) =>
+                            prevPosts.map((p) =>
+                                p.postId === response.post.postId
+                                    ? response.post
+                                    : p,
+                            ),
+                        );
+                        setIsEditModalOpen(false);
+                        setPostToEdit(null);
+                    } else {
+                        setPosts((prevPosts) => [response.post, ...prevPosts]);
+                    }
+                } else {
+                    toast({
+                        title: "Error",
+                        description: isEdit
+                            ? "Failed to update post"
+                            : "Failed to add post",
+                    });
+                }
+            } catch (err: any) {
                 toast({
-                    title: "Error",
-                    description: "Failed to add post",
+                    title: TOAST_TITLE_ERROR,
+                    description: err.message,
+                    variant: "destructive",
                 });
+            } finally {
+                setFileBeingUploadedNumber(0);
             }
-        } catch (err: any) {
-            toast({
-                title: TOAST_TITLE_ERROR,
-                description: err.message,
-                variant: "destructive",
-            });
-        } finally {
-            setFileBeingUploadedNumber(0);
-        }
-    };
+        },
+        [
+            address.backend,
+            community?.communityId,
+            isEditModalOpen,
+            postToEdit?.postId,
+        ],
+    );
 
     const uploadAttachments = async (media: MediaItem[]) => {
         for (const i in media) {
@@ -518,19 +631,34 @@ export function CommunityForum({
         switch (media.type) {
             case "image":
                 if (media.media) {
+                    const imgSrc =
+                        (options && options.renderActualFile) ||
+                        media.media?.file?.endsWith(".gif")
+                            ? media.media.file!
+                            : media.media.thumbnail;
                     return (
-                        <Image
-                            src={
-                                (options && options.renderActualFile) ||
-                                media.media?.file?.endsWith(".gif")
-                                    ? media.media.file!
-                                    : media.media.thumbnail
-                            }
-                            alt="Post media"
-                            className="w-48 h-48 object-cover rounded-md"
-                            width={96}
-                            height={96}
-                        />
+                        <div className="relative group">
+                            <Image
+                                src={imgSrc}
+                                alt="Post media"
+                                className="w-48 h-48 object-cover rounded-md"
+                                width={96}
+                                height={96}
+                            />
+                            {options?.renderActualFile && media.media.file && (
+                                <button
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setFullscreenImage(media.media!.file!);
+                                    }}
+                                    className="absolute top-2 right-2 rounded-md bg-black/60 text-white p-1.5 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80"
+                                    aria-label="View full screen"
+                                >
+                                    <Maximize2 className="h-4 w-4" />
+                                </button>
+                            )}
+                        </div>
                     );
                 } else {
                     return null;
@@ -953,9 +1081,7 @@ export function CommunityForum({
                             Constants.MembershipRole.POST,
                         ) ? (
                             <CreatePostDialog
-                                categories={categories.filter(
-                                    (x) => x !== "All",
-                                )}
+                                categories={postCategories}
                                 createPost={createPost}
                                 isFileUploading={isUploading}
                                 fileUploadProgress={uploadProgress}
@@ -1027,355 +1153,133 @@ export function CommunityForum({
                         <div className="flex flex-col gap-4 mb-4">
                             {posts.length > 0 ? (
                                 posts.map((post) => (
-                                    <Dialog key={post.postId}>
-                                        <DialogTrigger asChild>
-                                            <Card className="cursor-pointer hover:bg-accent/50 transition-colors">
-                                                <CardHeader className="flex flex-row items-start space-y-0 gap-4">
-                                                    <div className="flex-1 min-w-0">
-                                                        <div className="flex items-center gap-2 mb-2">
-                                                            <Avatar className="h-10 w-10 flex-shrink-0">
-                                                                <AvatarImage
-                                                                    src={
-                                                                        post
-                                                                            .user
-                                                                            .avatar
-                                                                            ?.file ||
-                                                                        "/courselit_backdrop_square.webp"
-                                                                    }
-                                                                    alt={`${post.user.name}'s avatar`}
-                                                                />
-                                                                <AvatarFallback>
-                                                                    {post.user
-                                                                        .name &&
-                                                                        post.user.name
-                                                                            .split(
-                                                                                " ",
-                                                                            )
-                                                                            .map(
-                                                                                (
-                                                                                    n,
-                                                                                ) =>
-                                                                                    n[0],
-                                                                            )
-                                                                            .join(
-                                                                                "",
-                                                                            )}
-                                                                </AvatarFallback>
-                                                            </Avatar>
-                                                            <div className="min-w-0 flex-1">
-                                                                <div className="truncate text-sm">
-                                                                    {post.user
-                                                                        .name ||
-                                                                        post
-                                                                            .user
-                                                                            .email}
-                                                                </div>
-                                                                <div className="text-xs text-muted-foreground">
-                                                                    {formatTimestamp(
-                                                                        post.updatedAt,
-                                                                    )}{" "}
-                                                                    •{" "}
-                                                                    {capitalize(
-                                                                        post.category,
-                                                                    )}
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    {membership &&
-                                                        hasCommunityPermission(
-                                                            membership,
-                                                            Constants
-                                                                .MembershipRole
-                                                                .MODERATE,
-                                                        ) && (
-                                                            <Button
-                                                                variant="ghost"
-                                                                size="icon"
-                                                                className={`flex-shrink-0 rounded-full ${post.pinned ? "bg-accent" : ""}`}
-                                                                onClick={(e) =>
-                                                                    togglePin(
-                                                                        post.postId,
-                                                                        e,
+                                    <Card
+                                        key={post.postId}
+                                        className="cursor-pointer hover:bg-accent/50 transition-colors"
+                                        onClick={() =>
+                                            setOpenPostId(post.postId)
+                                        }
+                                    >
+                                        <CardHeader className="flex flex-row items-start space-y-0 gap-4">
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center gap-2 mb-2">
+                                                    <Avatar className="h-10 w-10 flex-shrink-0">
+                                                        <AvatarImage
+                                                            src={
+                                                                post.user.avatar
+                                                                    ?.file ||
+                                                                "/courselit_backdrop_square.webp"
+                                                            }
+                                                            alt={`${post.user.name}'s avatar`}
+                                                        />
+                                                        <AvatarFallback>
+                                                            {post.user.name &&
+                                                                post.user.name
+                                                                    .split(" ")
+                                                                    .map(
+                                                                        (n) =>
+                                                                            n[0],
                                                                     )
-                                                                }
-                                                            >
-                                                                <Pin className="h-4 w-4" />
-                                                                <span className="sr-only">
-                                                                    Pin post
-                                                                </span>
-                                                            </Button>
-                                                        )}
-                                                </CardHeader>
-                                                <CardContent>
-                                                    <p className="text-base mb-4 font-semibold line-clamp-3">
-                                                        {post.title}
-                                                    </p>
-                                                    <p className="text-sm mb-4 whitespace-pre-wrap">
-                                                        {truncate(
-                                                            post.content,
-                                                            500,
-                                                        )}
-                                                    </p>
-                                                    {post.media && (
-                                                        <div className="flex gap-2 overflow-x-auto">
-                                                            {post.media.map(
-                                                                (media) => (
-                                                                    <div
-                                                                        className="flex-shrink-0"
-                                                                        key={
-                                                                            media.title
-                                                                        }
-                                                                    >
-                                                                        {renderMediaPreview(
-                                                                            media,
-                                                                        )}
-                                                                    </div>
-                                                                ),
-                                                            )}
+                                                                    .join("")}
+                                                        </AvatarFallback>
+                                                    </Avatar>
+                                                    <div className="min-w-0 flex-1">
+                                                        <div className="truncate text-sm">
+                                                            {post.user.name ||
+                                                                post.user.email}
                                                         </div>
-                                                    )}
-                                                </CardContent>
-                                                <CardFooter>
-                                                    <div className="flex items-center gap-4">
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            className={`text-muted-foreground ${post.hasLiked ? "bg-accent" : ""}`}
-                                                            onClick={(e) =>
-                                                                handleLike(
-                                                                    post.postId,
-                                                                    e,
-                                                                )
-                                                            }
-                                                        >
-                                                            <ThumbsUp className="h-4 w-4 mr-2" />
-                                                            {post.likesCount}
-                                                        </Button>
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            className="text-muted-foreground"
-                                                        >
-                                                            <MessageSquare className="h-4 w-4 mr-2" />
-                                                            {post.commentsCount}
-                                                        </Button>
-                                                    </div>
-                                                </CardFooter>
-                                            </Card>
-                                        </DialogTrigger>
-                                        <DialogContent
-                                            className="sm:max-w-[600px] w-full overflow-y-auto max-h-[80vh] my-8"
-                                            aria-describedby={undefined}
-                                        >
-                                            <VisuallyHidden>
-                                                <DialogTitle>
-                                                    Post&apos; content
-                                                </DialogTitle>
-                                            </VisuallyHidden>
-                                            <div className="grid gap-4">
-                                                <div className="flex items-center gap-2 justify-between">
-                                                    <div className="flex items-center gap-2">
-                                                        <Avatar className="h-10 w-10">
-                                                            <AvatarImage
-                                                                src={
-                                                                    post.user
-                                                                        .avatar
-                                                                        ?.file ||
-                                                                    "/courselit_backdrop_square.webp"
-                                                                }
-                                                                alt={`${post.user.name}'s avatar`}
-                                                            />
-                                                            <AvatarFallback>
-                                                                {post.user
-                                                                    .name &&
-                                                                    post.user.name
-                                                                        .split(
-                                                                            " ",
-                                                                        )
-                                                                        .map(
-                                                                            (
-                                                                                n,
-                                                                            ) =>
-                                                                                n[0],
-                                                                        )
-                                                                        .join(
-                                                                            "",
-                                                                        )}
-                                                            </AvatarFallback>
-                                                        </Avatar>
-                                                        <div>
-                                                            <div className="font-semibold">
-                                                                {post.user
-                                                                    .name ||
-                                                                    post.user
-                                                                        .email}
-                                                            </div>
-                                                            <div className="text-sm text-muted-foreground">
-                                                                {formatTimestamp(
-                                                                    post.updatedAt,
-                                                                )}{" "}
-                                                                •{" "}
-                                                                {post.category}
-                                                            </div>
+                                                        <div className="text-xs text-muted-foreground">
+                                                            {formatTimestamp(
+                                                                post.updatedAt,
+                                                            )}{" "}
+                                                            •{" "}
+                                                            {capitalize(
+                                                                post.category,
+                                                            )}
                                                         </div>
                                                     </div>
-                                                    <DropdownMenu>
-                                                        <DropdownMenuTrigger
-                                                            asChild
-                                                        >
-                                                            <Button
-                                                                variant="ghost"
-                                                                size="sm"
-                                                                className="h-8 w-8 p-0"
-                                                            >
-                                                                <span className="sr-only">
-                                                                    Open menu
-                                                                </span>
-                                                                <MoreVertical className="h-4 w-4" />
-                                                            </Button>
-                                                        </DropdownMenuTrigger>
-                                                        <DropdownMenuContent align="end">
-                                                            {membership &&
-                                                                hasCommunityPermission(
-                                                                    membership,
-                                                                    Constants
-                                                                        .MembershipRole
-                                                                        .MODERATE,
-                                                                ) && (
-                                                                    <DropdownMenuItem
-                                                                        onClick={() =>
-                                                                            togglePin(
-                                                                                post.postId,
-                                                                            )
-                                                                        }
-                                                                    >
-                                                                        <Pin className="h-4 w-4" />
-                                                                        {post.pinned
-                                                                            ? "Unpin"
-                                                                            : "Pin"}
-                                                                    </DropdownMenuItem>
-                                                                )}
-                                                            {profile.userId !==
-                                                                post.user
-                                                                    .userId && (
-                                                                <DropdownMenuItem
-                                                                    onClick={() =>
-                                                                        handleReportPost(
-                                                                            post,
-                                                                        )
-                                                                    }
-                                                                >
-                                                                    <FlagTriangleRight className="h-4 w-4" />{" "}
-                                                                    Report
-                                                                </DropdownMenuItem>
-                                                            )}
-                                                            {((membership &&
-                                                                hasCommunityPermission(
-                                                                    membership,
-                                                                    Constants
-                                                                        .MembershipRole
-                                                                        .MODERATE,
-                                                                )) ||
-                                                                post.user
-                                                                    .userId ===
-                                                                    profile.userId) && (
-                                                                <DropdownMenuItem
-                                                                    onClick={() =>
-                                                                        handleDeletePost(
-                                                                            post,
-                                                                        )
-                                                                    }
-                                                                >
-                                                                    <Trash className="h-4 w-4" />
-                                                                    Delete
-                                                                </DropdownMenuItem>
-                                                            )}
-                                                        </DropdownMenuContent>
-                                                    </DropdownMenu>
-                                                </div>
-                                                <div>
-                                                    <p className="text-base mb-4 font-semibold">
-                                                        {post.title}
-                                                    </p>
-                                                    <p className="text-sm mb-4 whitespace-pre-wrap">
-                                                        {post.content}
-                                                    </p>
                                                 </div>
-                                                {post.media && (
-                                                    <div className="flex gap-2 overflow-x-auto">
-                                                        {post.media.map(
-                                                            (media) => (
-                                                                <div
-                                                                    className="flex-shrink-0"
-                                                                    key={
-                                                                        media.title
-                                                                    }
-                                                                >
-                                                                    {renderMediaPreview(
-                                                                        media,
-                                                                        {
-                                                                            renderActualFile:
-                                                                                true,
-                                                                        },
-                                                                    )}
-                                                                </div>
-                                                            ),
-                                                        )}
-                                                    </div>
-                                                )}
-                                                <div className="flex items-center gap-4">
+                                            </div>
+                                            {membership &&
+                                                hasCommunityPermission(
+                                                    membership,
+                                                    Constants.MembershipRole
+                                                        .MODERATE,
+                                                ) && (
                                                     <Button
                                                         variant="ghost"
-                                                        size="sm"
-                                                        className={`text-muted-foreground ${post.hasLiked ? "bg-accent" : ""}`}
-                                                        onClick={() =>
-                                                            handleLike(
+                                                        size="icon"
+                                                        className={`flex-shrink-0 rounded-full ${post.pinned ? "bg-accent" : ""}`}
+                                                        onClick={(e) =>
+                                                            togglePin(
                                                                 post.postId,
+                                                                e,
                                                             )
                                                         }
                                                     >
-                                                        <ThumbsUp className="h-4 w-4 mr-2" />
-                                                        {post.likesCount}
+                                                        <Pin className="h-4 w-4" />
+                                                        <span className="sr-only">
+                                                            Pin post
+                                                        </span>
                                                     </Button>
-                                                    <Button
-                                                        variant="ghost"
-                                                        size="sm"
-                                                        className="text-muted-foreground"
-                                                    >
-                                                        <MessageSquare className="h-4 w-4 mr-2" />
-                                                        {post.commentsCount}
-                                                    </Button>
-                                                </div>
-                                                {membership && (
-                                                    <CommentSection
-                                                        membership={membership}
-                                                        postId={post.postId}
-                                                        communityId={id!}
-                                                        onPostUpdated={(
-                                                            postId: string,
-                                                            count: number,
-                                                        ) => {
-                                                            setPosts(
-                                                                (prevPosts) =>
-                                                                    prevPosts.map(
-                                                                        (p) =>
-                                                                            p.postId ===
-                                                                            postId
-                                                                                ? {
-                                                                                      ...p,
-                                                                                      commentsCount:
-                                                                                          count,
-                                                                                  }
-                                                                                : p,
-                                                                    ),
-                                                            );
-                                                        }}
-                                                    />
                                                 )}
+                                        </CardHeader>
+                                        <CardContent>
+                                            <p className="text-base mb-4 font-semibold line-clamp-3">
+                                                {post.title}
+                                            </p>
+                                            <p className="text-sm mb-4 whitespace-pre-wrap">
+                                                {truncate(post.content, 500)}
+                                            </p>
+                                            {post.media && (
+                                                <div className="flex gap-2 overflow-x-auto">
+                                                    {post.media.map(
+                                                        (media, index) => (
+                                                            <div
+                                                                className="flex-shrink-0"
+                                                                key={
+                                                                    media.media
+                                                                        ?.mediaId ||
+                                                                    media.url ||
+                                                                    `${media.type}:${media.title || "untitled"}:${index}`
+                                                                }
+                                                            >
+                                                                {renderMediaPreview(
+                                                                    media,
+                                                                )}
+                                                            </div>
+                                                        ),
+                                                    )}
+                                                </div>
+                                            )}
+                                        </CardContent>
+                                        <CardFooter>
+                                            <div className="flex items-center gap-4">
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    className={`text-muted-foreground ${post.hasLiked ? "bg-accent" : ""}`}
+                                                    onClick={(e) =>
+                                                        handleLike(
+                                                            post.postId,
+                                                            e,
+                                                        )
+                                                    }
+                                                >
+                                                    <ThumbsUp className="h-4 w-4 mr-2" />
+                                                    {post.likesCount}
+                                                </Button>
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    className="text-muted-foreground"
+                                                >
+                                                    <MessageSquare className="h-4 w-4 mr-2" />
+                                                    {post.commentsCount}
+                                                </Button>
                                             </div>
-                                        </DialogContent>
-                                    </Dialog>
+                                        </CardFooter>
+                                    </Card>
                                 ))
                             ) : (
                                 <div className="text-center py-8">
@@ -1447,6 +1351,266 @@ export function CommunityForum({
                             </DialogFooter>
                         </DialogContent>
                     </Dialog>
+                    <CreatePostDialog
+                        postId={postToEdit?.postId}
+                        title={postToEdit?.title}
+                        content={postToEdit?.content}
+                        category={postToEdit?.category}
+                        media={postToEdit?.media}
+                        categories={postCategories}
+                        createPost={createPost}
+                        isFileUploading={isUploading}
+                        fileUploadProgress={uploadProgress}
+                        fileBeingUploadedNumber={fileBeingUploadedNumber}
+                        isOpen={isEditModalOpen}
+                        hideTrigger={true}
+                        onOpenChange={(open) => {
+                            setIsEditModalOpen(open);
+                            if (!open) {
+                                setPostToEdit(null);
+                            }
+                        }}
+                    />
+                    <Dialog
+                        open={!!openPost}
+                        onOpenChange={(open) => {
+                            if (!open) {
+                                setOpenPostId(null);
+                                setFullscreenImage(null);
+                            }
+                        }}
+                    >
+                        <DialogContent
+                            className="sm:max-w-[600px] w-full overflow-y-auto max-h-[80vh] my-8"
+                            aria-describedby={undefined}
+                        >
+                            <VisuallyHidden>
+                                <DialogTitle>Post&apos; content</DialogTitle>
+                            </VisuallyHidden>
+                            {openPost && fullscreenImage ? (
+                                <div className="flex flex-col items-center gap-4">
+                                    <div className="flex w-full justify-start">
+                                        <button
+                                            type="button"
+                                            onClick={() =>
+                                                setFullscreenImage(null)
+                                            }
+                                            className="rounded-md bg-muted text-muted-foreground p-1.5 hover:bg-accent transition-colors"
+                                            aria-label="Back to post"
+                                        >
+                                            <ArrowLeft className="h-5 w-5" />
+                                        </button>
+                                    </div>
+                                    <img
+                                        src={fullscreenImage}
+                                        alt="Full size preview"
+                                        className="max-w-full max-h-[65vh] object-contain rounded-md"
+                                    />
+                                </div>
+                            ) : openPost ? (
+                                <div className="grid gap-4">
+                                    <div className="flex items-center gap-2 justify-between">
+                                        <div className="flex items-center gap-2">
+                                            <Avatar className="h-10 w-10">
+                                                <AvatarImage
+                                                    src={
+                                                        openPost.user.avatar
+                                                            ?.file ||
+                                                        "/courselit_backdrop_square.webp"
+                                                    }
+                                                    alt={`${openPost.user.name}'s avatar`}
+                                                />
+                                                <AvatarFallback>
+                                                    {openPost.user.name &&
+                                                        openPost.user.name
+                                                            .split(" ")
+                                                            .map((n) => n[0])
+                                                            .join("")}
+                                                </AvatarFallback>
+                                            </Avatar>
+                                            <div>
+                                                <div className="font-semibold">
+                                                    {openPost.user.name ||
+                                                        openPost.user.email}
+                                                </div>
+                                                <div className="text-sm text-muted-foreground">
+                                                    {formatTimestamp(
+                                                        openPost.updatedAt,
+                                                    )}{" "}
+                                                    • {openPost.category}
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger asChild>
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    className="h-8 w-8 p-0"
+                                                >
+                                                    <span className="sr-only">
+                                                        Open menu
+                                                    </span>
+                                                    <MoreVertical className="h-4 w-4" />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent align="end">
+                                                {membership &&
+                                                    hasCommunityPermission(
+                                                        membership,
+                                                        Constants.MembershipRole
+                                                            .MODERATE,
+                                                    ) && (
+                                                        <DropdownMenuItem
+                                                            className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                                                            onClick={() =>
+                                                                togglePin(
+                                                                    openPost.postId,
+                                                                )
+                                                            }
+                                                        >
+                                                            <Pin className="h-4 w-4" />
+                                                            {openPost.pinned
+                                                                ? "Unpin"
+                                                                : "Pin"}
+                                                        </DropdownMenuItem>
+                                                    )}
+                                                {profile.userId !==
+                                                    openPost.user.userId && (
+                                                    <DropdownMenuItem
+                                                        className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                                                        onClick={() =>
+                                                            handleReportPost(
+                                                                openPost,
+                                                            )
+                                                        }
+                                                    >
+                                                        <FlagTriangleRight className="h-4 w-4" />{" "}
+                                                        Report
+                                                    </DropdownMenuItem>
+                                                )}
+                                                {profile.userId ===
+                                                    openPost.user.userId && (
+                                                    <DropdownMenuItem
+                                                        className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                                                        onClick={() => {
+                                                            setOpenPostId(null);
+                                                            setPostToEdit(
+                                                                openPost,
+                                                            );
+                                                            setIsEditModalOpen(
+                                                                true,
+                                                            );
+                                                        }}
+                                                    >
+                                                        <MessageSquare className="h-4 w-4" />
+                                                        Edit
+                                                    </DropdownMenuItem>
+                                                )}
+                                                {((membership &&
+                                                    hasCommunityPermission(
+                                                        membership,
+                                                        Constants.MembershipRole
+                                                            .MODERATE,
+                                                    )) ||
+                                                    openPost.user.userId ===
+                                                        profile.userId) && (
+                                                    <DropdownMenuItem
+                                                        className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                                                        onClick={() =>
+                                                            handleDeletePost(
+                                                                openPost,
+                                                            )
+                                                        }
+                                                    >
+                                                        <Trash className="h-4 w-4" />
+                                                        Delete
+                                                    </DropdownMenuItem>
+                                                )}
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </div>
+                                    <div>
+                                        <p className="text-base mb-4 font-semibold">
+                                            {openPost.title}
+                                        </p>
+                                        <p className="text-sm mb-4 whitespace-pre-wrap">
+                                            {openPost.content}
+                                        </p>
+                                    </div>
+                                    {openPost.media && (
+                                        <div className="flex gap-2 overflow-x-auto">
+                                            {openPost.media.map(
+                                                (media, index) => (
+                                                    <div
+                                                        className="flex-shrink-0"
+                                                        key={
+                                                            media.media
+                                                                ?.mediaId ||
+                                                            media.url ||
+                                                            `${media.type}:${media.title || "untitled"}:${index}`
+                                                        }
+                                                    >
+                                                        {renderMediaPreview(
+                                                            media,
+                                                            {
+                                                                renderActualFile:
+                                                                    true,
+                                                            },
+                                                        )}
+                                                    </div>
+                                                ),
+                                            )}
+                                        </div>
+                                    )}
+                                    <div className="flex items-center gap-4">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            className={`text-muted-foreground ${openPost.hasLiked ? "bg-accent" : ""}`}
+                                            onClick={() =>
+                                                handleLike(openPost.postId)
+                                            }
+                                        >
+                                            <ThumbsUp className="h-4 w-4 mr-2" />
+                                            {openPost.likesCount}
+                                        </Button>
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            className="text-muted-foreground"
+                                        >
+                                            <MessageSquare className="h-4 w-4 mr-2" />
+                                            {openPost.commentsCount}
+                                        </Button>
+                                    </div>
+                                    {membership && (
+                                        <CommentSection
+                                            membership={membership}
+                                            postId={openPost.postId}
+                                            communityId={id!}
+                                            onPostUpdated={(
+                                                postId: string,
+                                                count: number,
+                                            ) => {
+                                                setPosts((prevPosts) =>
+                                                    prevPosts.map((p) =>
+                                                        p.postId === postId
+                                                            ? {
+                                                                  ...p,
+                                                                  commentsCount:
+                                                                      count,
+                                                              }
+                                                            : p,
+                                                    ),
+                                                );
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            ) : null}
+                        </DialogContent>
+                    </Dialog>
                 </div>
                 <div className="lg:col-start-3 lg:row-start-1">
                     {community && (
diff --git a/apps/web/components/community/media-item.ts b/apps/web/components/community/media-item.ts
index e30c06202..45447a2fa 100644
--- a/apps/web/components/community/media-item.ts
+++ b/apps/web/components/community/media-item.ts
@@ -1,6 +1,7 @@
 import { CommunityMedia } from "@courselit/common-models";
 
 export interface MediaItem extends CommunityMedia {
-    // fileSize?: string;
     file?: File;
+    clientId?: string;
+    fileSize?: string;
 }
diff --git a/apps/web/components/community/media-preview.tsx b/apps/web/components/community/media-preview.tsx
index e3c950c43..b6e441a43 100644
--- a/apps/web/components/community/media-preview.tsx
+++ b/apps/web/components/community/media-preview.tsx
@@ -1,27 +1,36 @@
 "use client";
 
+import { memo } from "react";
 import { FileText, Video, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { type MediaItem } from "./media-item";
 
 interface MediaPreviewProps {
-    items: Array<{
-        type: "youtube" | "pdf" | "image" | "video" | "gif";
-        url?: string;
-        title?: string;
-        fileSize?: string;
-    }>;
+    items: MediaItem[];
     onRemove: (index: number) => void;
 }
 
-export function MediaPreview({ items, onRemove }: MediaPreviewProps) {
+function MediaPreviewComponent({ items, onRemove }: MediaPreviewProps) {
     if (items.length === 0) return null;
 
+    const getItemKey = (item: MediaItem) =>
+        item.clientId ||
+        item.media?.mediaId ||
+        (item.url ? `${item.type}:${item.url}` : undefined) ||
+        (item.title ? `${item.type}:${item.title}` : undefined);
+
+    const getPreviewSrc = (item: MediaItem) =>
+        item.url || item.media?.thumbnail || item.media?.file;
+
     return (
         <ScrollArea className="w-full whitespace-nowrap rounded-md border">
             <div className="flex space-x-4 p-4">
                 {items.map((item, index) => (
-                    <div key={index} className="relative shrink-0">
+                    <div
+                        key={getItemKey(item) || `${item.type}:${index}`}
+                        className="relative shrink-0"
+                    >
                         <div className="w-[180px]">
                             <div className="aspect-video w-full overflow-hidden rounded-md bg-muted flex items-center justify-center">
                                 {item.type === "youtube" && (
@@ -30,30 +39,40 @@ export function MediaPreview({ items, onRemove }: MediaPreviewProps) {
                                 {item.type === "pdf" && (
                                     <FileText className="h-10 w-10 text-muted-foreground" />
                                 )}
-                                {item.type === "image" && (
-                                    <img
-                                        src={item.url}
-                                        alt={item.title}
-                                        className="object-cover w-full h-full"
-                                    />
-                                )}
+                                {item.type === "image" &&
+                                    (getPreviewSrc(item) ? (
+                                        <img
+                                            src={getPreviewSrc(item)}
+                                            alt={item.title}
+                                            className="object-cover w-full h-full"
+                                        />
+                                    ) : (
+                                        <FileText className="h-10 w-10 text-muted-foreground" />
+                                    ))}
                                 {item.type === "video" && (
                                     <Video className="h-10 w-10 text-muted-foreground" />
                                 )}
-                                {item.type === "gif" && (
-                                    <img
-                                        src={item.url}
-                                        alt={item.title}
-                                        className="object-cover w-full h-full"
-                                    />
-                                )}
+                                {item.type === "gif" &&
+                                    (getPreviewSrc(item) ? (
+                                        <img
+                                            src={getPreviewSrc(item)}
+                                            alt={item.title}
+                                            className="object-cover w-full h-full"
+                                        />
+                                    ) : (
+                                        <FileText className="h-10 w-10 text-muted-foreground" />
+                                    ))}
                             </div>
                             <p className="mt-1 text-sm font-medium truncate">
                                 {item.title}
                             </p>
                             {item.type === "pdf" && (
                                 <p className="text-xs text-muted-foreground">
-                                    PDF • {item.fileSize}
+                                    PDF •{" "}
+                                    {item.fileSize ||
+                                        (item.media?.size
+                                            ? `${(item.media.size / (1024 * 1024)).toFixed(1)}mb`
+                                            : "")}
                                 </p>
                             )}
                         </div>
@@ -72,3 +91,5 @@ export function MediaPreview({ items, onRemove }: MediaPreviewProps) {
         </ScrollArea>
     );
 }
+
+export const MediaPreview = memo(MediaPreviewComponent);
diff --git a/apps/web/components/community/optimize-create-dialog.md b/apps/web/components/community/optimize-create-dialog.md
new file mode 100644
index 000000000..93113c8b5
--- /dev/null
+++ b/apps/web/components/community/optimize-create-dialog.md
@@ -0,0 +1,130 @@
+# Create Post Dialog Architecture and Performance Review
+
+## Scope
+
+This review covers:
+
+- `apps/web/components/community/create-post-dialog.tsx`
+- Child components used in the dialog:
+    - `apps/web/components/community/gif-selector.tsx`
+    - `apps/web/components/community/media-preview.tsx`
+    - `apps/web/components/community/emoji-picker.tsx`
+- Parent integration points in `apps/web/components/community/index.tsx`
+
+## Assessment
+
+The current implementation is functional and reasonably optimized for light usage, but it is not yet robust for heavier create/edit workflows. The primary issues are state mutation across component boundaries and weak async race handling.
+
+## Findings (highest impact first)
+
+### 1) Input object mutation across component boundary
+
+- Parent `createPost` mutates `newPost.media` and each media item in place (`m.file = undefined`, `m.url = undefined`) in:
+    - `apps/web/components/community/index.tsx:406`
+    - `apps/web/components/community/index.tsx:581`
+- Child passes its own `media` state directly in:
+    - `apps/web/components/community/create-post-dialog.tsx:249`
+
+Why this matters:
+
+- Breaks immutability expectations between parent/child.
+- Can cause subtle UI/state bugs in preview, cleanup, and edit flow.
+- Makes behavior harder to reason about and test.
+
+### 2) GIF search race condition and missing fetch cancellation
+
+- Debounce is used, but in-flight requests are not aborted in:
+    - `apps/web/components/community/gif-selector.tsx:20`
+    - `apps/web/components/community/gif-selector.tsx:45`
+
+Why this matters:
+
+- Stale responses can overwrite newer search results.
+- Users on slow networks may see “result jumping” backward.
+
+### 3) Inconsistent upload state contract
+
+- `isFileUploading` is declared and passed, but unused in dialog:
+    - Declared: `apps/web/components/community/create-post-dialog.tsx:54`
+    - Passed: `apps/web/components/community/index.tsx:1046`, `apps/web/components/community/index.tsx:1330`
+- Upload progress display is tied to `isPosting`, not explicit upload state.
+
+Why this matters:
+
+- Ambiguous ownership of loading/progress UI.
+- Easier to regress upload UX during refactors.
+
+### 4) Unstable keys in media preview list
+
+- Media preview uses array index as key:
+    - `apps/web/components/community/media-preview.tsx:25`
+
+Why this matters:
+
+- Removing/reordering items causes unnecessary remounts.
+- Can produce visual glitches and extra repaint work.
+
+### 5) Submit/reset flow fragile to parent behavior changes
+
+- `handlePost` lacks local `try/finally` guard:
+    - `apps/web/components/community/create-post-dialog.tsx:230`
+- It assumes parent handles errors and always resolves safely.
+
+Why this matters:
+
+- If parent later throws, `isPosting` can become stuck.
+- Error boundaries between layers are unclear.
+
+## Performance posture
+
+What is already good:
+
+- Core handlers are wrapped in `useCallback`.
+- Derived values use `useMemo` where reasonable.
+- `CreatePostDialog` is dynamically imported from parent.
+- Blob URL cleanup is implemented.
+
+What remains weak under scale:
+
+- GIF fetch race conditions.
+- Non-virtualized image-heavy grids/previews.
+- Index keys in preview lists.
+- Mutation-driven rerender unpredictability.
+
+## Architecture posture
+
+Current state is a “fat component”: form state, media orchestration, validation, and submit lifecycle all live in one component.
+
+Suggested target shape:
+
+- `usePostComposer` hook for form and validation lifecycle.
+- `PostComposerMedia` for attachment/GIF/video orchestration.
+- Presentational dialog shell kept mostly stateless.
+
+This split would reduce coupling and make create/edit behavior easier to test.
+
+## Prioritized recommendations
+
+1. Make `createPost` and `uploadAttachments` immutable (clone media payload before transformations).
+2. Add GIF request cancellation or request-sequencing safeguards to avoid stale overwrites.
+3. Replace index keys in preview items with stable client-generated ids.
+4. Normalize upload/posting state contract (`isPosting` vs `isFileUploading`) and enforce local `try/finally` in submit flow.
+
+## Task list (easy -> hard, tick as completed)
+
+### Easy
+
+- [x] Remove or use `isFileUploading` in `CreatePostDialog` to make the prop contract consistent.
+- [x] Add local `try/finally` in `handlePost` so `isPosting` always resets.
+- [x] Replace media preview index keys with a stable key strategy where available.
+
+### Medium
+
+- [x] Add request ordering or `AbortController` cancellation in `GifSelector` so stale requests cannot overwrite current query results.
+- [x] Add/adjust tests around post creation/edit submission states (especially loading and error paths).
+
+### Hard
+
+- [ ] Refactor `createPost`/`uploadAttachments` to be fully immutable and side-effect free with respect to caller-owned objects.
+- [ ] Extract post composer logic into composable units (`usePostComposer`, media orchestration component/hook), reducing `create-post-dialog.tsx` scope.
+- [ ] Evaluate virtualization/lazy-loading strategy for GIF/media-heavy surfaces if usage patterns show large payloads.
diff --git a/apps/web/graphql/communities/__tests__/create-community-post.test.ts b/apps/web/graphql/communities/__tests__/create-community-post.test.ts
new file mode 100644
index 000000000..0f1bb5917
--- /dev/null
+++ b/apps/web/graphql/communities/__tests__/create-community-post.test.ts
@@ -0,0 +1,441 @@
+/**
+ * @jest-environment node
+ */
+
+import { createCommunityPost } from "../logic";
+import CommunityModel from "@models/Community";
+import CommunityPostModel from "@models/CommunityPost";
+import MembershipModel from "@models/Membership";
+import PaymentPlanModel from "@models/PaymentPlan";
+import PageModel from "@models/Page";
+import DomainModel from "@models/Domain";
+import UserModel from "@models/User";
+import CommunityPostSubscriberModel from "@models/CommunityPostSubscriber";
+import constants from "@/config/constants";
+import { Constants } from "@courselit/common-models";
+
+jest.mock("@/services/medialit");
+jest.mock("@/services/queue");
+
+// Ensure generateUniqueId is not mocked, but mock nanoid properly if needed
+jest.mock("nanoid", () => ({
+    nanoid: () => Math.random().toString(36).substring(7),
+}));
+jest.unmock("@courselit/utils");
+
+const SUITE_PREFIX = `ccp-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+const id = (suffix: string) => `${SUITE_PREFIX}-${suffix}`;
+const email = (suffix: string) => `${suffix}-${SUITE_PREFIX}@example.com`;
+
+describe("createCommunityPost", () => {
+    let testDomain: any;
+    let adminUser: any;
+    let regularUser: any;
+    let commentOnlyUser: any;
+    let community: any;
+    let adminCtx: any;
+    let regularCtx: any;
+    let commentOnlyCtx: any;
+
+    beforeAll(async () => {
+        testDomain = await DomainModel.create({
+            name: id("domain"),
+            email: email("domain"),
+        });
+
+        adminUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("admin"),
+            email: email("admin"),
+            name: "Admin User",
+            permissions: [constants.permissions.manageCommunity],
+            active: true,
+            unsubscribeToken: id("unsub-admin"),
+        });
+
+        regularUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("regular"),
+            email: email("regular"),
+            name: "Regular User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-regular"),
+        });
+
+        commentOnlyUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("comment-only"),
+            email: email("comment-only"),
+            name: "Comment Only User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-comment-only"),
+        });
+
+        // Internal payment plan (required by the system)
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("internal-plan"),
+            userId: adminUser.userId,
+            entityId: "internal",
+            entityType: Constants.MembershipEntityType.COURSE,
+            type: "free",
+            name: constants.internalPaymentPlanName,
+            internal: true,
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        community = await CommunityModel.create({
+            domain: testDomain._id,
+            communityId: id("community"),
+            name: "Test Community",
+            pageId: id("page"),
+            slug: id("page"),
+            enabled: true,
+            deleted: false,
+            categories: ["General", "Announcements"],
+        });
+
+        await PageModel.create({
+            domain: testDomain._id,
+            pageId: community.pageId,
+            type: constants.communityPage,
+            creatorId: adminUser.userId,
+            name: community.name,
+            entityId: community.communityId,
+        });
+
+        // Free payment plan for the community
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("free-plan"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            type: Constants.PaymentPlanType.FREE,
+            name: "Free Community Plan",
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        // Admin membership (MODERATE role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("admin-membership"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("admin-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.MODERATE,
+        });
+
+        // Regular user membership (POST role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("regular-membership"),
+            userId: regularUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("regular-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.POST,
+        });
+
+        // Comment-only user membership (COMMENT role — cannot post)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("comment-membership"),
+            userId: commentOnlyUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("comment-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.COMMENT,
+        });
+
+        adminCtx = { user: adminUser, subdomain: testDomain } as any;
+        regularCtx = { user: regularUser, subdomain: testDomain } as any;
+        commentOnlyCtx = {
+            user: commentOnlyUser,
+            subdomain: testDomain,
+        } as any;
+    });
+
+    afterEach(async () => {
+        await CommunityPostModel.deleteMany({ domain: testDomain._id });
+        await CommunityPostSubscriberModel.deleteMany({
+            domain: testDomain._id,
+        });
+        jest.restoreAllMocks();
+    });
+
+    afterAll(async () => {
+        await Promise.all([
+            CommunityModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostSubscriberModel.deleteMany({
+                domain: testDomain._id,
+            }),
+            MembershipModel.deleteMany({ domain: testDomain._id }),
+            PaymentPlanModel.deleteMany({ domain: testDomain._id }),
+            PageModel.deleteMany({ domain: testDomain._id }),
+            UserModel.deleteMany({ domain: testDomain._id }),
+            DomainModel.deleteOne({ _id: testDomain._id }),
+        ]);
+    });
+
+    describe("Security & Validation", () => {
+        it("should require authentication", async () => {
+            const unauthCtx = { subdomain: testDomain } as any;
+
+            await expect(
+                createCommunityPost({
+                    communityId: community.communityId,
+                    title: "Test Post",
+                    content: "Test content",
+                    category: "General",
+                    ctx: unauthCtx,
+                }),
+            ).rejects.toThrow();
+        });
+
+        it("should throw item_not_found for a non-existent community", async () => {
+            await expect(
+                createCommunityPost({
+                    communityId: "nonexistent-community",
+                    title: "Test Post",
+                    content: "Test content",
+                    category: "General",
+                    ctx: regularCtx,
+                }),
+            ).rejects.toThrow("Item not found");
+        });
+
+        it("should throw action_not_allowed for a user with no membership", async () => {
+            const noMemberUser = await UserModel.create({
+                domain: testDomain._id,
+                userId: id("no-member"),
+                email: email("no-member"),
+                name: "No Member User",
+                permissions: [],
+                active: true,
+                unsubscribeToken: id("unsub-no-member"),
+            });
+
+            const noMemberCtx = {
+                user: noMemberUser,
+                subdomain: testDomain,
+            } as any;
+
+            await expect(
+                createCommunityPost({
+                    communityId: community.communityId,
+                    title: "Test Post",
+                    content: "Test content",
+                    category: "General",
+                    ctx: noMemberCtx,
+                }),
+            ).rejects.toThrow("You do not have rights to perform this action");
+
+            await UserModel.deleteOne({ _id: noMemberUser._id });
+        });
+
+        it("should throw action_not_allowed for a user with COMMENT role", async () => {
+            await expect(
+                createCommunityPost({
+                    communityId: community.communityId,
+                    title: "Test Post",
+                    content: "Test content",
+                    category: "General",
+                    ctx: commentOnlyCtx,
+                }),
+            ).rejects.toThrow("You do not have rights to perform this action");
+        });
+
+        it("should throw invalid_category for a category not in the community", async () => {
+            await expect(
+                createCommunityPost({
+                    communityId: community.communityId,
+                    title: "Test Post",
+                    content: "Test content",
+                    category: "Nonexistent Category",
+                    ctx: regularCtx,
+                }),
+            ).rejects.toThrow("Invalid category");
+        });
+    });
+
+    describe("Successful Post Creation", () => {
+        it("should create a post and return the formatted PublicPost shape", async () => {
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "My First Post",
+                content: "Hello world",
+                category: "General",
+                ctx: regularCtx,
+            });
+
+            expect(result).toMatchObject({
+                communityId: community.communityId,
+                title: "My First Post",
+                content: "Hello world",
+                category: "General",
+                userId: regularUser.userId,
+                likesCount: 0,
+                hasLiked: false,
+            });
+            expect(result.postId).toBeDefined();
+        });
+
+        it("should persist the post in the database", async () => {
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "Persisted Post",
+                content: "Should be in DB",
+                category: "General",
+                ctx: regularCtx,
+            });
+
+            const dbPost = await CommunityPostModel.findOne({
+                domain: testDomain._id,
+                postId: result.postId,
+            });
+
+            expect(dbPost).not.toBeNull();
+            expect(dbPost!.title).toBe("Persisted Post");
+            expect(dbPost!.content).toBe("Should be in DB");
+            expect(dbPost!.category).toBe("General");
+            expect(dbPost!.userId).toBe(regularUser.userId);
+        });
+
+        it("should create a post subscription for the author", async () => {
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "Sub Post",
+                content: "Subscription test",
+                category: "General",
+                ctx: regularCtx,
+            });
+
+            const subscription = await CommunityPostSubscriberModel.findOne({
+                domain: testDomain._id,
+                postId: result.postId,
+                userId: regularUser.userId,
+            });
+
+            expect(subscription).not.toBeNull();
+        });
+
+        it("should allow an admin (MODERATE role) to create a post", async () => {
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "Admin Post",
+                content: "Posted by admin",
+                category: "Announcements",
+                ctx: adminCtx,
+            });
+
+            expect(result).toMatchObject({
+                communityId: community.communityId,
+                title: "Admin Post",
+                category: "Announcements",
+                userId: adminUser.userId,
+            });
+        });
+
+        it("should accept a post with no media", async () => {
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "No Media Post",
+                content: "Just text",
+                category: "General",
+                ctx: regularCtx,
+            });
+
+            expect(result.postId).toBeDefined();
+            expect(result.media).toEqual([]);
+        });
+    });
+
+    describe("Media Handling", () => {
+        it("should call sealMedia for each media item", async () => {
+            const { sealMedia } = require("@/services/medialit");
+            sealMedia.mockResolvedValue({
+                mediaId: "sealed-media-id",
+                originalFileName: "test.jpg",
+                mimeType: "image/jpeg",
+                size: 1024,
+                access: "public",
+                file: "sealed-test.jpg",
+                thumbnail: "sealed-thumb.jpg",
+                caption: "Sealed",
+            });
+
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "Media Post",
+                content: "Post with media",
+                category: "General",
+                media: [
+                    {
+                        title: "Media 1",
+                        type: "image" as any,
+                        media: {
+                            mediaId: "temp-media-1",
+                            originalFileName: "photo1.jpg",
+                            mimeType: "image/jpeg",
+                            size: 1024,
+                            access: "public",
+                            file: "photo1.jpg",
+                            thumbnail: "thumb1.jpg",
+                        },
+                    },
+                    {
+                        title: "Media 2",
+                        type: "image" as any,
+                        media: {
+                            mediaId: "temp-media-2",
+                            originalFileName: "photo2.jpg",
+                            mimeType: "image/jpeg",
+                            size: 2048,
+                            access: "public",
+                            file: "photo2.jpg",
+                            thumbnail: "thumb2.jpg",
+                        },
+                    },
+                ],
+                ctx: regularCtx,
+            });
+
+            expect(sealMedia).toHaveBeenCalledTimes(2);
+            expect(sealMedia).toHaveBeenCalledWith("temp-media-1");
+            expect(sealMedia).toHaveBeenCalledWith("temp-media-2");
+            expect(result.postId).toBeDefined();
+        });
+    });
+
+    describe("Activity Recording", () => {
+        it("should not crash when activity recording fails", async () => {
+            // The function catches errors from recordActivity, so this should not throw
+            const result = await createCommunityPost({
+                communityId: community.communityId,
+                title: "Activity Error Post",
+                content: "Should not crash",
+                category: "General",
+                ctx: regularCtx,
+            });
+
+            // Post should still be created successfully
+            expect(result.postId).toBeDefined();
+            expect(result.title).toBe("Activity Error Post");
+        });
+    });
+});
diff --git a/apps/web/graphql/communities/__tests__/delete-community-post.test.ts b/apps/web/graphql/communities/__tests__/delete-community-post.test.ts
new file mode 100644
index 000000000..5b95651b6
--- /dev/null
+++ b/apps/web/graphql/communities/__tests__/delete-community-post.test.ts
@@ -0,0 +1,400 @@
+/**
+ * @jest-environment node
+ */
+
+import { createCommunityPost, deleteCommunityPost } from "../logic";
+import CommunityModel from "@models/Community";
+import CommunityPostModel from "@models/CommunityPost";
+import CommunityCommentModel from "@models/CommunityComment";
+import MembershipModel from "@models/Membership";
+import PaymentPlanModel from "@models/PaymentPlan";
+import PageModel from "@models/Page";
+import DomainModel from "@models/Domain";
+import UserModel from "@models/User";
+import CommunityPostSubscriberModel from "@models/CommunityPostSubscriber";
+import constants from "@/config/constants";
+import { Constants } from "@courselit/common-models";
+
+jest.mock("@/services/medialit");
+jest.mock("@/services/queue");
+
+jest.mock("nanoid", () => ({
+    nanoid: () => Math.random().toString(36).substring(7),
+}));
+jest.unmock("@courselit/utils");
+
+const SUITE_PREFIX = `dcp-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+const id = (suffix: string) => `${SUITE_PREFIX}-${suffix}`;
+const email = (suffix: string) => `${suffix}-${SUITE_PREFIX}@example.com`;
+
+describe("deleteCommunityPost", () => {
+    let testDomain: any;
+    let adminUser: any;
+    let regularUser: any;
+    let otherMemberUser: any;
+    let community: any;
+    let adminCtx: any;
+    let regularCtx: any;
+    let otherMemberCtx: any;
+
+    let existingPost: any;
+
+    beforeAll(async () => {
+        testDomain = await DomainModel.create({
+            name: id("domain"),
+            email: email("domain"),
+        });
+
+        adminUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("admin"),
+            email: email("admin"),
+            name: "Admin User",
+            permissions: [constants.permissions.manageCommunity],
+            active: true,
+            unsubscribeToken: id("unsub-admin"),
+        });
+
+        regularUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("regular"),
+            email: email("regular"),
+            name: "Regular User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-regular"),
+        });
+
+        otherMemberUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("other"),
+            email: email("other"),
+            name: "Other User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-other"),
+        });
+
+        // Internal payment plan (required by the system)
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("internal-plan"),
+            userId: adminUser.userId,
+            entityId: "internal",
+            entityType: Constants.MembershipEntityType.COURSE,
+            type: "free",
+            name: constants.internalPaymentPlanName,
+            internal: true,
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        community = await CommunityModel.create({
+            domain: testDomain._id,
+            communityId: id("community"),
+            name: "Test Community",
+            pageId: id("page"),
+            slug: id("page"),
+            enabled: true,
+            deleted: false,
+            categories: ["General", "Announcements"],
+        });
+
+        await PageModel.create({
+            domain: testDomain._id,
+            pageId: community.pageId,
+            type: constants.communityPage,
+            creatorId: adminUser.userId,
+            name: community.name,
+            entityId: community.communityId,
+        });
+
+        // Free payment plan for the community
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("free-plan"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            type: Constants.PaymentPlanType.FREE,
+            name: "Free Community Plan",
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        // Admin membership (MODERATE role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("admin-membership"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("admin-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.MODERATE,
+        });
+
+        // Regular user membership (POST role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("regular-membership"),
+            userId: regularUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("regular-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.POST,
+        });
+
+        // Other member membership (POST role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("other-membership"),
+            userId: otherMemberUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("other-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.POST,
+        });
+
+        adminCtx = { user: adminUser, subdomain: testDomain } as any;
+        regularCtx = { user: regularUser, subdomain: testDomain } as any;
+        otherMemberCtx = {
+            user: otherMemberUser,
+            subdomain: testDomain,
+        } as any;
+    });
+
+    beforeEach(async () => {
+        existingPost = await createCommunityPost({
+            communityId: community.communityId,
+            title: "Original Title",
+            content: "Original Content",
+            category: "General",
+            ctx: regularCtx, // regularUser is the author
+        });
+    });
+
+    afterEach(async () => {
+        await CommunityPostModel.deleteMany({ domain: testDomain._id });
+        await CommunityCommentModel.deleteMany({ domain: testDomain._id });
+        await CommunityPostSubscriberModel.deleteMany({
+            domain: testDomain._id,
+        });
+        jest.restoreAllMocks();
+    });
+
+    afterAll(async () => {
+        await Promise.all([
+            CommunityModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostModel.deleteMany({ domain: testDomain._id }),
+            CommunityCommentModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostSubscriberModel.deleteMany({ domain: testDomain._id }),
+            MembershipModel.deleteMany({ domain: testDomain._id }),
+            PaymentPlanModel.deleteMany({ domain: testDomain._id }),
+            PageModel.deleteMany({ domain: testDomain._id }),
+            UserModel.deleteMany({ domain: testDomain._id }),
+            DomainModel.deleteOne({ _id: testDomain._id }),
+        ]);
+    });
+
+    describe("Security & Validation", () => {
+        it("should require authentication", async () => {
+            const unauthCtx = { subdomain: testDomain } as any;
+
+            await expect(
+                deleteCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    ctx: unauthCtx,
+                }),
+            ).rejects.toThrow();
+        });
+
+        it("should throw action_not_allowed if missing membership", async () => {
+            const noMemberUser = await UserModel.create({
+                domain: testDomain._id,
+                userId: id("no-member-del"),
+                email: email("no-member-del"),
+                name: "No Member User",
+                permissions: [],
+                active: true,
+                unsubscribeToken: id("unsub-no-member-del"),
+            });
+
+            const noMemberCtx = {
+                user: noMemberUser,
+                subdomain: testDomain,
+            } as any;
+
+            await expect(
+                deleteCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    ctx: noMemberCtx,
+                }),
+            ).rejects.toThrow("Item not found");
+
+            await UserModel.deleteOne({ _id: noMemberUser._id });
+        });
+
+        it("should throw item_not_found if a regular member tries to delete someone else's post", async () => {
+            await expect(
+                deleteCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    ctx: otherMemberCtx, // they are a member, but didn't write it
+                }),
+            ).rejects.toThrow("Item not found");
+        });
+    });
+
+    describe("Successful Deletion", () => {
+        it("should allow the author to delete their own post", async () => {
+            await deleteCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                ctx: regularCtx,
+            });
+
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost).toBeNull();
+        });
+
+        it("should allow an admin (moderator) to delete someone else's post", async () => {
+            await deleteCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                ctx: adminCtx,
+            });
+
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost).toBeNull();
+        });
+
+        it("should delete associated comments", async () => {
+            await CommunityCommentModel.create({
+                domain: testDomain._id,
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                commentId: "comment1",
+                userId: regularUser.userId,
+                content: "comment content",
+            });
+
+            await deleteCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                ctx: regularCtx,
+            });
+
+            const dbComments = await CommunityCommentModel.find({
+                postId: existingPost.postId,
+            });
+            expect(dbComments.length).toBe(0);
+        });
+    });
+
+    describe("Media Handling", () => {
+        it("should delete media but not fail if media deletion throws", async () => {
+            const medialit = require("@/services/medialit");
+
+            // Mock deleteMedia to simulate a transient storage failure
+            medialit.deleteMedia.mockRejectedValue(new Error("Storage error"));
+
+            // Manually add media to the post
+            await CommunityPostModel.updateOne(
+                { postId: existingPost.postId },
+                {
+                    $set: {
+                        media: [
+                            {
+                                type: "image",
+                                title: "pic",
+                                url: "",
+                                media: {
+                                    mediaId: "media-to-delete",
+                                    originalFileName: "p.jpg",
+                                    mimeType: "image/jpeg",
+                                    size: 10,
+                                    access: "public",
+                                    file: "p.jpg",
+                                    thumbnail: "p.jpg",
+                                } as any,
+                            },
+                        ],
+                    },
+                },
+            );
+
+            // Should not throw, even though deleteMedia rejected
+            await deleteCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                ctx: regularCtx,
+            });
+
+            expect(medialit.deleteMedia).toHaveBeenCalledWith(
+                "media-to-delete",
+            );
+
+            // Post should be deleted regardless of deleteMedia failure
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost).toBeNull();
+        });
+
+        it("should successfully call deleteMedia if no error occurs", async () => {
+            const medialit = require("@/services/medialit");
+            medialit.deleteMedia.mockResolvedValue(true);
+
+            await CommunityPostModel.updateOne(
+                { postId: existingPost.postId },
+                {
+                    $set: {
+                        media: [
+                            {
+                                type: "image",
+                                title: "pic",
+                                url: "",
+                                media: {
+                                    mediaId: "media-success",
+                                    originalFileName: "p.jpg",
+                                    mimeType: "image/jpeg",
+                                    size: 10,
+                                    access: "public",
+                                    file: "p.jpg",
+                                    thumbnail: "p.jpg",
+                                } as any,
+                            },
+                        ],
+                    },
+                },
+            );
+
+            await deleteCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                ctx: regularCtx,
+            });
+
+            expect(medialit.deleteMedia).toHaveBeenCalledWith("media-success");
+
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost).toBeNull();
+        });
+    });
+});
diff --git a/apps/web/graphql/communities/__tests__/update-community-post.test.ts b/apps/web/graphql/communities/__tests__/update-community-post.test.ts
new file mode 100644
index 000000000..cd017d89e
--- /dev/null
+++ b/apps/web/graphql/communities/__tests__/update-community-post.test.ts
@@ -0,0 +1,476 @@
+/**
+ * @jest-environment node
+ */
+
+import { createCommunityPost, updateCommunityPost } from "../logic";
+import CommunityModel from "@models/Community";
+import CommunityPostModel from "@models/CommunityPost";
+import MembershipModel from "@models/Membership";
+import PaymentPlanModel from "@models/PaymentPlan";
+import PageModel from "@models/Page";
+import DomainModel from "@models/Domain";
+import UserModel from "@models/User";
+import CommunityPostSubscriberModel from "@models/CommunityPostSubscriber";
+import constants from "@/config/constants";
+import { Constants } from "@courselit/common-models";
+
+jest.mock("@/services/medialit");
+jest.mock("@/services/queue");
+
+jest.mock("nanoid", () => ({
+    nanoid: () => Math.random().toString(36).substring(7),
+}));
+jest.unmock("@courselit/utils");
+
+const SUITE_PREFIX = `ucp-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+const id = (suffix: string) => `${SUITE_PREFIX}-${suffix}`;
+const email = (suffix: string) => `${suffix}-${SUITE_PREFIX}@example.com`;
+
+describe("updateCommunityPost", () => {
+    let testDomain: any;
+    let adminUser: any;
+    let regularUser: any;
+    let otherMemberUser: any;
+    let community: any;
+    let adminCtx: any;
+    let regularCtx: any;
+    let otherMemberCtx: any;
+
+    let existingPost: any;
+
+    beforeAll(async () => {
+        testDomain = await DomainModel.create({
+            name: id("domain"),
+            email: email("domain"),
+        });
+
+        adminUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("admin"),
+            email: email("admin"),
+            name: "Admin User",
+            permissions: [constants.permissions.manageCommunity],
+            active: true,
+            unsubscribeToken: id("unsub-admin"),
+        });
+
+        regularUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("regular"),
+            email: email("regular"),
+            name: "Regular User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-regular"),
+        });
+
+        otherMemberUser = await UserModel.create({
+            domain: testDomain._id,
+            userId: id("other"),
+            email: email("other"),
+            name: "Other User",
+            permissions: [],
+            active: true,
+            unsubscribeToken: id("unsub-other"),
+        });
+
+        // Internal payment plan (required by the system)
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("internal-plan"),
+            userId: adminUser.userId,
+            entityId: "internal",
+            entityType: Constants.MembershipEntityType.COURSE,
+            type: "free",
+            name: constants.internalPaymentPlanName,
+            internal: true,
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        community = await CommunityModel.create({
+            domain: testDomain._id,
+            communityId: id("community"),
+            name: "Test Community",
+            pageId: id("page"),
+            slug: id("page"),
+            enabled: true,
+            deleted: false,
+            categories: ["General", "Announcements"],
+        });
+
+        await PageModel.create({
+            domain: testDomain._id,
+            pageId: community.pageId,
+            type: constants.communityPage,
+            creatorId: adminUser.userId,
+            name: community.name,
+            entityId: community.communityId,
+        });
+
+        // Free payment plan for the community
+        await PaymentPlanModel.create({
+            domain: testDomain._id,
+            planId: id("free-plan"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            type: Constants.PaymentPlanType.FREE,
+            name: "Free Community Plan",
+            interval: "monthly",
+            cost: 0,
+            currencyISOCode: "USD",
+        });
+
+        // Admin membership (MODERATE role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("admin-membership"),
+            userId: adminUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("admin-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.MODERATE,
+        });
+
+        // Regular user membership (POST role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("regular-membership"),
+            userId: regularUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("regular-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.POST,
+        });
+
+        // Other member membership (POST role)
+        await MembershipModel.create({
+            domain: testDomain._id,
+            membershipId: id("other-membership"),
+            userId: otherMemberUser.userId,
+            entityId: community.communityId,
+            entityType: Constants.MembershipEntityType.COMMUNITY,
+            paymentPlanId: id("free-plan"),
+            sessionId: id("other-session"),
+            status: Constants.MembershipStatus.ACTIVE,
+            role: Constants.MembershipRole.POST,
+        });
+
+        adminCtx = { user: adminUser, subdomain: testDomain } as any;
+        regularCtx = { user: regularUser, subdomain: testDomain } as any;
+        otherMemberCtx = {
+            user: otherMemberUser,
+            subdomain: testDomain,
+        } as any;
+    });
+
+    beforeEach(async () => {
+        // Create a fresh post before each test so it's isolated
+        existingPost = await createCommunityPost({
+            communityId: community.communityId,
+            title: "Original Title",
+            content: "Original Content",
+            category: "General",
+            ctx: regularCtx, // regularUser is the author
+        });
+    });
+
+    afterEach(async () => {
+        await CommunityPostModel.deleteMany({ domain: testDomain._id });
+        await CommunityPostSubscriberModel.deleteMany({
+            domain: testDomain._id,
+        });
+        jest.restoreAllMocks();
+    });
+
+    afterAll(async () => {
+        await Promise.all([
+            CommunityModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostModel.deleteMany({ domain: testDomain._id }),
+            CommunityPostSubscriberModel.deleteMany({
+                domain: testDomain._id,
+            }),
+            MembershipModel.deleteMany({ domain: testDomain._id }),
+            PaymentPlanModel.deleteMany({ domain: testDomain._id }),
+            PageModel.deleteMany({ domain: testDomain._id }),
+            UserModel.deleteMany({ domain: testDomain._id }),
+            DomainModel.deleteOne({ _id: testDomain._id }),
+        ]);
+    });
+
+    describe("Security & Validation", () => {
+        it("should require authentication", async () => {
+            const unauthCtx = { subdomain: testDomain } as any;
+
+            await expect(
+                updateCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    title: "Updated Title",
+                    ctx: unauthCtx,
+                }),
+            ).rejects.toThrow();
+        });
+
+        it("should throw action_not_allowed for a user with no membership", async () => {
+            const noMemberUser = await UserModel.create({
+                domain: testDomain._id,
+                userId: id("no-member"),
+                email: email("no-member"),
+                name: "No Member User",
+                permissions: [],
+                active: true,
+                unsubscribeToken: id("unsub-no-member"),
+            });
+
+            const noMemberCtx = {
+                user: noMemberUser,
+                subdomain: testDomain,
+            } as any;
+
+            await expect(
+                updateCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    title: "Updated Title",
+                    ctx: noMemberCtx,
+                }),
+            ).rejects.toThrow("You do not have rights to perform this action");
+
+            await UserModel.deleteOne({ _id: noMemberUser._id });
+        });
+
+        it("should throw action_not_allowed for another member attempting to edit", async () => {
+            await expect(
+                updateCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    title: "Updated Title",
+                    ctx: otherMemberCtx,
+                }),
+            ).rejects.toThrow("You do not have rights to perform this action");
+        });
+
+        it("should throw invalid_category for a category not in the community", async () => {
+            await expect(
+                updateCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    category: "Nonexistent Category",
+                    ctx: regularCtx,
+                }),
+            ).rejects.toThrow("Invalid category");
+        });
+
+        it("should throw item_not_found if the post is deleted", async () => {
+            await CommunityPostModel.updateOne(
+                { postId: existingPost.postId },
+                { $set: { deleted: true } },
+            );
+
+            await expect(
+                updateCommunityPost({
+                    communityId: community.communityId,
+                    postId: existingPost.postId,
+                    title: "Updated",
+                    ctx: regularCtx,
+                }),
+            ).rejects.toThrow("Item not found");
+        });
+    });
+
+    describe("Successful Post Updates", () => {
+        it("should update title, content, and category for the owner", async () => {
+            const result = await updateCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                title: "Updated Title",
+                content: "Updated Content",
+                category: "Announcements",
+                ctx: regularCtx,
+            });
+
+            expect(result.title).toBe("Updated Title");
+            expect(result.content).toBe("Updated Content");
+            expect(result.category).toBe("Announcements");
+
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost!.title).toBe("Updated Title");
+            expect(dbPost!.content).toBe("Updated Content");
+            expect(dbPost!.category).toBe("Announcements");
+        });
+
+        it("should leave fields unchanged if not provided", async () => {
+            const result = await updateCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                title: "Only Title Changed",
+                ctx: regularCtx,
+            });
+
+            expect(result.title).toBe("Only Title Changed");
+            expect(result.content).toBe("Original Content");
+            expect(result.category).toBe("General");
+
+            // media undefined means do not touch media
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost!.media).toEqual([]);
+        });
+    });
+
+    describe("Media Handling", () => {
+        it("should call deleteMedia for removed media and sealMedia for newly added media", async () => {
+            const medialit = require("@/services/medialit");
+            medialit.sealMedia.mockResolvedValue({
+                mediaId: "new-media",
+                originalFileName: "new.jpg",
+                file: "new.jpg",
+                thumbnail: "new-thumb.jpg",
+                mimeType: "image/jpeg",
+                size: 1024,
+                access: "public",
+            });
+            medialit.deleteMedia.mockResolvedValue(true);
+
+            // First, update the post to have some initial media manually
+            await CommunityPostModel.updateOne(
+                { postId: existingPost.postId },
+                {
+                    $set: {
+                        media: [
+                            {
+                                type: "image",
+                                title: "old-pic",
+                                url: "",
+                                media: {
+                                    mediaId: "old-media-1",
+                                    originalFileName: "p.jpg",
+                                    mimeType: "image/jpeg",
+                                    size: 10,
+                                    access: "public",
+                                    file: "p.jpg",
+                                    thumbnail: "p.jpg",
+                                } as any,
+                            },
+                            {
+                                type: "video",
+                                title: "kept-vid",
+                                url: "",
+                                media: {
+                                    mediaId: "old-media-2",
+                                    originalFileName: "v.mp4",
+                                    mimeType: "video/mp4",
+                                    size: 10,
+                                    access: "public",
+                                    file: "v.mp4",
+                                    thumbnail: "v.jpg",
+                                } as any,
+                            },
+                        ],
+                    },
+                },
+            );
+
+            // Now perform update which removes old-media-1 and adds new-media
+            await updateCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                title: "Updated Media",
+                media: [
+                    {
+                        type: "video",
+                        title: "kept-vid",
+                        url: "",
+                        media: {
+                            mediaId: "old-media-2",
+                            originalFileName: "v.mp4",
+                            mimeType: "video/mp4",
+                            size: 10,
+                            access: "public",
+                            file: "v.mp4",
+                            thumbnail: "v.jpg",
+                        } as any,
+                    },
+                    {
+                        type: "image",
+                        title: "new-pic",
+                        url: "",
+                        media: {
+                            mediaId: "new-media",
+                            originalFileName: "n.jpg",
+                            mimeType: "image/jpeg",
+                            size: 10,
+                            access: "public",
+                            file: "n.jpg",
+                            thumbnail: "n.jpg",
+                        } as any,
+                    },
+                ],
+                ctx: regularCtx,
+            });
+
+            // old-media-1 should be deleted
+            expect(medialit.deleteMedia).toHaveBeenCalledWith("old-media-1");
+            expect(medialit.deleteMedia).not.toHaveBeenCalledWith(
+                "old-media-2",
+            );
+
+            // new-media should be sealed
+            expect(medialit.sealMedia).toHaveBeenCalledWith("new-media");
+            expect(medialit.sealMedia).not.toHaveBeenCalledWith("old-media-2");
+        });
+
+        it("should clear all media when providing an empty array", async () => {
+            const medialit = require("@/services/medialit");
+
+            // First, update the post to have some initial media manually
+            await CommunityPostModel.updateOne(
+                { postId: existingPost.postId },
+                {
+                    $set: {
+                        media: [
+                            {
+                                type: "image",
+                                title: "old-pic",
+                                url: "",
+                                media: {
+                                    mediaId: "old-media-1",
+                                    originalFileName: "p.jpg",
+                                    mimeType: "image/jpeg",
+                                    size: 10,
+                                    access: "public",
+                                    file: "p.jpg",
+                                    thumbnail: "p.jpg",
+                                } as any,
+                            },
+                        ],
+                    },
+                },
+            );
+
+            await updateCommunityPost({
+                communityId: community.communityId,
+                postId: existingPost.postId,
+                media: [], // Empty array = clear media
+                ctx: regularCtx,
+            });
+
+            expect(medialit.deleteMedia).toHaveBeenCalledWith("old-media-1");
+
+            const dbPost = await CommunityPostModel.findOne({
+                postId: existingPost.postId,
+            });
+            expect(dbPost!.media.length).toBe(0);
+        });
+    });
+});
diff --git a/apps/web/graphql/communities/logic.ts b/apps/web/graphql/communities/logic.ts
index b65fa7e92..53763d522 100644
--- a/apps/web/graphql/communities/logic.ts
+++ b/apps/web/graphql/communities/logic.ts
@@ -704,6 +704,109 @@ export async function createCommunityPost({
     return formatPost(post, ctx.user.userId);
 }
 
+export async function updateCommunityPost({
+    communityId,
+    postId,
+    title,
+    content,
+    category,
+    media,
+    ctx,
+}: {
+    communityId: string;
+    postId: string;
+    title?: string;
+    content?: string;
+    category?: string;
+    media?: CommunityMedia[];
+    ctx: GQLContext;
+}): Promise<PublicPost> {
+    checkIfAuthenticated(ctx);
+
+    const community = await CommunityModel.findOne<InternalCommunity>(
+        getCommunityQuery(ctx, communityId),
+    );
+
+    if (!community) {
+        throw new Error(responses.item_not_found);
+    }
+
+    const member = await getMembership(ctx, communityId);
+
+    if (!member || !hasPermission(member, Constants.MembershipRole.POST)) {
+        throw new Error(responses.action_not_allowed);
+    }
+
+    const post = await CommunityPostModel.findOne({
+        domain: ctx.subdomain._id,
+        communityId,
+        postId,
+        deleted: false,
+    });
+
+    if (!post) {
+        throw new Error(responses.item_not_found);
+    }
+
+    if (post.userId !== ctx.user.userId) {
+        throw new Error(responses.action_not_allowed);
+    }
+
+    if (category && !community.categories.includes(category)) {
+        throw new Error(responses.invalid_category);
+    }
+
+    if (title !== undefined) post.title = title;
+    if (content !== undefined) post.content = content;
+    if (category !== undefined) post.category = category;
+
+    let removedMediaIds: string[] = [];
+
+    if (media !== undefined) {
+        const oldMediaIds = (post.media || [])
+            .map((m: any) => m.media?.mediaId)
+            .filter(Boolean);
+        const newMediaIds = media.map((m) => m.media?.mediaId).filter(Boolean);
+
+        removedMediaIds = oldMediaIds.filter(
+            (id: string) => !newMediaIds.includes(id),
+        );
+
+        const oldMediaList = post.media || [];
+
+        for (const med of media) {
+            if (med.media?.mediaId && med.media.mediaId !== "none") {
+                if (!oldMediaIds.includes(med.media.mediaId)) {
+                    med.media = await sealMedia(med.media.mediaId);
+                } else {
+                    const oldMedItem = oldMediaList.find(
+                        (m: any) => m.media?.mediaId === med.media?.mediaId,
+                    );
+                    if (oldMedItem && oldMedItem.media && med.media) {
+                        med.media = oldMedItem.media;
+                    }
+                }
+            }
+        }
+
+        post.media = media;
+    }
+
+    await post.save();
+
+    for (const mediaId of removedMediaIds) {
+        if (mediaId && mediaId !== "none") {
+            try {
+                await deleteMedia(mediaId);
+            } catch (err: any) {
+                error(err.message, { stack: err.stack });
+            }
+        }
+    }
+
+    return formatPost(post, ctx.user.userId);
+}
+
 export async function deleteCommunityPost({
     ctx,
     communityId,
@@ -728,11 +831,8 @@ export async function deleteCommunityPost({
         communityId,
         postId,
     };
-    // if (!checkPermission(ctx.user.permissions, [permissions.manageCommunity])) {
-    //     query["userId"] = ctx.user.userId;
-    // }
     const member = await getMembership(ctx, communityId);
-    if (!hasPermission(member!, Constants.MembershipRole.MODERATE)) {
+    if (!member || !hasPermission(member, Constants.MembershipRole.MODERATE)) {
         query["userId"] = ctx.user.userId;
     }
 
@@ -742,8 +842,30 @@ export async function deleteCommunityPost({
         throw new Error(responses.item_not_found);
     }
 
-    post.deleted = true;
-    await (post as any).save();
+    if (post.media?.length) {
+        for (const media of post.media) {
+            const mediaId = media.media?.mediaId;
+            if (mediaId) {
+                try {
+                    await deleteMedia(mediaId);
+                } catch (err: any) {
+                    error(err.message, { stack: err.stack });
+                }
+            }
+        }
+    }
+
+    await CommunityCommentModel.deleteMany({
+        domain: ctx.subdomain._id,
+        communityId,
+        postId,
+    });
+
+    await CommunityPostModel.deleteOne({
+        domain: ctx.subdomain._id,
+        communityId,
+        postId,
+    });
 
     return post;
 }
diff --git a/apps/web/graphql/communities/mutation.ts b/apps/web/graphql/communities/mutation.ts
index 42732a564..474d199d5 100644
--- a/apps/web/graphql/communities/mutation.ts
+++ b/apps/web/graphql/communities/mutation.ts
@@ -11,6 +11,7 @@ import {
     addCategory,
     deleteCategory,
     createCommunityPost,
+    updateCommunityPost,
     joinCommunity,
     updateMemberStatus,
     togglePostLike,
@@ -170,6 +171,45 @@ const mutations = {
                 ctx,
             }),
     },
+    updateCommunityPost: {
+        type: types.communityPost,
+        args: {
+            communityId: { type: new GraphQLNonNull(GraphQLString) },
+            postId: { type: new GraphQLNonNull(GraphQLString) },
+            title: { type: GraphQLString },
+            content: { type: GraphQLString },
+            category: { type: GraphQLString },
+            media: { type: new GraphQLList(types.communityPostInputMedia) },
+        },
+        resolve: async (
+            _: any,
+            {
+                communityId,
+                postId,
+                title,
+                content,
+                category,
+                media,
+            }: {
+                communityId: string;
+                postId: string;
+                title?: string;
+                content?: string;
+                category?: string;
+                media?: CommunityMedia[];
+            },
+            ctx: GQLContext,
+        ) =>
+            updateCommunityPost({
+                communityId,
+                postId,
+                title,
+                content,
+                category,
+                media,
+                ctx,
+            }),
+    },
     deleteCommunityPost: {
         type: types.communityPost,
         args: {
diff --git a/apps/web/graphql/mails/logic.ts b/apps/web/graphql/mails/logic.ts
index 8d01bc6b4..d43d1fdff 100644
--- a/apps/web/graphql/mails/logic.ts
+++ b/apps/web/graphql/mails/logic.ts
@@ -30,6 +30,7 @@ import { User } from "@courselit/common-models";
 import EmailDeliveryModel from "@models/EmailDelivery";
 import EmailEventModel from "@models/EmailEvent";
 import { defaultEmail } from "./default-email";
+import { sanitizeEmail } from "@/lib/sanitize-email";
 
 const { permissions } = constants;
 
@@ -42,7 +43,7 @@ export async function createSubscription(
     ctx: GQLContext,
 ): Promise<boolean> {
     try {
-        const sanitizedEmail = email.toLowerCase();
+        const sanitizedEmail = sanitizeEmail(email);
         let dbUser: User | null = await UserModel.findOne({
             email: sanitizedEmail,
             domain: ctx.subdomain._id,
diff --git a/apps/web/graphql/users/logic.ts b/apps/web/graphql/users/logic.ts
index b1dd2ae24..941b80d08 100644
--- a/apps/web/graphql/users/logic.ts
+++ b/apps/web/graphql/users/logic.ts
@@ -66,6 +66,7 @@ const { permissions } = UIConstants;
 import { ObjectId } from "mongodb";
 import { sealMedia } from "@/services/medialit";
 import { seedNotificationPreferencesForUser } from "../notifications/logic";
+import { sanitizeEmail } from "@/lib/sanitize-email";
 
 const removeAdminFieldsFromUserObject = (user: any) => ({
     id: user._id,
@@ -188,7 +189,7 @@ export const inviteCustomer = async (
         throw new Error(responses.cannot_invite_to_unpublished_product);
     }
 
-    const sanitizedEmail = (email as string).toLowerCase();
+    const sanitizedEmail = sanitizeEmail(email);
     let user = await UserModel.findOne({
         email: sanitizedEmail,
         domain: ctx.subdomain._id,
@@ -409,7 +410,7 @@ export async function createUser({
             $setOnInsert: {
                 domain: domain._id,
                 name,
-                email: email.toLowerCase(),
+                email: sanitizeEmail(email),
                 active: true,
                 purchases: [],
                 permissions: superAdmin
diff --git a/apps/web/lib/sanitize-email.ts b/apps/web/lib/sanitize-email.ts
new file mode 100644
index 000000000..a245f35d7
--- /dev/null
+++ b/apps/web/lib/sanitize-email.ts
@@ -0,0 +1,3 @@
+export function sanitizeEmail(email: string) {
+    return email.toLowerCase().trim();
+}
diff --git a/apps/web/ui-lib/utils.ts b/apps/web/ui-lib/utils.ts
index eb3ca06aa..dd521475a 100644
--- a/apps/web/ui-lib/utils.ts
+++ b/apps/web/ui-lib/utils.ts
@@ -22,16 +22,28 @@ const { permissions } = UIConstants;
 export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
 export const formattedLocaleDate = (
-    epochString?: Date | number,
+    epochString?: Date | number | string,
     monthFormat?: "short" | "long",
-) =>
-    epochString
-        ? new Date(Number(epochString)).toLocaleString("en-US", {
+) => {
+    if (!epochString) return "";
+
+    let time: number;
+    if (typeof epochString === "string") {
+        time = /^\d+$/.test(epochString)
+            ? parseInt(epochString, 10)
+            : new Date(epochString).getTime();
+    } else {
+        time = Number(epochString);
+    }
+
+    return isNaN(time)
+        ? ""
+        : new Date(time).toLocaleString("en-US", {
               year: "numeric",
               month: monthFormat || "short",
               day: "numeric",
-          })
-        : "";
+          });
+};
 
 export const formulateCourseUrl = (course: any, backend = "") =>
     `${backend}/${course.isBlog ? "post" : "course"}/${course.courseId}/${