diff --git a/components.d.ts b/components.d.ts
index c40b1dd..2db0d70 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,18 +29,22 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NFormItemGridItem: typeof import('naive-ui')['NFormItemGridItem']
+    NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH3: typeof import('naive-ui')['NH3']
     NH4: typeof import('naive-ui')['NH4']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NInputPassword: typeof import('naive-ui')['NInputPassword']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NLi: typeof import('naive-ui')['NLi']
diff --git a/components/site-replication/new-form.vue b/components/site-replication/new-form.vue
new file mode 100644
index 0000000..5f6a9f4
--- /dev/null
+++ b/components/site-replication/new-form.vue
@@ -0,0 +1,141 @@
+<template>
+   <n-modal
+    v-model:show="visible"
+    :mask-closable="false"
+    preset="card"
+    title="添加站点复制"
+    class="max-w-screen-lg"
+    :segmented="{
+      content: true,
+      action: true,
+    }">
+    <n-card title="添加复制站点">
+      <p>注意：添加或编辑对等站点时，每个站点的 AccessKey 和 SecretKey 值都是必需的</p>
+      <n-form ref="currentFormRef" :model="currentSite" :rules="rules">
+        <!-- 当前站点 -->
+        <n-flex  style="margin-top: 16px;">
+          <n-card  title="当前站点"  >
+            <n-space direction="vertical" >
+              <n-form-item label="站点名称" path="name">
+                <n-input v-model:value="currentSite.name" placeholder="站点名称" />
+              </n-form-item>
+              <n-form-item label="Endpoint *" path="endpoint">
+                <n-input v-model:value="currentSite.endpoint" placeholder="Endpoint" />
+              </n-form-item>
+              <n-form-item label="Access Key *" path="accessKey">
+                <n-input v-model:value="currentSite.accessKey" placeholder="Access Key" />
+              </n-form-item>
+              <n-form-item label="Secret Key *" path="secretKey">
+                <n-input type="password" v-model:value="currentSite.secretKey" placeholder="Secret Key" />
+              </n-form-item>
+            </n-space>
+          </n-card>
+        </n-flex>
+
+        <!-- 远程站点 -->
+        <n-flex direction="vertical" style="margin-top: 16px;">
+          <n-card title="远程站点">
+            <n-space direction="vertical">
+               <n-dynamic-input :min='1' v-model:value="remoteSite" :on-create="onCreate">
+                <template #default="{ value }" >
+                   <n-grid x-gap="12" :cols="4">
+                    <n-gi>
+                      <n-form-item label="站点名称" path="name">
+                        <n-input v-model:value="value.name" placeholder="站点名称" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi>
+                      <n-form-item label="Endpoint *" path="endpoint">
+                        <n-input v-model:value="value.endpoint" placeholder="Endpoint" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi>
+                        <n-form-item label="Access Key *" path="accessKey">
+                          <n-input v-model:value="value.accessKey" placeholder="Access Key" />
+                        </n-form-item>
+                    </n-gi>
+                    <n-gi>
+                      <n-form-item label="Secret Key *" path="secretKey">
+                        <n-input type="password" v-model:value="value.secretKey" placeholder="Secret Key" />
+                      </n-form-item>
+                    </n-gi>
+                  </n-grid>
+                </template>
+                </n-dynamic-input>
+            </n-space>
+          </n-card>
+        </n-flex>
+      </n-form>
+      <!-- 按钮 -->
+      <n-space justify="center" style="margin-top: 16px;">
+        <n-button type="primary" @click="save">保存</n-button>
+        <n-button @click="cancel">取消</n-button>
+      </n-space>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const currentSite = ref({
+  name: '',
+  endpoint: 'http://127.0.0.1:9000',
+  accessKey: 'rustfsadmin',
+  secretKey: ''
+});
+
+const remoteSite = ref([{
+  name: '',
+  endpoint: '',
+  accessKey: '',
+  secretKey: ''
+}]);
+
+const onCreate = () => {
+  return {
+    name: '',
+    endpoint: '',
+    accessKey: '',
+    secretKey: ''
+  };
+};
+
+const rules = {
+  endpoint: [
+    { required: true, message: 'Endpoint 必须提供', trigger: 'blur' }
+  ],
+  accessKey: [
+    { required: true, message: 'Access Key 必须提供', trigger: 'blur' }
+  ],
+  secretKey: [
+    { required: true, message: 'Secret Key 必须提供', trigger: 'blur' }
+  ]
+};
+
+const currentFormRef = ref(null);
+const save = () => {
+  // Save logic here
+  console.log('Current Site:', currentSite.value);
+  console.log('Remote Site:', remoteSite.value);
+};
+
+const cancel = () => {
+  // Cancel logic here
+};
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped >
+:deep(.n-dynamic-input-item__action){
+  align-self: center !important;
+}
+</style>
diff --git a/pages/site-replication/index.vue b/pages/site-replication/index.vue
new file mode 100644
index 0000000..8f1934d
--- /dev/null
+++ b/pages/site-replication/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">站点复制</h1>
+      </template>
+    </page-header>
+    <page-content class="flex flex-col gap-4">
+      <n-flex justify="end" >
+          <n-button @click="() => openForm()">
+            <Icon name="ri:add-line" class="mr-2" />
+            <span>添加站点</span>
+          </n-button>
+      </n-flex>
+      
+      <n-card class="flex flex-center" style="height:400px">
+        <n-empty description="空空如也" ></n-empty>
+      </n-card>
+      <!-- <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="pageData" :pagination="false" :bordered="false" /> -->
+       <site-replication-new-form ref="addFormRef"></site-replication-new-form>
+    </page-content>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '#components'
+import { NButton } from 'naive-ui'
+
+const addFormRef = ref()
+const openForm = ()=>{
+  addFormRef.value.open()
+}
+
+</script>