diff --git a/package-lock.json b/package-lock.json
index fa351d5..1d60b57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@mdi/font": "5.9.55",
+        "@trpc/client": "^10.45.2",
         "roboto-fontface": "*",
         "vue": "^3.2.13",
         "vue-router": "^4.3.0",
@@ -1608,6 +1609,26 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@trpc/client": {
+      "version": "10.45.2",
+      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.45.2.tgz",
+      "integrity": "sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "peerDependencies": {
+        "@trpc/server": "10.45.2"
+      }
+    },
+    "node_modules/@trpc/server": {
+      "version": "10.45.2",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.45.2.tgz",
+      "integrity": "sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "peer": true
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
@@ -15816,6 +15837,18 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
+    "@trpc/client": {
+      "version": "10.45.2",
+      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.45.2.tgz",
+      "integrity": "sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==",
+      "requires": {}
+    },
+    "@trpc/server": {
+      "version": "10.45.2",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.45.2.tgz",
+      "integrity": "sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==",
+      "peer": true
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
diff --git a/src/assets/search.png b/src/assets/search.png
new file mode 100644
index 0000000..12599ec
Binary files /dev/null and b/src/assets/search.png differ
diff --git a/src/components/HeaderHome.vue b/src/components/HeaderHome.vue
index b14ec85..113426e 100644
--- a/src/components/HeaderHome.vue
+++ b/src/components/HeaderHome.vue
@@ -32,7 +32,7 @@
     </div>
     <div style="position: relative" class="bg-curve" id="started">
       <v-row style="height: 100%" align="center" class="text-center">
-        <v-col cols="12" md="6">
+        <v-col cols="12" md="4">
           <div style="position: relative">
             <v-btn
               elevated
@@ -54,7 +54,7 @@
             </v-btn>
           </div>
         </v-col>
-        <v-col cols="12" md="6">
+        <v-col cols="12" md="4" class="mt-0 mt-md-10  mt-lg-10">
           <v-btn
             elevated
             color="#DD6C31"
@@ -67,11 +67,30 @@
               :aspect-ratio="1"
               src="../assets/Group 23.png"
               width="80"
-              style="position: absolute; bottom: -30px; right: 0px"
+              style="position: absolute; bottom: -30px; right: 50"
             ></v-img>
             แสดงตนเป็นผู้สมัคร
           </v-btn>
         </v-col>
+        <v-col cols="12" md="4">
+          <v-btn
+            elevated
+            color="#DD6C31"
+            class="text-normal"
+            stacked
+            width="300"
+            height="110"
+            to="/search"
+          >
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/search.png"
+              width="100"
+              style="position: absolute; top: -40px; right: 0px"
+            ></v-img>
+            ค้นหาผู้สมัคร สว.
+          </v-btn>
+        </v-col>
       </v-row>
     </div>
   </div>
diff --git a/src/components/form/FormSteper.vue b/src/components/form/FormSteper.vue
index 1516944..d36f56e 100644
--- a/src/components/form/FormSteper.vue
+++ b/src/components/form/FormSteper.vue
@@ -48,7 +48,7 @@
                       </v-col>
                       <v-col class="py-3" cols="12" md="6">
                         <v-text-field
-                        label="อาชีพ / Occupation"
+                          label="อาชีพ / Occupation"
                           variant="solo"
                         ></v-text-field>
                         <!-- <v-select
@@ -76,16 +76,27 @@
                   </v-col>
 
                   <v-col>
-                    <v-card color="#4C884C" class="py-5" elevated>
-                      <v-icon icon="mdi-cellphone-message" size="200"></v-icon>
-                      <div class="text-sub">ยืนยันรหัส OTP</div>
-                      <div>05:00</div>
-                      <div>
-                        <v-otp-input variant="solo-filled"></v-otp-input>
+                    <v-card color="#4C884C" class="pa-5" elevated>
+                      <div class="text-sub text-left">
+                        <v-icon icon="mdi-plus-box-multiple"></v-icon>
+                        เพิ่มรูปภาพ
                       </div>
-                      <v-btn color="#DD6C31" class="mt-4" height="40">
-                        <span class="text-sub">ยืนยัน</span>
-                      </v-btn>
+                      <v-avatar size="200" color="grey" class="elevation-3">
+                        <v-img :src="url" v-if="url"></v-img>
+                        <v-icon dark v-else size="80"> mdi-account </v-icon>
+                      </v-avatar>
+
+                      <v-file-input
+                        label="แนบรูปภาพ"
+                        accept="image/png, image/jpeg, image/bmp"
+                        placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
+                        prepend-inner-icon="mdi-camera"
+                        prepend-icon=""
+                        variant="solo-filled"
+                        class="mt-5"
+                        @change="Preview_image"
+                        v-model="image"
+                      ></v-file-input>
                     </v-card>
                   </v-col>
                 </v-row>
@@ -118,9 +129,7 @@
                     <v-card>
                       <div class="text-sub">
                         จังหวัดที่คุณประสงค์จะลงสมัคร*
-                        <span class="text-sub3"
-                          >สามารถเลือก 1 อำเภอ/เขต</span
-                        >
+                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
                         <hr class="my-3" />
                         <div class="text-sub3 text-red font-weight-bold">
                           เงื่อนไข
@@ -150,9 +159,7 @@
                     <v-card>
                       <div class="text-sub">
                         อำเภอที่คุณประสงค์จะลงสมัคร*
-                        <span class="text-sub3"
-                          >สามารถเลือก 1 อำเภอ/เขต</span
-                        >
+                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
                         <hr class="my-3" />
                         <div class="text-sub3 text-red font-weight-bold">
                           เงื่อนไข
@@ -423,6 +430,14 @@
 import Provinces from "./provinces.json";
 import Districts from "./districts.json";
 export default {
+  watch: {
+    image(val) {
+      console.log(val);
+      if(val==undefined){
+        this.url=null
+      }
+    },
+  },
   computed: {
     disabled() {
       return this.e1 === 1
@@ -434,6 +449,8 @@ export default {
   },
   data() {
     return {
+      url: null,
+      image: null,
       province: null,
       district: null,
       districtItems: [],
@@ -534,6 +551,14 @@ export default {
     };
   },
   methods: {
+    Preview_image() {
+      console.log("this.image", this.image,this.image.length);
+      if (this.image) {
+        this.url = URL.createObjectURL(this.image);
+      } else {
+        this.url = null;
+      }
+    },
     filterData() {
       // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
       if (this.province && this.province.provinceCode) {
diff --git a/src/components/search/CardUser.vue b/src/components/search/CardUser.vue
index c1a5881..d6b775c 100644
--- a/src/components/search/CardUser.vue
+++ b/src/components/search/CardUser.vue
@@ -10,49 +10,63 @@
       class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
     >
       <v-row>
-        <v-col v-for="(item, i) in profile" :key="i" cols="12" md="6" lg="6">
-          <v-card
-            elevation="3"
-            class="text-sub2 mx-auto py-5"
-            max-height="380"
-            min-height="380"
-          >
-            <v-card-item>
+        <v-col v-for="(item, i) in profile" :key="i" cols="12" md="6" lg="6" >
+
+          <v-card elevation="5" class="text-sub2 mx-auto pb-5 card-user" >
+            <div
+              style="background: #37332f; color: white; width: 100%"
+              class="font-weight-bold pa-2 w-100 text-center"
+            >
+              <div class="more">{{ item.group }}</div>
+            </div>
+            <v-card-item >
               <v-row align="left">
-                <div class="box-province px-3 py-2">
+                <!-- <div class="box-province px-3 py-2">
                   <div class="font-weight-bold">
                     {{ item.province }} เขต{{ item.district }}
                   </div>
-                </div>
-                <v-col cols="auto" class="text-left">
-                  <v-avatar color="#DD6C31" size="100">
+                </div> -->
+
+                <v-col cols="12" md="auto" class="text-center">
+                  <v-avatar color="#635d56" size="100">
                     <v-icon
                       icon="mdi-account"
                       color=""
                       size="80"
                     ></v-icon> </v-avatar
                 ></v-col>
-                <v-col cols="" class="text-left">
-                  <div class="font-weight-bold text-normal my-2">
+                <v-col cols="12" md="" class="text-center">
+                  <div class="font-weight-bold text-normal my-2 text-center">
                     {{ item.name }}
                     <span class="ml-3">
                       {{ item.lastname }}
-                      <span v-if="item.age" class="text-sub2"> ( {{ item.age }}ปี )</span></span
+                      <span v-if="item.age" class="text-sub2">
+                        ( {{ item.age }}ปี )</span
+                      ></span
                     >
-                    <div class="text-sub3">{{ item.group }}</div>
+                    <div class="box-province px-3 py-2 text-sub2">
+                      <div class="font-weight-bold">
+                        {{ item.province }} |
+                        <span class="font-weight-medium"
+                          >เขต{{ item.district }}</span
+                        >
+                      </div>
+                    </div>
+                    <!-- <div class="text-sub3">{{ item.group }}</div> -->
                   </div>
-                 
                 </v-col>
               </v-row>
 
               <v-row>
                 <v-col cols="12">
-                    <div class="text-small text-left">
-                    <div class="font-weight-medium ">
-                      อาชีพ : {{ item.occupation }}
+                  <div class="text-small text-left">
+                    <div class="font-weight-medium">
+                      <span class="font-weight-bold">อาชีพ :</span>
+                      {{ item.occupation }}
                     </div>
                     <div class="font-weight-medium">
-                      การศึกษา : {{ item.education }}
+                      <span class="font-weight-bold">การศึกษา :</span>
+                      {{ item.education }}
                     </div>
                   </div>
                 </v-col>
@@ -80,22 +94,24 @@
                 </span>
               </div>
 
-              <div class="text-small font-weight-bold text-left d-none">จุดยืน
-              <v-divider class="my-1"></v-divider>
-              <v-row class="text-small" style="height: 150px; overflow: auto">
-                <v-col class="text-left">
-                  <div class="font-weight-bold">เห็นด้วย :</div>
-                  <div v-for="(ag, k) in item.opinion.agree" :key="k">
-                    {{ ag }}
-                  </div>
-                </v-col>
-                <v-col class="text-left">
-                  <div class="font-weight-bold">ไม่เห็นด้วย :</div>
-                  <div v-for="(ag, k) in item.opinion.disagree" :key="k">
-                    {{ ag }}
-                  </div>
-                </v-col>
-              </v-row></div>
+              <div class="text-small font-weight-bold text-left d-none">
+                จุดยืน
+                <v-divider class="my-1"></v-divider>
+                <v-row class="text-small" style="height: 150px; overflow: auto">
+                  <v-col class="text-left">
+                    <div class="font-weight-bold">เห็นด้วย :</div>
+                    <div v-for="(ag, k) in item.opinion.agree" :key="k">
+                      {{ ag }}
+                    </div>
+                  </v-col>
+                  <v-col class="text-left">
+                    <div class="font-weight-bold">ไม่เห็นด้วย :</div>
+                    <div v-for="(ag, k) in item.opinion.disagree" :key="k">
+                      {{ ag }}
+                    </div>
+                  </v-col>
+                </v-row>
+              </div>
             </v-card-item>
           </v-card></v-col
         >
@@ -280,23 +296,30 @@ export default {
 };
 </script>
 <style>
-.more{
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.card-user{
+  height: auto;
+  /* height: 370px; */
+}
+.more {
+  width: 92%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
 }
 .box-province {
-  position: absolute;
-  top: 0;
-  right: 0;
   background-color: #f4c03f;
   border-radius: 5px;
-  margin: 5px;
+  margin: auto;
+  width: fit-content;
   box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
-  .box-province {
+  .card-user {
+    max-height: auto !important;
+    height: auto !important;
+  }
+  /* .box-province {
     position: unset;
     display: block;
     width: 100%;
@@ -306,6 +329,6 @@ export default {
     border-radius: 5px;
     margin: 5px;
     box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
-  }
+  } */
 }
 </style>
diff --git a/src/config.js b/src/config.js
index ef32e6f..3489b33 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,5 @@
 export const CONFIG = {
-  api_url: "http://localhost:3000",
+  // api_url: "http://localhost:3000",
+  api_url: "http://178.128.18.156:3000",
+
 };