diff --git a/packages/kaspersky-components/helpers/useIntersectionChildren.ts b/packages/kaspersky-components/helpers/useIntersectionChildren.ts
index 2f30afd..0a6695d 100644
--- a/packages/kaspersky-components/helpers/useIntersectionChildren.ts
+++ b/packages/kaspersky-components/helpers/useIntersectionChildren.ts
@@ -1,19 +1,24 @@
 import { RefObject, useMemo } from 'react'
 import { useResizeObserver } from './useResizeObserver'
 
-/** Find position last inside element */
-export const useIntersectionChildren = (ref: RefObject<Element>, padding = 0): number | undefined => {
+/** The hook calculates the intersection of the container and its children, returns the index of last fitting child
+
+ @param ref External container ref
+ @param padding Padding to consider when intersecting
+ @param wrapperQuerySelector selector of internal container
+ @param renderCounter flag to trigger the recalculation
+ */
+export const useIntersectionChildren = (ref: RefObject<Element>, padding = 0, wrapperQuerySelector?: string, renderCounter?: number): number | undefined => {
   const { right: containerRight } = useResizeObserver(ref) ?? { right: 0 }
 
   return useMemo<number | undefined>(() => {
-    const container = ref.current
-    if (container === null) return undefined
+    const container = wrapperQuerySelector ? ref.current?.querySelector(wrapperQuerySelector) : ref.current
+    if (container === null || container === undefined) return undefined
 
     const children = new Array(container.children.length)
       .fill(null)
       .map((_, i) => container.children[i])
-
     const res = children.findIndex((child) => child.getBoundingClientRect().right + padding > containerRight)
     return res === -1 ? undefined : Math.max(res - 1, 0)
-  }, [containerRight, ref])
+  }, [containerRight, ref, padding, renderCounter])
 }
diff --git a/packages/kaspersky-components/src/indicator/index.ts b/packages/kaspersky-components/src/indicator/index.ts
index e6c1cd5..43d64d9 100644
--- a/packages/kaspersky-components/src/indicator/index.ts
+++ b/packages/kaspersky-components/src/indicator/index.ts
@@ -1 +1,2 @@
 export * from './Indicator'
+export * from './types'
diff --git a/packages/kaspersky-components/src/tabs/Tabs.stories.tsx b/packages/kaspersky-components/src/tabs/Tabs.stories.tsx
index 79a42e7..4dd9745 100644
--- a/packages/kaspersky-components/src/tabs/Tabs.stories.tsx
+++ b/packages/kaspersky-components/src/tabs/Tabs.stories.tsx
@@ -1,17 +1,25 @@
-import React from 'react'
+import { useLocalization } from '@helpers/localization/useLocalization'
+import { badges } from '@sb/badges'
+import { withMeta } from '@sb/components/Meta'
+import { sbHideControls } from '@sb/helpers'
+import { Button } from '@src/button'
+import { IndicatorMode } from '@src/indicator'
+import { IndicatorModes } from '@src/indicator/types'
+import { Textbox } from '@src/input'
+import { Space } from '@src/space'
+import { H3 } from '@src/typography'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Placeholder } from '@kl/icons/16'
+
 import MetaData from './__meta__/meta.json'
+import { Tabs, GroupTabs } from './Tabs'
 import { TabsProps } from './types'
