diff --git a/web/html/login.html b/web/html/login.html
index fc48b9ec..b27333a5 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -473,8 +473,8 @@
     </transition>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
-{{template "component/password" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPasswordInput" .}}
 <script>
   class User {
     constructor() {
diff --git a/web/html/xui/component/password.html b/web/html/xui/component/aPasswordInput.html
similarity index 96%
rename from web/html/xui/component/password.html
rename to web/html/xui/component/aPasswordInput.html
index 0fea1430..460e7e76 100644
--- a/web/html/xui/component/password.html
+++ b/web/html/xui/component/aPasswordInput.html
@@ -12,7 +12,7 @@
 </template>
 {{end}}
 
-{{define "component/password"}}
+{{define "component/aPasswordInput"}}
 <script>
   Vue.component('a-password-input', {
     props: {
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/aPersianDatepicker.html
similarity index 97%
rename from web/html/xui/component/persianDatepicker.html
rename to web/html/xui/component/aPersianDatepicker.html
index 2df79a06..58132ddd 100644
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/aPersianDatepicker.html
@@ -12,7 +12,7 @@
 </template>
 {{end}}
 
-{{define "component/persianDatepicker"}}
+{{define "component/aPersianDatepicker"}}
 <link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
 <script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/aSettingListItem.html
similarity index 97%
rename from web/html/xui/component/setting.html
rename to web/html/xui/component/aSettingListItem.html
index 85220d25..bcba88fd 100644
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/aSettingListItem.html
@@ -18,7 +18,7 @@
 </a-list-item>
 {{end}}
 
-{{define "component/setting"}}
+{{define "component/aSettingListItem"}}
 <script>
     Vue.component('a-setting-list-item', {
         props: {
diff --git a/web/html/xui/component/sortableTable.html b/web/html/xui/component/aTableSortable.html
similarity index 99%
rename from web/html/xui/component/sortableTable.html
rename to web/html/xui/component/aTableSortable.html
index 67bbcee2..7dbc3d0a 100644
--- a/web/html/xui/component/sortableTable.html
+++ b/web/html/xui/component/aTableSortable.html
@@ -3,7 +3,7 @@
   @click="clickHandler" />
 {{end}}
 
-{{define "component/sortableTable"}}
+{{define "component/aTableSortable"}}
 <script>
   const DRAGGABLE_ROW_CLASS = 'draggable-row';
   const findParentRowElement = (el) => {
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/aThemeSwitch.html
similarity index 99%
rename from web/html/xui/component/themeSwitch.html
rename to web/html/xui/component/aThemeSwitch.html
index 2b3ab536..9a213ca6 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/aThemeSwitch.html
@@ -36,7 +36,7 @@
 </template>
 {{end}}
 
-{{define "component/themeSwitcher"}}
+{{define "component/aThemeSwitch"}}
 <script>
   function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index c8cf93d3..d8b3c40a 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -548,8 +548,8 @@
 <script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
-{{template "component/themeSwitcher" .}}
-{{template "component/persianDatepicker" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPersianDatepicker" .}}
 <script>
     const columns = [{
         title: "ID",
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index bd7d3878..015fde44 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -397,7 +397,7 @@
     </a-modal>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
+{{template "component/aThemeSwitch" .}}
 {{template "textModal"}}
 <script>
     const State = {
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 7ccada90..febb26e8 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -663,9 +663,9 @@
   </a-layout>
 {{template "js" .}}
 <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
-{{template "component/themeSwitcher" .}}
-{{template "component/password" .}}
-{{template "component/setting"}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPasswordInput" .}}
+{{template "component/aSettingListItem" .}}
 <script>
   const app = new Vue({
     delimiters: ['[[', ']]'],
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index 99f5f990..8ba14f7d 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -788,9 +788,9 @@
     </a-layout>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
-{{template "component/sortableTable" .}}
-{{template "component/setting"}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aTableSortable" .}}
+{{template "component/aSettingListItem" .}}
 {{template "ruleModal"}}
 {{template "outModal"}}
 {{template "reverseModal"}}