diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 015cd2d..e22c57f 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { X } from 'lucide-react';
+import { CloseIcon } from '@mui/icons-material';
 
 interface ModalProps {
   isOpen: boolean;
@@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidt
               onClick={onClose}
               className="text-gray-400 hover:text-gray-500 focus:outline-none"
             >
-              <X size={20} />
+              <CloseIcon size={20} />
             </button>
           </div>
 
diff --git a/src/pages/timetable/ClassDetailPage.tsx b/src/pages/timetable/ClassDetailPage.tsx
index 917cbc4..18af775 100644
--- a/src/pages/timetable/ClassDetailPage.tsx
+++ b/src/pages/timetable/ClassDetailPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Calendar, Users, BookOpen, Clock, Edit, Trash2, Plus } from 'lucide-react';
+import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useProfile } from '../../contexts/ProfileContext';
 import Modal from '../../components/common/Modal';
@@ -72,7 +72,7 @@ const ClassDetailPage: React.FC = () => {
           to="/timetable/classes"
           className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
         >
-          <ArrowLeft size={18} />
+          <ArrowBackIcon size={18} />
           Back to Classes
         </Link>
 
@@ -95,14 +95,14 @@ const ClassDetailPage: React.FC = () => {
                 to={`/timetable/classes/${classId}/edit`}
                 className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
               >
-                <Edit size={18} />
+                <EditIcon size={18} />
                 Edit
               </Link>
               <button
                 onClick={() => setShowDeleteModal(true)}
                 className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
               >
-                <Trash2 size={18} />
+                <DeleteIcon size={18} />
                 Delete
               </button>
             </div>
@@ -115,7 +115,7 @@ const ClassDetailPage: React.FC = () => {
         <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-blue-50 rounded-lg">
-              <Calendar className="text-blue-600" size={20} />
+              <CalendarTodayIcon className="text-blue-600" size={20} />
             </div>
             <div>
               <p className="text-sm text-gray-500">Timetables</p>
@@ -126,7 +126,7 @@ const ClassDetailPage: React.FC = () => {
         <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-green-50 rounded-lg">
-              <Users className="text-green-600" size={20} />
+              <PeopleIcon className="text-green-600" size={20} />
             </div>
             <div>
               <p className="text-sm text-gray-500">Students</p>
@@ -137,7 +137,7 @@ const ClassDetailPage: React.FC = () => {
         <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-purple-50 rounded-lg">
-              <BookOpen className="text-purple-600" size={20} />
+              <MenuBookIcon className="text-purple-600" size={20} />
             </div>
             <div>
               <p className="text-sm text-gray-500">Teachers</p>
@@ -194,7 +194,7 @@ const ClassDetailPage: React.FC = () => {
                   to={`/timetable/classes/${classId}/timetables/new`}
                   className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                 >
-                  <Plus size={18} />
+                  <AddIcon size={18} />
                   Add Timetable
                 </Link>
               )}
@@ -202,7 +202,7 @@ const ClassDetailPage: React.FC = () => {
 
             {timetables.length === 0 ? (
               <div className="text-center py-12 text-gray-500">
-                <Clock size={48} className="mx-auto mb-4 opacity-50" />
+                <AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" />
                 <p className="text-lg font-medium mb-2">No timetables yet</p>
                 <p>Create a timetable to start scheduling lessons</p>
               </div>
@@ -221,7 +221,7 @@ const ClassDetailPage: React.FC = () => {
                         {timetable.is_recurring && ' • Recurring'}
                       </p>
                     </div>
-                    <ArrowLeft className="rotate-180 text-gray-400" size={18} />
+                    <ArrowBackIcon className="rotate-180 text-gray-400" size={18} />
                   </Link>
                 ))}
               </div>
@@ -234,7 +234,7 @@ const ClassDetailPage: React.FC = () => {
             <h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2>
             {enrolledStudents.length === 0 ? (
               <div className="text-center py-12 text-gray-500">
-                <Users size={48} className="mx-auto mb-4 opacity-50" />
+                <PeopleIcon size={48} className="mx-auto mb-4 opacity-50" />
                 <p className="text-lg font-medium mb-2">No students enrolled</p>
                 <p>Students can request enrollment or be added by teachers</p>
               </div>
diff --git a/src/pages/timetable/ClassesPage.tsx b/src/pages/timetable/ClassesPage.tsx
index 0eb4bd0..08c2980 100644
--- a/src/pages/timetable/ClassesPage.tsx
+++ b/src/pages/timetable/ClassesPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { Plus, Search, Filter, BookOpen, Users, Calendar } from 'lucide-react';
+import { AddIcon, CalendarTodayIcon, FilterListIcon, MenuBookIcon, PeopleIcon, SearchIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useProfile } from '../../contexts/ProfileContext';
 
@@ -70,7 +70,7 @@ const ClassesPage: React.FC = () => {
             onClick={() => navigate('/timetable/classes/create')}
             className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
           >
-            <Plus size={20} />
+            <AddIcon size={20} />
             Create Class
           </button>
         )}
@@ -80,7 +80,7 @@ const ClassesPage: React.FC = () => {
       <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
         <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
           <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
+            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
             <input
               type="text"
               placeholder="Search classes by name or subject..."
@@ -94,7 +94,7 @@ const ClassesPage: React.FC = () => {
             onClick={() => setShowFilters(!showFilters)}
             className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
           >
-            <Filter size={20} />
+            <FilterListIcon size={20} />
             Filters
           </button>
           <button
@@ -172,7 +172,7 @@ const ClassesPage: React.FC = () => {
         </div>
       ) : classes.length === 0 ? (
         <div className="text-center py-12 bg-gray-50 rounded-xl">
-          <BookOpen className="mx-auto h-12 w-12 text-gray-400 mb-4" />
+          <MenuBookIcon className="mx-auto h-12 w-12 text-gray-400 mb-4" />
           <h3 className="text-lg font-medium text-gray-900">No classes found</h3>
           <p className="text-gray-600 mt-1">
             {searchQuery || filterSubject || filterSchoolYear
@@ -191,7 +191,7 @@ const ClassesPage: React.FC = () => {
               >
                 <div className="flex items-start justify-between mb-4">
                   <div className="p-2 bg-blue-50 rounded-lg">
-                    <BookOpen className="text-blue-600" size={24} />
+                    <MenuBookIcon className="text-blue-600" size={24} />
                   </div>
                   <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
                     {cls.subject}
@@ -203,11 +203,11 @@ const ClassesPage: React.FC = () => {
                 </p>
                 <div className="flex items-center gap-4 text-sm text-gray-600">
                   <span className="flex items-center gap-1">
-                    <Users size={16} />
+                    <PeopleIcon size={16} />
                     {cls.student_count} students
                   </span>
                   <span className="flex items-center gap-1">
-                    <Calendar size={16} />
+                    <CalendarTodayIcon size={16} />
                     {cls.timetable_count} timetables
                   </span>
                 </div>
diff --git a/src/pages/timetable/EnrollmentRequestsPage.tsx b/src/pages/timetable/EnrollmentRequestsPage.tsx
index d0fb9f6..f6ff620 100644
--- a/src/pages/timetable/EnrollmentRequestsPage.tsx
+++ b/src/pages/timetable/EnrollmentRequestsPage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Check, X, UserPlus, Users, Filter, Search, ChevronDown } from 'lucide-react';
+import { CheckIcon, CloseIcon, FilterListIcon, KeyboardArrowDownIcon, PeopleIcon, PersonAddIcon, SearchIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import Modal from '../../components/common/Modal';
 
@@ -105,7 +105,7 @@ const EnrollmentRequestsPage: React.FC = () => {
         <div className="flex flex-wrap items-center gap-4">
           {/* Class Filter */}
           <div className="flex items-center gap-2">
-            <Filter size={18} className="text-gray-400" />
+            <FilterListIcon size={18} className="text-gray-400" />
             <select
               value={filters.class_id || ''}
               onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))}
@@ -137,7 +137,7 @@ const EnrollmentRequestsPage: React.FC = () => {
           {/* Search */}
           <div className="flex-1 min-w-[200px]">
             <div className="relative">
-              <Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+              <SearchIcon size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
               <input
                 type="text"
                 placeholder="Search by student name or email..."
@@ -195,7 +195,7 @@ const EnrollmentRequestsPage: React.FC = () => {
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="flex items-center">
                       <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
-                        <UserPlus size={18} className="text-blue-600" />
+                        <PersonAddIcon size={18} className="text-blue-600" />
                       </div>
                       <div className="ml-4">
                         <div className="text-sm font-medium text-gray-900">
@@ -230,7 +230,7 @@ const EnrollmentRequestsPage: React.FC = () => {
                           }}
                           className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200"
                         >
-                          <Check size={14} className="mr-1" />
+                          <CheckIcon size={14} className="mr-1" />
                           Approve
                         </button>
                         <button
@@ -241,7 +241,7 @@ const EnrollmentRequestsPage: React.FC = () => {
                           }}
                           className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200"
                         >
-                          <X size={14} className="mr-1" />
+                          <CloseIcon size={14} className="mr-1" />
                           Reject
                         </button>
                       </div>
@@ -259,7 +259,7 @@ const EnrollmentRequestsPage: React.FC = () => {
         </div>
       ) : (
         <div className="text-center py-16 bg-white rounded-lg shadow">
-          <Users className="mx-auto h-12 w-12 text-gray-300" />
+          <PeopleIcon className="mx-auto h-12 w-12 text-gray-300" />
           <h3 className="mt-4 text-lg font-medium text-gray-900">No enrollment requests</h3>
           <p className="mt-2 text-gray-500">
             {filters.status === 'pending' 
diff --git a/src/pages/timetable/LessonPage.tsx b/src/pages/timetable/LessonPage.tsx
index 502f598..ea3cbe6 100644
--- a/src/pages/timetable/LessonPage.tsx
+++ b/src/pages/timetable/LessonPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Calendar, Clock, MapPin, Edit, Trash2, Users, BookOpen, FileText, CheckCircle, XCircle } from 'lucide-react';
+import { AccessTimeIcon, ArrowBackIcon, CalendarTodayIcon, CancelIcon, CheckCircleIcon, DeleteIcon, DescriptionIcon, EditIcon, LocationOnIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useProfile } from '../../contexts/ProfileContext';
 import { format, parseISO } from 'date-fns';
@@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
             to={`/timetable/timetables/${currentTimetable?.id}`}
             className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2"
           >
-            <ArrowLeft size={16} className="mr-1" />
+            <ArrowBackIcon size={16} className="mr-1" />
             Back to Timetable
           </Link>
           <h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
@@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
               onClick={() => setIsEditModalOpen(true)}
               className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
-              <Edit size={16} className="mr-2" />
+              <EditIcon size={16} className="mr-2" />
               Edit
             </button>
             <button
               onClick={handleDeleteLesson}
               className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
             >
-              <Trash2 size={16} className="mr-2" />
+              <DeleteIcon size={16} className="mr-2" />
               Delete
             </button>
           </div>
@@ -151,12 +151,12 @@ const LessonPage: React.FC = () => {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
         <div className="bg-white rounded-lg shadow p-6">
           <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
-            <Clock size={20} className="mr-2 text-blue-600" />
+            <AccessTimeIcon size={20} className="mr-2 text-blue-600" />
             Time & Location
           </h2>
           <div className="space-y-3">
             <div className="flex items-start gap-3">
-              <Calendar size={18} className="text-gray-400 mt-0.5" />
+              <CalendarTodayIcon size={18} className="text-gray-400 mt-0.5" />
               <div>
                 <p className="font-medium text-gray-900">Date</p>
                 <p className="text-gray-600">
@@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
               </div>
             </div>
             <div className="flex items-start gap-3">
-              <Clock size={18} className="text-gray-400 mt-0.5" />
+              <AccessTimeIcon size={18} className="text-gray-400 mt-0.5" />
               <div>
                 <p className="font-medium text-gray-900">Time</p>
                 <p className="text-gray-600">
@@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
             </div>
             {(currentLesson.location || currentLesson.room) && (
               <div className="flex items-start gap-3">
-                <MapPin size={18} className="text-gray-400 mt-0.5" />
+                <LocationOnIcon size={18} className="text-gray-400 mt-0.5" />
                 <div>
                   <p className="font-medium text-gray-900">Location</p>
                   <p className="text-gray-600">
@@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
 
         <div className="bg-white rounded-lg shadow p-6">
           <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
-            <BookOpen size={20} className="mr-2 text-green-600" />
+            <MenuBookIcon size={20} className="mr-2 text-green-600" />
             Class Information
           </h2>
           <div className="space-y-3">
@@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
         <div className="bg-white rounded-lg shadow">
           <div className="px-6 py-4 border-b border-gray-200">
             <h2 className="text-lg font-semibold text-gray-900 flex items-center">
-              <Users size={20} className="mr-2 text-purple-600" />
+              <PeopleIcon size={20} className="mr-2 text-purple-600" />
               Attendance
             </h2>
           </div>
diff --git a/src/pages/timetable/MyClassesPage.tsx b/src/pages/timetable/MyClassesPage.tsx
index 15fb4c2..70d26e2 100644
--- a/src/pages/timetable/MyClassesPage.tsx
+++ b/src/pages/timetable/MyClassesPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { BookOpen, Users, Clock, ChevronRight, GraduationCap, School } from 'lucide-react';
+import { AccessTimeIcon, KeyboardArrowRightIcon, MenuBookIcon, PeopleIcon, SchoolIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useProfile } from '../../contexts/ProfileContext';
 
@@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
       {teachingClasses.length > 0 && (
         <div className="mb-8">
           <div className="flex items-center gap-2 mb-4">
-            <GraduationCap className="text-purple-600" size={24} />
+            <SchoolIcon className="text-purple-600" size={24} />
             <h2 className="text-xl font-semibold text-gray-900">Teaching</h2>
             <span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
               {teachingClasses.length}
@@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
                         <p className="text-sm text-gray-500">{classItem.class.code}</p>
                       )}
                     </div>
-                    <ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
+                    <KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
                   </div>
 
                   <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@@ -120,12 +120,12 @@ const MyClassesPage: React.FC = () => {
 
                   <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
                     <div className="flex items-center gap-1">
-                      <Users size={14} />
+                      <PeopleIcon size={14} />
                       <span>{classItem.class?.enrolled_count || 0} students</span>
                     </div>
                     {classItem.class?.academic_year && (
                       <div className="flex items-center gap-1">
-                        <School size={14} />
+                        <SchoolIcon size={14} />
                         <span>{classItem.class.academic_year}</span>
                       </div>
                     )}
@@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
       {enrolledClasses.length > 0 && (
         <div className="mb-8">
           <div className="flex items-center gap-2 mb-4">
-            <BookOpen className="text-green-600" size={24} />
+            <MenuBookIcon className="text-green-600" size={24} />
             <h2 className="text-xl font-semibold text-gray-900">Enrolled</h2>
             <span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
               {enrolledClasses.length}
@@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
                         <p className="text-sm text-gray-500">{classItem.class.code}</p>
                       )}
                     </div>
-                    <ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
+                    <KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
                   </div>
 
                   <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@@ -180,14 +180,14 @@ const MyClassesPage: React.FC = () => {
 
                   <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
                     <div className="flex items-center gap-1">
-                      <GraduationCap size={14} />
+                      <SchoolIcon size={14} />
                       <span>
                         {classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
                       </span>
                     </div>
                     {classItem.class?.academic_year && (
                       <div className="flex items-center gap-1">
-                        <School size={14} />
+                        <SchoolIcon size={14} />
                         <span>{classItem.class.academic_year}</span>
                       </div>
                     )}
@@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
       {/* Empty State */}
       {myClasses.length === 0 && (
         <div className="text-center py-16">
-          <BookOpen className="mx-auto h-12 w-12 text-gray-300" />
+          <MenuBookIcon className="mx-auto h-12 w-12 text-gray-300" />
           <h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3>
           <p className="mt-2 text-gray-500">
             You are not enrolled in or teaching any classes yet.
diff --git a/src/pages/timetable/TimetablePage.tsx b/src/pages/timetable/TimetablePage.tsx
index 14ffc8e..4e0bd33 100644
--- a/src/pages/timetable/TimetablePage.tsx
+++ b/src/pages/timetable/TimetablePage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Calendar, Clock, MapPin, Edit, Trash2, Plus, ChevronLeft, ChevronRight } from 'lucide-react';
+import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon, LocationOnIcon } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useProfile } from '../../contexts/ProfileContext';
 import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns';
@@ -81,7 +81,7 @@ const TimetablePage: React.FC = () => {
           to={`/timetable/classes/${currentTimetable.class_id}`}
           className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
         >
-          <ArrowLeft size={18} />
+          <ArrowBackIcon size={18} />
           Back to Class
         </Link>
 
@@ -90,7 +90,7 @@ const TimetablePage: React.FC = () => {
             <h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1>
             <div className="flex items-center gap-4 text-gray-500">
               <span className="flex items-center gap-1">
-                <Calendar size={16} />
+                <CalendarTodayIcon size={16} />
                 {format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')}
                 {currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`}
               </span>
@@ -107,14 +107,14 @@ const TimetablePage: React.FC = () => {
               to={`/timetable/timetables/${timetableId}/lessons/new`}
               className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
-              <Plus size={18} />
+              <AddIcon size={18} />
               Add Lesson
             </Link>
             <button
               onClick={handleDeleteTimetable}
               className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
             >
-              <Trash2 size={18} />
+              <DeleteIcon size={18} />
               Delete
             </button>
           </div>
@@ -131,7 +131,7 @@ const TimetablePage: React.FC = () => {
 
         {currentLessons.length === 0 ? (
           <div className="p-12 text-center text-gray-500">
-            <Clock size={48} className="mx-auto mb-4 opacity-50" />
+            <AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" />
             <p className="text-lg font-medium mb-2">No lessons scheduled</p>
             <p>Add lessons to build your timetable</p>
           </div>
@@ -171,7 +171,7 @@ const TimetablePage: React.FC = () => {
                       </div>
                       {lesson.location && (
                         <div className="flex items-center gap-1 text-sm text-gray-500">
-                          <MapPin size={14} />
+                          <LocationOnIcon size={14} />
                           {lesson.location}
                         </div>
                       )}