diff --git a/frontend/components/cart/checkout/Gateway.vue b/frontend/components/cart/checkout/Gateway.vue
index 3785b6a..d4a43e8 100644
--- a/frontend/components/cart/checkout/Gateway.vue
+++ b/frontend/components/cart/checkout/Gateway.vue
@@ -45,7 +45,7 @@ const emit = defineEmits<Emits>();
                 class="bg-blue-500 rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
             >
                 <Icon
-                    name="bi:check"
+                    name="ci:bi-check"
                     size="20"
                     class="**:fill-white"
                 />
diff --git a/frontend/components/cart/delivery/AddressItem.vue b/frontend/components/cart/delivery/AddressItem.vue
index 8f28869..99d136c 100644
--- a/frontend/components/cart/delivery/AddressItem.vue
+++ b/frontend/components/cart/delivery/AddressItem.vue
@@ -127,7 +127,7 @@ const handleDeleteAddress = (id: number) => {
                 class="size-8 bg-slate-200/50 rounded-sm flex-center me-2 opacity-0 group-hover:opacity-100 transition-opacity"
             >
                 <Icon
-                    name="bi:trash"
+                    name="ci:bi-trash"
                     class="**:fill-red-500"
                 />
             </button>
diff --git a/frontend/components/cart/delivery/AddressModal.vue b/frontend/components/cart/delivery/AddressModal.vue
index d82b942..e3c1d75 100644
--- a/frontend/components/cart/delivery/AddressModal.vue
+++ b/frontend/components/cart/delivery/AddressModal.vue
@@ -150,14 +150,14 @@ watch(
     <Modal
         v-model="isShow"
         :title="!!address ? 'ویرایش آدرس' : 'افزودن آدرس'"
-        :icon="!!address ? 'bi:pen' : 'ci:plus'"
+        :icon="!!address ? 'ci:bi-pen' : 'ci:plus'"
         :iconSize="!!address ? '20' : '32'"
         contectClass="w-full max-lg:container lg:!w-[70vw]"
         @close="closeModal"
     >
         <template #trigger>
             <Button
-                :end-icon="!!address ? 'bi:pen' : 'ci:plus'"
+                :end-icon="!!address ? 'ci:bi-pen' : 'ci:plus'"
                 size="md"
                 class="rounded-full transition-all"
                 :variant="!!address ? 'ghost' : 'solid'"
diff --git a/frontend/components/cart/global/OrderSummary.vue b/frontend/components/cart/global/OrderSummary.vue
index 2c565c3..03f014e 100644
--- a/frontend/components/cart/global/OrderSummary.vue
+++ b/frontend/components/cart/global/OrderSummary.vue
@@ -49,7 +49,7 @@ const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
                     >
                         <span class="text-sm text-black"> مشاهده بیشتر </span>
                         <Icon
-                            name="bi:chevron-down"
+                            name="ci:bi-chevron-down"
                             class="**:stroke-black"
                         />
                     </button>
diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index 7e8c29c..ba8451a 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -196,7 +196,7 @@ watch(
                             :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                         >
                             <Icon
-                                name="bi:plus"
+                                name="ci:bi-plus"
                                 class="**:stroke-slate-800"
                             />
                         </button>
@@ -225,12 +225,12 @@ watch(
                         >
                             <Icon
                                 v-if="counter == 1"
-                                :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
+                                :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-trash'"
                                 class="**:fill-red-700"
                             />
                             <Icon
                                 v-else
-                                name="bi:dash"
+                                name="ci:bi-dash"
                                 class="**:stroke-slate-800"
                             />
                         </button>
@@ -262,7 +262,7 @@ watch(
                     :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                 >
                     <Icon
-                        name="bi:plus"
+                        name="ci:bi-plus"
                         class="**:stroke-slate-800"
                     />
                 </button>
@@ -291,12 +291,12 @@ watch(
                 >
                     <Icon
                         v-if="counter == 1"
-                        :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
+                        :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-trash'"
                         class="**:fill-red-700"
                     />
                     <Icon
                         v-else
-                        name="bi:dash"
+                        name="ci:bi-dash"
                         class="**:stroke-slate-800"
                     />
                 </button>
diff --git a/frontend/components/cart/index/DeleteCartAllModal.vue b/frontend/components/cart/index/DeleteCartAllModal.vue
index 188e99c..6609c1d 100644
--- a/frontend/components/cart/index/DeleteCartAllModal.vue
+++ b/frontend/components/cart/index/DeleteCartAllModal.vue
@@ -48,14 +48,14 @@ const handleSubmit = () => {
     <Modal
         v-model="isShow"
         title="حذف اقلام"
-        icon="bi:trash"
+        icon="ci:bi-trash"
         contectClass="!w-[90vw] lg:!w-[35vw]"
         @close="isShow = false"
     >
         <template #trigger>
             <Button
                 class="rounded-full shrink-0 whitespace-pre"
-                end-icon="bi:trash"
+                end-icon="ci:bi-trash"
                 size="md"
             >
                 حذف همه
diff --git a/frontend/components/global/FileInput.vue b/frontend/components/global/FileInput.vue
index 8bd93e3..6e327d9 100644
--- a/frontend/components/global/FileInput.vue
+++ b/frontend/components/global/FileInput.vue
@@ -122,7 +122,7 @@ const removeAttachment = (id: number) => {
                 :name="
                     loading
                         ? 'svg-spinners:ring-resize'
-                        : 'bi:file-earmark-arrow-down'
+                        : 'ci:bi-file-earmark-arrow-down'
                 "
                 size="32"
                 :class="loading ? '' : ''"
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 707273d..f0f9bf1 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -60,7 +60,7 @@ const megaMenuCategories = computed(() => {
                 @click="isSideDrawerOpen = true"
             >
                 <Icon
-                    name="humbleicons:bars"
+                    name="ci:humbleicons-bars"
                     size="28"
                 />
             </button>
diff --git a/frontend/components/global/Modal.vue b/frontend/components/global/Modal.vue
index 68fd874..793eea1 100644
--- a/frontend/components/global/Modal.vue
+++ b/frontend/components/global/Modal.vue
@@ -72,7 +72,7 @@ const isShow = computed({
                                     aria-label="Close"
                                 >
                                     <Icon
-                                        name="bi:x-lg"
+                                        name="ci:bi-x-lg"
                                         class="**:fill-black"
                                     />
                                 </DialogClose>
diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index ba04d08..9d6d7f8 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -43,7 +43,7 @@ const { isMobile } = useRatio();
                 class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="bi:chevron-double-right"
+                    name="ci:bi-chevron-double-right"
                     class="**:fill-back"
                     size="18px"
                 />
@@ -53,7 +53,7 @@ const { isMobile } = useRatio();
                 class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="bi:chevron-right"
+                    name="ci:bi-chevron-right"
                     class="**:fill-back"
                     size="18px"
                 />
@@ -82,7 +82,7 @@ const { isMobile } = useRatio();
                 class="w-9 h-9 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     class="**:fill-back"
                     size="18px"
                 />
@@ -92,7 +92,7 @@ const { isMobile } = useRatio();
                 class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="bi:chevron-double-left"
+                    name="ci:bi-chevron-double-left"
                     class="**:fill-back"
                     size="18px"
                 />
diff --git a/frontend/components/global/Select.vue b/frontend/components/global/Select.vue
index b73afad..6343d81 100644
--- a/frontend/components/global/Select.vue
+++ b/frontend/components/global/Select.vue
@@ -72,7 +72,7 @@ const classes = computed(() => {
                 class="font-iran-yekan-x text-xs lg:text-sm text-start placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm"
             />
             <Icon
-                :name="loading ? 'svg-spinners:3-dots-fade' : 'bi:chevron-down'"
+                :name="loading ? 'svg-spinners:3-dots-fade' : 'ci:bi-chevron-down'"
                 size="16"
             />
         </SelectTrigger>
@@ -100,7 +100,7 @@ const classes = computed(() => {
                                 class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                             >
                                 <Icon
-                                    name="bi:check"
+                                    name="ci:bi-check"
                                     size="20"
                                 />
                             </SelectItemIndicator>
diff --git a/frontend/components/global/SideDrawer.vue b/frontend/components/global/SideDrawer.vue
index 9f841a2..62dd768 100644
--- a/frontend/components/global/SideDrawer.vue
+++ b/frontend/components/global/SideDrawer.vue
@@ -78,7 +78,7 @@ watch(
                     <span class="text-xs"> {{ account.first_name }} {{ account.last_name }} </span>
                 </div>
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     size="12"
                     class="**:stroke-black/50 opacity-70"
                 />
@@ -105,7 +105,7 @@ watch(
                     <span class="text-xs"> ورود به حساب </span>
                 </div>
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     size="12"
                     class="**:stroke-black/50 opacity-70"
                 />
@@ -127,7 +127,7 @@ watch(
                     <span class="text-xs"> جست و جو </span>
                 </div>
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     size="12"
                     class="**:stroke-black/50 opacity-70"
                 />
@@ -146,7 +146,7 @@ watch(
                     <span class="text-xs"> سبد خرید </span>
                 </div>
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     size="12"
                     class="**:stroke-black/50 opacity-70"
                 />
@@ -176,7 +176,7 @@ watch(
                     <span class="text-xs"> {{ link.title }}</span>
                 </div>
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     size="12"
                     class="**:stroke-black/50 opacity-70"
                 />
diff --git a/frontend/components/global/UserDropdown.vue b/frontend/components/global/UserDropdown.vue
index 592b000..886d60a 100644
--- a/frontend/components/global/UserDropdown.vue
+++ b/frontend/components/global/UserDropdown.vue
@@ -24,7 +24,7 @@ const profileDropdownItems = ref<DropdownItem[]>([
     },
     {
         title: "خروج از حساب",
-        icon: "bi:arrow-bar-left",
+        icon: "ci:bi-arrow-bar-left",
         itemClass: "!text-red-500",
         iconClass: "**:stroke-red-500 **:fill-transparent",
         onClick: () => {
@@ -99,7 +99,7 @@ const { data: account } = useGetAccount();
                         class="aspect-square rounded-sm size-7 flex-center"
                     >
                         <Icon
-                            name="bi:pencil"
+                            name="ci:bi-pencil"
                             class="**:fill-black"
                             size="14"
                         />
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index d0037c5..181c891 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -243,7 +243,7 @@ onUnmounted(() => {
                                                     class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
                                                 >
                                                     <Icon
-                                                        :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
+                                                        :name="isMuted ? 'ci:bi-volume-mute-fill' : 'ci:bi-volume-up-fill'"
                                                         class="text-black size-4 md:size-[18px] lg:size-[24px]"
                                                     />
                                                 </button>
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index eca8ba7..cc321d5 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -116,7 +116,7 @@ const limitedComments = computed(() => {
                         variant="primary"
                         @click="showMoreComments = !showMoreComments"
                         class="rounded-full px-8"
-                        end-icon="bi:plus"
+                        end-icon="ci:bi-plus"
                     >
                         نمایش همه
                     </Button>
diff --git a/frontend/components/product/ProductHero/index.vue b/frontend/components/product/ProductHero/index.vue
index 1dea7e3..944a973 100644
--- a/frontend/components/product/ProductHero/index.vue
+++ b/frontend/components/product/ProductHero/index.vue
@@ -99,7 +99,7 @@ watch(
                     <Icon
                         v-else
                         :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
-                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'bi:bookmark'"
+                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
                     />
                 </button>
             </div>
@@ -165,7 +165,7 @@ watch(
                     <Icon
                         v-else
                         :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
-                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'bi:bookmark'"
+                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
                     />
                 </button>
             </div>
@@ -322,7 +322,7 @@ watch(
                         <Button
                             variant="secondary"
                             class="w-full rounded-full h-full max-sm:h-[48px]"
-                            end-icon="bi:percent"
+                            end-icon="ci:bi-percent"
                         >
                             {{ selectedVariant?.special_discount_amount }}
                             تخفیف بگیر
@@ -331,7 +331,7 @@ watch(
                     <!-- <Button
                         variant="secondary"
                         class="w-full rounded-full h-full max-sm:h-[48px]"
-                        end-icon="bi:person-check"
+                        end-icon="ci:bi-person-check"
                     >
                         پورسانت بگیر
                     </Button> -->
diff --git a/frontend/components/product/ProductVariant.vue b/frontend/components/product/ProductVariant.vue
index 8a0cdfa..ef05a49 100644
--- a/frontend/components/product/ProductVariant.vue
+++ b/frontend/components/product/ProductVariant.vue
@@ -32,7 +32,7 @@ defineProps<Props>();
                     class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
                 >
                     <Icon
-                        name="bi:percent"
+                        name="ci:bi-percent"
                         class="size-3.5"
                     />
                     <span class="mt-px">
diff --git a/frontend/components/products/FilterProducts.vue b/frontend/components/products/FilterProducts.vue
index 7afaf37..f40a1fa 100644
--- a/frontend/components/products/FilterProducts.vue
+++ b/frontend/components/products/FilterProducts.vue
@@ -17,7 +17,7 @@ const isSideShow = useState("side-modal-product-filters");
 
 const currentCategory = computed({
     get: () => {
-        return Array.isArray(slug.value) ? slug.value[1] ?? undefined : undefined;
+        return Array.isArray(slug.value) ? (slug.value[1] ?? undefined) : undefined;
     },
     set: (newValue) => {
         isSideShow.value = false;
@@ -79,7 +79,7 @@ watch(
     (newValue) => {
         price_gte.value = newValue[0];
         price_lte.value = newValue[1];
-    }
+    },
 );
 </script>
 
@@ -219,7 +219,7 @@ watch(
                         v-else
                         class="flex-center gap-3 text-sm"
                     >
-                        بازنشانی به پیش‌ فرض
+                        بازنشانی فیلتر ها
                         <Icon
                             name="ci:close"
                             size="20"
diff --git a/frontend/components/profile/global/LogoutModal.vue b/frontend/components/profile/global/LogoutModal.vue
index fdbd1b9..b2e885f 100644
--- a/frontend/components/profile/global/LogoutModal.vue
+++ b/frontend/components/profile/global/LogoutModal.vue
@@ -43,7 +43,7 @@ const handleSubmit = () => {
     <Modal
         v-model="isShow"
         title="خروج از حساب"
-        icon="bi:arrow-bar-right"
+        icon="ci:bi-arrow-bar-right"
         contectClass="!w-[90vw] lg:!w-[35vw]"
         @close="isShow = false"
     >
diff --git a/frontend/components/profile/global/ProfilePageTitle.vue b/frontend/components/profile/global/ProfilePageTitle.vue
index f323bab..5757a1d 100644
--- a/frontend/components/profile/global/ProfilePageTitle.vue
+++ b/frontend/components/profile/global/ProfilePageTitle.vue
@@ -21,7 +21,7 @@ const toggleSidebar = inject("toggleSidebar");
     >
         <div class="flex items-center w-full gap-3 lg:w-1/2">
             <button class="flex-center lg:hidden" @click="toggleSidebar">
-                <Icon name="bi:chevron-right" size="18" class="**:fill-black" />
+                <Icon name="ci:bi-chevron-right" size="18" class="**:fill-black" />
             </button>
             <p class="font-semibold text-sm lg:text-lg text-black">
                 {{ title }}
diff --git a/frontend/components/profile/global/ProfileSidebar.vue b/frontend/components/profile/global/ProfileSidebar.vue
index d4dc757..c455cb5 100644
--- a/frontend/components/profile/global/ProfileSidebar.vue
+++ b/frontend/components/profile/global/ProfileSidebar.vue
@@ -19,35 +19,35 @@ const route = useRoute();
 
 const profileLinks = ref([
     {
-        icon: "bi:person-vcard",
+        icon: "ci:bi-person-vcard",
         title: "پروفایل",
         path: { name: "profile" },
     },
     {
-        icon: "bi:map",
+        icon: "ci:bi-map",
         title: "آدرس ها",
         path: { name: "profile-addresses" },
     },
     {
-        icon: "bi:cart",
+        icon: "ci:bi-cart",
         title: "خرید ها و سفارش ها",
         path: { name: "profile-purchases-and-orders" },
         matchPattern: /^profile-purchases-and-orders/,
     },
     {
-        icon: "bi:bookmark",
+        icon: "ci:bi-bookmark",
         title: "علاقه‌مندی ها",
         path: { name: "profile-saved-products" },
         matchPattern: /^profile-saved-products/,
     },
     {
-        icon: "bi:ticket",
+        icon: "ci:bi-ticket",
         title: "تیکت ها",
         path: { name: "profile-tickets" },
         matchPattern: /^profile-ticket/,
     },
     {
-        icon: "bi:bell",
+        icon: "ci:bi-bell",
         title: "اعلانات",
         path: { name: "profile-notifications" },
     },
@@ -127,7 +127,7 @@ const toggleSidebar = inject("toggleSidebar");
                 </span>
 
                 <Icon
-                    name="bi:chevron-left"
+                    name="ci:bi-chevron-left"
                     class="transition-all"
                 />
             </NuxtLink>
@@ -140,7 +140,7 @@ const toggleSidebar = inject("toggleSidebar");
                         <span class="flex-center gap-3">
                             <div class="size-5 flex-center">
                                 <Icon
-                                    name="bi:arrow-bar-right"
+                                    name="ci:bi-arrow-bar-right"
                                     class="**:fill-danger-500"
                                 />
                             </div>
@@ -148,7 +148,7 @@ const toggleSidebar = inject("toggleSidebar");
                         </span>
 
                         <Icon
-                            name="bi:chevron-left"
+                            name="ci:bi-chevron-left"
                             class="transition-all **:fill-danger-500"
                         />
                     </button>
diff --git a/frontend/components/profile/index/ProfilePictureModal.vue b/frontend/components/profile/index/ProfilePictureModal.vue
index 48eed3b..dba0a67 100644
--- a/frontend/components/profile/index/ProfilePictureModal.vue
+++ b/frontend/components/profile/index/ProfilePictureModal.vue
@@ -95,14 +95,14 @@ const resetAvatarFile = async () => {
     <Modal
         v-model="visible"
         title="عکس پروفایل"
-        icon="bi:image"
+        icon="ci:bi-image"
         iconSize="20"
         contectClass="w-full max-lg:container lg:!w-[30vw]"
     >
         <template #trigger>
             <button class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0">
                 <Icon
-                    name="bi:pencil"
+                    name="ci:bi-pencil"
                     class="**:fill-slate-100"
                     size="12"
                 />
@@ -158,7 +158,7 @@ const resetAvatarFile = async () => {
                         >
                             <Icon
                                 v-if="updateAccountIsPending"
-                                name="bi:trash"
+                                name="ci:bi-trash"
                             />
                             <span v-else>حذف عکس</span>
                         </Button>
diff --git a/frontend/components/profile/notifications/notification.vue b/frontend/components/profile/notifications/notification.vue
index f8a6a0a..f6fb024 100644
--- a/frontend/components/profile/notifications/notification.vue
+++ b/frontend/components/profile/notifications/notification.vue
@@ -23,7 +23,7 @@ const { formatToPersian } = usePersianDate();
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-3">
                 <Icon
-                    :name="data.notif_type == 'NEWS' ? 'bi:info-circle' : 'bi:bell'"
+                    :name="data.notif_type == 'NEWS' ? 'ci:bi-info-circle' : 'ci:bi-bell'"
                     class="lg:text-lg"
                 />
                 <h3 class="max-lg:text-sm font-semibold">{{ data.title }}</h3>
diff --git a/frontend/components/profile/tickets/[id]/Attachment.vue b/frontend/components/profile/tickets/[id]/Attachment.vue
index f30b7fa..c5e147c 100644
--- a/frontend/components/profile/tickets/[id]/Attachment.vue
+++ b/frontend/components/profile/tickets/[id]/Attachment.vue
@@ -19,7 +19,7 @@ defineProps<Props>();
         class="w-full flex items-center cursor-pointer p-2 gap-2 rounded-100 bg-slate-100 border border-slate-300"
     >
         <div class="size-10 flex-center border border-slate-300 rounded-md">
-            <Icon name="bi:pin-angle" class="**:fill-black" size="20" />
+            <Icon name="ci:bi-pin-angle" class="**:fill-black" size="20" />
         </div>
         <div class="flex flex-col gap-1">
             <span class="text-sm line-clamp-1">
diff --git a/frontend/components/resellers/FilterResellersProducts.vue b/frontend/components/resellers/FilterResellersProducts.vue
index 24ee557..e7f5d15 100644
--- a/frontend/components/resellers/FilterResellersProducts.vue
+++ b/frontend/components/resellers/FilterResellersProducts.vue
@@ -17,7 +17,7 @@ const isSideShow = useState("side-modal-resellers-product-filters");
 
 const currentCategory = computed({
     get: () => {
-        return Array.isArray(slug.value) ? slug.value[1] ?? undefined : undefined;
+        return Array.isArray(slug.value) ? (slug.value[1] ?? undefined) : undefined;
     },
     set: (newValue) => {
         isSideShow.value = false;
@@ -69,7 +69,7 @@ watch(
     (newValue) => {
         price_gte.value = newValue[0];
         price_lte.value = newValue[1];
-    }
+    },
 );
 </script>
 
@@ -210,7 +210,7 @@ watch(
                         v-else
                         class="flex-center gap-3 text-sm"
                     >
-                        بازنشانی به پیش‌ فرض
+                        بازنشانی فیلتر ها
                         <Icon
                             name="ci:close"
                             size="20"
diff --git a/frontend/layouts/Cart.vue b/frontend/layouts/Cart.vue
index ed517f2..dcdedbb 100644
--- a/frontend/layouts/Cart.vue
+++ b/frontend/layouts/Cart.vue
@@ -40,7 +40,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
                             class="flex items-center gap-2 text-sm lg:text-[1rem] font-medium"
                         >
                             <Icon
-                                name="bi:arrow-right"
+                                name="ci:bi-arrow-right"
                                 class="**:stroke-blue-500"
                             />
                             <span class="text-blue-500">
diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
index b092a64..00e15bd 100644
--- a/frontend/pages/cart/delivery.vue
+++ b/frontend/pages/cart/delivery.vue
@@ -84,7 +84,7 @@ const deliveryData = ref<DeliveryData>({
                 >
                     <Placeholder
                         title="آدرسی یافت نشد :("
-                        icon="bi:map"
+                        icon="ci:bi-map"
                         class="!py-[2rem]"
                     />
                 </div>
diff --git a/frontend/pages/cart/index.vue b/frontend/pages/cart/index.vue
index f0e7dc7..d236761 100644
--- a/frontend/pages/cart/index.vue
+++ b/frontend/pages/cart/index.vue
@@ -78,7 +78,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
             >
                 <Placeholder
                     title="سبد خرید شما خالی است :("
-                    icon="bi:cart"
+                    icon="ci:bi-cart"
                 >
                     <template #actions>
                         <NuxtLink :to="{ name: 'products-slug' }">
diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
index ea299d6..94bd103 100644
--- a/frontend/pages/category.vue
+++ b/frontend/pages/category.vue
@@ -114,7 +114,7 @@ if (response.isError) {
                     class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                 >
                     <Icon
-                        name="bi:search"
+                        name="ci:bi-search"
                         class="**:fill-gray-500 size-[40px] sm:size-[50px]"
                     />
                     <span class="text-lg text-gray-500"> دسته بندی یافت نشد :( </span>
diff --git a/frontend/pages/products/[...slug].vue b/frontend/pages/products/[...slug].vue
index d1f85e2..533eec1 100644
--- a/frontend/pages/products/[...slug].vue
+++ b/frontend/pages/products/[...slug].vue
@@ -110,7 +110,7 @@ useSeoMeta({
             >
                 <Placeholder
                     title="محصولی یافت نشد :("
-                    icon="bi:search"
+                    icon="ci:bi-search"
                 />
             </div>
             <ProductsGrid
diff --git a/frontend/pages/profile/addresses.vue b/frontend/pages/profile/addresses.vue
index 46d6c70..f0fc793 100644
--- a/frontend/pages/profile/addresses.vue
+++ b/frontend/pages/profile/addresses.vue
@@ -33,7 +33,7 @@ const handleSelectAddress = (address: Address) => {
 
 <template>
     <div class="w-full flex flex-col gap-5">
-        <ProfilePageTitle title="آدرس های شما" icon="bi:map" />
+        <ProfilePageTitle title="آدرس های شما" icon="ci:bi-map" />
 
         <ProfileSection title="همه">
             <template #button>
@@ -57,7 +57,7 @@ const handleSelectAddress = (address: Address) => {
                 <div v-if="!addresses?.length" class="flex flex-grow w-full">
                     <Placeholder
                         title="آدرسی یافت نشد :("
-                        icon="bi:map"
+                        icon="ci:bi-map"
                         class="!py-[4rem] !border-none"
                     />
                 </div>
diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index 4ac2035..59fdc4a 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -120,7 +120,7 @@ const handleSubmit = (withValidation: boolean) => {
     <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="پروفایل"
-            icon="bi:person-vcard"
+            icon="ci:bi-person-vcard"
             @back="toggleSidebar"
         />
 
@@ -157,7 +157,7 @@ const handleSubmit = (withValidation: boolean) => {
                         <div class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full">
                             <div class="rounded-full p-1.5 lg:p-2">
                                 <Icon
-                                    name="bi:patch-check"
+                                    name="ci:bi-patch-check"
                                     class="**:fill-yellow-400"
                                     size="20"
                                 />
@@ -260,7 +260,7 @@ const handleSubmit = (withValidation: boolean) => {
 
                 <div class="w-full flex items-start justify-start gap-2 mt-5 px-2">
                     <Icon
-                        name="bi:info-circle-fill"
+                        name="ci:bi-info-circle-fill"
                         class="**:fill-slate-400 mt-0.5"
                     />
                     <p class="text-slate-400 text-[13px] font-medium">
diff --git a/frontend/pages/profile/notifications.vue b/frontend/pages/profile/notifications.vue
index 4e39860..4003854 100644
--- a/frontend/pages/profile/notifications.vue
+++ b/frontend/pages/profile/notifications.vue
@@ -90,7 +90,7 @@ watch(
     <section class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="اعلان های شما"
-            icon="bi:bell"
+            icon="ci:bi-bell"
         />
 
         <div
@@ -99,7 +99,7 @@ watch(
         >
             <div class="flex items-start justify-start gap-3">
                 <Icon
-                    name="bi:bell"
+                    name="ci:bi-bell"
                     size="20"
                 />
                 <div class="flex flex-col gap-1 pb-0.5">
@@ -143,7 +143,7 @@ watch(
                                         class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                     >
                                         <Icon
-                                            name="bi:check"
+                                            name="ci:bi-check"
                                             size="20"
                                         />
                                     </SelectItemIndicator>
@@ -176,7 +176,7 @@ watch(
                                         class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                     >
                                         <Icon
-                                            name="bi:check"
+                                            name="ci:bi-check"
                                             size="20"
                                         />
                                     </SelectItemIndicator>
@@ -209,7 +209,7 @@ watch(
             >
                 <Placeholder
                     class="!w-full !py-[5rem]"
-                    icon="bi:ticket"
+                    icon="ci:bi-ticket"
                     title="اعلانی یافت نشد"
                 />
             </div>
diff --git a/frontend/pages/profile/purchases-and-orders/index.vue b/frontend/pages/profile/purchases-and-orders/index.vue
index 5e25cba..f70a7dd 100644
--- a/frontend/pages/profile/purchases-and-orders/index.vue
+++ b/frontend/pages/profile/purchases-and-orders/index.vue
@@ -103,7 +103,7 @@ const clearFilters = () => {
     <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="خرید ها و سفارش های شما"
-            icon="bi:cart"
+            icon="ci:bi-cart"
         />
 
         <div class="w-full flex flex-col gap-5">
@@ -130,7 +130,7 @@ const clearFilters = () => {
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
                                             <Icon
-                                                name="bi:check"
+                                                name="ci:bi-check"
                                                 size="20"
                                             />
                                         </SelectItemIndicator>
@@ -163,7 +163,7 @@ const clearFilters = () => {
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
                                             <Icon
-                                                name="bi:check"
+                                                name="ci:bi-check"
                                                 size="20"
                                             />
                                         </SelectItemIndicator>
@@ -183,7 +183,7 @@ const clearFilters = () => {
                 >
                     <Button
                         v-if="hasFilters"
-                        end-icon="bi:x"
+                        end-icon="ci:bi-x"
                         @click="clearFilters"
                         size="md"
                         class="rounded-full"
@@ -193,7 +193,7 @@ const clearFilters = () => {
 
                     <NuxtLink to="/products">
                         <Button
-                            end-icon="bi:plus"
+                            end-icon="ci:bi-plus"
                             size="md"
                             class="rounded-full"
                         >
@@ -206,7 +206,7 @@ const clearFilters = () => {
             <Placeholder
                 v-if="!hasPurchases && !purchasesIsPending"
                 class="!w-full !py-[5rem]"
-                icon="bi:cart"
+                icon="ci:bi-cart"
                 title="خرید یا سفارشی یافت نشد"
             />
 
diff --git a/frontend/pages/profile/saved-products/index.vue b/frontend/pages/profile/saved-products/index.vue
index b48076b..43f5c95 100644
--- a/frontend/pages/profile/saved-products/index.vue
+++ b/frontend/pages/profile/saved-products/index.vue
@@ -35,7 +35,7 @@ const paginationData = computed(() => {
     <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="علاقه‌مندی های شما"
-            icon="bi:bookmark"
+            icon="ci:bi-bookmark"
         />
 
         <ProfileSection :title="`${paginationData?.length} محصول`">
@@ -83,7 +83,7 @@ const paginationData = computed(() => {
                     >
                         <Placeholder
                             title="محصولی یافت نشد :("
-                            icon="bi:search"
+                            icon="ci:bi-search"
                         />
                     </div>
                     <ProductsGrid
diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 0534a70..67a85ed 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -160,7 +160,7 @@ const handleSubmit = async () => {
 
 <template>
     <div class="w-full flex flex-col gap-5">
-        <ProfilePageTitle :title="`تیکت شماره ${ticketId}`" icon="bi:ticket" />
+        <ProfilePageTitle :title="`تیکت شماره ${ticketId}`" icon="ci:bi-ticket" />
 
         <div
             class="flex flex-wrap items-center justify-between w-full py-4 border-b lg:px-5 border-slate-200"
@@ -220,7 +220,7 @@ const handleSubmit = async () => {
                         <Button
                             class="rounded-full"
                             size="md"
-                            end-icon="bi:arrow-left"
+                            end-icon="ci:bi-arrow-left"
                         >
                             بازگشت به تیکت ها
                         </Button>
@@ -304,7 +304,7 @@ const handleSubmit = async () => {
                         :name="
                             createMessageIsPending
                                 ? 'svg-spinners:3-dots-bounce'
-                                : 'bi:send'
+                                : 'ci:bi-send'
                         "
                     />
                     <span v-else>ارسال پیام</span>
diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 4175093..faa7721 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -85,7 +85,7 @@ const clearFilters = () => {
     <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="تیکت های شما"
-            icon="bi:ticket"
+            icon="ci:bi-ticket"
         />
 
         <div class="w-full flex flex-col gap-5">
@@ -112,7 +112,7 @@ const clearFilters = () => {
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
                                             <Icon
-                                                name="bi:check"
+                                                name="ci:bi-check"
                                                 size="20"
                                             />
                                         </SelectItemIndicator>
@@ -145,7 +145,7 @@ const clearFilters = () => {
                                             class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                         >
                                             <Icon
-                                                name="bi:check"
+                                                name="ci:bi-check"
                                                 size="20"
                                             />
                                         </SelectItemIndicator>
@@ -165,7 +165,7 @@ const clearFilters = () => {
                 >
                     <Button
                         v-if="hasFilters"
-                        end-icon="bi:x"
+                        end-icon="ci:bi-x"
                         @click="clearFilters"
                         size="md"
                         class="rounded-full"
@@ -175,7 +175,7 @@ const clearFilters = () => {
 
                     <NuxtLink :to="{ name: 'profile-tickets-new' }">
                         <Button
-                            end-icon="bi:plus"
+                            end-icon="ci:bi-plus"
                             size="md"
                             class="rounded-full"
                         >
@@ -188,7 +188,7 @@ const clearFilters = () => {
             <Placeholder
                 v-if="!hasTickets && !ticketsIsPending"
                 class="!w-full !py-[5rem]"
-                icon="bi:ticket"
+                icon="ci:bi-ticket"
                 title="تیکتی یافت نشد"
             />
 
diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index 58d4630..70eb938 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -171,7 +171,7 @@ const handleSubmit = async () => {
     <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle
             title="تیکت جدید"
-            icon="bi:ticket"
+            icon="ci:bi-ticket"
         />
 
         <ProfileSection title="ارتباط با پشتیبانی">
@@ -180,7 +180,7 @@ const handleSubmit = async () => {
                     <Button
                         class="rounded-full"
                         size="md"
-                        end-icon="bi:arrow-left"
+                        end-icon="ci:bi-arrow-left"
                     >
                         بازگشت به تیکت ها
                     </Button>
@@ -211,7 +211,7 @@ const handleSubmit = async () => {
                                         class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                     >
                                         <Icon
-                                            name="bi:check"
+                                            name="ci:bi-check"
                                             size="20"
                                         />
                                     </SelectItemIndicator>
@@ -325,7 +325,7 @@ const handleSubmit = async () => {
             >
                 <Icon
                     v-if="createTicketIsPending"
-                    :name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:send'"
+                    :name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-send'"
                 />
                 <span v-else>ارسال تیکت</span>
             </Button>
diff --git a/frontend/pages/resellers/[...slug].vue b/frontend/pages/resellers/[...slug].vue
index 62d7f6f..cb4f64c 100644
--- a/frontend/pages/resellers/[...slug].vue
+++ b/frontend/pages/resellers/[...slug].vue
@@ -110,7 +110,7 @@ useSeoMeta({
             >
                 <Placeholder
                     title="محصولی یافت نشد :("
-                    icon="bi:search"
+                    icon="ci:bi-search"
                 />
             </div>
             <ProductsGrid
diff --git a/frontend/pages/transaction.vue b/frontend/pages/transaction.vue
index 41535d9..71f4dc2 100644
--- a/frontend/pages/transaction.vue
+++ b/frontend/pages/transaction.vue
@@ -40,7 +40,7 @@ const statusVariants = computed(() => {
             background_color: "bg-success-500",
             text_color: "text-white",
             after_background_color: "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
-            icon: "bi:check",
+            icon: "ci:bi-check",
             title: "تراکنش موفق",
             hue_deg: "[filter:_hue-rotate(260deg)] ",
         };
@@ -49,7 +49,7 @@ const statusVariants = computed(() => {
             background_color: "bg-danger-500",
             text_color: "text-white",
             after_background_color: "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
-            icon: "bi:x",
+            icon: "ci:bi-x",
             title: "تراکنش ناموفق",
             hue_deg: "[filter:_hue-rotate(120deg)]",
         };
@@ -58,7 +58,7 @@ const statusVariants = computed(() => {
             background_color: "bg-slate-300",
             text_color: "text-black",
             after_background_color: "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
-            icon: "bi:question-circle",
+            icon: "ci:bi-question-circle",
             title: "تراکنش معلق",
             hue_deg: "[filter:_hue-rotate(0deg)]",
         };
diff --git a/frontend/public/icons/bi-arrow-bar-left.svg b/frontend/public/icons/bi-arrow-bar-left.svg
new file mode 100644
index 0000000..528061c
--- /dev/null
+++ b/frontend/public/icons/bi-arrow-bar-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-arrow-bar-right.svg b/frontend/public/icons/bi-arrow-bar-right.svg
new file mode 100644
index 0000000..8c71c97
--- /dev/null
+++ b/frontend/public/icons/bi-arrow-bar-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-bell.svg b/frontend/public/icons/bi-bell.svg
new file mode 100644
index 0000000..589d522
--- /dev/null
+++ b/frontend/public/icons/bi-bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742c-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-bookmark-fill.svg b/frontend/public/icons/bi-bookmark-fill.svg
new file mode 100644
index 0000000..f048f61
--- /dev/null
+++ b/frontend/public/icons/bi-bookmark-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-bookmark.svg b/frontend/public/icons/bi-bookmark.svg
new file mode 100644
index 0000000..02cbd7a
--- /dev/null
+++ b/frontend/public/icons/bi-bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-cart.svg b/frontend/public/icons/bi-cart.svg
new file mode 100644
index 0000000..ff203c3
--- /dev/null
+++ b/frontend/public/icons/bi-cart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607L1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4a2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4a2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2a1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-check.svg b/frontend/public/icons/bi-check.svg
new file mode 100644
index 0000000..177e061
--- /dev/null
+++ b/frontend/public/icons/bi-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093l3.473-4.425z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-chevron-double-left.svg b/frontend/public/icons/bi-chevron-double-left.svg
new file mode 100644
index 0000000..5b26d5d
--- /dev/null
+++ b/frontend/public/icons/bi-chevron-double-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor" fill-rule="evenodd"><path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/><path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-chevron-double-right.svg b/frontend/public/icons/bi-chevron-double-right.svg
new file mode 100644
index 0000000..cd670fc
--- /dev/null
+++ b/frontend/public/icons/bi-chevron-double-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor" fill-rule="evenodd"><path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708"/><path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-chevron-down.svg b/frontend/public/icons/bi-chevron-down.svg
new file mode 100644
index 0000000..27ef061
--- /dev/null
+++ b/frontend/public/icons/bi-chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-chevron-left.svg b/frontend/public/icons/bi-chevron-left.svg
new file mode 100644
index 0000000..4e3d8ff
--- /dev/null
+++ b/frontend/public/icons/bi-chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-chevron-right.svg b/frontend/public/icons/bi-chevron-right.svg
new file mode 100644
index 0000000..b044f08
--- /dev/null
+++ b/frontend/public/icons/bi-chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-dash.svg b/frontend/public/icons/bi-dash.svg
new file mode 100644
index 0000000..afbb4b1
--- /dev/null
+++ b/frontend/public/icons/bi-dash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-file-earmark-arrow-down.svg b/frontend/public/icons/bi-file-earmark-arrow-down.svg
new file mode 100644
index 0000000..4f2c8a9
--- /dev/null
+++ b/frontend/public/icons/bi-file-earmark-arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293z"/><path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-image.svg b/frontend/public/icons/bi-image.svg
new file mode 100644
index 0000000..a0489b5
--- /dev/null
+++ b/frontend/public/icons/bi-image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71l-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-info-circle-fill.svg b/frontend/public/icons/bi-info-circle-fill.svg
new file mode 100644
index 0000000..5d9267d
--- /dev/null
+++ b/frontend/public/icons/bi-info-circle-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412l-1 4.705c-.07.34.029.533.304.533c.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598c-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081l.082-.381l2.29-.287zM8 5.5a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-info-circle.svg b/frontend/public/icons/bi-info-circle.svg
new file mode 100644
index 0000000..0038f31
--- /dev/null
+++ b/frontend/public/icons/bi-info-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588l-2.29.287l-.082.38l.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319c.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246c-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-map.svg b/frontend/public/icons/bi-map.svg
new file mode 100644
index 0000000..27957c5
--- /dev/null
+++ b/frontend/public/icons/bi-map.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98l4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-patch-check.svg b/frontend/public/icons/bi-patch-check.svg
new file mode 100644
index 0000000..303078d
--- /dev/null
+++ b/frontend/public/icons/bi-patch-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0"/><path d="m10.273 2.513l-.921-.944l.715-.698l.622.637l.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89l.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622l.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01l-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637l-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89l-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622l-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01l.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944l-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318l-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92l-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016l.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944l1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318l.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92l.016-1.32a1.89 1.89 0 0 0-1.912-1.911z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-pen.svg b/frontend/public/icons/bi-pen.svg
new file mode 100644
index 0000000..669f8f4
--- /dev/null
+++ b/frontend/public/icons/bi-pen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="m13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057l3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-pencil.svg b/frontend/public/icons/bi-pencil.svg
new file mode 100644
index 0000000..3396ec2
--- /dev/null
+++ b/frontend/public/icons/bi-pencil.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5L13.5 4.793L14.793 3.5L12.5 1.207zm1.586 3L10.5 3.207L4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175l-.106.106l-1.528 3.821l3.821-1.528l.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-percent.svg b/frontend/public/icons/bi-percent.svg
new file mode 100644
index 0000000..930edcd
--- /dev/null
+++ b/frontend/public/icons/bi-percent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0M4.5 6a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5m7 6a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-person-check.svg b/frontend/public/icons/bi-person-check.svg
new file mode 100644
index 0000000..df4b104
--- /dev/null
+++ b/frontend/public/icons/bi-person-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M12.5 16a3.5 3.5 0 1 0 0-7a3.5 3.5 0 0 0 0 7m1.679-4.493l-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548l1.17-1.951a.5.5 0 1 1 .858.514M11 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/><path d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-person-vcard.svg b/frontend/public/icons/bi-person-vcard.svg
new file mode 100644
index 0000000..ac2a735
--- /dev/null
+++ b/frontend/public/icons/bi-person-vcard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M5 8a2 2 0 1 0 0-4a2 2 0 0 0 0 4m4-2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5M9 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 8m1 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/><path d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM1 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8.96q.04-.245.04-.5C9 10.567 7.21 9 5 9c-2.086 0-3.8 1.398-3.984 3.181A1 1 0 0 1 1 12z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-pin-angle.svg b/frontend/public/icons/bi-pin-angle.svg
new file mode 100644
index 0000000..9052022
--- /dev/null
+++ b/frontend/public/icons/bi-pin-angle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588c-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828l-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182l-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076a5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-plus.svg b/frontend/public/icons/bi-plus.svg
new file mode 100644
index 0000000..2e795ba
--- /dev/null
+++ b/frontend/public/icons/bi-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-question-circle.svg b/frontend/public/icons/bi-question-circle.svg
new file mode 100644
index 0000000..ce6d7d9
--- /dev/null
+++ b/frontend/public/icons/bi-question-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25c.09-.656.54-1.134 1.342-1.134c.686 0 1.314.343 1.314 1.168c0 .635-.374.927-.965 1.371c-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486c.609-.463 1.244-.977 1.244-2.056c0-1.511-1.276-2.241-2.673-2.241c-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927c.609 0 1.028-.394 1.028-.927c0-.552-.42-.94-1.029-.94c-.584 0-1.009.388-1.009.94"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-search.svg b/frontend/public/icons/bi-search.svg
new file mode 100644
index 0000000..5badb4b
--- /dev/null
+++ b/frontend/public/icons/bi-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-send.svg b/frontend/public/icons/bi-send.svg
new file mode 100644
index 0000000..b8f877b
--- /dev/null
+++ b/frontend/public/icons/bi-send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-ticket.svg b/frontend/public/icons/bi-ticket.svg
new file mode 100644
index 0000000..1ec6f07
--- /dev/null
+++ b/frontend/public/icons/bi-ticket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5a1.5 1.5 0 0 0 0 3a.5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5a1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6zM1.5 4a.5.5 0 0 0-.5.5v1.05a2.5 2.5 0 0 1 0 4.9v1.05a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.05a2.5 2.5 0 0 1 0-4.9V4.5a.5.5 0 0 0-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-trash.svg b/frontend/public/icons/bi-trash.svg
new file mode 100644
index 0000000..6cdfd55
--- /dev/null
+++ b/frontend/public/icons/bi-trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-volume-mute-fill.svg b/frontend/public/icons/bi-volume-mute-fill.svg
new file mode 100644
index 0000000..5753960
--- /dev/null
+++ b/frontend/public/icons/bi-volume-mute-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8L9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-volume-up-fill.svg b/frontend/public/icons/bi-volume-up-fill.svg
new file mode 100644
index 0000000..308967a
--- /dev/null
+++ b/frontend/public/icons/bi-volume-up-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><g fill="currentColor"><path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8A3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-x-lg.svg b/frontend/public/icons/bi-x-lg.svg
new file mode 100644
index 0000000..fec0885
--- /dev/null
+++ b/frontend/public/icons/bi-x-lg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/bi-x.svg b/frontend/public/icons/bi-x.svg
new file mode 100644
index 0000000..b060a08
--- /dev/null
+++ b/frontend/public/icons/bi-x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8L4.646 5.354a.5.5 0 0 1 0-.708"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/humbleicons-bars.svg b/frontend/public/icons/humbleicons-bars.svg
new file mode 100644
index 0000000..69e1920
--- /dev/null
+++ b/frontend/public/icons/humbleicons-bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Humbleicons by Jiří Zralý - https://github.com/zraly/humbleicons/blob/master/license --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
\ No newline at end of file