diff --git a/Controllers/ApiController.cs b/Controllers/ApiController.cs
index 6920cdb..e1456fc 100644
--- a/Controllers/ApiController.cs
+++ b/Controllers/ApiController.cs
@@ -56,7 +56,25 @@ namespace Journeys_WantHome.Controllers
             this._httpContextAccessor = httpContextAccessor;
         }
 
-       
+        [Route("mediaSpecList")]
+        public ActionResult MediaSpecList(IFormCollection obj) {
+            mediaSpecListResult ret = new mediaSpecListResult();
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            string optionItem_uid = obj["optionItem_uid"].ToString();
+
+            ret.mediaSpecList = conn.Query<mediaItem>("select * from mediaItem where mediaItem_ishide = 'N' and optionItem_uid = @optionItem_uid order by mediaItem_order", new { optionItem_uid = optionItem_uid }).ToList();
+
+            ret.ret = "yes";
+
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
 
         [Route("updateTags")]
         public ActionResult UpdateTags(IFormCollection obj) {
@@ -346,10 +364,23 @@ namespace Journeys_WantHome.Controllers
                 return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
             }
 
-            List<project> projects = conn.Query<project>("select * from project  order by project_modifydate desc ").ToList();
+            string project_year = obj["year"].ToString();
+            string project_month = obj["month"].ToString();
+
+            if (project_year == "")
+            {
+                List<project> projects = conn.Query<project>("select * from project  order by project_modifydate desc ").ToList();
+                ret.projectList = projects;
+            }
+            else {
+                List<project> projects = conn.Query<project>("select * from project where project_year = @project_year and project_month = @project_month  order by project_modifydate desc ", new { project_year = project_year, project_month = project_month }).ToList();
+                ret.projectList = projects;
+            }
+
+            
 
             ret.ret = "yes";
-            ret.projectList = projects;
+            
             return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
         }
 
@@ -913,7 +944,13 @@ namespace Journeys_WantHome.Controllers
         
     }
 
