diff --git a/package.json b/package.json
index 1efadad..844df14 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "4.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port=8080",
+    "dev": "vite --port=8080 && npx tailwindcss -i ./src/css/style.css -o ./src/css/tailwind.css --minify",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "hotfix": "npx tailwindcss -i ./src/css/style.css -o ./src/css/tailwind.css --minify --watch"
diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
index 98d99bb..6f9c7f1 100644
--- a/src/components/layout/footer.vue
+++ b/src/components/layout/footer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class = "bg-orange-200 py-3 w-full flex items-center">
+    <div class = "bg-orange-200 py-3 w-full flex items-center select-none">
         <div class = 'font-mono text-center mx-auto'>
             CCU Class 2021-2024
         </div>
diff --git a/src/components/layout/navbar.vue b/src/components/layout/navbar.vue
index a9ec260..6922071 100644
--- a/src/components/layout/navbar.vue
+++ b/src/components/layout/navbar.vue
@@ -4,7 +4,7 @@ const router = useRouter();
 </script>
 
 <template>
-    <div class = "z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between">
+    <div class = "z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between select-none">
         <router-link to = "/">
             <div class = "font-bold text-2xl bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text">
                 中正課表
diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index 5063eed..152c449 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class = "input">
-        <div class = "w-full mx-auto my-6 px-4 py-4 bg-gray-100 rounded-lg shadow-lg md:w-9/12 overflow-x-auto">
-            <div class = 'text-xl font-semibold'>
-                開始建置你的課表    
+    <div class="input">
+        <div class="w-full mx-auto my-6 px-4 py-4 bg-gray-100 rounded-lg shadow-lg md:w-9/12 overflow-x-auto">
+            <div class='text-xl font-semibold'>
+                開始建置你的課表
             </div>
-            <div class = "my-2">
-                <div class = 'flex flex-col py-1 w-40'>
-                    <select class = 'mx-1 py-1 rounded-md text-center' v-model = "searchType">
+            <div class="my-2">
+                <div class='flex flex-col py-1 w-40'>
+                    <select class='mx-1 py-1 rounded-md text-center' v-model="searchType">
                         <option selected>以課程名稱搜尋</option>
                         <option>以系所年級搜尋</option>
                         <option>以時間區間搜尋</option>
@@ -14,52 +14,72 @@
                         <option>自定義新增課程</option>
                     </select>
                 </div>
-                <div class = 'flex flex-col py-1 mx-auto'>
-                    <CourseName v-if = "searchType == '以課程名稱搜尋'" />
-                    <Teacher v-if = "searchType == '以教師名稱搜尋'" />
-                    <Department v-if="searchType == '以系所年級搜尋'"/>
-                    <Time v-if = "searchType == '以時間區間搜尋'" />
-                    <Custom v-if = "searchType == '自定義新增課程'" />
+                <div class='flex flex-col py-1 mx-auto'>
+                    <CourseName v-if="searchType == '以課程名稱搜尋'" />
+                    <Teacher v-if="searchType == '以教師名稱搜尋'" />
+                    <Department v-if="searchType == '以系所年級搜尋'" />
+                    <Time v-if="searchType == '以時間區間搜尋'" />
+                    <Custom v-if="searchType == '自定義新增課程'" />
                 </div>
-                <hr class = 'mx-3 my-3 text-slate-300'>
-                <div class = 'flex place-content-end items-center'>
-                    <div class = "flex justify-between items-center" @click="toggleActive1 = !toggleActive1">
-                        <div class = "w-12 h-6 flex items-center bg-gray-300 rounded-full duration-300 ease-in-out" :class="{ 'bg-orange-300': toggleActive1}">
-                        <div class = "bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-6': toggleActive1}"></div>
+                <hr class='mx-3 my-3 text-slate-300'>
+                <div class='flex place-content-end items-center'>
+                    <div class="flex justify-between items-center" @click="toggleActive1 = !toggleActive1">
+                        <div class="w-12 h-6 flex items-center bg-gray-300 rounded-full duration-300 ease-in-out"
+                            :class="{ 'bg-orange-300': toggleActive1 }">
+                            <div class="bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out"
+                                :class="{ 'translate-x-6': toggleActive1 }"></div>
                         </div>
-                        <span class = 'mx-3 py-1 min-w-[4rem]'>
+                        <span class='mx-3 py-1 min-w-[4rem]'>
                             顯示學分
                         </span>
                     </div>
