diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5ecb554..6b3f9a2 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { TaskList } from './features/tasks/task-list';
 import { TaskDetails } from './features/tasks/task-details';
 import { TaskNew } from './features/tasks/task-new';
+import { Dev } from './features/dev';
 
 export const routes: Routes = [
   {
@@ -18,5 +19,10 @@ export const routes: Routes = [
     path: 'new',
     component: TaskNew,
     title: 'Новая'
+  },
+  {
+    path: 'dev',
+    component: Dev,
+    title: 'Dev'
   }
 ];
diff --git a/src/app/features/dev.ts b/src/app/features/dev.ts
new file mode 100644
index 0000000..22a71fd
--- /dev/null
+++ b/src/app/features/dev.ts
@@ -0,0 +1,27 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  imports: [],
+  selector: 'ksk-crm-dev',
+  styles: `
+    .outlined {
+      border: 1px solid var(--color-primary);
+    }
+
+    .rounded {
+      border-radius: 3px;
+    }
+  `,
+  template: `
+    <p [class.outlined]="isOutlined()" >dev works!</p>
+    <button (click)="handleAction()">Action</button>
+  `,
+})
+export class Dev {
+  outlined = signal<string[]>(["rounded"])
+  isOutlined = signal(false);
+
+  handleAction() {
+    this.isOutlined.set(true);
+  }
+}