diff --git a/app/Filament/Components/Forms/ItemForm/CustomForm/FormBuilderItem.php b/app/Filament/Components/Forms/ItemForm/CustomForm/FormBuilderItem.php
index 6ce0d15..12ccd5a 100644
--- a/app/Filament/Components/Forms/ItemForm/CustomForm/FormBuilderItem.php
+++ b/app/Filament/Components/Forms/ItemForm/CustomForm/FormBuilderItem.php
@@ -237,6 +237,36 @@ class FormBuilderItem
                             ]),
                     ])
                     ->maxItems(1),
+                Builder\Block::make('captcha')
+                    ->label('reCaptcha')
+                    ->schema([
+                        Forms\Components\Hidden::make('name_field')->required()->default(Str::slug('reCaptcha') . Carbon::now()->timestamp),
+                        Section::make('Настройка')
+                            ->collapsed()
+                            ->statePath('rules')
+                            ->schema([
+                                RuleRequiredComponent::getComponent()->default(true),
+                            ]),
+                    ]),
+                Builder\Block::make('personal_data')
+                    ->label('Соглашение на обработку персональных данных')
+                    ->schema([
+                        TextInput::make('title_field')
+                            ->label('Заголовок поля')
+                            ->live(onBlur: true)
+                            ->default('Соглашение на обработку персональных данных')
+                            ->afterStateUpdated(function (string $operation, string $state, Forms\Set $set) {
+                                $set('name_field', Str::slug($state) . Carbon::now()->timestamp );
+                            }),
+                        Forms\Components\Hidden::make('name_field')->required()->default(Str::slug('Соглашение на обработку персональных данных') . Carbon::now()->timestamp),
+
+                        Section::make('Настройка')
+                            ->collapsed()
+                            ->statePath('rules')
+                            ->schema([
+                                RuleRequiredComponent::getComponent()->default(true),
+                            ]),
+                    ]),
             ])
             ->label('')
             ->addActionLabel('Добавить поле')
diff --git a/package-lock.json b/package-lock.json
index 72c6e70..8b23941 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "fslightbox": "^3.4.1",
         "fslightbox-vue": "^2.1.3",
         "preline": "^1.9.0",
-        "slugify": "^1.6.6"
+        "slugify": "^1.6.6",
+        "vue3-yandex-smartcaptcha": "^1.0.0"
       },
       "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",
@@ -6191,6 +6192,14 @@
         "vue": "3.5.11"
       }
     },
+    "node_modules/vue3-yandex-smartcaptcha": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-yandex-smartcaptcha/-/vue3-yandex-smartcaptcha-1.0.0.tgz",
+      "integrity": "sha512-Sn0/UitYHYBzMvEOM0M00wxB/JC2sZ1EfvdKny3MfZGWLLxBJcKLY6NRInTtpyZcNiez1vsshnoX298Qq+fFzg==",
+      "peerDependencies": {
+        "vue": "^3.3.8"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index c27c0f1..2453661 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "fslightbox": "^3.4.1",
     "fslightbox-vue": "^2.1.3",
     "preline": "^1.9.0",
-    "slugify": "^1.6.6"
+    "slugify": "^1.6.6",
+    "vue3-yandex-smartcaptcha": "^1.0.0"
   },
   "name": "ntspi-reborn",
   "description": "<p align=\"center\"><a href=\"https://laravel.com\" target=\"_blank\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\" alt=\"Laravel Logo\"></a></p>",
