diff --git a/src/components/xt-chat/chat-view/useChatHandler.tsx b/src/components/xt-chat/chat-view/useChatHandler.tsx
index 4dca3cb..2051d94 100644
--- a/src/components/xt-chat/chat-view/useChatHandler.tsx
+++ b/src/components/xt-chat/chat-view/useChatHandler.tsx
@@ -96,7 +96,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       shape: 'round',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-400px">
+        return <div class="max-w-600px">
           {message}
         </div>;
       },
@@ -106,7 +106,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       variant: 'borderless',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-400px markdown-wrap" v-html={md.render(message)} />;
+        return <div class="max-w-600px markdown-wrap" v-html={md.render(message)} />;
       },
       footer: (params) => {
         const { content, item } = params as { content: string; item: MESSAGE.Answer };
diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss
new file mode 100644
index 0000000..79571a7
--- /dev/null
+++ b/src/styles/components/ant-button.scss
@@ -0,0 +1,196 @@
+.ant-btn {
+  border-radius: 2px !important;
+  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;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.ant-btn-lg {
+    height: 36px;
+    padding: 0 20px;
+  }
+  &.ant-btn-sm {
+    padding: 0 16px;
+    height: 28px;
+  }
+}
+.ant-btn-default {
+  &:disabled {
+    border-color: #f2f3f5 !important;
+    color: #b1b2b5 !important;
+    background-color: #fff !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      border-color: #e6e6e8 !important;
+      color: #737478 !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    border-color: $color-error !important;
+    color: $color-error !important;
+    &:disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-primary {
+  background-color: $color-primary !important;
+  border-color: transparent !important;
+  color: #fff !important;
+  &:disabled {
+    color: #fff !important;
+    border-color: transparent !important;
+    background-color: $color-primary-3 !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: #fff !important;
+      border-color: transparent !important;
+      background-color: $color-primary-5 !important;
+    }
+    &:focus-visible {
+      outline: none;
+      outline-offset: unset;
+    }
+  }
+  &.ant-btn-dangerous {
+    background-color: $color-error !important;
+    &:disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+  &.ant-btn-background-ghost {
+    border: 1px solid $color-primary !important;
+    color: $color-primary !important;
+    background-color: #fff !important;
+    &:disabled {
+      border-color: $color-primary-3 !important;
+      color: $color-primary-3 !important;
+      background-color: #fff !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        border-color: $color-primary-5 !important;
+        color: $color-primary-5 !important;
+        background-color: #fff !important;
+      }
+    }
+    &.ant-btn-dangerous {
+      border: 1px solid $color-error !important;
+      color: $color-error !important;
+      background-color: #fff !important;
+      &:disabled {
+        border-color: $color-error-3 !important;
+        color: $color-error-3 !important;
+      }
+      &:not(:disabled) {
+        &:hover {
+          border-color: $color-error-5 !important;
+          color: $color-error-5 !important;
+        }
+      }
+    }
+  }
+}
+
+.ant-btn-outline {
+  border: 1px solid $color-primary !important;
+  color: $color-primary !important;
+  &:disabled {
+    border-color: $color-primary-3 !important;
+    color: $color-primary-3 !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      border-color: $color-primary-5 !important;
+      color: $color-primary-5 !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &:disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-text {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: $color-primary !important;
+  &:disabled {
+    color: $color-primary-2 !important;
+    border-color: transparent !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+      border-color: transparent !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    color: $color-error !important;
+    &:disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-link {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: $color-primary !important;
+  &:disabled {
+    color: $color-primary-2 !important;
+    border-color: transparent !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+      border-color: transparent !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    color: $color-error !important;
+    &:disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-checkbox.scss b/src/styles/components/ant-checkbox.scss
new file mode 100644
index 0000000..405459b
--- /dev/null
+++ b/src/styles/components/ant-checkbox.scss
@@ -0,0 +1,68 @@
+.ant-checkbox-group {
+  .ant-checkbox-wrapper {
+    margin-right: 24px;
+  }
+}
+.ant-checkbox-wrapper {
+  .ant-checkbox {
+    &::after {
+      display: none !important;
+    }
+    .ant-checkbox-inner {
+      border-radius: 2px;
+      border: 2px solid #d7d7d9;
+    }
+    &.ant-checkbox-disabled {
+      background: #f2f3f5;
+    }
+    &.ant-checkbox-indeterminate {
+      .ant-checkbox-inner {
+        background-color: #6d4cfe !important;
+        border-color: transparent !important;
+        &::after {
+          height: 2px;
+          width: 6px;
+          background-color: #fff !important;
+        }
+      }
+    }
+    &.ant-checkbox-indeterminate.ant-checkbox-disabled {
+      .ant-checkbox-inner {
+        background-color: #a794fe !important;
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+    &.ant-checkbox-checked {
+      .ant-checkbox-inner {
+        background-color: #6d4cfe !important;
+        border-color: transparent !important;
+      }
+    }
+    &.ant-checkbox-checked.ant-checkbox-disabled {
+      .ant-checkbox-inner {
+        background-color: #a794fe !important;
+        border-color: transparent !important;
+        &::after {
+          border-color: #fff;
+        }
+      }
+    }
+  }
+  .ant-checkbox + span {
+    padding-left: 8px;
+    padding-right: 0;
+    color: #211f24;
+    font-family: $font-family-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  &:hover {
+    .ant-checkbox-inner {
+      border-color: #d7d7d9 !important;
+    }
+  }
+}
diff --git a/src/styles/components/ant-form.scss b/src/styles/components/ant-form.scss
new file mode 100644
index 0000000..6ad4fad
--- /dev/null
+++ b/src/styles/components/ant-form.scss
@@ -0,0 +1,39 @@
+.ant-form {
+  .ant-form-item {
+    margin-bottom: 0;
+    &:not(:last-child) {
+      margin-bottom: 16px !important;
+    }
+    .ant-form-item-row {
+      .ant-form-item-label {
+        margin-right: 12px;
+        > label {
+          color: #211f24;
+          font-family: $font-family-regular;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+          &::before {
+            margin-inline-end: unset;
+            color: #f64b31;
+            margin-right: 4px;
+            font-size: 14px;
+            font-family: $font-family-regular;
+            line-height: 22px;
+          }
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+    .ant-form-item-control {
+      .ant-form-item-explain-error {
+        color: #f64b31;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-input.scss b/src/styles/components/ant-input.scss
new file mode 100644
index 0000000..aee10b0
--- /dev/null
+++ b/src/styles/components/ant-input.scss
@@ -0,0 +1,88 @@
+@mixin box {
+  display: flex;
+  align-items: center;
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  padding: 0 12px;
+}
+.ant-input-affix-wrapper {
+  @include box;
+  &.ant-input-affix-wrapper-disabled {
+    background-color: var(--BG-200, #f2f3f5) !important;
+  }
+}
+.ant-input,
+.ant-input-password {
+  @include box;
+
+  color: var(--Text-4, #211f24);
+  font-family: $font-family-regular;
+  font-size: 14px !important;
+  font-style: normal;
+  font-weight: 400;
+  &::placeholder {
+    color: var(--Text-4, #939499);
+  }
+
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.ant-input-focus,
+  &.ant-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;
+  }
+  &.ant-input-disabled {
+    background-color: var(--BG-200, #f2f3f5) !important;
+  }
+  .ant-input-prefix {
+    padding-right: 0 !important;
+    margin-right: 4px;
+  }
+  &.ant-input-status-error,
+  &.ant-input-affix-wrapper-status-error {
+    border-color: $color-error !important;
+  }
+}
+input.ant-input {
+  height: 32px;
+  &.ant-input-lg {
+    height: 36px;
+  }
+  &.ant-input-sm {
+    height: 28px;
+  }
+}
+textarea.ant-input {
+  padding: 8px 12px 4px 12px;
+}
+.ant-input-affix-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+  &:focus,
+  &-focused {
+    box-shadow: none !important;
+  }
+  .ant-input {
+    height: 30px;
+    &.ant-input-lg {
+      height: 34px;
+    }
+    &.ant-input-sm {
+      height: 26px;
+    }
+  }
+  .ant-input-suffix {
+    .ant-input-show-count-suffix {
+      color: var(--Text-4, #939499);
+      font-family: font-family-manrope-regular;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+}
diff --git a/src/styles/components/ant-modal.scss b/src/styles/components/ant-modal.scss
new file mode 100644
index 0000000..47fc5ee
--- /dev/null
+++ b/src/styles/components/ant-modal.scss
@@ -0,0 +1,42 @@
+.ant-modal {
+  .ant-modal-content {
+    padding: 0;
+    .ant-modal-header {
+      border-bottom: 1px solid var(--Border-1, #d7d7d9);
+      height: 56px;
+      padding: 0 20px;
+      margin-bottom: 0;
+      color: inherit;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      .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 {
+      margin-top: 0;
+      display: flex;
+      height: 64px;
+      padding: 0px 20px;
+      justify-content: flex-end;
+      align-items: center;
+      border-top: 1px solid var(--Border-1, #d7d7d9);
+      .ant-btn {
+        &:not(:nth-child(1)) {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-notification.scss b/src/styles/components/ant-notification.scss
new file mode 100644
index 0000000..6690660
--- /dev/null
+++ b/src/styles/components/ant-notification.scss
@@ -0,0 +1,15 @@
+.ant-notification-notice {
+  padding: 9px 16px;
+  .ant-notification-notice-content {
+    .ant-notification-notice-message {
+      margin: 0;
+    }
+    .ant-notification-notice-description {
+      margin: 0;
+    }
+  }
+  .ant-notification-notice-close {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
diff --git a/src/styles/components/ant-radio.scss b/src/styles/components/ant-radio.scss
new file mode 100644
index 0000000..bda6f83
--- /dev/null
+++ b/src/styles/components/ant-radio.scss
@@ -0,0 +1,39 @@
+.ant-radio-group {
+  .ant-radio-wrapper {
+    margin-right: 24px;
+  }
+}
+.ant-radio-wrapper {
+  .ant-radio {
+    .ant-radio-inner {
+      width: 14px;
+      height: 14px;
+      background-color: #fff;
+      border: 2px solid var(--Border-1, #d7d7d9);
+      &::after {
+        display: none !important;
+      }
+    }
+    &.ant-radio-checked {
+      .ant-radio-inner {
+        border: 4px solid var(--Brand-6, #6d4cfe);
+        background-color: #fff;
+      }
+    }
+    &.ant-radio-disabled {
+      .ant-radio-inner {
+        border: 2px solid var(--Border-1, #d7d7d9);
+        background-color: #f2f3f5;
+      }
+    }
+    &.ant-radio-checked.ant-radio-disabled {
+      .ant-radio-inner {
+        border: 4px solid var(--Brand-6, #a794fe);
+        background-color: #fff;
+      }
+    }
+  }
+  span.ant-radio + * {
+    padding: 0 0 0 8px;
+  }
+}
diff --git a/src/styles/components/ant-select.scss b/src/styles/components/ant-select.scss
new file mode 100644
index 0000000..558fbf6
--- /dev/null
+++ b/src/styles/components/ant-select.scss
@@ -0,0 +1,69 @@
+.ant-select {
+  .ant-select-selector {
+    padding: 0 12px !important;
+    border-radius: 4px !important;
+    border-color: #d7d7d9 !important;
+    background-color: #fff !important;
+    align-items: center;
+    .ant-select-selection-search-input {
+      height: 100% !important;
+    }
+    .ant-select-selection-placeholder {
+      color: var(--Text-4, #737478);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    .ant-select-selection-item {
+      color: var(--Text-4, #211f24);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+    }
+  }
+  &:focus,
+  &-focused {
+    .ant-select-selector {
+      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;
+    }
+  }
+  &.ant-select-status-error {
+    border-color: $color-error !important;
+  }
+}
+
+.ant-select.ant-select-single {
+  .ant-select-selector {
+    height: 32px !important;
+  }
+  &.ant-select-lg {
+    .ant-select-selector {
+      height: 36px !important;
+    }
+  }
+  &.ant-select-sm {
+    .ant-select-selector {
+      height: 28px !important;
+    }
+  }
+}
+.ant-select.ant-select-multiple {
+  .ant-select-selection-search-input {
+    min-height: 32px !important;
+  }
+  &.ant-select-lg {
+    .ant-select-selection-search-input {
+      min-height: 36px !important;
+    }
+  }
+  &.ant-select-sm {
+    .ant-select-selection-search-input {
+      min-height: 28px !important;
+    }
+  }
+}
diff --git a/src/styles/components/ant-spin.scss b/src/styles/components/ant-spin.scss
new file mode 100644
index 0000000..6e73b26
--- /dev/null
+++ b/src/styles/components/ant-spin.scss
@@ -0,0 +1,6 @@
+.ant-spin-nested-loading  {
+    height: 100%;
+    .ant-spin-container {
+        height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/ant-step.scss b/src/styles/components/ant-step.scss
new file mode 100644
index 0000000..2eab583
--- /dev/null
+++ b/src/styles/components/ant-step.scss
@@ -0,0 +1,56 @@
+.ant-steps {
+  .ant-steps-item {
+    padding: 0;
+    padding-inline-start: 0 !important;
+    .ant-steps-item-container {
+      .ant-steps-item-icon {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        margin-right: 12px;
+        border-radius: 50%;
+        background: var(--BG-200, #f2f3f5);
+        .ant-steps-icon {
+          color: #55585f;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 500;
+          //   line-height: 24px;
+          font-family: $font-family-manrope-medium;
+        }
+      }
+      .ant-steps-item-content {
+        .ant-steps-item-title {
+          padding-right: 12px;
+          color: #55585f;
+          font-family: $font-family-regular;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          &::after {
+            background-color: #e6e6e8 !important;
+          }
+        }
+      }
+    }
+    &:not(:last-child) {
+      margin-left: 12px;
+    }
+    &.ant-steps-item-active,
+    &.ant-steps-item-finish {
+      .ant-steps-item-icon {
+        background-color: #6d4cfe !important;
+        .ant-steps-icon {
+          color: #fff !important;
+        }
+      }
+      .ant-steps-item-content {
+        .ant-steps-item-title {
+          color: #211f24;
+          font-family: $font-family-medium;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-switch.scss b/src/styles/components/ant-switch.scss
new file mode 100644
index 0000000..5699f8c
--- /dev/null
+++ b/src/styles/components/ant-switch.scss
@@ -0,0 +1,10 @@
+.ant-switch {
+  &.ant-switch-checked {
+    background: $color-primary;
+    &:not(ant-switch-disabled) {
+      &:hover {
+        background: $color-primary !important;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-table.scss b/src/styles/components/ant-table.scss
new file mode 100644
index 0000000..a53d7a6
--- /dev/null
+++ b/src/styles/components/ant-table.scss
@@ -0,0 +1,75 @@
+.ant-table-wrapper {
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table{
+    height: 100%;
+  }
+  .ant-table {
+    border-radius: 0;
+    font-family: $font-family-regular;
+    @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;
+    }
+    .ant-table-container {
+      border: none !important;
+      height: 100%;
+      .ant-table-thead {
+        > tr {
+          .ant-table-cell {
+            padding: 13px 16px;
+            background: var(--BG-100, #f7f8fa);
+            border-start-start-radius: 0 !important;
+            border-start-end-radius: 0 !important;
+            @include table-cell-text;
+            font-family: 'PingFangSC-Medium';
+            .ant-table-column-sorters {
+              justify-content: normal;
+              .ant-table-column-title {
+                flex: none;
+              }
+              .ant-table-column-sorter {
+                margin-left: 8px;
+                color: #939499;
+                line-height: normal;
+                .anticon.active {
+                  color: $color-primary;
+                }
+              }
+            }
+          }
+        }
+      }
+      .ant-table-tbody {
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 11px 16px;
+            @include table-cell-text;
+          }
+        }
+      }
+    }
+  }
+  .ant-table-bordered {
+    .ant-table-container {
+      .ant-table-thead {
+        .ant-table-cell {
+          border-inline-end: none !important ;
+          border-bottom: 1px solid var(--Border-1, #d7d7d9);
+        }
+      }
+      .ant-table-tbody {
+        .ant-table-row {
+          .ant-table-cell {
+            border-inline-end: none !important;
+            border-bottom: 1px solid var(--Border-1, #e6e6e8);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-tabs.scss b/src/styles/components/ant-tabs.scss
new file mode 100644
index 0000000..5c41b64
--- /dev/null
+++ b/src/styles/components/ant-tabs.scss
@@ -0,0 +1,49 @@
+.ant-tabs {
+  .ant-tabs-nav {
+    margin-bottom: 0;
+    padding: 0 24px;
+    .ant-tabs-nav-wrap {
+      height: 40px;
+      .ant-tabs-nav-list {
+        .ant-tabs-tab {
+          .ant-tabs-tab-btn {
+            color: var(--Text-2, #55585f);
+            font-family: $font-family-regular;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 24px;
+          }
+          &.ant-tabs-tab-active {
+            .ant-tabs-tab-btn {
+              color: var(--Brand-6, #6d4cfe);
+              font-weight: 500;
+              font-family: $font-family-medium;
+              text-shadow: none;
+            }
+          }
+        }
+        .ant-tabs-ink-bar {
+          background: #6d4cfe;
+        }
+      }
+    }
+  }
+  .ant-tabs-content-holder {
+    display: none;
+  }
+  &.ant-tabs-small {
+    .ant-tabs-nav {
+      .ant-tabs-nav-wrap {
+        height: 32px;
+      }
+    }
+  }
+  &.ant-tabs-large {
+    .ant-tabs-nav {
+      .ant-tabs-nav-wrap {
+        height: 48px;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/ant-tag.scss b/src/styles/components/ant-tag.scss
new file mode 100644
index 0000000..addd554
--- /dev/null
+++ b/src/styles/components/ant-tag.scss
@@ -0,0 +1,4 @@
+.ant-tag{
+    border-radius: 2px;
+    border: none;
+}
\ No newline at end of file
diff --git a/src/styles/components/ant-textarea.scss b/src/styles/components/ant-textarea.scss
new file mode 100644
index 0000000..42cd057
--- /dev/null
+++ b/src/styles/components/ant-textarea.scss
@@ -0,0 +1,5 @@
+.ant-input-textarea {
+  .ant-input {
+    padding: 8px 12px 4px 12px;
+  }
+}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 3f39bdf..471d603 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -4,10 +4,26 @@
 @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";
\ No newline at end of file
+@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';
+@import './ant-radio.scss';
+@import './ant-form.scss';
+@import './ant-button.scss';
+@import './ant-table.scss';
+@import './ant-checkbox.scss';
+@import './ant-input.scss';
+@import './ant-textarea.scss';
+@import './ant-select.scss';
+@import './ant-tabs.scss';
+@import "./ant-notification.scss";
+@import "./ant-tag.scss";
+@import "./ant-switch.scss";
+@import "./ant-step.scss";
+@import "./ant-spin.scss";
\ No newline at end of file
diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss
index e112909..7c6cb9a 100644
--- a/src/styles/components/steps.scss
+++ b/src/styles/components/steps.scss
@@ -5,7 +5,7 @@
         width: 28px;
         height: 28px;
         border-radius: 32px;
-        color: #3c4043;
+        color: #55585F;
         font-size: 16px;
         font-style: normal;
         font-weight: 500;
@@ -16,7 +16,7 @@
     }
     .arco-steps-item-content {
       .arco-steps-item-title {
-        color: #3c4043;
+        color: #55585F;
         font-family: $font-family-regular;
         font-size: 16px;
         font-style: normal;
diff --git a/src/views/home/components/history-conversation-drawer/index.vue b/src/views/home/components/history-conversation-drawer/index.vue
index 46c2f97..5365374 100644
--- a/src/views/home/components/history-conversation-drawer/index.vue
+++ b/src/views/home/components/history-conversation-drawer/index.vue
@@ -94,7 +94,7 @@ export default {
     });
 
     return () => (
-      <Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
+      <Drawer width={320} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
         <header class="header h-40px px-12px flex justify-between items-center">
           <span class="text-12px font-400 color-#211F24 font-family-medium">历史对话</span>
           <icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />