diff --git a/admin/src/api/esg.js b/admin/src/api/esg.js
new file mode 100644
index 0000000..40e8b09
--- /dev/null
+++ b/admin/src/api/esg.js
@@ -0,0 +1,16 @@
+import ajax from "@/utils/request";
+
+export const getEsgList = async (params) =>
+  ajax(`/esg/getEsgList`, "POST", params);
+
+export const getEsg = async (id) =>
+  ajax(`/esg/getEsg`, "GET", { id });
+
+export const deleteEsg = async (id) =>
+  ajax(`/esg/deleteEsg`, "GET", { id });
+
+export const updateEsg = async (params) =>
+  ajax(`/esg/updateEsg`, "POST", params);
+
+export const addEsg = async (params) =>
+  ajax(`/esg/addEsg`, "POST", params);
diff --git a/admin/src/layouts/menu/index.vue b/admin/src/layouts/menu/index.vue
index 92a1037..80e7f1b 100644
--- a/admin/src/layouts/menu/index.vue
+++ b/admin/src/layouts/menu/index.vue
@@ -84,6 +84,10 @@ const menuData = ([
       {
         title: "公司活動",
         path: "/news/activity",
+      },
+      {
+        title: "ESG",
+        path: "/news/esg",
       }
     ],
   },  
