Update web/src/components/sidebar/LeftSidebar.tsx

web/src/components/sidebar/LeftSidebar.tsx

@@ -170,6 +170,20 @@ export function LeftSidebar(props: Props) {
   }, [spaceType, isMyWorkspace]);
 
   // --------- CourseInfo resolution ---------
+const demoGroupMap: Record<string, { name: string; no: number }> = {
+  "Introduction to AI": { name: "Foundations", no: 1 },
+  "Machine Learning": { name: "Model Builders", no: 3 },
+  "Data Visualization": { name: "Storytellers", no: 2 },
+};
+
+const demoGroup = useMemo(() => {
+  return demoGroupMap[courseName] ?? {
+    name: wsGroupName || "My Group",
+    no: toIntOrFallback(wsGroupNo, 1),
+  };
+}, [courseName, wsGroupName, wsGroupNo]);
+
+
   const courseInfo = useMemo((): CourseDirectoryItem | null => {
     const list = Array.isArray(availableCourses) ? availableCourses : [];
 
@@ -357,27 +371,29 @@ export function LeftSidebar(props: Props) {
         </div>
 
         {/* 1) Welcome ↔ Course divider */}
-        <Divider />
+        <div className="my-6">
+          <Divider />
+        </div>
+
 
         {/* Course + Group */}
         <div className="px-4 pt-10 pb-10 space-y-4">
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
-          {/* ===== My Space: show My Space + Group No + Group Name (read-only, no members) ===== */}
-          {/* ===== My Space: show Group Name + Group No (read-only, no members) ===== */}
+
+          {/* ===== My Space ===== */}
           {!isTeamSpace ? (
             <div className="space-y-2">
-              {/*  Black title: pick a name (use wsGroupName; fallback "My Group") */}
               <div className="text-[18px] font-semibold text-foreground truncate">
-                {wsGroupName || "My Group"}
+                {demoGroup.name}
               </div>
           
-              {/*  Group number */}
               <div className="text-[18px] font-semibold text-foreground">
-                Group {toIntOrFallback(wsGroupNo, 1)}
+                Group {demoGroup.no}
               </div>
             </div>
           ) : (
+
             /* ===== Team/Group: current style unchanged ===== */
             <div className="rounded-2xl border bg-background overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
@@ -562,8 +578,9 @@ export function LeftSidebar(props: Props) {
         </div>
 
         {/* 2) Group ↔ Saved Chat divider */}
-        <Divider />
-      </div>
+        <div className="my-8">
+          <Divider />
+        </div>
 
       {/* ================= MIDDLE (only scroll) ================= */}
       <div className="flex-1 min-h-0 overflow-hidden">
@@ -581,7 +598,10 @@ export function LeftSidebar(props: Props) {
       {/* ================= BOTTOM (fixed, non-scroll) ================= */}
       <div className="flex-shrink-0">
         {/* 3) Saved Chat ↔ Instructor divider */}
-        <Divider />
+        <div className="my-6">
+          <Divider />
+        </div>
+
 
         <div className="px-4 py-4 space-y-2 text-[16px]">
           <div className="text-muted-foreground">