diff --git a/html/exhi/application/controllers/General.php b/html/exhi/application/controllers/General.php
index ac091b5415048aacc39911e418e2a01cd6034940..8fd2066924122d22a63d821df2a6da89cbb07da7 100644
--- a/html/exhi/application/controllers/General.php
+++ b/html/exhi/application/controllers/General.php
@@ -9,13 +9,13 @@ class general extends Exhibition_Controller
 
     public function show_general_home()
     {
-        $this->load->model('company/M_company', 'company');
-        $this->load->model('tag/M_tag', 'tag');
-        $this->load->model('team/M_team', 'team');
-        $data['teams'] =  $this->team->get_all()->result();
-        $data['companies'] =  $this->company->get_all()->result();
-        $data['tags'] =  $this->tag->get_all()->result();
-        $this->output_general('general/v_general_home', $data);
+        // $this->load->model('company/M_company', 'company');
+        // $this->load->model('tag/M_tag', 'tag');
+        // $this->load->model('team/M_team', 'team');
+        // $data['teams'] =  $this->team->get_all()->result();
+        // $data['companies'] =  $this->company->get_all()->result();
+        // $data['tags'] =  $this->tag->get_all()->result();
+        $this->output_general('general/v_general_home');
     }
 
     public function show_project_2()
@@ -44,7 +44,23 @@ class general extends Exhibition_Controller
     public function get_trend()
     {
         $this->load->model('general/M_general', 'trend');
+        $this->load->model('general/M_general', 'pj_tag');
         $data['trend'] = $this->trend->get_trend()->result();
+        foreach ($data['trend'] as $trend) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($trend->project_id)->result();
+            $trend->tags = $data['pj_tag'];
+        }
+        // echo '<pre>';
+        // print_r($data['trend']);
+        // echo '</pre>';
+
+        echo json_encode($data);
+    }
+
+    public function get_tag_project()
+    {
+        $this->load->model('general/M_general', 'tag');
+        $data['tag'] = $this->tag->get_tag_project()->result();
         echo json_encode($data);
     }
 
@@ -60,6 +76,11 @@ class general extends Exhibition_Controller
         $year = $_GET['year'];
         $this->load->model('general/M_general', 'project_2');
         $data['project_2'] = $this->project_2->get_project_2($year)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['project_2'] as $project_2) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($project_2->project_id)->result();
+            $project_2->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -82,6 +103,11 @@ class general extends Exhibition_Controller
         $year = $_GET['year'];
         $this->load->model('general/M_general', 'project_3');
         $data['project_3'] = $this->project_3->get_project_3($year)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['project_3'] as $project_3) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($project_3->project_id)->result();
+            $project_3->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -97,6 +123,11 @@ class general extends Exhibition_Controller
         $year = $_GET['year'];
         $this->load->model('general/M_general', 'project_4');
         $data['project_4'] = $this->project_4->get_project_4($year)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['project_4'] as $project_4) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($project_4->project_id)->result();
+            $project_4->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -114,6 +145,11 @@ class general extends Exhibition_Controller
         $limit = $_GET['limit'];
         $this->load->model('general/M_general', 'pagination');
         $data['pagination'] = $this->pagination->get_data_pagination($year, $page, $limit)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['pagination'] as $pagination) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($pagination->project_id)->result();
+            $pagination->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -130,6 +166,11 @@ class general extends Exhibition_Controller
         $limit = $_GET['limit'];
         $this->load->model('general/M_general', 'pagination');
         $data['pagination'] = $this->pagination->get_data_search_pagination($year, $grade, $cluster, $team, $company, $pname, $tag, $page, $limit)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['pagination'] as $pagination) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($pagination->project_id)->result();
+            $pagination->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -142,6 +183,11 @@ class general extends Exhibition_Controller
         ($search == 'tag') ? $s_value = 'AND project_tag.tag_id = ' . $s_value : $s_value = 'AND (project.name_th LIKE \'%' . $s_value . '%\' OR project.name_en LIKE \'%' .  $s_value  . '%\' )';
         $this->load->model('general/M_general', 'pagination');
         $data['pagination'] = $this->pagination->get_data_search_pagination_search($s_value, $page, $limit)->result();
+        $this->load->model('general/M_general', 'pj_tag');
+        foreach ($data['pagination'] as $pagination) {
+            $data['pj_tag'] = $this->pj_tag->get_tag_project($pagination->project_id)->result();
+            $pagination->tags = $data['pj_tag'];
+        }
         echo json_encode($data);
     }
 