-                    <button class = 'btn-normal min-w-[8rem]' v-on:click = "show_list">
+                    <button class='btn-normal min-w-[8rem]' v-on:click="show_list">
                         展開課程列表
                     </button>
-                    <button class = 'btn-normal min-w-[4rem]' v-on:click = "clearTable">
+                    <button class='btn-normal min-w-[4rem]' v-on:click="clearTable">
                         清空課表
                     </button>
-                    <button class = 'btn-normal min-w-[8rem]' v-on:click = "download">
+                    <button class='btn-normal min-w-[8rem]' v-on:click="download">
                         下載課表
                     </button>
                 </div>
-                <div id = "class_list" v-if = "class_list_visible === true">
-                    <p class = "text-right py-2 mx-3" v-show = "show_credit">
-                        目前學分: {{credit}}
+                <div id="class_list" v-if="class_list_visible === true">
+                    <p class="text-right py-2 mx-3" v-show="show_credit">
+                        目前學分: {{ credit }}
                     </p>
-                    <table class = "w-full my-1 mb-1">
+                    <p class="mx-3 my-2">
+                        Hint: 課程教室、課程時間皆可<strong>點擊選擇</strong>顯示其他資訊
+                    </p>
+                    <table class="w-full my-1 mb-1">
                         <thead>
                             <tr>
-                                <th v-for = "title in class_list_title" class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    {{ title }}
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    課程名稱
+                                </th>
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class="custom" v-model="showListOptionDefault1">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text
+                                        }}</option>
+                                    </select>
+                                </th>
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class="custom" v-model="showListOptionDefault2">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text
+                                        }}</option>
+                                    </select>
+                                </th>
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    操作
                                 </th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for = "item in courseList" class = "text-center py-2 px-2 border-collapse">
+                            <tr v-for="item in filteredCourseList" class="text-center py-2 px-2 border-collapse">
                                 <td> {{ item.getCourseName() }} </td>
-                                <td> {{ item.getClassroom() }} </td>
-                                <td> {{ item.getStartTime() }} </td>
+                                <td> {{ item.displayField1 }} </td>
+                                <td> {{ item.displayField2 }} </td>
                                 <td>
-                                    <button class = "bg-gray-700 py-2 my-1 px-6 rounded-lg text-white hover:bg-gray-500"
+                                    <button class="bg-gray-700 py-2 my-1 px-6 rounded-lg text-white hover:bg-gray-500"
                                         v-on:click="delete_course(item)">
                                         刪除
                                     </button>
@@ -70,10 +90,10 @@
                 </div>
             </div>
         </div>
-        <div class = "w-full md:w-9/12 mx-auto py-3" v-if = "searchType == '以時間區間搜尋'">
-            
+        <div class="w-full md:w-9/12 mx-auto py-3" v-if="searchType == '以時間區間搜尋'">
+
         </div>
-    </div>    
+    </div>
 </template>
 
 <script setup>
@@ -89,8 +109,9 @@ import { Switch } from 'ant-design-vue'
 import { rowspanize } from '@functions/rowspanizer';
 import { Course, InitTable, GetCourseTable } from '@functions/general';
 import { courseDelete, decreaseCredit } from '@functions/course_delete.ts';
+import { searchDepartmentByOther, searchGradeByOther } from '@functions/course_search'
 import renderImage from '@functions/image_render.ts';
-
+import _ from 'lodash';
 import { useStore } from 'vuex';
 
 const store = useStore();
@@ -105,12 +126,34 @@ let credit = computed(() => store.state.course.credit);
 
 const toggleActive1 = ref(false);
 const toggleActive2 = ref(false);
