diff --git a/src/App.vue b/src/App.vue
index a1e21fe9..c41f50d9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -92,4 +92,61 @@ body .ant-pro-basicLayout {
 .ant-table.ant-table-small .ant-table-thead > tr > th {
   padding: 6px !important;
 }
+
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+
+.primary-button,
+.danger-button,
+.dashed-button {
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.primary-button:last-child,
+.danger-button:last-child,
+.dashed-button:last-child {
+  margin-right: 0;
+}
+
+.primary-button,
+.danger-button,
+.dashed-button {
+  padding: 8px 16px;
+}
+
+.primary-button {
+  background-color: #1890ff;
+  color: #fff;
+  border: none;
+}
+
+.danger-button {
+  background-color: #ff4d4f;
+  color: #fff;
+  border: none;
+}
+
+.dashed-button {
+  background-color: #f0f2f5;
+  color: #333;
+  border: 1px dashed #ccc;
+}
+
+@media (max-width: 768px) {
+  .button-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .primary-button,
+  .danger-button,
+  .dashed-button {
+    margin-right: 0;
+  }
+}
 </style>