@@ -181,7 +227,7 @@ class general extends Exhibition_Controller
     {
         $s_value = $_GET['s_value'];
         $search = $_GET['search'];
-        ($search == 'tag') ? $s_value = 'AND project_tag.tag_id = ' . $s_value . 'GROUP BY project_tag.tag_id' : $s_value = 'AND (project.name_th LIKE \'%' . $s_value . '%\' OR project.name_en LIKE \'%' .  $s_value  . '%\' )';
+        ($search == 'tag') ? $s_value = 'AND project_tag.tag_id = ' . $s_value . ' GROUP BY project_tag.tag_id' : $s_value = 'AND (project.name_th LIKE \'%' . $s_value . '%\' OR project.name_en LIKE \'%' .  $s_value  . '%\' )';
         $this->load->model('general/M_general', 'num');
         $data['num'] = $this->num->get_num_project_by_search($s_value)->result();
         echo json_encode($data);
@@ -241,9 +287,9 @@ class general extends Exhibition_Controller
         $this->output_general('general/v_search', $data);
     }
 
-    public function get_search_pname($pname)
+    public function get_search_pname()
     {
-        $data['s_value'] = $pname;
+        $data['s_value'] = $this->input->get('pname');
         $data['search'] = 'pname';
 
         $this->output_general('general/v_search', $data);
diff --git a/html/exhi/application/models/general/M_general.php b/html/exhi/application/models/general/M_general.php
index 02bbaf9ae430947637e7c85a0e56ccfc4f6b67cc..6d1320aa8f849618c43d66f31c1cf1025b615cf5 100644
--- a/html/exhi/application/models/general/M_general.php
+++ b/html/exhi/application/models/general/M_general.php
@@ -26,7 +26,7 @@ class M_general extends Da_general
 
     public function get_trend()
     {
-        $sql = "SELECT *, project.name_th as pj_name, cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.first_name, user.last_name FROM {$this->db_name}.project 
+        $sql = "SELECT *, project.name_th as pj_name, cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.prefix, user.first_name, user.last_name FROM {$this->db_name}.project 
         JOIN user on project.user_id = user.user_id
         JOIN team ON project.team_id = team.team_id
         JOIN cluster ON project.cluster_id = cluster.cluster_id
@@ -42,7 +42,7 @@ class M_general extends Da_general
     {
         $offset = ($page - 1) * $limit;
 
-        $sql = "SELECT *,cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.first_name, user.last_name, project.project_id as project_id
+        $sql = "SELECT *,cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.prefix, user.first_name, user.last_name, project.project_id as project_id
         FROM {$this->db_name}.project
         LEFT OUTER JOIN project_tag ON project_tag.project_id = project.project_id
         JOIN user on project.user_id = user.user_id
@@ -71,7 +71,7 @@ class M_general extends Da_general
     public function get_num_project_by_search($s_value)
     {
 
-        $sql = "SELECT *, count(project.project_id) AS num_project
+        $sql = "SELECT count(project.project_id) AS num_project
         FROM {$this->db_name}.project
         LEFT OUTER JOIN project_tag ON project_tag.project_id = project.project_id
         WHERE project.status = 1 
@@ -152,10 +152,19 @@ class M_general extends Da_general
         return $query;
     }
 
+    public function get_tag_project($id)
+    {
+        $sql = "SELECT tag.name AS tag_name FROM {$this->db_name}.project_tag 
+        JOIN tag ON tag.tag_id = project_tag.tag_id
+        WHERE project_tag.project_id = $id";
+        $query = $this->db->query($sql);
+        return $query;
+    }
+
     public function get_data_pagination($year, $page, $limit)
     {
         $offset = ($page - 1) * $limit;
-        $sql = "SELECT project_id, name_th as pj_name, image_logo, image_cover, user.student_id, user.first_name, user.last_name, company.name AS cp_name, instructor.name AS is_name FROM {$this->db_name}.project
+        $sql = "SELECT project_id, name_th as pj_name, image_logo, image_cover, user.student_id, user.prefix, user.first_name, user.last_name, company.name AS cp_name, instructor.name AS is_name FROM {$this->db_name}.project
 		JOIN user on project.user_id = user.user_id
         JOIN company ON project.company_id = company.company_id
         JOIN instructor ON project.instructor_id = instructor.instructor_id
@@ -172,7 +181,7 @@ class M_general extends Da_general
         $tag = ($tag == '') ? $tag = 'AND (project_tag.tag_id = project_tag.tag_id OR project_tag.tag_id IS NULL)' : $tag = 'AND project_tag.tag_id IN (' . $tag . ')';
         $offset = ($page - 1) * $limit;
 
-        $sql = "SELECT *,cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.first_name, user.last_name, project.project_id as project_id
+        $sql = "SELECT *,cluster.name AS ct_name, company.name AS cp_name, team.name AS t_name, instructor.name AS is_name, user.prefix, user.first_name, user.last_name, project.project_id as project_id
         FROM {$this->db_name}.project
         LEFT OUTER JOIN project_tag ON project_tag.project_id = project.project_id
         JOIN user on project.user_id = user.user_id
diff --git a/html/exhi/application/views/general/v_general_home.php b/html/exhi/application/views/general/v_general_home.php
index 9242f5e9b61328ffa7257d8d0be40837b42b9411..9d6ff3b2f50ccaffaaa2dd86e4982b7f7c20ef20 100644
--- a/html/exhi/application/views/general/v_general_home.php
+++ b/html/exhi/application/views/general/v_general_home.php
@@ -73,7 +73,7 @@
     }
 
     span {
-        font-size: 14px;
+        font-size: 16px;
         color: #41474c;
     }
 
@@ -178,7 +178,7 @@
         color: #fff;
         content: attr(data-tooltip);
         text-align: center;
-        font-size: 14px;
+        font-size: 16px;
         line-height: 1.2;
     }
 
@@ -219,6 +219,18 @@
     .select2-container--default .select2-selection--multiple .select2-selection__choice {
         color: black !important;
     }
+
+    .trend {
+        padding: 0px 10px 0px 10px;
+    }
+
+    .rancolor span {
+        color: white;
+    }
+
+    .rancolor {
+        margin: 0px 3px 0px 3px;
+    }
 </style>
 <div class="wrapper">
     <div class="container-fluid">
@@ -228,19 +240,19 @@
                     <div class="row">
                         <div class="col-md-2">
                             <div class="form-group">
-                                <select name="year" class="form-control form-control" id="year" onchange="get_num_project()">
+                                <select name="year" class="form-control" id="year" onchange="get_num_project()">
                                 </select>
                             </div>
                         </div>
                         <div class="col-md-2">
-                            <div class="input-group form-group">
-                                <input type="search" class="form-control form-control" id='pname_search' placeholder="ชื่อโปรเจกต์..">
-                                <div class="input-group-append">
-                                    <button type="submit" class="btn btn btn-default" onclick="search_pname()">
+                            <form method="GET" action="<?php echo site_url() . '/General/get_search_pname' ?>">
+                                <div class="input-group form-group">
+                                    <input type="search" name='pname' require class="form-control" id='pname_search' placeholder="ชื่อโปรเจกต์..">
+                                    <button type="submit" class="btn btn btn-default">
                                         <i class="fa fa-search"></i>
                                     </button>
                                 </div>
-                            </div>
+                            </form>
                         </div>
                         <div class="col-md-2">
                             <button style="background-color:white;border-color:#A79E9E" class="btn" data-toggle="modal" data-target="#advanceSearcheModal">ค้นหาขั้นสูง</button><br><br><br><br>
@@ -324,14 +336,16 @@
                     </div>
                     <div class="col-md-6">
                         <div class="card">
-                            <div class="card-header row">
-                                <div class="col-9">
-                                    <h5>สถิติ</h5>
-                                </div>
-                                <div class="col-3 float-right">
-                                    <select name="year_chart" class="form-control form-control " id="year_chart" onchange="del_chart(), get_data_chart()">
-                                        <option value="all">ทั้งหมด</option>
-                                    </select>
+                            <div class="card-header" style="height: 57px;">
+                                <div class="row">
+                                    <div class="col-9">
+                                        <h5>สถิติ</h5>
+                                    </div>
+                                    <div class="col-3 float-right">
+                                        <select name="year_chart" class="form-control" id="year_chart" onchange="del_chart(), get_data_chart()">
+                                            <option value="all">ทั้งหมด</option>
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
                             <div class="card-body" style=" width: auto; height: 390px;">
@@ -630,11 +644,6 @@
         })
     }
 
