diff --git a/src/views/Expenses/ExpensesView.vue b/src/views/Expenses/ExpensesView.vue
index d02e7ca..44bec0c 100644
--- a/src/views/Expenses/ExpensesView.vue
+++ b/src/views/Expenses/ExpensesView.vue
@@ -196,6 +196,7 @@ export default {
               <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
+                  <th>ชื่อ-สกุล</th>
                   <th scope="col">อาคาร</th>
                   <th scope="col">ชั้น</th>
                   <th scope="col">เลขที่ห้อง</th>
@@ -217,6 +218,7 @@ export default {
               <tbody>
                 <tr>
                   <th scope="row">1</th>
+                  <td>ส.ต.ต.โชคดี มีชัย</td>
                   <td>อาคารแฟลต 1/11</td>
                   <td>2</td>
                   <td>202</td>
@@ -275,6 +277,9 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-1">
+                <label style="font-size:large">ส.ต.ต.โชคดี มีชัย</label>
+              </div>
               <div class="mb-3">
                 <label>อาคาร</label>
                 <v-select
@@ -290,17 +295,7 @@ export default {
                 <label>เลขที่ห้อง</label>
                 <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
               </div>
-              <!-- <div class="mb-3">
-                <MaterialInput
-                  name="fee"
-                  :value="fee"
-                  @input="(event) => (fee = event.target.value)"
-                  class="input-group-static"
-                  label="ค่าธรรมเนียม"
-                  type="text"
-                  placeholder="ค่าธรรมเนียม"
-                />
-              </div> -->
+
               <div class="mb-3">
                 <MaterialInput
                   :value="Waterbill"
@@ -361,6 +356,46 @@ export default {
                   placeholder="เลขหลัง"
                 />
               </div>
+              <div
+                class="mb-3"
+                style="
+                  display: flex;
+                  justify-content: flex-start;
+                  align-items: center;
+                "
+              >
+                <div class="form-check form-check-inline">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio1"
+                    value="option1"
+                  />
+                  <label class="form-check-label" for="inlineRadio1">หักได้</label>
+                </div>             
+                <div class="form-check form-check-inline">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio2"
+                    value="option2"
+                  />
+                  <label class="form-check-label" for="inlineRadio2">หักไม่ได้</label>
+                </div>
+                
+              </div>
+              <div style=" margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
+                </div>
             </div>
           </div>
           <div class="modal-footer">
@@ -469,7 +504,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/Queue/QueueView.vue b/src/views/Queue/QueueView.vue
index 74630d9..68d02ee 100644
--- a/src/views/Queue/QueueView.vue
+++ b/src/views/Queue/QueueView.vue
@@ -258,7 +258,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/Reports/ReportlistView.vue b/src/views/Reports/ReportlistView.vue
index ceca51b..a9a0aeb 100644
--- a/src/views/Reports/ReportlistView.vue
+++ b/src/views/Reports/ReportlistView.vue
@@ -762,7 +762,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index e53f1e8..2c7a628 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -187,7 +187,6 @@ export default {
                           <th scope="col">เบอร์ติดต่อ</th>
                           <th scope="col">เลขลงรับหนังสือ</th>
                           <th scope="col"></th>
-                          <th scope="col"></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -209,17 +208,6 @@ export default {
                               >เพิ่มผู้เช่าห้องพัก</MaterialButton
                             >
                           </td>
-                          <td>
-                            <MaterialButton
-                            style="margin-left: 20px"
-                            variant="gradient"
-                            color="success"
-                            data-bs-toggle="modal"
-                            data-bs-target="#addBookBackdrop"
-                            >เพิ่มเลขลงรับหนังสือ</MaterialButton
-                          >
-                          </td>
-                          
                         </tr>
                       </tbody>
                     </table>
@@ -305,6 +293,17 @@ export default {
                   placeholder="จำนวนงวดเงินค่าประกัน"
                 />
               </div>
+              <div class="mb-3">
+                <label style="margin-left:-5px">กรอกเลขลงรับหนังสือ</label>
+                <textarea
+                  :value="booknumber"
+                  @input="(event) => (booknumber = event.target.value)"
+                  class="form-control"
+                  id="exampleFormControlTextarea1"
+                  rows="3"
+                  placeholder="ตัวอย่าง : 11244"
+                ></textarea>
+              </div>
             </div>
           </div>
           <div class="modal-footer">
@@ -545,7 +544,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index 5f1514b..fbf5499 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -194,9 +194,9 @@ export default {
             <div class="col-8">
               <div class="d-flex justify-content-end align-items-baseline">
                 <div class="d-flex">
-                  <MaterialCheckbox id="terms5" checked>
+                  <!-- <MaterialCheckbox id="terms5" checked>
                     <a href="javascript:;" class="font-weight-bolder"> รายตึก</a>
-                  </MaterialCheckbox>
+                  </MaterialCheckbox> -->
                   <MaterialCheckbox id="terms6">
                     <a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a>
                   </MaterialCheckbox>
@@ -226,7 +226,9 @@ export default {
             <div class="d-flex justify-content-between align-items-baseline p-2">
               <div class="text-start">
                 <p class="d-flex align-items-baseline p-2">
-                  <span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
+                  <span style="font-weight: bold; text-decoration: underline">
+                    คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span
+                  >
                   <a data-bs-toggle="modal" data-bs-target="#Edituser"
                     ><i
                       class="material-icons"
@@ -297,101 +299,84 @@ export default {
                       aria-controls="collapseExample"
                       >{{ item?.title }}</MaterialButton
                     >
-                    <!-- item?.title -->
                   </p>
                   <div class="collapse show" id="collapseExample" aria-expanded="true">
-                    <div>
-                      <div
-                        class="row row-cols-auto"
-                        :style="{ '--bs-gutter-x': '0.5rem' }"
-                      >
-                        <div class="col" v-for="(item, index) in roomData" :key="index">
-                          <div
-                            class="card mb-2"
-                            :class="{
-                              'bg-red': item?.status == 'unavailable',
-                              'bg-green': item?.status == 'free',
-                              'bg-warning2': item?.status == 'waiting',
-                              'bg-return': item?.status == 'return',
-                              'bg-special': item?.status == 'special',
-                            }"
-                            :style="{ width: `220px`, height: `170px` }"
-                          >
-                            <div class="card-body p-1">
-                              <a
-                                style="cursor: pointer"
-                                @click="gotodetail(item?.dataIndex, item?.status)"
+                    <div class="flex-container">
+                      <div v-for="(item, index) in roomData" :key="index">
+                        <div
+                          class="card mb-2"
+                          :class="{
+                            'bg-red': item?.status == 'unavailable',
+                            'bg-green': item?.status == 'free',
+                            'bg-warning2': item?.status == 'waiting',
+                            'bg-return': item?.status == 'return',
+                            'bgg-red': item?.status == 'special',
+                          }"
+                          :style="{ width: `220px`, height: `170px` }"
+                        >
+                          <div class="card-body p-1">
+                            <a
+                              style="cursor: pointer"
+                              @click="gotodetail(item?.dataIndex, item?.status)"
+                            >
+                              <p
+                                class="card-title"
+                                style="
+                                  color: #000;
+                                  border: 2px solid #f7f4f0 !important;
+                                  border-radius: 10px;
+                                  background: white;
+                                "
                               >
-                                <p
-                                  class="card-title"
-                                  style="
-                                    color: #000;
-                                    border: 2px solid #f7f4f0 !important;
-                                    border-radius: 10px;
-                                    background: white;
-                                  "
-                                >
-                                  <a style="font-size: medium">{{ item?.title }}</a>
-                                </p>
-                                <p
-                                  v-if="item?.status == 'free'"
-                                  class="card-title bgg-green"
-                                  style="font-size: 16px"
-                                >
-                                  {{ "ว่าง" }}
-                                </p>
-                                <p
-                                  v-if="item?.status == 'unavailable'"
-                                  class="card-title bgg-red"
-                                  style="font-size: 16px"
-                                >
-                                  {{ "ไม่ว่าง" }}
-                                </p>
-                                <p
-                                  v-if="item?.status == 'waiting'"
-                                  class="card-title bgg-warning2"
-                                  style="font-size: 16px"
-                                >
-                                  {{ "ชำรุด" }}
-                                </p>
-                                <p
-                                  v-if="item?.status == 'return'"
-                                  class="card-title bgg-return"
-                                  style="font-size: 16px"
-                                >
-                                  {{ "ผ่อนผัน" }}
-                                </p>
-                                <p
+                                <a style="font-size: medium">{{ item?.title }}</a>
+                              </p>
+                              <p
+                                v-if="item?.status == 'free'"
+                                class="card-title bgg-green"
+                                style="font-size: 16px"
+                              >
+                                {{ "ว่าง" }}
+                              </p>
+                              <p
+                                v-if="item?.status == 'unavailable'"
+                                class="card-title bgg-red"
+                                style="font-size: 16px"
+                              >
+                                {{ "ไม่ว่าง" }}
+                              </p>
+                              <p
+                                v-if="item?.status == 'waiting'"
+                                class="card-title bgg-warning2"
+                                style="font-size: 16px"
+                              >
+                                {{ "ชำรุด" }}
+                              </p>
+                              <p
+                                v-if="item?.status == 'return'"
+                                class="card-title bgg-return"
+                                style="font-size: 16px"
+                              >
+                                {{ "ผ่อนผัน" }}
+                              </p>
+                              <p class="card-title "
+                                style="font-size: 14px"
+                              >
+                                {{ item?.ranks }} {{ item?.firstName }}
+                                {{ item?.laststName }}
+                              </p>
+                              <div>
+                                <span
                                   v-if="item?.status !== 'special'"
-                                  class="card-title"
-                                  style="font-size: 14px"
+                                  style="text-align: right; font-size: small"
+                                  >{{ item?.Affiliation }}</span
                                 >
-                                  {{ item?.ranks }} {{ item?.firstName }}
-                                  {{ item?.laststName }}
-                                </p>
-                                <p
+                                <span
                                   v-if="item?.status == 'special'"
-                                  class="card-title text-red mt-1"
-                                  style="font-size: 14px"
+                                  style="text-align: right; font-size: 16px"
+                                  >{{ "กรณีพิเศษ" }}</span
                                 >
-                                  {{ item?.ranks }} {{ item?.firstName }}
-                                  {{ item?.laststName }}
-                                </p>
-                                <div>
-                                  <span
-                                    v-if="item?.status !== 'special'"
-                                    style="text-align: right; font-size: small"
-                                    >{{ item?.Affiliation }}</span
-                                  >
-                                  <span
-                                    v-if="item?.status == 'special'"
-                                    class="text-red"
-                                    style="text-align: right; font-size: 16px"
-                                    >{{ "กรณีพิเศษ" }}</span
-                                  >
-                                </div>
-                              </a>
-                            </div>
+                              </div>
+                            </a>
                           </div>
                         </div>
                       </div>
@@ -484,8 +469,22 @@ export default {
   </section>
 </template>
 <style>
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-container > div {
+  background-color: #f1f1f1;
+  width: 220px;
+  height: 170px;
+  margin: 12px;
+  text-align: center;
+  line-height: 75px;
+  font-size: 30px;
+}
 .bg-green {
-  background-color: #567b57 !important;
+  background-color: #86d388 !important;
   color: #fff;
 }
 .bg-red {
@@ -505,7 +504,7 @@ export default {
   color: #fff !important;
 }
 .bgg-green {
-  background-color: #567b57 !important;
+  background-color: #86d388 !important;
   color: #fff !important;
 }
 .bgg-red {
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
index 6b6b548..0d5abee 100644
--- a/src/views/Restroom/UpdateRoom.vue
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -1003,7 +1003,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index 393118a..3ee98d3 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -316,7 +316,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/Users/UserlistView.vue b/src/views/Users/UserlistView.vue
index af9f696..1c2ae6f 100644
--- a/src/views/Users/UserlistView.vue
+++ b/src/views/Users/UserlistView.vue
@@ -460,7 +460,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {
diff --git a/src/views/UtilitiesRoom/UtilitieView.vue b/src/views/UtilitiesRoom/UtilitieView.vue
index abc2292..c34c852 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -787,7 +787,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {