diff --git a/__tests__/components/MeetingBox.test.tsx b/__tests__/components/MeetingBox.test.tsx
index 32bd7d65..c6b223ba 100644
--- a/__tests__/components/MeetingBox.test.tsx
+++ b/__tests__/components/MeetingBox.test.tsx
@@ -1,722 +1,471 @@
 /**
  * MeetingBox Component Tests
- * Tests the meeting management functionality including scheduling, accepting, and cancelling meetings
  */
 
 import React from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import MeetingBox from '@/components/messageSystem/MeetingBox';
 
-// Create shared mocks for router
-const mockPush = jest.fn();
-const mockRefresh = jest.fn();
-
-// Mock the router
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: mockPush,
-    refresh: mockRefresh
-  })
-}));
-
-// Mock meeting API services
-jest.mock('@/services/meetingApiServices', () => ({
-  fetchMeetings: jest.fn(),
-  createMeeting: jest.fn(),
-  updateMeeting: jest.fn()
-}));
-
-// Mock session API services for cache invalidation
-jest.mock('@/services/sessionApiServices', () => ({
-  invalidateUsersCaches: jest.fn()
-}));
-
-// Mock debounced API service
-jest.mock('@/services/debouncedApiService', () => {
-  const mockService = {
-    makeRequest: jest.fn(),
-    invalidate: jest.fn()
-  };
-  return {
-    debouncedApiService: mockService,
-    makeRequest: mockService.makeRequest,
-    invalidate: mockService.invalidate
-  };
-});
-
-// Mock utility functions
-jest.mock('@/utils/avatarUtils', () => ({
-  processAvatarUrl: jest.fn((url) => url),
-  getFirstLetter: jest.fn((firstName, userId) => firstName?.[0] || 'U'),
-  createFallbackAvatar: jest.fn(() => 'data:image/svg+xml;base64,mock')
-}));
-
-// Mock OptimizedAvatar component
-jest.mock('@/components/ui/OptimizedAvatar', () => {
-  return function MockOptimizedAvatar({ userId, firstName, lastName }: any) {
+// Mock child components
+jest.mock('@/components/meetingSystem/CreateMeetingModal', () => {
+  return function MockCreateMeetingModal({ onClose, onCreate, receiverName }: any) {
     return (
-      <div data-testid="optimized-avatar">
-        Avatar for {firstName} {lastName} ({userId})
+      <div data-testid="create-meeting-modal">
+        <div>Create Meeting Modal for {receiverName}</div>
+        <button onClick={onClose}>Close</button>
+        <button onClick={() => onCreate({
+          description: 'Test Meeting',
+          date: '2025-07-20',
+          time: '14:00'
+        })}>Create Meeting</button>
       </div>
     );
   };
 });
 
-// Mock Alert component
-jest.mock('@/components/ui/Alert', () => {
-  return function MockAlert({ type, title, message, isOpen, onClose }: any) {
-    if (!isOpen) return null;
+jest.mock('@/components/meetingSystem/CancelMeetingModal', () => {
+  return function MockCancelMeetingModal({ meetingId, onClose, onCancel, userName }: any) {
     return (
-      <div data-testid="alert" className={`alert-${type}`}>
-        {title && <div data-testid="alert-title">{title}</div>}
-        <div data-testid="alert-message">{message}</div>
-        <button onClick={onClose} data-testid="alert-close">Close</button>
+      <div data-testid="cancel-meeting-modal">
+        <div>Cancel Meeting Modal for {userName}</div>
+        <button onClick={onClose}>Close</button>
+        <button onClick={() => onCancel(meetingId, 'Test cancellation reason')}>Cancel Meeting</button>
       </div>
     );
   };
 });
 
-// Mock ConfirmationDialog component
-jest.mock('@/components/ui/ConfirmationDialog', () => {
-  return function MockConfirmationDialog({ 
-    isOpen, 
-    onClose, 
-    onConfirm, 
-    title, 
-    message, 
-    type,
-    confirmText 
+jest.mock('@/components/meetingSystem/MeetingList', () => {
+  return function MockMeetingList({ 
+    pendingRequests, 
+    upcomingMeetings, 
+    onScheduleMeeting,
+    onMeetingAction,
+    onCancelMeeting
   }: any) {
-    if (!isOpen) return null;
     return (
-      <div data-testid="confirmation-dialog">
-        <div data-testid="confirmation-title">{title}</div>
-        <div data-testid="confirmation-message">{message}</div>
-        <div data-testid="confirmation-type">{type}</div>
-        <button onClick={onConfirm} data-testid="confirmation-confirm">
-          {confirmText || 'Confirm'}
-        </button>
-        <button onClick={onClose} data-testid="confirmation-cancel">Cancel</button>
+      <div data-testid="meeting-list">
+        <div data-testid="pending-requests-count">{pendingRequests.length}</div>
+        <div data-testid="upcoming-meetings-count">{upcomingMeetings.length}</div>
+        
+        <button onClick={onScheduleMeeting} data-testid="schedule-meeting-btn">Schedule Meeting</button>
+        
+        {pendingRequests.map((meeting: any) => (
+          <div key={meeting._id} data-testid={`pending-meeting-${meeting._id}`}>
+            <button onClick={() => onMeetingAction(meeting._id, 'accept')}>Accept</button>
+            <button onClick={() => onMeetingAction(meeting._id, 'reject')}>Reject</button>
+          </div>
+        ))}
+        
+        {upcomingMeetings.map((meeting: any) => (
+          <div key={meeting._id} data-testid={`upcoming-meeting-${meeting._id}`}>
+            <button onClick={() => onCancelMeeting(meeting._id)}>Cancel</button>
+          </div>
+        ))}
       </div>
     );
   };
 });
 
-// Mock CreateMeetingModal component
-jest.mock('@/components/meetingSystem/CreateMeetingModal', () => {
-  return function MockCreateMeetingModal({ onClose, onCreate, receiverName }: any) {
+jest.mock('@/components/meetingSystem/SavedNotesList', () => {
+  return function MockSavedNotesList({ notes }: any) {
     return (
-      <div data-testid="create-meeting-modal">
-        <div>Creating meeting with {receiverName}</div>
-        <button 
-          onClick={() => onCreate({
-            description: 'Test meeting description',
-            date: '2025-07-15',
-            time: '10:00'
-          })}
-          data-testid="create-meeting-submit"
-        >
-          Create Meeting
-        </button>
-        <button onClick={onClose} data-testid="create-meeting-cancel">Cancel</button>
+      <div data-testid="saved-notes-list">
+        <div data-testid="notes-count">{notes.length}</div>
       </div>
     );
   };
 });
 
-// Mock CancelMeetingModal component
-jest.mock('@/components/meetingSystem/CancelMeetingModal', () => {
-  return function MockCancelMeetingModal({ meetingId, onClose, onCancel, userName }: any) {
-    return (
-      <div data-testid="cancel-meeting-modal">
-        <div>Cancelling meeting for {userName}</div>
-        <button 
-          onClick={() => onCancel(meetingId, 'Test cancellation reason')}
-          data-testid="cancel-meeting-submit"
-        >
-          Cancel Meeting
-        </button>
-        <button onClick={onClose} data-testid="cancel-meeting-close">Close</button>
+jest.mock('@/components/ui/Alert', () => {
+  return function MockAlert({ isOpen, type, message, onClose }: any) {
+    return isOpen ? (
+      <div data-testid={`alert-${type}`}>
+        <div data-testid="alert-message">{message}</div>
+        <button onClick={onClose}>Close Alert</button>
       </div>
-    );
+    ) : null;
   };
 });
 
-// Mock fetch for API calls
-global.fetch = jest.fn();
+jest.mock('@/components/ui/ConfirmationDialog', () => {
+  return function MockConfirmationDialog({ isOpen, title, onConfirm, onClose }: any) {
+    return isOpen ? (
+      <div data-testid="confirmation-dialog">
+        <div data-testid="confirmation-title">{title}</div>
+        <button onClick={onConfirm} data-testid="confirm-button">Confirm</button>
+        <button onClick={onClose} data-testid="cancel-button">Cancel</button>
+      </div>
+    ) : null;
+  };
+});
 
-// Mock URL.createObjectURL for notes download
-global.URL.createObjectURL = jest.fn(() => 'mock-blob-url');
-global.URL.revokeObjectURL = jest.fn();
+// Mock API Services
+const mockFetchMeetings = jest.fn();
+const mockCreateMeeting = jest.fn();
+const mockUpdateMeeting = jest.fn();
+const mockCancelMeetingWithReason = jest.fn();
+const mockFetchAllUserMeetingNotes = jest.fn();
+const mockFilterMeetingsByType = jest.fn();
+const mockCheckMeetingLimit = jest.fn();
+const mockCanCancelMeeting = jest.fn();
 
-describe('MeetingBox Component', () => {
-  const mockProps = {
-    chatRoomId: '6873cdd898892472c9621cf1',
-    userId: '6873cc50ac4e1d6e1cddf33f',
-    onClose: jest.fn(),
-    onMeetingUpdate: jest.fn()
-  };
+jest.mock('@/services/meetingApiServices', () => ({
+  fetchMeetings: (...args: any[]) => mockFetchMeetings(...args),
+  createMeeting: (...args: any[]) => mockCreateMeeting(...args),
+  updateMeeting: (...args: any[]) => mockUpdateMeeting(...args),
+  cancelMeetingWithReason: (...args: any[]) => mockCancelMeetingWithReason(...args),
+  fetchMeetingCancellation: jest.fn(),
+  acknowledgeMeetingCancellation: jest.fn(),
+  checkMeetingNotesExist: jest.fn().mockResolvedValue(false),
+  fetchAllUserMeetingNotes: (...args: any[]) => mockFetchAllUserMeetingNotes(...args),
+  downloadMeetingNotesFile: jest.fn(),
+  filterMeetingsByType: (...args: any[]) => mockFilterMeetingsByType(...args),
+  checkMeetingLimit: (...args: any[]) => mockCheckMeetingLimit(...args),
+  canCancelMeeting: (...args: any[]) => mockCanCancelMeeting(...args),
+}));
 
-  const mockMeetings = [
-    {
-      _id: 'meeting-1',
-      senderId: 'other-user-id', // Other user is sender
-      receiverId: '6873cc50ac4e1d6e1cddf33f', // Test user is receiver
-      description: 'Test meeting 1',
-      meetingTime: '2025-07-20T10:00:00Z',
-      state: 'pending',
-      acceptStatus: false,
-      meetingLink: null
-    },
-    {
-      _id: 'meeting-2',
-      senderId: 'other-user-id',
-      receiverId: '6873cc50ac4e1d6e1cddf33f',
-      description: 'Test meeting 2',
-      meetingTime: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // Tomorrow
-      state: 'accepted',
-      acceptStatus: true,
-      meetingLink: 'https://meet.example.com/room123'
-    },
-    {
-      _id: 'meeting-3',
-      senderId: '6873cc50ac4e1d6e1cddf33f',
-      receiverId: 'other-user-id',
-      description: 'Past meeting',
-      meetingTime: '2025-07-10T10:00:00Z',
-      state: 'completed',
-      acceptStatus: true,
-      meetingLink: null
-    }
-  ];
-
-  const mockChatRoom = {
-    _id: '6873cdd898892472c9621cf1',
-    participants: ['6873cc50ac4e1d6e1cddf33f', 'other-user-id']
-  };
+const mockFetchChatRoom = jest.fn();
+const mockFetchUserProfile = jest.fn();
 
-  const mockUserProfile = {
-    _id: 'other-user-id',
-    firstName: 'John',
-    lastName: 'Doe',
-    avatar: 'https://example.com/avatar.jpg'
-  };
+jest.mock('@/services/chatApiServices', () => ({
+  fetchChatRoom: (...args: any[]) => mockFetchChatRoom(...args),
+  fetchUserProfile: (...args: any[]) => mockFetchUserProfile(...args),
+}));
+
+jest.mock('@/services/sessionApiServices', () => ({
+  invalidateUsersCaches: jest.fn(),
+}));
+
+jest.mock('@/services/debouncedApiService', () => ({
+  debouncedApiService: {
+    fetchUserProfile: jest.fn(),
+    makeRequest: jest.fn(),
+  },
+}));
 
-  // Get the mocked functions
-  const mockFetchMeetings = require('@/services/meetingApiServices').fetchMeetings as jest.MockedFunction<any>;
-  const mockCreateMeeting = require('@/services/meetingApiServices').createMeeting as jest.MockedFunction<any>;
-  const mockUpdateMeeting = require('@/services/meetingApiServices').updateMeeting as jest.MockedFunction<any>;
-  const mockInvalidateUsersCaches = require('@/services/sessionApiServices').invalidateUsersCaches as jest.MockedFunction<any>;
-  const mockMakeRequest = require('@/services/debouncedApiService').debouncedApiService.makeRequest as jest.MockedFunction<any>;
-  const mockInvalidate = require('@/services/debouncedApiService').debouncedApiService.invalidate as jest.MockedFunction<any>;
-  const mockRouter = require('next/navigation').useRouter();
-  const mockPush = mockRouter.push as jest.MockedFunction<any>;
+// Mock data
+const mockChatRoom = {
+  _id: 'chat-room-1',
+  participants: ['user1', 'user2'],
+  messages: []
+};
+
+const mockUserProfile = {
+  _id: 'user2',
+  firstName: 'John',
+  lastName: 'Doe',
+  avatar: '/avatar.png'
+};
+
+const mockMeetings = [
+  {
+    _id: 'meeting-1',
+    description: 'Frontend Development Discussion',
+    meetingTime: new Date('2025-07-20T14:00:00Z').toISOString(),
+    state: 'pending',
+    senderId: 'user2',
+    receiverId: 'user1',
+    createdAt: new Date('2025-07-18T10:00:00Z').toISOString()
+  },
+  {
+    _id: 'meeting-2',
+    description: 'Project Planning',
+    meetingTime: new Date('2025-07-22T16:00:00Z').toISOString(),
+    state: 'accepted',
+    senderId: 'user1',
+    receiverId: 'user2',
+    createdAt: new Date('2025-07-17T10:00:00Z').toISOString()
+  }
+];
+
+const mockFilteredMeetings = {
+  pendingRequests: [mockMeetings[0]],
+  upcomingMeetings: [mockMeetings[1]],
+  pastMeetings: [],
+  cancelledMeetings: []
+};
+
+const mockSavedNotes = [
+  {
+    _id: 'note-1',
+    meetingId: 'meeting-3',
+    title: 'Meeting Notes 1',
+    content: 'Content of the first note',
+    tags: ['development'],
+    wordCount: 100,
+    lastModified: new Date('2025-07-15T15:00:00Z').toISOString(),
+    createdAt: new Date('2025-07-15T15:00:00Z').toISOString(),
+    isPrivate: false
+  }
+];
+
+// Default props
+const defaultProps = {
+  chatRoomId: 'chat-room-1',
+  userId: 'user1',
+  onClose: jest.fn(),
+  onMeetingUpdate: jest.fn()
+};
 
+describe('MeetingBox Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     
-    // Mock chat room fetch
-    (global.fetch as jest.Mock).mockImplementation((url: string) => {
-      if (url.includes('/api/chatrooms')) {
-        return Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve({
-            success: true,
-            chatRooms: [mockChatRoom]
-          })
-        });
-      }
-      
-      if (url.includes('/api/users/profile')) {
-        return Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve({
-            success: true,
-            user: mockUserProfile
-          })
-        });
-      }
-
-      if (url.includes('/api/meeting/cancel')) {
-        return Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve({
-            meeting: { ...mockMeetings[0], state: 'cancelled' }
-          })
-        });
-      }
-
-      if (url.includes('/api/meeting-notes')) {
-        return Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve({
-            _id: 'notes-1',
-            content: 'Test meeting notes content',
-            title: 'Meeting Notes',
-            userName: 'Test User',
-            createdAt: '2025-07-10T10:00:00Z'
-          })
-        });
-      }
-      
-      return Promise.resolve({
-        ok: false,
-        json: () => Promise.resolve({ error: 'Not found' })
-      });
-    });
-
-    // Mock API services
+    // Setup default mocks
+    mockFetchChatRoom.mockResolvedValue(mockChatRoom);
+    mockFetchUserProfile.mockResolvedValue(mockUserProfile);
     mockFetchMeetings.mockResolvedValue(mockMeetings);
-    mockCreateMeeting.mockResolvedValue({
-      _id: 'new-meeting-id',
-      senderId: '6873cc50ac4e1d6e1cddf33f',
-      receiverId: 'other-user-id',
-      description: 'New test meeting',
-      meetingTime: '2025-07-30T15:00:00Z',
-      state: 'pending'
-    });
-    mockUpdateMeeting.mockResolvedValue({
-      ...mockMeetings[0],
-      state: 'accepted'
-    });
-
-    // Mock debounced API service
-    mockMakeRequest.mockImplementation((key: string, fn: () => any) => fn());
+    mockFilterMeetingsByType.mockReturnValue(mockFilteredMeetings);
+    mockFetchAllUserMeetingNotes.mockResolvedValue(mockSavedNotes);
+    mockCanCancelMeeting.mockReturnValue({ canCancel: true, reason: null });
+    mockCheckMeetingLimit.mockReturnValue(0);
   });
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  describe('Initial Rendering', () => {
-    it('should render the meeting box with header and schedule button', async () => {
-      render(<MeetingBox {...mockProps} />);
+  describe('Rendering', () => {
+    it('should render loading state initially', async () => {
+      mockFetchMeetings.mockImplementation(() => new Promise(() => {})); // Never resolve
       
-      await waitFor(() => {
-        expect(screen.getByText('Meetings')).toBeInTheDocument();
-        expect(screen.getByText('New')).toBeInTheDocument();
-      });
-    });
-
-    it('should show loading state initially', () => {
-      render(<MeetingBox {...mockProps} />);
+      render(<MeetingBox {...defaultProps} />);
       
       expect(screen.getByText('Loading meetings...')).toBeInTheDocument();
     });
 
-    it('should fetch chat room data and meetings on mount', async () => {
-      render(<MeetingBox {...mockProps} />);
+    it('should render the main meeting interface after loading', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(global.fetch).toHaveBeenCalledWith(
-          expect.stringContaining('/api/chatrooms?chatRoomId=6873cdd898892472c9621cf1')
-        );
-        expect(mockFetchMeetings).toHaveBeenCalledWith(
-          '6873cc50ac4e1d6e1cddf33f',
-          'other-user-id'
-        );
+        expect(screen.getByText('Meetings')).toBeInTheDocument();
       });
-    });
-  });
-
-  describe('Meeting Display and Categorization', () => {
-    it('should categorize and display meetings correctly', async () => {
-      render(<MeetingBox {...mockProps} />);
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      // Should show different meeting categories
-      expect(screen.getByText('Pending Requests (1)')).toBeInTheDocument();
-      expect(screen.getByText('Upcoming Meetings (1)')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
+      expect(screen.getByTestId('meeting-list')).toBeInTheDocument();
     });
 
-    it('should show empty state when no meetings exist', async () => {
-      mockFetchMeetings.mockResolvedValueOnce([]);
-      
-      render(<MeetingBox {...mockProps} />);
+    it('should render saved notes section', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.getByText('No meetings scheduled')).toBeInTheDocument();
-        expect(screen.getByText('Schedule Meeting')).toBeInTheDocument();
+        expect(screen.getByText(/saved meeting notes/i)).toBeInTheDocument();
       });
     });
   });
 
-  describe('Meeting Creation', () => {
-    it('should open create meeting modal when schedule button is clicked', async () => {
-      // Use meetings with no active count to allow modal opening
-      mockFetchMeetings.mockResolvedValueOnce([mockMeetings[2]]); // Only past meeting
-      
-      render(<MeetingBox {...mockProps} />);
+  describe('Data Fetching', () => {
+    it('should fetch chat room and meetings on mount', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      const scheduleButton = screen.getByText('New');
-      
-      act(() => {
-        fireEvent.click(scheduleButton);
+        expect(mockFetchChatRoom).toHaveBeenCalledWith(defaultProps.chatRoomId);
       });
       
+      // Give more time for fetchMeetings to be called
       await waitFor(() => {
-        expect(screen.getByTestId('create-meeting-modal')).toBeInTheDocument();
-      });
+        expect(mockFetchMeetings).toHaveBeenCalled();
+      }, { timeout: 3000 });
     });
 
-    it('should create a new meeting successfully', async () => {
-      // Use meetings with no active count to allow modal opening
-      mockFetchMeetings.mockResolvedValueOnce([mockMeetings[2]]); // Only past meeting
-      
-      render(<MeetingBox {...mockProps} />);
+    it('should fetch saved notes when component loads', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      // Open create modal
-      const scheduleButton = screen.getByText('New');
-      
-      act(() => {
-        fireEvent.click(scheduleButton);
-      });
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('create-meeting-modal')).toBeInTheDocument();
-      });
-
-      // Submit meeting creation
-      const createButton = screen.getByTestId('create-meeting-submit');
-      fireEvent.click(createButton);
-      
-      await waitFor(() => {
-        expect(mockCreateMeeting).toHaveBeenCalledWith({
-          senderId: '6873cc50ac4e1d6e1cddf33f',
-          receiverId: 'other-user-id',
-          description: 'Test meeting description',
-          meetingTime: new Date('2025-07-15T10:00')
-        });
+        expect(mockFetchAllUserMeetingNotes).toHaveBeenCalled();
       });
     });
+  });
 
-    it('should show error when meeting limit is reached', async () => {
-      // Mock meetings with 2 active meetings
-      const activeMeetings = [
-        { ...mockMeetings[0], state: 'pending' },
-        { ...mockMeetings[1], state: 'accepted', meetingTime: '2025-07-30T10:00:00Z' }
-      ];
-      mockFetchMeetings.mockResolvedValueOnce(activeMeetings);
-      
-      render(<MeetingBox {...mockProps} />);
+  describe('Meeting Management', () => {
+    it('should open create meeting modal when new button is clicked', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
       });
-
-      const scheduleButton = screen.getByText('New');
-      fireEvent.click(scheduleButton);
       
-      await waitFor(() => {
-        expect(screen.getByTestId('alert')).toBeInTheDocument();
-        expect(screen.getByText('Meeting Limit Reached')).toBeInTheDocument();
-      });
+      fireEvent.click(screen.getByRole('button', { name: /new/i }));
+      
+      expect(screen.getByTestId('create-meeting-modal')).toBeInTheDocument();
     });
-  });
 
-  describe('Meeting Actions', () => {
-    it('should accept a meeting request', async () => {
-      render(<MeetingBox {...mockProps} />);
+    it('should handle meeting creation', async () => {
+      const newMeeting = {
+        _id: 'new-meeting-id',
+        description: 'Test Meeting',
+        meetingTime: new Date('2025-07-20T14:00:00Z').toISOString(),
+        state: 'pending',
+        senderId: 'user1',
+        receiverId: 'user2'
+      };
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
+      mockCreateMeeting.mockResolvedValue(newMeeting);
 
-      // Find and click accept button for pending meeting
-      const acceptButton = screen.getByText('Accept');
-      fireEvent.click(acceptButton);
+      render(<MeetingBox {...defaultProps} />);
       
-      // Confirm the action
       await waitFor(() => {
-        expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: /new/i }));
       });
       
-      const confirmButton = screen.getByTestId('confirmation-confirm');
-      fireEvent.click(confirmButton);
+      fireEvent.click(screen.getByText('Create Meeting'));
       
       await waitFor(() => {
-        expect(mockUpdateMeeting).toHaveBeenCalledWith('meeting-1', 'accept');
+        expect(mockCreateMeeting).toHaveBeenCalledWith({
+          senderId: 'user1',
+          receiverId: 'user2',
+          description: 'Test Meeting',
+          meetingTime: expect.any(Date)
+        });
       });
     });
 
-    it('should decline a meeting request', async () => {
-      render(<MeetingBox {...mockProps} />);
+    it('should handle meeting acceptance with confirmation', async () => {
+      const updatedMeeting = {
+        ...mockMeetings[0],
+        state: 'accepted'
+      };
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      const declineButton = screen.getByText('Decline');
-      fireEvent.click(declineButton);
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
-        expect(screen.getByText('Decline Meeting')).toBeInTheDocument();
-      });
+      mockUpdateMeeting.mockResolvedValue(updatedMeeting);
       
-      const confirmButton = screen.getByTestId('confirmation-confirm');
-      fireEvent.click(confirmButton);
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(mockUpdateMeeting).toHaveBeenCalledWith('meeting-1', 'reject');
+        expect(screen.getByTestId('meeting-list')).toBeInTheDocument();
       });
-    });
-
-    it('should cancel a meeting with reason', async () => {
-      render(<MeetingBox {...mockProps} />);
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      // Find cancel button (should be on upcoming meeting)
-      const cancelButton = screen.getByText('Cancel');
-      fireEvent.click(cancelButton);
+      fireEvent.click(screen.getByText('Accept'));
       
-      await waitFor(() => {
-        expect(screen.getByTestId('cancel-meeting-modal')).toBeInTheDocument();
-      });
+      // Should show confirmation dialog
+      expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
+      expect(screen.getByText('Accept Meeting')).toBeInTheDocument();
       
-      const submitCancelButton = screen.getByTestId('cancel-meeting-submit');
-      fireEvent.click(submitCancelButton);
+      fireEvent.click(screen.getByTestId('confirm-button'));
       
       await waitFor(() => {
-        expect(global.fetch).toHaveBeenCalledWith('/api/meeting/cancel', 
-          expect.objectContaining({
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: expect.stringContaining('meeting-2')
-          })
-        );
+        expect(mockUpdateMeeting).toHaveBeenCalledWith('meeting-1', 'accept');
       });
     });
-  });
 
-  describe('Meeting Navigation', () => {
-    it('should navigate to meeting room when join button is clicked', async () => {
-      render(<MeetingBox {...mockProps} />);
+    it('should handle meeting cancellation', async () => {
+      const cancelledMeeting = {
+        ...mockMeetings[1],
+        state: 'cancelled'
+      };
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      const joinButton = screen.getByText('Join Meeting');
-      expect(joinButton).toBeInTheDocument();
-
-      fireEvent.click(joinButton);
+      mockCancelMeetingWithReason.mockResolvedValue(cancelledMeeting);
       
-      expect(mockPush).toHaveBeenCalledWith('/meeting/meeting-2');
-    });
-  });
-
-  describe('Meeting Notes Functionality', () => {
-    it('should download meeting notes for completed meetings', async () => {
-      render(<MeetingBox {...mockProps} />);
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+        expect(screen.getByTestId('meeting-list')).toBeInTheDocument();
       });
-
-      // Click on past meetings to see download option
-      const pastMeetingsButton = screen.getByText('Past Meetings (1)');
-      fireEvent.click(pastMeetingsButton);
       
-      await waitFor(() => {
-        const downloadButton = screen.getByText('Download Notes');
-        fireEvent.click(downloadButton);
-      });
-
-      // Verify notes API was called
-      await waitFor(() => {
-        expect(global.fetch).toHaveBeenCalledWith(
-          expect.stringContaining('/api/meeting-notes?meetingId=meeting-3')
-        );
-      });
-    });
-  });
-
-  describe('View Toggles', () => {
-    it('should toggle past meetings view', async () => {
-      render(<MeetingBox {...mockProps} />);
+      fireEvent.click(screen.getByText('Cancel'));
       
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      const pastMeetingsButton = screen.getByText('Past Meetings (1)');
-      fireEvent.click(pastMeetingsButton);
+      expect(screen.getByTestId('cancel-meeting-modal')).toBeInTheDocument();
       
-      // Should show past meetings section
-      expect(screen.getByText('Past meeting')).toBeInTheDocument();
-    });
-
-    it('should toggle cancelled meetings view', async () => {
-      // Add a cancelled meeting to the mock data
-      const meetingsWithCancelled = [
-        ...mockMeetings,
-        {
-          _id: 'meeting-4',
-          senderId: '6873cc50ac4e1d6e1cddf33f',
-          receiverId: 'other-user-id',
-          description: 'Cancelled meeting',
-          meetingTime: '2025-07-18T10:00:00Z',
-          state: 'cancelled',
-          acceptStatus: false,
-          meetingLink: null
-        }
-      ];
-      mockFetchMeetings.mockResolvedValueOnce(meetingsWithCancelled);
-      
-      render(<MeetingBox {...mockProps} />);
+      fireEvent.click(screen.getByText('Cancel Meeting'));
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+        expect(mockCancelMeetingWithReason).toHaveBeenCalledWith('meeting-2', 'user1', 'Test cancellation reason');
       });
-
-      const cancelledMeetingsButton = screen.getByText('Cancelled Meetings (1)');
-      fireEvent.click(cancelledMeetingsButton);
-      
-      expect(screen.getByText('Cancelled meeting')).toBeInTheDocument();
     });
   });
 
   describe('Error Handling', () => {
-    it('should handle meeting creation errors', async () => {
-      mockCreateMeeting.mockRejectedValueOnce(new Error('Failed to create meeting'));
-      // Use meetings with no active count to allow modal opening
-      mockFetchMeetings.mockResolvedValueOnce([mockMeetings[2]]); // Only past meeting
+    it('should show error alert when meeting creation fails', async () => {
+      mockCreateMeeting.mockRejectedValue(new Error('Failed to create meeting'));
       
-      render(<MeetingBox {...mockProps} />);
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: /new/i }));
       });
-
-      const scheduleButton = screen.getByText('New');
       
-      act(() => {
-        fireEvent.click(scheduleButton);
-      });
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('create-meeting-modal')).toBeInTheDocument();
-      });
-
-      const createButton = screen.getByTestId('create-meeting-submit');
-      fireEvent.click(createButton);
+      fireEvent.click(screen.getByText('Create Meeting'));
       
       await waitFor(() => {
-        expect(screen.getByTestId('alert')).toBeInTheDocument();
+        expect(screen.getByTestId('alert-error')).toBeInTheDocument();
         expect(screen.getByText('Failed to create meeting')).toBeInTheDocument();
       });
     });