-    function search_pname() {
-        let pname = document.getElementById('pname_search').value;
-        (pname == '') ? '' : window.location.href = `http://localhost/exhi/index.php/General/get_search_pname/${pname}`;
-    }
-
     function create_tag(data) {
         let tag = [];
         let url = "<?php echo site_url() . '/General/get_search_tag/' ?>"
@@ -669,22 +678,39 @@
     function create_trend(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += '<div class="col-md-3 article-loop" >';
+            html += '<div class="col-md-3 article-loop trend" >';
             html += `<a href="<?php echo site_url() . '/General/show_select/' ?>${row.project_id}" style="color:black" class="custom-card card-grow">`;
             html += '<div class="card card-grow">';
             html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="card card-growimage cap">`;
             html += '<div class="card-body">';
             html += `<div><span><b>${row.name_th}</b></span></div>`;
-            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>${row.first_name} ${row.last_name}</span><br>`: html += `<span>บริษัท : ${row.cp_name}</span><br>`;
+            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>${row.prefix}${row.first_name} ${row.last_name}</span><br>`: html += `<span>บริษัท : ${row.cp_name}</span><br>`;
             (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>อาจารย์ที่ปรึกษา : ${row.is_name}</span><br>`: (row.cluster_id != 0) ? html += `<span>มกุล : ${row.ct_name}</span><br>` : html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '<div class="row mt-2">';
+            row.tags.forEach((t_row, t_index) => {
+                html += `<div class='col-4 card text-center rancolor'>`;
+                html += `<span >${t_row.tag_name}</span>`;
+                html += `</div>`;
+            });
+            html += '</div>';
             html += '</div>';
             html += '</div>';
             html += '</a>';
             html += '</div>';
         })
         document.getElementById('trend').innerHTML = html;
