diff --git a/apps/taiga-lumbermill/src/components/app/app.routes.ts b/apps/taiga-lumbermill/src/components/app/app.routes.ts
index 7ed84af80..df0324a29 100644
--- a/apps/taiga-lumbermill/src/components/app/app.routes.ts
+++ b/apps/taiga-lumbermill/src/components/app/app.routes.ts
@@ -34,6 +34,13 @@ export const appRoutes: Route[] = [
             },
         ],
     },
+    {
+        path: 'theme',
+        loadComponent: async () =>
+            import('../../dashboards/theme-generator/theme-generator.component').then(
+                (mod) => mod.ThemeGeneratorComponent,
+            ),
+    },
     {
         path: '',
         loadComponent: async () =>
diff --git a/apps/taiga-lumbermill/src/components/navigation/navigation.component.html b/apps/taiga-lumbermill/src/components/navigation/navigation.component.html
index aff567117..b14fb1385 100644
--- a/apps/taiga-lumbermill/src/components/navigation/navigation.component.html
+++ b/apps/taiga-lumbermill/src/components/navigation/navigation.component.html
@@ -8,8 +8,7 @@
     </button>
     <span tuiNavigationLogo>
         <tui-icon icon="@tui.home" />
-        <span tuiFade>A very very long product name</span>
-        <tui-badge>Test</tui-badge>
+        <span tuiFade>Taiga lumbermill</span>
     </span>
     <button
         appearance="secondary"
@@ -48,69 +47,22 @@
         [tuiNavigationAside]="expanded"
     >
         <header>
-            <button
+            <a
                 iconStart="@tui.home"
+                routerLink="/"
                 tuiAsideItem
             >
-                <span tuiFade>A very very long product name</span>
-            </button>
+                <span tuiFade>Taiga lumbermill</span>
+            </a>
         </header>
-        <button
-            iconStart="@tui.search"
-            tuiAsideItem
-        >
-            Search
-        </button>
         <a
-            iconStart="@tui.users"
+            iconStart="@tui.palette"
+            routerLink="/theme"
             tuiAsideItem
         >
-            Groups
+            Theme Generator
         </a>
-        <button
-            iconStart="@tui.settings"
-            tuiAsideItem
-            [tuiAppearanceState]="open ? 'hover' : null"
-            [tuiChevron]="expanded && submenu"
-            [tuiDropdown]="dropdown"
-            [tuiDropdownEnabled]="!expanded"
-            [(tuiDropdownOpen)]="open"
-            (click)="submenu = expanded && !submenu"
-        >
-            Settings
-            <ng-template #dropdown>
-                <tui-data-list size="s">
-                    <button tuiOption>Account</button>
-                    <button tuiOption>Notifications</button>
-                    <button tuiOption>Privacy</button>
-                </tui-data-list>
-            </ng-template>
-        </button>
-        <tui-expand [expanded]="expanded && submenu">
-            <button tuiButton>Account</button>
-            <button tuiButton>Notifications</button>
-            <button tuiButton>Privacy</button>
-        </tui-expand>
-        <button
-            iconStart="@tui.heart"
-            tuiAsideItem
-        >
-            <span tuiFade>By default ellipsis is used but you can use fade too</span>
-        </button>
-        <hr />
-        <button
-            iconStart="@tui.plus"
-            tuiAsideItem
-        >
-            Add
-        </button>
         <footer>
-            <button
-                iconStart="@tui.star"
-                tuiAsideItem
-            >
-                Favorites
-            </button>
             <button
                 tuiAsideItem
                 [iconStart]="expanded ? '@tui.chevron-left' : '@tui.chevron-right'"
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.html b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.html
new file mode 100644
index 000000000..efc812ad0
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.html
@@ -0,0 +1,135 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="example-block"
+>
+    <div tuiHeader="l">
+        <h3 tuiTitle>
+            Title example
+            <div tuiSubtitle>Subtitle example</div>
+        </h3>
+    </div>
+    <tui-input-number
+        [formControl]="exampleControl"
+        [tuiTextfieldPrefix]="'USD' | tuiCurrency"
+    >
+        Type a sum
+    </tui-input-number>
+    <div class="tui-row">
+        <div class="tui-col_md-6">
+            <div
+                tuiCardLarge
+                tuiSurface="elevated"
+            >
+                <header tuiHeader>
+                    <h1 tuiTitle>
+                        Title
+                        <span tuiSubtitle>Subtitle</span>
+                    </h1>
+                </header>
+
+                <button
+                    *tuiRepeatTimes="let index of 3"
+                    tuiCell="l"
+                    tuiDropdownAlign="right"
+                    tuiDropdownOpen
+                    [tuiDropdown]="dropdown"
+                    [tuiDropdownSided]="true"
+                >
+                    <tui-avatar
+                        appearance="primary"
+                        src="@tui.star"
+                    />
+
+                    <div tuiTitle>
+                        Title
+                        <div tuiSubtitle>Description</div>
+                    </div>
+
+                    <tui-icon
+                        icon="@tui.chevron-right"
+                        tuiAppearance="icon"
+                    />
+                </button>
+
+                <button
+                    tuiLink
+                    type="button"
+                >
+                    Show all
+                </button>
+            </div>
+
+            <ng-template
+                #dropdown
+                let-close
+            >
+                <tui-data-list>
+                    <tui-opt-group>
+                        <button
+                            *ngFor="let item of ['Edit', 'Download', 'Rename', 'Delete']"
+                            tuiOption
+                        >
+                            {{ item }}
+                        </button>
+                    </tui-opt-group>
+                    <tui-opt-group>
+                        <button
+                            tuiOption
+                            (click)="close()"
+                        >
+                            Nevermind
+                        </button>
+                    </tui-opt-group>
+                </tui-data-list>
+            </ng-template>
+        </div>
+        <div class="tui-col_md-6">
+            <div
+                tuiCardLarge
+                tuiSurface="elevated"
+            >
+                <tui-input-year
+                    [formControl]="exampleYearControl"
+                    [tuiTextfieldCleaner]="true"
+                >
+                    Choose a year
+                    <input
+                        placeholder="Not 2022 please"
+                        tuiTextfieldLegacy
+                    />
+                </tui-input-year>
+                <div class="list">
+                    @for (badge of badges; track $index) {
+                        <tui-badge [appearance]="badge">
+                            {{ badge.charAt(0).toUpperCase() + badge.slice(1) }}
+                        </tui-badge>
+                    }
+                </div>
+                <input
+                    size="m"
+                    tuiCheckbox
+                    type="checkbox"
+                    [ngModel]="true"
+                />
+                <input
+                    size="m"
+                    tuiSwitch
+                    type="checkbox"
+                    [disabled]="true"
+                    [ngModel]="true"
+                />
+            </div>
+        </div>
+    </div>
+    <div class="list">
+        @for (button of buttons; track $index) {
+            <button
+                tuiButton
+                [appearance]="button"
+            >
+                {{ button.charAt(0).toUpperCase() + button.slice(1) }}
+            </button>
+        }
+    </div>
+</div>
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.less b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.less
new file mode 100644
index 000000000..ce6a67324
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.less
@@ -0,0 +1,31 @@
+@media (max-width: 1250px) {
+    .tui-row {
+        gap: 1rem;
+    }
+
+    .tui-col_md-6 {
+        width: 100%;
+    }
+}
+
+.example-block {
+    position: sticky;
+    top: 7rem;
+    height: max-content;
+    background-color: var(--tui-background-base);
+
+    @media (max-width: 570px) {
+        display: none;
+    }
+}
+
+.list {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.ts b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.ts
new file mode 100644
index 000000000..185d60434
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.ts
@@ -0,0 +1,83 @@
+import {CommonModule} from '@angular/common';
+import type {Signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    TuiHint,
+    TuiIcon,
+    TuiLink,
+    TuiOptGroup,
+    TuiSurface,
+    TuiTextfield,
+    TuiTitle,
+} from '@taiga-ui/core';
+import {TuiAvatar, TuiBadge, TuiCheckbox, TuiSwitch} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
+import {
+    TuiInputNumberModule,
+    TuiInputYearModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-theme-example',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiAppearance,
+        TuiAvatar,
+        TuiBadge,
+        TuiButton,
+        TuiCardLarge,
+        TuiCell,
+        TuiCheckbox,
+        TuiCurrencyPipe,
+        TuiDataList,
+        TuiDropdown,
+        TuiHeader,
+        TuiHint,
+        TuiIcon,
+        TuiInputNumberModule,
+        TuiInputYearModule,
+        TuiLink,
+        TuiOptGroup,
+        TuiRepeatTimes,
+        TuiSurface,
+        TuiSwitch,
+        TuiTextfield,
+        TuiTextfieldControllerModule,
+        TuiTitle,
+    ],
+    templateUrl: './theme-example.component.html',
+    styleUrl: './theme-example.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[style]': 'this.theme()',
+    },
+})
+export class ThemeExampleComponent {
+    protected readonly exampleControl = new FormControl(100);
+    protected readonly exampleYearControl = new FormControl<number | null>(null);
+    protected readonly badges = [
+        'primary',
+        'accent',
+        'success',
+        'error',
+        'warning',
+        'neutral',
+        'info',
+    ];
+
+    protected readonly buttons = ['primary', 'accent', 'destructive', 'flat', 'outline'];
+
+    @Input()
+    public theme: Signal<string> = signal('');
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.html b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.html
new file mode 100644
index 000000000..8bd0acccf
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.html
@@ -0,0 +1,25 @@
+<div class="list-colors">
+    <div tuiHeader="m">
+        <h3 tuiTitle>Colors</h3>
+    </div>
+    @for (inputColor of themeData; track $index) {
+        <tui-input-color
+            tuiTextfieldSize="m"
+            [colors]="palette"
+            [(ngModel)]="colors[$index]"
+            (ngModelChange)="colors[$index].set($event)"
+        >
+            {{ inputColor.name }}
+        </tui-input-color>
+    }
+    <code>
+        :root {{ '{' }}
+        @for (inputColor of themeData; track $index) {
+            <br />
+            {{ inputColor.variable }}: {{ colors[$index]() }};
+        }
+        <br />
+        {{ '}' }}
+    </code>
+</div>
+<lmb-theme-example [theme]="theme" />
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.less b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.less
new file mode 100644
index 000000000..facbb12f8
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.less
@@ -0,0 +1,24 @@
+:host {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: 1rem;
+
+    @media (max-width: 570px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.list-colors {
+    display: flex;
+    padding-right: 3rem;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+code {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: var(--tui-background-base-alt);
+    font-family: monospace;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.ts b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.ts
new file mode 100644
index 000000000..93e663b85
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.ts
@@ -0,0 +1,36 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, computed, signal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiAppearance, TuiTitle} from '@taiga-ui/core';
+import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+import {TUI_DEFAULT_INPUT_COLORS, TuiInputColorModule} from '@taiga-ui/legacy';
+
+import {ThemeExampleComponent} from './theme-example/theme-example.component';
+import {data} from './theme-generator.constants';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-theme-generator',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ThemeExampleComponent,
+        TuiAppearance,
+        TuiCardLarge,
+        TuiHeader,
+        TuiInputColorModule,
+        TuiTitle,
+    ],
+    templateUrl: './theme-generator.component.html',
+    styleUrl: './theme-generator.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThemeGeneratorComponent {
+    protected themeData = data;
+    protected readonly palette = TUI_DEFAULT_INPUT_COLORS;
+    protected colors = this.themeData.map((val) => signal(val.initialValue));
+
+    protected theme = computed(() =>
+        this.colors.map((val, i) => `${this.themeData[i].variable}: ${val()};`).join(' '),
+    );
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.constants.ts b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.constants.ts
new file mode 100644
index 000000000..036c51d7f
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.constants.ts
@@ -0,0 +1,217 @@
+interface ThemeData {
+    readonly name: string;
+    readonly initialValue: string;
+    readonly variable: string;
+}
+
+export const data: ThemeData[] = [
+    {name: 'background-base', initialValue: '#fff', variable: '--tui-background-base'},
+    {
+        name: 'background-base-alt',
+        initialValue: '#f6f6f6',
+        variable: '--tui-background-base-alt',
+    },
+    {
+        name: 'background-neutral-1',
+        initialValue: 'rgba(0, 0, 0, 0.04)',
+        variable: '--tui-background-neutral-1',
+    },
+    {
+        name: 'background-neutral-1-hover',
+        initialValue: 'rgba(0, 0, 0, 0.08)',
+        variable: '--tui-background-neutral-1-hover',
+    },
+    {
+        name: 'background-neutral-1-pressed',
+        initialValue: 'rgba(0, 0, 0, 0.12)',
+        variable: '--tui-background-neutral-1-pressed',
+    },
+    {
+        name: 'background-neutral-2',
+        initialValue: 'rgba(0, 0, 0, 0.08)',
+        variable: '--tui-background-neutral-2',
+    },
+    {
+        name: 'background-neutral-2-hover',
+        initialValue: 'rgba(0, 0, 0, 0.1)',
+        variable: '--tui-background-neutral-2-hover',
+    },
+    {
+        name: 'background-neutral-2-pressed',
+        initialValue: 'rgba(0, 0, 0, 0.14)',
+        variable: '--tui-background-neutral-2-pressed',
+    },
+    {
+        name: 'background-primary',
+        initialValue: '#526ed3',
+        variable: '--tui-background-accent-1',
+    },
+    {
+        name: 'background-primary-hover',
+        initialValue: '#6c86e2',
+        variable: '--tui-background-accent-1-hover',
+    },
+    {
+        name: 'background-primary-pressed',
+        initialValue: '#314692',
+        variable: '--tui-background-accent-1-pressed',
+    },
+    {
+        name: 'background-accent',
+        initialValue: '#ff7043',
+        variable: '--tui-background-accent-2',
+    },
+    {
+        name: 'background-accent-hover',
+        initialValue: '#ff9a94',
+        variable: '--tui-background-accent-2-hover',
+    },
+    {
+        name: 'background-accent-pressed',
+        initialValue: '#e7716a',
+        variable: '--tui-background-accent-2-pressed',
+    },
+    {
+        name: 'background-accent-opposite',
+        initialValue: '#000',
+        variable: '--tui-background-accent-opposite',
+    },
+    {
+        name: 'background-accent-opposite-hover',
+        initialValue: '#333',
+        variable: '--tui-background-accent-opposite-hover',
+    },
+    {
+        name: 'background-accent-opposite-pressed',
+        initialValue: '#808080',
+        variable: '--tui-background-accent-opposite-pressed',
+    },
+    {
+        name: 'background-elevation-1',
+        initialValue: '#fff',
+        variable: '--tui-background-elevation-1',
+    },
+    {
+        name: 'background-elevation-2',
+        initialValue: '#fff',
+        variable: '--tui-background-elevation-2',
+    },
+    {
+        name: 'service-autofill-background',
+        initialValue: '#fff5c0',
+        variable: '--tui-service-autofill-background',
+    },
+    {
+        name: 'border-normal',
+        initialValue: 'rgba(0, 0, 0, 0.1)',
+        variable: '--tui-border-normal',
+    },
+    {
+        name: 'border-hover',
+        initialValue: 'rgba(0, 0, 0, 0.16)',
+        variable: '--tui-border-hover',
+    },
+    {
+        name: 'border-focus',
+        initialValue: 'rgba(51, 51, 51, 0.64)',
+        variable: '--tui-border-focus',
+    },
+    {
+        name: 'status-negative',
+        initialValue: 'rgba(244, 87, 37, 1)',
+        variable: '--tui-status-negative',
+    },
+    {
+        name: 'status-negative-pale',
+        initialValue: 'rgba(244, 87, 37, 0.12)',
+        variable: '--tui-status-negative-pale',
+    },
+    {
+        name: 'status-negative-pale-hover',
+        initialValue: 'rgba(244, 87, 37, 0.24)',
+        variable: '--tui-status-negative-pale-hover',
+    },
+    {
+        name: 'status-positive',
+        initialValue: 'rgba(74, 201, 155, 1)',
+        variable: '--tui-status-positive',
+    },
+    {
+        name: 'status-positive-pale',
+        initialValue: 'rgba(74, 201, 155, 0.12)',
+        variable: '--tui-status-positive-pale',
+    },
+    {
+        name: 'status-positive-pale-hover',
+        initialValue: 'rgba(74, 201, 155, 0.24)',
+        variable: '--tui-status-positive-pale-hover',
+    },
+    {
+        name: 'status-warning',
+        initialValue: 'rgba(255, 199, 0, 1)',
+        variable: '--tui-status-warning',
+    },
+    {
+        name: 'status-warning-pale',
+        initialValue: 'rgba(255, 199, 0, 0.12)',
+        variable: '--tui-status-warning-pale',
+    },
+    {
+        name: 'status-warning-pale-hover',
+        initialValue: 'rgba(255, 199, 0, 0.24)',
+        variable: '--tui-status-warning-pale-hover',
+    },
+    {
+        name: 'status-info',
+        initialValue: 'rgba(112, 182, 246, 1)',
+        variable: '--tui-status-info',
+    },
+    {
+        name: 'status-info-pale',
+        initialValue: 'rgba(112, 182, 246, 0.12)',
+        variable: '--tui-status-info-pale',
+    },
+    {
+        name: 'status-info-pale-hover',
+        initialValue: 'rgba(112, 182, 246, 0.24)',
+        variable: '--tui-status-info-pale-hover',
+    },
+    {
+        name: 'status-neutral',
+        initialValue: 'rgb(121, 129, 140)',
+        variable: '--tui-status-neutral',
+    },
+    {
+        name: 'text-primary',
+        initialValue: 'rgba(27, 31, 59, 1)',
+        variable: '--tui-text-primary',
+    },
+    {
+        name: 'text-secondary',
+        initialValue: 'rgba(27, 31, 59, 0.65)',
+        variable: '--tui-text-secondary',
+    },
+    {
+        name: 'text-tertiary',
+        initialValue: 'rgba(27, 31, 59, 0.4)',
+        variable: '--tui-text-tertiary',
+    },
+    {name: 'text-action', initialValue: '#526ed3', variable: '--tui-text-action'},
+    {
+        name: 'text-action-hover',
+        initialValue: '#6c86e2',
+        variable: '--tui-text-action-hover',
+    },
+    {name: 'text-positive', initialValue: '#3aa981', variable: '--tui-text-positive'},
+    {
+        name: 'text-positive-hover',
+        initialValue: '#7ac5aa',
+        variable: '--tui-text-positive-hover',
+    },
+    {name: 'text-negative', initialValue: '#dd4c1e', variable: '--tui-text-negative'},
+    {
+        name: 'text-negative-hover',
+        initialValue: '#e38163',
+        variable: '--tui-text-negative-hover',
+    },
+];