-    
+    public class mediaSpecListResult {
+        public string ret { get; set; } = "no";
+        public string err_code { get; set; } = "0000";
+        public string message { get; set; } = "";
+
+        public List<mediaItem> mediaSpecList = new List<mediaItem>();
+    }
 
     public class updatTagResult {
         public string ret { get; set; } = "no";
diff --git a/Models/DbTableClass.cs b/Models/DbTableClass.cs
index 857413e..f45181a 100644
--- a/Models/DbTableClass.cs
+++ b/Models/DbTableClass.cs
@@ -8,6 +8,71 @@ using Newtonsoft.Json.Linq;
 
 public class DbTableClass
 {
+    [Table("kolProjectPrice")]
+    public class kolProjectPrice
+    {
+        [JsonIgnore]
+        [Key]
+        public int kolProjectPrice_sn { get; set; }
+        public string kolProjectPrice_uid { get; set; } = "";
+        public string optionItem_uid { get; set; } = "";
+        public string mediaItem_uid { get; set; } = "";
+        public string kolProjectPrice_other { get; set; } = "";
+        public string kolProjectPrice_num { get; set; } = "";
+        public int kolProjectPrice_cost { get; set; } = 0;
+        public string kolProjectPrice_date { get; set; } = "";
+        public DateTime kolProjectPrice_createdate { get; set; } = DateTime.Now;
+        public DateTime kolProjectPrice_modifydate { get; set; } = DateTime.Now;
+    }
+
+
+
+    [Table("kolProjectLink")]
+    public class kolProjectLink
+    {
+        [JsonIgnore]
+        [Key]
+        public int kolProjectLink_sn { get; set; }
+        public string kolProjectLink_uid { get; set; } = "";
+        public string kolProject_uid { get; set; } = "";
+        public string kolProjectLink_url { get; set; } = "";
+        public string kolProjectLink_text { get; set; } = "";
+        public DateTime kolProjectLink_createdate { get; set; } = DateTime.Now;
+    }
+
+    [Table("kolProjectImage")]
+    public class kolProjectImage
+    {
+        [JsonIgnore]
+        [Key]
+        public int kolProjectImage_sn { get; set; }
+        public string kolProjectImage_uid { get; set; } = "";
+        public string kolProject_uid { get; set; } = "";
+        public string kolProjectImage_photo { get; set; } = "";
+        public DateTime kolProjectImage_createdate { get; set; } = DateTime.Now;
+    }
+
+    [Table("kolProject")]
+    public class kolProject
+    {
+        [JsonIgnore]
+        [Key]
+        public int kolProject_sn { get; set; }
+        public string kolProject_uid { get; set; } = "";
+        public string kol_uid { get; set; } = "";
+        public string project_uid { get; set; } = "";
+        public string kolProject_isExec { get; set; } = "N";
+        public string kolProject_noExecReason { get; set; } = "";
+        public string kolProject_quility { get; set; } = "";
+        public string kolProject_memo { get; set; } = "";
+        public string user_uid { get; set; } = "";
+        public string user_name { get; set; } = "";
+        public DateTime kolProject_createdate { get; set; } = DateTime.Now;
+        public DateTime kolProject_modifydate { get; set; } = DateTime.Now;
+    }
+
+
+
     [Table("mediaItem")]
     public class mediaItem
     {
diff --git a/Views/Home/KolList.cshtml b/Views/Home/KolList.cshtml
index 284cead..645b609 100644
--- a/Views/Home/KolList.cshtml
+++ b/Views/Home/KolList.cshtml
@@ -285,6 +285,333 @@
                         </div>
                     </div><!-- /.form-group -->
 
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="optionItemDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+
+
+<!-- .modal -->
+<form id="clientProjectForm" name="clientProjectForm">
+    <div class="modal fade" id="clientProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientProjectFormLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog modal-xl" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="clientNewModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="洽談與合作案件" required="">
+                    </h6>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+                    </button>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="method" />
+                    <input type="hidden" id="kol_uid" />
+                    <!-- .page-section -->
+                    <div class="page-section">
+                        <button type="button" id="kolProjectNewBtn" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
+                        <!-- .card -->
+                        <div class="card card-fluid">
+                            <!-- .card-body -->
+                            <div class="card-body">
+                                <!-- .table -->
+                                <table id="dt-responsive" class="table dt-responsive nowrap w-100">
+                                    <thead>
+                                        <tr>            
+                                            <th> 專案名稱 </th>
+                                            <th> 狀態 </th>
+                                            <th> 評價 </th>
+                                            <th> 填寫人 </th>
+                                            <th> 資料異動時間 </th>
+                                            <th>  </th>
+                                        </tr>
+                                    </thead>
+
+                                </table><!-- /.table -->
+                            </div><!-- /.card-body -->
+                        </div><!-- /.card -->
+                    </div><!-- /.page-section -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer" style="display: none;">
+                    <button type="button" id="kolSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+<!-- .modal -->
+<form id="clientNewKolProjectForm" name="clientNewKolProjectForm">
+    <div class="modal fade" id="clientNewKolProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientNewKolProjectLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog modal-lg" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="clientNewModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="KOL 資料維護" required="">
+                    </h6>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+                    </button>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="kolProject_method" />
+                    <input type="hidden" id="kolProject_uid" />
+                    <!-- .form-row -->
+                    <div class="form-row">
+                        <div class="col-md-12" id="project_year_month_div">
+                            <div class="row">
+                                <div class="col-md-2" id="user_name_div">
+                                    <div class="form-group">
+                                        <label for="project_year">年度</label>
+                                        <select class="custom-select" id="project_year" required="">
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-md-2" id="user_id_div">
+                                    <div class="form-group">
+                                        <label for="project_month">月份</label>
+                                        <select class="custom-select" id="project_month" required="">
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-md-8">
+                                    <div class="form-group">
+                                        <label for="project_name">專案名稱</label> 
+                                        <select class="custom-select" id="project_select" required="">
+                                        </select>
+                                    </div>
+                                </div>
+                            </<div>
+                            <div class="card-footer">&nbsp;</div>
+                        </div>
+
+
+                             
+                        <div class="col-md-12" id="cooperateType_div">
+                            <div class="form-group">
+                            </div>
+                                    <div class="card-footer">&nbsp;</div>
+                        </div>
+                        
+                        <div class="col-md-12">
+                                    <h2 class="card-title"> 報價 </h2><!-- .table-responsive -->
+                                    <div class="table-responsive">
+                                        <table class="table table-hover" style="min-width: 678px" id="price_table">
+                                            <thead>
+                                                <tr>
+                                                    <th style="width: 10%;"> 合作平台 </th>
+                                                    <th style="width: 25%;"> 規格 </th>
+                                                    <th style="width: 12%;"> 數量 </th>
+                                                    <th style="width: 12%;"> 報價 </th>
+                                                    <th> 資料日期</th>
+                                                    <th style="width: 18%;"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td class="align-middle">  Instagram </td>
+                                                    <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                                    <td class="align-middle"> zamy_ding </td>
+                                                    <td class="align-middle"> 奎丁 </td>
+                                                    <td class="align-middle"> 754000 </td>
+                                                    <td class="align-middle text-right">
+                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div><!-- /.table-responsive -->
+                            <!-- .card-footer -->
+                            <div class="card-footer">
+                                <a href="javascript: void();" id="addSpecBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增報價資料</a>
+                            </div><!-- /.card-footer -->
+                        </div>
+                        <div class="col-md-12">
+                                    <!-- .form-group -->
+                                    <div class="form-group">
+                                        <h2 class="card-title">確認合作</h2>
+                                        <div class="custom-control custom-radio mb-1">
+                                            <input type="radio" class="custom-control-input" name="rdGroup3" id="rd7"> <label class="custom-control-label" for="rd7">是</label>
+                                            
+                                        </div>
+                                        <div class="custom-control custom-radio mb-1">
+                                            <input type="radio" class="custom-control-input" name="rdGroup3" id="rd8" checked> <label class="custom-control-label" for="rd8">否</label>
+                                            <div class="custom-control-hint mt-1">
+                                                <input type="text" class="form-control" placeholder="原因(選填)">
+                                            </div>
+                                        </div>
+                                    </div><!-- /.form-group -->
+                                    <div class="card-footer">&nbsp;</div>
+                        </div>
+                        <div class="col-md-12" id="isCooperate_div">
+                                    <div class="form-group">
+                                        <h2 class="card-title">評價</h2>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb1"> <label class="custom-control-label" for="ckb1">好溝通</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb2"> <label class="custom-control-label" for="ckb2">準時</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb3"> <label class="custom-control-label" for="ckb3">品質好</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb4"> <label class="custom-control-label" for="ckb4">CP質高</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb5"> <label class="custom-control-label" for="ckb5">有雷</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb6"> <label class="custom-control-label" for="ckb6">有大雷</label>
+                                        </div>
+                                        <div class="custom-control custom-control-inline custom-checkbox">
+                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb7"> <label class="custom-control-label" for="ckb7">有遲交狀況</label>
+                                        </div>
+                                    </div><!-- /.form-group -->
+                                    <div class="card-footer">&nbsp;</div>
+                        </div>
+                        <div class="col-md-12" id="isCooperate2_div">
+                                    <h2 class="card-title"> 上刊連結 </h2><!-- .table-responsive -->
+                                    <div class="table-responsive">
+                                        <table class="table table-hover" style="min-width: 678px" id="link_table">
+                                            <thead>
+                                                <tr>
+
+                                                    <th> 連結 </th>
+                                                    <th style="width: 20%;"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                                    <td class="align-middle text-right">
+                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div><!-- /.table-responsive -->
+                            <!-- .card-footer -->
+                            <div class="card-footer">
+                                <a href="javascript: void();" id="addLinkBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增上刊連結</a>
+                            </div><!-- /.card-footer -->
+                        </div>
+                        <div class="col-md-12" id="isCooperate3_div">
+                                    <h2 class="card-title"> 截圖 </h2><!-- .table-responsive -->
+                                    <div class="table-responsive">
+                                        <table class="table table-hover" style="min-width: 678px" id="cut_table">
+                                            <thead>
+                                                <tr>
+
+                                                    <th> 截圖 </th>
+                                                    <th style="width: 20%;"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                                    <td class="align-middle text-right">
+                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div><!-- /.table-responsive -->
+                            <!-- .card-footer -->
+                            <div class="card-footer">
+                                <a href="javascript: void();" id="addCutBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增截圖</a>
+                            </div><!-- /.card-footer -->
+                        </div>
+                    </div><!-- /.form-row -->
+
+                    <div class="col-md-12" >
+                        <!-- .form-group -->
+                        <div class="form-group">
+                                    <h2 for="lbl3" class="card-title">附註 <span class="badge badge-secondary"><em>選填</em></span></h2>
+                            <textarea class="form-control" id="kolProject_memo" rows="4" placeholder=""></textarea>
+                        </div><!-- /.form-group -->
+                    </div>
+
+                    
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="kolSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+<!-- .modal -->
+<form id="clientKolProjectMediaPriceEditForm" name="clientKolProjectMediaPriceEditForm">
+    <div class="modal fade" id="clientKolProjectMediaPriceEditModal" tabindex="-1" role="dialog" aria-labelledby="clientKolProjectMediaPriceEditModalLabel" data-backdrop="static" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="socialModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">合作形式與報價</span> <input id="option_name" type="text" class="form-control form-control-lg" value="" placeholder="合作形式與報價" readonly="readonly " required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="kolProjectPrice_method" />
+                    <input type="hidden" id="kolProjectPrice_uid" />
+                    <input type="hidden" id="optionItem_uid" />
+                    <input type="hidden" id="mediaItem_uid" />
+                    <div class="form-group">
+                        <label for="cnCountry"> 媒體平台 </label> <select id="kolProjectMedia_select" class="custom-select d-block w-100">
+                            
+
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="cnCountry"> 規格 </label> <select id="kolProjectSpec_select" class="custom-select d-block w-100">
+                            
+
+                        </select>
+                    </div>
+                    <!-- .form-group -->
+                    <div class="form-group" id="kolProjectSpec_other">
+                        <div class="form-label-group">
+                            <input type="text" id="kolProjectPrice_other" class="form-control" value="" placeholder="合作形式說明" maxlength="45" required=""> <label for="olProjectPrice_other">合作形式說明</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolProjectPrice_num" class="form-control" value="" placeholder="數量" maxlength="6" required=""> <label for="kolProjectPrice_num">數量</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolProjectPrice_cost" class="form-control" value="" placeholder="報價" maxlength="12" required=""> <label for="kolProjectPrice_cost">報價</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <label class="control-label" for="flatpickr01">報價日期</label> <input id="kolProjectPrice_date" type="text" class="form-control" data-toggle="flatpickr" data-date-format="Y/m/d">
+                    </div><!-- /.form-group -->
+                    
+
                 </div><!-- /.modal-body -->
                 <!-- .modal-footer -->
                 <div class="modal-footer">
diff --git a/Views/Home/ProjectList.cshtml b/Views/Home/ProjectList.cshtml
index ae2e56b..cf27351 100644
--- a/Views/Home/ProjectList.cshtml
+++ b/Views/Home/ProjectList.cshtml
@@ -130,6 +130,8 @@
                         
 
                     </div><!-- /.form-row -->
+
+                    
                 </div><!-- /.modal-body -->
                 <!-- .modal-footer -->
                 <div class="modal-footer">
diff --git a/Views/Shared/_LooperLayout.cshtml b/Views/Shared/_LooperLayout.cshtml
index 6bad6fe..3d8b26c 100644
--- a/Views/Shared/_LooperLayout.cshtml
+++ b/Views/Shared/_LooperLayout.cshtml
@@ -36,8 +36,8 @@
     
     <!-- END PLUGINS STYLES -->
     <!-- BEGIN THEME STYLES -->
-    <link rel="stylesheet" href="~/assets/stylesheets/theme.min.css" data-skin="default">
-    <link rel="stylesheet" href="~/assets/stylesheets/theme-dark.min.css" data-skin="dark">
+    <link rel="stylesheet" href="~/assets/stylesheets/theme.css" data-skin="default">
+    <link rel="stylesheet" href="~/assets/stylesheets/theme-dark.css" data-skin="dark">
     @RenderSection("Style", required: false)
     <link rel="stylesheet" href="~/assets/stylesheets/custom.css">
     <script>
diff --git a/wwwroot/assets/javascript/custom/kollist.js b/wwwroot/assets/javascript/custom/kollist.js
index 3d4e0e3..8a6d06d 100644
--- a/wwwroot/assets/javascript/custom/kollist.js
+++ b/wwwroot/assets/javascript/custom/kollist.js
@@ -12,6 +12,11 @@ $(document).ready(function () {
     loadKolStyleCheckboxItem();
     loadKolFansTypeCheckboxItem();
     loadDataTable();
+    loadCooperateItem();
+    loadyearmonth();
+    loadprojectList();
+    clearKolProjectTable();
+
     $('#kolSaveBtn').on('click', function () {
         var method = $('#method').val();
         var kol_uid = $('#kol_uid').val();
@@ -246,6 +251,38 @@ $(document).ready(function () {
         $('#clientNewModal').modal('toggle');
     });
 
+    $("#project_year").on('change', function () {
+        loadprojectList();
+    });
+
+    $("#project_month").on('change', function () {
+        loadprojectList();
+    });
+
+    $("#kolProjectMedia_select").on('change', function () {
+        loadkolMediaSpec();
+
+        if ($('#kolProjectMedia_select').val() == "item_other") {
+            $('#kolProjectSpec_other').show();
+        } else {
+            $('#kolProjectSpec_other').hide();
+        }
+    });
+
+    
+
+    $('#kolProjectNewBtn').on('click', function () {
+        clearKolProjectTable();
+        $('#kolProject_method').val('add');
+        $('#clientNewKolProjectModal').modal('toggle');
+    });
+
+    $("#addSpecBtn").on('click', function () {
+        $('#kolProjectPrice_method').val('add');
+        $('#kolProjectSpec_other').val('');
+        $('#kolProjectSpec_other').hide();
+        $('#clientKolProjectMediaPriceEditModal').modal('toggle');
+    });
     function loadDataTable() {
         var dataTables = {
             init: function init() {
@@ -336,7 +373,7 @@ $(document).ready(function () {
                             render: function render(data, type, row, meta) {
                                 var ret = '';
                                 ret += '<div class="user-avatar user-avatar-xxl">';
-                                ret += '    <img src="' + row.kol_photo + '" alt="">';
+                                ret += '    <a href="javascript: void();" data-uid="' + row.kol_uid + '" data-method="edit"><img src="' + row.kol_photo + '" alt=""></a>';
                                 ret += '</div>';
                                 return ret;
                                 //return row.gift_city + row.gift_area + row.gift_address;
@@ -380,7 +417,7 @@ $(document).ready(function () {
                             searchable: false,
                             render: function render(data, type, row, meta) {
                                 var ret = '';
-
+                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="case" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-briefcase"></i> <span class="sr-only">Case</span></button>';
                                 ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
                                 ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
                                 return ret;
@@ -568,7 +605,41 @@ $(document).ready(function () {
     }
 });
 
+function loadCooperateItem() {
+    var formData = {
+        option_uid: 'cooperateType'
+    }
 
+    $.ajax({
+        url: "/Api/optionItemList",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.optionItems;
+                var items = "";
+                $.each(obj, function (index, item) {
+                    items += optionItemHtml(item);
+                });
+
+                items = "<h2 class=\"card-title\">合作形式</h2>" + items;
+
+
+                $('#cooperateType_div').children().first().html(items);
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
 function buttonClick2(obj) {
     var type = obj.getAttribute('data-method');
     var uid = obj.getAttribute('data-uid');
@@ -578,6 +649,11 @@ function buttonClick2(obj) {
 
     mainPos = mainTable.fnGetPosition($('#' + uid)[0]);
 
+    if (type == "case") {
+        //$('#kol_uid').val(uid);
+        $('#clientProjectModal').modal('toggle');
+    }
+
     if (type == "del") {
         if (confirm('確定刪除此筆資料? 刪除後將無任何方法回復!')) {
             var formData = {
@@ -791,6 +867,13 @@ function loadMedia() {
                         value: item.optionItem_uid,
                         text: item.optionItem_name 
                     }));
+
+                    $("#kolProjectMedia_select").append($("<option>", {
+                        value: item.optionItem_uid,
+                        text: item.optionItem_name
+                    }));
+
+                    loadkolMediaSpec();
                 });
 
                 
@@ -808,6 +891,46 @@ function loadMedia() {
     });
 }
 
+
+function loadkolMediaSpec() {
+    var optionItem_uid = $('#kolProjectMedia_select').val();
+
+    var formData = {
+        optionItem_uid : optionItem_uid
+    }
+
+    $.ajax({
+        url: "/Api/mediaSpecList",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.mediaSpecList;
+
+                $('#kolProjectSpec_select option').remove();
+                $.each(obj, function (i, item) {
+                    $("#kolProjectSpec_select").append($("<option>", {
+                        value: item.mediaItem_uid,
+                        text: item.mediaItem_name
+                    }));
+
+                    
+                });
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
 function loadKolFansTypeCheckboxItem() {
     var formData = {
         option_uid: 'fansType'
@@ -926,3 +1049,75 @@ function optionItemHtml(item) {
     return html;
 }
 
+function loadyearmonth() {
+    var actualDate = new Date(); // convert to actual date
+
+    var nowYear = actualDate.getFullYear();
+
+    for (tmpY = nowYear; tmpY >= 2019; tmpY--) {
+        $("#project_year").append($("<option></option>").attr("value", tmpY).text(tmpY + " 年度"));
+    }
+
+    for (tmpM = 1; tmpM <= 12; tmpM++) {
+        $("#project_month").append($("<option></option>").attr("value", tmpM).text(tmpM + " 月"));
+
+    }
+}
+
+function loadprojectList() {
+    var year = $('#project_year').val();
+    var month = $('#project_month').val();
+
+    var formData = {
+        year: year,
+        month: month
+    }
+
+    $.ajax({
+        url: "/Api/projectList",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                $('#project_select option').remove();
+
+                var obj = data.projectList;
+
+                $.each(obj, function (i, item) {
+                    $("#project_select").append($("<option>", {
+                        value: item.project_uid,
+                        text: item.project_name
+                    }));
+                });
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
+function clearKolProjectTable() {
+    var trList = $("#price_table").find("tbody").find("tr");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+
+    var trList = $("#link_table").find("tbody").find("tr");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+
+    var trList = $("#cut_table").find("tbody").find("tr");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+}
\ No newline at end of file
diff --git a/wwwroot/assets/stylesheets/theme-dark.css b/wwwroot/assets/stylesheets/theme-dark.css
index 8a495fb..a44e48a 100644
--- a/wwwroot/assets/stylesheets/theme-dark.css
+++ b/wwwroot/assets/stylesheets/theme-dark.css
@@ -5797,6 +5797,12 @@ a.close.disabled {
   }
 }
 
+@media (min-width: 1600px) {
+    .modal-xl {
+        max-width: 1540px;
+    }
+}
+
 .tooltip {
   position: absolute;
   z-index: 1070;
diff --git a/wwwroot/assets/stylesheets/theme.css b/wwwroot/assets/stylesheets/theme.css
index c4951d1..bc06afd 100644
--- a/wwwroot/assets/stylesheets/theme.css
+++ b/wwwroot/assets/stylesheets/theme.css
@@ -5791,12 +5791,30 @@ a.close.disabled {
   }
 }
 
+@media (min-width: 1200px) {
+    .modal-lg {
+        max-width: 1000px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .modal-lg {
+        max-width: 1000px;
+    }
+}
+
 @media (min-width: 1200px) {
   .modal-xl {
     max-width: 1140px;
   }
 }
 
+@media (min-width: 1600px) {
+    .modal-xl {
+        max-width: 1540px;
+    }
+}
+
 .tooltip {
   position: absolute;
   z-index: 1070;