diff --git a/webUI/src/views/acc/plugins/custominvoice/templates.vue b/webUI/src/views/acc/plugins/custominvoice/templates.vue
index 219fce6..5a66728 100644
--- a/webUI/src/views/acc/plugins/custominvoice/templates.vue
+++ b/webUI/src/views/acc/plugins/custominvoice/templates.vue
@@ -23,10 +23,266 @@
           <v-tabs v-model="activeTab" color="primary" class="px-4">
             <v-tab value="business">قالب‌های کسب‌وکار</v-tab>
             <v-tab value="public">قالب‌های عمومی</v-tab>
+            <v-tab value="help">راهنمای استفاده</v-tab>
           </v-tabs>
 
           <div class="pa-4">
 
+            <!-- Help Tab Content -->
+            <div v-if="activeTab === 'help'" class="help-content">
+              <v-card class="mb-4">
+                <v-card-title class="text-h6 d-flex align-center">
+                  <v-icon icon="mdi-help-circle" class="me-2" color="primary"></v-icon>
+                  راهنمای استفاده از افزونه فاکتور سفارشی
+                </v-card-title>
+                <v-card-text>
+                  <div class="text-body-1">
+                    <p class="mb-4">
+                      این افزونه به شما امکان ایجاد و مدیریت قالب‌های فاکتور سفارشی را می‌دهد. 
+                      شما می‌توانید قالب‌های خود را ایجاد کنید یا از قالب‌های عمومی موجود استفاده کنید.
+                    </p>
+                  </div>
+                </v-card-text>
+              </v-card>
+
+              <!-- Template Selection Guide -->
+              <v-card class="mb-4">
+                <v-card-title class="text-h6 d-flex align-center">
+                  <v-icon icon="mdi-cog" class="me-2" color="info"></v-icon>
+                  انتخاب قالب برای انواع مختلف اسناد
+                </v-card-title>
+                <v-card-text>
+                  <div class="text-body-1">
+                    <p class="mb-3">
+                      برای استفاده از قالب‌های سفارشی در فاکتورهای مختلف، مراحل زیر را دنبال کنید:
+                    </p>
+                    
+                    <!-- Step Indicator -->
+                    <div class="d-flex align-center mb-4">
+                      <v-chip 
+                        :color="stepperStep >= 1 ? 'primary' : 'grey'" 
+                        variant="flat" 
+                        class="me-2"
+                      >
+                        ۱
+                      </v-chip>
+                      <v-divider class="mx-2"></v-divider>
+                      <v-chip 
+                        :color="stepperStep >= 2 ? 'primary' : 'grey'" 
+                        variant="flat" 
+                        class="me-2"
+                      >
+                        ۲
+                      </v-chip>
+                      <v-divider class="mx-2"></v-divider>
+                      <v-chip 
+                        :color="stepperStep >= 3 ? 'primary' : 'grey'" 
+                        variant="flat"
+                      >
+                        ۳
+                      </v-chip>
+                    </div>
+
+                    <!-- Step Content -->
+                    <v-card variant="outlined" class="mb-4">
+                      <v-card-text>
+                        <!-- Step 1 -->
+                        <div v-if="stepperStep === 1">
+                          <h4 class="mb-2">رفتن به بخش تنظیمات</h4>
+                          <p>از منوی اصلی به بخش <strong>تنظیمات</strong> بروید</p>
+                        </div>
+
+                        <!-- Step 2 -->
+                        <div v-if="stepperStep === 2">
+                          <h4 class="mb-2">انتخاب چاپ اسناد</h4>
+                          <p>در بخش تنظیمات، گزینه <strong>چاپ اسناد</strong> را انتخاب کنید</p>
+                        </div>
+
+                        <!-- Step 3 -->
+                        <div v-if="stepperStep === 3">
+                          <h4 class="mb-2">انتخاب قالب سفارشی</h4>
+                          <p>برای هر نوع سند، قالب سفارشی مورد نظر خود را انتخاب کنید</p>
+                        </div>
+                      </v-card-text>
+                    </v-card>
+
+                    <!-- Navigation Buttons (moved outside stepper) -->
+                    <div class="d-flex justify-space-between align-center pa-4">
+                      <v-btn
+                        v-if="stepperStep > 1"
+                        variant="text"
+                        @click="prevStep"
+                      >
+                        <v-icon icon="mdi-arrow-right" class="me-1"></v-icon>
+                        مرحله قبل
+                      </v-btn>
+                      <v-spacer v-else></v-spacer>
+                      
+                      <v-btn
+                        v-if="stepperStep < 3"
+                        color="primary"
+                        @click="nextStep"
+                      >
+                        مرحله بعد
+                        <v-icon icon="mdi-arrow-left" class="ms-1"></v-icon>
+                      </v-btn>
+                      <v-btn
+                        v-else
+                        color="success"
+                        @click="resetStepper"
+                      >
+                        <v-icon icon="mdi-refresh" class="me-1"></v-icon>
+                        شروع مجدد
+                      </v-btn>
+                    </div>
+
+                    <v-alert type="info" variant="tonal" class="mb-4">
+                      <template #prepend>
+                        <v-icon icon="mdi-information"></v-icon>
+                      </template>
+                      <div>
+                        <strong>نکته مهم:</strong> قالب‌های سفارشی را می‌توانید برای انواع مختلف اسناد تنظیم کنید:
+                      </div>
+                    </v-alert>
+
+                    <v-list class="mb-4">
+                      <v-list-item prepend-icon="mdi-file-document-outline">
+                        <v-list-item-title>فاکتور فروش</v-list-item-title>
+                        <v-list-item-subtitle>قالب برای فاکتورهای فروش کالا و خدمات</v-list-item-subtitle>
+                      </v-list-item>
+                      <v-list-item prepend-icon="mdi-file-document-outline">
+                        <v-list-item-title>فاکتور خرید</v-list-item-title>
+                        <v-list-item-subtitle>قالب برای فاکتورهای خرید از تامین‌کنندگان</v-list-item-subtitle>
+                      </v-list-item>
+                      <v-list-item prepend-icon="mdi-file-document-outline">
+                        <v-list-item-title>برگشت از فروش</v-list-item-title>
+                        <v-list-item-subtitle>قالب برای اسناد برگشت کالا از مشتریان</v-list-item-subtitle>
+                      </v-list-item>
+                      <v-list-item prepend-icon="mdi-file-document-outline">
+                        <v-list-item-title>برگشت به خرید</v-list-item-title>
+                        <v-list-item-subtitle>قالب برای اسناد برگشت کالا به تامین‌کنندگان</v-list-item-subtitle>
+                      </v-list-item>
+                    </v-list>
+                  </div>
+                </v-card-text>
+              </v-card>
+
+              <!-- Invoice Generation Guide -->
+              <v-card class="mb-4">
+                <v-card-title class="text-h6 d-flex align-center">
+                  <v-icon icon="mdi-printer" class="me-2" color="success"></v-icon>
+                  تولید و چاپ فاکتور
+                </v-card-title>
+                <v-card-text>
+                  <div class="text-body-1">
+                    <p class="mb-3">
+                      پس از تنظیم قالب‌ها، می‌توانید فاکتورهای خود را با قالب سفارشی تولید کنید:
+                    </p>
+
+                    <v-timeline density="compact" class="mb-4">
+                      <v-timeline-item dot-color="primary" size="small">
+                        <template #opposite>
+                          <div class="text-caption">مرحله ۱</div>
+                        </template>
+                        <div>
+                          <h4 class="text-subtitle-2">ایجاد سند</h4>
+                          <p class="text-body-2">سند مورد نظر (فاکتور فروش، خرید و...) را ایجاد کنید</p>
+                        </div>
+                      </v-timeline-item>
+
+                      <v-timeline-item dot-color="info" size="small">
+                        <template #opposite>
+                          <div class="text-caption">مرحله ۲</div>
+                        </template>
+                        <div>
+                          <h4 class="text-subtitle-2">تکمیل اطلاعات</h4>
+                          <p class="text-body-2">اطلاعات سند را تکمیل و ذخیره کنید</p>
+                        </div>
+                      </v-timeline-item>
+
+                      <v-timeline-item dot-color="success" size="small">
+                        <template #opposite>
+                          <div class="text-caption">مرحله ۳</div>
+                        </template>
+                        <div>
+                          <h4 class="text-subtitle-2">چاپ با قالب سفارشی</h4>
+                          <p class="text-body-2">از دکمه چاپ استفاده کنید تا سند با قالب سفارشی تولید شود</p>
+                        </div>
+                      </v-timeline-item>
+                    </v-timeline>
+
+                    <v-alert type="success" variant="tonal">
+                      <template #prepend>
+                        <v-icon icon="mdi-check-circle"></v-icon>
+                      </template>
+                      <div>
+                        <strong>مزایای استفاده از قالب‌های سفارشی:</strong>
+                      </div>
+                      <ul class="mt-2">
+                        <li>طراحی منحصر به فرد و مطابق با برند شما</li>
+                        <li>امکان اضافه کردن لوگو و اطلاعات شرکت</li>
+                        <li>تنظیم فونت، رنگ و چیدمان دلخواه</li>
+                        <li>پشتیبانی از متغیرهای پویا</li>
+                        <li>امکان اشتراک‌گذاری قالب‌ها با سایر کاربران</li>
+                      </ul>
+                    </v-alert>
+                  </div>
+                </v-card-text>
+              </v-card>
+
+              <!-- Template Management Guide -->
+              <v-card>
+                <v-card-title class="text-h6 d-flex align-center">
+                  <v-icon icon="mdi-tools" class="me-2" color="warning"></v-icon>
+                  مدیریت قالب‌ها
+                </v-card-title>
+                <v-card-text>
+                  <div class="text-body-1">
+                    <v-row>
+                      <v-col cols="12" md="6">
+                        <v-card variant="outlined" class="mb-3">
+                          <v-card-title class="text-subtitle-1">قالب‌های کسب‌وکار</v-card-title>
+                          <v-card-text>
+                            <ul class="text-body-2">
+                              <li>قالب‌های شخصی شما</li>
+                              <li>امکان ویرایش و حذف</li>
+                              <li>تنها شما به آن‌ها دسترسی دارید</li>
+                              <li>برای استفاده در کسب‌وکار خود</li>
+                            </ul>
+                          </v-card-text>
+                        </v-card>
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-card variant="outlined" class="mb-3">
+                          <v-card-title class="text-subtitle-1">قالب‌های عمومی</v-card-title>
+                          <v-card-text>
+                            <ul class="text-body-2">
+                              <li>قالب‌های اشتراک‌گذاری شده</li>
+                              <li>امکان کپی و ویرایش</li>
+                              <li>دسترسی برای همه کاربران</li>
+                              <li>نمایش تعداد کپی‌ها</li>
+                            </ul>
+                          </v-card-text>
+                        </v-card>
+                      </v-col>
+                    </v-row>
+
+                    <v-alert type="warning" variant="tonal" class="mt-4">
+                      <template #prepend>
+                        <v-icon icon="mdi-alert"></v-icon>
+                      </template>
+                      <div>
+                        <strong>توجه:</strong> قبل از حذف قالب، مطمئن شوید که در هیچ سندی استفاده نمی‌شود.
+                      </div>
+                    </v-alert>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </div>
+
+            <!-- Data Table (only show for business and public tabs) -->
+            <div v-else>
+
             <v-data-table-server
               v-model:items-per-page="serverOptions.rowsPerPage"
               v-model:page="serverOptions.page"
