diff --git a/src/styles/components/ant-pagination.scss b/src/styles/components/ant-pagination.scss
new file mode 100644
index 0000000..90757bc
--- /dev/null
+++ b/src/styles/components/ant-pagination.scss
@@ -0,0 +1,7 @@
+.pagination-row {
+  display: flex;
+  width: 100%;
+  padding: 12px 24px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
diff --git a/src/styles/components/button.scss b/src/styles/components/button.scss
deleted file mode 100644
index eb2c9cf..0000000
--- a/src/styles/components/button.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-.arco-btn {
-  border-radius: 2px;
-  border: 1px solid #d7d7d9 !important;
-  color: #3c4043 !important;
-  font-family: $font-family-regular;
-  font-size: 14px !important;
-  font-style: normal;
-  font-weight: 400 !important;
-  line-height: 22px !important;
-  &.arco-btn-disabled {
-    border-color: #f2f3f5 !important;
-    color: #b1b2b5 !important;
-  }
-  &:not(.arco-btn-disabled) {
-    &:hover {
-      border-color: #e6e6e8 !important;
-      color: #737478 !important;
-    }
-  }
-}
-
-.arco-btn-primary {
-  background-color: $color-primary !important;
-  border-color: transparent !important;
-  color: #fff !important;
-  &.arco-btn-disabled {
-    color: #fff !important;
-    border-color: transparent !important;
-    background-color: $color-primary-3 !important;
-  }
-  &:not(.arco-btn-disabled) {
-    &:hover {
-      color: #fff !important;
-      border-color: transparent !important;
-      background-color: $color-primary-5 !important;
-    }
-  }
-
-  //success
-  &.arco-btn-status-success {
-    background-color: $color-success !important;
-    &.arco-btn-disabled {
-      background-color: $color-success-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        background-color: $color-success-5 !important;
-      }
-    }
-  }
-
-  // danger
-  &.arco-btn-status-danger {
-    background-color: $color-error !important;
-    &.arco-btn-disabled {
-      background-color: $color-error-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        background-color: $color-error-5 !important;
-      }
-    }
-  }
-
-  // warning
-  &.arco-btn-status-warning {
-    background-color: $color-warning !important;
-    &.arco-btn-disabled {
-      background-color: $color-warning-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        background-color: $color-warning-5 !important;
-      }
-    }
-  }
-}
-
-.arco-btn-outline {
-  border: 1px solid $color-primary !important;
-  color: $color-primary !important;
-  &.arco-btn-disabled {
-    border-color: $color-primary-3 !important;
-    color: $color-primary-3 !important;
-  }
-  &:not(.arco-btn-disabled) {
-    &:hover {
-      border-color: $color-primary-5 !important;
-      color: $color-primary-5 !important;
-    }
-  }
-
-  &.arco-btn-status-success {
-    border: 1px solid $color-success !important;
-    color: $color-success !important;
-    &.arco-btn-disabled {
-      border-color: $color-success-3 !important;
-      color: $color-success-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        border-color: $color-success-5 !important;
-        color: $color-success-5 !important;
-      }
-    }
-  }
-  &.arco-btn-status-danger {
-    border: 1px solid $color-error !important;
-    color: $color-error !important;
-    &.arco-btn-disabled {
-      border-color: $color-error-3 !important;
-      color: $color-error-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        border-color: $color-error-5 !important;
-        color: $color-error-5 !important;
-      }
-    }
-  }
-  &.arco-btn-status-warning {
-    border: 1px solid $color-warning !important;
-    color: $color-warning !important;
-    &.arco-btn-disabled {
-      border-color: $color-warning-3 !important;
-      color: $color-warning-3 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        border-color: $color-warning-5 !important;
-        color: $color-warning-5 !important;
-      }
-    }
-  }
-}
-
-.arco-btn-text {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  color: $color-primary !important;
-  &.arco-btn-disabled {
-    color: $color-primary-2 !important;
-    border-color: transparent !important;
-  }
-  &:not(.arco-btn-disabled) {
-    &:hover {
-      color: $color-primary-5 !important;
-      border-color: transparent !important;
-    }
-  }
-
-  &.arco-btn-status-success {
-    color: $color-success !important;
-    &.arco-btn-disabled {
-      color: $color-success-2 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        color: $color-success-5 !important;
-      }
-    }
-  }
-
-  &.arco-btn-status-danger {
-    color: $color-error !important;
-    &.arco-btn-disabled {
-      color: $color-error-2 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        color: $color-error-5 !important;
-      }
-    }
-  }
-
-  &.arco-btn-status-warning {
-    color: $color-warning !important;
-    &.arco-btn-disabled {
-      color: $color-warning-2 !important;
-    }
-    &:not(.arco-btn-disabled) {
-      &:hover {
-        color: $color-warning-5 !important;
-      }
-    }
-  }
-}
diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss
deleted file mode 100644
index b988e77..0000000
--- a/src/styles/components/checkbox.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.arco-checkbox {
-  .arco-checkbox-icon {
-    width: 16px;
-    height: 16px;
-    border-color: #d7d7d9;
-  }
-  &.arco-checkbox-disabled {
-    .arco-checkbox-icon {
-      background-color: #f2f3f5;
-      border-color: #d7d7d9;
-    }
-    &.arco-checkbox-checked {
-      .arco-checkbox-icon {
-        background-color: #a794fe !important;
-      }
-    }
-    &.arco-checkbox-indeterminate {
-      .arco-checkbox-icon {
-        border: none;
-        background-color: #a794fe !important;
-      }
-    }
-  }
-  &.arco-checkbox-checked,
-  &.arco-checkbox-indeterminate {
-    .arco-checkbox-icon  {
-     background-color: #6D4CFE !important; 
-     border: none;
-    }
-  }
-}
diff --git a/src/styles/components/date-picker.scss b/src/styles/components/date-picker.scss
deleted file mode 100644
index 568a2ce..0000000
--- a/src/styles/components/date-picker.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.arco-picker {
-  border-radius: 4px !important;
-  border-color: #d7d7d9 !important;
-  background-color: #fff !important;
-  &:hover {
-    background-color: #fff !important;
-  }
-  &:focus-within,
-  &.arco-input-focus,
-  &.arco-textarea-focus {
-    background-color: var(--color-bg-2) !important;
-    border-color: rgb(var(--primary-6)) !important;
-    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
-  }
-  &.arco-picker-disabled {
-    background-color: var(--BG-200, #F2F3F5) !important;
-  }
-}
diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss
deleted file mode 100644
index 0457555..0000000
--- a/src/styles/components/form.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.arco-form {
-  .arco-form-item {
-    margin-bottom: 0;
-    &:not(:last-child) {
-      margin-bottom: 16px !important;
-    }
-    .arco-form-item-label-col {
-      padding-right: 12px !important;
-      .arco-form-item-label {
-        color: #211f24;
-        font-family: $font-family-regular;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 22px;
-        .arco-form-item-label-required-symbol {
-          color: #f64b31;
-          margin-right: 4px;
-          font-size: 14px;
-          font-family: $font-family-regular;
-        }
-      }
-    }
-  }
-}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 7ad1b65..8a3420a 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -1,15 +1,3 @@
-@import './input.scss';
-@import './table.scss';
-@import './checkbox.scss';
-@import './pagination.scss';
-@import './tabs.scss';
-@import './modal.scss';
-@import './textarea.scss';
-@import './select.scss';
-@import './date-picker.scss';
-@import './button.scss';
-@import './steps.scss';
-@import './form.scss';
 @import './chat-sender.scss';
 
 @import './ant-modal.scss';
@@ -28,3 +16,4 @@
 @import "./ant-step.scss";
 @import "./ant-spin.scss";
 @import "./ant-drawer.scss";
+@import "./ant-pagination.scss";
diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss
deleted file mode 100644
index 4e81891..0000000
--- a/src/styles/components/input.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.arco-input-wrapper {
-  border-radius: 4px !important;
-  border-color: #d7d7d9 !important;
-  background-color: #fff !important;
-  &:hover {
-    background-color: #fff !important;
-  }
-  &:focus-within,
-  &.arco-input-focus,
-  &.arco-textarea-focus {
-    background-color: var(--color-bg-2) !important;
-    border-color: rgb(var(--primary-6)) !important;
-    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
-  }
-  &.arco-input-disabled {
-    background-color: var(--BG-200, #F2F3F5) !important;
-  }
-  .arco-input-prefix {
-    padding-right: 0 !important;
-    margin-right: 4px;
-  }
-}
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
deleted file mode 100644
index 1e63dc4..0000000
--- a/src/styles/components/modal.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.ant-modal {
-  .ant-modal-header {
-    border-bottom: 1px solid var(--Border-1, #d7d7d9);
-    height: 56px;
-    padding: 0 20px;
-    .ant-modal-title {
-      font-family: $font-family-medium;
-      color: #211f24;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      justify-content: flex-start;
-    }
-  }
-
-  .ant-modal-body {
-    padding: 24px 20px;
-  }
-
-  .ant-modal-footer {
-    display: flex;
-    height: 64px;
-    padding: 0px 20px;
-    justify-content: flex-end;
-    align-items: center;
-    border-top: 1px solid var(--Border-1, #d7d7d9);
-  }
-}
diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss
deleted file mode 100644
index 44ecf3d..0000000
--- a/src/styles/components/pagination.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.arco-pagination {
-  .arco-pagination-list {
-    .arco-pagination-item {
-      border-radius: 4px;
-      border: 1px solid var(--BG-300, #e6e6e8);
-      font-family: $font-family-manrope-regular;
-      &-ellipsis {
-        border: none;
-      }
-
-      &-active {
-        background-color: transparent;
-        border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-      }
-    }
-  }
-  .arco-pagination-options {
-    .arco-select {
-      background-color: transparent !important;
-      border-radius: 4px;
-      border: 1px solid var(--BG-300, #e6e6e8);
-    }
-  }
-  .arco-pagination-jumper {
-    &-input {
-      border-radius: 4px;
-      border: 1px solid var(--BG-300, #e6e6e8);
-    }
-    &-prepend {
-      color: var(--Text-2, #55585f);
-      text-align: right;
-      font-family: $font-family-regular;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px;
-    }
-    .arco-input-wrapper {
-      background-color: transparent !important;
-    }
-  }
-  .arco-pagination-total {
-    color: var(--Text-2, #55585f);
-    font-family: $font-family-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-  }
-}
-.pagination-row {
-  display: flex;
-  width: 100%;
-  padding: 12px 24px 0;
-  justify-content: flex-end;
-  align-items: center;
-}
diff --git a/src/styles/components/select.scss b/src/styles/components/select.scss
deleted file mode 100644
index 81f20c1..0000000
--- a/src/styles/components/select.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.arco-select {
-  border-radius: 4px !important;
-  border-color: #d7d7d9 !important;
-  background-color: #fff !important;
-  &:hover {
-    background-color: #fff !important;
-  }
-  &:focus-within,
-  &.arco-input-focus,
-  &.arco-textarea-focus {
-    background-color: var(--color-bg-2) !important;
-    border-color: rgb(var(--primary-6)) !important;
-    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
-  }
-  &.arco-select-view-disabled {
-    background-color: var(--BG-200, #F2F3F5) !important;
-  }
-}
diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss
deleted file mode 100644
index 7c6cb9a..0000000
--- a/src/styles/components/steps.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.arco-steps {
-  .arco-steps-item {
-    .arco-steps-item-node {
-      .arco-steps-icon {
-        width: 28px;
-        height: 28px;
-        border-radius: 32px;
-        color: #55585F;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 24px;
-        font-family: $font-family-manrope-medium;
-        background-color: #f2f3f5;
-      }
-    }
-    .arco-steps-item-content {
-      .arco-steps-item-title {
-        color: #55585F;
-        font-family: $font-family-regular;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        &::after {
-          background-color: #e6e6e8 !important;
-        }
-      }
-    }
-    &-active,
-    &-finish {
-      .arco-steps-item-node {
-        .arco-steps-icon {
-          color: #fff;
-          background-color: #6d4cfe;
-        }
-      }
-      .arco-steps-item-content {
-        .arco-steps-item-title {
-          font-family: $font-family-medium;
-          &::after {
-            background-color: #6d4cfe !important;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
deleted file mode 100644
index e027362..0000000
--- a/src/styles/components/table.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.arco-table {
-  @mixin table-cell-text {
-    color: var(--Text-1, #211F24);
-    font-family: $font-family-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-  }
-  .arco-table-container {
-    border: none !important;
-    height: 100%;
-    .arco-table-element {
-      thead {
-        .arco-table-tr {
-          .arco-table-th {
-            border-bottom: 1px solid var(--Border-1, #d7d7d9);
-            background: var(--BG-100, #f7f8fa);
-            .arco-table-cell {
-              padding: 13px 16px;
-              .arco-table-th-title {
-                @include table-cell-text;
-                font-family: 'PingFangSC-Medium';
-              }
-              .arco-table-sorter {
-                .arco-table-sorter-icon {
-                  .arco-icon {
-                    color: #939499;
-                  }
-                  &-active {
-                    .arco-icon {
-                      color: $color-primary;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      tbody {
-        .arco-table-tr {
-          .arco-table-td {
-            .arco-table-cell {
-              padding: 13px 16px;
-              .arco-table-cell-content,
-              .arco-table-td-content {
-                @include table-cell-text;
-              }
-            }
-          }
-        }
-      }
-    }
-    .arco-scrollbar {
-      display: flex;
-      flex-direction: column;
-      .arco-table-element {
-        height: 100%;
-      }
-      .arco-scrollbar-container{
-        flex: 1;
-      }
-    }
-  }
-}
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
deleted file mode 100644
index 1e15683..0000000
--- a/src/styles/components/tabs.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.arco-tabs {
-  .arco-tabs-nav-tab {
-    &-list {
-      .arco-tabs-tab {
-        .arco-tabs-tab-title {
-          color: var(--Text-2, #3c4043);
-          font-family: $font-family-medium;
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 24px;
-        }
-        &-active {
-          .arco-tabs-tab-title {
-            color: #6d4cfe;
-          }
-        }
-        &:hover {
-          .arco-tabs-tab-title::before {
-            display: none;
-          }
-        }
-      }
-      .arco-tabs-nav-ink {
-        background-color: #6d4cfe;
-      }
-    }
-  }
-}
diff --git a/src/styles/components/textarea.scss b/src/styles/components/textarea.scss
deleted file mode 100644
index 7b8408a..0000000
--- a/src/styles/components/textarea.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.arco-textarea-wrapper {
-  border-radius: 4px !important;
-  border-color: #d7d7d9 !important;
-  background-color: #fff !important;
-  &:hover {
-    background-color: #fff !important;
-  }
-  &:focus-within,
-  &.arco-input-focus,
-  &.arco-textarea-focus {
-    background-color: var(--color-bg-2) !important;
-    border-color: rgb(var(--primary-6)) !important;
-    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
-  }
-  &.arco-textarea-disabled {
-    background-color: var(--BG-200, #F2F3F5) !important;
-  }
-}