diff --git a/admin/src/views/setting/form-backup.vue b/admin/src/views/setting/form-backup.vue
index df0f8670..a75ed907 100644
--- a/admin/src/views/setting/form-backup.vue
+++ b/admin/src/views/setting/form-backup.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-form :model="formData" :rules="rules" ref="formRef" label-width="250px" class="formData">
+    <el-form :model="formData" :rules="rules" ref="formRef" label-width="250px" class="formData" size="mini">
         <el-form-item label="Enabled" prop="backup.enabled">
             <el-radio v-model="formData.backup.enabled" label="yes">Yes</el-radio>
             <el-radio v-model="formData.backup.enabled" label="no">No</el-radio>
diff --git a/admin/src/views/setting/form-hr.vue b/admin/src/views/setting/form-hr.vue
new file mode 100644
index 00000000..001b24f9
--- /dev/null
+++ b/admin/src/views/setting/form-hr.vue
@@ -0,0 +1,103 @@
+<template>
+    <el-form :model="formData" :rules="rules" ref="formRef" label-width="250px" class="formData" size="mini">
+        <el-form-item label="Enabled" prop="hr.enabled">
+            <el-radio v-model="formData.hr.enabled" label="yes">Yes</el-radio>
+            <el-radio v-model="formData.hr.enabled" label="no">No</el-radio>
+            <div class="nexus-help-text">
+                Enable H&R or not.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Seed time minimum" prop="hr.seed_time_minimum">
+            <el-input v-model="formData.hr.seed_time_minimum" type="number"></el-input>
+            <div class="nexus-help-text">
+                Seed time minimum (Unit: Hour).
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Ignore" prop="hr.ignore_when_ratio_reach">
+            <el-input v-model="formData.hr.ignore_when_ratio_reach" type="number"></el-input>
+            <div class="nexus-help-text">
+                When uploaded / torrent_size reach this value, this H&R will be ignored.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Disable user" prop="hr.disable_user_when_counts_reach">
+            <el-input v-model="formData.hr.ban_user_when_counts_reach"></el-input>
+            <div class="nexus-help-text">
+                When total H&R counts reach this value, user account will be disabled.
+            </div>
+        </el-form-item>
+
+        <el-form-item>
+            <el-button type="primary" @click="submitAdd()">Submit</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { localGet } from '../../utils'
+import api from "../../utils/api";
+
+export default {
+    name: 'SettingFormHR',
+    setup() {
+        const { proxy } = getCurrentInstance()
+        const formRef = ref(null)
+        const route = useRoute()
+        const router = useRouter()
+        const { id } = route.query
+        const state = reactive({
+            token: localGet('token') || '',
+            id: id,
+            allClasses: [],
+            formData: {
+                hr: {
+                    enabled: '',
+                    seed_time_minimum: '',
+                    ignore_when_ratio_reach: '',
+                    ban_user_when_counts_reach: '',
+                }
+            },
+            rules: {
+                'hr.enabled': [{ required: 'true',  }],
+            },
+        })
+        onMounted( () => {
+
+        })
+        onBeforeUnmount(() => {
+
+        })
+        const submitAdd = () => {
+            formRef.value.validate(async (vaild) => {
+                if (vaild) {
+                    let params = state.formData;
+                    console.log(params)
+                    let res = await api.storeSetting(params)
+                    ElMessage.success(res.msg)
+                    await listSetting();
+                }
+            })
+        }
+        const listSetting = async () => {
+            let res = await api.listSetting({prefix: "hr"})
+            console.log("listSetting", res)
+            state.formData = res.data
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            submitAdd,
+            listSetting,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/admin/src/views/setting/index.vue b/admin/src/views/setting/index.vue
index 6162741d..ca26016e 100644
--- a/admin/src/views/setting/index.vue
+++ b/admin/src/views/setting/index.vue
@@ -1,6 +1,7 @@
 <template>
     <el-tabs type="border-card" @tab-click="handleTabClick">
         <el-tab-pane label="Backup"><FormBackup ref="backup" /></el-tab-pane>
+        <el-tab-pane label="H&R"><FormHR ref="hr" /></el-tab-pane>
     </el-tabs>
 </template>
 
@@ -13,16 +14,18 @@ import { useTable, renderTableData } from '../../utils/table'
 import FormBasic from './form-basic.vue'
 import FormMain from './form-main.vue'
 import FormBackup from './form-backup.vue'
+import FormHR from './form-hr.vue'
 
 export default {
     name: 'Setting',
     components: {
-        FormBasic, FormMain, FormBackup
+        FormBasic, FormMain, FormBackup, FormHR
     },
     setup() {
         const multipleTable = ref(null)
         const router = useRouter()
         const backup = ref(null)
+        const hr = ref(null)
         const state = useTable()
 
         onMounted(() => {
@@ -54,8 +57,8 @@ export default {
             state.query.page = val
             fetchTableData()
         }
-        const handleTabClick = (val) => {
-            console.log('handleTabClick', val)
+        const handleTabClick = (tab) => {
+            console.log('handleTabClick', tab)
         }
         return {
             ...toRefs(state),
@@ -68,6 +71,7 @@ export default {
             fetchTableData,
             changePage,
             backup,
+            hr
         }
     }
 }