diff --git a/admin/src/layouts/tabs/index.vue b/admin/src/layouts/tabs/index.vue
index 06a58ad..e4c7b7c 100644
--- a/admin/src/layouts/tabs/index.vue
+++ b/admin/src/layouts/tabs/index.vue
@@ -62,7 +62,7 @@ const handleCloseAll = () => {
 };
 
 const addTab = () => {
-  if (route.path === "/login" || route.path === "/news/list/form" || route.path === "/product/list/form") return;
+  if (route.path === "/login" || route.path === "/news/list/form" || route.path === "/product/list/form" || route.path === "/news/esg/form") return;
   if (route.path) {
     tabsStore.addTab({
       path: route.path,
diff --git a/admin/src/pages/News/esg/components/Form.vue b/admin/src/pages/News/esg/components/Form.vue
new file mode 100644
index 0000000..15a5f12
--- /dev/null
+++ b/admin/src/pages/News/esg/components/Form.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, reactive, onMounted, watch } from "vue";
+
+import ClassicEditor from "ckeditor5-custom-build/build/ckeditor.js";
+const editor = ClassicEditor;
+const editorConfig = ref({
+  simpleUpload: {
+    // The URL that the images are uploaded to.
+    uploadUrl: '/adminapi/article/uploadImage',
+    // // Headers sent along with the XMLHttpRequest to the upload server.
+    headers: {
+      'X-CSRF-TOKEN': 'CSFR-Token',
+      'Authorization' : `${sessionStorage.getItem('token')}`
+    }
+  },
+  image: {
+    resize: true,
+    toolbar: [
+      "imageTextAlternative",
+      "|",
+      "imageStyle:alignLeft",
+      "imageStyle:alignRight",
+      "|",
+      "imageStyle:alignBlockLeft",
+      "imageStyle:block",
+      "imageStyle:alignBlockRight",
+    ],
+    styles: [
+      'full',
+      'alignLeft',
+      'alignRight',
+    ],
+  },
+});
+
+import { getNews, addNews, updateNews } from "@/api/news";
+
+
+const props = defineProps({
+  editid: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+const formType = ref("insert");
+
+const loading = ref(false);
+const formRef = ref(null);
+const form = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+onMounted(async () => {
+  if (props.editid) {
+    let res = await getNews(props.editid);
+    if (res.code === 200) {
+      form.value = res.data;
+      formType.value = "update";
+    }
+  }
+});
+
+const rules = reactive({
+  username: [{ required: true, message: "管理員帳號必填", trigger: 'blur' }],
+})
+
+const cancelForm = () => {
+  emit("close", false);
+};
+
+const submitForm = (formEl) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      let res;
+      let message;
+      if (formType.value === "update") {
+        form.value.id = props.editid;
+        res = await updateNews(form.value);
+        message = "修改成功.";
+      } else {
+        res = await addNews(form.value);
+        message = "新增成功.";
+      }
+
+      if (res.code === 200) {
+        ElMessage({
+          message: message,
+          type: 'success',
+        });
+        emit("close", true);
+      }
+    } else {
+      ElMessage({
+        message: "操作失敗.",
+        type: 'error',
+      });
+      return false
+    }
+  })
+};
+</script>
+
+<template>
+  <div>
+    <el-form 
+      ref="formRef" 
+      :model="form" 
+      status-icon 
+      :rules="rules" 
+      label-width="120px">
+      <el-form-item label="標題" prop="title">
+          <el-input v-model="form.title" />
+      </el-form-item>
+      <div class="">
+        <ckeditor :editor="editor" v-model="form.content" :config="editorConfig"></ckeditor>
+      </div>
+    </el-form>
+    <div class="demo-drawer__footer" style="text-align: right;">
+      <el-button @click="cancelForm">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="submitForm(formRef)">{{
+        loading ? '提交中 ...' : '確認'
+      }}</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.ck-editor__editable_inline) {
+    height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/admin/src/pages/News/esg/form.vue b/admin/src/pages/News/esg/form.vue
new file mode 100644
index 0000000..38a30bb
--- /dev/null
+++ b/admin/src/pages/News/esg/form.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { ref, reactive, onMounted, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+
+import ClassicEditor from "ckeditor5-custom-build/build/ckeditor.js";
+const editor = ClassicEditor;
+const editorConfig = ref({
+  simpleUpload: {
+    // The URL that the images are uploaded to.
+    uploadUrl: '/adminapi/article/uploadImage',
+    // // Headers sent along with the XMLHttpRequest to the upload server.
+    headers: {
+      'X-CSRF-TOKEN': 'CSFR-Token',
+      'Authorization' : `${sessionStorage.getItem('token')}`
+    }
+  },
+  image: {
+    resize: true,
+    toolbar: [
+      "imageTextAlternative",
+      "|",
+      "imageStyle:alignLeft",
+      "imageStyle:alignRight",
+      "|",
+      "imageStyle:alignBlockLeft",
+      "imageStyle:block",
+      "imageStyle:alignBlockRight",
+    ],
+    styles: [
+      'full',
+      'alignLeft',
+      'alignRight',
+    ],
+  },
+});
+
+import { getEsg, addEsg, updateEsg } from "@/api/esg";
+
+const formType = ref("insert");
+
+const loading = ref(false);
+const formRef = ref(null);
+const form = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+onMounted(async () => {
+  if (route.query.id) {
+    let res = await getEsg(route.query.id);
+    if (res.code === 200) {
+      form.value = res.data;
+      formType.value = "update";
+    }else{
+      ElMessage({
+        message: "取得資料失敗.",
+        type: 'error',
+      });
+      router.push('/news/esg');
+    }
+  }
+});
+
+const rules = reactive({
+  title: [{ required: true, message: "ESG標題必填", trigger: 'blur' }],
+})
+
+const cancelForm = () => {
+  router.push('/news/esg');
+};
+
+const submitForm = (formEl) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      let res;
+      let message;
+      if (formType.value === "update") {
+        form.value.id = route.query.id;
+        res = await updateEsg(form.value);
+        message = "修改成功.";
+      } else {
+        res = await addEsg(form.value);
+        message = "新增成功.";
+      }
+
+      if (res.code === 200) {
+        ElMessage({
+          message: message,
+          type: 'success',
+        });
+        router.push('/news/esg');
+      }
+    } else {
+      ElMessage({
+        message: "請檢查輸入資料是否正確.",
+        type: 'error',
+      });
+      return false
+    }
+  })
+};
+</script>
+
+<template>
+  <div class="main">
+    <!-- Breadcrumb: Start -->
+    <div class="breadcrumb-section">
+      <div>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item> 最新消息 </el-breadcrumb-item>
+          <el-breadcrumb-item> ESG </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div>
+        <el-button type="primary" @click="$router.back()">回產業動態列表</el-button>
+      </div>
+    </div>
+    <!-- Breadcrumb: End -->
+
+    <el-card>
+    <el-form 
+      ref="formRef" 
+      :model="form" 
+      status-icon 
+      :rules="rules" 
+      label-width="120px">
+      <el-form-item label="標題" prop="title">
+          <el-input v-model="form.title" />
+      </el-form-item>
+      <div class="">
+        <ckeditor :editor="editor" v-model="form.content" :config="editorConfig"></ckeditor>
+      </div>
+    </el-form>
+    <div class="demo-drawer__footer" style="text-align: right;">
+      <el-button @click="cancelForm">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="submitForm(formRef)">{{
+        loading ? '提交中 ...' : '確認'
+      }}</el-button>
+    </div>
+  </el-card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.ck-editor__editable_inline) {
+    height: 400px;
+}
+
+.demo-drawer__footer{
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/admin/src/pages/News/esg/index.vue b/admin/src/pages/News/esg/index.vue
new file mode 100644
index 0000000..1bb9a59
--- /dev/null
+++ b/admin/src/pages/News/esg/index.vue
@@ -0,0 +1,176 @@
+<script setup>
+import { ref, reactive, onMounted, toRefs } from "vue";
+import { Plus, Edit, Delete, ArrowDown } from "@element-plus/icons-vue";
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+import AscForm from "./components/Form.vue";
+
+import { getEsgList, deleteEsg } from "@/api/esg";
+
+const state = reactive({
+  page: 1,
+  pageSize: 10,
+});
+
+const { page, pageSize } = toRefs(state);
+const total = ref(0);
+const loading = ref(false);
+
+const showFormDraw = ref(false);
+
+const tableData = ref([]);
+
+onMounted(() => {
+  getTableData();
+});
+
+const getTableData = async () => {
+  loading.value = true;
+  let res = await getEsgList(state);
+  if (res.code === 200) {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  }
+  loading.value = false;
+};
+
+const handleAdd = () => {
+  editid.value = 0;
+  // showFormDraw.value = true;
+  router.push({
+    path: '/news/esg/form',
+  });
+};
+
+const handleEdit = (id) => {
+  editid.value = id;
+  // showFormDraw.value = true;
+  router.push({
+    path: '/news/esg/form',
+    query: {
+      id: id
+    }  
+  });
+};
+
+const handleDelete = (id) => {
+  ElMessageBox.confirm('確認刪除此紀錄?')
+    .then(async () => {
+      let res = await deleteEsg(id);
+      if (res.code === 200) {
+        ElMessage({
+          message: '刪除成功.',
+          type: 'success',
+        });
+        getTableData();
+
+      }else{
+        ElMessage({
+          message: '刪除失敗.',
+          type: 'error',
+        });
+      }
+    })
+    .catch(() => {
+    })
+};
+
+// Pagination
+const handleSizeChange = (val) => {
+  state.pageSize = val;
+  getTableData();
+};
+
+const handleCurrentChange = (val) => {
+  state.page = val;
+  getTableData();
+};
+
+const handlePrevClick = (val) => {
+  state.page = val;
+  getTableData();
+};
+
+const handleNextClick = (val) => {
+  state.page = val;
+  getTableData();
+};
+
+// Drawer
+
+const editid = ref(0);
+
+const handleCloseFormDraw = (val) => {
+
+  showFormDraw.value = false;
+  if(val){
+    getTableData();
+  }
+};
+</script>
+
+<template>
+  <div class="main">
+    <!-- Breadcrumb: Start -->
+    <div class="breadcrumb-section">
+      <div>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item> 最新消息 </el-breadcrumb-item>
+          <el-breadcrumb-item> ESG </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div>
+        <el-button type="primary" :icon="Plus" @click="handleAdd">新增ESG</el-button>
+      </div>
+    </div>
+    <!-- Breadcrumb: End -->
+
+    <el-card :body-style="{ padding: '0px' }">
+      <div v-loading="loading">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="#" prop="id" width="50" />
+          <el-table-column label="標題" prop="title" />
+          <el-table-column label="建立時間" prop="create_time" />
+          <el-table-column label="操作" width="105" fixed="right">
+            <template #default="scope">
+              <el-dropdown>
+                <el-button type="danger">
+                  操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item :icon="Edit" @click="handleEdit(scope.row.id)">編輯</el-dropdown-item>
+                    <el-dropdown-item v-if="scope.row.is_main !== 1" :icon="Delete" @click="handleDelete(scope.row.id)">刪除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-block">
+          <el-pagination 
+          v-model:current-page="page" 
+          v-model:page-size="pageSize" 
+          :page-sizes="[10, 20, 50, 100]"
+          layout="->,total, sizes, prev, pager, next, jumper" 
+          :total="total" 
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePrevClick"
+          @next-click="handleNextClick"
+          />
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <div>
+    <el-drawer ref="drawerRef" v-model="showFormDraw" :destroy-on-close="true" title="新增管理員" direction="rtl" size="70%">
+      <asc-form :editid="editid" @close="handleCloseFormDraw"/>
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/admin/src/router/index.js b/admin/src/router/index.js
index 956fa96..bee9e02 100644
--- a/admin/src/router/index.js
+++ b/admin/src/router/index.js
@@ -84,6 +84,22 @@ let routes = [
         },
         component: () => import("../pages/News/list/form.vue"),
       },  
