diff --git a/src/assets/img/cec_claim/Counterfire_bg.png b/src/assets/img/cec_claim/Counterfire_bg.png
index 68bdcd2..b6eb614 100644
Binary files a/src/assets/img/cec_claim/Counterfire_bg.png and b/src/assets/img/cec_claim/Counterfire_bg.png differ
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 9b25603..4f86c40 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -12,8 +12,8 @@
       </div>
       <div class="claim-content-address">
         <div class="address">HX$56&ada06543sHk#htyu545323LXXXXa</div>
-        <div class="icon">
-          <img src="@/assets/img/marketplace/Counterfire_History _icon.png" alt="">
+        <div class="icon" @click="claimLogDialogVisible = true">
+          <img src="@/assets/img/cec_claim/Counterfire_History _icon.png" alt="">
         </div>
       </div>
       <div class="claim-content-btn">
@@ -26,6 +26,15 @@
         <p>want to pay <span>gas</span> and receive the <span>token</span></p>
       </div>
     </div>
+    <div ref="claimLogModal">
+      <a-modal :class="'claimLogModal'" :getContainer="() => $refs.claimLogModal" v-model:open="claimLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+        <div class="log-title">Cec claim</div>
+            <div class="closable" @click="claimLogDialogVisible = false">
+              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+            </div>
+            <div class="log-content"></div>
+      </a-modal>
+    </div>
   </div>
 </template>
 
@@ -35,6 +44,9 @@ const message = inject('$message')
 
 import { BlockChain } from "@/components/chain/BlockChain"
 
