diff --git a/src/components/Courses/CourseListItem.tsx b/src/components/Courses/CourseListItem.tsx
index 7a5a83cd..2516aea5 100644
--- a/src/components/Courses/CourseListItem.tsx
+++ b/src/components/Courses/CourseListItem.tsx
@@ -1,10 +1,17 @@
 import { CourseDefinition } from '@/config/supabase';
 import useDictionary from '@/dictionaries/useDictionary';
 import { useSettings } from '@/hooks/contexts/settings';
-import { Button, Chip } from '@mui/joy';
+import { Button, Chip, Tooltip } from '@mui/joy';
 import Link from 'next/link';
-import { FC, useMemo } from 'react';
-import { Users } from 'react-feather';
+import { FC, PropsWithChildren, useMemo } from 'react';
+import { Minus, Plus, Users } from 'react-feather';
+import {getGECType} from '@/helpers/courses';
+
+const HighlightItem: FC<PropsWithChildren<{}>> = ({ children }) => {
+    return <div className='flex flex-row items-center justify-center min-w-[65px] space-x-2 px-2 py-2 rounded-md bg-indigo-50 text-indigo-900 dark:bg-indigo-950 dark:text-indigo-100'>
+        {children}
+    </div>
+}
 
 const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
     const { courses, setCourses } = useSettings();
@@ -15,53 +22,105 @@ const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
         <div className="grid grid-cols-1 lg:grid-rows-none lg:grid-cols-[auto_224px]">
             <div className='flex-1 space-y-4'>
                 <div className="mb-3 space-y-1">
-                    <Link className="font-semibold text-lg text-fuchsia-800 dark:text-fuchsia-500" href={'courses/'+course.raw_id}>{course.department} {course.course}-{course.class} {course.name_zh} - {(course.teacher_zh ?? []).join(',')}</Link>
+                    <Link className="font-semibold text-lg text-[#AF7BE4]" href={'courses/'+course.raw_id}>{course.department} {course.course}-{course.class} {course.name_zh} - {(course.teacher_zh ?? []).join(',')}</Link>
                     <h3 className="text-sm text-gray-800 dark:text-gray-300 mt-0 break-words">{course.name_en} - <span className='w-max'>{(course.teacher_en ?? []).join(',')}</span></h3>
                 </div>
-                <div className="space-y-1 text-black">
+                <div className="space-y-1 text-black dark:text-neutral-200">
                     <p className='text-sm'>{course.課程限制說明}</p>
                     <p className='text-sm'>{course.備註}</p>