+  });
 
-    it('should handle meeting update errors', async () => {
-      mockUpdateMeeting.mockRejectedValueOnce(new Error('Update failed'));
-      
-      render(<MeetingBox {...mockProps} />);
-      
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
-      });
-
-      const acceptButton = screen.getByText('Accept');
-      fireEvent.click(acceptButton);
+  describe('Saved Notes', () => {
+    it('should toggle saved notes section', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
+        expect(screen.getByText(/saved meeting notes/i)).toBeInTheDocument();
       });
       
-      const confirmButton = screen.getByTestId('confirmation-confirm');
-      fireEvent.click(confirmButton);
+      const toggleButton = screen.getByText(/saved meeting notes/i);
+      fireEvent.click(toggleButton);
       
       await waitFor(() => {
-        expect(screen.getByTestId('alert')).toBeInTheDocument();
-        expect(screen.getByText('Failed to accept meeting')).toBeInTheDocument();
+        expect(screen.getByTestId('saved-notes-list')).toBeInTheDocument();
       });
     });
   });
 
-  describe('Component Cleanup', () => {
-    it('should call onMeetingUpdate when meetings change', async () => {
-      render(<MeetingBox {...mockProps} />);
+  describe('Callback Functions', () => {
+    it('should call onMeetingUpdate when meetings are loaded', async () => {
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(mockProps.onMeetingUpdate).toHaveBeenCalled();
+        expect(defaultProps.onMeetingUpdate).toHaveBeenCalled();
       });
     });
   });
 
-  describe('Alert and Confirmation Management', () => {
-    it('should close alert when close button is clicked', async () => {
-      mockCreateMeeting.mockRejectedValueOnce(new Error('Test error'));
-      // Use meetings with no active count to allow modal opening
-      mockFetchMeetings.mockResolvedValueOnce([mockMeetings[2]]); // Only past meeting
-      
-      render(<MeetingBox {...mockProps} />);
-      
-      await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+  describe('Edge Cases', () => {
+    it('should handle empty meetings list', async () => {
+      mockFetchMeetings.mockResolvedValue([]);
+      mockFilterMeetingsByType.mockReturnValue({
+        pendingRequests: [],
+        upcomingMeetings: [],
+        pastMeetings: [],
+        cancelledMeetings: []
       });
-
-      // Trigger an error to show alert
-      const scheduleButton = screen.getByText('New');
       
-      act(() => {
-        fireEvent.click(scheduleButton);
-      });
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.getByTestId('create-meeting-modal')).toBeInTheDocument();
+        expect(screen.getByTestId('meeting-list')).toBeInTheDocument();
+        expect(screen.getByTestId('pending-requests-count')).toHaveTextContent('0');
+        expect(screen.getByTestId('upcoming-meetings-count')).toHaveTextContent('0');
       });
+    });
 
-      const createButton = screen.getByTestId('create-meeting-submit');
-      fireEvent.click(createButton);
+    it('should handle meeting limit restriction', async () => {
+      mockCheckMeetingLimit.mockReturnValue(2); // At limit
       
-      await waitFor(() => {
-        expect(screen.getByTestId('alert')).toBeInTheDocument();
-      });
-
-      const closeAlertButton = screen.getByTestId('alert-close');
-      fireEvent.click(closeAlertButton);
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByTestId('alert')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: /new/i }));
       });
-    });
-
-    it('should close confirmation dialog when cancel is clicked', async () => {
-      render(<MeetingBox {...mockProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByText('Loading meetings...')).not.toBeInTheDocument();
+        expect(screen.getByTestId('alert-warning')).toBeInTheDocument();
+        // The exact text from the component
+        expect(screen.getByText(/maximum of 2 active meetings/i)).toBeInTheDocument();
       });
+    });
 
