diff --git a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html
index 4ce3a4caa..9ef7eed91 100644
--- a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html
+++ b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html
@@ -1,6 +1,6 @@
 <div class="docs-live-example__container">
     @if (exampleData) {
-        <div class="docs-live-example__example">
+        <div class="docs-live-example__example docs-live-example__example_{{ exampleId }}">
             @if (exampleComponentType && exampleModuleFactory) {
                 <ng-template
                     [ngComponentOutlet]="exampleComponentType"
diff --git a/packages/components/tabs/_tabs-common.scss b/packages/components/tabs/_tabs-common.scss
index 7fe43fd85..3c187f7ca 100644
--- a/packages/components/tabs/_tabs-common.scss
+++ b/packages/components/tabs/_tabs-common.scss
@@ -75,8 +75,8 @@
         position: absolute;
         left: 0;
         right: 0;
-        top: -8px;
-        bottom: -8px;
+        top: -10px;
+        bottom: -10px;
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-selected:after {
@@ -84,7 +84,7 @@
         position: absolute;
         left: 0;
         right: 0;
-        bottom: -11px;
+        bottom: -10px;
         height: 3px;
         border-radius: 2px 2px 0 0;
         background: rgba(33, 34, 44, 1);
@@ -94,6 +94,7 @@
         justify-content: flex-start;
 
         & .kbq-tab-label__content {
+            display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
diff --git a/packages/components/tabs/_tabs-theme.scss b/packages/components/tabs/_tabs-theme.scss
index 589d48421..0142d0538 100644
--- a/packages/components/tabs/_tabs-theme.scss
+++ b/packages/components/tabs/_tabs-theme.scss
@@ -19,6 +19,10 @@
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
+    &.kbq-tab-label_empty {
+        color: kbq-css-variable(foreground-contrast-secondary);
+    }
+
     &.kbq-selected {
         @include kbq-tab-item-state($type, $sub-type, states-selected);
 
diff --git a/packages/components/tabs/tab-header.scss b/packages/components/tabs/tab-header.scss
index 004d54a2e..a7960452b 100644
--- a/packages/components/tabs/tab-header.scss
+++ b/packages/components/tabs/tab-header.scss
@@ -25,8 +25,18 @@
 }
 
 .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
+    position: relative;
     padding: 8px 0;
-    border-bottom: 1px solid rgba(13, 14, 18, 0.12);
+}
+
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(13, 14, 18, 0.12);
 }
 
 .kbq-tab-header__pagination {
diff --git a/packages/components/tabs/tabs.md b/packages/components/tabs/tabs.md
index 77b8162dc..4a7f5d7f4 100644
--- a/packages/components/tabs/tabs.md
+++ b/packages/components/tabs/tabs.md
@@ -1,23 +1,65 @@
-### Default tabs
+Вкладки — способ отображения связанной информации на отдельных подписанных областях экрана.
 
 <!-- example(tabs-overview) -->
 
-### Vertical tabs
+### Состояния
+
+#### Вертикальные вкладки
+
+Длинный список вкладок можно разместить вертикально, чтобы все элементы были видны без прокрутки.
 
 <!-- example(tabs-vertical) -->
 
-### Stretch tabs
+Вертикальный вкладки можно использовать и без подписи. Добавляйте тултип иконкам, чтобы пояснить название раздела.
 
-<!-- example(tabs-stretch) -->
+<!-- example(tabs-vertical-icons) -->
 
-### Tabs with scroll
+#### Вкладки с полоской
 
-<!-- example(tabs-with-scroll) -->
+<!-- example(tabs-underlined) -->
+
+#### Disabled
+
+Неактивный таб нельзя выбрать, а выбранный неактивный нельзя переключить.
 
-### Empty tab
+<!-- example(tabs-disabled) -->
+
+#### Пустая вкладка
+
+Вкладка, внутри которой нет контента, может оформляться по‑особенному, чтобы заранее обозначить для пользователя, что нет нужды изучать содержимое: она будет серой в невыбранном состоянии.
 
 <!-- example(tabs-empty) -->
 
-### Old tabs
+#### Прокрутка
+
+Горизонтальные вкладки скрываются за областью видимости без переноса на новую строку или колонку (для вертикальных вкладок) и появляется прокрутка.
+
+<!-- example(tabs-with-scroll) -->
+
+### Примеры использования
+
+#### Выравнивание по ширине
+
+По умолчанию ширина горизонтальных вкладов зависит от подписей внутри элементов, но при необходимости панель табов может заполнять все пространство контейнера.
+
+<!-- example(tabs-stretch) -->
+
+#### Кнопки в строке вкладок
+
+Кнопки действий удобно разместить в строке с более высокими подчеркнутыми вкладками.
+
+<!-- example(tabs-actionbar) -->
+
+### Рекомендации
+
+Используйте для навигации по контенту на странице, когда важно дать быстрый доступ его к отдельным частям.
+
+По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять примечания для разработчика, например: обрати внимание, это не вкладки, а шаги формы.
+
+Не используйте вкладки:
 
-<!-- example(tabs-old) -->
+-   Когда весь контент можно разместить на одной странице, на одном экране. Незачем прятать его части под вкладки. Когда предполагается всего одна вкладка, то панель вкладок вовсе не нужна.
+-   Для выбора значения в формах. Не путайте вкладки с полями ввода: [радиокнопками](/components/radio), [кнопками-переключателями](/components/button-toggle). Вкладки — это навигация.
+-   Для основной навигации, для этого есть компонент [Navbar](/components/navbar). Используйте вкладки для второстепенной навигации.
+-   Когда надо изменить представление одних и тех же данных (список, плитка, таблица). Взамен используйте [кнопку-меню](/components/dropdown) или [кнопку-переключатель](/components/button-toggle).
+-   Когда контент уже вложен во вкладку. В том числе нельзя одновременно использовать вертикальные и горизонтальные вкладки. Вместо этого сократите количество вкладок, используйте только один вид вкладок или кнопку-переключатель, кнопку-меню.
diff --git a/packages/docs-examples/components/tabs/index.ts b/packages/docs-examples/components/tabs/index.ts
index ecb1be43e..63d174b04 100644
--- a/packages/docs-examples/components/tabs/index.ts
+++ b/packages/docs-examples/components/tabs/index.ts
@@ -2,31 +2,41 @@ import { NgModule } from '@angular/core';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqTabsModule } from '@koobiq/components/tabs';
+import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { TabActiveTabIndexExample } from './tab-active-tab-index/tab-active-tab-index-example';
 import { TabActiveTabExample } from './tab-active-tab/tab-active-tab-example';
+import { TabsActionbarExample } from './tabs-actionbar/tabs-actionbar-example';
+import { TabsDisabledExample } from './tabs-disabled/tabs-disabled-example';
 import { TabsEmptyExample } from './tabs-empty/tabs-empty-example';
-import { TabsOldExample } from './tabs-old/tabs-old-example';
 import { TabsOverviewExample } from './tabs-overview/tabs-overview-example';
 import { TabsStretchExample } from './tabs-stretch/tabs-stretch-example';
+import { TabsUnderlinedExample } from './tabs-underlined/tabs-underlined-example';
+import { TabsVerticalIconsExample } from './tabs-vertical-icons/tabs-vertical-icons-example';
 import { TabsVerticalExample } from './tabs-vertical/tabs-vertical-example';
 import { TabsWithScrollExample } from './tabs-with-scroll/tabs-with-scroll-example';
 
 export {
     TabActiveTabExample,
     TabActiveTabIndexExample,
+    TabsActionbarExample,
+    TabsDisabledExample,
     TabsEmptyExample,
-    TabsOldExample,
     TabsOverviewExample,
     TabsStretchExample,
+    TabsUnderlinedExample,
     TabsVerticalExample,
+    TabsVerticalIconsExample,
     TabsWithScrollExample
 };
 
 const EXAMPLES = [
+    TabsActionbarExample,
     TabsOverviewExample,
-    TabsOldExample,
+    TabsDisabledExample,
     TabsStretchExample,
+    TabsUnderlinedExample,
     TabsVerticalExample,
+    TabsVerticalIconsExample,
     TabsWithScrollExample,
     TabsEmptyExample,
     TabActiveTabExample,
@@ -37,7 +47,8 @@ const EXAMPLES = [
     imports: [
         KbqTabsModule,
         KbqIconModule,
-        KbqButtonModule
+        KbqButtonModule,
+        KbqToolTipModule
     ],
     declarations: EXAMPLES,
     exports: EXAMPLES
diff --git a/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.css b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.css
new file mode 100644
index 000000000..16fe1ed1d
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.css
@@ -0,0 +1,47 @@
+.docs-live-example__example_tabs-actionbar {
+    padding-right: 0;
+}
+
+.tabs-actionbar-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+
+.tabs-actionbar-example__center {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    min-width: 16px;
+
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        background: rgba(13, 14, 18, 0.12);
+    }
+}
+
+.tabs-actionbar-example__controls {
+    position: relative;
+    display: flex;
+    padding: 8px 20px 8px 0;
+
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 20px;
+        height: 1px;
+        background: rgba(13, 14, 18, 0.12);
+    }
+
+    button + button {
+        margin-left: 8px;
+    }
+}
diff --git a/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.html b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.html
new file mode 100644
index 000000000..eb9504ff4
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.html
@@ -0,0 +1,37 @@
+<div class="tabs-actionbar-example">
+    <kbq-tab-group underlined>
+        <kbq-tab [label]="'BitDefender'" />
+        <kbq-tab [label]="'Fortinet'" />
+        <kbq-tab [label]="'Kaspersky'" />
+    </kbq-tab-group>
+    <div class="tabs-actionbar-example__center"></div>
+    <div class="tabs-actionbar-example__controls">
+        <button
+            kbq-button
+            class="kbq-button_transparent"
+            [color]="'contrast'"
+        >
+            <i
+                kbq-icon="kbq-list_16"
+                [color]="'theme'"
+            ></i>
+        </button>
+        <button
+            kbq-button
+            class="kbq-button_transparent"
+            [color]="'contrast'"
+        >
+            <i
+                kbq-icon="kbq-filter_16"
+                [color]="'theme'"
+            ></i>
+        </button>
+        <button
+            kbq-button
+            [color]="'contrast'"
+        >
+            <i kbq-icon="kbq-plus_16"></i>
+            Создать дашборд
+        </button>
+    </div>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.ts b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.ts
new file mode 100644
index 000000000..76ce802c5
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.ts
@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * @title Tabs actionbar
+ */
+@Component({
+    selector: 'tabs-actionbar-example',
+    templateUrl: 'tabs-actionbar-example.html',
+    styleUrls: ['tabs-actionbar-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsActionbarExample {}
diff --git a/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.css b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.css
new file mode 100644
index 000000000..955eef56a
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.css
@@ -0,0 +1,5 @@
+.tabs-disabled-example {
+    kbq-tab-group + kbq-tab-group {
+        margin-top: 16px;
+    }
+}
diff --git a/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.html b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.html
new file mode 100644
index 000000000..d1451412b
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.html
@@ -0,0 +1,30 @@
+<div class="tabs-disabled-example">
+    <kbq-tab-group>
+        <kbq-tab [label]="'Bruteforce'" />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Complex Attack'"
+        />
+        <kbq-tab [label]="'DDoS'" />
+        <kbq-tab [label]="'DoS'" />
+    </kbq-tab-group>
+
+    <kbq-tab-group>
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Bruteforce'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Complex Attack'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'DDoS'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'DoS'"
+        />
+    </kbq-tab-group>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.ts b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.ts
new file mode 100644
index 000000000..2e39a6903
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.ts
@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * @title Tabs disabled
+ */
+@Component({
+    selector: 'tabs-disabled-example',
+    templateUrl: 'tabs-disabled-example.html',
+    styleUrls: ['tabs-disabled-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsDisabledExample {}
diff --git a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css
index fd5dabce7..b086232d3 100644
--- a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css
+++ b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css
@@ -1,3 +1,8 @@
-.empty-tab-content {
-    text-align: center;
+.tabs-empty-example {
+    .empty-tab-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+    }
 }
diff --git a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.html b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.html
index ab2628480..33db604e2 100644
--- a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.html
+++ b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.html
@@ -1,19 +1,52 @@
-<kbq-tab-group>
-    <kbq-tab [label]="'First'">Contents for First tab</kbq-tab>
-
-    <kbq-tab [label]="'Second'">Contents for Second tab</kbq-tab>
-
-    <kbq-tab
-        [empty]="true"
-        [label]="'Комментарии'"
-        [tooltipTitle]="'Text for empty tab'"
-    >
-        <div class="empty-tab-content">
-            Комментариев нет
-            <br />
-            Все заметки будут храниться здесь
-        </div>
-    </kbq-tab>
-
-    <kbq-tab [label]="'Third'">Contents for Third tab</kbq-tab>
-</kbq-tab-group>
+<div class="tabs-empty-example">
+    <kbq-tab-group>
+        <kbq-tab [label]="'Bruteforce'">
+            <div class="empty-tab-content">Зарегистрировано 1005 инцидентов</div>
+        </kbq-tab>
+        <kbq-tab [label]="'Complex Attack'">
+            <p>
+                Монолит увлажняет шурф, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь
+                рассматриваться. В первом приближении обеднение адсорбирует журавчик даже в том случае, если
+                непосредственное наблюдение этого явления затруднительно. Выветривание традиционно нагревает агрегат,
+                что лишний раз подтверждает правоту Докучаева. Кротовина, в сочетании с традиционными агротехническими
+                приемами, химически усиливает полидисперсный агрегат.
+            </p>
+            <p>
+                Не ставя под сомнение возможность разных подходов к почве, впитывание адсорбирует десуктивно-выпотной
+                лёсс. К.К.Гедройцем было показано, что определение упруго-пластично. Минерал, как бы это ни казалось
+                парадоксальным, сложен. Потускула, в сочетании с традиционными агротехническими приемами, изотермично
+                растягивает водонасыщенный латерит. Переувлажнение пространственно поглощает режим.
+            </p>
+        </kbq-tab>
+        <kbq-tab
+            [empty]="true"
+            [label]="'DDoS'"
+            [tooltipPlacement]="PopUpPlacements.Top"
+            [tooltipTitle]="'Нет инцидентов'"
+        >
+            <div class="empty-tab-content">DDoS-атак не зарегистрированов</div>
+        </kbq-tab>
+        <kbq-tab [label]="'DoS'">
+            <p>
+                Потому воспользоваться или разъясню некоей бы возжаждал умеет истину некоей, такого - немалое возникают
+                наслаждение равно или наслаждение нет избегает когда такие. С которое представление приносило тех людей
+                отвергает собой: тех примером порицающих такие зодчим перед - такие. Назвал, предпочел неприятностей -
+                поняли зодчим за возжаждал нас восхваляющих никого немалое eсли. И великие возникает именно открывший,
+                что было что из откуда зодчим. Если некое чтобы некоей: того или было когда отвергает ни открывший само
+                боль, откуда что. Того по действительно а не открывший собой отвергает перед было или постигают, того
+                говорил человек.
+            </p>
+            <p>
+                Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие
+                раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости
+                порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было
+                возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек
+                никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть
+                обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину
+                обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину
+                стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает.
+                Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
+            </p>
+        </kbq-tab>
+    </kbq-tab-group>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.ts b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.ts
index 0ccf083c3..89211e3fa 100644
--- a/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.ts
+++ b/packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.ts
@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { PopUpPlacements } from '@koobiq/components/core';
 
 /**
  * @title Tabs empty
@@ -9,4 +10,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
     styleUrls: ['tabs-empty-example.css'],
     encapsulation: ViewEncapsulation.None
 })
-export class TabsEmptyExample {}
+export class TabsEmptyExample {
+    protected readonly PopUpPlacements = PopUpPlacements;
+}
diff --git a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.css b/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.css
deleted file mode 100644
index 743230875..000000000
--- a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.css
+++ /dev/null
@@ -1 +0,0 @@
-/** No CSS for this example */
diff --git a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.html b/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.html
deleted file mode 100644
index e3a1fafd5..000000000
--- a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<kbq-tab-group kbq-old-tabs>
-    <kbq-tab [label]="'Fact 4'">Chuck Norris counted to infinity. Twice.</kbq-tab>
-    <kbq-tab [label]="'Fact 5'">Chuck Norris can speak braille.</kbq-tab>
-    <kbq-tab
-        [disabled]="true"
-        [label]="'Fact 6'"
-    >
-        nothing
-    </kbq-tab>
-</kbq-tab-group>
diff --git a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.ts b/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.ts
deleted file mode 100644
index b70b41adc..000000000
--- a/packages/docs-examples/components/tabs/tabs-old/tabs-old-example.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-/**
- * @title Navbar
- */
-@Component({
-    selector: 'tabs-old-example',
-    templateUrl: 'tabs-old-example.html',
-    styleUrls: ['tabs-old-example.css'],
-    encapsulation: ViewEncapsulation.None
-})
-export class TabsOldExample {}
diff --git a/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.html b/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.html
index 43c41eae9..52d97aa88 100644
--- a/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.html
+++ b/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.html
@@ -1,22 +1,6 @@
 <kbq-tab-group>
-    <kbq-tab [disabled]="true">
-        <ng-template kbq-tab-label>
-            <i kbq-icon="kbq-play_16"></i>
-            Fact 1
-        </ng-template>
-        Chuck Norris can hear sign language.
-    </kbq-tab>
-
-    <kbq-tab>
-        <ng-template kbq-tab-label>
-            Fact 2
-            <i kbq-icon="kbq-play_16"></i>
-        </ng-template>
-        Chuck Norris makes onions cry.
-    </kbq-tab>
-
-    <kbq-tab>
-        <ng-template kbq-tab-label>Fact 3</ng-template>
-        nothing
-    </kbq-tab>
+    <kbq-tab [label]="'Bruteforce'" />
+    <kbq-tab [label]="'Complex Attack'" />
+    <kbq-tab [label]="'DDoS'" />
+    <kbq-tab [label]="'DoS'" />
 </kbq-tab-group>
diff --git a/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.ts b/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.ts
index 9429032e5..3c0450f7f 100644
--- a/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.ts
+++ b/packages/docs-examples/components/tabs/tabs-overview/tabs-overview-example.ts
@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 /**
- * @title Tabs
+ * @title Tabs overview
  */
 @Component({
     selector: 'tabs-overview-example',
diff --git a/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.html b/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.html
index 4d23e7cc4..487afe8dc 100644
--- a/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.html
+++ b/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.html
@@ -1,5 +1,5 @@
 <kbq-tab-group kbq-stretch-tabs>
-    <kbq-tab [label]="'Fact 7'">Chuck Norris knows Victoria's secret.</kbq-tab>
-    <kbq-tab [label]="'Fact 7'">Chuck Norris can drown a fish.</kbq-tab>
-    <kbq-tab [label]="'Fact 7'">Chuck Norris narrates Morgan Freeman's life.</kbq-tab>
+    <kbq-tab [label]="'Bruteforce'" />
+    <kbq-tab [label]="'Identity Theft'" />
+    <kbq-tab [label]="'Spam Attack'" />
 </kbq-tab-group>
diff --git a/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.ts b/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.ts
index 9ae722f9c..9868ad979 100644
--- a/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.ts
+++ b/packages/docs-examples/components/tabs/tabs-stretch/tabs-stretch-example.ts
@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 /**
- * @title Navbar
+ * @title Tabs stretch
  */
 @Component({
     selector: 'tabs-stretch-example',
diff --git a/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.css b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.css
new file mode 100644
index 000000000..1803b6809
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.css
@@ -0,0 +1,5 @@
+.tabs-underlined-example {
+    kbq-tab-group + kbq-tab-group {
+        margin-top: 16px;
+    }
+}
diff --git a/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.html b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.html
new file mode 100644
index 000000000..05e9c03ec
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.html
@@ -0,0 +1,58 @@
+<div class="tabs-underlined-example">
+    <kbq-tab-group underlined>
+        <kbq-tab [label]="'Bruteforce'" />
+        <kbq-tab [label]="'Complex Attack'" />
+        <kbq-tab [label]="'DDoS'" />
+        <kbq-tab [label]="'DoS'" />
+    </kbq-tab-group>
+
+    <kbq-tab-group underlined>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                Spam Attack
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                Miscellaneous
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                DDoS
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                IDS/IPS Alert
+            </ng-template>
+        </kbq-tab>
+    </kbq-tab-group>
+
+    <kbq-tab-group underlined>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+        </kbq-tab>
+    </kbq-tab-group>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.ts b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.ts
new file mode 100644
index 000000000..eef9cf8e4
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-underlined/tabs-underlined-example.ts
@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * @title Tabs underlined
+ */
+@Component({
+    selector: 'tabs-underlined-example',
+    templateUrl: 'tabs-underlined-example.html',
+    styleUrls: ['tabs-underlined-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsUnderlinedExample {}
diff --git a/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.css b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.css
new file mode 100644
index 000000000..cc33518e6
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.css
@@ -0,0 +1,17 @@
+.tabs-vertical-icons-example {
+    .kbq-tab-group_vertical {
+        height: 220px;
+    }
+
+    .kbq-tab-body__wrapper {
+        padding-left: 20px;
+
+        p:first-child {
+            margin-top: 0;
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
diff --git a/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.html b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.html
new file mode 100644
index 000000000..adb006849
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.html
@@ -0,0 +1,111 @@
+<div class="tabs-vertical-icons-example">
+    <kbq-tab-group
+        vertical
+        class="docs-vertical-tabs"
+    >
+        <kbq-tab
+            [empty]="true"
+            [tooltipPlacement]="PopUpPlacements.Left"
+            [tooltipTitle]="'Bruteforce'"
+        >
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+            <p>
+                Монолит увлажняет шурф, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь
+                рассматриваться. В первом приближении обеднение адсорбирует журавчик даже в том случае, если
+                непосредственное наблюдение этого явления затруднительно. Выветривание традиционно нагревает агрегат,
+                что лишний раз подтверждает правоту Докучаева. Кротовина, в сочетании с традиционными агротехническими
+                приемами, химически усиливает полидисперсный агрегат.
+            </p>
+            <p>
+                Не ставя под сомнение возможность разных подходов к почве, впитывание адсорбирует десуктивно-выпотной
+                лёсс. К.К.Гедройцем было показано, что определение упруго-пластично. Минерал, как бы это ни казалось
+                парадоксальным, сложен. Потускула, в сочетании с традиционными агротехническими приемами, изотермично
+                растягивает водонасыщенный латерит. Переувлажнение пространственно поглощает режим.
+            </p>
+        </kbq-tab>
+        <kbq-tab
+            [empty]="true"
+            [tooltipPlacement]="PopUpPlacements.Left"
+            [tooltipTitle]="'Complex Attack'"
+        >
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+
+            <p>
+                Потому воспользоваться или разъясню некоей бы возжаждал умеет истину некоей, такого - немалое возникают
+                наслаждение равно или наслаждение нет избегает когда такие. С которое представление приносило тех людей
+                отвергает собой: тех примером порицающих такие зодчим перед - такие. Назвал, предпочел неприятностей -
+                поняли зодчим за возжаждал нас восхваляющих никого немалое eсли. И великие возникает именно открывший,
+                что было что из откуда зодчим. Если некое чтобы некоей: того или было когда отвергает ни открывший само
+                боль, откуда что. Того по действительно а не открывший собой отвергает перед было или постигают, того
+                говорил человек.
+            </p>
+            <p>
+                Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие
+                раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости
+                порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было
+                возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек
+                никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть
+                обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину
+                обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину
+                стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает.
+                Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
+            </p>
+        </kbq-tab>
+        <kbq-tab
+            [empty]="true"
+            [tooltipPlacement]="PopUpPlacements.Left"
+            [tooltipTitle]="'DDoS'"
+        >
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+            <p>
+                Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие
+                раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости
+                порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было
+                возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек
+                никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть
+                обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину
+                обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину
+                стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает.
+                Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
+            </p>
+            <p>
+                Возникает раскрою возлюбил потому: нет, тех возжаждал, никакого счастливой тех с, всю справедливости
+                никаких некоей предпочел физическими великие мог как избегал иной. Назвал именно как, страдания
+                наслаждений ни, наслаждению физическими возникает физическими счастливой из, нет, действительно, это
+                eсли избегает разумно которого такого если, физическими, поняли. Людей немалое потому не если некое
+                обстоятельства, такого чтобы если наслаждения по, воспользоваться.
+            </p>
+        </kbq-tab>
+        <kbq-tab
+            [empty]="true"
+            [tooltipPlacement]="PopUpPlacements.Left"
+            [tooltipTitle]="'DoS'"
+        >
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+            </ng-template>
+            <p>
+                Возникает раскрою возлюбил потому: нет, тех возжаждал, никакого счастливой тех с, всю справедливости
+                никаких некоей предпочел физическими великие мог как избегал иной. Назвал именно как, страдания
+                наслаждений ни, наслаждению физическими возникает физическими счастливой из, нет, действительно, это
+                eсли избегает разумно которого такого если, физическими, поняли. Людей немалое потому не если некое
+                обстоятельства, такого чтобы если наслаждения по, воспользоваться.
+            </p>
+            <p>
+                Пользы некоей физическими само было собой назвал но я - картину или стал перед не разъясню людей не
+                именно такие, ни равно умеет, избегал не, представление. Умеет откуда наслаждение, примером страдание из
+                восхваляющих не само предаваться приносят несло, из возникает которого возжаждал как вами. Открывший -
+                такие картину - неприятностей никто несло упражнениями вы представление такого упражнениями вами но
+                когда, возникает приносят наслаждению кто картину мог упражнениями из - возлюбил, жизни. Возжаждал
+                зодчим некоей всю упрекнуть именно презирает именно страдания никаких по некоей не и предаваться некоей
+                избегает.
+            </p>
+        </kbq-tab>
+    </kbq-tab-group>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.ts b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.ts
new file mode 100644
index 000000000..058dc7520
--- /dev/null
+++ b/packages/docs-examples/components/tabs/tabs-vertical-icons/tabs-vertical-icons-example.ts
@@ -0,0 +1,15 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PopUpPlacements } from '@koobiq/components/core';
+
+/**
+ * @title Tabs vertical icons
+ */
+@Component({
+    selector: 'tabs-vertical-icons-example',
+    templateUrl: 'tabs-vertical-icons-example.html',
+    styleUrls: ['tabs-vertical-icons-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsVerticalIconsExample {
+    protected readonly PopUpPlacements = PopUpPlacements;
+}
diff --git a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.css b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.css
index 8d65f1753..f3df5c8e0 100644
--- a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.css
+++ b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.css
@@ -1,7 +1,21 @@
-.kbq-tab-group_vertical {
-    height: 240px;
-}
+.tabs-vertical-example {
+    .kbq-tab-group_vertical {
+        height: 220px;
+    }
+
+    .kbq-tab-header {
+        max-width: 160px;
+    }
+
+    .kbq-tab-body__wrapper {
+        padding-left: 20px;
+
+        p:first-child {
+            margin-top: 0;
+        }
 
-.docs-vertical-tabs .kbq-tab-header {
-    max-width: 30%;
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
 }
diff --git a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.html b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.html
index b95805b8b..1f9fc51fe 100644
--- a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.html
+++ b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.html
@@ -1,33 +1,98 @@
-<kbq-tab-group
-    vertical
-    class="docs-vertical-tabs"
->
-    <kbq-tab>
-        <ng-template kbq-tab-label>
-            <i kbq-icon="kbq-play_16"></i>
-            First long long long long long long long long tab name
-            <i kbq-icon="kbq-play_16"></i>
-        </ng-template>
-        Content 1
-    </kbq-tab>
-
-    <kbq-tab
-        [empty]="true"
-        [tooltipTitle]="'Text for empty tab'"
+<div class="tabs-vertical-example">
+    <kbq-tab-group
+        vertical
+        class="docs-vertical-tabs"
     >
-        <ng-template kbq-tab-label>
-            Empty Empty Empty Empty Empty Empty Empty Empty Empty
-            <i kbq-icon="kbq-play_16"></i>
-        </ng-template>
-        Empty Content
-    </kbq-tab>
-
-    <kbq-tab [label]="'long long long long long long long long tab name'">Content 4</kbq-tab>
-    <kbq-tab [label]="'Tab 4'">Content 4</kbq-tab>
-    <kbq-tab [label]="'Tab 5'">Content 5</kbq-tab>
-    <kbq-tab [label]="'Tab 6'">Content 6</kbq-tab>
-    <kbq-tab [label]="'Tab 7'">Content 7</kbq-tab>
-    <kbq-tab [label]="'Tab 8'">Content 8</kbq-tab>
-    <kbq-tab [label]="'Tab 9'">Content 9</kbq-tab>
-    <kbq-tab [label]="'Tab 10'">Content 10</kbq-tab>
-</kbq-tab-group>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                Bruteforce
+            </ng-template>
+            <p>
+                Монолит увлажняет шурф, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь
+                рассматриваться. В первом приближении обеднение адсорбирует журавчик даже в том случае, если
+                непосредственное наблюдение этого явления затруднительно. Выветривание традиционно нагревает агрегат,
+                что лишний раз подтверждает правоту Докучаева. Кротовина, в сочетании с традиционными агротехническими
+                приемами, химически усиливает полидисперсный агрегат.
+            </p>
+            <p>
+                Не ставя под сомнение возможность разных подходов к почве, впитывание адсорбирует десуктивно-выпотной
+                лёсс. К.К.Гедройцем было показано, что определение упруго-пластично. Минерал, как бы это ни казалось
+                парадоксальным, сложен. Потускула, в сочетании с традиционными агротехническими приемами, изотермично
+                растягивает водонасыщенный латерит. Переувлажнение пространственно поглощает режим.
+            </p>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                Complex Attack
+            </ng-template>
+            <p>
+                Потому воспользоваться или разъясню некоей бы возжаждал умеет истину некоей, такого - немалое возникают
+                наслаждение равно или наслаждение нет избегает когда такие. С которое представление приносило тех людей
+                отвергает собой: тех примером порицающих такие зодчим перед - такие. Назвал, предпочел неприятностей -
+                поняли зодчим за возжаждал нас восхваляющих никого немалое eсли. И великие возникает именно открывший,
+                что было что из откуда зодчим. Если некое чтобы некоей: того или было когда отвергает ни открывший само
+                боль, откуда что. Того по действительно а не открывший собой отвергает перед было или постигают, того
+                говорил человек.
+            </p>
+            <p>
+                Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие
+                раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости
+                порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было
+                возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек
+                никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть
+                обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину
+                обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину
+                стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает.
+                Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
+            </p>
+        </kbq-tab>
+        <kbq-tab>
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                DDoS
+            </ng-template>
+            <p>
+                Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие
+                раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости
+                порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было
+                возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек
+                никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть
+                обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину
+                обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину
+                стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает.
+                Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
+            </p>
+            <p>
+                Возникает раскрою возлюбил потому: нет, тех возжаждал, никакого счастливой тех с, всю справедливости
+                никаких некоей предпочел физическими великие мог как избегал иной. Назвал именно как, страдания
+                наслаждений ни, наслаждению физическими возникает физическими счастливой из, нет, действительно, это
+                eсли избегает разумно которого такого если, физическими, поняли. Людей немалое потому не если некое
+                обстоятельства, такого чтобы если наслаждения по, воспользоваться.
+            </p>
+        </kbq-tab>
+        <kbq-tab [tooltipPlacement]="PopUpPlacements.Left">
+            <ng-template kbq-tab-label>
+                <i kbq-icon="kbq-bug_16"></i>
+                Vulnerability Exploitation
+            </ng-template>
+            <p>
+                Возникает раскрою возлюбил потому: нет, тех возжаждал, никакого счастливой тех с, всю справедливости
+                никаких некоей предпочел физическими великие мог как избегал иной. Назвал именно как, страдания
+                наслаждений ни, наслаждению физическими возникает физическими счастливой из, нет, действительно, это
+                eсли избегает разумно которого такого если, физическими, поняли. Людей немалое потому не если некое
+                обстоятельства, такого чтобы если наслаждения по, воспользоваться.
+            </p>
+            <p>
+                Пользы некоей физическими само было собой назвал но я - картину или стал перед не разъясню людей не
+                именно такие, ни равно умеет, избегал не, представление. Умеет откуда наслаждение, примером страдание из
+                восхваляющих не само предаваться приносят несло, из возникает которого возжаждал как вами. Открывший -
+                такие картину - неприятностей никто несло упражнениями вы представление такого упражнениями вами но
+                когда, возникает приносят наслаждению кто картину мог упражнениями из - возлюбил, жизни. Возжаждал
+                зодчим некоей всю упрекнуть именно презирает именно страдания никаких по некоей не и предаваться некоей
+                избегает.
+            </p>
+        </kbq-tab>
+    </kbq-tab-group>
+</div>
diff --git a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.ts b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.ts
index 5eba3a4ff..4bbc835db 100644
--- a/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.ts
+++ b/packages/docs-examples/components/tabs/tabs-vertical/tabs-vertical-example.ts
@@ -1,7 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { PopUpPlacements } from '@koobiq/components/core';
 
 /**
- * @title Navbar
+ * @title Tabs vertical
  */
 @Component({
     selector: 'tabs-vertical-example',
@@ -9,4 +10,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
     styleUrls: ['tabs-vertical-example.css'],
     encapsulation: ViewEncapsulation.None
 })
-export class TabsVerticalExample {}
+export class TabsVerticalExample {
+    protected readonly PopUpPlacements = PopUpPlacements;
+}
diff --git a/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.html b/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.html
index 636f74a13..b4359720a 100644
--- a/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.html
+++ b/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.html
@@ -1,11 +1,14 @@
 <kbq-tab-group>
-    @for (tab of tabs; track tab) {
-        <kbq-tab>
-            <ng-template kbq-tab-label>
-                <i kbq-icon="kbq-play_16"></i>
-                Tab {{ tab }}
-            </ng-template>
-            Contents for {{ tab }} tab
-        </kbq-tab>
-    }
+    <kbq-tab [label]="'Bruteforce'" />
+    <kbq-tab [label]="'Complex Attack'" />
+    <kbq-tab [label]="'DDoS'" />
+    <kbq-tab [label]="'DoS'" />
+    <kbq-tab [label]="'HIPS Alert'" />
+    <kbq-tab [label]="'IDS/IPS Alert'" />
+    <kbq-tab [label]="'Bruteforce'" />
+    <kbq-tab [label]="'Complex Attack'" />
+    <kbq-tab [label]="'DDoS'" />
+    <kbq-tab [label]="'DoS'" />
+    <kbq-tab [label]="'HIPS Alert'" />
+    <kbq-tab [label]="'IDS/IPS Alert'" />
 </kbq-tab-group>
diff --git a/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.ts b/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.ts
index 6e39807c0..0d0de8a9b 100644
--- a/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.ts
+++ b/packages/docs-examples/components/tabs/tabs-with-scroll/tabs-with-scroll-example.ts
@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 /**
- * @title Navbar
+ * @title Tabs with scroll
  */
 @Component({
     selector: 'tabs-with-scroll-example',
@@ -9,12 +9,4 @@ import { Component, ViewEncapsulation } from '@angular/core';
     styleUrls: ['tabs-with-scroll-example.css'],
     encapsulation: ViewEncapsulation.None
 })
-export class TabsWithScrollExample {
-    tabs: number[];
-
-    constructor() {
-        this.tabs = Array(20)
-            .fill(null)
-            .map((_, i) => i);
-    }
-}
+export class TabsWithScrollExample {}
diff --git a/packages/docs-examples/example-module.ts b/packages/docs-examples/example-module.ts
index a89f89e70..18253cdf4 100644
--- a/packages/docs-examples/example-module.ts
+++ b/packages/docs-examples/example-module.ts
@@ -3310,36 +3310,54 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
       "importPath": "koobiq-docs-examples-components-tabs"
     }
   },
-  "tabs-empty": {
-    "packagePath": "components/tabs/tabs-empty",
-    "title": "Tabs empty",
-    "componentName": "TabsEmptyExample",
+  "tabs-actionbar": {
+    "packagePath": "components/tabs/tabs-actionbar",
+    "title": "Tabs actionbar",
+    "componentName": "TabsActionbarExample",
     "files": [
-      "tabs-empty-example.ts",
-      "tabs-empty-example.html",
-      "tabs-empty-example.css"
+      "tabs-actionbar-example.ts",
+      "tabs-actionbar-example.html",
+      "tabs-actionbar-example.css"
     ],
-    "selector": "tabs-empty-example",
+    "selector": "tabs-actionbar-example",
     "additionalComponents": [],
-    "primaryFile": "tabs-empty-example.ts",
+    "primaryFile": "tabs-actionbar-example.ts",
     "module": {
       "name": "TabsExamplesModule",
       "importSpecifier": "components/tabs",
       "importPath": "koobiq-docs-examples-components-tabs"
     }
   },
-  "tabs-old": {
-    "packagePath": "components/tabs/tabs-old",
-    "title": "Navbar",
-    "componentName": "TabsOldExample",
+  "tabs-disabled": {
+    "packagePath": "components/tabs/tabs-disabled",
+    "title": "Tabs disabled",
+    "componentName": "TabsDisabledExample",
     "files": [
-      "tabs-old-example.ts",
-      "tabs-old-example.html",
-      "tabs-old-example.css"
+      "tabs-disabled-example.ts",
+      "tabs-disabled-example.html",
+      "tabs-disabled-example.css"
     ],
-    "selector": "tabs-old-example",
+    "selector": "tabs-disabled-example",
     "additionalComponents": [],
-    "primaryFile": "tabs-old-example.ts",
+    "primaryFile": "tabs-disabled-example.ts",
+    "module": {
+      "name": "TabsExamplesModule",
+      "importSpecifier": "components/tabs",
+      "importPath": "koobiq-docs-examples-components-tabs"
+    }
+  },
+  "tabs-empty": {
+    "packagePath": "components/tabs/tabs-empty",
+    "title": "Tabs empty",
+    "componentName": "TabsEmptyExample",
+    "files": [
+      "tabs-empty-example.ts",
+      "tabs-empty-example.html",
+      "tabs-empty-example.css"
+    ],
+    "selector": "tabs-empty-example",
+    "additionalComponents": [],
+    "primaryFile": "tabs-empty-example.ts",
     "module": {
       "name": "TabsExamplesModule",
       "importSpecifier": "components/tabs",
@@ -3348,7 +3366,7 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
   },
   "tabs-overview": {
     "packagePath": "components/tabs/tabs-overview",
-    "title": "Tabs",
+    "title": "Tabs overview",
     "componentName": "TabsOverviewExample",
     "files": [
       "tabs-overview-example.ts",
@@ -3366,7 +3384,7 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
   },
   "tabs-stretch": {
     "packagePath": "components/tabs/tabs-stretch",
-    "title": "Navbar",
+    "title": "Tabs stretch",
     "componentName": "TabsStretchExample",
     "files": [
       "tabs-stretch-example.ts",
@@ -3382,9 +3400,45 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
       "importPath": "koobiq-docs-examples-components-tabs"
     }
   },
+  "tabs-underlined": {
+    "packagePath": "components/tabs/tabs-underlined",
+    "title": "Tabs underlined",
+    "componentName": "TabsUnderlinedExample",
+    "files": [
+      "tabs-underlined-example.ts",
+      "tabs-underlined-example.html",
+      "tabs-underlined-example.css"
+    ],
+    "selector": "tabs-underlined-example",
+    "additionalComponents": [],
+    "primaryFile": "tabs-underlined-example.ts",
+    "module": {
+      "name": "TabsExamplesModule",
+      "importSpecifier": "components/tabs",
+      "importPath": "koobiq-docs-examples-components-tabs"
+    }
+  },
+  "tabs-vertical-icons": {
+    "packagePath": "components/tabs/tabs-vertical-icons",
+    "title": "Tabs vertical icons",
+    "componentName": "TabsVerticalIconsExample",
+    "files": [
+      "tabs-vertical-icons-example.ts",
+      "tabs-vertical-icons-example.html",
+      "tabs-vertical-icons-example.css"
+    ],
+    "selector": "tabs-vertical-icons-example",
+    "additionalComponents": [],
+    "primaryFile": "tabs-vertical-icons-example.ts",
+    "module": {
+      "name": "TabsExamplesModule",
+      "importSpecifier": "components/tabs",
+      "importPath": "koobiq-docs-examples-components-tabs"
+    }
+  },
   "tabs-vertical": {
     "packagePath": "components/tabs/tabs-vertical",
-    "title": "Navbar",
+    "title": "Tabs vertical",
     "componentName": "TabsVerticalExample",
     "files": [
       "tabs-vertical-example.ts",
@@ -3402,7 +3456,7 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
   },
   "tabs-with-scroll": {
     "packagePath": "components/tabs/tabs-with-scroll",
-    "title": "Navbar",
+    "title": "Tabs with scroll",
     "componentName": "TabsWithScrollExample",
     "files": [
       "tabs-with-scroll-example.ts",
diff --git a/tools/cspell-locales/en.json b/tools/cspell-locales/en.json
index 0dbaa3640..af23cf7e9 100644
--- a/tools/cspell-locales/en.json
+++ b/tools/cspell-locales/en.json
@@ -6,6 +6,7 @@
     "caseSensitive": false,
     "words": [
         "autoselect",
+        "actionbar",
         "behaviour",
         "bento",
         "codeowners",
diff --git a/tools/cspell-locales/ru.json b/tools/cspell-locales/ru.json
index a0c05ae94..26597603c 100644
--- a/tools/cspell-locales/ru.json
+++ b/tools/cspell-locales/ru.json
@@ -76,6 +76,7 @@
         "псевдоссылки",
         "псевдоссылку",
         "радиокнопок",
+        "радиокнопками",
         "сайдпанелей",
         "сайдпанели",
         "сайдпанель",
@@ -90,6 +91,7 @@
         "спиннера",
         "спиннером",
         "спиннеры",
+        "табов",
         "темизация",
         "темизации",
         "таймзон",