+        random_color()
     }
 
+    // function random_color() {
+    //     let colors = ['#000247', '#220047', '#003C47', '#39002D', '#003924', '#391100', '#003939', '#393100'];
+    //     let card = document.getElementsByClassName('rancolor');
+    //     for (let i = 0; i < card.length; i++) {
+    //         let random_color = colors[Math.floor(Math.random() * colors.length)];
+    //         card[i].style.backgroundColor = random_color;
+    //     }
+    // }
+
     function create_num_product(data, year) {
         let thai_year = parseInt(year) + 543;
         let selectDiv_2 = document.querySelector('#num_project_2')
diff --git a/html/exhi/application/views/general/v_project_2.php b/html/exhi/application/views/general/v_project_2.php
index dff63ed97790c07f93ce5401e0b7277e716fc79f..218d56eb74509db70cda6d0d42ffea57a6d2f11a 100644
--- a/html/exhi/application/views/general/v_project_2.php
+++ b/html/exhi/application/views/general/v_project_2.php
@@ -73,7 +73,7 @@
     }
 
     span {
-        font-size: 14px;
+        font-size: 16px;
         color: #41474c;
     }
 
@@ -135,10 +135,22 @@
         color: #2c2c2c;
     }
 
-    .card:hover {
+    .card-grow:hover {
         transform: scale(1.02);
         box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
     }
+
+    .rancolor span {
+        color: white;
+    }
+
+    .rancolor {
+        margin: 0px 3px 0px 3px;
+    }
+
+    .card-pj {
+        padding: 0px 10px 0px 10px;
+    }
 </style>
 <?php $y = $_GET['y']; ?>
 <div class="wrapper">
@@ -242,7 +254,7 @@
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += '<div class="col-md-3 article-loop" >';
+            html += '<div class="col-md-3 article-loop card-pj" >';
             html += `<a href="<?php echo site_url() . '/General/show_select/' ?>${row.project_id}" style="color:black" class="custom-card ">`;
             html += '<div class="card">';
             html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="Card image cap">`;
@@ -250,11 +262,19 @@
             html += `<div><span><b>${row.name_th}</b></span></div>`;
             html += `<span>บริษัท : ${row.cp_name}</span><br>`;
             html += `<span>มกุล : ${row.ct_name}</span><br>`;
+            html += '<div class="row mt-2">';
+            row.tags.forEach((t_row, t_index) => {
+                html += `<div class='col-md-4 card article-loop text-center rancolor'>`;
+                html += `<span>${t_row.tag_name}</span>`;
+                html += `</div>`;
+            });
+            html += '</div>';
             html += '</div>';
             html += '</div>';
             html += '</a>';
             html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
+        random_color()
     }
 </script>
\ No newline at end of file
diff --git a/html/exhi/application/views/general/v_project_3.php b/html/exhi/application/views/general/v_project_3.php
index f1c103fc4cdc19a3e2dd139a432e8f158c6d043a..9706706b44e1621277c66a2d4f4872ba624e2525 100644
--- a/html/exhi/application/views/general/v_project_3.php
+++ b/html/exhi/application/views/general/v_project_3.php
@@ -73,7 +73,7 @@
     }
 
     span {
-        font-size: 14px;
+        font-size: 16px;
         color: #41474c;
     }
 
@@ -135,10 +135,22 @@
         color: #2c2c2c;
     }
 
-    .card:hover {
+    .card-grow:hover {
         transform: scale(1.02);
         box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
     }
+
+    .rancolor span {
+        color: white;
+    }
+
+    .rancolor {
+        margin: 0px 3px 0px 3px;
+    }
+
+    .card-pj {
+        padding: 0px 10px 0px 10px;
+    }
 </style>
 <?php $y = $_GET['y']; ?>
 <div class="wrapper">
@@ -239,7 +251,7 @@
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += '<div class="col-md-3 article-loop" >';
+            html += '<div class="col-md-3 article-loop card-pj" >';
             html += `<a href="<?php echo site_url() . '/General/show_select/' ?>${row.project_id} style="color:black" class="custom-card ">`;
             html += '<div class="card">';
             html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="Card image cap">`;
@@ -247,11 +259,19 @@
             html += `<div><span><b>${row.name_th}</b></span></div>`;
             html += `<span>บริษัท : ${row.cp_name}</span><br>`;
             html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '<div class="row mt-2">';
+            row.tags.forEach((t_row, t_index) => {
+                html += `<div class='col-md-4 card article-loop text-center rancolor'>`;
+                html += `<span>${t_row.tag_name}</span>`;
+                html += `</div>`;
+            });
+            html += '</div>';
             html += '</div>';
             html += '</div>';
             html += '</a>';
             html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
+        random_color()
     }
 </script>
\ No newline at end of file
diff --git a/html/exhi/application/views/general/v_project_4.php b/html/exhi/application/views/general/v_project_4.php
index 08825cf41314e62e28d06b0d2af3421691c47fa3..8fa33096daf8e9842a9b0e73d01ba61a2511ebb8 100644
--- a/html/exhi/application/views/general/v_project_4.php
+++ b/html/exhi/application/views/general/v_project_4.php
@@ -73,7 +73,7 @@
     }
 
     span {
-        font-size: 14px;
+        font-size: 16px;
         color: #41474c;
     }
 
@@ -135,11 +135,23 @@
         color: #2c2c2c;
     }
 
-    .card:hover {
+    .card-grow:hover {
         transform: scale(1.02);
         box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
     }
 
+    .rancolor span {
+        color: white;
+    }
+
+    .rancolor {
+        margin: 0px 3px 0px 3px;
+    }
+
+    .card-pj {
+        padding: 0px 10px 0px 10px;
+    }
+
     .notfound {
         text-align: center;
     }
@@ -291,6 +303,7 @@
             current_page--;
             console.log('page' + current_page);
             load_data();
+            mark_btn('page' + current_page);
         }
     }
 
@@ -299,6 +312,7 @@
             current_page++;
             console.log('page' + current_page);
             load_data();
+            mark_btn('page' + current_page);
         }
     }
 
@@ -320,20 +334,28 @@
         let html = '';
         data.forEach((row, index) => {
             console.log(row)
-            html += '<div class="col-md-3 article-loop" >';
+            html += '<div class="col-md-3 article-loop card-pj" >';
             html += `<a href="<?php echo site_url() . '/General/show_select/' ?>${row.project_id}" style="color:black" class="custom-card ">`;
             html += '<div class="card">';
             html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="Card image cap">`;
             html += '<div class="card-body">';
             html += `<div><span><b>${row.pj_name}</b></span></div>`;
-            html += `<span>${row.first_name} ${row.last_name}</span><br>`;
+            html += `<span>${row.prefix}${row.first_name} ${row.last_name}</span><br>`;
             html += `<span>อาจารย์ที่ปรึกษา : ${row.is_name}</span><br>`;
+            html += '<div class="row mt-2">';
+            row.tags.forEach((t_row, t_index) => {
+                html += `<div class='col-md-4 card article-loop text-center rancolor'>`;
+                html += `<span>${t_row.tag_name}</span>`;
+                html += `</div>`;
+            });
+            html += '</div>';
             html += '</div>';
             html += '</div>';
             html += '</a>';
             html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
+        random_color()
     }
 
     function create_page_select(data) {
@@ -341,10 +363,25 @@
         html += `<li><button class="page-link" onclick="previous_page()">ก่อนหน้า</button></li>`;
         for (i = 0; i < data; i++) {
             let page = i + 1;
-            console.log('i' + i);
-            html += `<li><button class="page-link" onclick="set_page(` + page + `)">` + page + `</button></li>`;
+            html += `<li><button class="page-link" id="page` + page + `" onclick="set_page(` + page + `); mark_btn('page` + page + `');">` + page + `</button></li>`;
         }
         html += `<li><button class="page-link" onclick="next_page(` + data + `)">ถัดไป</button></li>`;
         document.getElementById('select-page').innerHTML = html;
+        mark_btn('page' + current_page);
+    }
+
+    function mark_btn(btn_page_id) {
+        let elements = document.getElementsByClassName("page-link");
+        for (let i = 0; i < elements.length; i++) {
+            elements[i].style.backgroundColor = "";
+            elements[i].style.color = "";
+            elements[i].style.border = "";
+        }
+        let btn_page = document.getElementById(btn_page_id);
+        if (btn_page !== null) {
+            btn_page.style.backgroundColor = "#6c757d";
+            btn_page.style.color = "white";
+            btn_page.style.border = "1px solid gray";
+        }
     }
 </script>
