diff --git a/src/components/blocks/LectureGroupBlock.jsx b/src/components/blocks/LectureGroupBlock.tsx
similarity index 55%
rename from src/components/blocks/LectureGroupBlock.jsx
rename to src/components/blocks/LectureGroupBlock.tsx
index a596f40..1e50321 100644
--- a/src/components/blocks/LectureGroupBlock.jsx
+++ b/src/components/blocks/LectureGroupBlock.tsx
@@ -1,12 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
+import { useTranslation } from 'react-i18next';
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lectureType from '../../shapes/model/subject/LectureType';
+
+interface LectureGroupBlockProps {
+  lectureGroup: lectureType[];
+  isRaised: boolean;
+  isDimmed: boolean;
+  isTaken: boolean;
+  children?: React.ReactNode;
+}
+
+const LectureGroupBlock: React.FC<LectureGroupBlockProps> = ({
+  lectureGroup,
+  isRaised,
+  isDimmed,
+  isTaken,
+  children,
+}) => {
+  const { t } = useTranslation();
 
-const LectureGroupBlock = ({ t, lectureGroup, isRaised, isDimmed, isTaken, children }) => {
   return (
     <div
       className={classNames(
@@ -25,11 +39,4 @@ const LectureGroupBlock = ({ t, lectureGroup, isRaised, isDimmed, isTaken, child
   );
 };
 
-LectureGroupBlock.propTypes = {
-  lectureGroup: PropTypes.arrayOf(lectureShape).isRequired,
-  isRaised: PropTypes.bool.isRequired,
-  isDimmed: PropTypes.bool.isRequired,
-  isTaken: PropTypes.bool.isRequired,
-};
-
-export default withTranslation()(React.memo(LectureGroupBlock));
+export default React.memo(LectureGroupBlock);
diff --git a/src/components/blocks/LectureGroupBlockRow.jsx b/src/components/blocks/LectureGroupBlockRow.tsx
similarity index 82%
rename from src/components/blocks/LectureGroupBlockRow.jsx
rename to src/components/blocks/LectureGroupBlockRow.tsx
index d6e4816..e816827 100644
--- a/src/components/blocks/LectureGroupBlockRow.jsx
+++ b/src/components/blocks/LectureGroupBlockRow.tsx
@@ -1,14 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 import { getProfessorsShortStr, getClassroomStr } from '../../utils/lectureUtils';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lectureType from '@/shapes/model/subject/LectureType';
 
-const LectureGroupBlockRow = ({
-  t,
+interface LectureGroupBlockRowProps {
+  lecture: lectureType;
+  isHighlighted: boolean;
+  inTimetable: boolean;
+  isTimetableReadonly: boolean;
+  inCart: boolean;
+  fromCart: boolean;
+  addToCart: (lecture: lectureType) => void;
+  addToTable: (lecture: lectureType) => void;
+  deleteFromCart: (lecture: lectureType) => void;
+  onMouseOver?: (lecture: lectureType) => void;
+  onMouseOut?: (lecture: lectureType) => void;
+  onClick?: (lecture: lectureType) => void;
+}
+
+const LectureGroupBlockRow: React.FC<LectureGroupBlockRowProps> = ({
   lecture,
   isHighlighted,
   inTimetable,
@@ -22,6 +35,7 @@ const LectureGroupBlockRow = ({
   onMouseOut,
   onClick,
 }) => {
+  const { t } = useTranslation();
   const getClass = (lec) => {
     switch (lec.class_title.length) {
       case 1:
@@ -37,17 +51,17 @@ const LectureGroupBlockRow = ({
     ? (event) => {
         onMouseOver(lecture);
       }
-    : null;
+    : undefined;
   const handleMouseOut = onMouseOut
     ? (event) => {
         onMouseOut(lecture);
       }
-    : null;
+    : undefined;
   const handleClick = onClick
     ? (event) => {
         onClick(lecture);
       }
-    : null;
+    : undefined;
   const handleDeleteFromCartClick = (event) => {
     event.stopPropagation();
     deleteFromCart(lecture);
@@ -133,19 +147,4 @@ const LectureGroupBlockRow = ({
   );
 };
 
-LectureGroupBlockRow.propTypes = {
-  lecture: lectureShape.isRequired,
-  isHighlighted: PropTypes.bool.isRequired,
-  inTimetable: PropTypes.bool.isRequired,
-  isTimetableReadonly: PropTypes.bool.isRequired,
-  inCart: PropTypes.bool.isRequired,
-  fromCart: PropTypes.bool.isRequired,
-  addToCart: PropTypes.func.isRequired,
-  addToTable: PropTypes.func.isRequired,
-  deleteFromCart: PropTypes.func.isRequired,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onClick: PropTypes.func,
-};
-
-export default withTranslation()(React.memo(LectureGroupBlockRow));
+export default React.memo(LectureGroupBlockRow);
diff --git a/src/components/blocks/LectureGroupSimpleBlock.jsx b/src/components/blocks/LectureGroupSimpleBlock.tsx
similarity index 77%
rename from src/components/blocks/LectureGroupSimpleBlock.jsx
rename to src/components/blocks/LectureGroupSimpleBlock.tsx
index 088c876..36ad61c 100644
--- a/src/components/blocks/LectureGroupSimpleBlock.jsx
+++ b/src/components/blocks/LectureGroupSimpleBlock.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 import { getProfessorsShortStr } from '../../utils/lectureUtils';
+import lectureType from '../../shapes/model/subject/LectureType';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+interface LectureGroupSimpleBlockProps {
+  lectures: lectureType[];
+}
 
-const LectureGroupSimpleBlock = ({ t, lectures }) => {
+const LectureGroupSimpleBlock: React.FC<LectureGroupSimpleBlockProps> = ({ lectures }) => {
+  const { t } = useTranslation();
   const getClass = (lecture) => {
     if (!lecture.class_title) {
       return classNames('');
@@ -37,8 +41,4 @@ const LectureGroupSimpleBlock = ({ t, lectures }) => {
   );
 };
 
-LectureGroupSimpleBlock.propTypes = {
-  lectures: PropTypes.arrayOf(lectureShape).isRequired,
-};
-
-export default withTranslation()(React.memo(LectureGroupSimpleBlock));
+export default React.memo(LectureGroupSimpleBlock);
diff --git a/src/components/blocks/LectureSimpleBlock.jsx b/src/components/blocks/LectureSimpleBlock.tsx
similarity index 53%
rename from src/components/blocks/LectureSimpleBlock.jsx
rename to src/components/blocks/LectureSimpleBlock.tsx
index 6acb06c..dcdee22 100644
--- a/src/components/blocks/LectureSimpleBlock.jsx
+++ b/src/components/blocks/LectureSimpleBlock.tsx
@@ -1,17 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lectureType from '@/shapes/model/subject/LectureType';
+
+interface LectureSimpleBlockProps {
+  lecture: lectureType;
+  isRaised: boolean;
+  isDimmed: boolean;
+  hasReview: boolean;
+  onClick?: (lecture: lectureType) => void; ///
+}
+const LectureSimpleBlock: React.FC<LectureSimpleBlockProps> = ({
+  lecture,
+  isRaised,
+  isDimmed,
+  hasReview,
+  onClick,
+}) => {
+  const { t } = useTranslation();
 
-const LectureSimpleBlock = ({ t, lecture, isRaised, isDimmed, hasReview, onClick }) => {
   const handleClick = onClick
     ? (event) => {
         onClick(lecture);
       }
-    : null;
+    : undefined;
 
   return (
     <div
@@ -33,12 +48,12 @@ const LectureSimpleBlock = ({ t, lecture, isRaised, isDimmed, hasReview, onClick
   );
 };
 
-LectureSimpleBlock.propTypes = {
-  lecture: lectureShape.isRequired,
-  isRaised: PropTypes.bool.isRequired,
-  isDimmed: PropTypes.bool.isRequired,
-  hasReview: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
+// LectureSimpleBlock.propTypes = {
+//   lecture: lectureShape.isRequired,
+//   isRaised: PropTypes.bool.isRequired,
+//   isDimmed: PropTypes.bool.isRequired,
+//   hasReview: PropTypes.bool.isRequired,
+//   onClick: PropTypes.func.isRequired,
+// };
 
-export default withTranslation()(React.memo(LectureSimpleBlock));
+export default React.memo(LectureSimpleBlock);
diff --git a/src/shapes/model/subject/ClasstimeShape.tsx b/src/shapes/model/subject/ClasstimeShape.tsx
new file mode 100644
index 0000000..b45a202
--- /dev/null
+++ b/src/shapes/model/subject/ClasstimeShape.tsx
@@ -0,0 +1,13 @@
+interface classtimeType {
+  building_code: string;
+  classroom: string;
+  classroom_en: string;
+  classroom_short: string;
+  classroom_short_en: string;
+  room_name: string;
+  day: number;
+  begin: number;
+  end: number;
+}
+
+export default classtimeType;
diff --git a/src/shapes/model/subject/ExamtimeShape.tsx b/src/shapes/model/subject/ExamtimeShape.tsx
new file mode 100644
index 0000000..69831ad
--- /dev/null
+++ b/src/shapes/model/subject/ExamtimeShape.tsx
@@ -0,0 +1,8 @@
+type examtimeType = {
+  day: number;
+  str: string;
+  str_en: string;
+  begin: number;
+  end: number;
+};
+export default examtimeType;
diff --git a/src/shapes/model/subject/LectureType.tsx b/src/shapes/model/subject/LectureType.tsx
new file mode 100644
index 0000000..2a40e23
--- /dev/null
+++ b/src/shapes/model/subject/LectureType.tsx
@@ -0,0 +1,40 @@
+import classtimeType from './ClasstimeShape';
+import examtimeType from './ExamtimeShape';
+import nestedProfessorType from './NestedProfessorShape';
+
+interface lectureType {
+  id: number;
+  title: string;
+  title_en: string;
+  course: number;
+  old_code: string;
+  class_no: string;
+  year: number;
+  semester: 1 | 2 | 3 | 4;
+  code: string;
+  department: number;
+  department_code: string;
+  department_name: string;
+  department_name_en: string;
+  type: string;
+  type_en: string;
+  limit: number;
+  num_people: number;
+  is_english: boolean;
+  num_classes: number;
+  num_labs: number;
+  credit: number;
+  credit_au: number;
+  common_title: string;
+  common_title_en: string;
+  class_title: string;
+  class_title_en: string;
+  review_total_weight: number;
+  professors: nestedProfessorType;
+  grade: number;
+  load: number;
+  speech: number;
+  classtimes: classtimeType[];
+  examtimes: examtimeType[];
+}
+export default lectureType;
diff --git a/src/shapes/model/subject/NestedProfessorShape.tsx b/src/shapes/model/subject/NestedProfessorShape.tsx
new file mode 100644
index 0000000..c9e2d61
--- /dev/null
+++ b/src/shapes/model/subject/NestedProfessorShape.tsx
@@ -0,0 +1,7 @@
+type nestedProfessorType = {
+  name: string;
+  name_en: string;
+  professor_id: number;
+  review_total_weight: number;
+};
+export default nestedProfessorType;