+      {
+        path: "/news/esg",
+        name: "ESG",
+        meta: {
+          title: "ESG",
+        },
+        component: () => import("../pages/News/esg/index.vue"),
+      },  
+      {
+        path: "/news/esg/form",
+        name: "EsgForm",
+        meta: {
+          title: "ESG表單",
+        },
+        component: () => import("../pages/News/esg/form.vue"),
+      },  
       {
         path: "/news/activity",
         name: "newsActivity",
diff --git a/app/app/adminapi/controller/EsgController.php b/app/app/adminapi/controller/EsgController.php
new file mode 100644
index 0000000..f403b8d
--- /dev/null
+++ b/app/app/adminapi/controller/EsgController.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace app\adminapi\controller;
+
+use app\adminapi\BaseController;
+use support\Request;
+use think\facade\Db;
+
+class EsgController extends BaseController
+{
+    public function getEsgList(Request $request)
+    {
+        $param = $request->post();
+        $page       = isset($param['page']) ? $param['page'] : 1;
+        $pageSize   = isset($param['pageSize']) ? $param['pageSize'] : 10;
+        $search     = isset($param['search']) ? $param['search'] : [];
+
+        $where = [
+        ];
+
+        $list = Db::name('esg')
+            ->where($where)
+            ->order('create_time', 'desc')
+            ->page($page, $pageSize)
+            ->select()
+            ->toArray();
+
+        $total = Db::name('esg')
+            ->where($where)
+            ->count();
+
+        foreach($list as $key => $val){
+        }
+
+        $result = [
+            'list' => $list,
+            'total' => $total
+        ];
+
+        return $this->Success($result);
+    }
+
+    public function addEsg(Request $request){
+        $params = $request->post();
+        
+        $data = [
+            'title' => isset($params['title'])?$params['title']:'',
+            'content' => isset($params['content'])?$params['content']:'',
+            'create_time' => date('Y-m-d H:i:s',time())
+        ];
+        
+        try{
+            $id = Db::name('esg')->insertGetId($data);
+
+            AdminLog( $this->uid , '新增產業動態 ' . $id);
+
+            return $this->Success('操作成功');
+        }catch(\Exception $e){
+            AdminLog( $this->uid , '新增產業動態失敗');
+            
+            return $this->Error('操作失敗:'. $e->getMessage());                
+        }
+    }
+
+    public function deleteEsg(Request $request){
+        $id = $request->get('id');
+
+        try{
+            $admin_name = getNameById('admin','username',$id);
+
+            $result = Db::name('esg')
+            ->where('id',$id)
+            ->delete();
+    
+            AdminLog($this->uid, '刪除管理員 '. $admin_name);
+            return $this->Success('操作成功');    
+        }catch(\Exception $e){
+            AdminLog($this->uid, '刪除管理員'.$admin_name.'失敗');
+            return $this->Error('操作失敗');                
+        }
+    }
+
+    public function getEsg(Request $request){
+        $id = $request->get('id');
+
+        $user = Db::name('esg')
+        ->where('id',$id)
+        ->find();
+
+        if(!$user){
+            return $this->Error('資料不存在');
+        }
+
+        unset($user['password']);
+
+        $result = $user;
+
+        return $this->Success($result);
+    }
+
+    public function updateEsg(Request $request){
+        $params = $request->post();
+        
+        $data = [
+            'title' => isset($params['title'])?$params['title']:'',
+            'content' => isset($params['content'])?$params['content']:'',
+            'update_time' => date('Y-m-d H:i:s',time())
+        ];
+
+        try{
+            $result = Db::name('esg')
+            ->where('id',$params['id'])
+            ->update($data);
+
+            AdminLog($this->uid, '修改產業動態 [' . $params['id'] .']');
+    
+            return $this->Success('操作成功');
+        }catch(\Exception $e){
+
+            AdminLog($this->uid, '修改產業動態 [' . $params['id'] . '] 失敗');
+            
+            return $this->Error('操作失敗:'. $e->getMessage());                
+        }
+    }
+
+}
diff --git a/app/app/appapi/controller/ProductController.php b/app/app/appapi/controller/ProductController.php
index c66de64..fc02267 100644
--- a/app/app/appapi/controller/ProductController.php
+++ b/app/app/appapi/controller/ProductController.php
@@ -73,4 +73,26 @@ class ProductController extends BaseController
         return $this->Success($result);
     }
 
