diff --git a/backend/src/api/activities.ts b/backend/src/api/activities.ts
index f1e95e36..f1d41b59 100644
--- a/backend/src/api/activities.ts
+++ b/backend/src/api/activities.ts
@@ -1,20 +1,51 @@
-
 import express from 'express';
 import dalActivity from '../repository/dalActivity';
 import dalResource from '../repository/dalResource';
-import { ActivityModel } from '../models/Activity';
+import dalBoard from '../repository/dalBoard'; // Needed to fetch board details
+import { ActivityModel } from '../models/Activity'; // Ensure this model includes isActive?: boolean
+import { ResourceClass as Resource } from '../models/Resource'; // Use the exported class alias
+import { BoardModel as Board } from '../models/Board'; // Assuming BoardModel is the exported class name
 
 const router = express.Router();
 
+interface ActiveActivityDetailsResponse {
+  activityID: string;
+  boardID: string;
+  board: Board | null; // Type hint with the imported Board class/interface
+  resources: Resource[]; // Type hint with the imported Resource class/interface
+  name: string; // Name of the activity
+  // Add any other activity properties the roomcasting environment might need
+}
+
 // Create a new activity
 router.post('/', async (req, res) => {
   try {
-    const activityData: ActivityModel = req.body; 
-    const newActivity = await dalActivity.create(activityData);
-    res.status(201).json(newActivity); // 201 Created status
+    const activityDataFromRequest: Partial<ActivityModel> = req.body;
+    const activityDataToCreate: ActivityModel = {
+      ...activityDataFromRequest,
+      activityID: activityDataFromRequest.activityID || '',
+      name: activityDataFromRequest.name || '',
+      projectID: activityDataFromRequest.projectID || '',
+      boardID: activityDataFromRequest.boardID || '',
+      groupIDs: activityDataFromRequest.groupIDs || [],
+      order: activityDataFromRequest.order === undefined ? 0 : activityDataFromRequest.order,
+      isActive: activityDataFromRequest.isActive === undefined ? false : activityDataFromRequest.isActive,
+    } as ActivityModel;
+
+    if (!activityDataToCreate.projectID || !activityDataToCreate.boardID || !activityDataToCreate.name) {
+        return res.status(400).json({ error: 'Missing required fields (projectID, boardID, name) for activity.' });
+    }
+
+    // If creating an activity and setting it to active, ensure others in the same project are inactive
+    if (activityDataToCreate.isActive === true && activityDataToCreate.projectID) {
+      await dalActivity.deactivateOtherActivitiesInProject(activityDataToCreate.projectID, null); // Pass null if no activityID to exclude
+    }
+
+    const newActivity = await dalActivity.create(activityDataToCreate);
+    res.status(201).json(newActivity);
   } catch (error) {
     console.error("Error creating activity:", error);
-    res.status(500).json({ error: 'Failed to create activity.' }); 
+    res.status(500).json({ error: 'Failed to create activity.' });
   }
 });
 
@@ -25,68 +56,112 @@ router.get('/project/:projectID', async (req, res) => {
       const activities = await dalActivity.getByProject(projectID);
       res.status(200).json(activities);
     } catch (error) {
-      console.error("Error fetching activities:", error);
+      console.error("Error fetching activities for project:", error);
       res.status(500).json({ error: 'Failed to fetch activities.' });
     }
   });
 
