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

web/src/components/sidebar/LeftSidebar.tsx

@@ -6,7 +6,14 @@ import { Badge } from "../ui/badge";
 
 import { SavedChatSection } from "./SavedChatSection";
 
-import { Pencil, Check, X, MailPlus, Users } from "lucide-react";
+import {
+  Pencil,
+  Check,
+  X,
+  MailPlus,
+  Users,
+  GraduationCap,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import {
@@ -335,27 +342,38 @@ export function LeftSidebar(props: Props) {
       {/* ================= TOP (non-scroll) ================= */}
       <div className="flex-shrink-0">
         {/* Welcome */}
-        <div className="px-4 pt-6 pb-6">
+        <div className="px-4 pt-6 pb-5">
           <div className="text-[34px] leading-tight font-semibold">Welcome, {displayName}!</div>
         </div>
 
-        {/* Welcome ↔ Course divider + spacing */}
-        <div className="mt-4 mb-6">
+        <div className="mt-2 mb-4">
           <Divider />
         </div>
 
         {/* Course + Group */}
-        <div className="px-4 pt-8 pb-10 space-y-4">
-          <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
+        <div className="px-4 pt-5 pb-6 space-y-4">
+          {/* Course row with icon (single-color) */}
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg border bg-background flex items-center justify-center flex-shrink-0">
+              <GraduationCap className="w-5 h-5 text-foreground" />
+            </div>
+            <div className="text-[22px] leading-snug font-semibold truncate">{courseName}</div>
+          </div>
 
-          {/* ===== My Space ===== */}
+          {/* ===== My Space (beautified) ===== */}
           {!isTeamSpace ? (
             <div className="space-y-2">
-              <div className="text-[18px] font-semibold truncate">{demoGroup.name}</div>
-              <div className="text-[18px] font-semibold">Group {demoGroup.no}</div>
+              <div className="flex items-center justify-between text-[15px]">
+                <span className="text-muted-foreground">Group Name:</span>
+                <span className="font-semibold truncate max-w-[60%] text-right">{demoGroup.name}</span>
+              </div>
+              <div className="flex items-center justify-between text-[15px]">
+                <span className="text-muted-foreground">Group Number:</span>
+                <span className="font-semibold">{demoGroup.no}</span>
+              </div>
             </div>
           ) : (
-            /* ===== Team/Group ===== */
+            /* ===== Team/Group (keep your original editable card) ===== */
             <div className="rounded-2xl border bg-background overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
                 {/* Line 1: group name editable */}
@@ -501,8 +519,7 @@ export function LeftSidebar(props: Props) {
           )}
         </div>
 
-        {/* Course/Group ↔ Saved Chat divider + spacing */}
-        <div className="mt-2 mb-8">
+        <div className="mt-1 mb-6">
           <Divider />
         </div>
       </div>
@@ -522,7 +539,6 @@ export function LeftSidebar(props: Props) {
 
       {/* ================= BOTTOM (fixed, non-scroll) ================= */}
       <div className="flex-shrink-0">
-        {/* Saved Chat ↔ Instructor divider + spacing */}
         <div className="mt-6 mb-4">
           <Divider />
         </div>