diff --git a/html/exhi/application/controllers/General.php b/html/exhi/application/controllers/General.php
index 3474eb16bb6218e9e66de17d0dc638911cc9bc8b..b6a530af9c8e09c879e7660764aad1dfc951f58c 100644
--- a/html/exhi/application/controllers/General.php
+++ b/html/exhi/application/controllers/General.php
@@ -48,6 +48,13 @@ class general extends Exhibition_Controller
         echo json_encode($data);
     }
 
+    public function get_tag()
+    {
+        $this->load->model('general/M_general', 'tag');
+        $data['tag'] = $this->tag->get_tag()->result();
+        echo json_encode($data);
+    }
+
     public function get_project_2()
     {
         $year = $_GET['year'];
@@ -121,12 +128,21 @@ class general extends Exhibition_Controller
         $tag = $_GET['tag'];
         $page = $_GET['page'];
         $limit = $_GET['limit'];
-        // ($tag == '') ?: $tag = implode(',', $tag);
         $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();
         echo json_encode($data);
     }
 
+    public function get_data_search_pagination_tag()
+    {
+        $tag = $_GET['tag'];
+        $page = $_GET['page'];
+        $limit = $_GET['limit'];
+        $this->load->model('general/M_general', 'pagination');
+        $data['pagination'] = $this->pagination->get_data_search_pagination_tag($tag, $page, $limit)->result();
+        echo json_encode($data);
+    }
+
     public function get_num_page()
     {
         $year = $_GET['year'];
@@ -150,33 +166,42 @@ class general extends Exhibition_Controller
         echo json_encode($data);
     }
 
+    public function get_num_project_by_tag()
+    {
+        $tag = $_GET['tag'];
+        $this->load->model('general/M_general', 'num');
+        $data['num'] = $this->num->get_num_project_by_tag($tag)->result();
+        echo json_encode($data);
+    }
+
+
     public function get_search()
     {
         $year = $this->input->post('year_search');
         if ($year == '') {
-            $year = 'YEAR(date)';
+            $year = 'project.date';
         }
         $grade = $this->input->post('grade');
         if ($grade == '2') {
-            $grade = 'AND cluster_id != 0';
+            $grade = 'AND project.cluster_id != 0';
         } else if ($grade == '3') {
-            $grade = 'AND team_id != 0';
+            $grade = 'AND project.team_id != 0';
         } else if ($grade = 'cluster != 0' == '4') {
-            $grade = 'AND cluster_id = 0 AND team_id = 0';
+            $grade = 'AND project.cluster_id = 0 AND project.team_id = 0';
         } else {
             $grade = '';
         }
         $cluster = $this->input->post('cluster');
         if ($cluster == '') {
-            $cluster = 'cluster_id';
+            $cluster = 'project.cluster_id';
         }
         $team = $this->input->post('team');
         if ($team == '') {
-            $team = 'team_id';
+            $team = 'project.team_id';
         }
         $company = $this->input->post('company');
         if ($company == '') {
-            $company = 'company_id';
+            $company = 'project.company_id';
         }
         $pname = $this->input->post('pname');
         if ($pname == '') {
@@ -192,54 +217,15 @@ class general extends Exhibition_Controller
         $data['company'] = $company;
         $data['pname'] = $pname;
         $data['tag'] = $tag;
-        $this->output_frontend('general/v_search', $data);
+        $this->output_general('general/v_search', $data);
     }
 
-    public function get_search_data()
+    public function get_search_tag($tag)
     {
-        $year = $this->input->post('year_search');
-        if ($year == '') {
-            $year = 'YEAR(date)';
-        }
-        $grade = $this->input->post('grade');
-        if ($grade == '2') {
-            $grade = 'AND cluster_id != 0';
-        } else if ($grade == '3') {
-            $grade = 'AND team_id != 0';
-        } else if ($grade = 'cluster != 0' == '4') {
-            $grade = 'AND cluster_id = 0 AND team_id = 0';
-        } else {
-            $grade = '';
-        }
-        $cluster = $this->input->post('cluster');
-        if ($cluster == '') {
-            $cluster = 'cluster_id';
-        }
-        $team = $this->input->post('team');
-        if ($team == '') {
-            $team = 'team_id';
-        }
-        $company = $this->input->post('company');
-        if ($company == '') {
-            $company = 'company_id';
-        }
-        $pname = $this->input->post('pname');
-        if ($pname == '') {
-            $pname = 'name';
-        }
-        $tag = $this->input->post('tag');
-        if ($tag == '') {
-            $tag = 'project_tag.tag_id';
-        }
-
-        $this->load->model('general/M_general', 'search');
-        $data['search'] = $this->search->get_search($year, $grade, $cluster, $team, $company, $pname, $tag)->result();
-        $data['keyword'] = $this->input->post();
-        // echo "<pre>";
-        // echo print_r($this->input->post());
-        // echo "</pre>";
+        $data['tag'] = $tag;
+        $data['search'] = 'tag';
 
-        $this->load->view('general/v_search', $data);
+        $this->output_general('general/v_search', $data);
     }
 
     public function show_select($id)
@@ -279,34 +265,34 @@ class general extends Exhibition_Controller
         echo json_encode($data);
     }
 
-    public function insert_comment(){
-		$data['message'] = true;
-		$sender = $this->input->post('sender');
-		$detail = $this->input->post('detail');
-		$id = $this->input->post('id');
-		$google_url = "https://www.google.com/recaptcha/api/siteverify";
-		$secret_key = '6Lec8uckAAAAALcbXBS1XQ36NNrY8ztqPtwuPM8W';
-		$response = $this->input->post('captcha');
-		if(!empty($response))
-		{
-			$url = $google_url."?secret=".$secret_key."&response=".$response;
-			$ch = curl_init(); 
-			curl_setopt($ch, CURLOPT_URL, $url); 
-			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
-			$output = curl_exec($ch); 
-			curl_close($ch);      
-			$res= json_decode($output, true);
-			if($res['success'] == 'true') 
-				$data['message'] = true;
-			else
-			$data['message'] = false;
-		}else{
-			$data['message'] = false;
-		}
-		$this->load->model('general/M_general', 'general');
-		if($data['message'] == true){
-			$this->general->insert_comment($sender, $detail, date("Y-m-d"), $id);
-		}
-		echo json_encode($data);
-	}
+    public function insert_comment()
+    {
+        $data['message'] = true;
+        $sender = $this->input->post('sender');
+        $detail = $this->input->post('detail');
+        $id = $this->input->post('id');
+        $google_url = "https://www.google.com/recaptcha/api/siteverify";
+        $secret_key = '6Lec8uckAAAAALcbXBS1XQ36NNrY8ztqPtwuPM8W';
+        $response = $this->input->post('captcha');
+        if (!empty($response)) {
+            $url = $google_url . "?secret=" . $secret_key . "&response=" . $response;
+            $ch = curl_init();
+            curl_setopt($ch, CURLOPT_URL, $url);
+            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+            $output = curl_exec($ch);
+            curl_close($ch);
+            $res = json_decode($output, true);
+            if ($res['success'] == 'true')
+                $data['message'] = true;
+            else
+                $data['message'] = false;
+        } else {
+            $data['message'] = false;
+        }
+        $this->load->model('general/M_general', 'general');
+        if ($data['message'] == true) {
+            $this->general->insert_comment($sender, $detail, date("Y-m-d"), $id);
+        }
+        echo json_encode($data);
+    }
 }