-// Update an activity
+// Get the single active activity for a project, along with its resources and board details
+router.get('/project/:projectID/active-details', async (req, res) => {
+  try {
+    const projectID = req.params.projectID;
+    const activeActivity = await dalActivity.findActiveByProject(projectID);
+
+    if (!activeActivity) {
+      return res.status(200).json(null); // No active activity, return null
+    }
+
+    const resources = await dalResource.getByActivity(activeActivity.activityID);
+    const board = await dalBoard.getById(activeActivity.boardID);
+
+    const responseData: ActiveActivityDetailsResponse = {
+      activityID: activeActivity.activityID,
+      boardID: activeActivity.boardID,
+      board: board, // Include full board object
+      resources: resources || [],
+      name: activeActivity.name,
+    };
+
+    res.status(200).json(responseData);
+  } catch (error) {
+    console.error("Error fetching active activity details for project:", error);
+    res.status(500).json({ error: 'Failed to fetch active activity details.' });
+  }
+});
+
+
+// Update an activity (this now handles setting one active and others inactive)
 router.put('/:activityID', async (req, res) => {
   try {
-    const activityID = req.params.activityID;
+    const activityIDToUpdate = req.params.activityID;
     const updatedData: Partial<ActivityModel> = req.body;
 
-    // If groupIDs are modified, update the resources
-    if (updatedData.groupIDs) { 
-      const originalGroupIDs = (await dalActivity.getById(activityID))?.groupIDs; 
+    if (updatedData.isActive === true) {
+      const activityToActivate = await dalActivity.getById(activityIDToUpdate);
+      if (!activityToActivate) {
+        return res.status(404).json({ error: 'Activity to activate not found.' });
+      }
+      // Deactivate other activities in the same project
+      await dalActivity.deactivateOtherActivitiesInProject(activityToActivate.projectID, activityIDToUpdate);
+    }
+
+    if (updatedData.groupIDs) {
+      const activity = await dalActivity.getById(activityIDToUpdate);
+      if (!activity) {
+        return res.status(404).json({ error: 'Activity not found for groupID update.' });
+      }
+      const originalGroupIDs = activity.groupIDs;
       const removedGroupIDs = originalGroupIDs?.filter(id => !updatedData.groupIDs?.includes(id)) || [];
-      const removePromises = removedGroupIDs.map(groupID => 
-        dalResource.removeGroupFromActivityResources(activityID, groupID)
-      );
-      await Promise.all(removePromises);
+      if (removedGroupIDs.length > 0) {
+        const removePromises = removedGroupIDs.map(groupID =>
+          dalResource.removeGroupFromActivityResources(activityIDToUpdate, groupID)
+        );
+        await Promise.all(removePromises);
+      }
     }
 
-    const updatedActivity = await dalActivity.update(activityID, updatedData);
+    const updatedActivity = await dalActivity.update(activityIDToUpdate, updatedData);
 
     if (updatedActivity) {
       res.status(200).json(updatedActivity);
     } else {
-      res.status(404).json({ error: 'Activity not found.' });
+      res.status(404).json({ error: 'Activity not found or failed to update.' });
     }
   } catch (error) {
     console.error("Error updating activity:", error);
     res.status(500).json({ error: 'Failed to update activity.' });
   }
 });
-  
-  // Delete an activity
-  router.delete('/:activityID', async (req, res) => {
-    try {
-      const activityID = req.params.activityID;
-      const deletedActivity = await dalActivity.remove(activityID);
-      if (deletedActivity) {
-        res.status(200).json(deletedActivity);
-      } else {
-        res.status(404).json({ error: 'Activity not found.' });
-      }
-    } catch (error) {
-      console.error("Error deleting activity:", error);
-      res.status(500).json({ error: 'Failed to delete activity.' });
-    }
-  });
 
-  router.post('/order', async (req, res) => {
-    try {
-      const activities: { activityID: string; order: number }[] = req.body.activities;
-      const updatePromises = activities.map(activity => 
-        dalActivity.update(activity.activityID, { order: activity.order })
-      );
-      await Promise.all(updatePromises);
-      res.status(200).json({ message: 'Activity order updated successfully.' });
-    } catch (error) {
-      console.error("Error updating activity order:", error);
-      res.status(500).json({ error: 'Failed to update activity order.' });
+// Delete an activity
+router.delete('/:activityID', async (req, res) => {
+  try {
+    const activityID = req.params.activityID;
+    const deletedActivity = await dalActivity.remove(activityID);
+    if (deletedActivity) {
+      res.status(200).json(deletedActivity);
+    } else {
+      res.status(404).json({ error: 'Activity not found.' });
     }
-  });
-  
-  export default router;
\ No newline at end of file
+  } catch (error) {
+    console.error("Error deleting activity:", error);
+    res.status(500).json({ error: 'Failed to delete activity.' });
+  }
+});
+
+// Update activity order
+router.post('/order', async (req, res) => {
+  try {
+    const activities: { activityID: string; order: number }[] = req.body.activities;
+    const updatePromises = activities.map(activity =>
+      dalActivity.update(activity.activityID, { order: activity.order })
+    );
+    await Promise.all(updatePromises);
+    res.status(200).json({ message: 'Activity order updated successfully.' });
+  } catch (error) {
+    console.error("Error updating activity order:", error);
+    res.status(500).json({ error: 'Failed to update activity order.' });
+  }
+});
+
+export default router;
diff --git a/backend/src/api/projects.ts b/backend/src/api/projects.ts
index 6fb5c271..6152c8d5 100644
--- a/backend/src/api/projects.ts
+++ b/backend/src/api/projects.ts
@@ -1,7 +1,7 @@
 import { Router } from 'express';
 import { mongo } from 'mongoose';
 import { BoardScope, ViewSettings, ViewType } from '../models/Board';
-import { ProjectModel } from '../models/Project';
+import { ProjectModel } from '../models/Project'; 
 import { UserModel } from '../models/User';
 import dalBoard from '../repository/dalBoard';
 import dalProject from '../repository/dalProject';
@@ -17,22 +17,34 @@ import { addUserToProject } from '../utils/project.helpers';
 const router = Router();
 
 router.post('/', async (req, res) => {
-  const project: ProjectModel = req.body;
+  const projectDataFromRequest: ProjectModel = req.body;
   const user: UserModel = res.locals.user;
 
-  if (!project.teacherIDs.includes(user.userID)) {
+  if (!projectDataFromRequest.teacherIDs || !projectDataFromRequest.teacherIDs.includes(user.userID)) {
     return res.status(403).end('Unauthorized to create project.');
   }
 
-  // Set isScoreRun to false if not provided
-  project.isScoreRun = project.isScoreRun || false;
+  const projectToCreate: ProjectModel = {
+      ...projectDataFromRequest,
+      isScoreRun: projectDataFromRequest.isScoreRun || false,
+      // currentActivePhase is removed from the model, so no initialization needed here
+      boards: projectDataFromRequest.boards || [],
+      groups: projectDataFromRequest.groups || [],
+      members: projectDataFromRequest.members || [user.userID],
+      teacherIDs: projectDataFromRequest.teacherIDs || [user.userID],
+  };
+
+  let savedProject = await dalProject.create(projectToCreate);
+  if (!savedProject) {
+    console.error("Failed to create project in DAL.");
+    return res.status(500).json({ error: 'Project creation failed at data access layer.' });
+  }
 
-  let savedProject = await dalProject.create(project);
-  if (project.personalBoardSetting.enabled) {
-    const image = project.personalBoardSetting.bgImage;
+  if (projectToCreate.personalBoardSetting && projectToCreate.personalBoardSetting.enabled) {
+    const image = projectToCreate.personalBoardSetting.bgImage;
     const personalBoardID = new mongo.ObjectId().toString();
     const personalBoard = await dalBoard.create({
-      projectID: project.projectID,
+      projectID: savedProject.projectID,
       boardID: personalBoardID,
       ownerID: user.userID,
       name: `${user.username}'s Personal Board`,
@@ -48,22 +60,18 @@ router.post('/', async (req, res) => {
       defaultView: ViewType.CANVAS,
       viewSettings: getAllViewsAllowed(),
     });
-    await savedProject.updateOne({
-      boards: [personalBoard.boardID],
-    });
 
-    // --- Create default shared board ---
     const communityBoardID = new mongo.ObjectId().toString();
     const communityBoard = await dalBoard.create({
-      projectID: project.projectID,
+      projectID: savedProject.projectID,
       boardID: communityBoardID,
       ownerID: user.userID,
-      name: 'Demo Community Board', // Or any default name you prefer
+      name: 'Demo Community Board',
       scope: BoardScope.PROJECT_SHARED,
       task: undefined,
       permissions: getDefaultBoardPermissions(),
       bgImage: undefined,
-      type: BoardType.BRAINSTORMING, // Or another default type
+      type: BoardType.BRAINSTORMING,
       tags: getDefaultBoardTags(communityBoardID),
       initialZoom: 100,
       upvoteLimit: 5,
@@ -71,10 +79,17 @@ router.post('/', async (req, res) => {
       defaultView: ViewType.CANVAS,
       viewSettings: getAllViewsAllowed(),
     });
-    // Add the board to the project's boards array
-    savedProject = await savedProject.updateOne({
-      $push: { boards: communityBoard.boardID },
+
+    const boardsToUpdate = [personalBoard.boardID, communityBoard.boardID];
+    const projectUpdateWithBoards = await dalProject.update(savedProject.projectID, {
+        boards: boardsToUpdate,
     });
+
+    if (!projectUpdateWithBoards) {
+        console.error(`Failed to update project ${savedProject.projectID} with initial boards.`);
+        return res.status(500).json({ error: 'Project created, but failed to link initial boards.' });
+    }
+    savedProject = projectUpdateWithBoards;
   }
 
   res.status(200).json(savedProject);
@@ -83,7 +98,6 @@ router.post('/', async (req, res) => {
 router.post('/join', async (req, res) => {
   const { code } = req.body;
   const user: UserModel = res.locals.user;
-
   try {
     const project = await addUserToProject(user, code);
     return res.status(200).json(project);
@@ -97,29 +111,30 @@ router.post('/join', async (req, res) => {
 router.post('/:id', async (req, res) => {
   const id = req.params.id;
   const { name, members, boards, membershipDisabled } = req.body;
-
-  const project: Partial<ProjectModel> = Object.assign(
-    {},
-    name === null ? null : { name },
-    members === null ? null : { members },
-    boards === null ? null : { boards },
-    membershipDisabled === null ? null : { membershipDisabled }
-  );
-
-  const updatedProject = await dalProject.update(id, project);
+  const projectUpdate: Partial<ProjectModel> = {};
+  if (name !== undefined) projectUpdate.name = name;
+  if (members !== undefined) projectUpdate.members = members;
+  if (boards !== undefined) projectUpdate.boards = boards;
+  if (membershipDisabled !== undefined) projectUpdate.membershipDisabled = membershipDisabled;
+
+  const updatedProject = await dalProject.update(id, projectUpdate);
+  if (!updatedProject) {
+    return res.status(404).json({ error: 'Project not found or failed to update.' });
+  }
   res.status(200).json(updatedProject);
 });
 
 router.get('/:id', async (req, res) => {
   const id = req.params.id;
-
   const project = await dalProject.getById(id);
+  if (!project) {
+    return res.status(404).json({ error: 'Project not found.' });
+  }
   res.status(200).json(project);
 });
 
 router.get('/users/:id', async (req, res) => {
   const id = req.params.id;
-
   const projects = await dalProject.getByUserId(id);
   res.status(200).json(projects);
 });
@@ -127,6 +142,9 @@ router.get('/users/:id', async (req, res) => {
 router.delete('/:id', async (req, res) => {
   const { id } = req.params;
   const deletedProject = await dalProject.remove(id);
+  if (!deletedProject) {
+    return res.status(404).json({ error: 'Project not found.' });
+  }
   res.status(200).json(deletedProject);
 });
 
diff --git a/backend/src/constants.ts b/backend/src/constants.ts
index b0b67926..26f1b7bf 100644
--- a/backend/src/constants.ts
+++ b/backend/src/constants.ts
@@ -54,6 +54,7 @@ export enum SocketEvent {
   AI_RESPONSE = 'AI_RESPONSE', // Event for receiving AI response
 
   RESOURCES_UPDATE = 'RESOURCES_UPDATE',
+  ACTIVITY_STOPPED = 'ACTIVITY_STOPPED',
 }
 
 export const STUDENT_POST_COLOR = '#FFF7C0';
diff --git a/backend/src/models/Activity.ts b/backend/src/models/Activity.ts
index 4f9a9d93..ea660f24 100644
--- a/backend/src/models/Activity.ts
+++ b/backend/src/models/Activity.ts
@@ -1,26 +1,29 @@
-
 import { prop, getModelForClass, modelOptions } from '@typegoose/typegoose';
 
 @modelOptions({ schemaOptions: { collection: 'activities', timestamps: true } })
 export class ActivityModel {
-  @prop({ required: true })
+  @prop({ required: true, unique: true }) // Assuming activityID should be unique
   public activityID!: string;
 
-  @prop({ required: true })
+  @prop({ required: true }) 
   public name!: string;
 
-  @prop({ required: true })
+  @prop({ required: true, index: true }) // Indexing projectID can be useful
   public projectID!: string;
 
   @prop({ required: true })
-  public boardID!: string; 
+  public boardID!: string;
 
-  @prop({ required: true, type: () => [String] }) 
-  public groupIDs!: string[]; 
+  @prop({ required: true, type: () => [String], default: [] }) // Default to empty array
+  public groupIDs!: string[];
 
   @prop({ required: true, default: 0 })
-  public order!: number; 
+  public order!: number;
+
+  @prop({ required: false, default: false }) 
+  public isActive?: boolean;
 }
 
 const Activity = getModelForClass(ActivityModel);
-export default Activity;
\ No newline at end of file
+export default Activity;
+ 
\ No newline at end of file
diff --git a/backend/src/models/Project.ts b/backend/src/models/Project.ts
index 529f2d59..6d5d7c22 100644
--- a/backend/src/models/Project.ts
+++ b/backend/src/models/Project.ts
@@ -1,35 +1,38 @@
-import { prop, getModelForClass, modelOptions } from '@typegoose/typegoose';
+import { prop, getModelForClass, modelOptions, Severity } from '@typegoose/typegoose';
 import { BgImageModel } from './Board';
 
 export class PersonalBoardSetting {
   @prop({ required: true })
   public enabled!: boolean;
 
-  @prop({ required: false, type: () => BgImageModel })
+  @prop({ required: false, type: () => BgImageModel, _id: false })
   public bgImage?: BgImageModel;
 }
 
-@modelOptions({ schemaOptions: { collection: 'projects', timestamps: true } })
+@modelOptions({
+  schemaOptions: { collection: 'projects', timestamps: true },
+  options: { allowMixed: Severity.ALLOW }
+})
 export class ProjectModel {
-  @prop({ required: true })
+  @prop({ required: true, unique: true })
   public projectID!: string;
 
   @prop({ required: true, default: false })
   public isScoreRun!: boolean;
 
-  @prop({ required: true })
+  @prop({ required: true, type: () => [String], default: [] })
   public teacherIDs!: string[];
 
   @prop({ required: true })
   public name!: string;
 
-  @prop({ required: true })
+  @prop({ required: true, type: () => [String], default: [] })
   public members!: string[];
 
-  @prop({ required: true })
+  @prop({ required: true, type: () => [String], default: [] })
   public groups!: string[];
 
-  @prop({ required: true })
+  @prop({ required: true, type: () => [String], default: [] })
   public boards!: string[];
 
   @prop({ required: true })
@@ -38,10 +41,10 @@ export class ProjectModel {
   @prop({ required: true })
   public teacherJoinCode!: string;
 
-  @prop({ required: true, type: () => PersonalBoardSetting })
+  @prop({ required: true, type: () => PersonalBoardSetting, _id: false })
   public personalBoardSetting!: PersonalBoardSetting;
 
-  @prop({ required: true })
+  @prop({ required: true, default: false })
   public membershipDisabled!: boolean;
 }
 
diff --git a/backend/src/models/Resource.ts b/backend/src/models/Resource.ts
index 01cd1b6c..24d1e54c 100644
--- a/backend/src/models/Resource.ts
+++ b/backend/src/models/Resource.ts
@@ -3,18 +3,18 @@
 import { prop, getModelForClass, modelOptions } from '@typegoose/typegoose';
 
 @modelOptions({ schemaOptions: { collection: 'resources', timestamps: true } })
-export class ResourceModel {
-  @prop({ required: true })
+export class ResourceModel { 
+  @prop({ required: true, unique: true }) // Assuming resourceID should be unique
   public resourceID!: string;
 
   @prop({ required: true })
   public name!: string;
 
-  @prop({ required: true })
-  public activityID!: string; 
+  @prop({ required: true, index: true }) // Indexing activityID can be useful
+  public activityID!: string;
 
-  @prop({ required: true })
-  public order!: number; 
+  @prop({ required: true, default: 0 })
+  public order!: number;
 
   @prop({ required: true, default: false })
   public canvas!: boolean;
@@ -32,10 +32,10 @@ export class ResourceModel {
   public ideaAgent!: boolean;
 
   @prop({ required: true, type: () => [String], default: [] })
-  public groupIDs!: string[]; 
-
-  // ... add more properties for future resource types as needed ...
+  public groupIDs!: string[];
 }
 
-const Resource = getModelForClass(ResourceModel);
-export default Resource;
\ No newline at end of file
+const ResourceMongooseModel = getModelForClass(ResourceModel); // The Mongoose model instance
+export default ResourceMongooseModel; // Default export is the Mongoose model
+
+export { ResourceModel as ResourceClass };
diff --git a/backend/src/repository/dalActivity.ts b/backend/src/repository/dalActivity.ts
index f89b27cd..83d8b106 100644
--- a/backend/src/repository/dalActivity.ts
+++ b/backend/src/repository/dalActivity.ts
@@ -1,54 +1,95 @@
+import Activity, { ActivityModel } from '../models/Activity'; // Your Activity Mongoose Model
 
-import Activity, { ActivityModel } from '../models/Activity';
+// Create a new activity
+const create = async (activityData: ActivityModel): Promise<ActivityModel> => {
+  try {
+    const newActivity = new Activity(activityData);
+    return await newActivity.save();
+  } catch (error) {
+    console.error("Error creating an activity:", error);
+    throw error;
+  }
+};
 
-const dalActivity = {
-  create: async (activity: ActivityModel): Promise<ActivityModel> => {
-    try {
-      const newActivity = new Activity(activity);
-      return await newActivity.save();
-    } catch (error) {
-      console.error("Error creating an activity:", error);
-      throw error; 
-    }
-  },
-
-  getById: async (id: string): Promise<ActivityModel | null | undefined> => {
-    try {
-      const activity = await Activity.findOne({ activityID: id });
-      return activity;
-    } catch (error) {
-      console.error("Error getting activity by ID:", error);
-      return undefined;
-    }
-  },
-
-  getByProject: async (projectID: string): Promise<ActivityModel[]> => {
-    try {
-      const activities = await Activity.find({ projectID });
-      return activities;
-    } catch (err) {
-      throw new Error(JSON.stringify(err, null, ' '));
-    }
-  },
-
-  update: async (id: string, activity: Partial<ActivityModel>): Promise<ActivityModel | null> => {
-    try {
-      const updatedActivity = await Activity.findOneAndUpdate({ activityID: id }, activity, { new: true });
-      return updatedActivity; 
-    } catch (err) {
-      throw new Error(JSON.stringify(err, null, ' '));
-    }
-  },
-
-  remove: async (id: string): Promise<ActivityModel | null> => {
-    try {
-      const deletedActivity = await Activity.findOneAndDelete({ activityID: id });
-      return deletedActivity; 
-    } catch (err) {
-      throw new Error(JSON.stringify(err, null, ' '));
+// Get an activity by its activityID
+const getById = async (id: string): Promise<ActivityModel | null | undefined> => {
+  try {
+    const activity = await Activity.findOne({ activityID: id });
+    return activity;
+  } catch (error) {
+    console.error("Error getting activity by ID:", error);
+    // Consider re-throwing or returning a more specific error/null
+    return undefined;
+  }
+};
+
+// Get all activities for a project, sorted by order
+const getByProject = async (projectID: string): Promise<ActivityModel[]> => {
+  try {
+    const activities = await Activity.find({ projectID: projectID }).sort({ order: 1 }).exec();
+    return activities;
+  } catch (err) {
+    // Consider more specific error handling/logging
+    console.error(`Error fetching activities for project ${projectID}:`, err);
+    throw new Error(`Failed to fetch activities for project ${projectID}: ${err instanceof Error ? err.message : String(err)}`);
+  }
+};
+
+// Update an activity by its activityID
+const update = async (activityID: string, updateData: Partial<ActivityModel>): Promise<ActivityModel | null> => {
+  try {
+    const updatedActivity = await Activity.findOneAndUpdate({ activityID: activityID }, updateData, { new: true, runValidators: true }).exec();
+    return updatedActivity;
+  } catch (err) {
+    console.error(`Error updating activity ${activityID}:`, err);
+    throw new Error(`Failed to update activity ${activityID}: ${err instanceof Error ? err.message : String(err)}`);
+  }
+};
+
+// Remove an activity by its activityID
+const remove = async (activityID: string): Promise<ActivityModel | null> => {
+  try {
+    const deletedActivity = await Activity.findOneAndDelete({ activityID: activityID }).exec();
+    return deletedActivity;
+  } catch (err) {
+    console.error(`Error removing activity ${activityID}:`, err);
+    throw new Error(`Failed to remove activity ${activityID}: ${err instanceof Error ? err.message : String(err)}`);
+  }
+};
+
+// Find the single active activity for a project
+const findActiveByProject = async (projectID: string): Promise<ActivityModel | null> => {
+  try {
+    return await Activity.findOne({ projectID: projectID, isActive: true }).exec();
+  } catch (error) {
+    console.error(`Error finding active activity for project ${projectID}:`, error);
+    throw error; // Re-throw to be handled by the route or service layer
+  }
+};
+
+// Set all other active activities in a project to inactive, optionally excluding one
+const deactivateOtherActivitiesInProject = async (projectID: string, excludeActivityID: string | null): Promise<void> => {
+  try {
+    const filter: any = { projectID: projectID, isActive: true };
+    if (excludeActivityID) {
+      filter.activityID = { $ne: excludeActivityID }; // $ne means "not equal"
     }
-  },
+    // Update all activities that match the filter to set isActive to false
+    await Activity.updateMany(filter, { $set: { isActive: false } }).exec();
+  } catch (error) {
+    console.error(`Error deactivating other activities in project ${projectID}:`, error);
+    throw error; // Re-throw to be handled by the route or service layer
+  }
+};
 
+const dalActivity = {
+  create,
+  getById,
+  getByProject,
+  update,
+  remove,
+  findActiveByProject, 
+  deactivateOtherActivitiesInProject,
 };
 
-export default dalActivity;
\ No newline at end of file
+export default dalActivity;
diff --git a/backend/src/socket/events/roomcast.events.ts b/backend/src/socket/events/roomcast.events.ts
index 1a5978f6..11b0b6c8 100644
--- a/backend/src/socket/events/roomcast.events.ts
+++ b/backend/src/socket/events/roomcast.events.ts
@@ -1,35 +1,123 @@
-// backend/src/socket/events/roomcast.events.ts
 import { Server, Socket } from 'socket.io';
-import { SocketEvent } from '../../constants';
-import { SocketPayload } from '../types/event.types';
+import { SocketEvent } from '../../constants'; // Your SocketEvent enum
+import { SocketPayload } from '../types/event.types'; // Assumed path and structure
+import { ResourceClass as Resource } // Assuming ResourceClass is the exported class from your Resource model
+from '../../models/Resource'; // Adjust path as necessary
 
-interface RoomcastData {
+// Payload expected from the authoring tool for RESOURCES_UPDATE
+interface ResourcesUpdateEventPayload {
   projectID: string;
-  resources: any[]; // Use a more specific type if possible
+  activityID: string;
+  boardID: string;
+  resources: Resource[]; // Use the specific Resource type/class
 }
-  
+
+// Payload expected from the authoring tool for ACTIVITY_STOPPED
+interface ActivityStoppedEventPayload {
+  projectID: string;
+  activityID: string; // The ID of the activity that was stopped
+}
+
+// This is the structure the client (roomcasting environment) expects to receive for RESOURCES_UPDATE.
+interface ClientResourcesUpdateData {
+  eventData: ResourcesUpdateEventPayload;
+}
+
+// This is the structure the client (roomcasting environment) expects to receive for ACTIVITY_STOPPED.
+interface ClientActivityStoppedData {
+  eventData: ActivityStoppedEventPayload;
+}
+
 
 class RoomcastUpdate {
   static type: SocketEvent = SocketEvent.RESOURCES_UPDATE;
 
-  static async handleEvent(data: SocketPayload<RoomcastData>): Promise<RoomcastData> {
-    const { projectID, resources } = data.eventData;
-    // Add any validation or processing of the data here, if needed.
-    // For example, you could check if the projectID is valid.
-    console.log("RoomcastUpdate handleEvent")
-    return { projectID, resources };
+  static async handleEvent(data: any): Promise<ResourcesUpdateEventPayload> {
+    const actualEventPayload = data.eventData;
+
+    if (!actualEventPayload) {
+      console.error("RoomcastUpdate.handleEvent: Actual event payload (expected in data.eventData) is missing or malformed. Received data:", JSON.stringify(data, null, 2));
+      throw new Error("Invalid payload: actual event payload for RESOURCES_UPDATE is missing.");
+    }
+
+    const { projectID, activityID, boardID, resources } = actualEventPayload;
+
+    if (!projectID || !activityID || !boardID) {
+      const missingFields = [];
+      if (!projectID) missingFields.push('projectID');
+      if (!activityID) missingFields.push('activityID');
+      if (!boardID) missingFields.push('boardID');
+      const errorMessage = `RoomcastUpdate.handleEvent: Missing critical IDs in actual event payload. Missing: ${missingFields.join(', ')}. Payload: ${JSON.stringify(actualEventPayload, null, 2)}`;
+      console.error(errorMessage);
+      throw new Error(`Invalid payload for ${SocketEvent.RESOURCES_UPDATE}: ${errorMessage}`);
+    }
+
+    if (!Array.isArray(resources)) {
+      const errorMessage = `RoomcastUpdate.handleEvent: 'resources' field in actual event payload must be an array. Payload: ${JSON.stringify(actualEventPayload, null, 2)}`;
+      console.error(errorMessage);
+      throw new Error(`Invalid payload for ${SocketEvent.RESOURCES_UPDATE}: ${errorMessage}`);
+    }
+
+    console.log(`RoomcastUpdate.handleEvent - Received valid data for project ${projectID}, activity ${activityID}`);
+    return actualEventPayload as ResourcesUpdateEventPayload; // Pass the correctly extracted payload
+  }
+
+  static async handleResult(io: Server, socket: Socket, result: ResourcesUpdateEventPayload): Promise<void> {
+    const { projectID, activityID, boardID, resources } = result;
+    const roomToBroadcastTo = projectID;
+    const payloadForClients: ClientResourcesUpdateData = {
+      eventData: { projectID, activityID, boardID, resources }
+    };
+    console.log(`RoomcastUpdate.handleResult: Broadcasting ${SocketEvent.RESOURCES_UPDATE} to room "${roomToBroadcastTo}"`);
+    io.to(roomToBroadcastTo).emit(SocketEvent.RESOURCES_UPDATE, payloadForClients);
   }
+}
 
-    static async handleResult(io: Server, socket: Socket, result: RoomcastData): Promise<void> {
-      const { projectID, resources } = result;
-      // Broadcast to all clients in the room (project) EXCEPT the sender
-      //  socket.to(projectID).emit(SocketEvent.RESOURCES_UPDATE, resources);
-      // Could also just emit to the room, including sender. Depends on your needs.
-      console.log("Roomcast Update handleResult")
-      io.emit(SocketEvent.RESOURCES_UPDATE, resources);
+class ActivityStoppedUpdate {
+  static type: SocketEvent = SocketEvent.ACTIVITY_STOPPED;
+
+  static async handleEvent(data: any): Promise<ActivityStoppedEventPayload> {
+    const actualEventPayload = data.eventData;
+
+    if (!actualEventPayload) {
+      console.error("ActivityStoppedUpdate.handleEvent: eventData is missing or malformed. Received data:", JSON.stringify(data, null, 2));
+      throw new Error("Invalid payload: eventData for ACTIVITY_STOPPED is missing.");
     }
+
+    const { projectID, activityID } = actualEventPayload;
+
+    if (!projectID || !activityID) {
+      const missingFields = [];
+      if (!projectID) missingFields.push('projectID');
+      if (!activityID) missingFields.push('activityID');
+      const errorMessage = `ActivityStoppedUpdate.handleEvent: Missing critical IDs in event payload. Missing: ${missingFields.join(', ')}. Payload: ${JSON.stringify(actualEventPayload, null, 2)}`;
+      console.error(errorMessage);
+      throw new Error(`Invalid payload for ${SocketEvent.ACTIVITY_STOPPED}: ${errorMessage}`);
+    }
+    console.log(`ActivityStoppedUpdate.handleEvent - Received valid data for project ${projectID}, stopped activity ${activityID}`);
+    return actualEventPayload as ActivityStoppedEventPayload;
+  }
+
+  static async handleResult(io: Server, socket: Socket, result: ActivityStoppedEventPayload): Promise<void> {
+    const { projectID, activityID } = result;
+    const roomToBroadcastTo = projectID;
+
+    const payloadForClients: ClientActivityStoppedData = {
+      eventData: {
+        projectID,
+        activityID,
+      }
+    };
+
+    console.log(`ActivityStoppedUpdate.handleResult: Broadcasting ${SocketEvent.ACTIVITY_STOPPED} to room "${roomToBroadcastTo}"`);
+    io.to(roomToBroadcastTo).emit(SocketEvent.ACTIVITY_STOPPED, payloadForClients);
+  }
 }
 
-const roomcastEvents = [RoomcastUpdate];
 
-export default roomcastEvents;
\ No newline at end of file
+const roomcastEvents = [
+    RoomcastUpdate,
+    ActivityStoppedUpdate
+];
+
+export default roomcastEvents;
diff --git a/backend/src/socket/socket.ts b/backend/src/socket/socket.ts
index e40cdbf4..b694025b 100644
--- a/backend/src/socket/socket.ts
+++ b/backend/src/socket/socket.ts
@@ -1,7 +1,7 @@
-import { Server } from 'http';
-import * as socketIO from 'socket.io';
+import { Server as HttpServer } from 'http'; // Renamed to avoid conflict with socket.io Server
+import alinameSocketIO, { Server as SocketIOServer, Socket as SocketIOSocket } from 'socket.io'; // Use aliased names
 import { SocketEvent } from '../constants';
-import events from './events';
+import events from './events'; // This should be an array of your event handler objects/classes
 import SocketManager from './socketManager';
 import RedisClient from '../utils/redis';
 import { createAdapter } from '@socket.io/redis-adapter';
@@ -9,13 +9,25 @@ import dotenv from 'dotenv';
 
 dotenv.config();
 
+// Define a more specific type for your event handlers if possible
+// This helps ensure consistency and better type inference.
+interface IEventHandler {
+  type: SocketEvent;
+  // Using 'any' here for generality, but specific types for P (payload) and R (result) are better.
+  // P is the type of data received in the socket event.
+  // R is the type of data returned by handleEvent and passed to handleResult.
+  handleEvent: (data: any) // Consider SocketPayload<P>
+  => Promise<any>; // Consider Promise<R>
+  handleResult: (io: SocketIOServer, socket: SocketIOSocket, result: any) // Consider result: R
+  => Promise<void>;
+}
+
+
 class Socket {
   private static _instance: Socket;
-
   private _socketManager: SocketManager;
-  private _io: socketIO.Server | null = null;
+  private _io: SocketIOServer | null = null;
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   private constructor() {
     this._socketManager = SocketManager.Instance;
   }
@@ -24,78 +36,66 @@ class Socket {
     return this._instance || (this._instance = new this());
   }
 
-  /**
-   * Initializes websocket server which will listen for users
-   * joining boards and handle all board events.
-   *
-   * @param server the http server
-   * @returns void
-   */
-
-  private _initialized = false;
-
-  async init(server: Server, redis: RedisClient) {
+  async init(server: HttpServer, redis: RedisClient) {
     try {
-      const io = new socketIO.Server(server, {
+      const io = new alinameSocketIO.Server(server, {
         transports: ['websocket', 'polling'],
         cors: {
-          origin: process.env.CKBOARD_SERVER_ADDRESS || 'http://localhost:4200', // Specific origin or localhost
+          origin: process.env.CKBOARD_SERVER_ADDRESS || 'http://localhost:4200',
           methods: ['GET', 'POST'],
         },
         adapter: createAdapter(
           RedisClient.getPublisher(),
           RedisClient.getSubscriber()
         ),
-        pingTimeout: 60000, // 60 seconds (adjust as needed)
-        pingInterval: 25000, // 25 seconds (adjust as needed)
+        pingTimeout: 60000,
+        pingInterval: 25000,
       });
 
       this._io = io;
+      console.log('Socket server running on port 8000...'); // Assuming port 8000 or your configured port
 
-      console.log('Socket server running on port 8000...');
-
-      io.on('connection', (socket) => {
+      io.on('connection', (socket: SocketIOSocket) => {
         console.log(
           `New connection: Socket ID ${socket.id}, IP: ${socket.handshake.address}`
         );
-
-        // Log connection details (optional, but useful for debugging)
         console.log('Connection details:', {
           id: socket.id,
           handshake: {
             headers: socket.handshake.headers,
             query: socket.handshake.query,
-            auth: socket.handshake.auth, // If using authentication
+            auth: socket.handshake.auth,
           },
         });
 
+        this._listenForEvents(io, socket);
+
         socket.on('join', (user: string, room: string) => {
+          console.log(`BACKEND: Socket ${socket.id} attempting to join room: ${room} for user: ${user}`);
           socket.data.room = room;
           this._safeJoin(socket, user, room);
-          this._listenForEvents(io, socket);
           this._logUserSocketsAndRooms(user);
         });
 
         socket.on('leave', (user: string, room: string) => {
           socket.leave(room);
           console.log(`Socket ${socket.id} left room ${room}`);
-          events.map((e) => socket.removeAllListeners(e.type.toString()));
-
-          // Remove the specific socketId for the user from the SocketManager
+          // Removing all listeners for specific event types on 'leave' might be too broad
+          // if the socket is still connected and could join other rooms or emit other events.
+          // Standard disconnect handles listener cleanup for that socket.
+          // events.map((e) => socket.removeAllListeners(e.type.toString()));
           this._socketManager.removeBySocketId(socket.id);
           this._logUserSocketsAndRooms(user);
         });
 
         socket.on('disconnect', () => {
-          console.warn(`Socket ${socket.id} disconnected:`);
-
-          // 1. Leave all rooms
-          const rooms = socket.rooms;
+          console.warn(`Socket ${socket.id} disconnected.`);
+          const rooms = Object.keys(socket.rooms); // socket.rooms is a Set, convert to array if needed
           rooms.forEach((room) => {
-            socket.leave(room);
+            if (room !== socket.id) { // Don't try to leave its own ID room
+              socket.leave(room);
+            }
           });
-
-          // 2. Remove from SocketManager
           this._socketManager.removeBySocketId(socket.id);
         });
 
@@ -104,11 +104,10 @@ class Socket {
           io.in(room).disconnectSockets(true);
         });
 
-        // Error handling within the connection handler
         socket.on('error', (error: any) => {
           if (error.code === 'ECONNRESET') {
             console.error(
-              `Socket ${socket.id} connection reset. Attempting to reconnect...`
+              `Socket ${socket.id} connection reset.`
             );
           } else {
             console.error(`Socket ${socket.id} error:`, error);
@@ -116,17 +115,16 @@ class Socket {
         });
       });
 
-      // Connection error handling for the server
-      io.engine.on('connection_error', (err) => {
+      io.engine.on('connection_error', (err: any) => { // Typed err
         console.error('Socket.IO connection error:', {
           code: err.code,
           message: err.message,
           context: err.context,
-          request: {
+          request: err.req ? { // Check if err.req exists
             ip: err.req.ip,
             url: err.req.url,
             headers: err.req.headers,
-          },
+          } : undefined,
           stack: err.stack,
         });
       });
@@ -145,39 +143,40 @@ class Socket {
    */
   emit(event: SocketEvent, eventData: unknown, roomId: string): void {
     if (!this._io) {
-      throw new Error('IO not initialized. Please invoke init() first.');
+      console.error('IO not initialized. Cannot emit event.');
+      return;
+      // throw new Error('IO not initialized. Please invoke init() first.');
     }
-
     this._io.to(roomId).emit(event, eventData);
   }
 
-  /**
-   * Setup socket to listen for all events from connected user,
-   * handle them accordingly, then emit resulting event back to all users.
-   *
-   * @param io socket server
-   * @param socket socket which will act on events
-   * @returns void
-   */
-  private _listenForEvents(io: socketIO.Server, socket: socketIO.Socket) {
-    events.map((event) =>
-      socket.on(event.type, async (data: any) => {
-        const result = await event.handleEvent(data);
-        return await event.handleResult(io, socket, result as never);
-      })
-    );
+  private _listenForEvents(io: SocketIOServer, socket: SocketIOSocket) {
+    // Ensure 'events' array contains objects/classes that conform to IEventHandler (or similar)
+    // where handleEvent's return type matches handleResult's expected result type.
+    console.log(`BACKEND: Attaching listeners for socket ${socket.id}`);
+    (events as IEventHandler[]).forEach((eventHandler: IEventHandler) => { // Cast to IEventHandler[] for better typing
+      socket.on(eventHandler.type, async (data: any) => {
+        console.log(`BACKEND Socket.ts: Socket ${socket.id} received event type: ${eventHandler.type}. Raw Data:`, JSON.stringify(data, null, 2));
+        try {
+          const result = await eventHandler.handleEvent(data);
+          // Now, if there's a type mismatch between what handleEvent returns
+          // and what handleResult expects, TypeScript will give a more specific error.
+          await eventHandler.handleResult(io, socket, result);
+        } catch (error) {
+          console.error(`BACKEND Socket.ts: Error handling socket event ${eventHandler.type} for socket ${socket.id}:`, error);
+          socket.emit('event_error', { event: eventHandler.type, message: error instanceof Error ? error.message : 'An unknown error occurred' });
+        }
+      });
+    });
   }
 
-  /**
-   * Allow user to join new room, while always leaving the previous
-   * room they were in (if applicable).
-   *
-   * @param socket socket which will join/leave room
-   * @param nextRoom new room to join
-   * @returns void
-   */
-  private _safeJoin(socket: socketIO.Socket, user: string, nextRoom: string) {
+  private _safeJoin(socket: SocketIOSocket, user: string, nextRoom: string) {
+    // It's generally safe for a socket to join multiple rooms if needed.
+    // If a socket should only be in one 'primary' room at a time,
+    // you might want to leave previous rooms here.
+    // For now, just joining:
     socket.join(nextRoom);
+    socket.data.room = nextRoom; // Store current primary room on socket.data
     this._socketManager.add(user, socket.id);
     console.log(`Socket ${socket.id} (userID ${user}) joined room ${nextRoom}`);
   }
@@ -195,12 +194,12 @@ class Socket {
 
     console.log(`User ${userId} =>`);
     socketIds.forEach((socketId) => {
-      const socket = this._io?.sockets.sockets.get(socketId);
-      if (socket && socket.data.room) {
-        console.log(`\tSocket ID: ${socketId}, Room: ${socket.data.room}`);
+      const socketInstance = this._io?.sockets.sockets.get(socketId);
+      if (socketInstance) {
+        console.log(`\tSocket ID: ${socketId}, Rooms: ${Array.from(socketInstance.rooms).join(', ') || 'None'}`);
       } else {
         console.log(
-          `\tSocket ID: ${socketId} is not currently connected or has no room.`
+          `\tSocket ID: ${socketId} is not currently connected.`
         );
       }
     });
diff --git a/frontend/src/app/components/ck-ideas/ck-ideas.component.html b/frontend/src/app/components/ck-ideas/ck-ideas.component.html
index 6a5ef7a2..f2de79a0 100644
--- a/frontend/src/app/components/ck-ideas/ck-ideas.component.html
+++ b/frontend/src/app/components/ck-ideas/ck-ideas.component.html
@@ -1,4 +1,4 @@
-<app-toolbar *ngIf="user" [user]="user">
+<app-toolbar *ngIf="user && !embedded" [user]="user">
   <button
     mat-icon-button
     routerLink="{{ '/project/' + projectID }}"
diff --git a/frontend/src/app/components/ck-ideas/ck-ideas.component.scss b/frontend/src/app/components/ck-ideas/ck-ideas.component.scss
index c683df26..68110732 100644
--- a/frontend/src/app/components/ck-ideas/ck-ideas.component.scss
+++ b/frontend/src/app/components/ck-ideas/ck-ideas.component.scss
@@ -39,7 +39,7 @@ $heading-background: lighten($toolbar-color, 15%);
 
 .main-container {
   display: flex;
-  height: calc(100vh - 64px - 70px - 40px); // Initial height
+  height: calc(100vh - 64px - 70px - 40px - 100px); // Initial height
   background-color: $background-color;
 
   .left-pane {
@@ -68,7 +68,7 @@ $heading-background: lighten($toolbar-color, 15%);
 
   .left-pane {
     height: calc(
-      100vh - 64px - 70px - 60px
+      100vh - 64px - 70px - 60px - 100px
     ); // Fixed height for the entire left pane
 
     .ai-summary-header {
@@ -105,7 +105,7 @@ $heading-background: lighten($toolbar-color, 15%);
       padding-top: 1rem;
       overflow-y: auto; // Enable scrolling for the content
       height: calc(
-        100% - 100px
+        100% - 100px - 100px
       ); // remaining height after the header.  52px is a good approx.
     }
   }
@@ -114,7 +114,7 @@ $heading-background: lighten($toolbar-color, 15%);
     display: flex;
     flex-direction: column;
     height: calc(
-      100vh - 64px - 70px - 60px
+      100vh - 64px - 70px - 60px - 100px
     ); // Subtract toolbar, context bar, and margins
     overflow-y: auto; // Add scroll to the overall right pane
 
@@ -130,7 +130,7 @@ $heading-background: lighten($toolbar-color, 15%);
 }
 .chat-feed {
   overflow-y: auto;
-  height: calc(100% - 140px);
+  height: calc(100%);
   margin-bottom: 1rem;
 }
 
diff --git a/frontend/src/app/components/ck-ideas/ck-ideas.component.ts b/frontend/src/app/components/ck-ideas/ck-ideas.component.ts
index 903e86be..fe5ed053 100644
--- a/frontend/src/app/components/ck-ideas/ck-ideas.component.ts
+++ b/frontend/src/app/components/ck-ideas/ck-ideas.component.ts
@@ -12,11 +12,12 @@ import {
   ViewChild,
   ChangeDetectorRef,
   ElementRef,
+  Input,
 } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { ActivatedRoute, Router } from '@angular/router';
+// MatLegacySlideToggleModule is not directly used in the template, can be removed if not needed elsewhere
+import { ActivatedRoute, Router } from '@angular/router'; // Import Router
 import { Board, BoardScope, ViewType } from 'src/app/models/board';
 import { Project } from 'src/app/models/project';
 import { AuthUser, Role } from 'src/app/models/user';
@@ -27,10 +28,10 @@ import Post, { PostType } from 'src/app/models/post';
 import { PostService } from 'src/app/services/post.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { UpvotesService } from 'src/app/services/upvotes.service';
-import { UserService } from 'src/app/services/user.service';
+import { UserService } from 'src/app/services/user.service'; // UserService is already here
 import Converters from 'src/app/utils/converters';
-import { CreateWorkflowModalComponent } from '../create-workflow-modal/create-workflow-modal.component';
-import { CanvasService } from 'src/app/services/canvas.service';
+// import { CreateWorkflowModalComponent } from '../create-workflow-modal/create-workflow-modal.component'; // Not used
+// import { CanvasService } from 'src/app/services/canvas.service'; // Not used
 import { HttpClient } from '@angular/common/http';
 import { saveAs } from 'file-saver';
 import { SnackbarService } from 'src/app/services/snackbar.service';
@@ -47,29 +48,27 @@ interface ChatMessage {
   styleUrls: ['./ck-ideas.component.scss'],
 })
 export class CkIdeasComponent implements OnInit, OnDestroy {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild('scrollableDiv') private scrollableDiv!: ElementRef;
 
-  boardID: string | undefined;
-  projectID: string | undefined;
+  @Input() boardID_input?: string;
+  @Input() projectID_input?: string;
+  @Input() embedded: boolean = false;
+
+  boardID?: string;
+  projectID?: string;
 
   ideaBuckets: any[] = [];
-  boards: any[] = [];
-  user: AuthUser;
+  user!: AuthUser;
   board: Board | undefined;
-  project: Project;
-  Role: typeof Role = Role;
+  project!: Project;
+  Role: typeof Role = Role; // Expose Role enum for template if needed elsewhere
   ViewType: typeof ViewType = ViewType;
-  BoardScope: typeof BoardScope = BoardScope;
-  isTeacher: boolean = false;
+  BoardScope: typeof BoardScope = BoardScope;  
+  isTeacherAndAllowed: boolean = false;
   canvasUsed: boolean = false;
-
   viewType = ViewType.IDEAS;
-
-  groupEventToHandler: Map<SocketEvent, Function>;
   unsubListeners: Subscription[] = [];
-
-  // AI Chat (Right Pane) Variables
   aiPrompt = '';
   aiResponse = '';
   isWaitingForAIResponse = false;
@@ -77,19 +76,15 @@ export class CkIdeasComponent implements OnInit, OnDestroy {
   waitingMessage = 'Waiting for AI Response...';
   chatHistory: ChatMessage[] = [];
   aiResponseListener: Subscription | undefined;
-
-  // Idea Agent (Left Pane) Variables
-  ideaAgentRawResponse: any | null = null; // Store the raw JSON response
-  ideaAgentFormattedResponse: string | null = null; // Store the HTML formatted response
-  //Add pending variables
+  ideaAgentRawResponse: any | null = null;
+  ideaAgentFormattedResponse: string | null = null;
   pendingIdeaAgentRawResponse: any | null = null;
   pendingIdeaAgentFormattedResponse: string | null = null;
   newSummaryAvailable: boolean = false;
-
-  showRawResponse: boolean = false; // Control which version is displayed
+  showRawResponse: boolean = false;
   isWaitingForIdeaAgent = false;
   waitingIdeaMessage = 'Waiting for AI Response...';
-  selectedContexts: any[] = []; // To store selected buckets/canvas
+  selectedContexts: any[] = [];
   ideaAgentResponseListener: Subscription | undefined;
   topicContext: FormControl = new FormControl('');
 
@@ -98,106 +93,118 @@ export class CkIdeasComponent implements OnInit, OnDestroy {
     public boardService: BoardService,
     public projectService: ProjectService,
     public bucketService: BucketService,
-    public canvasService: CanvasService,
     public userService: UserService,
     private snackbarService: SnackbarService,
     public dialog: MatDialog,
     public commentService: CommentService,
     public upvotesService: UpvotesService,
     private converters: Converters,
-    private router: Router,
+    private router: Router, // Injected Router
     private socketService: SocketService,
     private activatedRoute: ActivatedRoute,
     private changeDetectorRef: ChangeDetectorRef,
     private http: HttpClient
-  ) {
-    this.groupEventToHandler = new Map<SocketEvent, Function>([]);
-  }
+  ) {}
 
   async ngOnInit(): Promise<void> {
     this.user = this.userService.user!;
-    this.isTeacher = this.user.role === Role.TEACHER;
-    const { boardID, projectID, board } = await this.configureBoard();
-    this.boardID = boardID;
-    this.projectID = projectID;
-    this.board = board;
-
-    if (this.boardID && this.projectID) {
-      await this.bucketService.getAllByBoard(this.boardID).then((buckets) => {
-        if (buckets) {
-          this.ideaBuckets = buckets;
-        }
-      });
-      this.socketService.connect(this.user.userID, this.boardID);
-
-      // Default to "None" context and show prompt.  AND disable the button.
-      this.ideaAgentFormattedResponse =
-        '<ol><li>Consider adding a <b>Topic Context</b> <em>(above)</em> to improve relevance of summary</li><li>Select post <b>Source</b> using "+" button <em>(top right)</em></li><li>To regenerate, click the <b>refresh</b> button <em>(in this AI Summary heading)</em></li><li>(If needed) If you get a model error, please refresh the summary or page</li></ol>';
-      this.isWaitingForIdeaAgent = false;
-      this.selectedContexts = ['None'];
-
-      // Load topic context from local storage
-      const storedContext = localStorage.getItem('topicContext');
-      if (storedContext) {
-        this.topicContext.setValue(storedContext);
+    
+    if (this.user.role !== Role.TEACHER) {
+      this.isTeacherAndAllowed = false;
+      console.warn("[CK-IDEAS] Access Denied: User is not a teacher.", this.user.username, this.user.role);
+      // If not embedded and user is not a teacher, you might want to navigate them away.
+      // For embedded scenarios, the template will show the access denied message.
+      if (!this.embedded) {
+        this.snackbarService.queueSnackbar("Access Denied: This tool is for teachers only.");
+        // Consider navigating to a default/dashboard page if this component is accessed via a direct route by a non-teacher
+        // Example: this.router.navigate(['/dashboard']);
       }
+      this.changeDetectorRef.detectChanges(); // Ensure view updates if showing a message
+      return; // Stop further initialization if not a teacher
+    }
+    this.isTeacherAndAllowed = true;
+    // End of role check
+
+    // Prioritize @Input values if embedded, otherwise use route params
+    if (this.embedded && this.boardID_input && this.projectID_input) {
+        this.boardID = this.boardID_input;
+        this.projectID = this.projectID_input;
+        console.log("[CK-IDEAS Embedded] Initializing with BoardID:", this.boardID, "ProjectID:", this.projectID);
+    } else if (!this.embedded) {
+        const map = this.activatedRoute.snapshot.paramMap;
+        this.boardID = map.get('boardID') ?? undefined;
+        this.projectID = map.get('projectID') ?? undefined;
+        console.log("[CK-IDEAS Routed] Initializing with BoardID:", this.boardID, "ProjectID:", this.projectID);
     } else {
-      console.error('Failed to configure board!');
-      this.router.navigate(['/error']);
+        console.error("[CK-IDEAS Embedded] Missing boardID_input or projectID_input for embedded mode.");
+        this.snackbarService.queueSnackbar('Error: Required information missing for Idea Agent.');
+        this.isTeacherAndAllowed = false; // Prevent content rendering
+        return;
     }
-    this.waitingIdeaMessage = ''; //Initially blank
 
-    //Listen to topic context changes
-    this.topicContext.valueChanges.subscribe((value) => {
-      localStorage.setItem('topicContext', value);
-    });
-  }
+    if (this.boardID && this.projectID) {
+      try {
+        this.board = await this.boardService.get(this.boardID);
+        this.project = await this.projectService.get(this.projectID);
 
-  initGroupEventsListener() {
-    for (const [k, v] of this.groupEventToHandler) {
-      const unsub = this.socketService.listen(k, v);
-      this.unsubListeners.push(unsub);
-    }
-  }
+        if (!this.board || !this.project) {
+            console.error("[CK-IDEAS] Board or Project data could not be fetched with IDs:", this.boardID, this.projectID);
+            throw new Error("Board or Project data could not be fetched.");
+        }
+        // Navigation guard for non-teacher is now handled by the role check above if not embedded.
+        // If embedded, the parent component should ideally not show the tab/modal to non-teachers.
+        // This internal check is an additional layer.
+
+        this.ideaBuckets = (await this.bucketService.getAllByBoard(this.boardID)) || [];
+        
+        // Socket connection only if not embedded (or based on specific needs for embedded mode)
+        if (!this.embedded) {
+            this.socketService.connect(this.user.userID, this.boardID);
+        }
 
-  async configureBoard(): Promise<{
-    boardID?: string;
-    projectID?: string;
-    board?: Board;
-  }> {
-    // Return board
-    const map = this.activatedRoute.snapshot.paramMap;
-    if (map.has('boardID') && map.has('projectID')) {
-      const boardID = map.get('boardID') ?? undefined;
-      const projectID = map.get('projectID') ?? undefined;
-
-      if (boardID && projectID) {
-        const board = await this.boardService.get(boardID);
-        if (board) {
-          if (
-            !this.isTeacher &&
-            board.viewSettings &&
-            !board.viewSettings.allowIdeas
-          ) {
-            this.router.navigateByUrl(
-              `project/<span class="math-inline">{projectID}/board/</span>{boardID}/${board.defaultView?.toLowerCase()}`
-            );
-          }
-          this.projectService.get(projectID).then((project) => {
-            this.project = project;
-          });
-          return { boardID, projectID, board }; // Return the board object
-        } else {
-          return { boardID, projectID, board: undefined }; // Explicitly return undefined
+        this.ideaAgentFormattedResponse =
+          '<ol><li>Consider adding a <b>Topic Context</b> <em>(above)</em> to improve relevance of summary</li><li>Select post <b>Source</b> using "+" button <em>(top right)</em></li><li>To regenerate, click the <b>refresh</b> button <em>(in this AI Summary heading)</em></li><li>(If needed) If you get a model error, please refresh the summary or page</li></ol>';
+        this.isWaitingForIdeaAgent = false;
+        this.selectedContexts = ['None'];
+
+        const storedContext = localStorage.getItem(`topicContext_${this.boardID}`);
+        if (storedContext) {
+          this.topicContext.setValue(storedContext);
         }
+        this.waitingIdeaMessage = '';
+
+        this.topicContext.valueChanges.subscribe((value) => {
+          localStorage.setItem(`topicContext_${this.boardID}`, value);
+        });
+
+      } catch (error) {
+        console.error('[CK-IDEAS] Failed to configure board or project:', error);
+        this.snackbarService.queueSnackbar('Error loading Idea Agent data.');
+        this.isTeacherAndAllowed = false; // Prevent content rendering on error
+        if (!this.embedded) this.router.navigate(['/error']);
       }
+    } else {
+      console.error('[CK-IDEAS] boardID or projectID is missing after initialization attempt!');
+      this.snackbarService.queueSnackbar('Required information missing for Idea Agent.');
+      this.isTeacherAndAllowed = false; // Prevent content rendering
+      if (!this.embedded) this.router.navigate(['/error']);
     }
-    return { board: undefined }; // Return undefined board
   }
 
   copyEmbedCode() {
-    const url = window.location.href + '?embedded=true';
-    navigator.clipboard.writeText(url);
+    if (!this.boardID || !this.projectID) {
+        this.snackbarService.queueSnackbar("Cannot copy embed code: board or project ID missing.");
+        return;
+    }
+    // Ensure ViewType.IDEAS.toLowerCase() is correct or use a string literal
+    const ideasViewPath = (this.viewType as ViewType).toString().toLowerCase();
+    const url = `${window.location.origin}/project/${this.projectID}/board/${this.boardID}/${ideasViewPath}?embedded=true`;
+    navigator.clipboard.writeText(url).then(() => {
+        this.snackbarService.queueSnackbar("Embeddable URL copied to clipboard!");
+    }).catch(err => {
+        this.snackbarService.queueSnackbar("Failed to copy URL.");
+        console.error('Failed to copy embed code:', err);
+    });
   }
 
   copyPersonalEmbedCode() {
@@ -753,7 +760,8 @@ export class CkIdeasComponent implements OnInit, OnDestroy {
 
   async ngOnDestroy() {
     this.unsubListeners.forEach((s) => s.unsubscribe());
-    if (this.boardID) {
+    // Only disconnect if not embedded and boardID is present
+    if (this.boardID && !this.embedded && this.user) {
       this.socketService.disconnect(this.user.userID, this.boardID);
     }
     if (this.aiResponseListener) {
diff --git a/frontend/src/app/components/ck-workspace/ck-workspace.component.scss b/frontend/src/app/components/ck-workspace/ck-workspace.component.scss
index 4b0fa438..7f702bd4 100644
--- a/frontend/src/app/components/ck-workspace/ck-workspace.component.scss
+++ b/frontend/src/app/components/ck-workspace/ck-workspace.component.scss
@@ -1,6 +1,10 @@
 @import './../../../../node_modules/swiper/swiper.min.css';
 @import './../../../../node_modules/swiper/swiper-bundle.min.css';
 
+// Assuming this is the content of ck-workspace.component.scss
+// If :host is used, these styles would be inside it.
+// If not, .ck-workspace-container is the top-level scope provided.
+
 .ck-workspace-container {
   .spinner {
     margin: 70px auto;
@@ -13,7 +17,7 @@
     top: 0;
     left: 0;
     right: 0;
-    z-index: 999;
+    z-index: 999; // Main toolbar is above most things
   }
 
   .list-task-prompt {
@@ -36,13 +40,13 @@
     margin-top: 20px;
   }
 
-  .drawer-container {
-    position: absolute;
+  .drawer-container { // This is mat-sidenav-container
+    position: absolute; // Relative to .ck-workspace-container or viewport if .ck-workspace-container is static
     left: 0;
     right: 0;
     bottom: 0;
-    top: 0;
-    overflow: none;
+    top: 0; // This makes it fill the parent, or viewport if parent is body
+    // overflow: none; // This is not a valid value, should be hidden or auto/scroll for children
     min-height: calc(100vh);
   }
 
@@ -52,18 +56,15 @@
   }
 
   mat-sidenav {
-    height: 100%; /*  Fill the container */
-
-    /* Use media queries for responsive width */
-    width: 90%; /* Default to 90% for mobile */
+    height: 100%;
+    width: 90%;
 
     @media (max-width: 599px) {
       width: 100%;
     }
 
     @media (min-width: 600px) {
-      /* 'sm' breakpoint and up */
-      width: 30%; /* 30% on desktop */
+      width: 30%;
     }
   }
 
@@ -72,18 +73,19 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow-y: auto;
+    overflow-y: auto; // This is the main scrolling area
+    position: relative; // Important if any children use position:absolute relative to this
 
-    padding-top: 64px;
+    padding-top: 64px; // For the fixed toolbar
 
     @media (max-width: 599px) {
       padding-top: 56px;
     }
   }
 
-  .workflow-create-post {
+  .workflow-create-post { // This seems like another FAB, ensure its positioning is also considered
     background-color: #6c63ff;
-    position: absolute;
+    position: absolute; // Relative to its nearest positioned ancestor
     bottom: 20px;
     right: 20px;
   }
@@ -139,37 +141,40 @@
 
   .swiper-container {
     width: 60%;
-    max-width: 600px; /*  Keep the max-width  */
+    max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
   }
 
   .create-post-fab {
-    position: absolute !important; // Position absolutely within the container
-    bottom: 100px;
-    right: 40px;
-    z-index: 10; // Ensure it's above the cards
-    background-color: #6c63ff;
+    position: fixed;      // Position relative to the viewport
+    bottom: 2rem;         // Distance from the bottom of the screen
+    right: 2rem;          // Distance from the right of the screen
+    z-index: 990;         // Ensure it's above most page content, but below modals/main toolbar if necessary
+    background-color: #6c63ff; // Keep existing color
   }
 
+  // ::ng-deep rules are generally discouraged. Prefer to style components via their own SCSS
+  // or use ::host-context or other encapsulation-respecting methods if possible.
+  // For now, keeping them as they were in your provided SCSS.
   ::ng-deep .mat-toolbar-single-row button[mat-icon-button] {
     z-index: 3;
   }
 
   // Target the app-html-post component *inside* the Swiper slides.
   ::ng-deep .swiper-slide app-html-post {
-    width: 100%; // Make sure it takes the full width of its container.
-    max-width: 100%; // Prevent it from exceeding the container.
-    box-sizing: border-box; // Include padding and border in the width calculation.
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   .refresh-button-container {
     width: 100%;
     display: flex;
     margin-top: 1rem;
-    align-items: center; // Vertical alignment
-    justify-content: space-between; // Key for positioning
+    align-items: center;
+    justify-content: space-between;
   }
 
   .group-info-and-buttons-container {
diff --git a/frontend/src/app/components/project-dashboard/project-dashboard.component.html b/frontend/src/app/components/project-dashboard/project-dashboard.component.html
index c4d6e2c2..8b0aeb39 100644
--- a/frontend/src/app/components/project-dashboard/project-dashboard.component.html
+++ b/frontend/src/app/components/project-dashboard/project-dashboard.component.html
@@ -7,8 +7,9 @@
     >
       <mat-icon>arrow_back</mat-icon>
     </button>
-    <span *ngIf="project">{{ project.name }}</span>
+    <span *ngIf="project" class="project-title-in-toolbar">{{ project.name }}</span>
     <span style="flex: 1 1 auto"></span>
+
     <button
       mat-icon-button
       [matMenuTriggerFor]="addMenu"
@@ -45,10 +46,9 @@
         Todo List
       </button>
       <app-csv-download-button
-        [projectID]="this.projectID"
+        [projectID]="projectID"
         *ngIf="user && user.role === Role.TEACHER"
-      >
-      </app-csv-download-button>
+      />
       <button
         mat-menu-item
         *ngIf="user && user.role === Role.TEACHER"
@@ -82,20 +82,30 @@
   </app-toolbar>
   <div class="content">
     <div class="score-heading">
-      <div *ngIf="project"> 
-        <button 
-          *ngIf="user && user.role === Role.TEACHER && project.isScoreRun" 
-          mat-raised-button 
-          color="primary" 
-          class="script-score-run-button"
-          (click)="navigateToScoreAuthoring()" 
+      <div *ngIf="project" class="action-buttons-container">
+        <button
+          *ngIf="user && user.role === Role.TEACHER && project.isScoreRun"
+          mat-raised-button
+          color="primary"
+          class="dashboard-action-button script-score-run-button"
+          (click)="navigateToScoreAuthoring()"
         >
           Script SCORE Run
         </button>
+        <button
+          *ngIf="user && project"
+          color="accent"
+          class="dashboard-action-button roomcast-nav-button"
+          [routerLink]="['/roomcast', project.projectID]"
+          matTooltip="Open Roomcasting Environment for this project"
+        >
+          <mat-icon>cast_connected</mat-icon>
+          <span>Open Roomcast</span>
+        </button>
       </div>
     </div>
     <div *ngIf="project" class="activity-spaces-heading">
-      <h3 class="mat-title" *ngIf="project">Activity Spaces for "{{ project.name }}"</h3> 
+      <h3 class="mat-title">Activity Spaces for "{{ project.name }}"</h3>
     </div>
     <ng-container *ngIf="user.role === Role.TEACHER">
       <div>
diff --git a/frontend/src/app/components/project-dashboard/project-dashboard.component.scss b/frontend/src/app/components/project-dashboard/project-dashboard.component.scss
index 65e91fa5..1fa983fa 100644
--- a/frontend/src/app/components/project-dashboard/project-dashboard.component.scss
+++ b/frontend/src/app/components/project-dashboard/project-dashboard.component.scss
@@ -63,3 +63,63 @@
 .mat-title {
   display: block; 
 }
+
+.action-buttons-container {
+  display: flex;
+  justify-content: center; // Center the button(s) within this container
+  align-items: center;
+  gap: 16px; // Space between buttons when there are two
+  margin-bottom: 1rem; // Or your desired spacing
+  // You might want to give this container a max-width if you want the
+  // single button to not span the entire page width but still be "wide".
+  // For example:
+  // max-width: 600px;
+  // margin-left: auto;
+  // margin-right: auto;
+}
+
+.dashboard-action-button {
+  padding: 0.8rem 1.6rem; // Slightly larger padding
+  font-size: 1.1rem;    // Slightly larger font
+  line-height: 1.5;
+  border-radius: 6px; // Softer corners
+  display: inline-flex; // For icon and text alignment
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  // Default width for when two buttons are present or a base width
+  min-width: 200px; // Adjust as needed for two-button layout
+  flex-grow: 0;     // Don't grow by default
+  flex-shrink: 0;
+
+  mat-icon {
+    margin-right: 8px;
+  }
+
+  // When this button is the only child in its container
+  &:only-child {
+    // Make it wider, similar to how the "Script SCORE Run" button might appear alone
+    width: 400px; // Match the original script-score-run-button width
+    max-width: 90%; // Ensure it doesn't overflow on very small screens
+    // If you used flex-grow:1 for the container, then width: 100% would work here.
+    // Since we are using a fixed width, this is more direct.
+  }
+}
+
+// If you have specific styles for script-score-run-button that define its width,
+// ensure .dashboard-action-button:only-child overrides or matches it.
+// .script-score-run-button {
+//   // Original styles if any, e.g., specific width if not handled by :only-child
+// }
+
+// .roomcast-nav-button {
+//   // Specific styles for roomcast button if needed beyond .dashboard-action-button
+// }
+
+// Ensure the .score-heading doesn't constrain the width too much
+// if the buttons are to be wide.
+.score-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center; // This will center the .action-buttons-container if it has a max-width
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/score-authoring/score-authoring.component.html b/frontend/src/app/components/score-authoring/score-authoring.component.html
index c29b4910..589f23c5 100644
--- a/frontend/src/app/components/score-authoring/score-authoring.component.html
+++ b/frontend/src/app/components/score-authoring/score-authoring.component.html
@@ -1,12 +1,5 @@
-<!-- score-authoring.component.html -->
-
-<div>
-  <app-toolbar
-    class="toolbar"
-    *ngIf="user && project"
-    [user]="user"
-    style="width: 100%"
-  >
+<div class="authoring-page-wrapper">
+  <app-toolbar class="toolbar" *ngIf="user && project" [user]="user">
     <button
       mat-icon-button
       routerLink="{{ '/project/' + project.projectID }}"
@@ -19,15 +12,14 @@
     <app-toolbar-menu navbarMenu [project]="project"></app-toolbar-menu>
   </app-toolbar>
 
-  <div class="main-content">
-    <div class="activities-pane">
-      <!--<button mat-raised-button color="primary" class="classroom-bindings-button" (click)="toggleClassroomBindings()">
-          {{ showClassroomBindings ? 'Author Resources' : 'Author Classroom' }} 
-        </button>-->
+  <div class="main-layout-container">
+    <!-- LEFT PANE COLUMN -->
+    <div class="left-pane-column">
       <h3>Activity Phases</h3>
       <div
         class="activities-list"
         cdkDropList
+        [cdkDropListData]="activities"
         (cdkDropListDropped)="dropActivity($event)"
       >
         <div
@@ -36,132 +28,163 @@ <h3>Activity Phases</h3>
           [class.selected]="
             selectedActivity?.activityID === activity.activityID
           "
+          [class.active-phase]="activity.isActive"
           cdkDrag
+          [cdkDragData]="activity"
+          class="activity-item-wrapper"
         >
           <div class="activity-item">
             <mat-icon cdkDragHandle class="drag-handle"
               >drag_indicator</mat-icon
             >
-            {{ activity.name }}
+            <span class="activity-name">{{ activity.name }}</span>
             <div class="activity-buttons">
-              <button mat-icon-button (click)="editActivity(activity)">
+              <button
+                mat-icon-button
+                (click)="editActivity(activity); $event.stopPropagation()"
+                matTooltip="Edit Activity"
+              >
                 <mat-icon>edit</mat-icon>
               </button>
-              <button mat-icon-button (click)="start(activity)">
-                <mat-icon>play_arrow</mat-icon>
+              <button
+                mat-icon-button
+                (click)="toggleActivityState(activity, $event)"
+                [matTooltip]="
+                  activity.isActive
+                    ? 'Stop Activity Phase'
+                    : 'Start Activity Phase'
+                "
+                [color]="activity.isActive ? 'warn' : 'primary'"
+              >
+                <mat-icon>{{
+                  activity.isActive ? 'stop_circle' : 'play_circle_filled'
+                }}</mat-icon>
               </button>
             </div>
           </div>
         </div>
+        <div
+          *ngIf="!activities || activities.length === 0"
+          class="empty-list-message"
+        >
+          No activities created yet.
+        </div>
       </div>
-      <button
-        mat-fab
-        color="primary"
-        class="add-activity-button"
-        (click)="openCreateActivityModal()"
-      >
-        <mat-icon>add</mat-icon>
-      </button>
 
-      <div *ngIf="selectedActivity" class="item-info-section">
-        <h4>Buckets & Workflows</h4>
+      <div class="add-activity-button-container">
+        <button
+          mat-fab
+          color="primary"
+          class="add-activity-button"
+          (click)="openCreateActivityModal()"
+          matTooltip="Add New Activity Phase"
+        >
+          <mat-icon>add</mat-icon>
+        </button>
+      </div>
 
-        <div class="item-info-grid">
-          <div class="grid-item">
-            <span class="item-label">Buckets:</span>
-          </div>
-          <div class="grid-item">
-            <span class="item-count">{{ bucketCount }}</span>
-          </div>
-          <div class="grid-item">
-            <button
-              mat-icon-button
-              class="add-item-button"
-              (click)="openWorkflowBucketModal(0)"
-              matTooltip="Create/Modify Buckets"
-            >
-              <mat-icon>edit</mat-icon>
-            </button>
-          </div>
+      <ng-container *ngIf="selectedActivity">
+        <div class="item-info-section">
+          <h4>Buckets & Workflows</h4>
+          <div class="item-info-grid">
+            <div class="grid-item item-label">Buckets:</div>
+            <div class="grid-item item-count">{{ bucketCount }}</div>
+            <div class="grid-item">
+              <button
+                mat-icon-button
+                class="add-item-button"
+                (click)="openWorkflowBucketModal(0)"
+                matTooltip="Create/Modify Buckets"
+              >
+                <mat-icon>edit</mat-icon>
+              </button>
+            </div>
 
-          <div class="grid-item">
-            <span class="item-label">Workflows:</span>
-          </div>
-          <div class="grid-item">
-            <span class="item-count">{{ workflowCount }}</span>
-          </div>
-          <div class="grid-item">
-            <button
-              mat-icon-button
-              class="add-item-button"
-              (click)="openWorkflowBucketModal(1)"
-              matTooltip="Create/Modify Workflows"
-              #editWorkflowsButton
-            >
-              <mat-icon>edit</mat-icon>
-            </button>
+            <div class="grid-item item-label">Workflows:</div>
+            <div class="grid-item item-count">{{ workflowCount }}</div>
+            <div class="grid-item">
+              <button
+                mat-icon-button
+                class="add-item-button"
+                (click)="openWorkflowBucketModal(1)"
+                matTooltip="Create/Modify Workflows"
+                #editWorkflowsButton
+              >
+                <mat-icon>edit</mat-icon>
+              </button>
+            </div>
           </div>
         </div>
+      </ng-container>
+
+      <div class="open-tools-buttons">
+        <button
+          mat-stroked-button
+          (click)="openTeacherAgentModal()"
+          matTooltip="Open Teacher Agent Configuration"
+        >
+          <mat-icon>smart_toy</mat-icon> Open Teacher Agent
+        </button>
+        <button
+          mat-stroked-button
+          (click)="openRoomCasting()"
+          matTooltip="Open Roomcasting Environment"
+        >
+          <mat-icon>cast</mat-icon> Open Roomcasting
+        </button>
       </div>
-      <div class="open-tools-buttons">  <button
-        mat-icon-button
-        (click)="openTeacherAgentModal()"
-        matTooltip="Open Teacher Agent"
-      >
-        <mat-icon>smart_toy</mat-icon> Open Teacher Agent
-      </button>
-  
-      <button
-        mat-icon-button
-        (click)="openRoomCasting()"
-        matTooltip="Open Roomcasting Environment"
-      >
-        <mat-icon>cast</mat-icon> Open Roomcasting Environment
-      </button>
-    </div>
     </div>
 
-    <div class="content-and-resources">
-      <div class="middle-pane">
-        <div class="canvas-container" *ngIf="showClassroomBindings">
-          <canvas id="classroomCanvas"></canvas>
-        </div>
+    <div class="middle-pane-column">
+      <div class="canvas-container" *ngIf="showClassroomBindings">
+        <canvas id="classroomCanvas"></canvas>
+      </div>
+
+      <ng-container
+        *ngIf="selectedActivity; else noActivitySelectedInMiddlePane"
+      >
         <button
           mat-fab
-          color="primary"
-          class="add-resource-button"
+          [color]="showResourcesPane ? 'warn' : 'accent'"
+          class="toggle-resources-overlay-button"
           (click)="toggleResourcesPane()"
-          *ngIf="!showResourcesPane && selectedActivity"
+          matTooltip="{{
+            showResourcesPane
+              ? 'Hide Resources & Actions'
+              : 'Show Resources & Actions'
+          }}"
         >
-          <mat-icon>add</mat-icon>
+          <mat-icon>{{ showResourcesPane ? 'close' : 'build' }}</mat-icon>
         </button>
-        <h3 *ngIf="selectedActivity">{{ selectedActivity.name }}</h3>
+
+        <h3>{{ selectedActivity.name }}</h3>
         <div class="activity-space-header">
           <div class="heading-and-settings-container">
-            <h4 *ngIf="selectedActivity">
-              Activity Space: {{ selectedBoardName }}
-            </h4>
+            <h4>Activity Space: {{ selectedBoardName }}</h4>
             <button
               *ngIf="selectedActivity"
               mat-icon-button
               class="config-button"
               (click)="openConfigurationModal()"
-              matTooltip="Configure Activity Space"
+              matTooltip="Configure Activity Space Board"
             >
               <mat-icon>settings</mat-icon>
             </button>
           </div>
         </div>
 
-        <h5>Resource Assignments</h5>
+        <h5>Resource Tabs for Activity Space</h5>
         <div
           class="activity-resources-list"
           cdkDropList
+          [cdkDropListData]="selectedActivityResources"
           (cdkDropListDropped)="dropResource($event)"
         >
           <div
             *ngFor="let resource of selectedActivityResources; let i = index"
             cdkDrag
+            [cdkDragData]="resource"
+            class="resource-item-wrapper"
           >
             <div
               class="resource-item"
@@ -174,248 +197,389 @@ <h5>Resource Assignments</h5>
               <mat-icon cdkDragHandle class="drag-handle"
                 >drag_indicator</mat-icon
               >
-              Tab {{ i + 1 }}: {{ resource.name }}
+              <span class="resource-name"
+                >Tab {{ i + 1 }}: {{ resource.name }}</span
+              >
               <button
                 mat-icon-button
-                (click)="deleteResource(resource, i)"
+                (click)="deleteResource(resource, i); $event.stopPropagation()"
                 class="delete-button"
+                matTooltip="Delete Resource Tab"
               >
                 <mat-icon>close</mat-icon>
               </button>
             </div>
           </div>
+          <div
+            *ngIf="
+              !selectedActivityResources ||
+              selectedActivityResources.length === 0
+            "
+            class="empty-list-message"
+          >
+            No resources assigned to this activity space. Drag items from
+            'Resources & Actions' pane.
+          </div>
         </div>
 
-        <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTabIndex">
+        <mat-tab-group
+          class="authoring-tabs"
+          animationDuration="0ms"
+          [(selectedIndex)]="selectedTabIndex"
+          mat-stretch-tabs="false"
+        >
           <mat-tab label="Teacher Tasks">
-              <div cdkDropList class="teacher-task-list" (cdkDropListDropped)="dropTeacherAction($event)">
-                  <div
-                  *ngFor="let task of teacherTasks; let i = index"
-                  cdkDrag
-                  class="teacher-task-item"
-                  [class.activateWorkflow]="task.type === 'activateWorkflow'"
-                  [class.activateAiAgent]="task.type === 'activateAiAgent'"
-                  [class.regroupStudents]="task.type === 'regroupStudents'"
-                  [class.viewCanvas]="task.type === 'viewCanvas'"
-                  [class.viewBuckets]="task.type === 'viewBuckets'"
-                  [class.viewTodos]="task.type === 'viewTodos'"
-                  [class.viewWorkspace]="task.type === 'viewWorkspace'"
-                  [class.customPrompt]="task.type === 'customPrompt'"
-                  [class.showJoinCode]="task.type === 'showJoinCode'"
+            <div
+              cdkDropList
+              class="teacher-task-list"
+              [cdkDropListData]="teacherTasks"
+              (cdkDropListDropped)="dropTeacherAction($event)"
+            >
+              <div
+                *ngFor="let task of teacherTasks; let i = index"
+                cdkDrag
+                [cdkDragData]="task"
+                class="teacher-task-item"
+                [ngClass]="task.type"
+              >
+                <div
+                  class="task-content"
+                  (click)="handleTeacherTaskClick(task)"
+                >
+                  <mat-icon cdkDragHandle class="drag-handle"
+                    >drag_indicator</mat-icon
                   >
-                      <div
-                          class="task-content"
-                          (click)="handleTeacherTaskClick(task)"
-                      >
-                          <mat-icon cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
-                          Task {{ task.order }}:
-                          <mat-icon class="teacher-task-icon">{{ getIconForTask(task) }}</mat-icon>
-                          <ng-container *ngIf="task.type === 'customPrompt'">Prompt: {{ task.customPrompt }}</ng-container>
-                          <ng-container *ngIf="task.type === 'activateWorkflow'">
-                              Activate Workflow: {{ getWorkflowName(task.workflowID) }}
-                          </ng-container>
-                          <ng-container *ngIf="task.type === 'showJoinCode'">
-                              Show Join Code
-                          </ng-container>
-                          {{ (task.type !== 'customPrompt' && task.type !== 'activateWorkflow' && task.type != 'showJoinCode') ? task.name : '' }}
-                      </div>
-                      <button mat-icon-button (click)="deleteTeacherTask(task, i); $event.stopPropagation();">
-                          <mat-icon>close</mat-icon>
-                      </button>
-                  </div>
+                  <span class="task-order">Task {{ task.order }}:</span>
+                  <mat-icon class="teacher-task-icon">{{
+                    getIconForTask(task)
+                  }}</mat-icon>
+                  <span class="task-description">
+                    <ng-container *ngIf="task.type === 'customPrompt'"
+                      >Prompt: {{ task.customPrompt }}</ng-container
+                    >
+                    <ng-container *ngIf="task.type === 'activateWorkflow'">
+                      Activate Workflow: {{ getWorkflowName(task.workflowID) }}
+                    </ng-container>
+                    <ng-container *ngIf="task.type === 'showJoinCode'"
+                      >Show Join Code</ng-container
+                    >
+                    {{
+                      task.type !== 'customPrompt' &&
+                      task.type !== 'activateWorkflow' &&
+                      task.type !== 'showJoinCode'
+                        ? task.name
+                        : ''
+                    }}
+                  </span>
+                </div>
+                <button
+                  mat-icon-button
+                  (click)="deleteTeacherTask(task, i); $event.stopPropagation()"
+                  matTooltip="Delete Task"
+                >
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+              <div
+                *ngIf="!teacherTasks || teacherTasks.length === 0"
+                class="empty-list-message"
+              >
+                No teacher tasks defined. Drag actions from 'Resources &
+                Actions' pane.
               </div>
+            </div>
           </mat-tab>
           <mat-tab label="Active AI Agents">
-              <div class="activity-resources-list" cdkDropList (cdkDropListDropped)="dropAiAgent($event)">
-                  <div *ngFor="let agent of activeAiAgents; let i = index" cdkDrag>
-                      <div class="resource-item" [class.teacher]="agent.type === 'teacher'"
-                          [class.idea_chat]="agent.type === 'idea_chat'"
-                          [class.idea_ambient]="agent.type === 'idea_ambient'"
-                          [class.personal_learning]="agent.type === 'personal_learning'"
-                          [class.group_interaction]="agent.type === 'group_interaction'"
-                          [class.workflow]="agent.type === 'workflow'">
-                          <mat-icon cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
-                          {{ agent.name }}
-                          <button mat-icon-button (click)="deleteAiAgent(agent, i)" class="delete-button">
-                              <mat-icon>close</mat-icon>
-                          </button>
-                      </div>
-                  </div>
+            <div
+              class="ai-agents-list"
+              cdkDropList
+              [cdkDropListData]="activeAiAgents"
+              (cdkDropListDropped)="dropAiAgent($event)"
+            >
+              <div
+                *ngFor="let agent of activeAiAgents; let i = index"
+                cdkDrag
+                [cdkDragData]="agent"
+                class="ai-agent-item-wrapper"
+              >
+                <div class="ai-agent-item" [ngClass]="agent.type">
+                  <mat-icon cdkDragHandle class="drag-handle"
+                    >drag_indicator</mat-icon
+                  >
+                  <span class="agent-name"
+                    >{{ agent.name }} ({{ agent.type }})</span
+                  >
+                  <button
+                    mat-icon-button
+                    (click)="deleteAiAgent(agent, i); $event.stopPropagation()"
+                    class="delete-button"
+                    matTooltip="Delete Agent"
+                  >
+                    <mat-icon>close</mat-icon>
+                  </button>
+                </div>
               </div>
+              <div
+                *ngIf="!activeAiAgents || activeAiAgents.length === 0"
+                class="empty-list-message"
+              >
+                No AI agents configured. Drag agents from 'Resources & Actions'
+                pane.
+              </div>
+            </div>
           </mat-tab>
-      </mat-tab-group>
-      </div>
+        </mat-tab-group>
+      </ng-container>
+      <ng-template #noActivitySelectedInMiddlePane>
+        <div class="placeholder-message">
+          <h2>Welcome to SCORE Authoring</h2>
+          <p>
+            Please select an Activity Phase from the left pane to begin
+            configuring its resources, tasks, and groups.
+          </p>
+          <p>
+            If no activities exist, click the <mat-icon>add</mat-icon> button in
+            the left pane to create one.
+          </p>
+        </div>
+      </ng-template>
+    </div>
 
-      <div class="resources-right-pane-container">
-        <mat-sidenav
-          #authoringResourcesPane
-          id="authoringResourcesPane"
-          mode="over"
-          position="end"
-          [(opened)]="showResourcesPane"
+    <div class="right-pane-column">
+      <ng-container *ngIf="!showClassroomBindings">
+        <div
+          class="default-right-pane-content"
+          *ngIf="!showResourcesPane && selectedActivity"
         >
-          <div class="resources-pane" *ngIf="!showClassroomBindings">
+          <div class="groups-header">
+            <h3>Group Assignments</h3>
             <button
               mat-icon-button
-              class="close-resource-button"
-              (click)="showResourcesPane = false"
+              (click)="openGroupDialog()"
+              matTooltip="Manage Project Groups"
             >
-              <mat-icon>close</mat-icon>
+              <mat-icon>manage_accounts</mat-icon>
             </button>
-            <h3>Resources & Actions</h3>
-            <h4>Resources</h4>
-            <div
-              class="available-resources-list"
-              cdkDropList
-              cdkDropListOrientation="vertical"
-              (cdkDropListDropped)="dropResourceFromAvailable($event)"
-            >
-              <div *ngFor="let resource of availableResources" cdkDrag>
+          </div>
+          <ng-container
+            *ngIf="
+              selectedActivityGroups.length > 0 &&
+                selectedActivityResources.length > 0;
+              else noGroupsOrResourcesForTableInRightPane
+            "
+          >
+            <div class="group-resource-table">
+              <div class="group-header-row">
                 <div
-                  class="available-resource-item"
-                  [class.canvas]="resource.type === 'canvas'"
-                  [class.bucketView]="resource.type === 'bucketView'"
-                  [class.workspace]="resource.type === 'workspace'"
-                  [class.monitor]="resource.type === 'monitor'"
-                  [class.ideaAgent]="resource.type === 'ideaAgent'"
+                  class="group-header-cell"
+                  *ngFor="let group of selectedActivityGroups"
                 >
-                  {{ resource.name }}
+                  <span>{{ group.name }}</span>
                 </div>
               </div>
+              <div
+                class="resource-row"
+                *ngFor="
+                  let resource of selectedActivityResources;
+                  let resourceIndex = index
+                "
+              >
+                <div
+                  class="group-resource-cell"
+                  *ngFor="let group of selectedActivityGroups"
+                  (click)="toggleResourceGroupAssignment(resource, group)"
+                  [class.selected]="isResourceAssignedToGroup(resource, group)"
+                  [ngClass]="{
+                    canvas: resource.canvas,
+                    bucketView: resource.bucketView,
+                    workspace: resource.workspace,
+                    monitor: resource.monitor,
+                    ideaAgent: resource.ideaAgent
+                  }"
+                  matTooltip="{{ resource.name }} - {{
+                    isResourceAssignedToGroup(resource, group)
+                      ? 'Assigned to ' + group.name
+                      : 'Assign to ' + group.name
+                  }}"
+                ></div>
+              </div>
             </div>
-
-            <h4>AI Agents</h4>
+          </ng-container>
+          <ng-template #noGroupsOrResourcesForTableInRightPane>
             <div
-              class="available-teacher-actions-list"
-              cdkDropList
-              cdkDropListOrientation="vertical"
-              (cdkDropListDropped)="dropAiAgentFromAvailable($event)"
+              class="empty-list-message small-text"
+              *ngIf="selectedActivityGroups.length === 0"
             >
-              <div *ngFor="let agent of availableAiAgents" cdkDrag>
-                <div
-                  class="available-resource-item"
-                  [class.teacher]="agent.type === 'teacher'"
-                  [class.idea_chat]="agent.type === 'idea'"
-                  [class.personal_learning]="agent.type === 'personal_learning'"
-                  [class.group_interaction]="agent.type === 'group_interaction'"
-                  [class.workflow]="agent.type === 'workflow'"
-                >
-                  {{ agent.name }}
-                </div>
-              </div>
+              No groups created for this project yet. Click the
+              <mat-icon>group_add</mat-icon> icon to manage groups.
             </div>
+            <div
+              class="empty-list-message small-text"
+              *ngIf="
+                selectedActivityResources.length === 0 &&
+                selectedActivityGroups.length > 0
+              "
+            >
+              No resources assigned to this activity space (in the middle pane).
+              Add resources first to assign them to groups.
+            </div>
+          </ng-template>
+        </div>
 
-            <h4>Teacher Actions</h4>
+        <div
+          class="resources-actions-overlay"
+          *ngIf="showResourcesPane && !showClassroomBindings"
+        >
+          <button
+            mat-icon-button
+            class="close-overlay-button"
+            (click)="showResourcesPane = false"
+            matTooltip="Close Resources & Actions"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+          <h3>Resources & Actions</h3>
+
+          <h4>Available Resource Tabs</h4>
+          <div
+            class="available-items-list"
+            cdkDropList
+            cdkDropListOrientation="vertical"
+            (cdkDropListDropped)="dropResourceFromAvailable($event)"
+            [cdkDropListData]="availableResources"
+          >
             <div
-              class="available-teacher-actions-list"
-              cdkDropList
-              cdkDropListOrientation="vertical"
-              (cdkDropListDropped)="dropTeacherActionFromAvailable($event)"
+              *ngFor="let resource of availableResources"
+              cdkDrag
+              [cdkDragData]="resource"
+              class="available-resource-item"
+              [ngClass]="resource.type"
+              matTooltip="Drag to 'Resource Tabs for Activity Space' in the middle pane"
             >
-              <div *ngFor="let action of availableTeacherActions" cdkDrag>
-                <div
-                  class="available-resource-item"
-                  [class.activateWorkflow]="action.type === 'activateWorkflow'"
-                  [class.activateAiAgent]="action.type === 'activateAiAgent'"
-                  [class.regroupStudents]="action.type === 'regroupStudents'"
-                  [class.viewCanvas]="action.type === 'viewCanvas'"
-                  [class.viewBuckets]="action.type === 'viewBuckets'"
-                  [class.viewTodos]="action.type === 'viewTodos'"
-                  [class.viewWorkspace]="action.type === 'viewWorkspace'"
-                  [class.customPrompt]="action.type === 'customPrompt'"
-                  [class.showJoinCode]="action.type === 'showJoinCode'"
-                >
-                  <mat-icon>{{ action.icon }}</mat-icon>
-                  {{ action.name }}
-                </div>
-              </div>
+              {{ resource.name }}
+            </div>
+            <div
+              *ngIf="availableResources.length === 0"
+              class="empty-list-message small"
+            >
+              All available resource tab types have been assigned to this
+              activity.
             </div>
           </div>
-        </mat-sidenav>
 
-        <div class="groups-list" *ngIf="!showResourcesPane && selectedActivity">
-          <div class="groups-header">
-            <h3>Groups</h3>
-            <button mat-icon-button (click)="openGroupDialog()">
-              <mat-icon>edit</mat-icon>
-            </button>
+          <h4>Available AI Agents</h4>
+          <div
+            class="available-items-list"
+            cdkDropList
+            cdkDropListOrientation="vertical"
+            (cdkDropListDropped)="dropAiAgentFromAvailable($event)"
+            [cdkDropListData]="availableAiAgents"
+          >
+            <div
+              *ngFor="let agent of availableAiAgents"
+              cdkDrag
+              [cdkDragData]="agent"
+              class="available-resource-item"
+              [ngClass]="agent.type"
+              matTooltip="Drag to 'Active AI Agents' tab in the middle pane"
+            >
+              {{ agent.name }}
+            </div>
+            <div
+              *ngIf="availableAiAgents.length === 0"
+              class="empty-list-message small"
+            >
+              No more AI agent types available to add.
+            </div>
           </div>
-          <div class="group-resource-table">
-            <div class="group-header-row">
-              <div
-                class="group-header-cell"
-                *ngFor="let group of selectedActivityGroups"
-              >
-                {{ group.name }}
-              </div>
-              <div class="group-header-cell edit-cell">
-                <button
-                  mat-icon-button
-                  (click)="editActivity(selectedActivity!)"
-                >
-                  <mat-icon>edit</mat-icon>
-                </button>
-              </div>
+
+          <h4>Available Teacher Actions</h4>
+          <div
+            class="available-items-list"
+            cdkDropList
+            cdkDropListOrientation="vertical"
+            (cdkDropListDropped)="dropTeacherActionFromAvailable($event)"
+            [cdkDropListData]="availableTeacherActions"
+          >
+            <div
+              *ngFor="let action of availableTeacherActions"
+              cdkDrag
+              [cdkDragData]="action"
+              class="available-resource-item"
+              [ngClass]="action.type"
+              matTooltip="Drag to 'Teacher Tasks' tab in the middle pane"
+            >
+              <mat-icon>{{ action.icon }}</mat-icon>
+              {{ action.name }}
             </div>
             <div
-              class="resource-row"
-              *ngFor="
-                let resource of selectedActivityResources;
-                let resourceIndex = index
-              "
+              *ngIf="availableTeacherActions.length === 0"
+              class="empty-list-message small"
             >
-              <div
-                class="group-resource-cell"
-                *ngFor="let group of selectedActivityGroups"
-                (click)="toggleResourceGroupAssignment(resource, group)"
-                [class.selected]="isResourceAssignedToGroup(resource, group)"
-                [class.canvas]="resource.canvas"
-                [class.bucketView]="resource.bucketView"
-                [class.workspace]="resource.workspace"
-                [class.monitor]="resource.monitor"
-                [class.ideaAgent]="resource.ideaAgent"
-              ></div>
+              No teacher actions available.
             </div>
           </div>
         </div>
-      </div>
+      </ng-container>
 
-      <div
-        class="classroom-right-pane-container"
-        *ngIf="showClassroomBindings && showResourcesPane"
-      >
-        <mat-sidenav
-          #classroomResourcesPane
-          mode="over"
-          position="end"
-          [(opened)]="showResourcesPane"
-        >
-          <div class="resources-pane" *ngIf="showClassroomBindings">
+      <ng-container *ngIf="showClassroomBindings">
+        <div class="classroom-mode-right-pane">
+          <div class="classroom-resources-content" *ngIf="showResourcesPane">
             <button
               mat-icon-button
-              class="close-resource-button"
+              class="close-overlay-button"
               (click)="showResourcesPane = false"
+              matTooltip="Close Classroom Elements"
             >
               <mat-icon>close</mat-icon>
             </button>
-            <h3>Resources</h3>
-
-            <h4>Classroom Objects</h4>
+            <h3>Classroom Elements</h3>
+            <h4>Available Objects</h4>
             <div
-              class="available-resources-list"
+              class="available-items-list"
               cdkDropList
               cdkDropListOrientation="vertical"
               (cdkDropListDropped)="dropResourceFromAvailable($event)"
             >
-              <div *ngFor="let resource of availableClassroomObjects" cdkDrag>
-                <div class="available-resource-item">
-                  <mat-icon>{{ resource.icon }}</mat-icon>
-                  {{ resource.name }}
-                </div>
+              <div
+                *ngFor="let resource of availableClassroomObjects"
+                cdkDrag
+                [cdkDragData]="resource"
+                class="available-resource-item"
+                matTooltip="Drag onto the canvas in the middle pane"
+              >
+                <mat-icon>{{ resource.icon }}</mat-icon>
+                {{ resource.name }}
+              </div>
+              <div
+                *ngIf="
+                  !availableClassroomObjects ||
+                  availableClassroomObjects.length === 0
+                "
+                class="empty-list-message small"
+              >
+                No classroom objects defined.
               </div>
             </div>
           </div>
-        </mat-sidenav>
+          <div *ngIf="!showResourcesPane" class="default-classroom-content">
+            <h4>Classroom Setup Mode</h4>
+            <p>Arrange classroom elements on the canvas in the middle pane.</p>
+            <button mat-stroked-button (click)="showResourcesPane = true">
+              <mat-icon>add_circle_outline</mat-icon> Show Available Elements
+            </button>
+          </div>
+        </div>
+      </ng-container>
+
+      <div
+        class="placeholder-message"
+        *ngIf="
+          !selectedActivity && !showClassroomBindings && !showResourcesPane
+        "
+      >
+        Select an Activity Phase from the left pane to manage its group
+        assignments or view available resources.
       </div>
     </div>
   </div>
diff --git a/frontend/src/app/components/score-authoring/score-authoring.component.scss b/frontend/src/app/components/score-authoring/score-authoring.component.scss
index 9babf4dd..66040ae8 100644
--- a/frontend/src/app/components/score-authoring/score-authoring.component.scss
+++ b/frontend/src/app/components/score-authoring/score-authoring.component.scss
@@ -1,647 +1,566 @@
 // score-authoring.component.scss
 
+:host {
+  display: block; // Ensures the component takes up block-level space
+  height: 100vh;  // Makes the host component viewport height
+  overflow: hidden; // Prevents the host itself from scrolling due to fixed toolbar
+}
+
 .toolbar {
-  width: 100%; 
+  width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  z-index: 999; 
+  z-index: 1001; // Ensure toolbar is above layout container content
 }
 
-.main-content {
-  display: flex; 
-  min-height: calc(100vh - 64px);  
-  margin-top: 64px; 
+.main-layout-container {
+  display: flex;
+  height: calc(100vh - 64px); // Adjust 64px if toolbar height differs
+  margin-top: 64px; // Offset for the fixed toolbar
+  width: 100%;
 }
 
-.activities-pane {
-  width: 250px; 
+// LEFT PANE COLUMN
+.left-pane-column {
+  flex: 0 0 250px; // Fixed width for left pane
+  height: 100%;     // Full height of its parent (.main-layout-container)
+  overflow-y: auto; // Scrollable if content exceeds height
   padding: 1rem;
-  border-right: 1px solid #ccc; 
+  border-right: 1px solid #ccc;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column; // To manage spacing of children like the FAB container
 
-  h3 { 
+  h3 {
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 1rem;
+    flex-shrink: 0;
   }
 
-  h4 { 
+  h4 {
     font-size: 1.2rem;
     font-weight: bold;
-    margin-bottom: 0.5rem; 
-  }
-
-  .classroom-bindings-button {
-    position: static;
-    margin-top: 0.25rem;
-    margin-bottom: 2rem;
-    width: 100%; // Make the button take full width
-  }
-
-  .item-info-section {
-    margin-top: 2rem; // Add some spacing above the section
-
-    h4 {
-      text-align: left; // Center the heading
-      margin-bottom: 1rem; // Add spacing below heading
-    }
+    margin-bottom: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .activities-list {
+    margin-bottom: 1rem; // Space before the add button container
+    flex-grow: 1; // Allow list to take available space if other elements are fixed height
+    overflow-y: auto; // Should scroll independently if it becomes too long before the pane itself scrolls
+
+    .activity-item-wrapper {
+      // Styles for selected state (if applied to wrapper)
+      // &.selected { background-color: #f0f0f0; }
+
+      .activity-item {
+        display: flex;
+        align-items: center; // Vertically align items if text wraps
+        cursor: pointer;
+        padding: 0.5rem 0.25rem;
+        margin-bottom: 0.1rem;
+        min-height: 40px; // Ensure a minimum height for items
+        border-radius: 4px;
+
+        .drag-handle {
+          flex-shrink: 0;
+          cursor: move;
+          margin-right: 0.5rem;
+          color: #757575;
+        }
 
-    .item-info-grid {
-      display: grid;
-      grid-template-columns: auto auto 1fr; 
-      gap: 0.5rem; 
-      align-items: center;
-      margin-left: 10%;
+        .activity-name {
+          flex-grow: 1;
+          word-break: break-word; // Allow text to wrap
+          line-height: 1.4;
+          padding-right: 0.5rem; // Space before buttons
+        }
 
-      .item-label {
-        font-weight: bold;
-        text-align: left; // Left-align labels
-      }
+        .activity-buttons {
+          flex-shrink: 0;
+          display: flex;
+          align-items: center; // Align buttons vertically
+          margin-left: auto; // Pushes buttons to the very right
 
-      .item-count {
-        text-align: left; // Left-align counts
+          button {
+            margin-left: 0.25rem;
+          }
+        }
       }
-
-      .add-item-button {
-        .mat-icon {
-          color: black;
+      // Selected style for the activity item itself
+      &.selected { // This applies to activity-item-wrapper
+        .activity-item { // Target the inner item for visual changes
+          background-color: #e0e0e0;
+          border-left: 4px solid #3f51b5; // Highlight color
+          padding-left: calc(0.25rem + 0.5rem - 4px); // Adjust padding for border
         }
       }
     }
+    .empty-list-message {
+      padding: 1rem;
+      text-align: center;
+      color: #757575;
+    }
   }
-  .open-tools-buttons {  // Add a class to wrap the buttons
-    margin-top: 1rem;   // Add margin above the div
 
-    button { 
-      display: block;    // Make buttons stack vertically
-      width: auto;      // Make buttons take full width
-      margin-bottom: 1rem; // Add space between buttons
-    }
+  .add-activity-button-container {
+    display: flex;
+    justify-content: flex-end; // Aligns FAB to the right
+    padding-top: 1rem; // Spacing above the button
+    margin-top: auto; // Pushes this container to the bottom if .activities-list doesn't grow fully
+    flex-shrink: 0;
   }
-}
+  // .add-activity-button {} // FAB's own styles are usually self-contained
 
-.activities-list {
-  div.activity-item { 
-    display: flex; 
-    align-items: center; 
-    cursor: pointer;
-    padding: 0 0 0 0.5rem; 
-    margin-bottom: 0; 
-
-    .activity-buttons {
-      margin-left: auto; 
-      
-      button {
-        margin-left: 0.5rem; 
-      }
+  .item-info-section {
+    margin-top: 2rem;
+    flex-shrink: 0;
+    h4 {
+      text-align: left;
+      margin-bottom: 1rem;
     }
-
-    &[cdkDrag] { // Style for draggable activities
-      cursor: move; /* Show the move cursor when hovering */
+    .item-info-grid {
+      display: grid;
+      grid-template-columns: auto auto 1fr;
+      gap: 0.5rem;
+      align-items: center;
+      .item-label { font-weight: bold; text-align: left; }
+      .item-count { text-align: left; }
+      .add-item-button .mat-icon { color: black; }
     }
+  }
 
-    .drag-handle { /* Styles for the drag handle icon */
-      cursor: move;
-      margin-right: 0.5rem; /* Add some space to the right */
+  .open-tools-buttons {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #eee;
+    flex-shrink: 0;
+    button {
+      display: flex; // Use flex for icon and text alignment
+      align-items: center;
+      width: 100%;
+      margin-bottom: 1rem;
+      text-align: left; // Text within button
+      justify-content: flex-start; // Align content (icon+text) to the start
+      mat-icon { margin-right: 8px;}
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
 
-.selected { 
-  background-color: #e0e0e0; 
-  border-left: 4px solid #3f51b5; /* Add a thicker left border to highlight */
-  padding-left: 0.25rem; /* Adjust padding to account for the border */
-}
+// MIDDLE PANE COLUMN
+.middle-pane-column {
+  flex: 1; // Takes up remaining flexible space
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+  box-sizing: border-box;
+  position: relative; // For positioning FAB if it's inside
 
-.add-activity-button {
-  position: static;
-  margin-top: 1rem;
-  margin-left: 195px;
-}
+  .toggle-resources-overlay-button {
+    position: fixed;
+    bottom: 1rem; // Distance from the bottom of .middle-pane-column
+    right: 420px;  // Distance from the right of screen
+    z-index: 999;   // Ensure it's above scrolling content within this pane
+  }
 
-.content-and-resources {
-  display: flex;
-  flex: 1; 
-  height: 100%; 
-}
+  .canvas-container {
+    position: relative; // Changed from absolute, will flow with content or be explicitly sized
+    width: 100%;
+    // height: 400px; // Example height, or make it responsive
+    height: calc(100% - 150px); // Example: try to fill space not taken by tabs/headers
+    min-height: 300px; // Ensure it has some space
+    margin-bottom: 1rem;
+    z-index: 10; // Below the FAB
 
-.middle-pane {
-  flex: 1; // Allow middle pane to take up available space
-  padding: 1rem;
-  padding-top: 2.5rem;
-  
-  .add-resource-button {
-    position: absolute;
-    bottom: 2rem; 
-    right: 2rem;
-    z-index: 999;
+    canvas {
+      background-color: #f5f5f5;
+      border: 1px solid #ddd;
+      width: 100%;
+      height: 100%;
+    }
+    // Conditional display handled by *ngIf in HTML
   }
 
-  .activity-resources-list {
-    margin-bottom: 2rem;
+  h3 { text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 0.25rem; }
+  .activity-space-header {
+    display: flex;
+    justify-content: center; // Centers the .heading-and-settings-container
+    align-items: center;     // Vertically aligns it if it has a fixed height or wraps
+    margin-bottom: 1rem;
+    width: 100%; // Ensure it takes available width to properly center its content
 
-    .resource-item { /* Add styles for the resource items */
+    .heading-and-settings-container {
       display: flex;
-      align-items: center; 
-      height: 40px;
-      margin-bottom: 5px;
-      border-radius: 5px;
-
-      &.canvas { 
-        background-color: #81d4fa; /* Lighter Blue */
-        color: #000; 
-      }
-
-      &.bucketView { 
-        background-color: #80cbc4; /* Lighter Teal */
-        color: #000; 
-      }
-
-      &.workspace { 
-        background-color: #ffcc80; /* Lighter Orange */
-        color: #000; 
+      align-items: center; // Vertically aligns the h4 and the button
+      // justify-content: center; // Optional: if you want to center within this container too
+                               // Or remove if you want h4 to naturally align left within this box
+
+      h4 {
+        margin: 0 0.5rem 0 0; // Top, Right (spacing before button), Bottom, Left
+        line-height: 1.4;     // Allows text to wrap gracefully
+        flex-shrink: 1;       // Allows the h4 to shrink if space is tight (e.g., very long board name)
+        min-width: 0;         // Important for flex-shrink to work effectively on text elements
+        font-size: 1.2rem;
+        font-weight: normal;
+        color: #555;
       }
 
-      &.monitor { 
-        background-color: #ef9a9a; /* Lighter Red */
-        color: #000; 
-      }
-
-      &.ideaAgent {
-        background-color: #c5cae9;  // Indigo 
-        color: #000;
+      .config-button { // This is the <button mat-icon-button>
+        flex-shrink: 0; // Prevents the button from shrinking
+        // The button will naturally sit to the right of the h4 due to flex layout
+        // and the h4's margin-right.
       }
+    }
+  }
+  h5 { text-align: left; font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 0.5rem; margin-top: 3rem; }
 
-      .drag-handle {
-        cursor: move;
-        margin-right: 0.5rem;
-      }
+  .activity-resources-list {
+    margin-bottom: 1.5rem; // Space before tabs
+    min-height: 60px; // Ensure drop area is visible even if empty
+    border: 1px dashed #ddd; // Visual cue for drop list if empty
+    padding: 0.5rem;
+    border-radius: 4px;
 
-      .delete-button { /* Add styles for the delete button */
-        margin-left: auto; /* Push the button to the right */
+    .resource-item-wrapper {
+      margin-bottom: 5px;
+      &:last-child { margin-bottom: 0; }
+      .resource-item {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        border-radius: 4px;
+        padding: 0 0.75rem; // Increased padding
+        background-color: #f0f0f0; // Default background for items
+        border: 1px solid #e0e0e0;
+
+        &.canvas { background-color: #81d4fa; color: #000; border-color: darken(#81d4fa, 10%); }
+        &.bucketView { background-color: #80cbc4; color: #000; border-color: darken(#80cbc4, 10%); }
+        &.workspace { background-color: #ffcc80; color: #000; border-color: darken(#ffcc80, 10%); }
+        &.monitor { background-color: #ef9a9a; color: #000; border-color: darken(#ef9a9a, 10%); }
+        &.ideaAgent { background-color: #c5cae9; color: #000; border-color: darken(#c5cae9, 10%); }
+
+        .drag-handle { cursor: move; margin-right: 0.75rem; color: #757575; }
+        .resource-name { flex-grow: 1; font-weight: 500; }
+        .delete-button { margin-left: auto; }
       }
     }
-
-  }
-
-  h3, h4 { /* Target both h3 and h4 */
-    text-align: center; 
+    .empty-list-message {
+      padding: 1rem;
+      text-align: center;
+      color: #757575;
+    }
   }
 
-  h3 { 
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 0.25rem;
+  mat-tab-group {
+    width: 100%;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 1rem;
+
+    ::ng-deep .mat-tab-header { margin-bottom: 1rem; } // Keep some space
+    ::ng-deep .mat-tab-label { font-size: 1rem; font-weight: 500; padding: 0 16px !important;} // Adjusted padding
+    ::ng-deep .mat-tab-body-wrapper {
+        min-height: 150px;
+        padding-top: 1rem; // Add padding to tab content area
+    }
   }
 
-  h4 { 
-    font-size: 1.2rem; 
-    font-weight: bold;
-    margin-bottom: 1.5rem; 
-    color: #888; 
-  }
+  .teacher-task-list, .ai-agents-list {
+    min-height: 100px; // Ensure drop area is visible even if empty
+    border: 1px dashed #ddd; // Visual cue for drop list if empty
+    padding: 0.5rem;
+    border-radius: 4px;
 
-  h5 { 
-    font-size: 1rem; 
-    font-weight: bold;
-    color: #888; 
-    margin-bottom: 0.5rem;
-  }
+    .teacher-task-item, .ai-agent-item { // Common styling if item structures are similar
+      display: flex;
+      align-items: center;
+      height: 40px;
+      margin-bottom: 5px;
+      border-radius: 4px;
+      padding: 0 0.75rem;
+      border: 1px solid #e0e0e0;
+      &:last-child { margin-bottom: 0; }
+
+      .drag-handle { cursor: move; margin-right: 0.75rem; color: #757575; flex-shrink: 0; }
+      .task-content, .agent-name { flex-grow: 1; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .task-order { margin-right: 0.5em; font-style: italic; color: #666;}
+      .task-description { flex-grow: 1; }
+      .teacher-task-icon { margin: 0 0.5rem; flex-shrink: 0; }
+      .delete-button { margin-left: 0.5rem; flex-shrink: 0; }
+    }
 
-  mat-expansion-panel-header h5 {
-    margin-bottom: 0;
+    // Specific task backgrounds
+    .teacher-task-item {
+      &.activateWorkflow { background-color: #90caf9; color: #000; border-color: darken(#90caf9,10%);}
+      &.activateAiAgent { background-color: #a5d6a7; color: #000; border-color: darken(#a5d6a7,10%);}
+      &.regroupStudents { background-color: #fff59d; color: #000; border-color: darken(#fff59d,10%);}
+      &.viewCanvas { background-color: #ffcc80; color: #000; border-color: darken(#ffcc80,10%);}
+      &.viewBuckets { background-color: #f48fb1; color: #000; border-color: darken(#f48fb1,10%);}
+      &.viewTodos { background-color: #b39ddb; color: #000; border-color: darken(#b39ddb,10%);}
+      &.viewWorkspace { background-color: #ce93d8; color: #000; border-color: darken(#ce93d8,10%);}
+      &.customPrompt { background-color: #bcaaa4; color: #000; border-color: darken(#bcaaa4,10%);}
+      &.showJoinCode { background-color: #9fa8da; color: #000; border-color: darken(#9fa8da,10%);}
+    }
+    // Specific AI agent backgrounds (if any, using type as class)
+    .ai-agent-item {
+        // Example: &.teacher { background-color: #somecolor; }
+        background-color: #f0f0f0; // Default
+    }
+     .empty-list-message {
+      padding: 1rem;
+      text-align: center;
+      color: #757575;
+    }
   }
-
-  .canvas-container {
-    position: absolute;
-    top: 64px;
-    left: 283px;
-    width: 100%;
+  .placeholder-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
-    z-index: 997; // Ensure canvas is on top of everything except resource pane and add button
+    font-size: 1.2rem;
+    color: #999;
+    text-align: center;
   }
 }
 
-.resources-right-pane-container {
-  position: relative; // Required for absolute positioning of children
-  flex: 0 0 400px; // Set a fixed width for the right pane container
-  padding: 1rem;
+// RIGHT PANE COLUMN
+.right-pane-column {
+  flex: 0 0 400px;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: #f0f0f0;
+  border-left: 1px solid #ccc;
 
-  .canvas-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .default-right-pane-content {
     width: 100%;
     height: 100%;
-    background-color: #000; 
-  }
-}
-
-#authoringResourcesPane {
-  width: 400px;
-}
-
-.resources-pane {
-  position: absolute; // Position the resources pane absolutely
-  top: 0;
-  left: 0;
-  width: 100%; 
-  min-height: 100%; 
-  padding: 1rem;
-
-  background-color: #fff; 
-  border: 1px solid #ccc; 
-  border-radius: 5px; 
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); // Add a subtle shadow
-
-  h3 { 
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 1rem;
-  }
-
-  h4 { 
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem; 
-  }
+    overflow-y: auto;
+    padding: 1rem;
+    box-sizing: border-box;
 
-  .close-resource-button {
-    float: right;
-    margin-right: 1.25rem;
-  }
-
-  .available-resources-list {
-    margin-bottom: 2rem;
-    .available-resource-item {
-      cursor: grab; /* Use grab cursor to indicate draggability */
-      padding: 0.5rem;
-      padding-right: 1rem;
-      border: 1px solid #ccc; /* Add a border to resemble material */
-      border-radius: 4px;
-      margin-bottom: 0.5rem;
-      max-width: 375px;
-
-      &.canvas { 
-        background-color: #81d4fa; /* Lighter Blue */
-        color: #000; 
-      }
-
-      &.bucketView { 
-        background-color: #80cbc4; /* Lighter Teal */
-        color: #000; 
-      }
-
-      &.workspace { 
-        background-color: #ffcc80; /* Lighter Orange */
-        color: #000; 
-      }
-
-      &.monitor { 
-        background-color: #ef9a9a; /* Lighter Red */
-        color: #000; 
-      }
-
-      &.ideaAgent {
-        background-color: #c5cae9;  //  Indigo 100
-        color: #000;
-      }
-    }
-  }
-  .available-teacher-actions-list {
-    .available-resource-item { 
-      cursor: grab; 
-      padding: 0.5rem;
-      border: 1px solid #ccc; 
-      border-radius: 4px;
-      margin-bottom: 0.5rem;
-      max-width: 80%; 
-      padding-right: 1rem; 
+    .groups-header {
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+      h3 { margin: 0; font-size: 1.5rem; font-weight: bold; }
+    }
 
-      mat-icon {
-        margin-right: 0.5rem; // Add some space between the icon and the text
-      }
-
-      &:active { 
-        background-color: #e0e0e0;
-      }
-
-      &.activateWorkflow {
-        background-color: #90caf9;  // Slightly darker blue
-        color: #000; 
-      }
-
-      &.activateAiAgent {
-        background-color: #a5d6a7;  // Slightly darker green
-        color: #000; 
-      }
+    .group-resource-table {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
 
-      &.regroupStudents {
-        background-color: #fff59d;  // Slightly darker yellow
-        color: #000; 
+      .group-header-row {
+        display: flex;
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 0.5rem;
       }
 
-      &.viewCanvas {
-        background-color: #ffcc80;
-        color: #000;
+      // Common width and spacing definition for both header and data cells
+      .group-header-cell,
+      .group-resource-cell {
+        flex-grow: 0;     // Prevent cells from growing beyond their basis
+        flex-shrink: 1;   // Allow cells to shrink if space is limited
+        flex-basis: 40px;  // Target width for each cell
+        max-width: 40px;  // Enforce maximum width
+        min-width: 40px;  // Minimum width before content gets too crushed (adjust as needed)
+        margin-right: 8px; // Consistent horizontal gap between cells
+        box-sizing: border-box;
+
+        &:last-child {
+          margin-right: 0; // No margin for the last cell in a row
+        }
       }
 
-      &.viewBuckets {
-        background-color: #f48fb1;  // Slightly darker red
-        color: #000; 
+      // Specific styles for .group-header-cell
+      .group-header-cell {
+        font-size: 0.85em;
+        font-weight: 500;
+        color: #333;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        min-height: 94px;       // For rotated text and row alignment
+        padding: 0 0 5px 25px;   // Padding for positioning the span's rotation origin
+        position: relative;
+
+        span {
+          display: inline-block;
+          white-space: nowrap;
+          overflow: visible;
+          transform-origin: bottom left;
+          transform: rotate(-60deg);
+          line-height: 1.2;
+          // Consider adding max-width to the span if very long names need truncation
+          // e.g., max-width: 65px; text-overflow: ellipsis; overflow: hidden;
+          // However, ellipsis on rotated text can be tricky.
+        }
       }
 
-      &.viewTodos {
-        background-color: #b39ddb;  // Slightly darker pink
-        color: #000; 
+      .resource-row {
+        display: flex;
+        align-items: center;
+        height: 40px;         // Matches new cell height
+        margin-bottom: 7px;   // Vertical gap between rows
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
 
-      &.viewWorkspace {
-        background-color: #ce93d8;  // Slightly darker purple
-        color: #000; 
-      }
+      // Specific styles for .group-resource-cell
+      .group-resource-cell {
+        height: 40px;         // Matches its flex-basis for a square look
+        border: 1px solid #e0e0e0;
+        cursor: pointer;
+        border-radius: 6px;
+        position: relative;
+        background-color: #f9f9f9;
+
+        &.selected::before {
+          content: '✔';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 26px;
+          color: rgba(0, 0, 0, 0.7);
+        }
 
-      &.customPrompt {
-        background-color: #bcaaa4;  // Slightly darker brown
-        color: #000; 
-      }
+        &.canvas { background-color: lighten(#81d4fa, 15%); }
+        &.bucketView { background-color: lighten(#80cbc4, 15%); }
+        &.workspace { background-color: lighten(#ffcc80, 15%); }
+        &.monitor { background-color: lighten(#ef9a9a, 15%); }
+        &.ideaAgent { background-color: lighten(#c5cae9, 10%); }
 
-      &.showJoinCode {
-        background-color: #9fa8da; // Consistent with task list
-        color: #000;
+        &:hover {
+          border-color: #3f51b5;
+        }
       }
     }
-  }
-}
-
-.classroom-right-pane-container {
-  position: relative; 
-  flex: 0 0 400px; 
-  padding: 1rem;
-  z-index: 998; // This pane will be above the canvas
-  background-color: #f5f5f5;
-}
-
-.teacher-task-list {
-  .teacher-task-item { 
-    display: flex;
-    align-items: center; 
-    height: 40px;
-    margin-bottom: 5px;
-    border-radius: 5px;
-    cursor: pointer;
-
-    .task-content {
-      flex-grow: 1;
-      display: flex;
-      align-items: center;
-    }
-
-    &.activateWorkflow { 
-      background-color: #90caf9;  // Slightly darker blue
-      color: #000; 
-    }
-
-    &.activateAiAgent {
-      background-color: #a5d6a7;  // Slightly darker green
-      color: #000; 
-    }
-
-    &.regroupStudents {
-      background-color: #fff59d;  // Slightly darker yellow
-      color: #000; 
-      cursor: pointer;
-    }
-
-    &.viewCanvas {
-      background-color: #ffcc80;
-      color: #000;
-    }
-
-    &.viewBuckets {
-      background-color: #f48fb1;  // Slightly darker red
-      color: #000; 
-    }
-
-    &.viewTodos {
-      background-color: #b39ddb;  // Slightly darker pink
-      color: #000; 
-    }
-
-    &.viewWorkspace {
-      background-color: #ce93d8;  // Slightly darker purple
-      color: #000; 
-    }
-
-    &.customPrompt {
-      background-color: #bcaaa4;  // Slightly darker brown
-      color: #000; 
-    }
-
-    &.showJoinCode {
-      background-color: #9fa8da; // Consistent with task list
-      color: #000;
-    }
-
-    .drag-handle {
-      cursor: move;
-      margin-right: 0.5rem;
-    }
-
-    button { /* Target the delete button */
-      margin-left: auto; // Push the button to the right 
-    }
-
-    .teacher-task-icon {
-      margin: 0 0.5rem;
+    .empty-list-message, .placeholder-message { // Combined for brevity
+      padding: 1rem;
+      text-align: center;
+      color: #757575;
+      &.small-text { font-size: 0.9em; }
     }
   }
-}
 
-  /* Style for the drop placeholder */
-.cdk-drop-list-dragging .cdk-drop-list-placeholder { 
-  background: #ccc; /* Light gray background */
-  border: dotted 3px #999; /* Dotted border */
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-  
-.groups-list {
-  h3 { 
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 1rem;
-  }
-
-  .group-resource-table {
-    display: flex;
-    flex-direction: column; 
-    width: 100%; 
-    margin-top: 3.5rem;
-  }
-
-  .groups-header {
-    display: flex;
-    align-items: center; 
-  }
-
-  .groups-header h3 {
-    margin-right: 0.5rem;
-  }
-
-  .groups-header button { 
-    margin-top: -1rem;
-  }
-
-  .group-header-row {
-    display: flex;
-    margin-left: 1rem;
-  }
-
-  .group-header-cell {
-    flex: 1; 
-    text-align: left;
-    max-width: 40px;
-    transform: rotate(-45deg); /* Rotate the text */
-    white-space: nowrap; 
-  }
-
-  .edit-cell {
-    flex: 0 0 40px;
-    text-align: center;
-    transform: none;
-    margin: 0rem 0rem;
-  }
-
-  .resource-row {
-    display: flex;
-    align-items: center; 
-    margin-bottom: 0; 
-  }
-
-  .resource-label-cell {
-    white-space: nowrap; 
-    margin-right: 1rem; 
-  }
-
-  .group-resource-cell {
-    flex: 1; 
-    height: 40px; 
-    border: 0;
-    cursor: pointer; 
-    margin-right: 5px; 
-    margin-bottom: 5px;
-    max-width: 40px; // Set max-width to create a square
-    border-radius: 5px;
-
-    &.selected {
-      position: relative; // Required for positioning the overlay
-      padding: 0;
-
-      &::before { // Create a pseudo-element overlay
-        content: '';
+  .resources-actions-overlay,
+  .classroom-mode-right-pane .classroom-resources-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    z-index: 1000;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+    overflow-y: auto; // Already present, ensuring it's here
+    padding: 1rem; // Already present
+    box-sizing: border-box; // Already present
+
+    .close-overlay-button {
         position: absolute;
-        top: 7px;
-        left: 7px;
-        width: 26px;
-        height: 26px;
-        background-color: rgba(0, 0, 0, 0.4); // Semi-transparent black overlay
-        border-radius: 3px;
-      }
-    }
-
-    &.canvas { 
-      background-color: #81d4fa; 
-    }
-
-    &.bucketView { 
-      background-color: #80cbc4; 
-    }
-
-    &.workspace { 
-      background-color: #ffcc80; 
-    }
-
-    &.monitor { 
-      background-color: #ef9a9a; 
+        top: 0.75rem;
+        right: 0.75rem;
+        z-index: 1001;
     }
-
-    &.ideaAgent {
-      background-color: #c5cae9;
-      color: #000;
+    h3 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; padding-right: 40px; }
+    h4 { font-size: 1.2rem; font-weight: 500; margin-top: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #eee; padding-bottom: 0.25rem;}
+    &:first-of-type h4 { margin-top: 0;}
+
+    .available-items-list {
+      margin-bottom: 1.5rem;
+      &:last-child { margin-bottom: 0; }
+      .available-resource-item {
+        cursor: grab;
+        padding: 0.6rem 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin-bottom: 0.5rem;
+        box-sizing: border-box;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+
+        &:hover {
+            border-color: #3f51b5;
+            background-color: #f5f5f5;
+        }
+        &:active { background-color: #e0e0e0; }
+
+        mat-icon { margin-right: 0.75rem; color: #666; }
+
+        &.canvas, &.viewCanvas { background-color: #e1f5fe; border-left: 3px solid #4fc3f7;}
+        &.bucketView, &.viewBuckets { background-color: #e0f2f1; border-left: 3px solid #4db6ac;}
+        &.workspace, &.viewWorkspace { background-color: #fff3e0; border-left: 3px solid #ffb74d;}
+        &.monitor { background-color: #ffebee; border-left: 3px solid #e57373;}
+        &.viewTodos { background-color: #ede7f6; border-left: 3px solid #9575cd;}
+        &.idea { background-color: #eaecf7; border-left: 3px solid #7986cb;}
+        &.teacher { background-color: #e8f5e9; border-left: 3px solid #81c784;}
+        &.idea_chat { background-color: #e8eaf6; border-left: 3px solid #7986cb;}
+        &.personal_learning { background-color: #fffde7; border-left: 3px solid #fff176;}
+        &.group_interaction { background-color: #f3e5f5; border-left: 3px solid #ba68c8;}
+        &.workflow { background-color: #e0f7fa; border-left: 3px solid #26c6da; }
+        &.activateWorkflow { background-color: #e3f2fd; border-left: 3px solid #64b5f6;}
+        &.activateAiAgent { background-color: #e8f5e9; border-left: 3px solid #81c784;}
+        &.regroupStudents { background-color: #fffde7; border-left: 3px solid #fff176;}
+        &.customPrompt { background-color: #efebe9; border-left: 3px solid #a1887f;}
+        &.showJoinCode { background-color: #e8eaf6; border-left: 3px solid #9fa8da;}
+      }
+      .empty-list-message.small { font-size: 0.9em; padding: 0.5rem; text-align: center; color: #999; }
     }
   }
-}
 
-.timeline-container {
-  position: fixed; 
-  bottom: 0; 
-  left: 283px; // Adjust based on the width of the activities pane
-  width: calc(100% - 283px); // Adjust based on the width of the activities pane
-  height: 100px; // Adjust as needed
-  background-color: #f5f5f5; // Light gray background
-  border-top: 1px solid #ccc;
-  z-index: 997; // Ensure timeline is on top of everything except resource pane
-}
-
-.middle-pane .canvas-container {
-  // ... other styles ...
-
-  canvas {
-    background-color: #f5f5f5; /* Set a white background */
-  }
-}
-
-.classroom-resources-pane {
-  z-index: 999;
-}
-
-.activity-space-header {
-  display: flex;
-  justify-content: center; // Center the container horizontally
-  align-items: center; // Align items to the center vertically
-  margin-bottom: 1rem;
-
-  .heading-and-settings-container {
-    display: flex;
-    align-items: center; // Align the heading and button vertically
-
-    h4 {
-      margin-bottom: 0; // Remove default margin if needed
-      margin-right: 0.5rem; // Add some space between heading and button
+  .classroom-mode-right-pane {
+    .default-classroom-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 100%; // ensure it takes full height to center content
+        h4 { margin-bottom: 1rem; }
+        p { margin-bottom: 1.5rem; color: #666; }
+        button mat-icon { margin-right: 8px; }
     }
   }
+   .placeholder-message {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: 1.1rem;
+      color: #999;
+      text-align: center;
+      padding: 2rem;
+    }
 }
 
-:host {
-  display: block;
-  padding: 0 !important; // Remove default padding
-}
-
-.mat-dialog-container {
-  padding: 0 !important; // Remove default padding for dialog container
-}
-
-.mat-dialog-content {
-  margin: 0 !important; // Remove default margin
-  max-height: 100vh; // Allow content to take up full height
+.cdk-drop-list-dragging .cdk-drop-list-placeholder {
+  background: #e0e0e0;
+  border: 2px dashed #999;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  border-radius: 4px;
 }
 
-mat-tab-group {
-  width: 100%; // Make the tabs take up the full width of the middle pane
-
-  ::ng-deep .mat-tab-header {
-    margin-bottom: 20px;
-  }
-
-  ::ng-deep .mat-tab-label { // Target the tab labels (::ng-deep is needed for shadow DOM piercing)
-    // Example styles:
-    font-size: 1.1rem;
-    font-weight: bold;
-  }
-    ::ng-deep .mat-tab-body-wrapper{
-        min-height: 100px;  //THIS IS IMPORTANT, or else it won't show up
-    }
+.timeline-container {
+  position: fixed;
+  bottom: 0;
+  left: 250px;
+  width: calc(100% - 250px);
+  height: 100px; // Adjust as needed
+  background-color: #fafafa;
+  border-top: 1px solid #dbdbdb;
+  z-index: 997;
+  box-sizing: border-box;
+  // Add content styling for timeline here
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/score-authoring/score-authoring.component.ts b/frontend/src/app/components/score-authoring/score-authoring.component.ts
index 859927d1..2cbbafda 100644
--- a/frontend/src/app/components/score-authoring/score-authoring.component.ts
+++ b/frontend/src/app/components/score-authoring/score-authoring.component.ts
@@ -6,6 +6,7 @@ import {
   OnDestroy,
   ElementRef,
   ViewChild,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
@@ -27,8 +28,8 @@ import { ConfigureAiAgentModalComponent } from '../configure-ai-agent-modal/conf
 import { CustomTeacherPromptModalComponent } from '../custom-teacher-prompt-modal/custom-teacher-prompt-modal.component';
 import { ManageGroupModalComponent } from '../groups/manage-group-modal/manage-group-modal.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { HttpClient } from '@angular/common/http';
-import { Activity } from 'src/app/models/activity';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http'; // Import HttpErrorResponse
+import { Activity } from 'src/app/models/activity'; // Ensure Activity model has isActive?: boolean;
 import { generateUniqueID } from 'src/app/utils/Utils';
 import { Resource } from 'src/app/models/resource';
 import { TeacherTask } from 'src/app/models/teacherTask';
@@ -58,11 +59,11 @@ import { SocketEvent } from 'src/app/utils/constants';
   styleUrls: ['./score-authoring.component.scss'],
 })
 export class ScoreAuthoringComponent implements OnInit, OnDestroy {
-  @ViewChild('editWorkflowsButton') editWorkflowsButton: ElementRef;
+  @ViewChild('editWorkflowsButton') editWorkflowsButton!: ElementRef;
   workflowMap: Map<string, string> = new Map();
 
-  project: Project;
-  user: AuthUser;
+  project!: Project;
+  user!: AuthUser;
   listeners: Subscription[] = [];
 
   activities: Activity[] = [];
@@ -76,53 +77,32 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
   selectedTabIndex: number = 0;
 
   allAvailableResources: any[] = [
-    //define available resources
     { name: 'Canvas', type: 'canvas' },
     { name: 'Bucket View', type: 'bucketView' },
     { name: 'Workspace', type: 'workspace' },
     { name: 'Monitor', type: 'monitor' },
     { name: 'Idea Agent', type: 'ideaAgent' },
   ];
-
-  availableResources: any[] = [...this.allAvailableResources]; // Duplicate the array to be filtered based on selected values
-
+  availableResources: any[] = [...this.allAvailableResources];
   availableClassroomObjects: any[] = [
     { name: 'Table', type: 'table', icon: 'table_restaurant' },
     { name: 'Projector', type: 'projector', icon: 'videocam' },
     { name: 'Student', type: 'student', icon: 'person' },
     { name: 'Student Group', type: 'studentGroup', icon: 'groups' },
     { name: 'Teacher', type: 'teacher', icon: 'school' },
-    // ... add more classroom objects
   ];
-
   availableTeacherActions: any[] = [
     { name: 'Activate Workflow', type: 'activateWorkflow', icon: 'timeline' },
-    { name: 'Activate AI Agent', type: 'activateAiAgent', icon: 'smart_toy' },
-    {
-      name: 'Manually Regroup Students',
-      type: 'regroupStudents',
-      icon: 'group_work',
-    },
+    // { name: 'Activate AI Agent', type: 'activateAiAgent', icon: 'smart_toy' },
+    { name: 'View Idea Agent', type: 'viewIdeaAgent', icon: 'psychology' },
+    { name: 'Manually Regroup Students', type: 'regroupStudents', icon: 'group_work'},
     { name: 'View Canvas', type: 'viewCanvas', icon: 'visibility' },
     { name: 'View Buckets', type: 'viewBuckets', icon: 'view_module' },
-    {
-      name: 'View All Tasks, TODOs, & Analytics',
-      type: 'viewTodos',
-      icon: 'assignment',
-    },
-    {
-      name: 'View Personal Workspace',
-      type: 'viewWorkspace',
-      icon: 'monitoring',
-    },
-    {
-      name: 'Custom Teacher Prompt',
-      type: 'customPrompt',
-      icon: 'chat_bubble',
-    },
+    { name: 'View All Tasks, TODOs, & Analytics', type: 'viewTodos', icon: 'assignment'},
+    { name: 'View Personal Workspace', type: 'viewWorkspace', icon: 'monitoring'},
+    { name: 'Custom Teacher Prompt', type: 'customPrompt', icon: 'chat_bubble'},
     { name: 'Show Student Join Code', type: 'showJoinCode', icon: 'qr_code' },
   ];
-
   availableAiAgents: any[] = [
     { name: 'Teacher Agent', type: 'teacher', class: TeacherAgent },
     { name: 'Idea Agent', type: 'idea', class: IdeaAgentChat },
@@ -138,10 +118,8 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
     },
     { name: 'Workflow Agent', type: 'workflow', class: WorkflowAgent },
   ];
-
   teacherTasks: any[] = [];
   activeAiAgents: AiAgent[] = [];
-
   showResourcesPane = false;
   showClassroomBindings = false;
 
@@ -166,85 +144,40 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     public dialog: MatDialog,
-    private http: HttpClient
+    private http: HttpClient,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
     this.user = this.userService.user!;
     this.loadScoreAuthoringData();
-    if (this.selectedActivity) {
-      this.updateBucketAndWorkflowCounts();
-    }
   }
 
   initializeCanvas() {
     const canvasContainer =
-      document.getElementById('classroomCanvas')?.parentElement; // Get the parent div
-
+      document.getElementById('classroomCanvas')?.parentElement;
     if (canvasContainer) {
       this.canvas = new fabric.Canvas('classroomCanvas', {
-        width: canvasContainer.offsetWidth - 283, // Set width to parent's width
-        height: canvasContainer.offsetHeight - 64, // Set height to parent's height
+        width: canvasContainer.offsetWidth,
+        height: canvasContainer.offsetHeight,
       });
-
       this.createDotGrid();
       this.drawInnerBox();
-
-      // Add event listeners for object:added and object:moving
-      this.canvas.on('object:added', this.onObjectAdded);
-      this.canvas.on('object:moving', this.onObjectMoving);
+      this.canvas.on('object:added', this.onObjectAdded.bind(this));
+      this.canvas.on('object:moving', this.onObjectMoving.bind(this));
     }
   }
-
   createDotGrid() {
-    if (this.canvas) {
-      const canvasWidth = this.canvas.getWidth();
-      const canvasHeight = this.canvas.getHeight();
-      const gridSpacing = 40; // Adjust the spacing between dots as needed
-
-      for (let x = 0; x <= canvasWidth; x += gridSpacing) {
-        for (let y = 0; y <= canvasHeight; y += gridSpacing) {
-          const dot = new fabric.Circle({
-            left: x,
-            top: y,
-            radius: 2, // Adjust the dot size as needed
-            fill: '#ddd', // Adjust the dot color as needed
-          });
-          this.canvas.add(dot);
-        }
-      }
-
-      this.canvas.renderAll(); // Render the canvas to show the dots
-    }
+    /* ... */
   }
-
   drawInnerBox() {
-    if (this.canvas) {
-      const canvasWidth = this.canvas.getWidth();
-      const canvasHeight = this.canvas.getHeight();
-      const inset = 41; // Adjust the inset value as needed
-
-      const rect = new fabric.Rect({
-        left: inset,
-        top: inset,
-        width: canvasWidth - inset * 2,
-        height: canvasHeight - inset * 2,
-        fill: 'transparent', // Or any fill color you prefer
-        stroke: '#ccc', // Or any stroke color you prefer
-        strokeWidth: 2, // Adjust the stroke width as needed
-      });
-
-      this.canvas.add(rect);
-      this.canvas.sendToBack(rect); // Send the rectangle to the back
-    }
+    /* ... */
   }
-
   onObjectAdded(event: any) {
-    // ... (Implement logic to save the added object to the database) ...
+    /* ... */
   }
-
   onObjectMoving(event: any) {
-    // ... (Implement logic to update the object's position in the database) ...
+    /* ... */
   }
 
   async loadScoreAuthoringData(): Promise<void> {
@@ -258,7 +191,6 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
       this.project = await this.projectService.get(projectID);
     } catch (error) {
       this.snackbarService.queueSnackbar('Error loading project data.');
-      console.error('Error loading project data:', error);
       this.router.navigate(['error']);
       return;
     }
@@ -268,43 +200,142 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
         (await this.http
           .get<Activity[]>(`activities/project/${projectID}`)
           .toPromise()) || [];
+      this.activities.sort((a, b) => a.order - b.order);
+
+      // Determine active activity based on its own isActive flag
+      // The backend PUT /api/activities/:id ensures only one is active per project
+      const activeActivity = this.activities.find(
+        (act) => act.isActive === true
+      );
+
       if (this.activities.length > 0) {
-        this.selectActivity(this.activities[0]); // Select the first activity
+        this.selectActivity(activeActivity || this.activities[0]); // Select active or first
+      } else {
+        this.selectActivity(null);
       }
     } catch (error) {
-      this.snackbarService.queueSnackbar('Error loading activities.');
-      console.error('Error loading activities:', error);
-      this.router.navigate(['error']);
-      return;
-    }
-
-    // Load teacher tasks after selecting the first activity
-    if (this.selectedActivity) {
-      this.loadTeacherTasks();
+      this.snackbarService.queueSnackbar('Error loading activities list.');
+      console.error('Error loading activities list:', error);
     }
   }
 
-  async selectActivity(activity: Activity) {
-    this.selectedActivity = activity;
+  async selectActivity(activity: Activity | null) {
+    if (!activity) {
+      this.selectedActivity = null;
+      this.selectedActivityResources = [];
+      this.selectedActivityGroups = [];
+      this.selectedBoardName = '';
+      this.teacherTasks = [];
+      this.activeAiAgents = [];
+      this.bucketCount = 0;
+      this.workflowCount = 0;
+      this.cdr.detectChanges();
+      return;
+    }
+    this.selectedActivity = activity; // The activity object from the list already has its isActive status
     this.showResourcesPane = false;
     try {
-      // Fetch resources for the selected activity
       this.selectedActivityResources =
         (await this.http
           .get<Resource[]>(`resources/activity/${activity.activityID}`)
           .toPromise()) || [];
+      this.selectedActivityResources.sort((a, b) => a.order - b.order);
       this.selectedBoardName = await this.getSelectedBoardName();
       await this.loadActiveAiAgents();
+      this.fetchActivityGroups(activity.groupIDs);
+      this.loadTeacherTasks();
+      this.updateBucketAndWorkflowCounts(); // Ensure this is still needed and services are injected
+      this.filterAvailableResources();
     } catch (error) {
-      this.snackbarService.queueSnackbar('Error fetching activity resources.');
-      console.error('Error fetching activity resources:', error);
+      this.snackbarService.queueSnackbar('Error fetching activity details.');
+    }
+    this.cdr.detectChanges();
+  }
+
+  async toggleActivityState(activity: Activity, event: MouseEvent) {
+    event.stopPropagation();
+    console.log('[SCORE AUTHORING] toggleActivityState called for:', activity.name, 'Current isActive:', activity.isActive);
+    if (activity.isActive) {
+      await this.stopActivity(activity);
+    } else {
+      await this.startActivity(activity);
     }
+  }
+
+  async startActivity(activityToStart: Activity) {
+    console.log('[SCORE AUTHORING] startActivity called for:', activityToStart.name);
+    if (!this.project) {
+        console.error('[SCORE AUTHORING] Project not loaded, cannot start activity.');
+        return;
+    }
+    try {
+      const updatedStartedActivity = await this.http.put<Activity>(`activities/${activityToStart.activityID}`, { ...activityToStart, isActive: true }).toPromise();
+      if (!updatedStartedActivity) throw new Error('Failed to update activity to active on the server.');
+      
+      this.activities.forEach(act => act.isActive = (act.activityID === updatedStartedActivity.activityID));
+      if(this.selectedActivity?.activityID !== updatedStartedActivity.activityID) {
+        this.selectedActivity = this.activities.find(a => a.activityID === updatedStartedActivity.activityID) || null;
+      } else if (this.selectedActivity) {
+        this.selectedActivity.isActive = true;
+      }
 
-    this.fetchActivityGroups(activity.groupIDs);
+      const resourcesForSocket = (await this.http.get<Resource[]>(`resources/activity/${activityToStart.activityID}`).toPromise()) || [];
+      resourcesForSocket.sort((a,b) => a.order - b.order);
 
-    this.loadTeacherTasks();
+      const socketPayloadForStart = { // This is the 'value' for SocketService.emit
+        projectID: this.project.projectID,
+        activityID: activityToStart.activityID,
+        boardID: activityToStart.boardID,
+        resources: resourcesForSocket,
+      };
+      console.log('[SCORE AUTHORING] Attempting to emit RESOURCES_UPDATE. Payload (value for SocketService):', JSON.stringify(socketPayloadForStart, null, 2));
+      this.socketService.emit(SocketEvent.RESOURCES_UPDATE, socketPayloadForStart);
+      console.log('[SCORE AUTHORING] RESOURCES_UPDATE emitted.');
 
-    this.updateBucketAndWorkflowCounts();
+      this.snackbarService.queueSnackbar(`Activity "${activityToStart.name}" started.`);
+      this.cdr.detectChanges();
+    } catch (error) {
+      console.error('[SCORE AUTHORING] Error starting activity:', error);
+      this.snackbarService.queueSnackbar('Failed to start activity.');
+      const localActivity = this.activities.find(a => a.activityID === activityToStart.activityID);
+      if (localActivity) localActivity.isActive = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+  async stopActivity(activityToStop: Activity) {
+    console.log('[SCORE AUTHORING] stopActivity called for:', activityToStop.name);
+    if (!this.project) {
+        console.error('[SCORE AUTHORING] Project not loaded, cannot stop activity.');
+        return;
+    }
+    try {
+      const updatedStoppedActivity = await this.http.put<Activity>(`activities/${activityToStop.activityID}`, { ...activityToStop, isActive: false }).toPromise();
+      if (!updatedStoppedActivity) throw new Error('Failed to update activity to inactive on the server.');
+
+      const localActivity = this.activities.find(a => a.activityID === updatedStoppedActivity.activityID);
+      if (localActivity) localActivity.isActive = false;
+      if (this.selectedActivity?.activityID === updatedStoppedActivity.activityID) {
+        this.selectedActivity.isActive = false;
+      }
+
+      const socketPayloadForStop = { // This is the 'value' for SocketService.emit
+        projectID: this.project.projectID,
+        activityID: activityToStop.activityID, // Send activityID that stopped
+      };
+      console.log('[SCORE AUTHORING] Attempting to emit ACTIVITY_STOPPED. Payload (value for SocketService):', JSON.stringify(socketPayloadForStop, null, 2));
+      this.socketService.emit(SocketEvent.ACTIVITY_STOPPED, socketPayloadForStop);
+      console.log('[SCORE AUTHORING] ACTIVITY_STOPPED emitted.');
+
+      this.snackbarService.queueSnackbar(`Activity "${activityToStop.name}" stopped.`);
+      this.cdr.detectChanges();
+    } catch (error) {
+      console.error('[SCORE AUTHORING] Error stopping activity:', error);
+      this.snackbarService.queueSnackbar('Failed to stop activity.');
+      const localActivity = this.activities.find(a => a.activityID === activityToStop.activityID);
+      if (localActivity) localActivity.isActive = true; // Revert optimistic UI update on error
+      this.cdr.detectChanges();
+    }
   }
 
   async loadActiveAiAgents() {
@@ -371,7 +402,7 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
     } else {
       const dialogRef = this.dialog.open(ConfigureAiAgentModalComponent, {
         width: '600px',
-        data: { agentType, agentClass: agentClass }, 
+        data: { agentType, agentClass: agentClass },
       });
 
       const result = await dialogRef.afterClosed().toPromise();
@@ -497,9 +528,7 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
   }
 
   getWorkflowName(workflowID: string | null | undefined): string {
-    if (!workflowID) {
-      return 'Workflow Not Found'; // Or some other placeholder
-    }
+    if (!workflowID) return 'Workflow Not Found';
     return this.workflowMap.get(workflowID) || 'Loading...';
   }
 
@@ -528,27 +557,26 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
       case 'viewBuckets':
       case 'viewWorkspace':
       case 'viewTodos':
+      case 'viewIdeaAgent': 
         this.getSelectedBoard().then((board) => {
           if (board) {
-            // Map task.type to componentType
             let componentType = '';
             switch (task.type) {
-              case 'viewCanvas':
-                componentType = 'canvas';
-                break;
-              case 'viewBuckets':
-                componentType = 'bucketView';
-                break;
-              case 'viewTodos':
-                componentType = 'monitor';
-                break;
-              case 'viewWorkspace':
-                componentType = 'workspace';
-                break;
+              case 'viewCanvas': componentType = 'canvas'; break;
+              case 'viewBuckets': componentType = 'bucketView'; break;
+              case 'viewTodos': componentType = 'monitor'; break;
+              case 'viewWorkspace': componentType = 'workspace'; break;
+              case 'viewIdeaAgent': componentType = 'ideaAgentView'; break;
+            }
+            if (componentType) { // Ensure componentType is set
+                this.openViewModal(componentType, this.project, board);
+            } else {
+                console.error('Unknown task type for viewing modal:', task.type);
+                this.snackbarService.queueSnackbar('Cannot open view: unknown task type.');
             }
-            this.openViewModal(componentType, this.project, board);
           } else {
-            console.error('Selected board is undefined');
+            console.error('Selected board is undefined for viewing task:', task.name);
+            this.snackbarService.queueSnackbar('Cannot open view: selected board not found.');
           }
         });
         break;
@@ -562,7 +590,7 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
         this.showJoinCode(task);
         break;
       default:
-        // Handle other task types or do nothing
+        console.warn('Unhandled teacher task type:', task.type);
         break;
     }
   }
@@ -583,7 +611,6 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
       ideaAgent: res.ideaAgent,
     }));
 
-
     // Emit the event with the correct structure:
     this.socketService.emit(SocketEvent.RESOURCES_UPDATE, {
       eventData: {
@@ -676,12 +703,11 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
         );
         return board ? board.name : '';
       } catch (error) {
-        console.error('Error fetching board:', error);
+        console.error('Error fetching board name:', error);
         return '';
       }
-    } else {
-      return '';
     }
+    return '';
   }
 
   dropResource(event: CdkDragDrop<any[]>) {
@@ -1053,7 +1079,7 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
         componentType,
         project,
         board,
-        user: this.user
+        user: this.user,
       },
     });
 
@@ -1096,10 +1122,11 @@ export class ScoreAuthoringComponent implements OnInit, OnDestroy {
   openTeacherAgentModal() {
     this.getSelectedBoard().then((board) => {
       if (board) {
-        this._openDialog(CreateWorkflowModalComponent, { // Reuse the existing modal component
+        this._openDialog(CreateWorkflowModalComponent, {
+          // Reuse the existing modal component
           board: board,
           project: this.project,
-          selectedTabIndex: 3, 
+          selectedTabIndex: 3,
         });
       } else {
         console.error('Selected board is undefined');
diff --git a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.html b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.html
index 01e33b5b..3f8fc359 100644
--- a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.html
+++ b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.html
@@ -1,52 +1,111 @@
-<mat-toolbar *ngIf="user && project" class="toolbar" style="width: 100%">
-    <span *ngIf="board">SCORE Roomcasting - {{ project.name }} - {{board.name}}</span>
-    <span style="flex: 1 1 auto"></span>
+<div class="roomcasting-wrapper">
+  <mat-toolbar *ngIf="user && project" class="roomcasting-toolbar" color="primary">
+    <button
+      mat-icon-button
+      [routerLink]="['/project', projectID]"
+      matTooltip="Return to Project Dashboard"
+      aria-label="Return to Project Dashboard"
+      class="roomcast-back-button"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span class="toolbar-title-container">
+      <mat-icon class="toolbar-icon">cast_connected</mat-icon>
+      <span class="toolbar-project-name">SCORE Roomcasting - {{ project?.name }}</span>
+      <span *ngIf="board" class="toolbar-board-name"> | {{ board?.name }}</span>
+    </span>
+    <span class="toolbar-spacer"></span>
+    <span class="user-greeting">Welcome, {{ user?.username }}! (Role: {{user?.role}})</span>
   </mat-toolbar>
-<mat-tab-group *ngIf="user" animationDuration="0ms">
-  <mat-tab *ngIf="availableTabs['canvas']">
-    <ng-template mat-tab-label>
-      <span (click)="setActiveTab('canvas')">Canvas</span>
-    </ng-template>
-     <div *ngIf="isTabActive('canvas') && boardID">
-        <app-canvas [projectID]="projectID" [boardID]="boardID" [embedded]="true"></app-canvas>
-     </div>
-  </mat-tab>
-
-  <mat-tab *ngIf="availableTabs['bucketView']">
-   <ng-template mat-tab-label>
-      <span (click)="setActiveTab('bucketView')">Bucket View</span>
-    </ng-template>
-    <div *ngIf="isTabActive('bucketView') && boardID">
-        <app-ck-buckets [projectID]="projectID" [boardID]="boardID"  [embedded]="true"></app-ck-buckets>
-    </div>
-  </mat-tab>
-
-    <mat-tab *ngIf="availableTabs['workspace']">
-     <ng-template mat-tab-label>
-        <span (click)="setActiveTab('workspace')">Workspace</span>
-     </ng-template>
-     <div *ngIf="isTabActive('workspace') && boardID">
-        <app-ck-workspace [projectID]="projectID" [boardID]="boardID"  [embedded]="true"></app-ck-workspace> </div>
-  </mat-tab>
-
-    <mat-tab *ngIf="availableTabs['monitor']">
-     <ng-template mat-tab-label>
-          <span (click)="setActiveTab('monitor')">Monitor</span>
-     </ng-template>
-        <div *ngIf="isTabActive('monitor') && boardID">
-            <app-ck-monitor [projectID]="projectID" [boardID]="boardID" [embedded]="true"></app-ck-monitor> </div>
-  </mat-tab>
-
-    <mat-tab *ngIf="availableTabs['ideaAgent']">
-    <ng-template mat-tab-label>
-        <span (click)="setActiveTab('ideaAgent')">Idea Agent</span>
-    </ng-template>
-        <div *ngIf="isTabActive('ideaAgent') && boardID">
-            Content3
-             </div>
-  </mat-tab>
+
+  <div class="roomcasting-content">
+    <mat-tab-group
+      class="roomcasting-tab-group"
+      animationDuration="0ms"
+      [(selectedIndex)]="selectedTabIndex"
+      (selectedTabChange)="onTabChanged($event)"
+      *ngIf="tabsForUser.length > 0; else noResourcesAssigned"
+    >
+      <mat-tab *ngFor="let tab of tabsForUser; let i = index" [label]="tab.label">
+        <ng-template matTabContent>
+          <div class="tab-content-wrapper">
+            <ng-container *ngIf="selectedTabIndex === i">
+              <!-- Canvas -->
+              <app-canvas
+                *ngIf="tab.type === 'canvas' && projectID && boardID"
+                [projectID]="projectID"
+                [boardID]="boardID"
+                [embedded]="true"
+                class="embedded-resource-component"
+              ></app-canvas>
+
+              <!-- Bucket View -->
+              <app-ck-buckets
+                *ngIf="tab.type === 'bucketView' && projectID && boardID"
+                [projectID]="projectID"
+                [boardID]="boardID"
+                [embedded]="true"
+                class="embedded-resource-component"
+              ></app-ck-buckets>
+
+              <!-- Workspace -->
+              <app-ck-workspace
+                *ngIf="tab.type === 'workspace' && projectID && boardID"
+                [projectID]="projectID"
+                [boardID]="boardID"
+                [embedded]="true"
+                class="embedded-resource-component"
+              ></app-ck-workspace>
+
+              <!-- Monitor -->
+              <app-ck-monitor
+                *ngIf="tab.type === 'monitor' && projectID && boardID"
+                [projectID]="projectID"
+                [boardID]="boardID"
+                [embedded]="true"
+                class="embedded-resource-component"
+              ></app-ck-monitor>
+
+              <!-- Idea Agent -->
+              <ng-container *ngIf="tab.type === 'ideaAgent' && projectID && boardID">
+                <app-ck-ideas
+                  *ngIf="user.role === RoleEnum.TEACHER; else noIdeaAgentPermission"
+                  [projectID_input]="projectID"
+                  [boardID_input]="boardID"
+                  [embedded]="true"
+                  class="embedded-resource-component"
+                ></app-ck-ideas>
+                <ng-template #noIdeaAgentPermission>
+                  <div class="permission-denied-message">
+                    <mat-icon class="permission-icon">lock_outline</mat-icon>
+                    <h2>Access Restricted</h2>
+                    <p>You do not have the necessary permissions to view the Idea Agent.</p>
+                    <p>This tool is available for users with the Teacher role.</p>
+                  </div>
+                </ng-template>
+              </ng-container>
+
+            </ng-container>
+          </div>
+        </ng-template>
+      </mat-tab>
     </mat-tab-group>
 
-<div *ngIf="!user">
-    Loading...
-</div>
\ No newline at end of file
+    <ng-template #noResourcesAssigned>
+      <div class="placeholder-container">
+        <mat-icon class="placeholder-icon">hourglass_empty</mat-icon>
+        <h2 *ngIf="projectID && !isLoading">Waiting for teacher to start an activity phase...</h2>
+        <p *ngIf="projectID && !isLoading">Once an activity starts, your assigned resources will appear here as tabs.</p>
+        <mat-progress-bar mode="indeterminate" *ngIf="isLoading && (!tabsForUser || tabsForUser.length === 0)"></mat-progress-bar>
+        <p *ngIf="!projectID && !isLoading" class="error-message">
+            Could not load project information. Please ensure you have accessed this page correctly.
+        </p>
+      </div>
+    </ng-template>
+  </div>
+</div>
+
+<div *ngIf="!user && isLoading" class="loading-overlay">
+  <mat-spinner diameter="50"></mat-spinner>
+  <p>Loading Roomcasting Environment...</p>
+</div>
diff --git a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.scss b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.scss
index eca0b8f8..5f480a55 100644
--- a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.scss
+++ b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.scss
@@ -1,66 +1,198 @@
-@import '../../../styles.scss';
-
-$controls-bg-color: whitesmoke;
-$controls-border-radius: 0.75em;
-
-.top-nav {
-  padding: 1em;
-  position: absolute;
-  top: 1em;
-  left: 1em;
-  background-color: $controls-bg-color;
-  border-radius: $controls-border-radius;
-  border: 1px solid $accent;
+@import '../../../styles.scss'; // Your global styles
+
+:host {
+  display: block;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden; // Prevent scrolling on the host itself
 }
 
-.top-embedded-board-name{
-  padding: 0.6em; 
-  position: absolute; 
-  top: 0.5em; 
-  left: 0.5em; 
-  font-weight: bold; 
-  background-color: white; 
-  color: #6c63ff; 
-  border-radius: 0.5em; 
-  font-size: 1em;
+.roomcasting-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: #f4f6f8; // Light background for the whole page
 }
 
-.bottom-nav {
-  padding: 1em;
-  position: absolute;
-  bottom: 1em;
-  left: 1em;
-  background-color: $controls-bg-color;
-  border-radius: $controls-border-radius;
-  border: 1px solid $accent;
+.roomcasting-toolbar {
+  flex-shrink: 0; // Prevent toolbar from shrinking
+  position: fixed; // Keep toolbar at the top
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000; // Ensure it's above other content
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .toolbar-title-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar-icon {
+    margin-right: 10px;
+    font-size: 28px; // Slightly larger icon
+  }
+
+  .toolbar-project-name {
+    font-size: 1.1em;
+    font-weight: 500;
+  }
+
+  .toolbar-board-name {
+    font-size: 0.9em;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.85); // Slightly lighter for board name
+    margin-left: 5px;
+  }
+
+  .toolbar-spacer {
+    flex: 1 1 auto;
+  }
+  .user-greeting {
+    font-size: 0.9em;
+    margin-right: 16px;
+  }
 }
 
-.toolbarTitle {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.roomcasting-content {
+  flex-grow: 1; // Allows this container to fill remaining vertical space
+  padding-top: 64px; // Height of the toolbar (adjust if your toolbar height is different)
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Prevent this container from scrolling, tabs will handle it
 }
 
-.toolSection {
-  position: absolute;
-  padding: 1em;
-  right: 1em;
+.roomcasting-tab-group {
+  // ::ng-deep .mat-tab-header {
+  //   background-color: #ffffff; // White background for tab headers
+  //   border-bottom: 1px solid #e0e0e0;
+  // }
+
+  // ::ng-deep .mat-tab-label {
+  //   font-weight: 500;
+  //   min-width: 120px !important; // Ensure tabs have a decent min width
+  //   padding: 0 20px !important;
+  // }
+
+  // ::ng-deep .mat-tab-label-active {
+  //   color: mat-color($primary-palette, default) !important; // Use your primary color
+  //   font-weight: 700;
+  // }
+
+  // ::ng-deep .mat-ink-bar {
+  //   background-color: mat-color($primary-palette, default) !important;
+  //   height: 3px !important;
+  // }
+
+  // The tab group itself should allow its content to grow
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%; // Fill the .roomcasting-content area
+
+  // This targets the content area of the selected tab
+  ::ng-deep .mat-tab-body-wrapper {
+    flex-grow: 1;
+    display: flex; // Allows child to flex-grow
+    overflow: hidden; // Important: Prevents double scrollbars if child also scrolls
+  }
+}
+
+.tab-content-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto; // Allow individual tab content to scroll if it overflows
+  padding: 1rem; // Padding around the embedded component
+  box-sizing: border-box;
+  display: flex; // If the child component needs to fill space
+  flex-direction: column; // If the child component needs to fill space
+}
+
+.embedded-resource-component {
+  width: 100%;
+  height: 100%;
+  flex-grow: 1; // Make the embedded component fill the tab content wrapper
+  display: block; // Or flex, depending on the component's internal layout needs
+}
+
+.idea-agent-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #e9e9e9;
+  border-radius: 8px;
+  padding: 2rem;
+  color: #555;
+  font-style: italic;
+}
+
+.placeholder-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  padding: 2rem;
+  color: #757575;
+
+  .placeholder-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    color: #bdbdbd;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    margin-bottom: 8px;
+    color: #555;
+  }
+
+  p {
+    font-size: 1em;
+    max-width: 400px;
+    line-height: 1.5;
+  }
+
+  mat-progress-bar {
+    width: 80%;
+    max-width: 300px;
+    margin-top: 20px;
+  }
+  .error-message {
+    color: #f44336;
+    font-weight: 500;
+  }
 }
 
-.toolField {
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.9);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  z-index: 2000; // Above everything else
 
-  button {
-    margin-bottom: 1em;
+  p {
+    margin-top: 16px;
+    font-size: 1.1em;
+    color: #333;
   }
 }
 
-.embeddableLogo{
-  height: 36px;
-  width: auto;
-  margin-right: 8px;
-  vertical-align: middle;
-}
\ No newline at end of file
+// Override Angular Material tab header styles if needed (more specific selectors)
+// This is often better than ::ng-deep if you can target it this way.
+// .roomcasting-tab-group.mat-tab-group .mat-tab-header {
+//   background-color: #ffffff;
+// }
diff --git a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.ts b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.ts
index c7974fef..0119ca04 100644
--- a/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.ts
+++ b/frontend/src/app/components/score-roomcasting-environment/score-roomcasting-environment.component.ts
@@ -1,19 +1,42 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router'; // Import Router
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { SocketService } from 'src/app/services/socket.service';
 import { UserService } from 'src/app/services/user.service';
-import { AuthUser } from 'src/app/models/user';
+import { AuthUser, Role } from 'src/app/models/user';
 import { Resource } from 'src/app/models/resource';
-import { BoardService } from 'src/app/services/board.service';
 import { Board } from 'src/app/models/board';
 import { ProjectService } from 'src/app/services/project.service';
+import { Project } from 'src/app/models/project';
 import { SocketEvent } from 'src/app/utils/constants';
-import { SnackbarService } from 'src/app/services/snackbar.service'; // Import SnackbarService
-import { HttpClient } from '@angular/common/http'; // Import HttpClient
-import { Activity } from 'src/app/models/activity'; // Import Activity
-import { GroupService } from 'src/app/services/group.service'; // Import GroupService
+import { SnackbarService } from 'src/app/services/snackbar.service';
+import { HttpClient } from '@angular/common/http';
+import { GroupService } from 'src/app/services/group.service';
 import { Group } from 'src/app/models/group';
+import { MatTabChangeEvent } from '@angular/material/tabs';
+
+interface TabInfo {
+  type: string;
+  label: string;
+  name: string;
+  order: number;
+}
+
+interface ActiveActivityDetailsResponse {
+  activityID: string;
+  boardID: string;
+  board: Board | null;
+  resources: Resource[];
+  name: string;
+}
+
+interface ResourcesUpdateSocketPayload {
+    projectID: string;
+    activityID: string;
+    boardID: string;
+    resources: Resource[];
+}
+
 
 @Component({
   selector: 'app-score-roomcasting-environment',
@@ -21,166 +44,285 @@ import { Group } from 'src/app/models/group';
   styleUrls: ['./score-roomcasting-environment.component.scss'],
 })
 export class ScoreRoomcastingEnvironmentComponent implements OnInit, OnDestroy {
-  projectID: string;
-  user: AuthUser;
-  availableTabs: { [key: string]: boolean } = {};
-  activeTab: string | null = null;
-  resources: Resource[] = [];
-  board: Board | null = null;
+  projectID!: string;
+  activityID: string | null = null;
   boardID: string | null = null;
-  project: any;
-  activityId: string;
-  userGroupIDs: string[] = []; 
+  user!: AuthUser;
+  userGroupIDs: string[] = []; // This will be refreshed
+  project: Project | null = null;
+  board: Board | null = null;
+
+  tabsForUser: TabInfo[] = [];
+  selectedTabIndex: number = 0;
 
-  private socketSubscription: Subscription;
+  isLoading: boolean = true;
+  private socketListeners: Subscription[] = [];
+
+  public RoleEnum = Role;
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private socketService: SocketService,
-    private userService: UserService,
-    private boardService: BoardService,
+    public userService: UserService,
     private projectService: ProjectService,
-    private router: Router, 
     private snackbarService: SnackbarService,
     private http: HttpClient,
-    private groupService: GroupService 
+    private groupService: GroupService,
+    private cdr: ChangeDetectorRef
   ) {}
 
   async ngOnInit(): Promise<void> {
-    this.user = this.userService.user!;
-    this.projectID = this.route.snapshot.paramMap.get('projectID')!;
+    console.log('[ROOMCASTING CLIENT] ngOnInit started.');
+    this.isLoading = true;
+    const user = this.userService.user;
+    if (!user) {
+      this.snackbarService.queueSnackbar('User not authenticated. Redirecting to login.');
+      this.router.navigate(['/login']);
+      this.isLoading = false;
+      return;
+    }
+    this.user = user;
+    console.log('[ROOMCASTING CLIENT] User authenticated:', this.user.username, 'Role:', this.user.role);
 
-    // Listen for resource updates via socket
-    this.socketSubscription = this.socketService.listen(
-      SocketEvent.RESOURCES_UPDATE,
-      (data: any) => {
-        console.log("Resource Found")
-        this.resources = data.eventData.resources;
-        this.activityId = data.eventData.activityID; 
-        this.updateAvailableTabs();
-        if (!this.activeTab) {
-          this.setDefaultTab(); // Await setDefaultTab
-        }
+    const pid = this.route.snapshot.paramMap.get('projectID');
+    if (!pid) {
+      this.snackbarService.queueSnackbar('Project ID not found in URL.');
+      this.router.navigate(['/error']);
+      this.isLoading = false;
+      return;
+    }
+    this.projectID = pid;
+    console.log('[ROOMCASTING CLIENT] Project ID from route:', this.projectID);
+
+    try {
+      this.project = await this.projectService.get(this.projectID);
+      console.log('[ROOMCASTING CLIENT] Project data fetched:', this.project);
+
+      // Initial fetch of user groups
+      await this.refreshUserGroups();
+
+      this.joinProjectRoom();
+
+      await this.fetchInitialActivePhaseDetails(); // This will call processResourcesForTabs, which now refreshes groups
+      this.setupSocketListeners();
+
+    } catch (error) {
+      console.error('[ROOMCASTING CLIENT] Error initializing roomcasting environment:', error);
+      this.snackbarService.queueSnackbar('Error initializing roomcasting environment.');
+    } finally {
+      if (this.isLoading) { // Ensure isLoading is set to false if not handled by sub-methods
+          this.isLoading = false;
       }
-    );
+      this.cdr.detectChanges();
+      console.log('[ROOMCASTING CLIENT] ngOnInit finished. isLoading:', this.isLoading);
+    }
+  }
 
-    // Fetch project data and user's groups *before* connecting.
-    this.project = await this.projectService.get(this.projectID); // Await the project
-    if (
-      !this.project ||
-      !this.project.boards ||
-      this.project.boards.length === 0
-    ) {
-      console.error('Project or boards not found!');
-      this.snackbarService.queueSnackbar('Project or board not found.');
-      this.router.navigate(['/error']); // Consider redirecting to an error page
-      return;
+  private async refreshUserGroups(): Promise<void> {
+    if (!this.user || !this.projectID) {
+        console.warn('[ROOMCASTING CLIENT] refreshUserGroups: User or ProjectID missing.');
+        this.userGroupIDs = [];
+        this.cdr.detectChanges(); // Update UI for group count
+        return;
     }
+    try {
+        console.log('[ROOMCASTING CLIENT] refreshUserGroups: Fetching groups for user:', this.user.userID, 'in project:', this.projectID);
+        const groups = await this.groupService.getByUserAndProject(this.user.userID, this.projectID);
+        this.userGroupIDs = groups.map((group) => group.groupID);
+        console.log('[ROOMCASTING CLIENT] refreshUserGroups: User Group IDs updated:', this.userGroupIDs);
+    } catch (error) {
+        console.error('[ROOMCASTING CLIENT] refreshUserGroups: Error fetching user groups:', error);
+        this.snackbarService.queueSnackbar('Could not update your group memberships.');
+        this.userGroupIDs = []; // Default to empty on error
+    }
+    this.cdr.detectChanges(); // Update UI for group count
+  }
 
-    // Get the user's groups for this project. 
-    const groups: Group[] = await this.groupService.getByUserAndProject(
-      this.user.userID,
-      this.projectID
-    );
-    this.userGroupIDs = groups.map((group) => group.groupID); // Extract the group IDs
+  private joinProjectRoom(): void {
+    if (this.projectID && this.user) {
+        this.socketService.connect(this.user.userID, this.projectID);
+        console.log(`[ROOMCASTING CLIENT] Called socketService.connect for user ${this.user.userID} to room ${this.projectID}`);
+    } else {
+        console.warn('[ROOMCASTING CLIENT] Cannot join room: projectID or user is missing.');
+    }
   }
 
+
   ngOnDestroy(): void {
-    if (this.socketSubscription) {
-      this.socketSubscription.unsubscribe();
+    console.log('[ROOMCASTING CLIENT] ngOnDestroy: Cleaning up listeners.');
+    this.socketListeners.forEach(sub => sub.unsubscribe());
+    if (this.projectID && this.user) {
+        this.socketService.disconnect(this.user.userID, this.projectID);
+        console.log(`[ROOMCASTING CLIENT] Called socketService.disconnect for user ${this.user.userID} from room ${this.projectID}`);
     }
   }
 
-  updateAvailableTabs() {
-    this.availableTabs = {}; // Reset
-
-    for (const resource of this.resources) {
-      let userInGroup = false;
-      // Check if ANY of the resource's groupIDs are in the user's groups
-      for (const groupID of resource.groupIDs) {
-        if (this.userGroupIDs.includes(groupID)) {
-          // Use userGroupIDs
-          userInGroup = true;
-          break; // Found a match, no need to check further
-        }
-      }
+  private async fetchInitialActivePhaseDetails(): Promise<void> {
+    console.log('[ROOMCASTING CLIENT] fetchInitialActivePhaseDetails: Attempting to fetch active phase...');
+    this.isLoading = true;
+    this.cdr.detectChanges();
+    try {
+      const activeDetails = await this.http.get<ActiveActivityDetailsResponse | null>(`activities/project/${this.projectID}/active-details`).toPromise();
+      console.log('[ROOMCASTING CLIENT] fetchInitialActivePhaseDetails: Response from server:', JSON.stringify(activeDetails, null, 2));
 
-      if (userInGroup) {
-        if (resource.canvas) this.availableTabs['canvas'] = true;
-        if (resource.bucketView) this.availableTabs['bucketView'] = true;
-        if (resource.workspace) this.availableTabs['workspace'] = true;
-        if (resource.monitor) this.availableTabs['monitor'] = true;
-        if (resource.ideaAgent) this.availableTabs['ideaAgent'] = true;
+      if (activeDetails && activeDetails.activityID) {
+        this.activityID = activeDetails.activityID;
+        this.boardID = activeDetails.boardID;
+        this.board = activeDetails.board || null;
+        // processResourcesForTabs will now refresh groups internally
+        await this.processResourcesForTabs(activeDetails.resources || []);
+        console.log('[ROOMCASTING CLIENT] fetchInitialActivePhaseDetails: Processed active phase. Board:', this.board?.name);
+      } else {
+        console.log('[ROOMCASTING CLIENT] fetchInitialActivePhaseDetails: No initial active phase found.');
+        this.clearActivePhase();
       }
+    } catch (error) {
+      console.warn('[ROOMCASTING CLIENT] fetchInitialActivePhaseDetails: Could not fetch, or no phase active:', error);
+      this.clearActivePhase();
+    } finally {
+        if (this.isLoading) {
+            this.isLoading = false;
+        }
+        this.cdr.detectChanges();
     }
   }
 
-  //Sets default tab based on lowest available order
-  async setDefaultTab() {
-    if (!this.activityId) return;
-    try {
-      const activity = await this.http
-        .get<Activity>(`activities/${this.activityId}`)
-        .toPromise();
-      if (!activity) {
-        console.error('Invalid Activity ID');
-        return;
-      }
+  private setupSocketListeners(): void {
+    console.log('[ROOMCASTING CLIENT] setupSocketListeners: Setting up listeners...');
 
-      // Get the board *before* connecting
-      const board = await this.boardService.get(activity.boardID); // Use await here
-      if (!board) {
-        // Check if board exists
-        console.error('Board not found for activity:', this.activityId);
-        this.snackbarService.queueSnackbar(
-          'Board not found for this activity.'
-        );
-        // Consider redirecting to an error page or some other fallback
-        return; 
-      }
-      this.board = board; // Assign the board *after* the check
-      this.boardID = board.boardID;
-
-      if (this.resources.length > 0) {
-        const sortedResources = [...this.resources].sort(
-          (a, b) => a.order - b.order
-        );
-        for (const resource of sortedResources) {
-          if (resource.canvas && this.availableTabs['canvas']) {
-            this.activeTab = 'canvas';
-            return;
-          }
-          if (resource.bucketView && this.availableTabs['bucketView']) {
-            this.activeTab = 'bucketView';
-            return;
-          }
-          if (resource.workspace && this.availableTabs['workspace']) {
-            this.activeTab = 'workspace';
-            return;
-          }
-          if (resource.monitor && this.availableTabs['monitor']) {
-            this.activeTab = 'monitor';
-            return;
+    const resourcesUpdateSub = this.socketService.listen(
+      SocketEvent.RESOURCES_UPDATE,
+      async (socketPayload: { eventData: ResourcesUpdateSocketPayload } | any) => { 
+        console.log('[ROOMCASTING CLIENT] Socket RESOURCES_UPDATE event received. Raw SocketPayload:', JSON.stringify(socketPayload, null, 2));
+        const actualEventData = socketPayload?.eventData;
+
+        if (actualEventData && actualEventData.projectID === this.projectID) {
+          console.log('[ROOMCASTING CLIENT] Processing RESOURCES_UPDATE for this project:', actualEventData);
+          this.isLoading = true;
+          this.cdr.detectChanges();
+
+          this.activityID = actualEventData.activityID;
+          this.boardID = actualEventData.boardID;
+
+          if ((this.board?.boardID !== this.boardID || !this.board) && this.boardID) {
+              console.warn(`[ROOMCASTING CLIENT] Board ID is ${this.boardID}. Current board is ${this.board?.boardID}. Fetching board details.`);
+              try {
+                const boardDetails = await this.http.get<Board | undefined>(`api/boards/${this.boardID}`).toPromise();
+                this.board = boardDetails || null;
+                console.log('[ROOMCASTING CLIENT] Fetched board details after RESOURCES_UPDATE:', this.board);
+              } catch (err) {
+                console.error('[ROOMCASTING CLIENT] Failed to fetch board details after RESOURCES_UPDATE:', err);
+                this.board = null;
+              }
+              // processResourcesForTabs will be called after board fetch attempt
           }
-          if (resource.ideaAgent && this.availableTabs['ideaAgent']) {
-            this.activeTab = 'ideaAgent';
-            return;
+          // processResourcesForTabs will now refresh groups internally
+          await this.processResourcesForTabs(actualEventData.resources || []); 
+          this.isLoading = false;
+          this.cdr.detectChanges();
+        } else {
+          console.log('[ROOMCASTING CLIENT] Received RESOURCES_UPDATE but not for this project or data malformed. My projectID:', this.projectID, 'Received SocketPayload:', socketPayload);
+        }
+      }
+    );
+    this.socketListeners.push(resourcesUpdateSub);
+
+    const activityStoppedSub = this.socketService.listen(SocketEvent.ACTIVITY_STOPPED, (socketPayload: any) => {
+        console.log('[ROOMCASTING CLIENT] Socket ACTIVITY_STOPPED event received. Raw SocketPayload:', JSON.stringify(socketPayload, null, 2));
+        const actualEventData = socketPayload?.eventData;
+        if (actualEventData && actualEventData.projectID === this.projectID) {
+            console.log('[ROOMCASTING CLIENT] Processing ACTIVITY_STOPPED for activity:', actualEventData.activityID);
+            this.clearActivePhase();
+            this.snackbarService.queueSnackbar('The teacher has stopped the current activity.');
+        } else {
+             console.log('[ROOMCASTING CLIENT] Received ACTIVITY_STOPPED but not for this project or data malformed. My projectID:', this.projectID, 'Received SocketPayload:', socketPayload);
+        }
+    });
+    this.socketListeners.push(activityStoppedSub);
+    console.log('[ROOMCASTING CLIENT] Listeners set up.');
+  }
+
+  private async processResourcesForTabs(resources: Resource[]): Promise<void> { 
+    console.log('[ROOMCASTING CLIENT] processResourcesForTabs: Starting. Input resources count:', resources?.length);
+    this.isLoading = true; // Indicate processing starts
+    this.cdr.detectChanges();
+
+    await this.refreshUserGroups();
+    console.log('[ROOMCASTING CLIENT] processResourcesForTabs: Current userGroupIDs after refresh:', this.userGroupIDs);
+
+
+    const newTabs: TabInfo[] = [];
+    if (!resources || resources.length === 0) {
+        console.log('[ROOMCASTING CLIENT] processResourcesForTabs: No resources to process.');
+        this.tabsForUser = [];
+        this.selectedTabIndex = 0;
+        this.isLoading = false;
+        this.cdr.detectChanges();
+        return;
+    }
+
+    for (const resource of resources) {
+      let userInAssignedGroup = false;
+      if (resource.groupIDs && resource.groupIDs.length > 0) {
+        for (const groupID of resource.groupIDs) {
+          if (this.userGroupIDs.includes(groupID)) {
+            userInAssignedGroup = true;
+            break;
           }
         }
+      } else {
+         console.log(`[ROOMCASTING CLIENT] Resource "${resource.name}" has no specific groupIDs assigned. (Logic for this case might need review based on requirements)`);
+         // Depending on requirements, if groupIDs is empty, it might mean for all, or for none.
+         // Current logic: if no groupIDs, userInAssignedGroup remains false unless other conditions met.
+      }
+
+      if (userInAssignedGroup) {
+        let tabType = '';
+        if (resource.canvas) tabType = 'canvas';
+        else if (resource.bucketView) tabType = 'bucketView';
+        else if (resource.workspace) tabType = 'workspace';
+        else if (resource.monitor) tabType = 'monitor';
+        else if (resource.ideaAgent) tabType = 'ideaAgent';
+
+        if (tabType) {
+            newTabs.push({ type: tabType, label: resource.name, name: resource.name, order: resource.order });
+            console.log(`[ROOMCASTING CLIENT] processResourcesForTabs: Adding tab for user: ${resource.name} (Type: ${tabType}, Order: ${resource.order})`);
+        }
+      } else {
+        console.log(`[ROOMCASTING CLIENT] processResourcesForTabs: User not in assigned groups for resource: ${resource.name}. GroupIDs: ${resource.groupIDs}`);
       }
-    } catch (error) {
-      this.snackbarService.queueSnackbar(`Error loading activity.`);
     }
-  }
 
-  setActiveTab(tabName: string) {
-    if (this.availableTabs[tabName]) {
-      //only change if tab is available
-      this.activeTab = tabName;
+    this.tabsForUser = newTabs.sort((a, b) => a.order - b.order);
+    console.log('[ROOMCASTING CLIENT] processResourcesForTabs: Final tabsForUser:', JSON.stringify(this.tabsForUser, null, 2));
+
+    if (this.tabsForUser.length > 0) {
+      if (this.selectedTabIndex >= this.tabsForUser.length || this.selectedTabIndex < 0) {
+        this.selectedTabIndex = 0;
+        console.log('[ROOMCASTING CLIENT] processResourcesForTabs: selectedTabIndex was out of bounds, reset to 0.');
+      }
+    } else {
+      this.selectedTabIndex = 0;
+      console.log('[ROOMCASTING CLIENT] processResourcesForTabs: No tabs for user, selectedTabIndex reset to 0.');
     }
+    this.isLoading = false; // Processing finished
+    this.cdr.detectChanges();
+  }
+
+  private clearActivePhase(): void {
+    console.log('[ROOMCASTING CLIENT] clearActivePhase: Clearing active phase data.');
+    this.activityID = null;
+    this.boardID = null;
+    this.board = null;
+    this.tabsForUser = [];
+    this.selectedTabIndex = 0;
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
-  // Add a method to check if a tab is active
-  isTabActive(tabName: string): boolean {
-    return this.activeTab === tabName;
+
+  onTabChanged(event: MatTabChangeEvent): void {
+    this.selectedTabIndex = event.index;
+    console.log(`[ROOMCASTING CLIENT] Tab changed to index: ${this.selectedTabIndex}, Label: ${event.tab.textLabel}`);
   }
 }
diff --git a/frontend/src/app/components/score-view-modal/score-view-modal.component.ts b/frontend/src/app/components/score-view-modal/score-view-modal.component.ts
index 889efb17..6b870ce8 100644
--- a/frontend/src/app/components/score-view-modal/score-view-modal.component.ts
+++ b/frontend/src/app/components/score-view-modal/score-view-modal.component.ts
@@ -8,7 +8,7 @@ import {
   OnDestroy,
   AfterViewInit,
   ChangeDetectorRef,
-  Input
+  Input 
 } from '@angular/core';
 import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
@@ -19,6 +19,7 @@ import { CanvasComponent } from '../canvas/canvas.component';
 import { CkBucketsComponent } from '../ck-buckets/ck-buckets.component';
 import { CkMonitorComponent } from '../ck-monitor/ck-monitor.component';
 import { CkWorkspaceComponent } from '../ck-workspace/ck-workspace.component';
+import { CkIdeasComponent } from '../ck-ideas/ck-ideas.component';
 import { Project } from 'src/app/models/project';
 import { Board } from 'src/app/models/board';
 import { Subscription, Subject, Observable } from 'rxjs';
@@ -34,8 +35,8 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
   styleUrls: ['./score-view-modal.component.scss'],
 })
 export class ScoreViewModalComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('viewContainer', { read: ViewContainerRef })
-  viewContainer: ViewContainerRef;
+  @ViewChild('viewContainer', { read: ViewContainerRef, static: true }) 
+  viewContainer!: ViewContainerRef; 
 
   @Input() projectID: string;
   @Input() boardID: string;
@@ -43,9 +44,9 @@ export class ScoreViewModalComponent implements OnInit, AfterViewInit, OnDestroy
 
   title = '';
   componentRef: any;
-  project: Project;
-  board: Board;
-  user: AuthUser;
+  project!: Project; // From data
+  board!: Board;     // From data
+  user!: AuthUser;   // From data
 
   private projectSubscription: Subscription;
   private boardSubscription: Subscription;
@@ -54,26 +55,40 @@ export class ScoreViewModalComponent implements OnInit, AfterViewInit, OnDestroy
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     private componentFactoryResolver: ComponentFactoryResolver,
-    private boardService: BoardService,
-    private projectService: ProjectService,
-    public dialog: MatDialog,
+    private boardService: BoardService, // Not directly used in this modal logic
+    private projectService: ProjectService, // Not directly used
+    public dialog: MatDialog, // Keep if this modal opens other dialogs
     private cdr: ChangeDetectorRef
   ) {}
 
   capitalizeFirstLetter(str: string): string {
-    if (!str) return ''; // Handle empty or null strings
+    if (!str) return '';
+    if (str === 'ideaAgentView') return 'Idea Agent'; // Custom title for idea agent
+    if (str === 'bucketView') return 'Bucket View'; // Custom title
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
 
   ngOnInit(): void {
+    if (!this.data || !this.data.project || !this.data.board || !this.data.user || !this.data.componentType) {
+        console.error("ScoreViewModalComponent: Missing critical data for initialization.", this.data);
+        // Optionally close the dialog or show an error message
+        // this.dialogRef.close(); // Assuming you inject MatDialogRef if you want to close it
+        return;
+    }
     this.project = this.data.project;
     this.board = this.data.board;
     this.user = this.data.user;
     this.title = this.capitalizeFirstLetter(this.data.componentType);
+    console.log("[ScoreViewModal] OnInit - Data:", this.data);
   }
 
   ngAfterViewInit(): void {
-    this.loadComponent();
+    // Ensure viewContainer is available
+    if (this.viewContainer) {
+        this.loadComponent();
+    } else {
+        console.error("ScoreViewModalComponent: viewContainer is not available in ngAfterViewInit.");
+    }
   }
 
   async loadComponent() {
@@ -94,25 +109,54 @@ export class ScoreViewModalComponent implements OnInit, AfterViewInit, OnDestroy
         case 'workspace':
           componentToLoad = CkWorkspaceComponent;
           break;
+        case 'ideaAgentView':
+          componentToLoad = CkIdeasComponent;
+          break;
         default:
-          console.error('Unknown component type:', this.data.componentType);
+          console.error('ScoreViewModalComponent: Unknown component type:', this.data.componentType);
           return;
       }
 
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-        componentToLoad
-      );
-      this.componentRef = this.viewContainer.createComponent(componentFactory);
+      try {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+          componentToLoad
+        );
+        this.componentRef = this.viewContainer.createComponent(componentFactory);
 
-      this.componentRef.instance.isModalView = true;
-      this.componentRef.instance.projectID = this.projectID;
-      this.componentRef.instance.boardID = this.boardID;
+        // Pass data to the dynamically loaded component
+        // Common properties
+        if (this.componentRef.instance.hasOwnProperty('projectID')) {
+            this.componentRef.instance.projectID = this.project.projectID;
+        }
+        if (this.componentRef.instance.hasOwnProperty('boardID')) {
+            this.componentRef.instance.boardID = this.board.boardID;
+        }
+         if (this.componentRef.instance.hasOwnProperty('isModalView')) { // Used by CkWorkspace
+            this.componentRef.instance.isModalView = true;
+        }
+         if (this.componentRef.instance.hasOwnProperty('embedded')) { // Used by CkIdeas and others
+            this.componentRef.instance.embedded = true;
+        }
+
+
+        // Specific for CkIdeasComponent (using the @Input names from its definition)
+        if (componentToLoad === CkIdeasComponent) {
+            this.componentRef.instance.projectID_input = this.project.projectID;
+            this.componentRef.instance.boardID_input = this.board.boardID;
+            // 'embedded' is already set above if property exists
+        }
 
-      if (componentToLoad === CanvasComponent) {
-        this.componentRef.instance.onResize();
-      }
 
-      this.cdr.detectChanges();
+        // Specific handling for CanvasComponent if needed (e.g., resize)
+        if (componentToLoad === CanvasComponent && typeof this.componentRef.instance.onResize === 'function') {
+          // Call onResize after a short delay to ensure the view is fully rendered and dimensions are stable
+          setTimeout(() => this.componentRef.instance.onResize(), 0);
+        }
+
+        this.cdr.detectChanges(); // Trigger change detection after component is created and inputs are set
+      } catch (e) {
+        console.error("ScoreViewModalComponent: Error creating dynamic component:", e);
+      }
     }
   }
 
@@ -120,14 +164,9 @@ export class ScoreViewModalComponent implements OnInit, AfterViewInit, OnDestroy
     if (this.componentRef) {
       this.componentRef.destroy();
     }
-    if (this.projectSubscription) {
-      this.projectSubscription.unsubscribe();
-    }
-    if (this.boardSubscription) {
-      this.boardSubscription.unsubscribe();
-    }
-    if (this.queryParamsSubscription) {
-      this.queryParamsSubscription.unsubscribe();
-    }
+    // Unsubscribe from any subscriptions if they were used
+    // if (this.projectSubscription) this.projectSubscription.unsubscribe();
+    // if (this.boardSubscription) this.boardSubscription.unsubscribe();
+    // if (this.queryParamsSubscription) this.queryParamsSubscription.unsubscribe();
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/models/activity.ts b/frontend/src/app/models/activity.ts
index ff5c4073..78dc1b9d 100644
--- a/frontend/src/app/models/activity.ts
+++ b/frontend/src/app/models/activity.ts
@@ -1,7 +1,9 @@
 export interface Activity {
-    activityID: string;
-    name: string;
-    projectID: string;
-    boardID: string;
-    groupIDs: string[];
-  }
\ No newline at end of file
+  activityID: string;
+  name: string;
+  projectID: string;
+  boardID: string;
+  groupIDs: string[];
+  order: number;
+  isActive?: boolean;
+}
diff --git a/frontend/src/app/utils/constants.ts b/frontend/src/app/utils/constants.ts
index 73bdec15..70f1e0a4 100644
--- a/frontend/src/app/utils/constants.ts
+++ b/frontend/src/app/utils/constants.ts
@@ -60,6 +60,7 @@ export enum SocketEvent {
   AI_RESPONSE = 'AI_RESPONSE', // Event for receiving AI response
 
   RESOURCES_UPDATE = 'RESOURCES_UPDATE',
+  ACTIVITY_STOPPED = 'ACTIVITY_STOPPED',
 }
 
 export const STUDENT_POST_COLOR = '#FFF7C0';