diff --git a/package.json b/package.json
index 1d11dd05386d26f2aacb0669b47b1a32291adde6..6acd9bce5986acb4bbec0c3f07bdb4eb47845ba8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d.malygin/UI_storybook",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 3c788be6516d270b88092acb754243dfd6435320..c70f3778fbc6447f34b0dfe24c53242c41661841 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -170,6 +170,9 @@ export interface IModalProps {
   dismissible?: boolean;
   closeIcon?: TIcon;
   headerDivider?: boolean;
+  headerHeight?: string;
+  headerAllowWrap?: boolean;
+  paddingRightOnActive?: string;
 }
 
 export interface IPopupProps {
@@ -300,6 +303,7 @@ export interface IRatingProps {
 }
 
 export interface ITSProps {
+  active?: boolean;
   size?: TSize;
   theme?: TThemeColorNoWhite;
   negativeTheme?: TThemeColor;
diff --git a/src/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
index e82e91bb1f606445befb95ff3bcdfe5b360b2d99..c050e1d295d8c36e5f2e2238a84fe13f174aa08c 100644
--- a/src/components/Drawer/Drawer.vue
+++ b/src/components/Drawer/Drawer.vue
@@ -24,24 +24,17 @@ const props = withDefaults(defineProps<IDrawerProps>(), {
 });
 const body = document.querySelector('body')!;
 const emit = defineEmits(['onClose']);
-const visible = defineModel<boolean>('visible', {
-  set(value) {
-    if (!value) {
-      (window as CustomWindow).blockPopupActions = false;
-      body.style.overflow = 'auto';
-      body.style.paddingRight = '0';
-      body.style.marginRight = '0';
-      emit('onClose');
-    }
-    return value;
-  },
-}) as Ref<boolean>;
+const visible = defineModel<boolean>('visible') as Ref<boolean>;
 watch(visible, () => {
   if (visible.value) {
     (window as CustomWindow).blockPopupActions = true;
-    body.style.overflow = 'hidden';
+    body.style.overflowY = 'hidden';
     body.style.paddingRight = props.paddingRightOnActive;
-    body.style.marginRight = `-${props.paddingRightOnActive}`;
+  } else {
+    (window as CustomWindow).blockPopupActions = false;
+    body.style.overflowY = 'auto';
+    body.style.paddingRight = '0';
+    emit('onClose');
   }
 });
 const dividerHeaderTop = computed(() => `calc(${props.headerHeight} + 20px + 8px`);
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index a5b8f32a47743cb3d400fd4fab124e326d2f28ff..7fe65f906b9e7d7a1cb9ed75ad6e07db88209b40 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -16,30 +16,28 @@ const props = withDefaults(defineProps<IModalProps>(), {
   darknessTheme: '500',
   darknessTextColor: '500',
   width: '30%',
-  height: '30%',
+  height: 'max-content',
+  headerHeight: 'max-content',
+  paddingRightOnActive: '14px',
   headerDivider: false,
   closeIcon: 'Cross',
 });
 const body = document.querySelector('body')!;
 const emit = defineEmits(['onClose']);
-const visible = defineModel('visible', {
-  set(value) {
-    if (!value) {
-      (window as CustomWindow).blockPopupActions = false;
-      body.style.overflow = 'auto';
-      body.style.paddingRight = '0';
-      emit('onClose');
-    }
-    return value;
-  },
-});
+const visible = defineModel('visible');
 watch(visible, () => {
   if (visible.value) {
     (window as CustomWindow).blockPopupActions = true;
     body.style.overflow = 'hidden';
-    body.style.paddingRight = '14px';
+    body.style.paddingRight = props.paddingRightOnActive;
+  } else {
+    (window as CustomWindow).blockPopupActions = false;
+    body.style.overflow = 'auto';
+    body.style.paddingRight = '0';
+    emit('onClose');
   }
 });
+const headerWhiteSpace = computed(() => (props.headerAllowWrap ? 'normal' : 'nowrap'));
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
 const color = computed(() =>
@@ -83,7 +81,7 @@ document.addEventListener('keydown', onKeydown);
       ]"
     >
       <header class="modalHeader">
-        <div class="headerContent">
+        <div class="headerContent" :style="`height: ${headerHeight}`">
           <slot name="header" />
         </div>
         <button class="buttonClose" @click.prevent="visible = false">
@@ -147,7 +145,7 @@ document.addEventListener('keydown', onKeydown);
 .headerContent {
   font-weight: bold;
   overflow: auto;
-  white-space: nowrap;
+  white-space: v-bind(headerWhiteSpace);
 }
 .main {
   padding-right: 5px;
diff --git a/src/components/SelectButton/SelectButton.vue b/src/components/SelectButton/SelectButton.vue
index ec3531d4cd635b7d9fd1fff8370155d785e98d54..e0a6180284d19522e2e28cd020c229c50cd430b7 100644
--- a/src/components/SelectButton/SelectButton.vue
+++ b/src/components/SelectButton/SelectButton.vue
@@ -79,7 +79,7 @@ const calcItemColor = (item: ISBOption) => {
   }
 };
 const calcBGColorItem = (item: ISBOption) => {
-  return (value.value && value.value === item.value) || String(value.value) === item.label
+  return ((value.value ?? false) && value.value === item.value) || String(value.value) === item.label
     ? activeBGColorComputed.value
     : item.backgroundColor
       ? convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500')
diff --git a/src/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
index 1d3a681c639361c3297c2b5132163cd7bbb11847..c2b6362fa8d6519fead6e0aa2b9b972ada62d108 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -14,6 +14,7 @@ const meta: Meta = {
     },
   },
   argTypes: {
+    active: { control: 'boolean' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     negativeTheme: {
       control: 'select',
diff --git a/src/components/ToggleSwitch/ToggleSwitch.vue b/src/components/ToggleSwitch/ToggleSwitch.vue
index 79578bec2c11aa4c484e4d30279d2bc69a648b93..c4cf21e0d07f4a9b1c1ffdbb4518e26bc2f0f75f 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type Ref } from 'vue';
+import { computed, type Ref, watch } from 'vue';
 import type { ITSProps } from '../../common/interfaces/componentsProps';
 import { convertThemeToColor } from '../../common/helpers/common';
 
@@ -11,6 +11,14 @@ const props = withDefaults(defineProps<ITSProps>(), {
   darknessNegativeTheme: '500',
 });
 const active = defineModel() as Ref<boolean>;
+const emit = defineEmits(['update']);
+
+if (props.active) {
+  active.value = props.active;
+}
+const propActive = computed(() => props.active);
+watch(propActive, () => (active.value = propActive.value));
+watch(active, () => emit('update', active));
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));