+const showListOption = [
+    { 'text': '課程教室', 'value': item => item.getClassroom(), 'id': 0 },
+    { 'text': '課程教師', 'value': item => item.getTeacher(), 'id': 1 },
+    { 'text': '課程時間', 'value': item => item.getStartTime(), 'id': 2 },
+    { 'text': '年級 / 向度', 'value': item => item.getGrade(), 'id': 3 },
+    { 'text': '課程系所', 'value': item => item.getDepartment(), 'id': 4},
+    { 'text': '課程編號', 'value': item => item.getCourseID(), 'id': 5 },
+    { 'text': '學分', 'value': item => item.getCredit(), 'id': 6 }
+]
+const showListOptionDefault1 = ref(0);
+const showListOptionDefault2 = ref(2);
+
+const getDisplayField = (item, optionId) => {
+    return showListOption.find(option => option.id === optionId).value(item);
+}
+
+const filteredCourseList = computed(() => {
+    return courseList.value.map((item) => {
+        item['displayField1'] = getDisplayField(item, showListOptionDefault1.value);
+        item['displayField2'] = getDisplayField(item, showListOptionDefault2.value);
+        return item;
+    });
+});
 
 // 控制以系所查詢那邊的衝堂顯示要不要重新渲染
 const setConflictState = (state) => store.dispatch("setrunConflictState", state);
 