\ No newline at end of file
diff --git a/html/exhi/application/views/general/v_search.php b/html/exhi/application/views/general/v_search.php
index 8314ad430e97f1fce6b93b1ab4fd775264a6c9fd..c3780d28f7147cd4d44aae75bdefde8f9ad33d29 100644
--- a/html/exhi/application/views/general/v_search.php
+++ b/html/exhi/application/views/general/v_search.php
@@ -74,7 +74,7 @@
     }
 
     span {
-        font-size: 14px;
+        font-size: 16px;
         color: #41474c;
     }
 
@@ -136,10 +136,22 @@
         color: #2c2c2c;
     }
 
-    .card:hover {
+    .card-grow:hover {
         transform: scale(1.02);
         box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
     }
+
+    .rancolor span {
+        color: white;
+    }
+
+    .rancolor {
+        margin: 0px 3px 0px 3px;
+    }
+
+    .card-pj {
+        padding: 0px 10px 0px 10px;
+    }
 </style>
 <?php $tag = (!isset($tag)) ? '' : $tag;
 $pname = (!isset($pname)) ? '' : $pname;
@@ -349,20 +361,28 @@ $s_value = (!isset($s_value)) ? '' : $s_value;
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += '<div class="col-md-3 article-loop" >';
+            html += '<div class="col-md-3 article-loop card-pj" >';
             html += `<a href="<?php echo site_url() . '/General/show_select/' ?>${row.project_id}" style="color:black" class="custom-card card-grow">`;
             html += '<div class="card card-grow">';
             html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="card card-growimage cap">`;
             html += '<div class="card-body">';
             html += `<div><span><b>${row.name_th}</b></span></div>`;
-            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>${row.first_name} ${row.last_name}</span><br>`: html += `<span>บริษัท : ${row.cp_name}</span><br>`;
+            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>${row.prefix}${row.first_name} ${row.last_name}</span><br>`: html += `<span>บริษัท : ${row.cp_name}</span><br>`;
             (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>อาจารย์ที่ปรึกษา : ${row.is_name}</span><br>`: (row.cluster_id != 0) ? html += `<span>มกุล : ${row.ct_name}</span><br>` : html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '<div class="row mt-2">';
+            row.tags.forEach((t_row, t_index) => {
+                html += `<div class='col-md-4 card article-loop text-center rancolor'>`;
+                html += `<span>${t_row.tag_name}</span>`;
+                html += `</div>`;
+            });
+            html += '</div>';
             html += '</div>';
             html += '</div>';
             html += '</a>';
             html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
+        random_color()
     }
 
     function create_page_select(data) {
@@ -386,10 +406,9 @@ $s_value = (!isset($s_value)) ? '' : $s_value;
         }
         let btn_page = document.getElementById(btn_page_id);
         if (btn_page !== null) {
-            btn_page.style.backgroundColor = "darkturquoise";
+            btn_page.style.backgroundColor = "#6c757d";
             btn_page.style.color = "white";
             btn_page.style.border = "1px solid gray";
         }