diff --git a/html/exhi/application/models/general/M_general.php b/html/exhi/application/models/general/M_general.php
index 0c90df66389e0280001d1f0de10f5797c60dbd12..688eeb4346f91035d14be9008d8a449b67d3115a 100644
--- a/html/exhi/application/models/general/M_general.php
+++ b/html/exhi/application/models/general/M_general.php
@@ -26,7 +26,57 @@ class M_general extends Da_general
 
     public function get_trend()
     {
-        $sql = "SELECT * FROM {$this->db_name}.project ORDER BY project_id DESC LIMIT 4";
+        $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 
+        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
+        JOIN company ON project.company_id = company.company_id
+        JOIN instructor ON project.instructor_id = instructor.instructor_id
+        WHERE project.status = 1
+        ORDER BY project_id DESC LIMIT 4";
+        $query = $this->db->query($sql);
+        return $query;
+    }
+
+    public function get_data_search_pagination_tag($tag, $page, $limit)
+    {
+        $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
+        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
+        JOIN team ON project.team_id = team.team_id
+        JOIN cluster ON project.cluster_id = cluster.cluster_id
+        JOIN company ON project.company_id = company.company_id
+        JOIN instructor ON project.instructor_id = instructor.instructor_id
+        WHERE project.status = 1 
+        AND project_tag.tag_id = $tag
+        LIMIT $limit OFFSET $offset";
+        $query = $this->db->query($sql);
+        return $query;
+    }
+
+    public function get_num_project_by_tag($tag)
+    {
+
+        $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 
+        AND project_tag.tag_id = $tag
+        GROUP BY project_tag.tag_id";
+        $query = $this->db->query($sql);
+        return $query;
+    }
+
+    public function get_tag()
+    {
+        $sql = "SELECT tag.tag_id AS id, tag.name AS tag, COUNT(project_tag.tag_id) AS num  FROM  {$this->db_name}.project_tag 
+        JOIN tag ON project_tag.tag_id = tag.tag_id
+        JOIN project ON project_tag.project_id = project.project_id
+        WHERE project.status = 1
+        GROUP BY tag.tag_id";
         $query = $this->db->query($sql);
         return $query;
     }
@@ -81,16 +131,6 @@ class M_general extends Da_general
         return $query;
     }
 
-    public function get_project_4($year)
-    {
-        $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 FROM {$this->db_name}.project
-		JOIN user on project.user_id = user.user_id
-        JOIN company ON project.company_id = company.company_id
-		Where project.status = 1 AND cluster_id = 0 AND team_id = 0 AND date = $year";
-        $query = $this->db->query($sql);
-        return $query;
-    }
-
     public function get_project_4_year()
     {
         $sql = "SELECT date AS year FROM {$this->db_name}.project
@@ -104,9 +144,11 @@ class M_general extends Da_general
     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 FROM {$this->db_name}.project
-		join user on project.user_id = user.user_id
-		Where project.status = 1 AND cluster_id = 0 AND team_id = 0 AND date = $year
+        $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
+		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
+		WHERE project.status = 1 AND cluster_id = 0 AND team_id = 0 AND date = $year
         LIMIT $limit OFFSET $offset";
         $query = $this->db->query($sql);
         return $query;
@@ -118,16 +160,22 @@ class M_general extends Da_general
         ($tag == '') ?: $tag = implode(',', $tag);
         $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 *, 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.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
+        JOIN team ON project.team_id = team.team_id
+        JOIN cluster ON project.cluster_id = cluster.cluster_id
+        JOIN company ON project.company_id = company.company_id
+        JOIN instructor ON project.instructor_id = instructor.instructor_id
         WHERE 
             (project_tag.project_id IS NULL OR project_tag.project_id = project_tag.project_id)
             $pname
             AND date = $year
-            AND company_id = $company
-            AND cluster_id = $cluster
-            AND team_id = $team
+            AND project.company_id = $company
+            AND project.cluster_id = $cluster
+            AND project.team_id = $team
             $grade
             AND status = 1
             $tag 
diff --git a/html/exhi/application/views/general/v_general_home.php b/html/exhi/application/views/general/v_general_home.php
index 33ac103c04a4eeeaa91b2bd34bea59be86b824cb..14a03dd68caf0e51c38b241609cd8822d9c8425f 100644
--- a/html/exhi/application/views/general/v_general_home.php
+++ b/html/exhi/application/views/general/v_general_home.php
@@ -1,369 +1,336 @@
 <style>
-    .card-content-head {
-        /* Rectangle 341 */
-
-        box-sizing: border-box;
-
-        position: absolute;
-        width: 375px;
-        height: 80px;
-        top: -30px;
-
-        background: #0359BE;
-        border: 1px solid #0359BE;
-        border-radius: 16px;
-
-        text-align: center;
-        justify-content: center;
-
-    }
-
-    .card-content {
-        /* Rectangle 340 */
-
-        box-sizing: border-box;
-
-        /* position: absolute; */
-        width: 439px;
-        height: 460px;
-
-        background: #FFFFFF;
-        border: 1px solid #EFEEEE;
-        border-radius: 42px;
-
-        align-items: center;
-        justify-content: center;
-
-    }
-
-    .logo-incard {
-        top: 30px
-    }
-
-    .button-mid {
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        top: 110px;
-    }
-
-    .year {
-        /* position: absolute; */
-        /* left: 50%; */
-        /* transform: translate(-50%, -50%); */
-        /* top: 120px; */
-    }
-
-    .button-mid {
-        display: block;
-        margin: auto;
-        /* Rectangle 102 */
-
-        box-sizing: border-box;
-
-        position: absolute;
-        width: 267px;
-        height: 44px;
-
-        background: #FFFFFF;
-        border: 1px solid #000000;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        border-radius: 10px;
-
+    /* .page-header.page-header-small {
+    min-height: 60vh;
+    max-height: 440px;
+} */
+    body {
+        background: #f4f4f4;
+        background-color: white;
+    }
+
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
+    }
+
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
     }
 
-    .card-container {
-        display: flex;
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
     }
 
-    h3,
-    h3:hover {
-        color: white;
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
     }
 