+    public function searchProduct(Request $request)
+    {
+        $param = $request->get();
+
+        $list = Db::name('product')
+            ->where('lang',$param['lang'])
+            ->where('name|description|content','like','%'.$param['keyword'].'%')
+            ->order('sort_order', 'asc')
+            ->order('id', 'asc')
+            ->select()
+            ->toArray();
+
+
+        // foreach($list as $key => $val){
+            // $list[$key]['imageurl1'] = getUrl().$val['imageurl1'];
+            // $list[$key]['imageurl2'] = getUrl().$val['imageurl2'];
+        // }
+
+        $result = $list;
+
+        return $this->Success($result);
+    }
 }
diff --git a/app/app/appapi/controller/SocialController.php b/app/app/appapi/controller/SocialController.php
index 207a4fa..f1a485e 100644
--- a/app/app/appapi/controller/SocialController.php
+++ b/app/app/appapi/controller/SocialController.php
@@ -110,4 +110,58 @@ class SocialController extends BaseController
 
         return $this->Success($result);
     }
+
+    public function getEsgList(Request $request)
+    {
+        $param = $request->post();
+
+        $page       = isset($param['page']) ? $param['page'] : 1;
+        $pageSize   = isset($param['pageSize']) ? $param['pageSize'] : 10;
+        $search     = isset($param['search']) ? $param['search'] : [];
+
+        $where = [];
+
+        $list = Db::name('esg')
+            ->where($where)
+            ->where('lang', $param['lang'])
+            ->order('create_time', 'desc')
+            ->page($page, $pageSize)
+            ->select()
+            ->toArray();
+
+        $total = Db::name('esg')
+            ->where($where)
+            ->where('lang', $param['lang'])
+            ->count();
+
+        // foreach($list as $key => $val){
+        // }
+
+        $result = [
+            'list' => $list,
+            'total' => $total
+        ];
+
+        return $this->Success($result);
+    }
+
+    public function getEsg(Request $request)
+    {
+        $param = $request->get();
+
+        if (empty($param['id'])) {
+            return $this->Error('參數錯誤');
+        }
+
+        $where = [];
+
+        $news = Db::name('esg')
+            ->where('id', $param['id'])
+            ->find();
+
+        $result = $news;
+
+        return $this->Success($result);
+    }
+
 }
diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 494d4b6..9022373 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -3707,7 +3707,9 @@ textarea.form-control-lg {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
+  cursor: pointer;
 }
+
 .dropdown-menu[data-bs-popper] {
   top: 100%;
   left: 0;
@@ -3717,6 +3719,7 @@ textarea.form-control-lg {
 .dropdown-menu-start {
   --bs-position: start;
 }
+
 .dropdown-menu-start[data-bs-popper] {
   right: auto;
   left: 0;
diff --git a/web/composables/useMyFetch.js b/web/composables/useMyFetch.js
index e302750..97cffbc 100644
--- a/web/composables/useMyFetch.js
+++ b/web/composables/useMyFetch.js
@@ -12,7 +12,7 @@ export const useMyFetch = (request, method="GET" ,opts={}, headers ={}) => {
             ...headers,
         }
     };
-    console.log("options", options.baseURL, request)
+
     let data = {
         ...opts,
         lang: locale
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index b30a46f..cfed01d 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -4,8 +4,12 @@ import logoImg from '@/assets/img/logo.png';
 import dotCircleImg from '@/assets/img/dotCircle.png';
 import useStore from '@/store';
 
+const localePath = useLocalePath()
+
 const { locale } = useI18n()
 
+const searchKeyword = ref('');
+
 const navbarToggler = ref(null);
 
 const store = useStore();
@@ -26,6 +30,12 @@ const goRoute = (path) => {
   }
   router.push(path);
 }
+
+const handleSearchSubmit = () => {
+  if(!searchKeyword.value) return;
+  router.push(localePath('/products/search/' + searchKeyword.value));
+  searchKeyword.value = '';
+}
 </script>
 
 <template>
@@ -76,6 +86,8 @@ const goRoute = (path) => {
                 }}</a></li>
                 <li><a class="dropdown-item" @click="goRoute(localeLocation('/social/activity'))">{{
                   $t('Social.activity') }}</a></li>
+                <li><a class="dropdown-item" @click="goRoute(localeLocation('/social/esg'))">{{
+                  $t('Social.esg') }}</a></li>
               </ul>
             </li>
             <li class="nav-item">
@@ -93,11 +105,15 @@ const goRoute = (path) => {
             <NuxtLink class="btn chBtn" :class="{ active: locale === 'cn' }" :to="switchLocalePath('cn')">简</NuxtLink>
             <NuxtLink class="btn chBtn" :class="{ active: locale === 'en' }" :to="switchLocalePath('en')">EN</NuxtLink>
           </div>
-          <form class="searchBar">
-						<input class="form-control form-control-sm bg-silver border-0" type="search" placeholder="產品搜尋" aria-label="Search">
-						<button class="btn" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
+          <form class="searchBar" @submit="handleSearchSubmit">
+						<input class="form-control form-control-sm bg-silver border-0" type="search" 
+            placeholder="產品搜尋" 
+            v-model="searchKeyword"
+            aria-label="Search"
+            >
+						<button class="btn" @click.prevent="handleSearchSubmit"><i class="fa-solid fa-magnifying-glass"></i></button>
 					</form>
-        </div>
+          </div>
       </div>
     </nav>
   </header>
diff --git a/web/locales/cn.js b/web/locales/cn.js
index 3b887e3..4b7862a 100644
--- a/web/locales/cn.js
+++ b/web/locales/cn.js
@@ -7,6 +7,9 @@ export default {
     productandservice: '产品与服务',
     development: '企业永续发展',
     contactinfo: '联络资讯',
+    searchResult: '搜寻结果',
+    total: '共',
+    num: '笔',
     copyright: '普达国际 版权所有 © All Rights Reserved Copyright © 2013. All rights reserved.',
     Form: {
         submit: '确认送出',
diff --git a/web/locales/en.js b/web/locales/en.js
index 46fce8b..36df1c5 100644
--- a/web/locales/en.js
+++ b/web/locales/en.js
@@ -7,6 +7,9 @@ export default {
     productandservice: 'Products and Services',
     development: 'Sustainable Development',
     contactinfo: 'Contact Information',
+    searchResult: 'Search Results',
+    total: 'Total',
+    num: 'Results',
     copyright: 'Puda International. All Rights Reserved © Copyright 2013. All rights reserved.',
     Form: {
         submit: 'Submit',
diff --git a/web/locales/tw.js b/web/locales/tw.js
index c5903ef..458f8e2 100644
--- a/web/locales/tw.js
+++ b/web/locales/tw.js
@@ -7,6 +7,9 @@ export default {
     productandservice: '產品與服務',
     development: '企業永續發展',
     contactinfo: '聯絡資訊',
+    searchResult: '搜尋結果',
+    total: '共',
+    num: '筆',
     copyright: '普達國際 版權所有 © All Rights Reserved Copyright © 2013. All rights reserved.',
     Form: {
         submit: '確認送出',
diff --git a/web/pages/products/search/[keyword].vue b/web/pages/products/search/[keyword].vue
new file mode 100644
index 0000000..f24b403
--- /dev/null
+++ b/web/pages/products/search/[keyword].vue
@@ -0,0 +1,57 @@
+<script setup>
+const route = useRoute();
+
+// const cateData = computed(() => cateRes.value.data);
+
+const productList = computed(() => prodRes.value.data);
+
+const keyword = computed(() => route.params.keyword);
+
+watch(()=>route.params.keyword,(nVal)=>{
+  console.log(nVal);
+}, { immediate: true })
+
+// 取得類別資料
+  // const { data: cateRes } = await useMyFetch('/product/getCategory', "GET", { cat_id })
+
+// 取得產品列表
+console.log('keyword',keyword);
+const { data: prodRes } = await useMyFetch('/product/searchProduct', "GET", { keyword })
+</script>
+
+<template>
+  <div>
+    <!-- <div class="toolbar">
+      <div class="tTitle">{{ cateData.parent_name }}</div>
+    </div> -->
+    <div class="content">
+      <div class="block">
+        <div class="bName"> {{ keyword}} {{ $t('searchResult') }}:  
+            <span>{{ $t('total') }} {{ productList.length }} {{ $t('num') }}</span>
+        </div>
+        <!-- <div class="bDesc">{{ cateData.description }}</div> -->
+        <div class="cardGroup">
+          <NuxtLinkLocale class="card" v-for="(prod, i) in productList" :key="i"
+          :to="{path: '/products/detail/'+prod.id}">
+            <div class="card-body">
+              <div class="imgCnt md">
+                <img :src="prod.imageurl" :alt="prod.name">
+              </div>
+            </div>
+            <div class="card-footer">
+              <div class="card-title">{{ prod.name }}</div>
+              <div class="card-desc">{{ prod.description }}</div>
+              <div class="moreBtn">more</div>
+            </div>
+          </NuxtLinkLocale>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.card-footer{
+    width: 100%;
+}
+</style>
diff --git a/web/pages/social.vue b/web/pages/social.vue
index 5921c70..ef08324 100644
--- a/web/pages/social.vue
+++ b/web/pages/social.vue
@@ -43,6 +43,10 @@ const menuList = [
     "name":t('Social.activity'),
     "path":"/social/activity"
   },
+  {
+    "name":t('Social.esg'),
+    "path":"/social/esg"
+  },
 ]
 
 const currentRoute = ref('');
diff --git a/web/pages/social/esg/detail/[id].vue b/web/pages/social/esg/detail/[id].vue
index 26c7733..235ae2a 100644
--- a/web/pages/social/esg/detail/[id].vue
+++ b/web/pages/social/esg/detail/[id].vue
@@ -1,28 +1,28 @@
 <script setup>
 const route=useRoute();
-const newsData = computed(() => newsRes.value.data);
+const esgData = computed(() => esgRes.value.data);
 
 // 取得新聞資料
-const { data: newsRes } = await useMyFetch('/social/getNews', "GET", {id: route.params.id})
+const { data: esgRes } = await useMyFetch('/social/getEsg', "GET", {id: route.params.id})
 
 </script>
 
 <template>
   <div class="toolbar">
-    <div class="tTitle">{{ $t('Social.news') }}</div>
+    <div class="tTitle">{{ $t('Social.esg') }}</div>
   </div>
   <div class="content">
 
     <div class="block">
-      <div class="bName mb-4">{{ newsData.title }}</div>
+      <div class="bName mb-4">{{ esgData.title }}</div>
       <!-- <div class="imgCnt me-4 mb-4" style="float: left;width:350px;">
         <img :src="newsData.imageurl" alt="">
       </div> -->
       <div class="desc">
-        <div class="ck-content" v-html="newsData.content"></div>
+        <div class="ck-content" v-html="esgData.content"></div>
       </div>
       <div class="d-flex justify-content-end">
-        <a class="backBtn" href="javascript:;" @click="$router.push(localeLocation('/social/news'))">back</a>
+        <a class="backBtn" href="javascript:;" @click="$router.push(localeLocation('/social/esg'))">back</a>
       </div>
     </div>
   </div>
diff --git a/web/pages/social/esg/index.vue b/web/pages/social/esg/index.vue
index 32696e3..14c9ed9 100644
--- a/web/pages/social/esg/index.vue
+++ b/web/pages/social/esg/index.vue
@@ -1,12 +1,12 @@
 <script setup>
 
-const newsData = computed(() => newsRes.value.data);
+const esgData = computed(() => esgRes.value.data);
 
 const page = ref(1)
 const pageSize = ref(10)
 
 // 取得新聞資料
-const { data: newsRes } = await useMyFetch('/social/getNewsList', "POST", {
+const { data: esgRes } = await useMyFetch('/social/getEsgList', "POST", {
   page: page.value,
   pageSize: pageSize.value,
 })
@@ -15,7 +15,7 @@ const handlePageChange = async (npage,npageSize) => {
   page.value = npage
   pageSize.value = npageSize
 
-  newsRes.value = await useRequest('/social/getNewsList', "POST", {
+  esgRes.value = await useRequest('/social/getEsgList', "POST", {
     page: page.value,
     pageSize: pageSize.value,
   })
@@ -25,17 +25,17 @@ const handlePageChange = async (npage,npageSize) => {
 
 <template>
   <div class="toolbar">
-    <div class="tTitle">{{ $t('Social.news') }}</div>
+    <div class="tTitle">{{ $t('Social.esg') }}</div>
   </div>
   <div class="content">
     <div>
-      <NuxtLinkLocale :to="'/social/news/detail/' + item.id" class="item" v-for="(item, index) in newsData.list" :key="index">
+      <NuxtLinkLocale :to="'/social/esg/detail/' + item.id" class="item" v-for="(item, index) in esgData.list" :key="index">
         <div class="title ellipsis">{{ item.title }}</div>
         <div class="date">{{ item.create_time }}</div>
       </NuxtLinkLocale>
     </div>
     <div class="pagination-block">
-        <el-pagination layout="->, prev, pager, next" :total="newsData.total" 
+        <el-pagination layout="->, prev, pager, next" :total="esgData.total" 
           @change="handlePageChange"
           />
     </div>