-import { Tabs } from './Tabs'
-import { badges } from '@sb/badges'
-import { withMeta } from '@helpers/hocs/MetaComponent/withMeta'
-import { sbHideControls } from '@helpers/storybookHelpers'
-import { Placeholder } from '@kaspersky/icons/16'
-import { Button, GroupTabs, H3, Space } from '..'
-import styled from 'styled-components'
 
 const meta: Meta<TabsProps> = {
-  title: 'Atoms/Tabs',
+  title: 'Hexa UI Components/Tabs',
   component: Tabs,
   argTypes: {
     ...sbHideControls(['onChange', 'onTabClick', 'style', 'destroyInactiveTabPane', 'theme', 'className', 'type'])
@@ -30,7 +38,7 @@ const meta: Meta<TabsProps> = {
     klId: 'tabs-kl-id'
   },
   parameters: {
-    badges: [badges.reviewedByDesign],
+    badges: [badges.stable, badges.reviewedByDesign],
     docs: {
       page: withMeta(MetaData)
     },
@@ -57,62 +65,142 @@ export const Basic: Story = {}
 export const WithIconAndNumber: Story = {
   render: (args: TabsProps) => (
     <Tabs {...args}>
-      <Tabs.TabPane tab={<Tabs.TabPaneHead text="Tab" number={5} />} key="1">
+      <Tabs.TabPane
+        tab={<Tabs.TabPaneHead text="Tab" iconBefore={<Placeholder />} />}
+        key="1"
+      >
         Content of Tab Pane 1
       </Tabs.TabPane>
       <Tabs.TabPane
-        tab={<Tabs.TabPaneHead text="Tab" icon={<Placeholder />} />}
+        tab={<Tabs.TabPaneHead text="Tab" iconAfter={<Placeholder />} />}
         key="2"
       >
         Content of Tab Pane 2
       </Tabs.TabPane>
       <Tabs.TabPane
         tab={
-          <Tabs.TabPaneHead text="Tab" icon={<Placeholder />} number={5} />
+          <Tabs.TabPaneHead text="Tab" iconBefore={<Placeholder />} iconAfter={<Placeholder />} />
         }
         key="3"
       >
         Content of Tab Pane 3
       </Tabs.TabPane>
-    </Tabs>
-  )
-}
-
-export const WithIndicator: Story = {
-  render: (args: TabsProps) => (
-    <Tabs {...args}>
-      <Tabs.TabPane tab={<Tabs.TabPaneHead text="Tab" indicator />} key="1">
-        Content of Tab Pane 1
+      <Tabs.TabPane tab={<Tabs.TabPaneHead text="Tab" number={5} />} key="4">
+        Content of Tab Pane 4
       </Tabs.TabPane>
       <Tabs.TabPane
-        tab={<Tabs.TabPaneHead text="Tab" indicator number={5} />}
-        key="2"
+        tab={
+          <Tabs.TabPaneHead text="Tab" iconBefore={<Placeholder />} number={5} />
+        }
+        key="5"
       >
-        Content of Tab Pane 2
+        Content of Tab Pane 5
       </Tabs.TabPane>
       <Tabs.TabPane
-        tab={<Tabs.TabPaneHead text="Tab" indicator icon={<Placeholder />} />}
-        key="3"
+        tab={
+          <Tabs.TabPaneHead text="Tab" iconAfter={<Placeholder />} number={5} />
+        }
+        key="6"
       >
-        Content of Tab Pane 3
+        Content of Tab Pane 6
       </Tabs.TabPane>
       <Tabs.TabPane
         tab={
-          <Tabs.TabPaneHead
-            text="Tab"
-            indicator
-            icon={<Placeholder />}
-            number={5}
-          />
+          <Tabs.TabPaneHead text="Tab" iconBefore={<Placeholder />} iconAfter={<Placeholder />} number={5} />
         }
-        key="4"
+        key="7"
       >
-        Content of Tab Pane 4
+        Content of Tab Pane 7
       </Tabs.TabPane>
     </Tabs>
   )
 }
 
+type StoryTabsProps = TabsProps & { indicatorMode: IndicatorMode }
+
+export const WithIndicator: StoryObj<StoryTabsProps> = {
+  render: (args: StoryTabsProps) => {
+    const { indicatorMode, ...props } = args
+    return (
+      <Tabs {...props}>
+        <Tabs.TabPane
+          tab={<Tabs.TabPaneHead text="Tab" indicator indicatorMode={indicatorMode} />}
+          key="1"
+        >
+          Content of Tab Pane 1
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={<Tabs.TabPaneHead text="Tab" indicator indicatorMode={indicatorMode} number={5} />}
+          key="2"
+        >
+          Content of Tab Pane 2
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={
+            <Tabs.TabPaneHead
+              text="Tab"
+              indicator
+              indicatorMode={indicatorMode}
+              iconBefore={<Placeholder />}
+            />}
+          key="3"
+        >
+          Content of Tab Pane 3
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={
+            <Tabs.TabPaneHead
+              text="Tab"
+              indicator
+              indicatorMode={indicatorMode}
+              iconAfter={<Placeholder />}
+            />
+          }
+          key="4"
+        >
+          Content of Tab Pane 4
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={
+            <Tabs.TabPaneHead
+              text="Tab"
+              indicator
+              indicatorMode={indicatorMode}
+              iconBefore={<Placeholder />}
+              number={5}
+            />
+          }
+          key="5"
+        >
+          Content of Tab Pane 5
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={
+            <Tabs.TabPaneHead
+              text="Tab"
+              indicator
+              indicatorMode={indicatorMode}
+              iconBefore={<Placeholder />}
+              iconAfter={<Placeholder />}
+              number={5}
+            />
+          }
+          key="6"
+        >
+          Content of Tab Pane 6
+        </Tabs.TabPane>
+      </Tabs>
+    )
+  },
+  argTypes: {
+    indicatorMode: {
+      control: 'select',
+      options: IndicatorModes,
+      description: 'Indicator mode'
+    }
+  }
+}
+
 export const WithDisabled: Story = {
   render: (args: TabsProps) => (
     <Tabs {...args}>
@@ -148,24 +236,29 @@ export const WithDisabled: Story = {
   )
 }
 
+const generateTabs = (length = 15, tabText = 'Tab', contentText = 'Content of tab') => Array.from({ length: length }, (_, i) => i).map((i) => ({
+    text: tabText,
+    disabled: i === 8,
+    content: contentText + ' ' + (i + 1)
+  }
+))
+
 export const CollapsedHorizontalGroup: Story = {
-  render: (props: TabsProps) => (
-    <Tabs {...props}>
-      {[
-        ...Array.from({ length: 15 }, (_, i) => i)
-      ].map((i) => (
-        <Tabs.TabPane
-          tab={
-            <Tabs.TabPaneHead text={`Tab ${i + 1}`} icon={<Placeholder />} />
-          }
-          key={i + 1}
-          disabled={i === 8}
-        >
-          Content of tab {i + 1}
-        </Tabs.TabPane>
-      ))}
-    </Tabs>
-  )
+  render: (props: TabsProps) => {
+    return (
+      <Tabs {...props}>
+        {generateTabs(20, 'tabs.dropdown.more').map((el, i) => <Tabs.TabPane
+            tab={
+              <Tabs.TabPaneHead text={useLocalization(el.text) + ' ' + (i + 2)} icon={<Placeholder/>}/>
+            }
+            key={i + 1}
+            disabled={el.disabled}
+          >
+            {el.content}
+          </Tabs.TabPane>
+        )}
+      </Tabs>)
+  }
 }
 
 const RightButton = <Button mode='secondary' text='Right extra button'/>
@@ -174,7 +267,7 @@ const LeftButton = <Button mode='secondary' text='Left extra button'/>
 export const WithExtraContent: Story = {
   render: (args: TabsProps) => (
     <Space size={16}>
-      <H3>Отступы и другие стили пока задавать надо вручную, в будущем будет проработано со стороны дизайна</H3>
+      <H3>Отѝтупы и другие ѝтили временно необходимо задавать вручную, в будущем будет проработано ѝо ѝтороны дизайна</H3>
       <Tabs {...args} tabBarExtraContent={RightButton} />
       <Tabs {...args} tabBarExtraContent={{ right: RightButton, left: LeftButton }} />
     </Space>
@@ -184,7 +277,7 @@ export const WithExtraContent: Story = {
 export const WithGroupedTabs: Story = {
   render: (args: TabsProps) => (
     <GroupTabs {...args}>
-      {/* Группа 1 */}
+      {/* Group 1 */}
       <GroupTabs.TabPaneHeader
         title={'Group 1 heading'}
         key="tab-group-header-1"
@@ -209,7 +302,7 @@ export const WithGroupedTabs: Story = {
         Content of Tab Pane 3
       </Tabs.TabPane>
 
-      {/* Группа 2 */}
+      {/* Group 2 */}
       <GroupTabs.TabPaneHeader
         divider
         title={'Group 2 heading'}
@@ -222,7 +315,7 @@ export const WithGroupedTabs: Story = {
         Content of Tab Pane 5
       </Tabs.TabPane>
 
-      {/* Группа 3 */}
+      {/* Group 3 */}
       <GroupTabs.TabPaneHeader
         divider
         title={'Group 3 heading'}
@@ -237,7 +330,7 @@ export const WithGroupedTabs: Story = {
     </GroupTabs>
   ),
   args: {
-    defaultActiveKey: undefined
+    defaultActiveKey: '1'
   },
   argTypes: {
     ...sbHideControls(['tabPosition'])
@@ -261,3 +354,55 @@ export const TabsInsideTabs: Story = {
     </Tabs>
   )
 }
+
+const HighContainer = styled.div`
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+`
+
+const StretchedTabs = styled(Tabs)`
+  margin-top: 15px;
+  flex: 1 0 auto;
+`
+
+export const StretchedInHeight: Story = {
+  render: (args: TabsProps) => (
+    <HighContainer>
+      <H3>The Header</H3>
+      <StretchedTabs {...args} />
+    </HighContainer>
+  ),
+  args: {
+    tabPosition: 'left'
+  }
+}
+
+export const WithTextbox: Story = {
+  render: (args: TabsProps) => (
+    <Space size={48}>
+      <Tabs {...args}>
+        <Tabs.TabPane tab={<Textbox />} key="1">
+          Content of Tab Pane 1
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="Tab 2" key="2">
+          Content of Tab Pane 2
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="Tab 3" key="3">
+          Content of Tab Pane 3
+        </Tabs.TabPane>
+      </Tabs>
+      <Tabs {...args}>
+        <Tabs.TabPane tab={<Textbox.Textarea />} key="1">
+          Content of Tab Pane 1
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="Tab 2" key="2">
+          Content of Tab Pane 2
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="Tab 3" key="3">
+          Content of Tab Pane 3
+        </Tabs.TabPane>
+      </Tabs>
+    </Space>
+  )
+}
diff --git a/packages/kaspersky-components/src/tabs/Tabs.tsx b/packages/kaspersky-components/src/tabs/Tabs.tsx
index 2dea91f..7b4c877 100644
--- a/packages/kaspersky-components/src/tabs/Tabs.tsx
+++ b/packages/kaspersky-components/src/tabs/Tabs.tsx
@@ -1,18 +1,30 @@
+import { WithGlobalComponentStyles } from '@helpers/hocs/WithGlobalComponentStyles'
+import { useTestAttribute } from '@helpers/hooks/useTestAttribute'
+import i18n from '@helpers/localization/i18n'
+import { shouldForwardProp } from '@helpers/shouldForwardProp'
+import { useIntersectionChildren } from '@helpers/useIntersectionChildren'
+import { isNumber } from '@src/anchor-links/helpers'
+import { Badge } from '@src/badge'
+import { Indicator } from '@src/indicator'
+import { Space } from '@src/space'
+import { Tabs as AntdTabs } from 'antd'
+import cn from 'classnames'
 import React, {
   ReactElement,
-  ReactPortal,
+  FC,
+  Children,
+  isValidElement,
   useContext,
   useEffect,
-  useRef,
   useState,
-  FC
+  useMemo,
+  useRef
 } from 'react'
-import styled from 'styled-components'
-import { throttle } from 'lodash'
-import { Tabs as AntdTabs } from 'antd'
 import ResizeObserver from 'resize-observer-polyfill'
-import cn from 'classnames'
+import styled from 'styled-components'
 
+import { TabsContext } from './context'
+import { getDropdownStyles } from './dropdownGlobalStyles'
 import {
   tabsCss,
   tabsWrapperCss,
@@ -21,7 +33,7 @@ import {
   StyledTabPaneText,
   StyledTabPaneIndicator
 } from './tabsCss'
-import { useThemedTabs } from './useThemedTabs'
+import { TabsDropdown } from './TabsDropdown'
 import {
   TabPaneHeadProps,
   TabsProps,
@@ -33,19 +45,8 @@ import {
   TabsVariants,
   StyledTabPanedHeadProps
 } from './types'
-import { TabsContext } from './context'
-import { TabsDropdown } from './TabsDropdown'
-import { Badge } from '@src/badge'
-import { Indicator } from '@src/indicator'
-import { Space } from '@src/space'
+import { useThemedTabs } from './useThemedTabs'
 import { createGroupTabPane, extractTabPanes } from './utils'
-import { WithGlobalComponentStyles } from '@helpers/hocs/WithGlobalComponentStyles'
-import { getDropdownStyles } from './dropdownGlobalStyles'
-import { useTestAttribute } from '@helpers/hooks/useTestAttribute'
-import { shouldForwardProp } from '@helpers/shouldForwardProp'
-
-const TAB_MORE_BUTTON_WIDTH = 70
-const TAB_MARGIN = 4
 
 const StyledTabs = styled(AntdTabs).withConfig<TabsViewProps & { hiddenTabsLength: number }>({
   shouldForwardProp: (prop) => !['cssConfig', 'hiddenTabsLength', 'containerWidth'].includes(prop as string)
@@ -74,19 +75,24 @@ const StyledTabsWrapper = styled.div.withConfig<{ cssConfig: TabsCssConfig }>({
 export const TabPaneHead: FC<TabPaneHeadProps> = ({
   text,
   icon,
+  iconBefore,
+  iconAfter,
   number,
-  indicator
+  indicator,
+  indicatorMode
 }: TabPaneHeadProps) => {
-  const { cssConfig } = useContext(TabsContext)
+  const { cssConfig, testAttributes } = useContext(TabsContext)
 
   return (
     <StyledTabPaneHead size={8} wrap="nowrap" cssConfig={cssConfig}>
-      {icon && <StyledTabPaneIcon>{icon}</StyledTabPaneIcon>}
+      {!iconBefore && icon && <StyledTabPaneIcon>{icon}</StyledTabPaneIcon>}
+      {iconBefore && <StyledTabPaneIcon>{iconBefore}</StyledTabPaneIcon>}
       <StyledTabPaneText>{text}</StyledTabPaneText>
+      {iconAfter && <StyledTabPaneIcon>{iconAfter}</StyledTabPaneIcon>}
       {number && <Badge count={number} mode="neutral" />}
       {indicator && (
         <StyledTabPaneIndicator>
-          <Indicator mode="high" />
+          <Indicator mode={indicatorMode ?? 'high'} testId={`${testAttributes?.['data-testid'] ?? 'tabs'}-tab-indicator`} />
         </StyledTabPaneIndicator>
       )}
     </StyledTabPaneHead>
@@ -95,96 +101,131 @@ export const TabPaneHead: FC<TabPaneHeadProps> = ({
 
 Tabs.TabPaneHead = TabPaneHead
 
-export const GroupTabs: FC<GroupTabsProps> & GroupTabsVariants = ({ children }) => (
-  <Tabs className="group-tabs" tabPosition="left">
-    {children}
-  </Tabs>
+export const GroupTabs: FC<GroupTabsProps> & GroupTabsVariants = ({ className, ...props }) => (
+  <Tabs
+    {...props}
+    className={cn('group-tabs', className)}
+    tabPosition="left"
+  />
 )
 
+function extractChildrenFromFragment (variableToInspect: any): ReactElement[] {
+  if (variableToInspect?.type && variableToInspect.type === React.Fragment) {
+    return extractChildrenFromFragment(variableToInspect.props.children)
+  }
+  return variableToInspect
+}
+
 export const GroupTabHeader: FC<TabPaneHeaderProps> = (props: TabPaneHeaderProps) => createGroupTabPane(props)
 
 GroupTabs.TabPaneHeader = GroupTabHeader
 
 const TabViewComponent: FC<TabsViewProps> & Omit<TabsVariants, 'TabPaneHead'> = ({
-  cssConfig,
-  tabPosition = 'top',
-  type = 'line',
-  destroyInactiveTabPane = false,
-  children,
-  activeKey,
-  defaultActiveKey,
-  onChange,
-  testAttributes,
-  className,
-  rootHashClass,
-  ...props
-}: TabsViewProps) => {
+                                                                                   cssConfig,
+                                                                                   tabPosition = 'top',
+                                                                                   type = 'line',
+                                                                                   destroyInactiveTabPane = false,
+                                                                                   children,
+                                                                                   activeKey,
+                                                                                   defaultActiveKey,
+                                                                                   onChange,
+                                                                                   testId,
+                                                                                   testAttributes,
+                                                                                   className,
+                                                                                   rootHashClass,
+                                                                                   ...props
+                                                                                 }: TabsViewProps) => {
   const tabsRef = useRef<HTMLDivElement>(null)
-  const [visibleTabs, setVisibleTabs] = useState<ReactElement[]>(
-    children as ReactElement[]
-  )
-  const [hiddenTabs, setHiddenTabs] = useState<(ReactElement | ReactPortal)[]>(
-    []
-  )
-  const [containerWidth, setContainerWidth] = useState(0)
-  const activeTab =
-    activeKey ?? defaultActiveKey ?? (children as ReactElement[])[0]?.key ?? ''
+  const activeTab = activeKey ?? defaultActiveKey ?? (children as ReactElement[])[0]?.key ?? ''
   const [activeTabKey, setActiveTabKey] = useState(activeTab)
+  const [buttonMoreSize, setButtonMoreSize] = useState(0)
+  const [recalculateIntersectionCounter, setRecalculateIntersectionCounter] = useState(0)
+  const [containerWidth, setContainerWidth] = useState(0)
+
+  const existingTabs: ReactElement[] = useMemo(
+    () => {
+      const result: ReactElement[] = []
+      const noWrapper = extractChildrenFromFragment(children)
+      Children.forEach(noWrapper, (child) => {
+        if (isValidElement(child)) {
+          result.push(child as ReactElement)
+        }
+      })
+      return result
+    }, [children]
+  )
+
+  let lastFittingItemIndex = useIntersectionChildren(
+    tabsRef,
+    buttonMoreSize,
+    '.ant-tabs-nav-list',
+    recalculateIntersectionCounter
+  ) ?? existingTabs.length
+
+  if (tabsRef.current) {
+    const tabs = tabsRef.current.querySelectorAll('.ant-tabs-tab')
+    const lastTab = tabs[tabs.length - 1]
+    if (lastTab && ((lastTab as HTMLElement).offsetLeft + lastTab.clientWidth < containerWidth)) {
+      lastFittingItemIndex = existingTabs.length
+    }
+  }
+
+  const hasIntersection = isNumber(lastFittingItemIndex)
+  const shouldShowMoreButton =
+    hasIntersection && (lastFittingItemIndex + 1 < existingTabs.length)
+
+  const isMoreButtonActive = existingTabs.findIndex(el => activeTabKey === el.key) > lastFittingItemIndex
+
+  const dropdownItems = hasIntersection
+    ? existingTabs.slice(lastFittingItemIndex + 1, existingTabs.length)
+    : []
 
   useEffect(() => {
     setActiveTabKey(activeTab)
   }, [activeTab])
 
+  useEffect(() => {
+    setRecalculateIntersectionCounter(recalculateIntersectionCounter + 1)
+  }, [existingTabs])
+
   const onTabChange = (value: string) => {
     setActiveTabKey(value)
     onChange?.(value)
   }
 
-  useEffect(() => {
-    if (!tabsRef.current || tabPosition === 'left') {
-      return
-    }
-
-    const domTabs = tabsRef.current.querySelectorAll('.ant-tabs-tab')
-    const tabsWidth = Array.from(domTabs).map((tab) => tab.clientWidth)
-    const tabsCalculation = throttle(() => {
+  const handler = () => {
+    setTimeout(() => {
       if (tabsRef.current) {
-        let currentWidth = TAB_MORE_BUTTON_WIDTH
-        const visibleTabs: ReactElement[] = []
-        const hiddenTabs: ReactElement[] = []
-        if (Array.isArray(children)) {
-          const filteredChildren = children.filter((tab) => tab != null)
-          for (let i = 0; i < filteredChildren.length; i++) {
-            if (currentWidth + tabsWidth[i] < tabsRef.current.clientWidth) {
-              visibleTabs.push(filteredChildren[i])
-              currentWidth += tabsWidth[i] + TAB_MARGIN
-            } else {
-              hiddenTabs.push(filteredChildren[i])
-            }
-          }
-        }
-
-        setVisibleTabs(visibleTabs)
-        setHiddenTabs(hiddenTabs)
-        setContainerWidth(tabsRef.current.clientWidth)
+        const buttonWidth = tabsRef.current.querySelector('.kl6-tabs-more-button')?.getBoundingClientRect().width || 0
+        setButtonMoreSize(buttonWidth)
+        setRecalculateIntersectionCounter(recalculateIntersectionCounter + 1)
       }
-    }, 1000)
+    }, 0)
+  }
 
-    const resizeObserver = new ResizeObserver(tabsCalculation)
-    resizeObserver.observe(tabsRef.current)
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (tabsRef.current) setContainerWidth(tabsRef.current.clientWidth)
+    })
+
+    if (tabsRef.current) resizeObserver.observe(tabsRef.current)
+
+    i18n.on('languageChanged', handler)
 
     return () => {
       resizeObserver.disconnect()
+      i18n.off('languageChanged', handler)
     }
   }, [])
 
   return (
-    <TabsContext.Provider value={{ cssConfig }}>
+    <TabsContext.Provider value={{ cssConfig, testAttributes }}>
       <StyledTabsWrapper
         ref={tabsRef}
         className={cn(className, rootHashClass)}
         cssConfig={cssConfig}
-        selectedMoreButton={Number(activeTabKey) > visibleTabs.length}
+        selectedMoreButton={isMoreButtonActive}
+        shouldShowMoreButton={shouldShowMoreButton}
       >
         <StyledTabs
           cssConfig={cssConfig}
@@ -194,19 +235,18 @@ const TabViewComponent: FC<TabsViewProps> & Omit<TabsVariants, 'TabPaneHead'> =
           {...props}
           activeKey={activeTabKey as string}
           onChange={onTabChange}
-          hiddenTabsLength={hiddenTabs.length + 1}
+          hiddenTabsLength={existingTabs.length - (lastFittingItemIndex || existingTabs.length)}
           containerWidth={containerWidth}
           {...testAttributes}
         >
-          {extractTabPanes(children)}
+          {extractTabPanes(existingTabs)}
         </StyledTabs>
-        {hiddenTabs.length > 0 && (
-          <TabsDropdown
-            className={rootHashClass}
-            tabs={hiddenTabs}
-            onChange={onTabChange}
-          />
-        )}
+        <TabsDropdown
+          activeKey={activeTabKey}
+          className={rootHashClass}
+          tabs={dropdownItems}
+          onChange={onTabChange}
+        />
       </StyledTabsWrapper>
     </TabsContext.Provider>
   )
diff --git a/packages/kaspersky-components/src/tabs/TabsDropdown.tsx b/packages/kaspersky-components/src/tabs/TabsDropdown.tsx
index 807b823..94f210a 100644
--- a/packages/kaspersky-components/src/tabs/TabsDropdown.tsx
+++ b/packages/kaspersky-components/src/tabs/TabsDropdown.tsx
@@ -1,20 +1,24 @@
-import React, { ReactElement } from 'react'
-import { Dropdown } from '@src/dropdown'
+import { Dropdown, DropdownProps } from '@src/dropdown'
 import { Locale } from '@src/locale'
-import { ArrowDown1 } from '@kaspersky/icons/16'
+import React, { ReactElement, Key } from 'react'
+
+import { ArrowDown1 } from '@kl/icons/16'
+
 import { StyledMoreButton } from './tabsCss'
 
 type TabsDropdownProps = {
   tabs: ReactElement[],
+  activeKey: Key,
   onChange: ((activeKey: string) => void) | undefined,
   className?: string
 }
 
 export const TabsDropdown = ({
-  tabs,
-  onChange,
-  className
-}: TabsDropdownProps): JSX.Element => {
+                               tabs,
+                               onChange,
+                               activeKey,
+                               className
+                             }: TabsDropdownProps): JSX.Element => {
   return (
     <Dropdown
       trigger={['click']}
@@ -25,11 +29,16 @@ export const TabsDropdown = ({
           children: tab.props.tab,
           onClick: () => onChange?.(String(tab.key) || ''),
           key: tab.key,
-          disabled: tab.props.disabled
+          disabled: tab.props.disabled,
+          className: tab.key === activeKey ? 'kl6-dropdown-active-tab' : ''
         }
       })}
     >
-      <StyledMoreButton mode='tertiary' iconAfter={<ArrowDown1 />}>
+      <StyledMoreButton
+        className="kl6-tabs-more-button"
+        mode='tertiary'
+        iconAfter={<ArrowDown1 />}
+      >
         <Locale localizationKey={'tabs.dropdown.more'} />
       </StyledMoreButton>
     </Dropdown>
diff --git a/packages/kaspersky-components/src/tabs/tabsCss.ts b/packages/kaspersky-components/src/tabs/tabsCss.ts
index 787ace1..f1feaa2 100644
--- a/packages/kaspersky-components/src/tabs/tabsCss.ts
+++ b/packages/kaspersky-components/src/tabs/tabsCss.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 import { Button } from '@src/button'
 import { Divider } from '@src/divider'
-import { Text } from '@src/typography/text'
+import { Text } from '@src/typography'
 import { TabsCssConfig } from './types'
 import { getFromProps } from '@helpers/getFromProps'
 import { SPACES } from '@design-system/theme'
@@ -19,7 +19,8 @@ const fromProps = getFromProps<TabsCssConfig>()
 const tabsSizes = {
   tabList: {
     gap: `${SPACES[2]}px`,
-    padding: `${SPACES[12]}px ${SPACES[6]}px`
+    padding: `${SPACES[12]}px ${SPACES[6]}px`,
+    margin: `0 0 ${SPACES[12]}px 0`
   },
   topTab: {
     padding: `${SPACES[1]}px ${SPACES[4]}px`,
@@ -113,7 +114,6 @@ const cardTabsCss = css`
 
 const leftTabsCss = css`
   && > .ant-tabs-nav {
-    min-height: 100vh;
     width: 280px;
     padding: ${tabsSizes.tabList.padding};
     border-right: 1px solid ${fromProps('divider.color')};
@@ -141,6 +141,10 @@ const leftTabsCss = css`
 
       ${StyledDivider} {
         margin: 0 0 8px 0;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
 
       .ant-tabs-tab-btn {
@@ -188,6 +192,10 @@ export const tabsCss = css<{
     cursor: inherit;
   }
 
+  &.ant-tabs-top > .ant-tabs-nav {
+    margin: ${tabsSizes.tabList.margin};
+  }
+
   && .ant-tabs-nav-wrap {
     overflow: visible;
   }
@@ -242,10 +250,12 @@ export const tabsCss = css<{
     margin-left: ${tabsSizes.tabList.gap};
   }
 
-  ${props => props.hiddenTabsLength && `
-  .ant-tabs-tab:nth-last-child(-n + ${props.hiddenTabsLength}) {
-    display: none;
-  }`}
+  ${props => props.hiddenTabsLength
+    ? `.ant-tabs-tab:nth-last-child(-n + ${props.hiddenTabsLength}) {
+        visibility: hidden;
+      }`
+    : ''
+  }
 
   .ant-tabs-tab {
     padding: 0;
@@ -348,17 +358,35 @@ export const tabPaneHeadCss = css<{ cssConfig: TabsCssConfig }>`
 
 export const tabsWrapperCss = css<{
   cssConfig: TabsCssConfig,
-  selectedMoreButton: boolean
+  selectedMoreButton: boolean,
+  shouldShowMoreButton: boolean
 }>`
   width: 100%;
   display: flex;
   justify-content: space-between;
+  overflow: hidden;
+
+  .ant-tabs-ink-bar {
+    ${props => props.selectedMoreButton && `
+      display: none;
+    `}
+  }
+
+  .kl6-tabs-more-button{
+
+  }
 
   && ${StyledMoreButton} {
+    position: absolute;
+    right: 24px;
     color: ${fromProps('unSelected.enabled.color')};
     ${props => props.selectedMoreButton && `
       color: ${fromProps('selected.enabled.color')(props)};
     `}
+    ${props => props.shouldShowMoreButton
+      ? ''
+      : 'visibility: hidden;'
+    }
     ${textSizesCss}; 
 
     padding: ${tabsSizes.topTab.padding};
@@ -367,7 +395,7 @@ export const tabsWrapperCss = css<{
     height: 24px;
     border-radius: 4px;
     min-width: fit-content;
-    
+
     &::before {
       display: none;
       position: absolute;
diff --git a/packages/kaspersky-components/src/tabs/types.ts b/packages/kaspersky-components/src/tabs/types.ts
index a2ccb0c..5b7b82c 100644
--- a/packages/kaspersky-components/src/tabs/types.ts
+++ b/packages/kaspersky-components/src/tabs/types.ts
@@ -6,6 +6,7 @@ import {
   CSSProperties,
   FC
 } from 'react'
+import { IndicatorMode } from '@src/indicator'
 import { SpaceProps } from '@src/space'
 import { Theme } from '@design-system/types/Theme'
 import { TestingProps, ToViewProps } from '@helpers/typesHelpers'
@@ -72,9 +73,15 @@ export type TabsViewProps = TabsToViewProps<TabsProps> & { rootHashClass?: strin
 
 export type TabPaneHeadProps = {
   text: string,
+  /** Icon before text */
+  iconBefore?: ReactNode,
+  /** Icon after text */
+  iconAfter?: ReactNode,
+  /** @deprecated Use 'iconBefore' prop instead */
   icon?: ReactNode,
   number?: number,
   indicator?: boolean,
+  indicatorMode?: IndicatorMode,
   cssConfig?: TabsCssConfig,
   /** @deprecated Disabled state - use TabPane disabled prop instead */
   disabled?: boolean