diff --git a/projects/demo/src/modules/services/breakpoint/breakpoint.component.ts b/projects/demo/src/modules/services/breakpoint/breakpoint.component.ts
index 63836feadb68..d7aec21c7d7a 100644
--- a/projects/demo/src/modules/services/breakpoint/breakpoint.component.ts
+++ b/projects/demo/src/modules/services/breakpoint/breakpoint.component.ts
@@ -11,7 +11,8 @@ export class ExampleTuiBreakpointComponent {
     injectService = import('./examples/inject-service.md?raw');
 
     readonly example: TuiDocExample = {
-        TypeScript: import('./examples/1/component.ts?raw'),
-        HTML: import('./examples/1/template.html?raw'),
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
     };
 }
diff --git a/projects/demo/src/modules/services/breakpoint/breakpoint.module.ts b/projects/demo/src/modules/services/breakpoint/breakpoint.module.ts
index 4d95cfb18a9a..7fce194b7beb 100644
--- a/projects/demo/src/modules/services/breakpoint/breakpoint.module.ts
+++ b/projects/demo/src/modules/services/breakpoint/breakpoint.module.ts
@@ -4,7 +4,7 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 
 import {ExampleTuiBreakpointComponent} from './breakpoint.component';
-import {TuiBreakpointExample} from './examples/1/component';
+import {TuiBreakpointExample1} from './examples/1';
 
 @NgModule({
     imports: [
@@ -12,7 +12,7 @@ import {TuiBreakpointExample} from './examples/1/component';
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBreakpointComponent)),
     ],
-    declarations: [ExampleTuiBreakpointComponent, TuiBreakpointExample],
+    declarations: [ExampleTuiBreakpointComponent, TuiBreakpointExample1],
     exports: [ExampleTuiBreakpointComponent],
 })
 export class ExampleTuiBreakpointModule {}
diff --git a/projects/demo/src/modules/services/breakpoint/breakpoint.template.html b/projects/demo/src/modules/services/breakpoint/breakpoint.template.html
index e9130d0e2105..c8c69888fede 100644
--- a/projects/demo/src/modules/services/breakpoint/breakpoint.template.html
+++ b/projects/demo/src/modules/services/breakpoint/breakpoint.template.html
@@ -11,7 +11,7 @@
             i18n-heading
             [content]="example"
         >
-            <tui-breakpoint-example></tui-breakpoint-example>
+            <tui-breakpoint-example-1></tui-breakpoint-example-1>
         </tui-doc-example>
     </ng-template>
     <ng-template pageTab="Setup">
@@ -24,7 +24,7 @@
                 </p>
 
                 <tui-doc-code
-                    filename="myComponent.component.ts"
+                    filename="my.component.ts"
                     [code]="injectService"
                 ></tui-doc-code>
             </li>
diff --git a/projects/demo/src/modules/services/breakpoint/examples/1/template.html b/projects/demo/src/modules/services/breakpoint/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/services/breakpoint/examples/1/template.html
rename to projects/demo/src/modules/services/breakpoint/examples/1/index.html
diff --git a/projects/demo/src/modules/services/breakpoint/examples/1/style.less b/projects/demo/src/modules/services/breakpoint/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/services/breakpoint/examples/1/style.less
rename to projects/demo/src/modules/services/breakpoint/examples/1/index.less
diff --git a/projects/demo/src/modules/services/breakpoint/examples/1/component.ts b/projects/demo/src/modules/services/breakpoint/examples/1/index.ts
similarity index 56%
rename from projects/demo/src/modules/services/breakpoint/examples/1/component.ts
rename to projects/demo/src/modules/services/breakpoint/examples/1/index.ts
index 2745707ac159..641c9a3ca991 100644
--- a/projects/demo/src/modules/services/breakpoint/examples/1/component.ts
+++ b/projects/demo/src/modules/services/breakpoint/examples/1/index.ts
@@ -4,14 +4,15 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiBreakpointService} from '@taiga-ui/core';
 
 @Component({
-    selector: `tui-breakpoint-example`,
-    templateUrl: `./template.html`,
-    styleUrls: [`./style.less`],
+    selector: 'tui-breakpoint-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
 })
-export class TuiBreakpointExample {
+export class TuiBreakpointExample1 {
     constructor(
-        @Inject(TuiBreakpointService) readonly breakpoint$: TuiBreakpointService,
+        @Inject(TuiBreakpointService)
+        readonly breakpoint$: TuiBreakpointService,
     ) {}
 }