-    a,
-    a:hover {
-        color: black;
+    .description {
+        font: 500 100%;
+        font-size: 16px;
     }
 
-    p {
-        padding: 20px 30px 30px 50px;
-        text-align: justify;
+    .card card-grow {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
     }
 
-    .num_project {
-        bottom: 10px;
+    .section {
+        padding: 40px 0;
     }
 
-    ul.cloud {
-        list-style: none;
-        padding: 0px 300px 0px 300px;
-        /* padding-left: 0; */
-        margin: 50px;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-        line-height: 2.5rem;
+    .title {
+        padding-top: 0px;
     }
 
-    ul.cloud a {
-        color: #a33;
-        display: block;
-        font-size: 1.5rem;
-        padding: 0.125rem 0.25rem;
-        text-decoration: none;
-        position: relative;
+    table,
+    th,
+    td {
+        border-collapse: collapse;
     }
 
-    ul.cloud a {
-        --size: attr(data-weight number, 2);
-        font-size: calc(var(--size) * 1rem);
-    }
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
 
-    ul.cloud a[data-weight="1"] {
-        --size: 1;
     }
 
-    ul.cloud a[data-weight="2"] {
-        --size: 2;
+    span {
+        font-size: 14px;
+        color: #41474c;
     }
 
-    ul.cloud a[data-weight="3"] {
-        --size: 3;
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
     }
 
-    ul.cloud a[data-weight="4"] {
-        --size: 4;
+    .icon {
+        color: #41474c;
     }
 
-    ul.cloud a[data-weight="5"] {
-        --size: 5;
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
     }
 
-    ul.cloud a[data-weight="6"] {
-        --size: 6;
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
     }
 
-    ul.cloud a[data-weight="7"] {
-        --size: 7;
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
     }
 
-    ul.cloud a[data-weight="8"] {
-        --size: 8;
+    a,
+    a:hover {
+        color: black;
     }
 
-    ul.cloud a[data-weight="9"] {
-        --size: 9;
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
     }
 
-    ul.cloud a {
-        --size: 4;
-        font-size: calc(var(--size) * 0.25rem + 0.5rem);
-        /* ... */
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    ul.cloud[data-show-value] a::after {
-        content: " ("attr(data-weight) ")";
-        font-size: 1rem;
+    .text-primary-custom {
+        color: #007bff !important
     }
 
-    ul.cloud li:nth-child(2n+1) a {
-        --color: #181;
-        color: #181;
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
     }
 
-    ul.cloud li:nth-child(3n+1) a {
-        --color: #33a;
-        color: #33a;
+    .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);
     }
 
-    ul.cloud li:nth-child(4n+1) a {
-        --color: #c38;
-        color: #c38;
+    [data-tooltip] {
+        position: relative;
+        z-index: 9999999;
+        cursor: pointer;
     }
 
-    ul.cloud a {
-        opacity: calc((15 - (9 - var(--size))) / 15);
-        /* ... */
+    /* Hide the tooltip content by default */
+    [data-tooltip]:before,
+    [data-tooltip]:after {
+        visibility: hidden;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+        opacity: 0;
+        pointer-events: none;
     }
 
-    ul.cloud a:focus {
-        outline: 1px dashed;
+    /* Position tooltip above the element */
+    [data-tooltip]:before {
+        position: absolute;
+        bottom: 80%;
+        left: 50%;
+        margin-bottom: 5px;
+        margin-left: -30px;
+        padding: 7px;
+        width: 60px;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        background-color: #000;
+        background-color: hsla(0, 0%, 20%, 0.9);
+        color: #fff;
+        content: attr(data-tooltip);
+        text-align: center;
+        font-size: 14px;
+        line-height: 1.2;
     }
 
-    ul.cloud a::before {
-        content: "";
+    /* Triangle hack to make tooltip look like a speech bubble */
+    [data-tooltip]:after {
         position: absolute;
-        top: 0;
+        bottom: 80%;
         left: 50%;
+        margin-left: 1px;
         width: 0;
-        height: 100%;
-        background: var(--color);
-        transform: translate(-50%, 0);
-        opacity: 0.15;
-        transition: width 0.25s;
-    }
-
-    ul.cloud a:focus::before,
-    ul.cloud a:hover::before {
-        width: 100%;
+        border-top: 5px solid #000;
+        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+        border-right: 5px solid transparent;
+        border-left: 5px solid transparent;
+        content: " ";
+        font-size: 0;
+        line-height: 0;
     }
 
-    @media (prefers-reduced-motion) {
-        ul.cloud * {
-            transition: none !important;
-        }
+    /* Show tooltip content on hover */
+    [data-tooltip]:hover:before,
+    [data-tooltip]:hover:after {
+        visibility: visible;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+        opacity: 1;
+        z-index: 9999999;
     }
 
-    .content {
-        max-width: 1500px;
-        max-height: auto;
-        margin: auto;
-        background: white;
-        padding: 10px;
+    .grow {
+        transition: all .2s ease-in-out;
     }
 
-    .content-wrapper {
-        background-image: url('https://img.freepik.com/free-vector/gradient-network-connection-background_23-2148865392.jpg?w=1380&t=st=1673897858~exp=1673898458~hmac=75ebd87bac4d7a1a3bd628c4b046af5c822d41bcaadf4ad8a9a39e24f110b394');
-    }
-
-    .card-footer {
-        padding-top: 12px;
+    .grow:hover {
+        transform: scale(1.2);
     }
 </style>
-<div class="content-wrapper">
-    <div class="content">
-        <div class="container-fluid g-3">
-            <button class="button button-mid" data-toggle="modal" data-target="#advanceSearcheModal">ค้นหาขั้นสูง</button><br><br><br><br>
-        </div>
-        <div class="search-container">
-            <form method="POST" action="<?php echo site_url() . '/General/get_search' ?>">
-                <input type="text" placeholder="ชื่อโปรเจกต์.." name="pname" id="pname">
-                <button disabled id=" pname_btn" type="submit"><i class="fa fa-search"></i></button>
-            </form>
-        </div>
-        <div class="year">
-            <label for="year">ปี: </label>
-            <select name="year" id="year" onchange="get_num_project()">
-            </select>
-            <br><br>
-        </div>
-        <div>
-            <h5><b>ผลงานที่เพิ่มล่าสุด</b></h5>
-        </div>
-        <div class="row" id="trend">
-        </div>
-        <div class="row justify-content-center">
-            <div class="col-12 col-sm-6 col-md-3">
-                <div class="info-box">
-                    <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
-                    <div class="info-box-content">
-                        <span class="info-box-text">จำนวนผลงานทั้งหมด</span>
-                        <span class="info-box-number" id="num_project_all">
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 col-sm-6 col-md-3">
-                <div class="info-box mb-3">
-                    <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
-                    <div class="info-box-content">
-                        <span class="info-box-text" id="num_project_by_year_label">จำนวนผลงานในปี 2565</span>
-                        <span class="info-box-number" id="num_project_by_year">
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row justify-content-around">
-            <a id="project_2" href="<?php echo site_url() . '/General/show_project_2' ?>" class="col-md-4">
-                <div class="card card-widget widget-user">
-                    <div class="widget-user-header text-white" style="background: url('https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop') center center;">
-                    </div>
-                    <div class="card-footer">
-                        <div class="">
-                            <h5 class="description-header"><b>ชั้นปีที่ 2</b></h5>
-                        </div>
-                        <div class="">
-                            <div class="description-block">
-                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88823759</h5>
+<div class="wrapper">
+    <div class="container-fluid">
+        <div class="section section-about-us" style="padding: 0px">
+            <div class="content" style="padding: 20px">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="get_num_project()">
+                                </select>
                             </div>
                         </div>
-                        <div class="">
-                            <div class="description-block">
-                                <div class="num_project" id="num_project_2"></div>
+                        <div class="col-md-2 position-relative">
+                            <div class="input-group">
+                                <input type="search" class="form-control form-control-lg" placeholder="ชื่อโปรเจกต์..">
+                                <div class="input-group-append">
+                                    <button type="submit" class="btn btn-lg btn-default">
+                                        <i class="fa fa-search"></i>
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </a>
-            <a id="project_3" href="<?php echo site_url() . '/General/show_project_3' ?>" class="col-md-4">
-                <div class="card card-widget widget-user">
-                    <div class="widget-user-header text-white" style="background: url('https://www.investopedia.com/thmb/SPOl62NtucSLHi9-XyGJxm-Wo68=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-943067460-28883b8136b24330932cd4e2855c2508.jpg') center center;">
+                    <div>
+                        <h5><b>ผลงานที่เพิ่มล่าสุด</b></h5>
+                    </div>
+                    <div class="row" id="trend">
+                    </div>
+                    <div>
+                        <h5><b>Category</b></h5>
                     </div>
-                    <div class="card-footer">
-                        <div class="">
-                            <h5 class="description-header"><b>ชั้นปีที่ 3</b></h5>
+                    <div class="row">
+                        <div class="col-md-4">
+                            <a id="project_2" href="<?php echo site_url() . '/General/show_project_2' ?>">
+                                <div class="card card-grow">
+                                    <img class="card-img-top" src="https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop" height="150px" style="object-fit: cover;" alt="card card-growimage cap">
+                                    <div class="card-body">
+                                        <div>
+                                            <h5 class="description-header"><b>ชั้นปีที่ 2</b></h5>
+                                        </div>
+                                        <span>
+                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88823759</h5>
+                                        </span>
+                                        <span>
+                                            <div class="num_project" id="num_project_2"></div>
+                                        </span>
+                                    </div>
+                                </div>
+                            </a>
                         </div>
-                        <div class="">
-                            <div class="description-block">
-                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88837259 </h5>
-                            </div>
+                        <div class="col-md-4">
+                            <a id="project_3" href="<?php echo site_url() . '/General/show_project_3' ?>">
+                                <div class="card card-grow">
+                                    <img class="card-img-top" src="https://www.investopedia.com/thmb/SPOl62NtucSLHi9-XyGJxm-Wo68=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-943067460-28883b8136b24330932cd4e2855c2508.jpg" height="150px" style="object-fit: cover;" alt="card card-growimage cap">
+                                    <div class="card-body">
+                                        <div>
+                                            <h5 class="description-header"><b>ชั้นปีที่ 3</b></h5>
+                                        </div>
+                                        <span>
+                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88837259 </h5>
+                                        </span>
+                                        <span>
+                                            <div class="num_project" id="num_project_3"></div>
+                                        </span>
+                                    </div>
+                                </div>
+                            </a>
                         </div>
-                        <div class="">
-                            <div class="description-block">
-                                <div class="num_project" id="num_project_3"></div>
-                            </div>
+                        <div class="col-md-4">
+                            <a id="project_4" href="<?php echo site_url() . '/General/show_project_4' ?>">
+                                <div class="card card-grow">
+                                    <img class="card-img-top" src="https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop" height="150px" style="object-fit: cover;" alt="card card-growimage cap">
+                                    <div class="card-body">
+                                        <div>
+                                            <h5 class="description-header"><b>ชั้นปีที่ 4</b></h5>
+                                        </div>
+                                        <span>
+                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 8841959</h5>
+                                        </span>
+                                        <span>
+                                            <div class="num_project" id="num_project_4"></div>
+                                        </span>
+                                    </div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
-            </a>
-            <a id="project_4" href="<?php echo site_url() . '/General/show_project_4' ?>" class="col-md-4">
-                <div class="card card-widget widget-user">
-                    <div class="widget-user-header text-white" style="background: url('https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop') center center;">
-                    </div>
-                    <div class="card-footer">
-                        <div class="">
-                            <h5 class="description-header"><b>ชั้นปีที่ 4</b></h5>
-                        </div>
-                        <div class="">
-                            <div class="description-block">
-                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 8841959</h5>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5>Tag Cloud</h5>
+                            </div>
+                            <div class="card-body">
+                                <div id="tagCloud" style="width: auto; height: 350px; "></div>
                             </div>
                         </div>
-                        <div class="">
-                            <div class="description-block">
-                                <div class="num_project" id="num_project_4"></div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5>สถิติ</h5>
+                            </div>
+                            <div class="card-body" style="text-align:center; width: auto; height: 390px; position: relative;">
                             </div>
                         </div>
                     </div>
                 </div>
-            </a>
-        </div>
-        <div class="card">
-            <div class="card-body ">
-                <ul class="cloud" role="navigation" aria-label="Webdev tag cloud">
-                    <li><a data-weight="4" href="/tag/http">HTTP</a></li>
-                    <li><a data-weight="2" href="/tag/ember">Ember</a></li>
-                    <li><a data-weight="5" href="/tag/sass">Sass</a></li>
-                    <li><a data-weight="8" href="/tag/html">HTML</a></li>
-                    <li><a data-weight="6" href="/tag/flexbox">FlexBox</a></li>
-                    <li><a data-weight="4" href="/tag/api">API</a></li>
-                    <li><a data-weight="5" href="/tag/vuejs">VueJS</a></li>
-                    <li><a data-weight="6" href="/tag/grid">Grid</a></li>
-                    <li><a data-weight="3" href="/tag/rest">Rest</a></li>
-                    <li><a data-weight="9" href="/tag/javascript">JavaScript</a></li>
-                    <li><a data-weight="3" href="/tag/animation">Animation</a></li>
-                    <li><a data-weight="7" href="/tag/react">React</a></li>
-                    <li><a data-weight="8" href="/tag/css">CSS</a></li>
-                    <li><a data-weight="1" href="/tag/cache">Cache</a></li>
-                    <li><a data-weight="3" href="/tag/less">Less</a></li>
-                </ul>
             </div>
         </div>
     </div>
 </div>
+</div>
 <div class="modal fade" id="advanceSearcheModal" tabindex="-1" role="dialog" aria-labelledby="advanceSearcheModalTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
         <div class="modal-content">
@@ -452,15 +419,41 @@
         </div>
     </div>
 </div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
+            </div>
+        </div>
+    </div>
+    </div>
+</footer>
+<footer class="footer-bar">
+    <div class=" container ">
+        <div class="row justify-content-md-center">
+            <div class="col-md-12">
+                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
+            </div>
+        </div>
+    </div>
+</footer>
 <script>
     $(document).ready(function() {
         get_project_year();
         get_trend();
-        $("#muti").select2().select2()
+        $("#muti").select2().select2();
         let year = document.getElementById("year").value;
         $('#project_2').attr('href', '<?php echo site_url() . "/General/show_project_2" ?>?y=' + year);
         $('#project_3').attr('href', '<?php echo site_url() . "/General/show_project_3" ?>?y=' + year);
         $('#project_4').attr('href', '<?php echo site_url() . "/General/show_project_4" ?>?y=' + year);
+        get_tag();
     });
 
     function get_project_year() {
@@ -534,25 +527,52 @@
         })
     }
 
+    function create_tag(data) {
+        let tag = [];
+        let url = "<?php echo site_url() . '/General/get_search_tag/' ?>"
+        data.forEach((row, index) => {
+            tag.push({
+                text: row.tag,
+                weight: row.num,
+                link: url + row.id,
+                html: {
+                    "data-tooltip": row.num,
+                    "class": "grow"
+                }
+            })
+        })
+        console.log('node', tag)
+        $("#tagCloud").jQCloud(tag);
+    }
+
+    function get_tag() {
+        $.ajax({
+            type: 'get',
+            url: "<?php echo site_url() . '/General/get_tag'; ?>",
+            data: {},
+            dataType: 'json',
+            success: function(data) {
+                console.log(data)
+                create_tag(data.tag)
+            }
+        })
+    }
+
     function create_trend(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += `<a href="<?php echo site_url() . '/General/show_select/' ?>` + row.project_id + `" class="col-md-3">`;
-            html += `<div class="card card-widget widget-user">`;
-            html += `<div class="widget-user-header text-white" style="background: url('<?php echo base_url() ?>` + row.image_cover + `') center center;">`;
-            html += `</div>`;
-            html += `<div class="widget-user-image">`;
-            html += `<img class="img-circle" src="<?php echo base_url() ?>` + row.image_logo + `" alt="User Avatar">`;
-            html += `</div>`;
-            html += `<div class="card-body">`;
-            html += `<h5 class="description-header"><b>` + row.pj_name + `</b></h5><br>`;
-            html += `<div class="description-block">`;
-            html += `<h5 class="description-header">` + row.first_name + ' ' + row.last_name + `</h5>`;
-            html += `<h5 class="description-header">` + row.student_id + `</h5>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</a>`;
+            html += '<div class="col-md-3 article-loop" >';
+            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.is_name}</span><br>`: (row.cluster_id != 0) ? html += `<span>มกุล : ${row.ct_name}</span><br>` : html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('trend').innerHTML = html;
     }
@@ -563,13 +583,8 @@
         let selectDiv_3 = document.querySelector('#num_project_3')
         let selectDiv_4 = document.querySelector('#num_project_4')
         let selectDiv_all = document.querySelector('#num_project_all')
-        let selectDiv_by_year = document.querySelector('#num_project_by_year')
-        let selectDiv_by_year_label = document.querySelector('#num_project_by_year_label')
         selectDiv_2.innerHTML = 'จำนวนผลงาน : ' + data.cluster + ' ผลงาน';
         selectDiv_3.innerHTML = 'จำนวนผลงาน : ' + data.team + ' ผลงาน';
         selectDiv_4.innerHTML = 'จำนวนผลงาน : ' + data.project + ' ผลงาน';
-        selectDiv_all.innerHTML = data.all_project + '<small> ผลงาน</small><br>';
-        selectDiv_by_year.innerHTML = data.by_year + '<small> ผลงาน</small><br>';
-        selectDiv_by_year_label.innerHTML = 'จำนวนผลงานในปี ' + thai_year;
     }
 </script>
\ No newline at end of file
diff --git a/html/exhi/application/views/general/v_project_2.php b/html/exhi/application/views/general/v_project_2.php
index c10e58040a79dc760743f37e84b0cc88ef6a1322..dff63ed97790c07f93ce5401e0b7277e716fc79f 100644
--- a/html/exhi/application/views/general/v_project_2.php
+++ b/html/exhi/application/views/general/v_project_2.php
@@ -1,62 +1,192 @@
 <style>
-    a,
-    a:hover {
-        color: black;
+    /* .page-header.page-header-small {
+    min-height: 60vh;
+    max-height: 440px;
+} */
+    body {
+        background: #f4f4f4;
+        background-color: white;
     }
 
-    #divR {
-        align-items: center;
-        justify-content: center;
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
     }
 
-    .content {
-        max-width: 1500px;
-        max-height: auto;
-        margin: auto;
-        background: white;
-        padding: 10px;
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
     }
 
-    .info-box {
-        height: 120px;
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
     }
 
-    .info-box-icon {
-        height: 100px;
-        width: 100px;
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
     }
 
-    .info-box-text {
-        text-align: center;
-        font-weight: bold;
+    .description {
+        font: 500 100%;
+        font-size: 16px;
     }
 
-    /* p {
-        text-align: justify;
-    } */
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
+    }
+
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+    }
 </style>
 <?php $y = $_GET['y']; ?>
-<div class="content-wrapper h-100">
-    <div class="content-header">
-        <div class="container-fluid g-3">
-            Home/ <a href="<?php echo site_url() . '/General/show_general_home/' ?>">Dashboard</a> /ผลงานกิจกรรมชั้นปีที่ 2
+<div class="wrapper">
+    <div class="container-fluid">
+        <div class="section section-about-us" style="padding: 0px">
+            <div class="content" style="padding: 20px">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="project" class="row">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="content">
-        <div class="mb-3"></div>
-        <div class="card-container">
-            <div>
-                <label for="year">ปี: </label>
-                <select name="year" id="year" onchange="get_project_2()">
-                </select>
-                <br><br>
+</div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
             </div>
         </div>
-        <div id="project" class="row">
+    </div>
+    </div>
+</footer>
+<footer class="footer-bar">
+    <div class=" container ">
+        <div class="row justify-content-md-center">
+            <div class="col-md-12">
+                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
+            </div>
         </div>
     </div>
-</div>
-
+</footer>
 <script>
     $(document).ready(function() {
         get_project_2_year();
@@ -112,16 +242,18 @@
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-
-            html += `<a href="<?php echo site_url() . '/General/show_select/' ?>` + row.project_id + `" target="_blank" class="col-md-4">`;
-            html += `<div class="info-box mb-3">`;
-            html += `<span class="info-box-icon bg-info elevation-1"><img src="<?php echo base_url() ?>` + row.image_logo + `""></img></span>`;
-            html += `<div class="info-box-content">`;
-            html += `<span class="info-box-text">` + row.ct_name + `</span>`;
-            html += `<span class="info-box-text">` + row.pj_name + `</span>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</a>`;
+            html += '<div class="col-md-3 article-loop" >';
+            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.name_th}</b></span></div>`;
+            html += `<span>บริษัท : ${row.cp_name}</span><br>`;
+            html += `<span>มกุล : ${row.ct_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }
diff --git a/html/exhi/application/views/general/v_project_3.php b/html/exhi/application/views/general/v_project_3.php
index 8f23df5f1015f28222ac026add9d12f67f4fc1d7..f1c103fc4cdc19a3e2dd139a432e8f158c6d043a 100644
--- a/html/exhi/application/views/general/v_project_3.php
+++ b/html/exhi/application/views/general/v_project_3.php
@@ -1,53 +1,192 @@
 <style>
-    a,
-    a:hover {
-        color: black;
+    /* .page-header.page-header-small {
+    min-height: 60vh;
+    max-height: 440px;
+} */
+    body {
+        background: #f4f4f4;
+        background-color: white;
     }
 
-    #divR {
-        align-items: center;
-        justify-content: center;
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
     }
 
-    .content {
-        max-width: 1500px;
-        max-height: auto;
-        margin: auto;
-        background: white;
-        padding: 10px;
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
     }
 
-    .info-box-text {
-        text-align: center;
-        font-weight: bold;
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
     }
 
-    /* p {
-        text-align: justify;
-    } */
-</style>
-<div class="content-wrapper h-100">
-    <div class="content-header">
-        <div class="container-fluid g-3">
-            Home/ <a href="<?php echo site_url() . '/General/show_general_home/' ?>">Dashboard</a> /ผลงานกิจกรรมชั้นปีที่ 3
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .description {
+        font: 500 100%;
+        font-size: 16px;
+    }
+
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
 
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
+    }
+
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+    }
+</style>
+<?php $y = $_GET['y']; ?>
+<div class="wrapper">
+    <div class="container-fluid">
+        <div class="section section-about-us" style="padding: 0px">
+            <div class="content" style="padding: 20px">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="get_project_3()">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="project" class="row">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="content">
-        <div class="mb-3"></div>
-        <div class="card-container">
-            <div>
-                <label for="year">ปี: </label>
-                <select name="year" id="year" onchange="get_project_3()">
-                </select>
-                <br><br>
+</div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
             </div>
         </div>
-        <div id="project" class="row">
+    </div>
+    </div>
+</footer>
+<footer class="footer-bar">
+    <div class=" container ">
+        <div class="row justify-content-md-center">
+            <div class="col-md-12">
+                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
+            </div>
         </div>
     </div>
-</div>
-
+</footer>
 <script>
     $(document).ready(function() {
         get_project_3_year();
@@ -100,16 +239,18 @@
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-
-            html += `<a href="<?php echo site_url() . '/General/show_select/' ?>` + row.project_id + `" target="_blank" class="col-md-4">`;
-            html += `<div class="info-box mb-3">`;
-            html += `<span class="info-box-icon bg-info elevation-1"><img src="<?php echo base_url() ?>` + row.image_logo + `"></img></span>`;
-            html += `<div class="info-box-content">`;
-            html += `<span class="info-box-text">` + row.t_name + `</span>`;
-            html += `<span class="info-box-text">` + row.pj_name + `</span>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</a>`;
+            html += '<div class="col-md-3 article-loop" >';
+            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.name_th}</b></span></div>`;
+            html += `<span>บริษัท : ${row.cp_name}</span><br>`;
+            html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }
diff --git a/html/exhi/application/views/general/v_project_4.php b/html/exhi/application/views/general/v_project_4.php
index 63433c49b0048171c56e8fb01e92f5a4ca916067..08825cf41314e62e28d06b0d2af3421691c47fa3 100644
--- a/html/exhi/application/views/general/v_project_4.php
+++ b/html/exhi/application/views/general/v_project_4.php
@@ -1,60 +1,209 @@
 <style>
-    a,
-    a:hover {
-        color: black;
+    /* .page-header.page-header-small {
+    min-height: 60vh;
+    max-height: 440px;
+} */
+    body {
+        background: #f4f4f4;
+        background-color: white;
     }
 
-    .content {
-        max-width: 1500px;
-        max-height: auto;
-        margin: auto;
-        background: white;
-        padding: 10px;
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
     }
 
-    .notfound {
-        text-align: center;
-        font-weight: bold;
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
+    }
+
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
+    }
+
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .description {
+        font: 500 100%;
+        font-size: 16px;
+    }
+
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
     }
 
-    .description-block {
-        text-align: left;
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+    }
+
+    .notfound {
+        text-align: center;
     }
 </style>
 <?php $y = $_GET['y']; ?>
-<div class="content-wrapper h-100">
-    <div class="content-header">
-        <div class="container-fluid g-3">
-            Home/ <a href="<?php echo site_url() . '/General/show_general_home/' ?>">Dashboard</a> /ผลงานกิจกรรมชั้นปีที่ 4
+<div class="wrapper">
+    <div class="container-fluid">
+        <div class="section section-about-us" style="padding: 0px">
+            <div class="content" style="padding: 20px">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="load_data()">
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-2 position-relative">
+                            <label for="limit" class="form-label">จำนวนต่อหน้า</label>
+                            <select name="limit" id="limit" class="form-control form-sm" onchange="load_num_project(), reset_page(), load_data()">
+                                <option value="10">10</option>
+                                <option value="20">20</option>
+                                <option value="50">50</option>
+                                <option value="100">100</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div id="project" class="row">
+                    </div>
+                    <nav aria-label="Page navigation">
+                        <ul class="pagination" id="select-page">
+                        </ul>
+                    </nav>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="content">
-        <div class="mb-3"></div>
-        <div class="card-container">
-            <div>
-                <label for="year">ปี: </label>
-                <select name="year" id="year" onchange="load_num_project(), reset_page(), load_data()">
-                </select>
+</div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
             </div>
-            <div>
-                <label for="limit">จำนวนต่อหน้า: </label>
-                <select name="limit" id="limit" onchange="load_num_project(), reset_page(), load_data()">
-                    <option value="10">10</option>
-                    <option value="20">20</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                </select>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
             </div>
-            <br><br>
         </div>
-        <div id="project" class="row"></div>
-        <nav aria-label="Page navigation">
-            <ul class="pagination" id="select-page">
-            </ul>
-        </nav>
     </div>
-</div>
-<div id="data-container"></div>
+    </div>
+</footer>
+<footer class="footer-bar">
+    <div class=" container ">
+        <div class="row justify-content-md-center">
+            <div class="col-md-12">
+                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
+            </div>
+        </div>
+    </div>
+</footer>
 <script>
     $(document).ready(function() {
         get_project_4_year();
@@ -170,22 +319,19 @@
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += `<a href="<?php echo site_url() . '/General/show_select/' ?>` + row.project_id + `" target="_blank" class="col-md-2">`;
-            html += `<div class="card card-widget widget-user">`;
-            html += `<div class="widget-user-header text-white" style="background: url('<?php echo base_url() ?>` + row.image_cover + `') center center;">`;
-            html += `</div>`;
-            html += `<div class="widget-user-image">`;
-            html += `<img class="img-circle" src="<?php echo base_url() ?>` + row.image_logo + `" alt="User Avatar">`;
-            html += `</div>`;
-            html += `<div class="card-body">`;
-            html += `<h5 class="description-header"><b>` + row.pj_name + `</b></h5><br>`;
-            html += `<div class="description-block">`;
-            html += `<h5 class="description-header">` + row.first_name + ' ' + row.last_name + `</h5>`;
-            html += `<h5 class="description-header">` + row.student_id + `</h5>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</a>`;
+            console.log(row)
+            html += '<div class="col-md-3 article-loop" >';
+            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.is_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }
diff --git a/html/exhi/application/views/general/v_project_search_2.php b/html/exhi/application/views/general/v_project_search_2.php
index e242622bf4a56ef02e1df1f977b6cafa9f482b3b..afb0d49da40981e9731cfeb9b07ecfd2ae51b40f 100644
--- a/html/exhi/application/views/general/v_project_search_2.php
+++ b/html/exhi/application/views/general/v_project_search_2.php
@@ -1,138 +1,144 @@
 <style>
-/* .page-header.page-header-small {
+    /* .page-header.page-header-small {
     min-height: 60vh;
     max-height: 440px;
 } */
-body {
-    background: #f4f4f4;
-    background-color: white;
-}
-
-body {
-    /* margin: 3rem; */
-    font: 500 100%;
-    font-size: 16px;
-    line-height: 1.5;
-    color: rgb(0, 0, 0);
-}
-
-@media (max-width: 1024px) {
     body {
-        margin: 0;
         background: #f4f4f4;
+        background-color: white;
     }
-}
-
-@media (max-width: 411px) {
-    h5 {
-        margin-top: 30px
-    }
-}
-
-.img {
-    background-image: url(small.jpg);
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.description {
-    font: 500 100%;
-    font-size: 16px;
-}
-
-.card {
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
-    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
-}
-
-.section {
-    padding: 40px 0;
-}
-
-.title {
-    padding-top: 0px;
-}
-
-table,
-th,
-td {
-    border-collapse: collapse;
-}
-
-.test_text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-
-}
-
-span{
-    font-size: 14px;
-    color: #41474c;
-}
-
-.footer-bar{
-    background-color: white;
-    padding: 10px 0px;
-}
-
-.icon{
-    color:#41474c;
-}
-.my-image{
-	width:200px;
-  	height:200px;
-  	object-fit:cover;
-  	border-radius:50%;
-}
-.tag-lg {
-    font-size: .8em;
-    border-radius: 4px;
-}
-
-.tag-custom {
-    background: #ffffff;
-    color: #000;
-    border-style: solid;
-    border-width: 0.7px;
-}
-.tag{
-	display: inline-block;
-    border-radius: 3px;
-    padding: .0em .3em .0em;
-    border-radius: 2px;
-    font-weight: 400;
-    margin: .25em .1em
-}
-.image-detail {
-	object-fit: cover;
-	width: auto;
-	height: auto;
-	padding: 20px;
-	display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-.text-primary-custom {
-	color: #007bff !important
-}
-.form-control:focus {
-    border: 1px solid #767170;
-    box-shadow: none;
-    outline: 0!important;
-    color: #2c2c2c;
-}
-.card:hover {
-    transform: scale(1.02);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
-}
 
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
+    }
+
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
+    }
+
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
+    }
+
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .description {
+        font: 500 100%;
+        font-size: 16px;
+    }
+
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
+    }
+
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+    }
 </style>
 <?php $y = $_GET['y']; ?>
 <div class="wrapper">
@@ -140,37 +146,37 @@ span{
         <div class="section section-about-us" style="padding: 0px">
             <div class="content" style="padding: 20px">
                 <div class="container-fluid">
-					<div class="row">
-						<div class="col-2 position-relative">
-							<div class="form-group">
-								<label for="year" class="form-label">ปี</label>
-								<select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
-								</select>
-							</div>
-						</div>
-					</div>
-					<div id="project" class="row">
-					</div>
-				</div>
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="project" class="row">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</div> 
-<footer class="footer footer-default" >
-<div class="container" >
-	<div class="row">
-		<div class="col-md-5" >
-			<b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
-			<span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
-			<span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
-		</div>
-		<div class="col-md-7 ml-auto" style="margin-top: 20px;">
-			<i class="fa fa-phone icon"></i>  <span>+66 (0)38-103061,+66 (0)38-10309</span>  <br>
-			<i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span> 
-		</div>
-    </div>
-</div>
 </div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
+            </div>
+        </div>
+    </div>
+    </div>
 </footer>
 <footer class="footer-bar">
     <div class=" container ">
@@ -182,7 +188,7 @@ span{
     </div>
 </footer>
 <script>
-	$(document).ready(function() {
+    $(document).ready(function() {
         get_project_2_year();
     });
 
@@ -237,18 +243,18 @@ span{
         let html = '';
         data.forEach((row, index) => {
             html += '<div class="col-md-3 article-loop" >';
-			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="http://localhost/exhi//project/year_2023/y3/team3/image_cover_23-03-14.png" height="150px" style="object-fit: cover;" alt="Card image cap">';
-			html += '<div class="card-body">';
-			html += `<div><span><b>${row.name_th}</b></span></div>`;
-			html += `<span>บริษัท : </span><br>`;
-			html += `<span>มกุล : ${row.ct_name}</span><br>`;
-			html += '</div>';
-			html += '</div>';
-			html += '</a>';
-			html += '</div>';
+            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="http://localhost/exhi//project/year_2023/y3/team3/image_cover_23-03-14.png" height="150px" style="object-fit: cover;" alt="Card image cap">';
+            html += '<div class="card-body">';
+            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>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/html/exhi/application/views/general/v_project_search_3.php b/html/exhi/application/views/general/v_project_search_3.php
index 3a8bbad77bc88559838cc55e8968f79ede9ae6de..92de0e80372ea54c3074e7b74cbd3e647e4a0d3c 100644
--- a/html/exhi/application/views/general/v_project_search_3.php
+++ b/html/exhi/application/views/general/v_project_search_3.php
@@ -1,138 +1,144 @@
 <style>
-/* .page-header.page-header-small {
+    /* .page-header.page-header-small {
     min-height: 60vh;
     max-height: 440px;
 } */
-body {
-    background: #f4f4f4;
-    background-color: white;
-}
-
-body {
-    /* margin: 3rem; */
-    font: 500 100%;
-    font-size: 16px;
-    line-height: 1.5;
-    color: rgb(0, 0, 0);
-}
-
-@media (max-width: 1024px) {
     body {
-        margin: 0;
         background: #f4f4f4;
+        background-color: white;
     }
-}
-
-@media (max-width: 411px) {
-    h5 {
-        margin-top: 30px
-    }
-}
-
-.img {
-    background-image: url(small.jpg);
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.description {
-    font: 500 100%;
-    font-size: 16px;
-}
-
-.card {
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
-    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
-}
-
-.section {
-    padding: 40px 0;
-}
-
-.title {
-    padding-top: 0px;
-}
-
-table,
-th,
-td {
-    border-collapse: collapse;
-}
-
-.test_text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-
-}
-
-span{
-    font-size: 14px;
-    color: #41474c;
-}
-
-.footer-bar{
-    background-color: white;
-    padding: 10px 0px;
-}
-
-.icon{
-    color:#41474c;
-}
-.my-image{
-	width:200px;
-  	height:200px;
-  	object-fit:cover;
-  	border-radius:50%;
-}
-.tag-lg {
-    font-size: .8em;
-    border-radius: 4px;
-}
-
-.tag-custom {
-    background: #ffffff;
-    color: #000;
-    border-style: solid;
-    border-width: 0.7px;
-}
-.tag{
-	display: inline-block;
-    border-radius: 3px;
-    padding: .0em .3em .0em;
-    border-radius: 2px;
-    font-weight: 400;
-    margin: .25em .1em
-}
-.image-detail {
-	object-fit: cover;
-	width: auto;
-	height: auto;
-	padding: 20px;
-	display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-.text-primary-custom {
-	color: #007bff !important
-}
-.form-control:focus {
-    border: 1px solid #767170;
-    box-shadow: none;
-    outline: 0!important;
-    color: #2c2c2c;
-}
-.card:hover {
-    transform: scale(1.02);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
-}
 
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
+    }
+
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
+    }
+
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
+    }
+
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .description {
+        font: 500 100%;
+        font-size: 16px;
+    }
+
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
+    }
+
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+    }
 </style>
 <?php $y = $_GET['y']; ?>
 <div class="wrapper">
@@ -140,37 +146,37 @@ span{
         <div class="section section-about-us" style="padding: 0px">
             <div class="content" style="padding: 20px">
                 <div class="container-fluid">
-					<div class="row">
-						<div class="col-2 position-relative">
-							<div class="form-group">
-								<label for="year" class="form-label">ปี</label>
-								<select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
-								</select>
-							</div>
-						</div>
-					</div>
-					<div id="project" class="row">
-					</div>
-				</div>
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <div class="form-group">
+                                <label for="year" class="form-label">ปี</label>
+                                <select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="project" class="row">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</div> 
-<footer class="footer footer-default" >
-<div class="container" >
-	<div class="row">
-		<div class="col-md-5" >
-			<b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
-			<span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
-			<span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
-		</div>
-		<div class="col-md-7 ml-auto" style="margin-top: 20px;">
-			<i class="fa fa-phone icon"></i>  <span>+66 (0)38-103061,+66 (0)38-10309</span>  <br>
-			<i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span> 
-		</div>
-    </div>
-</div>
 </div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
+            </div>
+        </div>
+    </div>
+    </div>
 </footer>
 <footer class="footer-bar">
     <div class=" container ">
@@ -182,7 +188,7 @@ span{
     </div>
 </footer>
 <script>
-	  $(document).ready(function() {
+    $(document).ready(function() {
         get_project_3_year();
     });
 
@@ -234,18 +240,18 @@ span{
         let html = '';
         data.forEach((row, index) => {
             html += '<div class="col-md-3 article-loop" >';
-			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="http://localhost/exhi//project/year_2023/y3/team3/image_cover_23-03-14.png" height="150px" style="object-fit: cover;" alt="Card image cap">';
-			html += '<div class="card-body">';
-			html += `<div><span><b>${row.name_th}</b></span></div>`;
-			html += `<span>อาจารย์ที่ปรึกษา : </span><br>`;
-			html += `<span>ทีม : ${row.t_name}</span><br>`;
-			html += '</div>';
-			html += '</div>';
-			html += '</a>';
-			html += '</div>';
+            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="http://localhost/exhi//project/year_2023/y3/team3/image_cover_23-03-14.png" height="150px" style="object-fit: cover;" alt="Card image cap">';
+            html += '<div class="card-body">';
+            html += `<div><span><b>${row.name_th}</b></span></div>`;
+            html += `<span>บริษัท : </span><br>`;
+            html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }
-</script>
+</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 0d66411c0de9265f27234972ff09666959d5c1bd..a8909dee3a21a2827c1d319d3b7e6e6b64770e6a 100644
--- a/html/exhi/application/views/general/v_search.php
+++ b/html/exhi/application/views/general/v_search.php
@@ -4,57 +4,214 @@
         color: black;
     }
 
-    .content {
-        max-width: 1500px;
-        max-height: auto;
-        margin: auto;
-        background: white;
-        padding: 10px;
+    body {
+        background: #f4f4f4;
+        background-color: white;
     }
 
-    .notfound {
-        text-align: center;
-        font-weight: bold;
+    body {
+        /* margin: 3rem; */
+        font: 500 100%;
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgb(0, 0, 0);
     }
 
-    .description-block {
-        text-align: left;
+    @media (max-width: 1024px) {
+        body {
+            margin: 0;
+            background: #f4f4f4;
+        }
+    }
+
+    @media (max-width: 411px) {
+        h5 {
+            margin-top: 30px
+        }
+    }
+
+    .img {
+        background-image: url(small.jpg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .description {
+        font: 500 100%;
+        font-size: 16px;
+    }
+
+    .card {
+        border-radius: 4px;
+        background: #fff;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+    }
+
+    .section {
+        padding: 40px 0;
+    }
+
+    .title {
+        padding-top: 0px;
+    }
+
+    table,
+    th,
+    td {
+        border-collapse: collapse;
+    }
+
+    .test_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+
+    }
+
+    span {
+        font-size: 14px;
+        color: #41474c;
+    }
+
+    .footer-bar {
+        background-color: white;
+        padding: 10px 0px;
+    }
+
+    .icon {
+        color: #41474c;
+    }
+
+    .my-image {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    .tag-lg {
+        font-size: .8em;
+        border-radius: 4px;
+    }
+
+    .tag-custom {
+        background: #ffffff;
+        color: #000;
+        border-style: solid;
+        border-width: 0.7px;
+    }
+
+    .tag {
+        display: inline-block;
+        border-radius: 3px;
+        padding: .0em .3em .0em;
+        border-radius: 2px;
+        font-weight: 400;
+        margin: .25em .1em
+    }
+
+    .image-detail {
+        object-fit: cover;
+        width: auto;
+        height: auto;
+        padding: 20px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .text-primary-custom {
+        color: #007bff !important
+    }
+
+    .form-control:focus {
+        border: 1px solid #767170;
+        box-shadow: none;
+        outline: 0 !important;
+        color: #2c2c2c;
+    }
+
+    .card:hover {
+        transform: scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
     }
 </style>
-<div class="content-wrapper h-100">
-    <div class="content-header">
-        <div class="container-fluid g-3">
-            Home/ <a href="<?php echo site_url() . '/General/show_general_home/' ?>">Dashboard</a> /ค้นหาขั้นสูง
+<?php $tag = (!isset($tag)) ? '' : $tag;
+$pname = (!isset($pname)) ? '' : $pname;
+$company = (!isset($company)) ? '' : $company;
+$cluster = (!isset($cluster)) ? '' : $cluster;
+$team = (!isset($team)) ? '' : $team;
+$grade = (!isset($grade)) ? '' : $grade;
+$year = (!isset($year)) ? '' : $year;
+?>
+<div class="wrapper">
+    <div class="container-fluid">
+        <div class="section section-about-us" style="padding: 0px">
+            <div class="content" style="padding: 20px">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-2 position-relative">
+                            <label for="limit" class="form-label">จำนวนต่อหน้า</label>
+                            <select name="limit" id="limit" class="form-control form-sm" onchange="load_num_project(), reset_page(), load_data()">
+                                <option value="10">10</option>
+                                <option value="20">20</option>
+                                <option value="50">50</option>
+                                <option value="100">100</option>
+                            </select>
+                        </div>
+                    </div><br>
+                    <div id="project" class="row">
+                    </div><br>
+                    <nav aria-label="Page navigation">
+                        <ul class="pagination" id="select-page">
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<footer class="footer footer-default">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-5">
+                <b style="font-size:16px;">คณะวิทยาการสารสนเทศ</b> <br>
+                <span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
+                <span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
+            </div>
+            <div class="col-md-7 ml-auto" style="margin-top: 20px;">
+                <i class="fa fa-phone icon"></i> <span>+66 (0)38-103061,+66 (0)38-10309</span> <br>
+                <i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span>
+            </div>
         </div>
     </div>
-    <div class="content">
-        <div class="mb-3"></div>
-        <div class="card-container">
-            <div>
-                <label for="limit">จำนวนต่อหน้า: </label>
-                <select name="limit" id="limit" onchange="load_num_project(), reset_page(), load_data()">
-                    <option value="10">10</option>
-                    <option value="20">20</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                </select>
+    </div>
+</footer>
+<footer class="footer-bar">
+    <div class=" container ">
+        <div class="row justify-content-md-center">
+            <div class="col-md-12">
+                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
             </div>
-            <br><br>
         </div>
-        <div id="project" class="row"></div>
-        <nav aria-label="Page navigation">
-            <ul class="pagination" id="select-page">
-            </ul>
-        </nav>
     </div>
-</div>
-<div id="data-container"></div>
+</footer>
 <script>
     $(document).ready(function() {
-        load_data()
-        load_num_project()
-    });
+        if (<?php echo $tag; ?> != '') {
+            load_data_tag()
+            load_num_project_tag()
+        } else {
+            load_data()
+            load_num_project()
+        }
 
+    });
 
     let current_page = 1;
 
@@ -89,6 +246,25 @@
         });
     }
 
+    function load_data_tag() {
+        let limit = document.getElementById("limit").value;
+        let tag = <?php echo json_encode($tag); ?>;
+        $.ajax({
+            type: "get",
+            url: "<?php echo site_url() . '/General/get_data_search_pagination_tag' ?>",
+            data: {
+                'tag': tag,
+                'page': current_page,
+                'limit': limit
+            },
+            dataType: "json",
+            success: function(data) {
+                console.log(data);
+                create_project(data.pagination)
+            }
+        });
+    }
+
     function load_num_project() {
         let limit = document.getElementById("limit").value;
         let year = '<?php echo $year; ?>';
@@ -119,6 +295,24 @@
         });
     }
 
+    function load_num_project_tag() {
+        let limit = document.getElementById("limit").value;
+        let tag = <?php echo json_encode($tag); ?>;
+        $.ajax({
+            type: "get",
+            url: "<?php echo site_url() . '/General/get_num_project_by_tag' ?>",
+            data: {
+                'tag': tag,
+            },
+            dataType: "json",
+            success: function(data) {
+                console.log(data)
+                let num = Math.ceil(data.num[0].num_project / limit);
+                create_page_select(num);
+            }
+        });
+    }
+
     function reset_page() {
         current_page = 1;
     }
@@ -147,26 +341,21 @@
         }
     }
 
-
     function create_project(data) {
         let html = '';
         data.forEach((row, index) => {
-            html += `<a href="<?php echo site_url() . '/General/show_select/' ?>` + row.project_id + `" target="_blank" class="col-md-2">`;
-            html += `<div class="card card-widget widget-user">`;
-            html += `<div class="widget-user-header text-white" style="background: url('<?php echo base_url() ?>` + row.image_cover + `') center center;">`;
-            html += `</div>`;
-            html += `<div class="widget-user-image">`;
-            html += `<img class="img-circle" src="<?php echo base_url() ?>` + row.image_logo + `" alt="User Avatar">`;
-            html += `</div>`;
-            html += `<div class="card-body">`;
-            html += `<h5 class="description-header"><b>` + row.name_th + `</b></h5><br>`;
-            html += `<div class="description-block">`;
-            // html += `<h5 class="description-header">` + row.first_name + ' ' + row.last_name + `</h5>`;
-            // html += `<h5 class="description-header">` + row.student_id + `</h5>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += `</a>`;
+            html += '<div class="col-md-3 article-loop" >';
+            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.is_name}</span><br>`: (row.cluster_id != 0) ? html += `<span>มกุล : ${row.ct_name}</span><br>` : html += `<span>ทีม : ${row.t_name}</span><br>`;
+            html += '</div>';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
         })
         document.getElementById('project').innerHTML = html;
     }