diff --git a/components/classes/index.ts b/components/classes/index.ts
new file mode 100644
index 0000000..d76c4e6
--- /dev/null
+++ b/components/classes/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Class Management Components and Utilities
+ * Centralized exports for all class-related UI components and utility functions
+ */
+
+// Re-export core types for convenience (only if they exist)
+// export type { Class, CreateClassRequest, UpdateClassRequest, ClassValidationResult } from '../../src/types/class';
+
+// Note: Class management UI components and utilities are not yet implemented
+// This file serves as a placeholder for future class management exports
+
+export {}; // Empty export to make this a valid module
\ No newline at end of file
diff --git a/components/ui/ConfirmButton.tsx b/components/ui/ConfirmButton.tsx
index 8e3a4ad..d1b0b7b 100644
--- a/components/ui/ConfirmButton.tsx
+++ b/components/ui/ConfirmButton.tsx
@@ -332,6 +332,7 @@ ConfirmButton.Danger = (props: Omit<ConfirmButtonProps, 'variant' | 'requireConf
     confirmationMessage={props.confirmationMessage || 'This action cannot be undone. Are you sure?'}
   />
 );
+ConfirmButton.Danger.displayName = 'ConfirmButton.Danger';
 
 /**
  * ConfirmButton.Delete - Delete-specific button
@@ -346,5 +347,6 @@ ConfirmButton.Delete = (props: Omit<ConfirmButtonProps, 'variant' | 'requireConf
     Delete
   </ConfirmButton>
 );
+ConfirmButton.Delete.displayName = 'ConfirmButton.Delete';
 
 export default ConfirmButton;
\ No newline at end of file
diff --git a/components/ui/RequiredFieldLabel.tsx b/components/ui/RequiredFieldLabel.tsx
index 84e086e..6726798 100644
--- a/components/ui/RequiredFieldLabel.tsx
+++ b/components/ui/RequiredFieldLabel.tsx
@@ -205,6 +205,7 @@ RequiredFieldLabel.Asterisk = ({
     *
   </span>
 );
+RequiredFieldLabel.Asterisk.displayName = 'RequiredFieldLabel.Asterisk';
 
 /**
  * RequiredFieldLabel.Text - Standalone required text component
@@ -220,6 +221,7 @@ RequiredFieldLabel.Text = ({
     ({children})
   </span>
 );
+RequiredFieldLabel.Text.displayName = 'RequiredFieldLabel.Text';
 
 /**
  * RequiredFieldLabel.Optional - Optional field indicator
@@ -235,5 +237,6 @@ RequiredFieldLabel.Optional = ({
     ({children})
   </span>
 );
+RequiredFieldLabel.Optional.displayName = 'RequiredFieldLabel.Optional';
 
 export default RequiredFieldLabel;
\ No newline at end of file
diff --git a/components/ui/StudentAvatar.tsx b/components/ui/StudentAvatar.tsx
index d066852..cd12548 100644
--- a/components/ui/StudentAvatar.tsx
+++ b/components/ui/StudentAvatar.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import { 
   formatStudentName, 
   generateStudentInitials, 
@@ -187,10 +188,11 @@ const StudentAvatar: React.FC<StudentAvatarProps> = ({
     >
       {/* Avatar Image */}
       {avatarUrl && (
-        <img
+        <Image
           src={avatarUrl}
           alt={accessibilityLabel}
-          className="w-full h-full object-cover"
+          fill
+          className="object-cover"
           onError={handleImageError}
         />
       )}
diff --git a/components/ui/StudentBadge.tsx b/components/ui/StudentBadge.tsx
index 25518c4..0fae829 100644
--- a/components/ui/StudentBadge.tsx
+++ b/components/ui/StudentBadge.tsx
@@ -307,6 +307,7 @@ const StudentBadge: React.FC<StudentBadgeProps> & {
 StudentBadge.Status = (props: Omit<StudentBadgeProps, 'status'> & { status: NonNullable<StudentBadgeProps['status']> }) => (
   <StudentBadge {...props} showDot />
 );
+StudentBadge.Status.displayName = 'StudentBadge.Status';
 
 /**
  * StudentBadge.Grade - Grade-specific badge
@@ -314,6 +315,7 @@ StudentBadge.Status = (props: Omit<StudentBadgeProps, 'status'> & { status: NonN
 StudentBadge.Grade = (props: Omit<StudentBadgeProps, 'grade'> & { grade: NonNullable<StudentBadgeProps['grade']> }) => (
   <StudentBadge {...props} variant="primary" />
 );
+StudentBadge.Grade.displayName = 'StudentBadge.Grade';
 
 /**
  * StudentBadge.Attendance - Attendance-specific badge
@@ -321,5 +323,6 @@ StudentBadge.Grade = (props: Omit<StudentBadgeProps, 'grade'> & { grade: NonNull
 StudentBadge.Attendance = (props: Omit<StudentBadgeProps, 'attendance'> & { attendance: NonNullable<StudentBadgeProps['attendance']> }) => (
   <StudentBadge {...props} showDot size="small" />
 );
+StudentBadge.Attendance.displayName = 'StudentBadge.Attendance';
 
 export default StudentBadge;
\ No newline at end of file
diff --git a/components/ui/ValidationMessage.tsx b/components/ui/ValidationMessage.tsx
index 0b640fa..0cbe2d9 100644
--- a/components/ui/ValidationMessage.tsx
+++ b/components/ui/ValidationMessage.tsx
@@ -258,6 +258,7 @@ const ValidationMessage: React.FC<ValidationMessageProps> & {
 ValidationMessage.Error = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="error" />
 );
+ValidationMessage.Error.displayName = 'ValidationMessage.Error';
 
 /**
  * ValidationMessage.Success - Shorthand for success messages
@@ -265,6 +266,7 @@ ValidationMessage.Error = (props: Omit<ValidationMessageProps, 'type'>) => (
 ValidationMessage.Success = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="success" />
 );
+ValidationMessage.Success.displayName = 'ValidationMessage.Success';
 
 /**
  * ValidationMessage.Warning - Shorthand for warning messages
@@ -272,6 +274,7 @@ ValidationMessage.Success = (props: Omit<ValidationMessageProps, 'type'>) => (
 ValidationMessage.Warning = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="warning" />
 );
+ValidationMessage.Warning.displayName = 'ValidationMessage.Warning';
 
 /**
  * ValidationMessage.Info - Shorthand for info messages
@@ -279,5 +282,6 @@ ValidationMessage.Warning = (props: Omit<ValidationMessageProps, 'type'>) => (
 ValidationMessage.Info = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="info" />
 );
+ValidationMessage.Info.displayName = 'ValidationMessage.Info';
 
 export default ValidationMessage;
\ No newline at end of file