diff --git a/application/controllers/ExhibitionController.php b/application/controllers/ExhibitionController.php
index 6275c75d700998a26ef58e52e87955919d2bad7e..78ef25acc19f4535e907157c76246c416d9a4e4a 100644
--- a/application/controllers/ExhibitionController.php
+++ b/application/controllers/ExhibitionController.php
@@ -45,5 +45,15 @@ class ExhibitionController extends CI_Controller {
 		$this->load->view($view, $data);
 		$this->load->view('template/datta-able/footer');
 	}
+	public function output_template($view, $data = null)
+	{
+		$this->load->view('template/datta-able/header');
+		$this->load->view('template/datta-able/css');
+		$this->load->view('template/frontend/sidebar');
+		$this->load->view('template/frontend/topbar');
+		$this->load->view('template/frontend/javascript');
+		$this->load->view($view, $data);
+		$this->load->view('template/datta-able/footer');
+	}
 	
 }
diff --git a/application/controllers/Frontend.php b/application/controllers/Frontend.php
index 2341b6db9d90d614798e1511c19a0e7066a84309..ce59a0cd6db997e1e78dabcd988312d49b9aa516 100644
--- a/application/controllers/Frontend.php
+++ b/application/controllers/Frontend.php
@@ -124,4 +124,8 @@ class Frontend extends ExhibitionController {
 		redirect('Frontend/show_list_third');
 		
 	}
+	public function show_template(){
+		$_SESSION["sidebar"] = 'template';
+		$this->output_template('template');
+	}
 }
\ No newline at end of file
diff --git a/application/views/Template/frontend/sidebar.php b/application/views/Template/frontend/sidebar.php
index 72975cd532ea4537ab9ff85e907b46ce0b497788..59cf2c96934c301cf6f19e24ec1c8cc4ff7bf5ee 100644
--- a/application/views/Template/frontend/sidebar.php
+++ b/application/views/Template/frontend/sidebar.php
@@ -1,17 +1,20 @@
 <?php   $sidebar1 = ''; 
         $sidebar2 = ''; 
         $sidebar3 = ''; 
+        $sidebar4 = ''; 
         if($_SESSION["sidebar"] == 'SecondYear'){
             $sidebar1 = 'active';
         }else if($_SESSION["sidebar"] == 'ThirdYear'){
             $sidebar2 = 'active';
         }else if($_SESSION["sidebar"] == 'FourthYear'){
             $sidebar3 = 'active';
+         }else if($_SESSION["sidebar"] == 'template'){
+                $sidebar4 = 'active';
         }else {
             $sidebar1 = ''; 
             $sidebar2 = ''; 
             $sidebar3 = ''; 
-           
+            $sidebar4 = ''; 
         }
 ?>
 
@@ -40,7 +43,6 @@
                     <a href='<?php echo site_url().'/Frontend/show_list_fourth';?>' class="nav-link "><span class="pcoded-micon"><i class="feather icon-user"></i></span><span class="pcoded-mtext">Grade 4</span></a>
                 </li>
                 
-                
             </ul>
         </div><div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.5); width: 5px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 1164px;"></div><div class="slimScrollRail" style="width: 5px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
     </div>
diff --git a/application/views/template.php b/application/views/template.php
new file mode 100644
index 0000000000000000000000000000000000000000..5a67c08e9c92833d2df78e5e2e2412dcc4770b1c
--- /dev/null
+++ b/application/views/template.php
@@ -0,0 +1,156 @@
+
+<div class="pcoded-main-container">
+    <div class="pcoded-wrapper">
+        <div class="pcoded-content">
+            <div class="pcoded-inner-content">
+                <!-- [ breadcrumb ] start -->
+                <div class="page-header">
+                    <div class="page-block">
+                        <div class="row align-items-center">
+                            <div class="col-md-12">
+                                <div class="page-header-title">
+                                    <!-- <h5 class="m-b-10">จัดการข้อมูลกิจกรรรม</h5> -->
+                                </div>
+                                <!-- <ul class="breadcrumb">
+                                    <li class="breadcrumb-item"><a href="javascript:"></a></li>
+                                </ul> -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- [ breadcrumb ] end -->
+                <div class="main-body">
+                    <div class="page-wrapper">
+                        <!-- [ Main Content ] start -->
+                        <div class="card">
+                        <div class="card-header">
+                                        <h5>template</h5>
+                                    </div>
+                                 
+                                    <div class="container">
+                                        <div class="row">
+                                            <div class="col-sm-3">
+                                            <!-- <i class="feather icon-image"></i> -->
+                                            <img src="<?php echo base_url()?>/assets/images/image.png" alt="" style="width: 100%;max-height: 12rem;">
+                                            </div>
+                                            <div class="col-sm-9">
+                                            <div class="row">
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                <br></br>
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                               
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                <br></br>
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                <br></br>
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                <br></br>
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                </div>
+                                                <div class="col-8 col-sm-5">
+                                                Name : <input type = "text" name = "user">
+                                                </div>
+                                            </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                        <br>
+                        <div class="row">
+                        
+                      
+                        <div class="col-12">
+                                            <h3>&nbsp&nbspDetail</h3>
+                                            <textarea class='form-control'  rows="8" id='detail'></textarea>
+                                            <br>
+                                            </div>
+                            </div>
+                            <div class="col-12">
+                                            <h3>Comments</h3>
+                                            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">comment</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" role="dialog">
+  <div class="modal-dialog">
+  
+    <!-- Modal content-->
+    <div class="modal-content">
+      <div class="modal-header">
+       
+        <h4 class="modal-title">comment</h4>
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+      </div>
+      <div class="modal-body">
+      <form id="comment_form"  action="" method="post">
+                         
+                          
+                         Name : <input type = "text" name = "user">
+                         <h5>comment</h5>
+                         <textarea name="detail_comment" rows="5" cols="30"></textarea><br><br>
+                         <!-- Name: <input type="text" name="user" ><br><br> -->
+                         <div class="g-recaptcha" data-sitekey="6LdmUkwiAAAAAAyp1e4AuZG8bG_yPONRwJKxTTDq" ></div>
+                         <input type="submit" value="submit" ><br><br>
+                         
+                         <!-- <input type='submit' name="" onclick='setTimeout(callAlert, 3000)' value='submit'> -->
+                        
+                     </form>
+      </div>
+      <br>
+      <!-- <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div> -->
+    </div>
+    
+  </div>
+                          </div>
+                                            <br>
+                                            </div>
+                            </div>
+         
+                        </div>
+                       
+       
+                                </div>  
+                        <!-- [ Main Content ] end -->
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://www.google.com/recaptcha/api.js"></script>
+<script>
+
+$( document ).ready(function() {
+    $('#myTable').DataTable();
+});
+
+// var index = 1;
+// 	$("#btn4").click(function(){
+// 		$("#tb_list").append('<tr class="info" ><td>name-surname'+ index +'</td><td><input type="text" placeholder="name-surname '+index+'"></td></tr>')
+// 		index = index +1;
+// 	});
+
+</script>
\ No newline at end of file
diff --git a/assets/images/image.png b/assets/images/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..6413ed2d650bac436e57eccac8ed575c292d430d
Binary files /dev/null and b/assets/images/image.png differ