-                    <p className='text-sm'>{course.擋修說明}</p>
-                    
-                    <div className="space-x-2 justify-end">
-                        {course.備註?.includes('X-Class') && <Chip
+                    {course.擋修說明 && 
+                    <Tooltip 
+                        placement='bottom-start'
+                        title={<p dangerouslySetInnerHTML={{ __html: course.擋修說明}}></p>}
+                    >
+                        <p className='text-sm underline text-orange-600'>有儅修</p>
+                    </Tooltip>}
+                </div>
+                <div className="space-x-2 justify-end mt-4">
+                        {course.tags.includes('X-Class') && 
+                        <Chip
                             color="danger"
                             disabled={false}
                             size="md"
                             variant="outlined"
                         >X-Class</Chip>}
-                        {course.language == '英' ? <Chip
+                        {course.language == '英' ? 
+                        <Chip
                             color="primary"
                             disabled={false}
                             size="md"
                             variant="outlined"
-                        >English</Chip> :
-                            <Chip
-                                color="success"
-                                disabled={false}
-                                size="md"
-                                variant="outlined"
-                            >國語</Chip>}
-                    </div>
-                    <div>
+                        >
+                            English
+                        </Chip> :
+                        <Chip
+                            color="success"
+                            disabled={false}
+                            size="md"
+                            variant="outlined"
+                        >
+                            國語
+                        </Chip>}
+                        {(course.ge_target?.trim() || "").length > 0 && 
+                        <Chip
+                            color="primary"
+                            disabled={false}
+                            size="md"
+                            variant="outlined"
+                        >{course.ge_target} 通識課</Chip>}
+                        {getGECType(course.ge_type || "") && <Chip
+                            color="warning"
+                            disabled={false}
+                            size="md"
+                            variant="outlined"
+                        >
+                            核通 {getGECType(course.ge_type!)}
+                        </Chip>}
                     </div>
-                </div>
             </div>
             <div className='flex flex-col space-y-3'>
-                <p>{course.credits} {dict.course.credits}</p>
+                <p>{course.semester} 學期</p>
                 {course.venues? 
-                    course.venues.map((vn, i) => <p className='text-blue-600 font-mono'>{vn} <span className='text-black'>{course.times![i]}</span></p>) : 
+                    course.venues.map((vn, i) => <p className='text-blue-600 dark:text-blue-400'>{vn} <span className='text-black dark:text-white'>{course.times![i]}</span></p>) : 
                     <p>No Venues</p>
                 }
-                {course.capacity && <div className="flex flex-row space-x-1 mb-2">
-                    <Users className='w-5 h-5'/>
-                    <span className="">{course.capacity}{course.reserve == 0 ? '' : ` / ${course.reserve}R`}</span>
-                </div>}
+                <div className='flex flex-row space-x-1 text-sm'>
+                    <HighlightItem>
+                        <span className="">
+                            {course.capacity ?? '-'} 
+                            {(course.reserve ?? 0) > 0 && <>
+                                <br/>
+                                {`保 ${course.reserve}`}
+                            </>}
+                        </span>
+                        
+                        <Users className='w-5 h-5'/>
+                    </HighlightItem>
+                    <HighlightItem>
+                        <span className="">{course.credits}</span>
+                        <span className="">{dict.course.credits}</span>
+                    </HighlightItem>
+                    {course.tags.includes('16周') && <HighlightItem>
+                        <span className="">16 週</span>
+                    </HighlightItem>}
+                    {course.tags.includes('18周') && <HighlightItem>
+                        <span className="">18 週</span>
+                    </HighlightItem>}
+                </div>
                 {isCourseSelected ?
-                        <Button color="danger" variant="outlined" onClick={() => setCourses(courses => courses.filter(m => m != course.raw_id))}>
+                        <Button 
+                            color="danger" 
+                            variant="outlined" 
+                            onClick={() => setCourses(courses => courses.filter(m => m != course.raw_id))}
+                            startDecorator={<Minus/>}
+                        >
                             {dict.course.item.remove_from_semester}
                         </Button> :
-                        <Button variant="outlined" onClick={() => setCourses(courses => [...courses, course.raw_id ?? ""])}>
+                        <Button 
+                            variant="outlined" 
+                            onClick={() => setCourses(courses => [...courses, course.raw_id ?? ""])}
+                            startDecorator={<Plus/>}
+                        >
                             {dict.course.item.add_to_semester}
                         </Button>}
             </div>
diff --git a/src/helpers/courses.ts b/src/helpers/courses.ts
index e69de29b..9c8d8ee2 100644
--- a/src/helpers/courses.ts
+++ b/src/helpers/courses.ts
@@ -0,0 +1,7 @@
+export const getGECType = (ge_type: string) => {
+    //核心通識Core GE courses 1, 核心通識Core GE courses 2  <- return this number
+    if(ge_type.includes('核心通識Core GE courses')){
+        return parseInt(ge_type.slice(-1));
+    }
+    else return null;
+}
\ No newline at end of file
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 6ef3dfe0..4f947cb6 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -458,36 +458,60 @@ export interface Database {
       cds_courses: {
         Row: {
           class: number | null
-          course: number | null
+          course: string | null
           credits: number | null
+          cross_discipline: string[] | null
           department: string | null
+          first_specialization: string[] | null
           id: number
+          language: string | null
           name_en: string | null
           name_zh: string | null
-          teacher_en: string[] | null
+          note: string | null
+          raw_id: string
+          second_specialization: string[] | null
+          semester: string | null
           teacher_zh: string[] | null
+          times: string[] | null
+          venues: string[] | null
         }
         Insert: {
           class?: number | null
-          course?: number | null
+          course?: string | null
           credits?: number | null
+          cross_discipline?: string[] | null
           department?: string | null
-          id?: number
+          first_specialization?: string[] | null
+          id: number
+          language?: string | null
           name_en?: string | null
           name_zh?: string | null
-          teacher_en?: string[] | null
+          note?: string | null
+          raw_id: string
+          second_specialization?: string[] | null
+          semester?: string | null
           teacher_zh?: string[] | null
+          times?: string[] | null
+          venues?: string[] | null
         }
         Update: {
           class?: number | null
-          course?: number | null
+          course?: string | null
           credits?: number | null
+          cross_discipline?: string[] | null
           department?: string | null
+          first_specialization?: string[] | null
           id?: number
+          language?: string | null
           name_en?: string | null
           name_zh?: string | null
-          teacher_en?: string[] | null
+          note?: string | null
+          raw_id?: string
+          second_specialization?: string[] | null
+          semester?: string | null
           teacher_zh?: string[] | null
+          times?: string[] | null
+          venues?: string[] | null
         }
         Relationships: []
       }
@@ -512,7 +536,7 @@ export interface Database {
           raw_1_2_specialization: string | null
           raw_cross_discipline: string | null
           raw_extra_selection: string | null
-          raw_id: string | null
+          raw_id: string
           raw_teacher_en: string | null
           raw_teacher_zh: string | null
           raw_time: string | null
@@ -520,6 +544,7 @@ export interface Database {
           reserve: number | null
           second_specialization: string[] | null
           semester: string | null
+          tags: string[]
           teacher_en: string[] | null
           teacher_zh: string[] | null
           times: string[] | null
@@ -552,7 +577,7 @@ export interface Database {
           raw_1_2_specialization?: string | null
           raw_cross_discipline?: string | null
           raw_extra_selection?: string | null
-          raw_id?: string | null
+          raw_id: string
           raw_teacher_en?: string | null
           raw_teacher_zh?: string | null
           raw_time?: string | null
@@ -560,6 +585,7 @@ export interface Database {
           reserve?: number | null
           second_specialization?: string[] | null
           semester?: string | null
+          tags?: string[]
           teacher_en?: string[] | null
           teacher_zh?: string[] | null
           times?: string[] | null
@@ -590,7 +616,7 @@ export interface Database {
           raw_1_2_specialization?: string | null
           raw_cross_discipline?: string | null
           raw_extra_selection?: string | null
-          raw_id?: string | null
+          raw_id?: string
           raw_teacher_en?: string | null
           raw_teacher_zh?: string | null
           raw_time?: string | null
@@ -598,6 +624,7 @@ export interface Database {
           reserve?: number | null
           second_specialization?: string[] | null
           semester?: string | null
+          tags?: string[]
           teacher_en?: string[] | null
           teacher_zh?: string[] | null
           times?: string[] | null
@@ -1226,6 +1253,30 @@ export interface Database {
             }
             Returns: number
           }
+      search_cds_courses: {
+        Args: {
+          keyword: string
+        }
+        Returns: {
+          class: number | null
+          course: string | null
+          credits: number | null
+          cross_discipline: string[] | null
+          department: string | null
+          first_specialization: string[] | null
+          id: number
+          language: string | null
+          name_en: string | null
+          name_zh: string | null
+          note: string | null
+          raw_id: string
+          second_specialization: string[] | null
+          semester: string | null
+          teacher_zh: string[] | null
+          times: string[] | null
+          venues: string[] | null
+        }[]
+      }
       search_courses: {
         Args: {
           keyword: string
@@ -1250,7 +1301,7 @@ export interface Database {
           raw_1_2_specialization: string | null
           raw_cross_discipline: string | null
           raw_extra_selection: string | null
-          raw_id: string | null
+          raw_id: string
           raw_teacher_en: string | null
           raw_teacher_zh: string | null
           raw_time: string | null
@@ -1258,6 +1309,7 @@ export interface Database {
           reserve: number | null
           second_specialization: string[] | null
           semester: string | null
+          tags: string[]
           teacher_en: string[] | null
           teacher_zh: string[] | null
           times: string[] | null