-const hidden = () =>
-{
+const hidden = () => {
     store.dispatch("hidden");
 };
 
@@ -119,39 +162,67 @@ import courseCard from "@components/pages/main/courseCard.vue";
 
 const searchType = ref("以課程名稱搜尋")
 
-let class_list_title = ["課程名稱", "課程教室", "課程時間", "操作"];
 let class_list_visible = ref(false);
 let show = computed(() => store.state.course.showTable);
 
 // 這個是打開用時間搜尋的模式的
 let opened = computed(() => store.state.course.timeSearchMode);
 
+onMounted(async () => {
+    let temp_list = _.cloneDeep(courseList.value);
+    let update = false;
+    for(let i = 0; i < temp_list.length; i++){
+        let obj = temp_list[i].courseData;
+        if(obj.is_custom == true)
+        {      
+            if(obj.Teacher == null){ obj.Teacher = "此為自定義課程"; update = true;}
+            if(obj.Credit == null){obj.Credit = 0; update = true;}
+            if(obj.department == "" || obj.department == null){obj.department = "此為自定義課程"; update = true;}
+            if(obj.grade == "" || obj.grade == null){obj.grade = "此為自定義課程"; update = true;}
+            if(obj.ID == null){obj.ID = "此為自定義課程"; update = true;}
+        }
+        else
+        {   
+            if(obj["department"] == null){
+                let result = await searchDepartmentByOther(obj["ID"], obj["course_name"], obj["Teacher"], obj["classroom"], obj["Credit"]);
+                obj["department"] = result[0].department;
+                update = true;
+            }
+            if(obj["grade"] == null){
+                let result = await searchGradeByOther(obj["ID"], obj["course_name"], obj["Teacher"], obj["classroom"], obj["Credit"]);
+                obj["grade"] = result[0].grade;
+                update = true;
+            }
+        }
+    }
+    if(update)
+    {   
+        console.log("update", temp_list);
+        store.dispatch("updateCourseList", temp_list);
+    }
+})
+
 watch(searchType, async (inputValue) => {
-    if(inputValue == "以時間區間搜尋")
-    {
+    if (inputValue == "以時間區間搜尋") {
         setSearchTimeMode(true);
     }
-    else
-    {
+    else {
         setSearchTimeMode(false);
     }
 })
 
 watch(toggleActive1, (inputValue) => {
-    if(inputValue == true)
-    {
+    if (inputValue == true) {
         store.dispatch("show_credit");
     }
-    else
-    {
+    else {
         store.dispatch("hidden_credit");
     }
 })
 
-var delete_course = async function(item)
-{
+var delete_course = async function (item) {
     // 刪除課程
-    if(item.getCredit() != null){
+    if (item.getCredit() != null) {
         decreaseCredit(item.getCredit())
     }
     // 再刪除函式裡面去更改store狀態，改完後再重跑衝堂判定
@@ -160,7 +231,7 @@ var delete_course = async function(item)
     await setConflictState(2);
 }
 
-var show_list = function() {
+var show_list = function () {
     // 顯示課程列表
     class_list_visible.value = !class_list_visible.value
 }
@@ -173,17 +244,16 @@ function Sleep(time) {
     });
 }
 
-var clearTable = function() {
+var clearTable = function () {
     // 顯示確認視窗
-    if(confirm("確定要清空課表嗎？"))
-    {
+    if (confirm("確定要清空課表嗎？")) {
         // 清空課表
         store.dispatch('clearCourse');
         window.location.reload();
     }
-    
+
 }
-var download = function() {
+var download = function () {
     renderImage("WholeTable") // finish 
 }
 
diff --git a/src/components/pages/main/serach_modes/course_name.vue b/src/components/pages/main/serach_modes/course_name.vue
index 19fd7d6..308cd49 100644
--- a/src/components/pages/main/serach_modes/course_name.vue
+++ b/src/components/pages/main/serach_modes/course_name.vue
@@ -48,6 +48,7 @@ watch(searchInput, async (inputValue) => {
         isLoading.value = true;
         show_search_box.value = true;
         data.value = await searchCourse(inputValue)
+        // console.log(data.value);
         data.value = data.value.map(temp => {
             temp['conflict'] = classconflict(temp);
             return temp;
diff --git a/src/css/style.css b/src/css/style.css
index 30fc0e1..11b970f 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -241,4 +241,10 @@ thead > tr > th
 }
 [type=search]::placeholder{
     @apply text-center;
+}
+.custom {
+    @apply bg-transparent border-0 border-b-2 border-gray-500 w-28 text-center;
+}
+.custom:focus {
+    @apply border-none outline-none;
 }
\ No newline at end of file
diff --git a/src/functions/course_add.ts b/src/functions/course_add.ts
index 0fa9406..a4c0ab2 100644
--- a/src/functions/course_add.ts
+++ b/src/functions/course_add.ts
@@ -52,15 +52,17 @@ function courseAdd(courseName: string, classRoom: string, weekDay: string, start
         is_title: false,
         is_course: true,
         color: env.VITE_CARD_DEFAULT_COLOR,
-        ID: null,
-        Credit: null,
+        ID: "此為自定義課程",
+        Credit: 0,
         is_custom: true,
-        Teacher: null,
+        Teacher: "此為自定義課程",
         Memo: null,
         textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
         textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
         uuid: Uuid,
-        length: 0
+        length: 0,
+        department: "此為自定義課程",
+        grade: "此為自定義課程"
     })
     let weekDayIndex = WeekDayToInt[weekDay]; // 2 is the offset of the first two columns
     let startHour = courseToStartIndex[start];
@@ -146,7 +148,7 @@ export function push_to_table(mode : Number, item : any)
     }
     else if(mode == 2)
     {   
-        recordcourse(item)
+        recordcourse(item);
         let time = splittime(item.class_time);
         let data = [];
         let Uuid = uuidv4();
@@ -168,7 +170,9 @@ export function push_to_table(mode : Number, item : any)
                 textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
                 textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
                 uuid: Uuid,
-                length: 0
+                length: 0,
+                department: item.department,
+                grade: item.grade
             }));
         }
         // 成功插入會回傳課程陣列，反之回傳false
@@ -196,7 +200,9 @@ export function push_to_table(mode : Number, item : any)
             textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
             textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
             uuid: Uuid,
-            length: 0
+            length: 0,
+            department: item.department,
+            grade: item.grade
         }));
         store.dispatch('addCredit', Number(item.credit));
     }
diff --git a/src/functions/course_delete.ts b/src/functions/course_delete.ts
index b962f11..d01e958 100644
--- a/src/functions/course_delete.ts
+++ b/src/functions/course_delete.ts
@@ -3,10 +3,8 @@ import store from "../store";
 import { rowspanize } from "./rowspanizer";
 export async function courseDelete(item: Course)
 {   
-    // 比對名子 課程編號 教室 其他不管
-    // console.log(item)
+    // 比對 uuid 其他不管
     let data = JSON.parse(localStorage.getItem("courseTable")!)
-    // console.log(data);
     let table: Course[][] = []
     for(let i = 0; i < data.length; i++)
     {
@@ -31,7 +29,9 @@ export async function courseDelete(item: Course)
                         textColor: "",
                         textStyle: "",
                         uuid: "",
-                        length: 0
+                        length: 0,
+                        department: "",
+                        grade: ""
                     }
                 ))
             }
@@ -52,7 +52,9 @@ export async function courseDelete(item: Course)
                     textColor: data[i][j].courseData.textColor,
                     textStyle: data[i][j].courseData.textStyle,
                     uuid: data[i][j].courseData.uuid,
-                    length: 0
+                    length: 0,
+                    department: data[i][j].courseData.department,
+                    grade: data[i][j].courseData.grade
                 }))
             }
         }
diff --git a/src/functions/course_search.ts b/src/functions/course_search.ts
index 22362b0..9842ac9 100644
--- a/src/functions/course_search.ts
+++ b/src/functions/course_search.ts
@@ -179,3 +179,54 @@ export async function getCourseByDepartment(Department: string) {
     });
 }
 