diff --git a/resources/js/Components/BaseComponents/BaseBuilderUi/BaseBreadcrumbs.vue b/resources/js/Components/BaseComponents/BaseBuilderUi/BaseBreadcrumbs.vue
index 9191bb6..b0a59c3 100644
--- a/resources/js/Components/BaseComponents/BaseBuilderUi/BaseBreadcrumbs.vue
+++ b/resources/js/Components/BaseComponents/BaseBuilderUi/BaseBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -43,9 +42,8 @@
 								{{ textLimit(breadcrumbs.page.data.title, 25) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit(breadcrumbs.page.data.title, 25) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "BaseBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue
new file mode 100644
index 0000000..c06230f
--- /dev/null
+++ b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<div class="relative">
+			<YSmartCaptcha v-model="token" />
+			<input
+					v-model="token"
+					:required="block.data.rules.required"
+					:name="block.data.name_field"
+					type="text"
+					class="hidden"
+			>
+		</div>
+
+
+	</div>
+
+
+</template>
+
+<script>
+export default {
+	name: "CaptchaBlock",
+	data() {
+		return {
+			text: "",
+			token: null,
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+
diff --git a/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/PersonalDataBlock.vue b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/PersonalDataBlock.vue
new file mode 100644
index 0000000..cb1f9e9
--- /dev/null
+++ b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBlocks/PersonalDataBlock.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
+		<div class="">
+				<input
+						type="checkbox"
+						:name="block.data.name_field"
+						:value="block.data.name_field"
+						name="hs-default-radio"
+						class="shrink-0 mb-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+						:id="block.data.name_field + '-id'">
+			<label :for="block.data.name_field + '-id'" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primaryBlue" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
+		</div>
+		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
+	</div>
+
+
+</template>
+
+<script>
+export default {
+	name: "PersonalDataBlock",
+	data() {
+		return {
+			text: "",
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+
diff --git a/resources/js/Components/BaseComponents/BaseBuilderUi/FormBuilder.vue b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBuilder.vue
index 912ed4a..2b1e44d 100644
--- a/resources/js/Components/BaseComponents/BaseBuilderUi/FormBuilder.vue
+++ b/resources/js/Components/BaseComponents/BaseBuilderUi/FormBuilder.vue
@@ -78,15 +78,16 @@ export default {
 	methods: {
 		getComponent(type) {
 			const componentMap = {
-				text: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue'),
-				phone: () => import('@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue'),
-				email: () => import('@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue'),
-				textarea: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue'),
-				multiple_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue'),
-				single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
-				date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue'),
-				additional_education_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
-				educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue')
+				text: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/TextBlock.vue'),
+				phone: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/PhoneBlock.vue'),
+				email: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/EmailBlock.vue'),
+				textarea: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/TextAreaBlock.vue'),
+				multiple_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/MultipleChoiceBlock.vue'),
+				single_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/SingleChoiceBlock.vue'),
+				date: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/DateBlock.vue'),
+				additional_education_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
+				educational_program_choice: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/EducationalChoiceBlock.vue'),
+				captcha: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue')
 			};
 			return defineAsyncComponent(componentMap[type] || null);
 		},
diff --git a/resources/js/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue b/resources/js/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue
new file mode 100644
index 0000000..00dfc34
--- /dev/null
+++ b/resources/js/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue
@@ -0,0 +1,40 @@
+<template>
+	<ol class="flex items-center whitespace-normal min-w-0 flex-nowrap hide-scrollbar overflow-x-scroll" aria-label="Breadcrumb">
+		<slot />
+	</ol>
+</template>
+
+<script>
+import slugify from "slugify";
+import icons from "@/Components/other/icons.js";
+import {Link} from "@inertiajs/vue3";
+import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+
+export default {
+	name: "BreadcrumbsWrapper",
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+}
+</script>
+
+<style scoped>
+
+/* Скрытие горизонтальной полосы прокрутки */
+.hide-scrollbar {
+	overflow-x: scroll; /* или auto, в зависимости от вашего случая */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+	display: none; /* Для WebKit-браузеров (Chrome, Safari) */
+}
+
+.hide-scrollbar {
+	-ms-overflow-style: none;  /* Для IE и Edge */
+	scrollbar-width: none;  /* Для Firefox */
+}
+
+</style>
\ No newline at end of file
diff --git a/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramItemBreadcrumbs.vue
index 6d1d659..b979623 100644
--- a/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -54,9 +53,8 @@
 								{{ additionalEducationTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -84,7 +82,7 @@
 								{{ additionalEducationTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -97,10 +95,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "AdditionalEducationProgramItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramListBreadcrumbs.vue b/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramListBreadcrumbs.vue
index 844a9f4..e96911f 100644
--- a/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,9 +42,8 @@
 								{{ textLimit('Дополнительное образование', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit('Дополнительное образование', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "AdditionalEducationProgramListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Departments/DepartmentItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/Departments/DepartmentItemBreadcrumbs.vue
index 13745f3..cd59855 100644
--- a/resources/js/Components/BuilderUi/Departments/DepartmentItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Departments/DepartmentItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -65,9 +64,8 @@
 								{{ departmentTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center text-ellipsis overflow-hidden whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -106,7 +104,7 @@
 								{{ departmentTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -119,10 +117,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "DepartmentItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Departments/DepartmentListBreadcrumbs.vue b/resources/js/Components/BuilderUi/Departments/DepartmentListBreadcrumbs.vue
index f85b81b..88bfd54 100644
--- a/resources/js/Components/BuilderUi/Departments/DepartmentListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Departments/DepartmentListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,9 +42,8 @@
 								{{ textLimit('Факультеты', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,8 @@
 								{{ textLimit('Факультеты', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
+
 				</div>
 			</div>
 		</div>
@@ -75,10 +74,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "FacultyListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Divisions/DivisionItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/Divisions/DivisionItemBreadcrumbs.vue
index 99cac71..acf25e3 100644
--- a/resources/js/Components/BuilderUi/Divisions/DivisionItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Divisions/DivisionItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -54,9 +53,8 @@
 								{{ divisionTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center text-ellipsis overflow-hidden whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -84,7 +82,8 @@
 								{{ divisionTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
+
 				</div>
 			</div>
 		</div>
@@ -97,10 +96,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "DivisionItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Divisions/DivisionListBreadcrumbs.vue b/resources/js/Components/BuilderUi/Divisions/DivisionListBreadcrumbs.vue
index 1741197..c6174d5 100644
--- a/resources/js/Components/BuilderUi/Divisions/DivisionListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Divisions/DivisionListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,9 +42,8 @@
 								{{ textLimit('Образовательные программы', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit('Подразделения института', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "DivisionListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Events/EventItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/Events/EventItemBreadcrumbs.vue
index 6805a35..bfa608d 100644
--- a/resources/js/Components/BuilderUi/Events/EventItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Events/EventItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -54,9 +53,8 @@
 								{{ eventTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -84,7 +82,7 @@
 								{{ eventTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -97,10 +95,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "EventItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Events/EventListBreadcrumbs.vue b/resources/js/Components/BuilderUi/Events/EventListBreadcrumbs.vue
index f146e34..c296de9 100644
--- a/resources/js/Components/BuilderUi/Events/EventListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Events/EventListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -44,9 +43,8 @@
 								{{ textLimit('Мероприятия', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -63,7 +61,8 @@
 								{{ textLimit('Мероприятия', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
+
 				</div>
 			</div>
 		</div>
@@ -76,10 +75,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "EventListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Faculties/FacultyItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/Faculties/FacultyItemBreadcrumbs.vue
index 1dab75e..bce6b5e 100644
--- a/resources/js/Components/BuilderUi/Faculties/FacultyItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Faculties/FacultyItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -54,9 +53,8 @@
 								{{ facultyTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center text-ellipsis overflow-hidden whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -84,7 +82,7 @@
 								{{ facultyTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -97,10 +95,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "FacultyItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Faculties/FacultyListBreadcrumbs.vue b/resources/js/Components/BuilderUi/Faculties/FacultyListBreadcrumbs.vue
index f85b81b..6dce443 100644
--- a/resources/js/Components/BuilderUi/Faculties/FacultyListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Faculties/FacultyListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,9 +42,8 @@
 								{{ textLimit('Факультеты', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit('Факультеты', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "FacultyListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Pages/FormBuilder.vue b/resources/js/Components/BuilderUi/Pages/FormBuilder.vue
index 912ed4a..555d8eb 100644
--- a/resources/js/Components/BuilderUi/Pages/FormBuilder.vue
+++ b/resources/js/Components/BuilderUi/Pages/FormBuilder.vue
@@ -86,7 +86,10 @@ export default {
 				single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
 				date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue'),
 				additional_education_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
-				educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue')
+				educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue'),
+				captcha: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/CaptchaBlock.vue'),
+				personal_data: () => import('@/Components/BaseComponents/BaseBuilderUi/FormBlocks/PersonalDataBlock.vue'),
+
 			};
 			return defineAsyncComponent(componentMap[type] || null);
 		},
diff --git a/resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue b/resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue
index 7d94339..c9c30b2 100644
--- a/resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -43,9 +42,8 @@
 								{{ textLimit(breadcrumbs.page.data.title, 25) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit(pageTitle, 25) }}
 							</span>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "PageBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Persons/PersonBreadcrumbs.vue b/resources/js/Components/BuilderUi/Persons/PersonBreadcrumbs.vue
index 549400e..eb39ff6 100644
--- a/resources/js/Components/BuilderUi/Persons/PersonBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Persons/PersonBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,15 +23,14 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
 								{{ textLimit(breadcrumbs.subSection.data.title, 25) }}
 							</span>
 						</li>
-
 						<li class="text-sm">
 							<Link :href="$page.props.ziggy.location" class="flex items-center text-gray-500 hover:text-blue-600">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
@@ -44,18 +42,17 @@
 								{{ personName }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-													 width="16" height="16"
-													 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-												<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
-															stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-											</svg>
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
 							</Link>
 						</li>
 						<li class="text-sm">
@@ -69,7 +66,7 @@
 								{{ personName }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -81,10 +78,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "PersonBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Posts/NewsBreadcrumbs.vue b/resources/js/Components/BuilderUi/Posts/NewsBreadcrumbs.vue
index b963c16..2f9f43a 100644
--- a/resources/js/Components/BuilderUi/Posts/NewsBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Posts/NewsBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -43,9 +42,8 @@
 								{{ textLimit('Новости', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit('Новости', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -73,10 +71,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "NewsBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Posts/PostBreadcrumbs.vue b/resources/js/Components/BuilderUi/Posts/PostBreadcrumbs.vue
index 758fcd2..a9330a2 100644
--- a/resources/js/Components/BuilderUi/Posts/PostBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Posts/PostBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,7 +42,6 @@
 								{{ textLimit('Новости', 30) }}
 							</Link>
 						</li>
-
 						<li class="text-sm">
 							<Link :href="$page.props.ziggy.location" class="flex items-center text-gray-500 hover:text-blue-600">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
@@ -55,29 +53,28 @@
 								{{ textLimit(postTitle, 60) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-													 width="16" height="16"
-													 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-												<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
-															stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-											</svg>
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
 							</Link>
 						</li>
 						<li class="text-sm">
 							<Link :href="route('client.post.index')" class="flex items-center text-gray-500 hover:text-blue-600">
 								{{ textLimit('Новости', 30) }}
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																					 width="16" height="16"
-																					 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-												<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
-															stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-											</svg>
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
 							</Link>
 						</li>
 						<li class="text-sm">
@@ -85,7 +82,7 @@
 								{{ textLimit(postTitle, 60) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -97,10 +94,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "PostBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
@@ -207,4 +205,6 @@ export default {
 
 <style scoped>
 
+
+
 </style>
\ No newline at end of file
diff --git a/resources/js/Components/BuilderUi/Programs/ProgramItemBreadcrumbs.vue b/resources/js/Components/BuilderUi/Programs/ProgramItemBreadcrumbs.vue
index fc673d6..669b58a 100644
--- a/resources/js/Components/BuilderUi/Programs/ProgramItemBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Programs/ProgramItemBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -54,9 +53,8 @@
 								{{ programTitle }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center text-ellipsis overflow-hidden whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -84,7 +82,7 @@
 								{{ programTitle }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -97,10 +95,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "ProgramItemBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Components/BuilderUi/Programs/ProgramListBreadcrumbs.vue b/resources/js/Components/BuilderUi/Programs/ProgramListBreadcrumbs.vue
index 129bd55..ab8f230 100644
--- a/resources/js/Components/BuilderUi/Programs/ProgramListBreadcrumbs.vue
+++ b/resources/js/Components/BuilderUi/Programs/ProgramListBreadcrumbs.vue
@@ -3,8 +3,7 @@
 		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
-					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
-							aria-label="Breadcrumb">
+					<BreadcrumbsWrapper v-if="breadcrumbs">
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -13,8 +12,8 @@
 						<li v-if="breadcrumbs.mainSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																	 width="16" height="16"
-																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 							</svg>
@@ -24,8 +23,8 @@
 						<li v-if="breadcrumbs.subSection" class="text-sm">
 							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
 								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
-																		 width="16" height="16"
-																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
 												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 								</svg>
@@ -43,9 +42,8 @@
 								{{ textLimit('Образовательные программы', 30) }}
 							</Link>
 						</li>
-					</ol>
-					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
-							aria-label="Breadcrumb">
+					</BreadcrumbsWrapper>
+					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
 								<BaseIcon class="size-5" name="home" />
@@ -62,7 +60,7 @@
 								{{ textLimit('Образовательные программы', 30) }}
 							</Link>
 						</li>
-					</ol>
+					</BreadcrumbsWrapper>
 				</div>
 			</div>
 		</div>
@@ -75,10 +73,11 @@
 import {Link} from "@inertiajs/vue3";
 import slugify from "slugify";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+import BreadcrumbsWrapper from "@/Components/BaseComponents/Breadcrumbs/BreadcrumbsWrapper.vue";
 
 export default {
 	name: "ProgramListBreadcrumbs",
-	components: {BaseIcon, Link},
+	components: {BreadcrumbsWrapper, BaseIcon, Link},
 	data() {
 		return {
 		}
diff --git a/resources/js/Pages/Client/Posts/Show.vue b/resources/js/Pages/Client/Posts/Show.vue
index e342e31..08f6231 100644
--- a/resources/js/Pages/Client/Posts/Show.vue
+++ b/resources/js/Pages/Client/Posts/Show.vue
@@ -81,7 +81,6 @@ export default {
 			<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
 				<div class="max-w-3xl lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
 					<div>
-
 						<div class="space-y-5 md:space-y-10">
 							<div class="space-y-3">
 								<PostBreadcrumbs :breadcrumbs="breadcrumbs" :post-title="post.data.title" />
diff --git a/resources/js/app.js b/resources/js/app.js
index 0918791..8c83f16 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -6,6 +6,7 @@ import { createSSRApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
 import {linksReform} from "@/mixins/LinksReform.js";
+import YSmartCaptcha from 'vue3-yandex-smartcaptcha'
 
 // const appName = import.meta.env.VITE_APP_NAME || 'НТГСПИ';
 
@@ -20,6 +21,10 @@ createInertiaApp({
             .use(plugin)
             .mixin(linksReform)
             .use(ZiggyVue)
+            .use(YSmartCaptcha, {
+                siteKey: "ysc1_jxb2IcslgBuHgHbmmKY1F7Nvb8zYHuAeBgjoaTka6886f893",
+                lang: "Язык ('ru' | 'en' | 'be' | 'kk' | 'tt' | 'uk' | 'uz' | 'tr')"
+            })
             .mount(el);
     },
     progress: {