diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/js/components/chooseDepartment.vue b/js/components/chooseDepartment.vue
index 2ffa748..1e3ea35 100644
--- a/js/components/chooseDepartment.vue
+++ b/js/components/chooseDepartment.vue
@@ -19,19 +19,24 @@ var chooseDepartment = {
     },
     template: `
     
-    <div>
-        <h5>1. 「課程名稱」直接搜尋</h5>
-        <input class="form-control" type='text' v-model='initFounded'>
-        <br>或<br><br>
-        <h5>1. 選擇類別</h5>
-        <select class="custom-select mr-sm-2" v-model="initSelect">
-            <option v-for="(item, index) in departments" :key="index" 
-                v-bind:value="item"
-            >
-                {{ item }}
-            </option>
-        </select>
-
+    <div class="mx-auto">
+        <div>
+            <h5>1. 「課程名稱」直接搜尋</h5>
+            <input class="form-control" type='text' v-model='initFounded'>
+        </div>
+        <div class="text-center my-2">
+            <h5>或</h5>
+        </div>
+        <div>
+            <h5>1. 選擇類別</h5>
+            <select class="custom-select mr-sm-2" v-model="initSelect">
+                <option v-for="(item, index) in departments" :key="index" 
+                    v-bind:value="item"
+                >
+                    {{ item }}
+                </option>
+            </select>
+        </div>
     </div>
     `,
 }
\ No newline at end of file
diff --git a/js/components/coursesList.vue b/js/components/coursesList.vue
index b2aae64..f576c3b 100644
--- a/js/components/coursesList.vue
+++ b/js/components/coursesList.vue
@@ -1,61 +1,61 @@
 var coursesList = {
     props: ['courses', 'selected_d', 'selected_c', 'find_name'],
-    data: function(){
+    data: function () {
         return {
             selectedTime: [],
             foundedCourses: []
         }
     },
     methods: {
-        'getTime': function(timeString){
-            if(timeString==null){
+        'getTime': function (timeString) {
+            if (timeString == null) {
                 return ""
             }
-            
+
             ans = []
             number = ""
-            for(var i of timeString){
-                if(i>="0" && i<="9"){
+            for (var i of timeString) {
+                if (i >= "0" && i <= "9") {
                     number = i
-                }else if(i>="a" && i<="z"){
-                    ans.push(number+i)
+                } else if (i >= "a" && i <= "z") {
+                    ans.push(number + i)
                 }
-                else{
+                else {
                     ans.push(timeString)
                     break
                 }
             }
             return ans
         },
-        'isOK': function(course){
+        'isOK': function (course) {
             var time = this.getTime(course.time)
             // console.log(course.name, " ", time)
-            for(t of time){
-                for(st of this.selectedTime){
-                    if(t==st)
+            for (t of time) {
+                for (st of this.selectedTime) {
+                    if (t == st)
                         return false
                 }
             }
             return true
         },
-        'log': function(name, data){
+        'log': function (name, data) {
             console.log(name, data)
         }
     },
     watch: {
-        'selected_c': function(){
+        'selected_c': function () {
             var temp = []
-            for(var c of this.selected_c){
-                if(c.temp==false){
+            for (var c of this.selected_c) {
+                if (c.temp == false) {
                     temp.push(c.time)
                 }
             }
             this.selectedTime = temp
         },
-        'find_name': function(){
+        'find_name': function () {
             var temp = []
-            for(var c of this.courses){
-                if(c.name.indexOf(this.find_name) != -1){
+            for (var c of this.courses) {
+                if (c.name.indexOf(this.find_name) != -1) {
                     temp.push(c)
                 }
             }
@@ -63,7 +63,7 @@ var coursesList = {
         }
     },
     template: `
-    <div>
+    <div class="mx-auto mb-4 border">
 		<h5>2. 安排課程</h5>
 		<p style="color: orange" v-if="find_name"> ※ 已套用「名稱」搜尋： <br>{{find_name}}</p>
 		<div style="width:275px;height:500px;overflow:auto">
@@ -72,20 +72,18 @@ var coursesList = {
                     <tr v-for="(course, index) in foundedCourses" :key="index"
                     v-on:mouseenter="$emit('show-temp', course)" v-on:mouseleave="$emit('delete-temp', course)">
 						<td>
-							<div class="container">
-								<div class="row">
+							<div class="container row py-2 px-0">
+								<div class="col-12 pr-1">
 									<b>{{ course.name }} (<a v-bind:href="course.link">詳</a>)</b>
 									—— {{ (course.department.indexOf(', ')!=-1) ?(course.department.split(', ')[1]) :(course.department) }}
 								</div>
-								<div class="row">
-									<div class="col-sm-8">
-										{{ course.teacher }} ‧ {{ course.time }} 
-									</div>
-									<div class="col-sm-4">
-										<button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
-											<span>&#43;</span>
-										</button>
-									</div>
+								<div class="col-sm-8 pr-1">
+									{{ course.teacher }} ‧ {{ course.time }} 
+								</div>
+								<div class="col-sm-4 pr-1">
+								    <button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
+										<span>&#43;</span>
+									</button>
 								</div>
 							</div>
 						</td>
@@ -96,21 +94,19 @@ var coursesList = {
                         v-if="course.department == selected_d"
                         v-on:mouseenter="$emit('show-temp', course)" v-on:mouseleave="$emit('delete-temp', course)">
 						<td>
-							<div class="container">
-								<div class="row">
-									<b>{{ course.name }} (<a v-bind:href="course.link">詳</a>)</b>
-								</div>
-								<div class="row">
-									<div class="col-sm-8">
-										{{ course.teacher }} ‧ {{ course.time }} 
-									</div>
-									<div class="col-sm-4">
-										<button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
-											<span>&#43;</span>
-										</button>
-									</div>
-								</div>
-							</div>
+                        <div class="container row py-2 px-0">
+                            <div class="col-12 pr-1">
+                                <b>{{ course.name }} (<a v-bind:href="course.link">詳</a>)</b>
+                            </div>
+                            <div class="col-sm-8 pr-1">
+                                {{ course.teacher }} ‧ {{ course.time }} 
+                            </div>
+                            <div class="col-sm-4 pr-1">
+                                <button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
+                                    <span>&#43;</span>
+                                </button>
+                            </div>
+                        </div>
 						</td>
 					</tr>
 				</template>
diff --git a/js/components/main.vue b/js/components/main.vue
index ebee8bb..a271e99 100644
--- a/js/components/main.vue
+++ b/js/components/main.vue
@@ -263,16 +263,16 @@ var mainWindow = {
         </div>
         <div class="row">
             <div class="col-lg-3">
-                <div class="row">
+                <div class="row mx-auto mb-2">
                     <choose-department 
                         v-bind:departments="departments"
                         v-bind:selected="selectDepartment"
                         v-on:selectok="select"
                         v-on:foundedok="founded"
                     >
-                    </choose-department><br>
-                </div><br><br>
-                <div class="row">
+                    </choose-department>
+                </div>
+                <div class="row mx-auto mb-2">
                     <course-anslist
                         v-bind:courses="courses"
                         v-bind:selected_d="selectDepartment"
@@ -283,7 +283,7 @@ var mainWindow = {
                         v-on:delete-temp="deleteTemp"
                     >
                     </course-anslist>
-                </div><br><br>
+                </div>
             </div>
 
             <div class="col-lg-9 table-responsive " >