+export async function searchDepartmentByOther(id : number, class_name : string,
+    teacher : string, class_room : string, credit : number) {
+    
+    const apiUrl = apiSite + "searchCourse/searchDepartmentByOther";
+    
+    return new Promise((resolve, reject) => {
+        axios.get(apiUrl, {
+            params:{
+                id: id,
+                class_name: class_name,
+                teacher: teacher,
+                class_room: class_room,
+                credit: credit
+            }
+        })
+        .then((response) => {
+            resolve(response.data);
+        })
+        .catch((error) => {
+            // 在這裡處理錯誤
+            console.error(error);
+            reject(error);
+        });
+    });
+}
+
+export async function searchGradeByOther(id : number, class_name : string,
+    teacher : string, class_room : string, credit : number) {
+    
+    const apiUrl = apiSite + "searchCourse/searchGradeByOther";
+    
+    return new Promise((resolve, reject) => {
+        axios.get(apiUrl, {
+            params:{
+                id: id,
+                class_name: class_name,
+                teacher: teacher,
+                class_room: class_room,
+                credit: credit
+            }
+        })
+        .then((response) => {
+            resolve(response.data);
+        })
+        .catch((error) => {
+            // 在這裡處理錯誤
+            console.error(error);
+            reject(error);
+        });
+    });
+}
diff --git a/src/functions/general.ts b/src/functions/general.ts
index 59f9c46..42880cf 100644
--- a/src/functions/general.ts
+++ b/src/functions/general.ts
@@ -113,6 +113,8 @@ interface CourseData
     textStyle: string;
     uuid: string;
     length: number;
+    department: string;
+    grade: string;
 }
 
 export class Course
@@ -139,7 +141,9 @@ export class Course
                 textColor: "",
                 textStyle: "",
                 uuid: "",
-                length: 0
+                length: 0,
+                department: "",
+                grade: ""
             };
         }
         else if (typeof courseData === "string") {
@@ -158,7 +162,9 @@ export class Course
                 textColor: "",
                 textStyle: "",
                 uuid: courseData,
-                length: 0
+                length: 0,
+                department: "",
+                grade: ""
             };
             if(start_time) this.courseData.start_time = start_time;
         } else if(typeof courseData === "object"){
@@ -270,6 +276,18 @@ export class Course
     {
         this.courseData.length = length;
     }
+    public getDepartment() : string
+    {
+        return this.courseData.department;
+    }
+    public getGrade() : string
+    {
+        return this.courseData.grade;
+    }
+    public getCourseID() : string
+    {
+        return this.courseData.ID!;
+    }
 }
 
 
diff --git a/src/store/course.ts b/src/store/course.ts
index e01ab16..83df287 100644
--- a/src/store/course.ts
+++ b/src/store/course.ts
@@ -85,7 +85,7 @@ const store: Module<State, any> = {
             state.classStorage = Transfer(data);
             rowspanize(state.classStorage);
         },
-        addCourse(state: State, data : any){
+        addCourse(state: State, data : Array<Array<Course>>){
             // console.log(state.classStorage);
             state.classStorage = data;
             // console.log(state.classStorage);
@@ -121,7 +121,7 @@ const store: Module<State, any> = {
             let List = state.classListStorage;
             let temp :Array<Course> = [];
             for(let i = 0; i < List.length; i++){
-                if(List[i].getCourseName() == Class.getCourseName() && List[i].getId() == Class.getId() && List[i].getClassroom() == Class.getClassroom()){
+                if(List[i].getUuid() == Class.getUuid()){
                     continue;
                 }
                 else{
@@ -174,6 +174,10 @@ const store: Module<State, any> = {
         },
         setrunConflictState(state: State, arg: number){
             state.runConflict = arg;
+        },
+        updateCourseList(state: State, data: Array<Course>){
+            state.classListStorage = data;
+            localStorage.setItem("courseList", JSON.stringify(state.classListStorage));
         }
     },
     actions: {
@@ -253,6 +257,9 @@ const store: Module<State, any> = {
         },
         setrunConflictState(context: any, arg: number){
             context.commit("setrunConflictState", arg);
+        },
+        updateCourseList(context: any, data: any){
+            context.commit("updateCourseList", data);
         }
     }
 };