diff --git a/src/modules/client/pages/CourseDetails.jsx b/src/modules/client/pages/CourseDetails.jsx
index d62bf4d..d643300 100644
--- a/src/modules/client/pages/CourseDetails.jsx
+++ b/src/modules/client/pages/CourseDetails.jsx
@@ -5,6 +5,7 @@ import api from "@/utils/api.util";
 import {
     House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
     SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
+    Hourglass,
 } from "lucide-react";
 import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
 import { Badge } from "@/components/ui/badge";
@@ -521,6 +522,9 @@ const CourseDetails = () => {
     }, []);
 
     const hasCompleted = !!course?.is_completed;
+    // duration_seconds is derived from authored lesson content (see duration.util.js) —
+    // zero means no lesson content has been built yet, so the course isn't ready to take.
+    const contentNotReady = !course?.duration_seconds;
 
     useEffect(() => {
         if (!myTier) getMyTier();
@@ -595,12 +599,18 @@ const CourseDetails = () => {
                             <div className="w-full flex items-center justify-between">
                                 <AppBreadcrumb items={items} />
                                 <div id="call-to-action">
-                                    <Button onClick={() => navigate(`/course/${courseId}/unit`)}>
-                                        {hasCompleted
-                                            ? <><CheckCheck /> Start Again</>
-                                            : <><SendHorizonal /> Start Learning</>
-                                        }
-                                    </Button>
+                                    {contentNotReady ? (
+                                        <Badge variant="secondary" className="gap-1.5 text-xs">
+                                            <Hourglass className="size-3" /> Coming Soon
+                                        </Badge>
+                                    ) : (
+                                        <Button onClick={() => navigate(`/course/${courseId}/unit`)}>
+                                            {hasCompleted
+                                                ? <><CheckCheck /> Start Again</>
+                                                : <><SendHorizonal /> Start Learning</>
+                                            }
+                                        </Button>
+                                    )}
                                 </div>
                             </div>
                         </motion.div>
@@ -639,16 +649,24 @@ const CourseDetails = () => {
                                                 </div>
                                             )}
                                         </div>
-                                        <Button
-                                            className="w-fit"
-                                            ref={CourseBreadcrumb}
-                                            onClick={() => navigate(`/course/${courseId}/unit`)}
-                                        >
-                                            {hasCompleted
-                                                ? <><CheckCheck /> Start Again</>
-                                                : <><SendHorizonal /> Proceed</>
-                                            }
-                                        </Button>
+                                        <div ref={CourseBreadcrumb} className="w-fit">
+                                            {contentNotReady ? (
+                                                <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
+                                                    <Hourglass className="size-4 shrink-0" />
+                                                    This course is currently being prepared. Please check back later.
+                                                </div>
+                                            ) : (
+                                                <Button
+                                                    className="w-fit"
+                                                    onClick={() => navigate(`/course/${courseId}/unit`)}
+                                                >
+                                                    {hasCompleted
+                                                        ? <><CheckCheck /> Start Again</>
+                                                        : <><SendHorizonal /> Proceed</>
+                                                    }
+                                                </Button>
+                                            )}
+                                        </div>
                                     </div>
                                 </div>
                             </div>