diff --git a/components/student.tsx b/components/student.tsx
index 2e7dd93..2e2f090 100644
--- a/components/student.tsx
+++ b/components/student.tsx
@@ -1,6 +1,7 @@
-import ItemStyles from '@/styles/Item.module.scss';
+import Image from 'next/image';
 import { studentsJson } from './students/students';
 import { getStudentInfo } from './students/infoStudents';
+import ItemStyles from '@/styles/Item.module.scss';
 
 interface StudentProps {
     id: number,
@@ -29,4 +30,8 @@ export default function Student({ id, allInfo, onClick, select, onError }: Stude
             <div className={ItemStyles.line} />
         </div>
     );
+}
+
+export function AllStudentsIcon() {
+    return (<Image src='/api/icon/line?fill=63adc6' alt='All Students Icon' />);
 }
\ No newline at end of file
diff --git a/pages/chat.tsx b/pages/chat.tsx
index dc1b744..3bf85c7 100644
--- a/pages/chat.tsx
+++ b/pages/chat.tsx
@@ -1,7 +1,8 @@
 //Components
+import Image from 'next/image';
 import { NextSeo } from 'next-seo';
 import MainNode from '@/components/main';
-import Student from '@/components/student';
+import Student, { AllStudentsIcon } from '@/components/student';
 
 //Styles
 import ItemStyles from '@/styles/Item.module.scss';
@@ -27,7 +28,7 @@ function Content({ id, allInfo }: ContentProps) {
     return (
         <div id={ItemStyles.content}>
             <div className={ItemStyles.img}>
-                <img
+                <Image
                     className={ItemStyles.col}
                     src={`https://schale.gg/images/student/collection/${info.schale?.CollectionTexture}.webp`}
                     alt={`${info.schale?.Name} collection image`}
@@ -38,7 +39,7 @@ function Content({ id, allInfo }: ContentProps) {
                 <p className={ItemStyles.info}>{info.file?.info}</p>
             </div>
             <div className={ItemStyles.birthday}>
-                <img
+                <Image
                     src='/api/icon/birth?fill=5f7c8c'
                     alt={`${info.schale?.Name} birthday icon`}
                 />
@@ -171,7 +172,7 @@ export default function Info() {
                 </div>
                 <div style={{ height: 70 }} />
                 <div id={ItemStyles.all}>
-                    <img src='/api/icon/line?fill=63adc6' />
+                    <AllStudentsIcon/>
                     <p>所有学生</p>
                 </div>
                 <div id={ItemStyles.students}>
diff --git a/pages/info.tsx b/pages/info.tsx
index 54f4a58..1b112d0 100644
--- a/pages/info.tsx
+++ b/pages/info.tsx
@@ -1,7 +1,8 @@
 //Components
+import Image from 'next/image';
 import { NextSeo } from 'next-seo';
 import MainNode from '@/components/main';
-import Student from '@/components/student';
+import Student, { AllStudentsIcon } from '@/components/student';
 
 //Styles
 import styles from '@/styles/Item.module.scss';
@@ -23,7 +24,7 @@ function Content({ id, allInfo }: ContentProps) {
     return (
         <div id={styles.content}>
             <div className={styles.img}>
-                <img
+                <Image
                     className={styles.col}
                     src={`https://schale.gg/images/student/collection/${info.schale?.CollectionTexture}.webp`}
                     alt={`${info.schale?.Name} collection image`}
@@ -34,7 +35,7 @@ function Content({ id, allInfo }: ContentProps) {
                 <p className={styles.info}>{info.file?.info}</p>
             </div>
             <div className={styles.birthday}>
-                <img
+                <Image
                     src='/api/icon/birth?fill=5f7c8c'
                     alt={`${info.schale?.Name} birthday icon`}
                 />
@@ -70,7 +71,7 @@ export default function Info() {
                 </div>
                 <div style={{ height: 70 }} />
                 <div id={styles.all}>
-                    <img src='/api/icon/line?fill=63adc6' />
+                    <AllStudentsIcon/>
                     <p>所有学生</p>
                 </div>
                 <div id={styles.students}>