@@ -134,6 +390,7 @@
               </template>
             </v-data-table-server>
           </div>
+        </div>
         </v-card-text>
       </v-card>
 
@@ -175,6 +432,7 @@ const searchValue = ref('')
 const items = ref([])
 const totalItems = ref(0)
 const activeTab = ref('business') // business | public
+const stepperStep = ref(1)
 
 const serverOptions = ref({
   page: 1,
@@ -213,6 +471,22 @@ const openMessage = (title, text) => {
   showMessageDialog.value = true
 }
 
+const nextStep = () => {
+  if (stepperStep.value < 3) {
+    stepperStep.value = stepperStep.value + 1
+  }
+}
+
+const prevStep = () => {
+  if (stepperStep.value > 1) {
+    stepperStep.value = stepperStep.value - 1
+  }
+}
+
+const resetStepper = () => {
+  stepperStep.value = 1
+}
+
 const fetchData = async () => {
   if (debounceTimer) clearTimeout(debounceTimer)
   debounceTimer = window.setTimeout(async () => {
@@ -249,6 +523,9 @@ const clearSearch = () => { searchValue.value = '' }
 watch(searchValue, fetchData)
 watch(serverOptions, fetchData, { deep: true })
 watch(activeTab, () => {
+  if (activeTab.value === 'help') {
+    return // Don't fetch data for help tab
+  }
   serverOptions.value.page = 1
   // default sort for public tab: by copyCount desc
   if (activeTab.value === 'public') {
@@ -260,7 +537,9 @@ watch(activeTab, () => {
 })
 
 onMounted(() => {
-  fetchData()
+  if (activeTab.value !== 'help') {
+    fetchData()
+  }
 })
 
 const showRowActions = (item) => {
@@ -331,4 +610,4 @@ const confirmDelete = async () => {
 .custom-table tbody tr:nth-child(odd) {
   background-color: #fafafa;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file