-
     }
 </script>
\ No newline at end of file
diff --git a/html/exhi/application/views/login/v_login_fail.php b/html/exhi/application/views/login/v_login_fail.php
index 3b7bf0ee5af36cb1c27c9211ea4bc10e75ccc21f..c91d7d0408eebdda6d60d552cd6a5053432cc3aa 100644
--- a/html/exhi/application/views/login/v_login_fail.php
+++ b/html/exhi/application/views/login/v_login_fail.php
@@ -1,61 +1,63 @@
 <style>
-
-*{
-    transition: all 0.6s;
-}
-
-html {
-    height: 100%;
-}
-
-body{
-    font-family: 'Lato', sans-serif;
-    color: #888;
-    margin: 0;
-}
-
-#main{
-    display: table;
-    width: 100%;
-    height: 100vh;
-    text-align: center;
-}
-
-.fof{
-	  display: table-cell;
-	  vertical-align: middle;
-}
-
-.fof h1{
-	  font-size: 50px;
-	  display: inline-block;
-	  padding-right: 12px;
-	  animation: type .5s alternate infinite;
-}
-
-@keyframes type{
-	  from{box-shadow: inset -3px 0px 0px #888;}
-	  to{box-shadow: inset -3px 0px 0px transparent;}
-}
-
+    * {
+        transition: all 0.6s;
+    }
+
+    html {
+        height: 100%;
+    }
+
+    body {
+        font-family: 'Lato', sans-serif;
+        color: #888;
+        margin: 0;
+    }
+
+    #main {
+        display: table;
+        width: 100%;
+        height: 100vh;
+        text-align: center;
+    }
+
+    .fof {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    .fof h1 {
+        font-size: 50px;
+        display: inline-block;
+        padding-right: 12px;
+        animation: type .5s alternate infinite;
+    }
+
+    @keyframes type {
+        from {
+            box-shadow: inset -3px 0px 0px #888;
+        }
+
+        to {
+            box-shadow: inset -3px 0px 0px transparent;
+        }
+    }
 </style>
 <div class="wrapper">
-<nav class="navbar navbar-expand-lg bg-white fixed-top " style="padding: 10px; z-index: 10;" on-scroll="400">
-    <div class="container" style="margin-left: 100px;">
-        <div class="navbar-translate">
-            <a class="navbar-brand" rel="tooltip" data-placement="bottom" href=''>
-                
-            </a>
-			<!-- <a href="<?php //echo site_url() . "/Login/show_login"; ?>" style="text-align:center">back to hone page</a> -->
+    <nav class="navbar navbar-expand-lg bg-white fixed-top " style="padding: 10px; z-index: 10;" on-scroll="400">
+        <div class="container" style="margin-left: 100px;">
+            <div class="navbar-translate">
+                <a class="navbar-brand" rel="tooltip" data-placement="bottom" href=''>
+
+                </a>
+                <!-- <a href="<?php //echo site_url() . "/Login/show_login"; 
+                                ?>" style="text-align:center">back to hone page</a> -->
+            </div>
         </div>
-    </div>
-</nav>
+    </nav>
     <div id="main">
         <div class="fof">
-                <h1>Login Fail</h1><br>
-                <a class="btn" href='<?php echo site_url() . "/Login/show_login"; ?>'>Back to hone page</a>
+            <h1>Login Fail</h1><br>
+            <a class="btn" href='<?php echo site_url() . "/Login/show_login"; ?>'>Back to home page</a>
         </div>
     </div>
-</div>
-
-
+</div>
\ No newline at end of file
diff --git a/html/exhi/application/views/template/adminlte/javascript.php b/html/exhi/application/views/template/adminlte/javascript.php
index 37cb8d340341a29278c53d34dc947f444358cb58..4541b557c23b796b5538518a6547af526e1f3e47 100644
--- a/html/exhi/application/views/template/adminlte/javascript.php
+++ b/html/exhi/application/views/template/adminlte/javascript.php
@@ -1,81 +1,93 @@
 <!-- jquery -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
 <!-- Bootstrap 4 -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
 <!-- AdminLTE App -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/dist/js/adminlte.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/dist/js/adminlte.min.js"></script>
 <!-- jQuery UI 1.11.4 -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/jquery-ui/jquery-ui.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/jquery-ui/jquery-ui.min.js"></script>
 <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
-<script> $.widget.bridge('uibutton', $.ui.button)</script>
+<script>
+    $.widget.bridge('uibutton', $.ui.button)
+</script>
 <!-- overlayScrollbars -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
 <!-- chart.js -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/chart.js/Chart.bundle.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/chart.js/Chart.bundle.min.js"></script>
 <!-- jquery.dataTables -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables/jquery.dataTables.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables/jquery.dataTables.min.js"></script>
 <!-- sweetalert2 -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/sweetalert2/sweetalert2.all.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/sweetalert2/sweetalert2.all.min.js"></script>
 <!-- toastr -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/toastr/toastr.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/toastr/toastr.min.js"></script>
 <!-- toastr -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/uplot/uPlot.iife.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/uplot/uPlot.iife.min.js"></script>
 <!-- datatables-autofill -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-autofill/js/dataTables.autoFill.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-autofill/js/dataTables.autoFill.min.js"></script>
 <!-- datatables-bs4 -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
 <!-- datatables-buttons -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
 <!-- datatables-colreorder -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-colreorder/js/dataTables.colReorder.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-colreorder/js/dataTables.colReorder.min.js"></script>
 <!-- datatables-fixedcolumns -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
 <!-- datatables-fixedheader  -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
 <!-- datatables-keytable  -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-keytable/js/dataTables.keyTable.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-keytable/js/dataTables.keyTable.min.js"></script>
 <!-- datatables-responsive -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
 <!-- datatables-rowgroup -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
 <!-- datatables-rowreorder -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
 <!-- datatables-scroller -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-scroller/js/dataTables.scroller.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-scroller/js/dataTables.scroller.min.js"></script>
 <!-- datatables-searchbuilder -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
 <!-- datatables-searchpanes -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchpanes/js/dataTables.searchPanes.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchpanes/js/dataTables.searchPanes.min.js"></script>
 <!-- datatables-select -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-select/js/dataTables.select.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/datatables-select/js/dataTables.select.min.js"></script>
 <!-- jquery-mousewheel -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
 <!-- jquery-validation-->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/jquery-validation/jquery.validate.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/jquery-validation/jquery.validate.min.js"></script>
 <!-- bootstrap-colorpicker -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
 <!-- bootstrap-switch -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
 <!-- bs-custom-file-input -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
 
-<script src="<?php echo base_url()?>assets/plugins/jquery.md5.js"></script> 
+<script src="<?php echo base_url() ?>assets/plugins/jquery.md5.js"></script>
 <!-- summernote -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote.min.js"></script>
 <!-- summernote -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.js"></script>
 <!-- summernote -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-lite.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-lite.min.js"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>
 
 <!-- select2 -->
-<script src="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/select2/js/select2.full.min.js"></script>
+<script src="<?php echo base_url() ?>assets/template/AdminLTE-3.2.0/plugins/select2/js/select2.full.min.js"></script>
 
-<script src="<?php echo base_url()?>assets/plugins/filepond-master/dist/filepond.js"></script> 
-<script src="<?php echo base_url()?>assets/plugins/filepond-plugin-file-encode-master/dist/filepond-plugin-file-encode.min.js"></script> 
-<script src="<?php echo base_url()?>assets/plugins/filepond-plugin-file-validate-type-master/dist/filepond-plugin-file-validate-type.js"></script> 
-<script src="<?php echo base_url()?>assets/plugins/filepond-plugin-image-exif-orientation-master/dist/filepond-plugin-image-exif-orientation.js"></script> 
-<script src="<?php echo base_url()?>assets/plugins/filepond-plugin-image-preview-master/dist/filepond-plugin-image-preview.js"></script> 
+<script src="<?php echo base_url() ?>assets/plugins/filepond-master/dist/filepond.js"></script>
+<script src="<?php echo base_url() ?>assets/plugins/filepond-plugin-file-encode-master/dist/filepond-plugin-file-encode.min.js"></script>
+<script src="<?php echo base_url() ?>assets/plugins/filepond-plugin-file-validate-type-master/dist/filepond-plugin-file-validate-type.js"></script>
+<script src="<?php echo base_url() ?>assets/plugins/filepond-plugin-image-exif-orientation-master/dist/filepond-plugin-image-exif-orientation.js"></script>
+<script src="<?php echo base_url() ?>assets/plugins/filepond-plugin-image-preview-master/dist/filepond-plugin-image-preview.js"></script>
 
 <script src="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.js"></script>
+<script>
+    function random_color() {
+        let colors = ['#000247', '#220047', '#003C47', '#39002D', '#003924', '#391100', '#003939', '#393100'];
+        let card = document.getElementsByClassName('rancolor');
+        for (let i = 0; i < card.length; i++) {
+            let random_color = colors[Math.floor(Math.random() * colors.length)];
+            card[i].style.backgroundColor = random_color;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/html/exhi/application/views/template/adminlte/topbar_general.php b/html/exhi/application/views/template/adminlte/topbar_general.php
index 14453098f1d411095d2c56b0a8abfd64c9664276..12c5cb3a8ed269712acbc208f5b3ddbf6d26a3f5 100644
--- a/html/exhi/application/views/template/adminlte/topbar_general.php
+++ b/html/exhi/application/views/template/adminlte/topbar_general.php
@@ -2,10 +2,12 @@
   <div class="container">
     <span class="navbar-brand mb-0 h1 brand-text font-weight-light"></span>
     <a href="<?php echo site_url() ?>/General/show_general_home" class="navbar-brand mb-0 h1 brand-text font-weight-light"><img src="<?php echo base_url() ?>image/logo.png" alt="Logo online exhibition" height="35px"></a>
-    <!-- <span class="navbar-brand mb-0 h1 brand-text font-weight-light">Online Exhibition</span> -->
     </a>
-
     <div class="collapse navbar-collapse order-3" id="navbarCollapse">
-
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+          <a class="nav-link " href="<?php echo site_url() . '/Login/show_login' ?>" aria-expanded="true"><?php echo 'เข้าสู่ระบบ' ?></a>
+        </li>
+      </ul>
     </div>
 </nav>
\ No newline at end of file