+const claimLogDialogVisible = ref(false)
+
+
 const connectLogin = async () => {
   let res = await new BlockChain().cecLogin()
   console.log(res)
@@ -50,6 +62,8 @@ const connectLogin = async () => {
   padding-top: 84px;
   background: #16141b;
   color: #fff;
+  background: url('@/assets/img/cec_claim/scene_bg.png') no-repeat;
+  background-size: 100% 100%;
   position: relative;
   .claim-content {
     position: absolute;
@@ -58,7 +72,7 @@ const connectLogin = async () => {
     transform: translateX(-50%);
     width: 1192px;
     height: 883px;
-    background: url('@/assets/img/marketplace/Counterfire_bg.png') no-repeat;
+    background: url('@/assets/img/cec_claim/Counterfire_bg.png') no-repeat;
     background-size: 100% 100%;
     .claim-content-title {
       width: 822px;
@@ -160,5 +174,248 @@ const connectLogin = async () => {
       }
     }
   }
+  :deep(.claimLogModal) {
+    width: 1052px !important;
+    height: 714px;
+    background: #1A1821;
+    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    border-radius: 100px;
+    border: 1px solid #B966FF;
+    .ant-modal-content {
+      padding: 0 99px;
+      color: #FFF;
+      background: #1A1821;
+      box-shadow: 0px 0px 0px 0px rgba(22,22,22,0.13);
+      border-radius: 100px;
+      .ant-modal-body {
+        overflow: hidden;
+        .log-title {
+          font-family: 'Anton';
+          font-weight: 400;
+          font-size: 48px;
+          color: #FFFFFF;
+          margin-top: 23px;
+        }
+        .closable {
+          position: absolute;
+          right: -30px;
+          top: -30px;
+          z-index: 99;
+          cursor: pointer;
+          img {
+            width: 120px;
+            height: 120px;
+          }
+        }
+        .log-content {
+          min-height: 510px;
+          .log-header {
+            display: flex;
+            li {
+              width: 50%;
+              height: 48px;
+              line-height: 48px;
+              text-align: center;
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 14px;
+              color: #A8A5AC;
+              background: #2d2738;
+              &:nth-child(1) {
+                border-radius: 50px 0 0 50px;
+              }
+              // &:nth-child(2) {
+              //     width: 40%;
+              //   }
+              &:nth-child(3) {
+                border-radius: 0 50px 50px 0;
+              }
+            }
+          }
+          .log-body {
+            width: 100%;
+            height: 520px;
+            overflow-y: auto;
+            .pages {
+              display: flex;
+              width: 100%;
+              li {
+                width: 50%;
+                height: 60px;
+                line-height: 60px;
+                font-weight: 600;
+                font-size: 16px;
+                font-family: 'Poppins';
+                text-align: center;
+              }
+              .cec-amount {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #9950FA;
+                span {
+                  display: flex;
+                  justify-content: end;
+                  // width: 80px;
+                  text-align: right;
+                }
+                img {
+                  width: 28px;
+                  height: 28px;
+                  margin-left: 15px;
+                }
+              }
+            }
+            .no-data {
+              position: relative;
+              margin-top: 60px;
+              div {
+                width: 260px;
+                height: 260px;
+                margin: 0 auto;
+              }
+              p {
+                position: absolute;
+                bottom: 50px;
+                left: 52%;
+                transform: translateX(-50%);
+                font-family: 'Poppins';
+                font-weight: bold;
+                font-size: 28px;
+                color: #8587B2;
+              }
+            }
+            &::-webkit-scrollbar {
+              width: 5px;
+            }
+            &::-webkit-scrollbar-track {
+              background: #171220;
+              border-radius: 2px;
+            }
+            &::-webkit-scrollbar-corner {
+              display: block;
+            }
+            &::-webkit-scrollbar-thumb {
+              height: 15px;
+              background: #9950fd;
+              border-radius: 10px;
+            }
+          }
+        }
+        .pagination {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          // background: #1778f1;
+          // .prev {
+          //   // width: 100px;
+          //   // height: 100px;
+          //   display: flex;
+          //   align-items: center;
+          //   div {
+          //     width: 100px;
+          //     height: 100px;
+          //   }
+          // }
+          .pager {
+            span {
+              display: inline-block;
+              width: 29px;
+              height: 29px;
+              line-height: 29px;
+              text-align: center;
+              border-radius: 10px;
+              margin: 0 5px;
+              background: #2d2738;
+              font-family: 'Poppins';
+              font-weight: 200;
+              font-size: 14px;
+              cursor: pointer;
+            }
+            .active {
+              background: #5d5275;
+            }
+          }
+          .prev, .next {
+            // width: 100px;
+            // height: 100px;
+            display: flex;
+            align-items: center;
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 16px;
+            color: #9950FD;
+            cursor: pointer;
+            div {
+              width: 100px;
+              height: 100px;
+            }
+          }
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .ant-table-wrapper {
+          .ant-spin-nested-loading {
+            .ant-spin-container {
+              .ant-table {
+                background: #2d2738;
+                border-bottom: 0px solid #2d2738;
+                color: #FFF;
+                .ant-table-container {
+                  .ant-table-content {
+                    .ant-table-thead {
+                      border-radius: 60px;
+                      tr {
+                        border-radius: 60px;
+                        overflow: hidden;
+                        height: 40px;
+                        line-height: 40px;
+                        th {
+                          background: #2d2738;
+                          border-color: rgba(0,0,0,0);
+                          text-align: center;
+                          font-family: 'Poppins';
+                          font-weight: 400;
+                          font-size: 14px;
+                          color: #A8A5AC;
+                          border-radius: 50px !important;
+                          padding: 0;
+                          overflow: hidden;
+                          &::before {
+                            display: none;
+                          }
+                        }
+                        .ant-table-cell {
+                          overflow: hidden;
+                          border-radius: 50px !important;
+                        }
+                      }
+                      .ant-table-cell {
+                          overflow: hidden;
+                          border-radius: 50px !important;
+                        }
+                    }
+                    .ant-table-tbody {
+                      tr {
+                        background: #16141b;
+                        td {
+                          border-color: rgba(0,0,0,0);
+                          background: #16141b !important;
+                          overflow: visible !important;
+                          vertical-align: middle;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file