-      const acceptButton = screen.getByText('Accept');
-      fireEvent.click(acceptButton);
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
+    it('should handle cancellation when meeting cannot be cancelled', async () => {
+      mockCanCancelMeeting.mockReturnValue({ 
+        canCancel: false, 
+        reason: 'Meeting is too close to start time' 
       });
       
-      const cancelButton = screen.getByTestId('confirmation-cancel');
-      fireEvent.click(cancelButton);
+      render(<MeetingBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.queryByTestId('confirmation-dialog')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByText('Cancel'));
       });
+      
+      expect(screen.getByTestId('alert-warning')).toBeInTheDocument();
+      expect(screen.getByText('Meeting is too close to start time')).toBeInTheDocument();
     });
   });
-});
+});
\ No newline at end of file
diff --git a/__tests__/components/SessionBox.test.tsx b/__tests__/components/SessionBox.test.tsx
index b0d6880a..6e978068 100644
--- a/__tests__/components/SessionBox.test.tsx
+++ b/__tests__/components/SessionBox.test.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SessionBox from '@/components/messageSystem/SessionBox';
+import { useSessionActions } from '@/hooks/useSessionActions';
 
 // Mock Next.js router
 const mockPush = jest.fn();
@@ -87,6 +88,11 @@ jest.mock('@/utils/avatarUtils', () => ({
   processAvatarUrl: jest.fn((url) => url || '/default-avatar.png'),
 }));
 
+// Mock the useSessionActions hook
+jest.mock('@/hooks/useSessionActions', () => ({
+  useSessionActions: jest.fn(),
+}));
+
 // Mock data
 const mockUser = {
   _id: '6873cc50ac4e1d6e1cddf33f',
@@ -110,8 +116,8 @@ const mockSession = {
   _id: 'session-id-1',
   user1Id: mockUser,
   user2Id: mockOtherUser,
-  skill1Id: { _id: 'skill1', name: 'React' },
-  skill2Id: { _id: 'skill2', name: 'Node.js' },
+  skill1Id: { _id: 'skill1', skillName: 'React' },
+  skill2Id: { _id: 'skill2', skillName: 'Node.js' },
   descriptionOfService1: 'I can teach React basics',
   descriptionOfService2: 'I want to learn Node.js',
   startDate: '2025-01-15',
@@ -197,9 +203,33 @@ describe('SessionBox Component', () => {
     onSessionUpdate: jest.fn()
   };
 
+  // Default mock implementation for useSessionActions
+  const defaultMockSessionActions = {
+    sessions: [],
+    counterOffers: {},
+    loading: false,
+    processingSession: null,
+    pendingSessionCount: 0,
+    activeSessionCount: 0,
+    fetchSessions: jest.fn(),
+    handleAcceptReject: jest.fn(),
+    handleDeleteSession: jest.fn(),
+    handleCounterOfferResponse: jest.fn(),
+    handleRequestCompletion: jest.fn(),
+    handleCompletionResponse: jest.fn(),
+    handleRatingSubmit: jest.fn(),
+    setLoading: jest.fn(),
+    setSessions: jest.fn(),
+    setCounterOffers: jest.fn(),
+    setPendingSessionCount: jest.fn(),
+    setActiveSessionCount: jest.fn()
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
     global.fetch = createMockFetch({});
+    // Reset to default mock implementation
+    (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue(defaultMockSessionActions);
   });
 
   afterEach(() => {
@@ -210,6 +240,12 @@ describe('SessionBox Component', () => {
     it('should show New Session button', async () => {
       global.fetch = createMockFetch({ sessions: [] });
       
+      // Mock the hook to return empty sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: []
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -220,6 +256,12 @@ describe('SessionBox Component', () => {
     it('should show empty state when no sessions exist', async () => {
       global.fetch = createMockFetch({ sessions: [] });
       
+      // Mock the hook to return empty sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: []
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -236,11 +278,19 @@ describe('SessionBox Component', () => {
         counterOffers: []
       });
       
+      // Mock the hook to return the session
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: [mockSession],
+        pendingSessionCount: 1,
+        activeSessionCount: 1
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.getByText('I can teach React basics')).toBeInTheDocument();
-        expect(screen.getByText('I want to learn Node.js')).toBeInTheDocument();
+        expect(screen.getByText('React')).toBeInTheDocument();
+        expect(screen.getByText('Node.js')).toBeInTheDocument();
         expect(screen.getByText('pending')).toBeInTheDocument();
       });
     });
@@ -257,6 +307,14 @@ describe('SessionBox Component', () => {
         counterOffers: []
       });
       
+      // Mock the hook to return multiple sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: multiplePendingSessions,
+        pendingSessionCount: 3,
+        activeSessionCount: 3
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -269,6 +327,12 @@ describe('SessionBox Component', () => {
     it('should open create session modal when New Session button is clicked', async () => {
       global.fetch = createMockFetch({ sessions: [] });
       
+      // Mock the hook to return empty sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: []
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -291,6 +355,14 @@ describe('SessionBox Component', () => {
         counterOffers: []
       });
       
+      // Mock the hook to return 3 active sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: multiplePendingSessions,
+        pendingSessionCount: 3,
+        activeSessionCount: 3
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -322,7 +394,7 @@ describe('SessionBox Component', () => {
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
-        expect(screen.getByText('Failed to load user information')).toBeInTheDocument();
+        expect(screen.getByText('Failed to load user')).toBeInTheDocument();
       });
     });
 
@@ -351,6 +423,12 @@ describe('SessionBox Component', () => {
     it('should close create session modal when close button is clicked', async () => {
       global.fetch = createMockFetch({ sessions: [] });
       
+      // Mock the hook to return empty sessions
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: []
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
@@ -374,6 +452,14 @@ describe('SessionBox Component', () => {
         counterOffers: []
       });
       
+      // Mock the hook to return the session
+      (useSessionActions as jest.MockedFunction<typeof useSessionActions>).mockReturnValue({
+        ...defaultMockSessionActions,
+        sessions: [mockSession],
+        pendingSessionCount: 1,
+        activeSessionCount: 1
+      });
+      
       render(<SessionBox {...defaultProps} />);
       
       await waitFor(() => {
diff --git a/__tests__/pages/SessionPage.test..tsx b/__tests__/pages/SessionPage.test..tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/__tests__/pages/SessionWorkspace.test.tsx b/__tests__/pages/SessionWorkspace.test.tsx
new file mode 100644
index 00000000..86cdfa3d
--- /dev/null
+++ b/__tests__/pages/SessionWorkspace.test.tsx
@@ -0,0 +1,603 @@
+/**
+ * SessionWorkspace Page Component Tests
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useParams, useRouter } from 'next/navigation';
+import SessionWorkspace from '@/app/session/[sessionId]/page';
+
+// Mock Next.js navigation
+const mockPush = jest.fn();
+const mockBack = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    back: mockBack,
+    replace: jest.fn(),
+    prefetch: jest.fn(),
+    forward: jest.fn(),
+    refresh: jest.fn(),
+  }),
+  useParams: jest.fn(),
+}));
+
+// Mock AuthContext
+const mockUser = {
+  _id: 'user1',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john.doe@example.com',
+  title: 'Developer'
+};
+
+jest.mock('@/lib/context/AuthContext', () => ({
+  useAuth: () => ({
+    user: mockUser,
+    loading: false,
+    logout: jest.fn(),
+  }),
+}));
+
+// Mock tab components
+jest.mock('@/components/sessionTabs/OverviewTab', () => {
+  return function MockOverviewTab({ 
+    session, 
+    setActiveTab, 
+    onSessionUpdate, 
+    showAlert 
+  }: any) {
+    return (
+      <div data-testid="overview-tab">
+        <div>Overview Tab</div>
+        <div data-testid="session-status">{session?.status}</div>
+        <button onClick={() => setActiveTab('submit-work')} data-testid="go-to-submit">
+          Go to Submit Work
+        </button>
+        <button onClick={() => showAlert('success', 'Test alert from overview')}>
+          Test Alert
+        </button>
+        <button onClick={onSessionUpdate}>Refresh Session</button>
+      </div>
+    );
+  };
+});
+
+jest.mock('@/components/sessionTabs/SubmitWorkTab', () => {
+  return function MockSubmitWorkTab({ session, showAlert }: any) {
+    return (
+      <div data-testid="submit-work-tab">
+        <div>Submit Work Tab</div>
+        <button onClick={() => showAlert('success', 'Work submitted successfully')}>
+          Submit Work
+        </button>
+      </div>
+    );
+  };
+});
+
+jest.mock('@/components/sessionTabs/ViewWorksTab', () => {
+  return function MockViewWorksTab({ onWorkUpdate, showAlert }: any) {
+    return (
+      <div data-testid="view-works-tab">
+        <div>View Works Tab</div>
+        <button onClick={onWorkUpdate}>Refresh Works</button>
+        <button onClick={() => showAlert('info', 'Work reviewed')}>
+          Review Work
+        </button>
+      </div>
+    );
+  };
+});
+
+jest.mock('@/components/sessionTabs/ProgressTab', () => {
+  return function MockProgressTab({ showAlert }: any) {
+    return (
+      <div data-testid="progress-tab">
+        <div>Progress Tab</div>
+        <button onClick={() => showAlert('success', 'Progress updated')}>
+          Update Progress
+        </button>
+      </div>
+    );
+  };
+});
+
+jest.mock('@/components/sessionTabs/ReportTab', () => {
+  return function MockReportTab({ showAlert }: any) {
+    return (
+      <div data-testid="report-tab">
+        <div>Report Tab</div>
+        <button onClick={() => showAlert('warning', 'Report submitted')}>
+          Submit Report
+        </button>
+      </div>
+    );
+  };
+});
+
+// Mock UI Components
+jest.mock('@/components/ui/Alert', () => {
+  return function MockAlert({ isOpen, type, message, title, onClose }: any) {
+    return isOpen ? (
+      <div data-testid={`alert-${type}`}>
+        {title && <div data-testid="alert-title">{title}</div>}
+        <div data-testid="alert-message">{message}</div>
+        <button onClick={onClose}>Close Alert</button>
+      </div>
+    ) : null;
+  };
+});
+
+jest.mock('@/components/ui/ConfirmationDialog', () => {
+  return function MockConfirmationDialog({ 
+    isOpen, 
+    title, 
+    message, 
+    onConfirm, 
+    onClose,
+    confirmText 
+  }: any) {
+    return isOpen ? (
+      <div data-testid="confirmation-dialog">
+        <div data-testid="confirmation-title">{title}</div>
+        <div data-testid="confirmation-message">{message}</div>
+        <button onClick={onConfirm} data-testid="confirm-button">
+          {confirmText || 'Confirm'}
+        </button>
+        <button onClick={onClose} data-testid="cancel-button">Cancel</button>
+      </div>
+    ) : null;
+  };
+});
+
+// Mock data
+const mockActiveSession = {
+  _id: 'session-123',
+  status: 'active',
+  startDate: '2025-07-15T10:00:00.000Z',
+  expectedEndDate: '2025-07-25T10:00:00.000Z',
+  user1Id: {
+    _id: 'user1',
+    firstName: 'John',
+    lastName: 'Doe',
+    name: 'John Doe'
+  },
+  user2Id: {
+    _id: 'user2',
+    firstName: 'Jane',
+    lastName: 'Smith',
+    name: 'Jane Smith'
+  },
+  skill1Id: {
+    _id: 'skill1',
+    name: 'Frontend Development'
+  },
+  skill2Id: {
+    _id: 'skill2',
+    name: 'Backend Development'
+  },
+  descriptionOfService1: 'I will help with React and TypeScript development',
+  descriptionOfService2: 'I will help with Node.js and database design'
+};
+
+const mockCompletedSession = {
+  ...mockActiveSession,
+  status: 'completed'
+};
+
+const mockCancelledSession = {
+  ...mockActiveSession,
+  status: 'canceled'
+};
+
+const mockWorks = [
+  {
+    _id: 'work-1',
+    submitUser: { _id: 'user1', firstName: 'John', lastName: 'Doe' },
+    receiveUser: { _id: 'user2', firstName: 'Jane', lastName: 'Smith' },
+    title: 'Frontend Component',
+    description: 'React component for user dashboard',
+    acceptanceStatus: 'accepted',
+    submittedAt: '2025-07-16T10:00:00.000Z'
+  },
+  {
+    _id: 'work-2',
+    submitUser: { _id: 'user2', firstName: 'Jane', lastName: 'Smith' },
+    receiveUser: { _id: 'user1', firstName: 'John', lastName: 'Doe' },
+    title: 'API Endpoint',
+    description: 'User authentication API',
+    acceptanceStatus: 'pending',
+    submittedAt: '2025-07-17T10:00:00.000Z'
+  }
+];
+
+const mockProgress = [
+  {
+    _id: 'progress-1',
+    userId: 'user1',
+    status: 'in_progress',
+    completionPercentage: 75,
+    notes: 'Working on the final components',
+    dueDate: '2025-07-22T10:00:00.000Z'
+  },
+  {
+    _id: 'progress-2',
+    userId: 'user2',
+    status: 'in_progress',
+    completionPercentage: 60,
+    notes: 'Database schema complete',
+    dueDate: '2025-07-23T10:00:00.000Z'
+  }
+];
+
+const mockOtherUserDetails = {
+  _id: 'user2',
+  firstName: 'Jane',
+  lastName: 'Smith',
+  email: 'jane.smith@example.com',
+  title: 'Backend Developer'
+};
+
+// Global fetch mock
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
+describe('SessionWorkspace Page', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    // Mock useParams to return sessionId
+    (useParams as jest.Mock).mockReturnValue({ sessionId: 'session-123' });
+    
+    // Setup default fetch responses
+    mockFetch.mockImplementation((url: string) => {
+      if (url.includes('/api/session/session-123')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({
+            success: true,
+            session: mockActiveSession
+          })
+        });
+      }
+      
+      if (url.includes('/api/work/session/session-123')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({
+            success: true,
+            works: mockWorks
+          })
+        });
+      }
+      
+      if (url.includes('/api/session-progress/session-123')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({
+            success: true,
+            progress: mockProgress
+          })
+        });
+      }
+      
+      if (url.includes('/api/users/profile?id=user2')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({
+            success: true,
+            user: mockOtherUserDetails
+          })
+        });
+      }
+      
+      if (url.includes('/api/notification')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ success: true })
+        });
+      }
+      
+      // Default fallback
+      return Promise.resolve({
+        ok: false,
+        json: () => Promise.resolve({ success: false, message: 'Not found' })
+      });
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render session not found when session is null', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/session/session-123')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              success: false,
+              session: null
+            })
+          });
+        }
+        return Promise.reject(new Error('Unhandled fetch'));
+      });
+      
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Session Not Found')).toBeInTheDocument();
+      });
+      
+      expect(screen.getByText('Go Back')).toBeInTheDocument();
+    });
+  });
+
+
+
+  describe('Tab Navigation', () => {
+    beforeEach(async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('overview-tab')).toBeInTheDocument();
+      });
+    });
+
+    it('should render all tab buttons', () => {
+      expect(screen.getAllByText('Overview')).toHaveLength(2); // Desktop and mobile versions
+      expect(screen.getAllByText('Submit Work')).toHaveLength(2);
+      expect(screen.getAllByText('View Works')).toHaveLength(2);
+      expect(screen.getAllByText('Progress')).toHaveLength(2);
+      expect(screen.getAllByText('Report Issue')).toHaveLength(2);
+    });
+
+    it('should switch to submit work tab', async () => {
+      // Use getByRole to target the button specifically
+      const submitWorkButtons = screen.getAllByRole('button');
+      const submitWorkTab = submitWorkButtons.find(button => 
+        button.textContent?.includes('Submit Work')
+      );
+      
+      if (submitWorkTab) {
+        fireEvent.click(submitWorkTab);
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('submit-work-tab')).toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should switch to view works tab', async () => {
+      const viewWorksButtons = screen.getAllByRole('button');
+      const viewWorksTab = viewWorksButtons.find(button => 
+        button.textContent?.includes('View Works')
+      );
+      
+      if (viewWorksTab) {
+        fireEvent.click(viewWorksTab);
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('view-works-tab')).toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should switch to progress tab', async () => {
+      const progressButtons = screen.getAllByRole('button');
+      const progressTab = progressButtons.find(button => 
+        button.textContent?.includes('Progress') && !button.textContent?.includes('Update')
+      );
+      
+      if (progressTab) {
+        fireEvent.click(progressTab);
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('progress-tab')).toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should switch to report tab', async () => {
+      const reportButtons = screen.getAllByRole('button');
+      const reportTab = reportButtons.find(button => 
+        button.textContent?.includes('Report Issue')
+      );
+      
+      if (reportTab) {
+        fireEvent.click(reportTab);
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('report-tab')).toBeInTheDocument();
+        });
+      }
+    });
+  });
+
+  describe('Data Fetching', () => {
+    it('should fetch session data on mount', async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/session/session-123');
+      });
+    });
+
+    it('should fetch works and progress when user is available', async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/work/session/session-123');
+        expect(mockFetch).toHaveBeenCalledWith('/api/session-progress/session-123');
+      });
+    });
+
+    it('should fetch other user details when session is loaded', async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/users/profile?id=user2');
+      });
+    });
+
+    it('should handle session refresh', async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('overview-tab')).toBeInTheDocument();
+      });
+      
+      const refreshButton = screen.getByText('Refresh Session');
+      fireEvent.click(refreshButton);
+      
+      // Should call fetch again for session data
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/session/session-123');
+      });
+    });
+  });
+
+  describe('Alert System', () => {
+    beforeEach(async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('overview-tab')).toBeInTheDocument();
+      });
+    });
+
+    it('should show alert from tab component', async () => {
+      const alertButton = screen.getByText('Test Alert');
+      fireEvent.click(alertButton);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('alert-success')).toBeInTheDocument();
+        expect(screen.getByText('Test alert from overview')).toBeInTheDocument();
+      });
+    });
+
+    it('should close alert when close button is clicked', async () => {
+      const alertButton = screen.getByText('Test Alert');
+      fireEvent.click(alertButton);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('alert-success')).toBeInTheDocument();
+      });
+      
+      const closeButton = screen.getByText('Close Alert');
+      fireEvent.click(closeButton);
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('alert-success')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle session fetch error gracefully', async () => {
+      mockFetch.mockRejectedValue(new Error('Network error'));
+      
+      render(<SessionWorkspace />);
+      
+      // Should still render but may show loading state or handle error
+      await waitFor(() => {
+        // Component should not crash - check if main content exists
+        expect(document.body).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('should handle works fetch error gracefully', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/work/session/session-123')) {
+          return Promise.reject(new Error('Works fetch failed'));
+        }
+        if (url.includes('/api/session/session-123')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              success: true,
+              session: mockActiveSession
+            })
+          });
+        }
+        return mockFetch(url);
+      });
+      
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Session with Jane Smith')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle progress fetch error gracefully', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/session-progress/session-123')) {
+          return Promise.reject(new Error('Progress fetch failed'));
+        }
+        if (url.includes('/api/session/session-123')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              success: true,
+              session: mockActiveSession
+            })
+          });
+        }
+        return mockFetch(url);
+      });
+      
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Session with Jane Smith')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Responsive Design', () => {
+    beforeEach(async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('overview-tab')).toBeInTheDocument();
+      });
+    });
+
+    it('should render mobile-friendly header', () => {
+      expect(screen.getByText('Session with Jane Smith')).toBeInTheDocument();
+      expect(screen.getByText('Started:')).toBeInTheDocument();
+    });
+
+    it('should have scrollable tab navigation', () => {
+      // Get the tab navigation container specifically
+      const allNavs = screen.getAllByRole('navigation');
+      const tabNavigation = allNavs.find(nav => 
+        nav.className.includes('mb-4')
+      );
+      expect(tabNavigation).toBeInTheDocument();
+    });
+  });
+
+
+
+  describe('User Display Names', () => {
+    beforeEach(async () => {
+      render(<SessionWorkspace />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('overview-tab')).toBeInTheDocument();
+      });
+    });
+
+    it('should display correct other user name in header', () => {
+      expect(screen.getByText('Session with Jane Smith')).toBeInTheDocument();
+    });
+
+    it('should display session start date', () => {
+      expect(screen.getByText('Started:')).toBeInTheDocument();
+      expect(screen.getByText('Jul 15, 2025')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/app/meeting/[id]/page.tsx b/src/app/meeting/[id]/page.tsx
index fd7200e0..8ac63f49 100644
--- a/src/app/meeting/[id]/page.tsx
+++ b/src/app/meeting/[id]/page.tsx
@@ -106,10 +106,10 @@ export default function MeetingPage() {
 
   if (authLoading || loading) {
     return (
-      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center">
+      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center p-4">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--primary)] mx-auto mb-4"></div>
-          <p className="text-lg text-[var(--textcolor)] opacity-60">Loading meeting...</p>
+          <div className="animate-spin rounded-full h-10 w-10 md:h-12 md:w-12 border-b-2 border-[var(--primary)] mx-auto mb-3 md:mb-4"></div>
+          <p className="text-base md:text-lg text-[var(--textcolor)] opacity-60">Loading meeting...</p>
         </div>
       </div>
     );
@@ -117,16 +117,16 @@ export default function MeetingPage() {
 
   if (error || !meeting || !isAuthorized) {
     return (
-      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center">
-        <div className="bg-[var(--bgcolor)] p-8 rounded-lg shadow-lg max-w-md w-full mx-4">
+      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center p-4">
+        <div className="bg-[var(--bgcolor)] p-4 md:p-8 rounded-lg shadow-lg max-w-md w-full">
           <div className="text-center">
-            <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-            <h2 className="text-xl font-bold text-[var(--textcolor)] mb-2">Meeting Not Available</h2>
-            <p className="text-[var(--textcolor)] opacity-60 mb-6">
+            <AlertCircle className="w-10 h-10 md:w-12 md:h-12 text-red-500 mx-auto mb-3 md:mb-4" />
+            <h2 className="text-lg md:text-xl font-bold text-[var(--textcolor)] mb-2">Meeting Not Available</h2>
+            <p className="text-sm md:text-base text-[var(--textcolor)] opacity-60 mb-4 md:mb-6">
               {error || 'You are not authorized to access this meeting.'}
             </p>
-            <Button onClick={() => router.push('/dashboard')} className="w-full bg-[var(--primary)] hover:bg-[var(--primary)]/90">
-              <ArrowLeft className="w-4 h-4 mr-2" />
+            <Button onClick={() => router.push('/dashboard')} className="w-full bg-[var(--primary)] hover:bg-[var(--primary)]/90 text-sm md:text-base">
+              <ArrowLeft className="w-3 h-3 md:w-4 md:h-4 mr-2" />
               Return to Dashboard
             </Button>
           </div>
@@ -143,28 +143,28 @@ export default function MeetingPage() {
     const isTooEarly = timeUntilMeeting > 30 * 60 * 1000; // More than 30 minutes before
 
     return (
-      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center">
-        <div className="bg-[var(--bgcolor)] p-8 rounded-lg shadow-lg max-w-md w-full mx-4">
+      <div className="min-h-screen bg-[var(--grayfill)] flex items-center justify-center p-4">
+        <div className="bg-[var(--bgcolor)] p-4 md:p-8 rounded-lg shadow-lg max-w-md w-full">
           <div className="text-center">
-            <AlertCircle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
-            <h2 className="text-xl font-bold text-[var(--textcolor)] mb-2">Meeting Not Available</h2>
+            <AlertCircle className="w-10 h-10 md:w-12 md:h-12 text-yellow-500 mx-auto mb-3 md:mb-4" />
+            <h2 className="text-lg md:text-xl font-bold text-[var(--textcolor)] mb-2">Meeting Not Available</h2>
             
             {meeting.state !== 'accepted' && (
-              <p className="text-[var(--textcolor)] opacity-60 mb-6">
+              <p className="text-sm md:text-base text-[var(--textcolor)] opacity-60 mb-4 md:mb-6">
                 This meeting has not been accepted yet.
               </p>
             )}
             
             {meeting.state === 'accepted' && !meeting.meetingLink && (
-              <p className="text-[var(--textcolor)] opacity-60 mb-6">
+              <p className="text-sm md:text-base text-[var(--textcolor)] opacity-60 mb-4 md:mb-6">
                 Meeting link is not available yet.
               </p>
             )}
             
             {meeting.state === 'accepted' && meeting.meetingLink && isTooEarly && (
-              <div className="text-[var(--textcolor)] opacity-60 mb-6">
-                <p>Meeting starts in:</p>
-                <p className="text-lg font-semibold text-[var(--primary)]">
+              <div className="text-[var(--textcolor)] opacity-60 mb-4 md:mb-6">
+                <p className="text-sm md:text-base">Meeting starts in:</p>
+                <p className="text-lg md:text-xl font-semibold text-[var(--primary)]">
                   {(() => {
                     const minutesUntil = Math.floor(timeUntilMeeting / (1000 * 60));
                     if (minutesUntil >= 60) {
@@ -174,34 +174,34 @@ export default function MeetingPage() {
                     return `${minutesUntil} minutes`;
                   })()}
                 </p>
-                <p className="text-sm mt-2">
+                <p className="text-xs md:text-sm mt-2">
                   You can join 30 minutes before the scheduled time.
                 </p>
               </div>
             )}
             
             {meeting.state === 'accepted' && meeting.meetingLink && isPastMeeting && (
-              <p className="text-[var(--textcolor)] opacity-60 mb-6">
+              <p className="text-sm md:text-base text-[var(--textcolor)] opacity-60 mb-4 md:mb-6">
                 This meeting has ended.
               </p>
             )}
             
             <div className="space-y-3">
-              <div className="bg-[var(--secondary)] p-4 rounded-lg">
-                <h3 className="font-semibold text-[var(--textcolor)] mb-2">Meeting Details</h3>
-                <p className="text-sm text-[var(--textcolor)] opacity-75">
+              <div className="bg-[var(--secondary)] p-3 md:p-4 rounded-lg text-left">
+                <h3 className="text-sm md:text-base font-semibold text-[var(--textcolor)] mb-2">Meeting Details</h3>
+                <p className="text-xs md:text-sm text-[var(--textcolor)] opacity-75 mb-1">
                   <span className="font-medium">With:</span> {otherUser?.firstName} {otherUser?.lastName}
                 </p>
-                <p className="text-sm text-[var(--textcolor)] opacity-75">
+                <p className="text-xs md:text-sm text-[var(--textcolor)] opacity-75 mb-1">
                   <span className="font-medium">Scheduled:</span> {meetingTime.toLocaleString()}
                 </p>
-                <p className="text-sm text-[var(--textcolor)] opacity-75">
+                <p className="text-xs md:text-sm text-[var(--textcolor)] opacity-75">
                   <span className="font-medium">Description:</span> {meeting.description}
                 </p>
               </div>
               
-              <Button onClick={() => router.push('/dashboard')} className="w-full bg-[var(--primary)] hover:bg-[var(--primary)]/90">
-                <ArrowLeft className="w-4 h-4 mr-2" />
+              <Button onClick={() => router.push('/dashboard')} className="w-full bg-[var(--primary)] hover:bg-[var(--primary)]/90 text-sm md:text-base">
+                <ArrowLeft className="w-3 h-3 md:w-4 md:h-4 mr-2" />
                 Return to Dashboard
               </Button>
             </div>
diff --git a/src/app/user/notification/page.tsx b/src/app/user/notification/page.tsx
index b8328a8e..694c93f7 100644
--- a/src/app/user/notification/page.tsx
+++ b/src/app/user/notification/page.tsx
@@ -215,7 +215,7 @@ const NotificationPage = () => {
       <Navbar />
       <NotificationAlert />
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-        <div className="container mx-auto max-w-4xl py-8 px-4">
+        <div className="container mx-auto max-w-4xl py-4 sm:py-8 px-4">
           {user && (
             <div className="mb-4 text-gray-600 dark:text-gray-400 font-body">
               <p>Hi {user.firstName}, here are your notifications:</p>
@@ -223,23 +223,23 @@ const NotificationPage = () => {
           )}
         {/*UnReaded Notifications Badge*/}
         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-4">
-          <div className="flex items-center">
-            <Bell className="h-6 w-6 text-[#006699] mr-3" />
-            <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200 font-body">Notifications</h1>
+          <div className="flex items-center flex-wrap gap-2">
+            <Bell className="h-6 w-6 text-[#006699] mr-1 flex-shrink-0" />
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 font-body">Notifications</h1>
             {unreadNotifications.length > 0 && (
-              <span className="ml-3 bg-[#006699] text-white text-xs font-medium px-2.5 py-0.5 rounded-full font-body">
+              <span className="bg-[#006699] text-white text-xs font-medium px-2.5 py-0.5 rounded-full font-body whitespace-nowrap">
                 {unreadNotifications.length} unread
               </span>
             )}
           </div>
 
-          <div className="flex items-center gap-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto">
             {notifications.length > 0 && (
-              <div className="relative inline-block text-left font-body">
+              <div className="relative inline-block text-left font-body w-full sm:w-auto">
                 <select
                   value={sortOrder}
                   onChange={(e) => setSortOrder(e.target.value as 'newest' | 'oldest')}
-                  className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-sm font-medium border border-gray-300 dark:border-gray-600 rounded-md px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-[#006699] focus:border-[#006699] appearance-none pr-8 bg-white dark:bg-gray-800"
+                  className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-sm font-medium border border-gray-300 dark:border-gray-600 rounded-md px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-[#006699] focus:border-[#006699] appearance-none pr-8 bg-white dark:bg-gray-800 w-full sm:w-auto min-w-[140px]"
                   aria-label="Sort notifications"
                 >
                   <option value="newest">Newest First</option>
@@ -251,10 +251,11 @@ const NotificationPage = () => {
             {unreadNotifications.length > 0 && (
               <button
                 onClick={handleMarkAllAsRead}
-                className="flex items-center text-[#006699] hover:text-[#004466] text-sm font-medium font-body"
+                className="flex items-center text-[#006699] hover:text-[#004466] text-sm font-medium font-body whitespace-nowrap"
               >
-                <CheckCheck className="w-4 h-4 mr-1" />
-                Mark all as read
+                <CheckCheck className="w-4 h-4 mr-1 flex-shrink-0" />
+                <span className="hidden sm:inline">Mark all as read</span>
+                <span className="sm:hidden">Mark all read</span>
               </button>
             )}
           </div>
diff --git a/src/components/meetingSystem/DailyMeeting.tsx b/src/components/meetingSystem/DailyMeeting.tsx
index c74ab422..7cecc9eb 100644
--- a/src/components/meetingSystem/DailyMeeting.tsx
+++ b/src/components/meetingSystem/DailyMeeting.tsx
@@ -26,11 +26,9 @@ import {
   Users,
   Maximize,
   Minimize,
-  StickyNote,
-  HelpCircle
+  StickyNote
 } from 'lucide-react';
 import { MeetingNotesSidebar } from './MeetingNotesSidebar';
-import { MediaDeviceTips } from './MediaDeviceTips';
 
 interface DailyMeetingProps {
   roomUrl: string;
@@ -59,8 +57,22 @@ const videoStyles = `
   }
   
   .daily-camera-box {
-    min-width: 128px;
-    min-height: 96px;
+    min-width: 100px;
+    min-height: 75px;
+    aspect-ratio: 4/3;
+  }
+  
+  @media (min-width: 768px) {
+    .daily-camera-box {
+      min-width: 128px;
+      min-height: 96px;
+    }
+  }
+  
+  @media (max-width: 767px) {
+    .daily-camera-box {
+      flex-shrink: 0;
+    }
   }
 `;
 
@@ -96,7 +108,6 @@ function DailyMeetingInner({
   // UI State
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showNotes, setShowNotes] = useState(false);
-  const [showTips, setShowTips] = useState(false);
   const videoContainerRef = useRef<HTMLDivElement>(null);
 
   // Meeting control functions with enhanced error handling
@@ -224,9 +235,9 @@ function DailyMeetingInner({
     const screenShareParticipant = screens[0];
     
     return (
-      <div className="flex h-full gap-4">
+      <div className="flex flex-col lg:flex-row h-full gap-2 md:gap-4">
         {/* Main screen share area */}
-        <div className="flex-1 relative bg-gray-900 rounded-lg overflow-hidden">
+        <div className="flex-1 relative bg-gray-900 rounded-lg overflow-hidden min-h-[200px]">
           <div className="daily-screen-share">
             <DailyVideo 
               sessionId={screenShareParticipant.session_id}
@@ -240,7 +251,7 @@ function DailyMeetingInner({
         </div>
         
         {/* Camera videos sidebar */}
-        <div className="w-40 flex flex-col gap-2 overflow-y-auto">
+        <div className="w-full lg:w-32 xl:w-40 flex flex-row lg:flex-col gap-2 overflow-x-auto lg:overflow-y-auto lg:overflow-x-visible">
           {participantIds.map(id => (
             <CameraTile key={id} participantId={id} />
           ))}
@@ -277,37 +288,30 @@ function DailyMeetingInner({
       <DailyAudio />
       
       {/* Header */}
-      <div className="bg-white shadow-sm border-b px-4 py-3 flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <div>
-            <h1 className="text-lg font-semibold">
+      <div className="bg-white shadow-sm border-b px-2 md:px-4 py-2 md:py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-1 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-base md:text-lg font-semibold truncate">
               {otherUserName ? `Meeting with ${otherUserName}` : 'Meeting Room'}
             </h1>
             {meetingDescription && (
-              <p className="text-sm text-gray-500">{meetingDescription}</p>
+              <p className="text-xs md:text-sm text-gray-500 truncate">{meetingDescription}</p>
             )}
           </div>
-          <div className="flex items-center space-x-2 text-sm text-gray-600">
-            <Users className="w-4 h-4" />
+          <div className="flex items-center space-x-2 text-xs md:text-sm text-gray-600 shrink-0">
+            <Users className="w-3 h-3 md:w-4 md:h-4" />
             <span>{participantIds.length} participant{participantIds.length !== 1 ? 's' : ''}</span>
           </div>
         </div>
         
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowTips(true)}
-            title="Camera & Microphone Tips"
-          >
-            <HelpCircle className="w-4 h-4" />
-          </Button>
+        <div className="flex items-center space-x-2 w-full sm:w-auto justify-end">
           <Button
             variant="outline"
             size="sm"
             onClick={toggleFullscreen}
+            className="text-xs px-2 py-1"
           >
-            {isFullscreen ? <Minimize className="w-4 h-4" /> : <Maximize className="w-4 h-4" />}
+            {isFullscreen ? <Minimize className="w-3 h-3 md:w-4 md:h-4" /> : <Maximize className="w-3 h-3 md:w-4 md:h-4" />}
           </Button>
         </div>
       </div>
@@ -317,17 +321,17 @@ function DailyMeetingInner({
         {/* Video Area */}
         <div 
           ref={videoContainerRef}
-          className="w-full p-4 overflow-hidden"
+          className="w-full p-2 md:p-4 overflow-hidden"
         >
           {screens.length > 0 ? (
             renderScreenShare()
           ) : (
             <div className={`
-              grid gap-4 h-full
+              grid gap-2 md:gap-4 h-full
               ${participantIds.length === 1 ? 'grid-cols-1' : 
-                participantIds.length === 2 ? 'grid-cols-2' : 
-                participantIds.length <= 4 ? 'grid-cols-2 grid-rows-2' : 
-                'grid-cols-3 grid-rows-3'}
+                participantIds.length === 2 ? 'grid-cols-1 sm:grid-cols-2' : 
+                participantIds.length <= 4 ? 'grid-cols-1 sm:grid-cols-2' : 
+                'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'}
             `}>
               {participantIds.map(renderParticipant)}
             </div>
@@ -336,52 +340,52 @@ function DailyMeetingInner({
       </div>
 
       {/* Controls */}
-      <div className="bg-white border-t px-4 py-4">
-        <div className="flex items-center justify-center space-x-4">
+      <div className="bg-white border-t px-2 md:px-4 py-3 md:py-4">
+        <div className="flex items-center justify-center space-x-3 md:space-x-4">
           <Button
             variant={!localParticipant?.audio ? "destructive" : "outline"}
             size="lg"
             onClick={toggleAudio}
-            className="w-12 h-12 rounded-full p-0"
+            className="w-10 h-10 md:w-12 md:h-12 rounded-full p-0"
           >
-            {!localParticipant?.audio ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5" />}
+            {!localParticipant?.audio ? <MicOff className="w-4 h-4 md:w-5 md:h-5" /> : <Mic className="w-4 h-4 md:w-5 md:h-5" />}
           </Button>
 
           <Button
             variant={!localParticipant?.video ? "destructive" : "outline"}
             size="lg"
             onClick={toggleVideo}
-            className="w-12 h-12 rounded-full p-0"
+            className="w-10 h-10 md:w-12 md:h-12 rounded-full p-0"
           >
-            {!localParticipant?.video ? <VideoOff className="w-5 h-5" /> : <Video className="w-5 h-5" />}
+            {!localParticipant?.video ? <VideoOff className="w-4 h-4 md:w-5 md:h-5" /> : <Video className="w-4 h-4 md:w-5 md:h-5" />}
           </Button>
 
           <Button
             variant={isSharingScreen ? "default" : "outline"}
             size="lg"
             onClick={toggleScreenShare}
-            className="w-12 h-12 rounded-full p-0"
+            className="w-10 h-10 md:w-12 md:h-12 rounded-full p-0"
           >
-            <Monitor className="w-5 h-5" />
+            <Monitor className="w-4 h-4 md:w-5 md:h-5" />
           </Button>
 
           <Button
             variant={showNotes ? "default" : "outline"}
             size="lg"
             onClick={() => setShowNotes(!showNotes)}
-            className="w-12 h-12 rounded-full p-0"
+            className="w-10 h-10 md:w-12 md:h-12 rounded-full p-0"
             title="Toggle Notes"
           >
-            <StickyNote className="w-5 h-5" />
+            <StickyNote className="w-4 h-4 md:w-5 md:h-5" />
           </Button>
 
           <Button
             variant="destructive"
             size="lg"
             onClick={leaveMeeting}
-            className="w-12 h-12 rounded-full p-0"
+            className="w-10 h-10 md:w-12 md:h-12 rounded-full p-0"
           >
-            <PhoneOff className="w-5 h-5" />
+            <PhoneOff className="w-4 h-4 md:w-5 md:h-5" />
           </Button>
         </div>
       </div>
@@ -394,12 +398,6 @@ function DailyMeetingInner({
         isVisible={showNotes}
         onToggle={() => setShowNotes(!showNotes)}
       />
-
-      {/* Media Device Tips Modal */}
-      <MediaDeviceTips
-        isVisible={showTips}
-        onClose={() => setShowTips(false)}
-      />
     </div>
   );
 }
@@ -427,14 +425,14 @@ function ParticipantTile({
       </div>
       
       {/* Participant info overlay */}
-      <div className="absolute bottom-2 left-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-sm">
+      <div className="absolute bottom-1 md:bottom-2 left-1 md:left-2 bg-black bg-opacity-75 text-white px-1 md:px-2 py-0.5 md:py-1 rounded text-xs md:text-sm">
         {participant.user_name || 'Anonymous'} {isLocal && '(You)'}
       </div>
 
       {/* Audio muted indicator */}
       {!participant.audio && (
-        <div className="absolute top-2 right-2 bg-red-500 rounded-full p-1">
-          <MicOff className="w-4 h-4 text-white" />
+        <div className="absolute top-1 md:top-2 right-1 md:right-2 bg-red-500 rounded-full p-0.5 md:p-1">
+          <MicOff className="w-3 h-3 md:w-4 md:h-4 text-white" />
         </div>
       )}
 
@@ -442,10 +440,10 @@ function ParticipantTile({
       {!participant.video && (
         <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
           <div className="text-center text-white">
-            <div className="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center mx-auto mb-2">
-              <Users className="w-6 h-6" />
+            <div className="w-8 h-8 md:w-12 md:h-12 bg-gray-600 rounded-full flex items-center justify-center mx-auto mb-1 md:mb-2">
+              <Users className="w-4 h-4 md:w-6 md:h-6" />
             </div>
-            <p className="text-sm opacity-75">Camera off</p>
+            <p className="text-xs md:text-sm opacity-75">Camera off</p>
           </div>
         </div>
       )}
@@ -462,7 +460,7 @@ function CameraTile({ participantId }: { participantId: string }) {
   if (!participant) return null;
 
   return (
-    <div className={`relative bg-gray-900 rounded-lg overflow-hidden daily-camera-box ${
+    <div className={`relative bg-gray-900 rounded-lg overflow-hidden daily-camera-box min-w-[100px] lg:min-w-[128px] ${
       isLocal ? 'border-2 border-blue-500' : 'border border-gray-600'
     }`}>
       <div className="daily-video-container">
@@ -470,22 +468,22 @@ function CameraTile({ participantId }: { participantId: string }) {
       </div>
       
       {/* Participant name */}
-      <div className="absolute bottom-1 left-1 bg-black bg-opacity-75 text-white px-1 py-0.5 rounded text-xs">
+      <div className="absolute bottom-0.5 left-0.5 md:bottom-1 md:left-1 bg-black bg-opacity-75 text-white px-1 py-0.5 rounded text-xs">
         {participant.user_name || 'Anonymous'} {isLocal && '(You)'}
       </div>
 
       {/* Audio muted indicator */}
       {!participant.audio && (
-        <div className="absolute top-1 right-1 bg-red-500 rounded-full p-0.5">
-          <MicOff className="w-3 h-3 text-white" />
+        <div className="absolute top-0.5 right-0.5 md:top-1 md:right-1 bg-red-500 rounded-full p-0.5">
+          <MicOff className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" />
         </div>
       )}
 
       {/* Video off indicator */}
       {!participant.video && (
         <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
-          <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center">
-            <Users className="w-4 h-4 text-white" />
+          <div className="w-6 h-6 md:w-8 md:h-8 bg-gray-600 rounded-full flex items-center justify-center">
+            <Users className="w-3 h-3 md:w-4 md:h-4 text-white" />
           </div>
         </div>
       )}
@@ -589,17 +587,17 @@ export default function DailyMeeting({
   if (joinError) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-100 p-4">
-        <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
-          <div className="mb-6">
-            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <VideoOff className="w-8 h-8 text-red-600" />
+        <div className="bg-white rounded-lg shadow-lg p-4 md:p-8 max-w-md w-full text-center">
+          <div className="mb-4 md:mb-6">
+            <div className="w-12 h-12 md:w-16 md:h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
+              <VideoOff className="w-6 h-6 md:w-8 md:h-8 text-red-600" />
             </div>
-            <h2 className="text-xl font-semibold text-gray-900 mb-2">Unable to Join Meeting</h2>
-            <p className="text-gray-600 mb-4">{joinError}</p>
+            <h2 className="text-lg md:text-xl font-semibold text-gray-900 mb-2">Unable to Join Meeting</h2>
+            <p className="text-sm md:text-base text-gray-600 mb-3 md:mb-4">{joinError}</p>
             
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 text-left">
-              <h3 className="font-semibold text-blue-900 mb-2">💡 Quick Solutions:</h3>
-              <ul className="text-sm text-blue-800 space-y-1">
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4 mb-4 md:mb-6 text-left">
+              <h3 className="text-sm md:text-base font-semibold text-blue-900 mb-2">💡 Quick Solutions:</h3>
+              <ul className="text-xs md:text-sm text-blue-800 space-y-1">
                 <li>• Close other browser tabs using your camera/microphone</li>
                 <li>• Close video calling apps (Zoom, Teams, Skype, etc.)</li>
                 <li>• Refresh this page and allow camera permissions</li>
@@ -615,7 +613,7 @@ export default function DailyMeeting({
                 setIsJoining(true);
                 window.location.reload();
               }}
-              className="w-full bg-blue-600 hover:bg-blue-700"
+              className="w-full bg-blue-600 hover:bg-blue-700 text-sm md:text-base"
             >
               Try Again
             </Button>
@@ -623,7 +621,7 @@ export default function DailyMeeting({
             <Button 
               variant="outline" 
               onClick={onLeave}
-              className="w-full"
+              className="w-full text-sm md:text-base"
             >
               Return to Dashboard
             </Button>
diff --git a/src/components/meetingSystem/MediaDeviceTips.tsx b/src/components/meetingSystem/MediaDeviceTips.tsx
deleted file mode 100644
index 5b9a1674..00000000
--- a/src/components/meetingSystem/MediaDeviceTips.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { AlertTriangle, X, Camera, Mic, Monitor, Smartphone } from 'lucide-react';
-
-interface MediaDeviceTipsProps {
-  isVisible: boolean;
-  onClose: () => void;
-}
-
-export function MediaDeviceTips({ isVisible, onClose }: MediaDeviceTipsProps) {
-  if (!isVisible) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div className="p-6">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center">
-              <AlertTriangle className="w-6 h-6 text-yellow-500 mr-2" />
-              <h2 className="text-lg font-semibold">Camera & Microphone Tips</h2>
-            </div>
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              <X className="w-4 h-4" />
-            </Button>
-          </div>
-
-          {/* Content */}
-          <div className="space-y-4">
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <h3 className="font-semibold text-yellow-800 mb-2">⚠️ Multiple Browser Limitation</h3>
-              <p className="text-sm text-yellow-700">
-                Only one browser tab can access your camera and microphone at the same time. 
-                This is a security feature built into web browsers.
-              </p>
-            </div>
-
-            <div className="space-y-3">
-              <h3 className="font-semibold text-gray-800">If you can't access camera/microphone:</h3>
-              
-              <div className="space-y-2">
-                <div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg">
-                  <Monitor className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <h4 className="font-medium text-blue-900">Close Other Browser Tabs</h4>
-                    <p className="text-sm text-blue-700">Close any other tabs that might be using your camera (video calls, other meetings)</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg">
-                  <Camera className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <h4 className="font-medium text-green-900">Close Video Applications</h4>
-                    <p className="text-sm text-green-700">Close apps like Zoom, Teams, Skype, or any camera software</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-3 p-3 bg-purple-50 rounded-lg">
-                  <Mic className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <h4 className="font-medium text-purple-900">Check Browser Permissions</h4>
-                    <p className="text-sm text-purple-700">Make sure you've allowed camera and microphone access for this website</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-3 p-3 bg-orange-50 rounded-lg">
-                  <Smartphone className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <h4 className="font-medium text-orange-900">Try Different Browser</h4>
-                    <p className="text-sm text-orange-700">If issues persist, try opening the meeting in a different browser or incognito mode</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-              <h3 className="font-semibold text-gray-800 mb-2">💡 Pro Tips:</h3>
-              <ul className="text-sm text-gray-600 space-y-1">
-                <li>• Use one browser for video calls only</li>
-                <li>• Keep other video apps closed during meetings</li>
-                <li>• Refresh the page if you encounter permission issues</li>
-                <li>• Use headphones to prevent echo</li>
-              </ul>
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="flex space-x-3 mt-6">
-            <Button onClick={onClose} className="flex-1">
-              Got it!
-            </Button>
-            <Button 
-              variant="outline" 
-              onClick={() => window.location.reload()}
-              className="flex-1"
-            >
-              Refresh Page
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meetingSystem/MediaDeviceWarning.tsx b/src/components/meetingSystem/MediaDeviceWarning.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/messageSystem/MeetingBox.tsx b/src/components/messageSystem/MeetingBox.tsx
index bf57c842..127ea1e1 100644
--- a/src/components/messageSystem/MeetingBox.tsx
+++ b/src/components/messageSystem/MeetingBox.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { Calendar, Plus, FileText, ChevronDown, ChevronRight } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
 import CreateMeetingModal from '@/components/meetingSystem/CreateMeetingModal';
 import CancelMeetingModal from '@/components/meetingSystem/CancelMeetingModal';
 import MeetingList from '@/components/meetingSystem/MeetingList';
@@ -75,80 +74,6 @@ interface MeetingBoxProps {
 export default function MeetingBox({ chatRoomId, userId, onClose, onMeetingUpdate }: MeetingBoxProps) {
   const [meetings, setMeetings] = useState<Meeting[]>([]);
   const [loading, setLoading] = useState(true);
-
-  // Animation variants
-  const containerVariants = {
-    hidden: { 
-      opacity: 0,
-      y: 20,
-      scale: 0.95
-    },
-    visible: { 
-      opacity: 1,
-      y: 0,
-      scale: 1,
-      transition: {
-        duration: 0.4,
-        ease: "easeOut",
-        staggerChildren: 0.1
-      }
-    },
-    exit: {
-      opacity: 0,
-      y: -20,
-      scale: 0.95,
-      transition: {
-        duration: 0.3,
-        ease: "easeIn"
-      }
-    }
-  };
-
-  const itemVariants = {
-    hidden: { 
-      opacity: 0,
-      x: -20
-    },
-    visible: { 
-      opacity: 1,
-      x: 0,
-      transition: {
-        duration: 0.3,
-        ease: "easeOut"
-      }
-    }
-  };
-
-  const headerVariants = {
-    hidden: { 
-      opacity: 0,
-      y: -10
-    },
-    visible: { 
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        ease: "easeOut",
-        delay: 0.1
-      }
-    }
-  };
-
-  const buttonHover = {
-    scale: 1.05,
-    transition: {
-      duration: 0.2,
-      ease: "easeInOut"
-    }
-  };
-
-  const buttonTap = {
-    scale: 0.95,
-    transition: {
-      duration: 0.1
-    }
-  };
   const [userProfiles, setUserProfiles] = useState<UserProfiles>({});
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showCancelModal, setShowCancelModal] = useState(false);
@@ -714,167 +639,45 @@ ${formattedContent}
 
   if (loading && meetings.length === 0) {
     return (
-      <motion.div 
-        className="p-6 text-center relative"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
-      >
+      <div className="p-6 text-center relative">
         {/* Background pulse effect */}
-        <motion.div
-          className="absolute inset-0 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg"
-          animate={{
-            scale: [1, 1.02, 1],
-            opacity: [0.3, 0.6, 0.3],
-          }}
-          transition={{
-            duration: 2,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
-        />
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg opacity-30" />
         
         <div className="relative z-10">
-          <motion.div 
-            className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"
-            animate={{ 
-              rotate: 360,
-              scale: [1, 1.1, 1]
-            }}
-            transition={{ 
-              rotate: { duration: 1, repeat: Infinity, ease: "linear" },
-              scale: { duration: 2, repeat: Infinity, ease: "easeInOut" }
-            }}
-          />
-          <motion.p 
-            className="mt-2 text-gray-500"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.3 }}
-          >
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto" />
+          <p className="mt-2 text-gray-500">
             Loading meetings...
-          </motion.p>
+          </p>
         </div>
-      </motion.div>
+      </div>
     );
   }
 
   return (
     <>
-      {/* Animated Background Elements */}
-      <motion.div 
-        className="absolute inset-0 pointer-events-none overflow-hidden"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 0.4 }}
-        transition={{ duration: 1 }}
-      >
-        {/* Floating circles */}
-        <motion.div
-          className="absolute w-20 h-20 bg-blue-100 rounded-full"
-          style={{ top: '10%', left: '5%' }}
-          animate={{
-            y: [0, -20, 0],
-            x: [0, 10, 0],
-            scale: [1, 1.1, 1],
-          }}
-          transition={{
-            duration: 6,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
-        />
-        <motion.div
-          className="absolute w-16 h-16 bg-purple-100 rounded-full"
-          style={{ top: '60%', right: '10%' }}
-          animate={{
-            y: [0, 15, 0],
-            x: [0, -8, 0],
-            scale: [1, 0.9, 1],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 1
-          }}
-        />
-        <motion.div
-          className="absolute w-12 h-12 bg-green-100 rounded-full"
-          style={{ bottom: '15%', left: '15%' }}
-          animate={{
-            y: [0, -10, 0],
-            x: [0, 5, 0],
-            scale: [1, 1.2, 1],
-          }}
-          transition={{
-            duration: 7,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 2
-          }}
-        />
-      </motion.div>
-
-      <motion.div 
-        className="p-4 h-full flex flex-col relative z-10"
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        exit="exit"
-      >
+      <div className="p-4 h-full flex flex-col relative z-10">
         {/* Header */}
-        <motion.div 
-          className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200"
-          variants={headerVariants}
-        >
-          <motion.div 
-            className="flex items-center space-x-3"
-            variants={itemVariants}
-          >
-            <motion.div
-              animate={{ 
-                rotate: [0, 5, -5, 0],
-                scale: [1, 1.1, 1]
-              }}
-              transition={{ 
-                duration: 2,
-                repeat: Infinity,
-                repeatDelay: 3,
-                ease: "easeInOut"
-              }}
-            >
+        <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200">
+          <div className="flex items-center space-x-3">
+            <div>
               <Calendar className="w-5 h-5 text-blue-600" />
-            </motion.div>
+            </div>
             <h2 className="text-lg font-semibold text-gray-900">Meetings</h2>
-          </motion.div>
-          <motion.button 
+          </div>
+          <button 
             onClick={handleScheduleMeetingClick}
             className="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2 text-sm"
             title="Schedule New Meeting"
-            variants={itemVariants}
-            whileHover={buttonHover}
-            whileTap={buttonTap}
           >
-            <motion.div
-              animate={{ rotate: [0, 90, 0] }}
-              transition={{ 
-                duration: 0.5,
-                ease: "easeInOut"
-              }}
-              whileHover={{ rotate: 90 }}
-            >
+            <div>
               <Plus className="w-4 h-4" />
-            </motion.div>
+            </div>
             <span>New</span>
-          </motion.button>
-        </motion.div>
+          </button>
+        </div>
 
         {/* Meetings List */}
-        <motion.div 
-          className="flex-1 overflow-y-auto space-y-4"
-          variants={itemVariants}
-        >
+        <div className="flex-1 overflow-y-auto space-y-4">
           <MeetingList
             pendingRequests={filteredMeetings.pendingRequests}
             upcomingMeetings={filteredMeetings.upcomingMeetings}
@@ -896,108 +699,67 @@ ${formattedContent}
             onTogglePastMeetings={() => setShowPastMeetings(!showPastMeetings)}
             onToggleCancelledMeetings={() => setShowCancelledMeetings(!showCancelledMeetings)}
           />
-        </motion.div>
+        </div>
 
         {/* Saved Meeting Notes - Collapsible */}
-        <motion.div 
-          className="border-t border-gray-200 pt-4"
-          variants={itemVariants}
-        >
-          <motion.div 
-            className="border border-gray-200 rounded-lg overflow-hidden"
-            whileHover={{ scale: 1.01 }}
-            transition={{ duration: 0.2 }}
-          >
-            <motion.button
+        <div className="border-t border-gray-200 pt-4">
+          <div className="border border-gray-200 rounded-lg overflow-hidden">
+            <button
               onClick={() => setShowSavedNotes(!showSavedNotes)}
               className="w-full bg-gray-50 hover:bg-gray-100 px-4 py-3 flex items-center justify-between text-sm font-medium text-gray-700 transition-colors"
-              whileHover={{ backgroundColor: "rgb(243 244 246)" }}
-              whileTap={{ scale: 0.98 }}
             >
               <div className="flex items-center">
-                <motion.div
-                  animate={{ 
-                    rotate: showSavedNotes ? [0, 10, -10, 0] : 0,
-                    scale: [1, 1.1, 1]
-                  }}
-                  transition={{ 
-                    duration: 0.3,
-                    ease: "easeInOut"
-                  }}
-                >
+                <div>
                   <FileText className="w-4 h-4 mr-2 text-purple-500" />
-                </motion.div>
+                </div>
                 <span>Saved Meeting Notes ({savedNotes.length})</span>
               </div>
-              <motion.div
-                animate={{ rotate: showSavedNotes ? 180 : 0 }}
-                transition={{ duration: 0.3, ease: "easeInOut" }}
-              >
+              <div>
                 {showSavedNotes ? (
                   <ChevronDown className="w-4 h-4" />
                 ) : (
                   <ChevronRight className="w-4 h-4" />
                 )}
-              </motion.div>
-            </motion.button>
-            <AnimatePresence>
-              {showSavedNotes && (
-                <motion.div 
-                  className="p-4 bg-white"
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{ height: "auto", opacity: 1 }}
-                  exit={{ height: 0, opacity: 0 }}
-                  transition={{ duration: 0.3, ease: "easeInOut" }}
-                >
-                  <SavedNotesList
-                    notes={savedNotes}
-                    loading={loadingSavedNotes}
-                    onViewNotes={handleViewNotes}
-                    onDownloadNotes={handleDownloadNotes}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </motion.div>
-        </motion.div>
-      </motion.div>
+              </div>
+            </button>
+            {showSavedNotes && (
+              <div className="p-4 bg-white">
+                <SavedNotesList
+                  notes={savedNotes}
+                  loading={loadingSavedNotes}
+                  onViewNotes={handleViewNotes}
+                  onDownloadNotes={handleDownloadNotes}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
 
       {/* Modals */}
-      <AnimatePresence>
-        {showCreateModal && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-          >
-            <CreateMeetingModal
-              onClose={() => setShowCreateModal(false)}
-              onCreate={handleCreateMeeting}
-              receiverName={otherUserId ? userProfiles[otherUserId]?.firstName || 'User' : 'this user'}
-            />
-          </motion.div>
-        )}
-
-        {showCancelModal && meetingToCancel && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-          >
-            <CancelMeetingModal
-              meetingId={meetingToCancel}
-              onClose={() => {
-                setShowCancelModal(false);
-                setMeetingToCancel(null);
-              }}
-              onCancel={handleCancelMeeting}
-              userName={otherUserId ? userProfiles[otherUserId]?.firstName || 'User' : 'User'}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {showCreateModal && (
+        <div>
+          <CreateMeetingModal
+            onClose={() => setShowCreateModal(false)}
+            onCreate={handleCreateMeeting}
+            receiverName={otherUserId ? userProfiles[otherUserId]?.firstName || 'User' : 'this user'}
+          />
+        </div>
+      )}
+
+      {showCancelModal && meetingToCancel && (
+        <div>
+          <CancelMeetingModal
+            meetingId={meetingToCancel}
+            onClose={() => {
+              setShowCancelModal(false);
+              setMeetingToCancel(null);
+            }}
+            onCancel={handleCancelMeeting}
+            userName={otherUserId ? userProfiles[otherUserId]?.firstName || 'User' : 'User'}
+          />
+        </div>
+      )}
 
       {/* Alert Component */}
       <Alert
@@ -1026,25 +788,18 @@ ${formattedContent}
       />
 
       {/* Notes View Modal */}
-      <AnimatePresence>
-        {showNotesModal && selectedNote && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.9 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
-          >
-            <NotesViewModal
-              note={selectedNote}
-              onClose={() => {
-                setShowNotesModal(false);
-                setSelectedNote(null);
-              }}
-              onDownload={handleDownloadNotes}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {showNotesModal && selectedNote && (
+        <div>
+          <NotesViewModal
+            note={selectedNote}
+            onClose={() => {
+              setShowNotesModal(false);
+              setSelectedNote(null);
+            }}
+            onDownload={handleDownloadNotes}
+          />
+        </div>
+      )}
     </>
   );
 }
\ No newline at end of file
diff --git a/src/components/notificationSystem/Notification.tsx b/src/components/notificationSystem/Notification.tsx
index 1cb362b5..89ac5511 100644
--- a/src/components/notificationSystem/Notification.tsx
+++ b/src/components/notificationSystem/Notification.tsx
@@ -24,51 +24,53 @@ const Notification: React.FC<NotificationProps> = ({ notification, onMarkAsRead
 
   return (
     <div
-      className={`p-4 mb-2 border-l-4 flex items-start rounded-md shadow-sm ${
+      className={`p-3 sm:p-4 mb-2 border-l-4 flex items-start rounded-md shadow-sm ${
         notification.isRead 
           ? 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-600' 
           : 'bg-white dark:bg-gray-800 border-l-4'
       } transition-colors duration-200`}
       style={{ borderLeftColor: notification.isRead ? '#e5e7eb' : typeColor }}
     >
-      <div className="mr-3 mt-0.5">
+      <div className="mr-3 mt-0.5 flex-shrink-0">
         <Info className="text-xl" style={{ color: typeColor }} />
       </div>
 
-      <div className="flex-1">
-        <div className="flex items-center">
+      <div className="flex-1 min-w-0">
+        <div className="flex flex-wrap items-center gap-1 mb-2">
           <span 
-            className="text-xs font-medium px-2 py-0.5 rounded-full mr-2 font-heading"
+            className="text-xs font-medium px-2 py-0.5 rounded-full font-heading inline-block max-w-full sm:max-w-xs truncate"
             style={{ 
               backgroundColor: `${typeColor}20`, // 20% opacity version
               color: typeColor 
             }}
+            title={typeName}
           >
             {typeName}
           </span>
         </div>
-        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 mt-1 font-body">{notification.description}</p>
+        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 font-body break-words">{notification.description}</p>
         <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 font-body">{formattedDate}</p>
       </div>
 
-      <div className="ml-3 flex flex-col sm:flex-row items-end sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
+      <div className="ml-3 flex flex-col xs:flex-row items-end xs:items-center space-y-2 xs:space-y-0 xs:space-x-2 flex-shrink-0">
         {!notification.isRead && (
           <button
             onClick={handleMarkReadClick}
-            className="flex items-center px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900/50 rounded-md transition-colors font-body"
+            className="flex items-center px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900/50 rounded-md transition-colors font-body whitespace-nowrap"
             aria-label="Mark as read"
           >
-            <Check className="w-3 h-3 mr-1" />
-            Mark Read
+            <Check className="w-3 h-3 mr-1 flex-shrink-0" />
+            <span className="hidden xs:inline">Mark Read</span>
+            <span className="xs:hidden">Read</span>
           </button>
         )}
         {notification.targetDestination && (
           <button
             onClick={handleViewClick}
-            className="flex font-body items-center px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
+            className="flex font-body items-center px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors whitespace-nowrap"
             aria-label="View details"
           >
-            <Eye className="w-3 h-3 mr-1" />
+            <Eye className="w-3 h-3 mr-1 flex-shrink-0" />
             View
           </button>
         )}
diff --git a/src/components/sessionSystem/CreateSessionModal.tsx b/src/components/sessionSystem/CreateSessionModal.tsx
index 6fa77c6f..b58b6145 100644
--- a/src/components/sessionSystem/CreateSessionModal.tsx
+++ b/src/components/sessionSystem/CreateSessionModal.tsx
@@ -308,7 +308,7 @@ export default function CreateSessionModal({
                   onChange={(e) => setSelectedOtherSkill(e.target.value)}
                   className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 >
-                  <option value="">Choose a skill to learn...</option>
+                  <option value="">Choose a skill to get...</option>
                   {otherUserSkills.map((skill) => (
                     <option key={skill.id} value={skill.id}>
                       {skill.skillTitle} ({skill.proficiencyLevel}) - {skill.categoryName}
@@ -320,7 +320,7 @@ export default function CreateSessionModal({
 
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Describe What You Want to Learn
+                  Describe What You Want to Receive
                 </label>
                 <textarea
                   value={otherDescription}