diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9e4c08a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/rollup.config.cjs b/rollup.config.cjs
index 8817a9c..b36c690 100644
--- a/rollup.config.cjs
+++ b/rollup.config.cjs
@@ -16,7 +16,6 @@ const config = {
   plugins: [
     typescript({
       tsconfig: "./tsconfig.json",
-
       compilerOptions: {
         declaration: true,
         declarationDir: "components",
diff --git a/src/packages/Section/Section.ts b/src/packages/Section/Section.ts
index 53a957b..a5c266d 100644
--- a/src/packages/Section/Section.ts
+++ b/src/packages/Section/Section.ts
@@ -1,5 +1,6 @@
 import { GraphicData, JlGraphic } from 'jl-graphic'
 import { IPointData } from 'pixi.js'
+import { SectionGraphic } from './SectionGraphic'
 
 export interface ISectionData extends GraphicData {
   code: string
@@ -7,10 +8,23 @@ export interface ISectionData extends GraphicData {
 
 }
 
+export interface SectionDisplayConfig {
+  lineColor: string;
+  lineWidth: number;
+}
+
 export class Section extends JlGraphic {
+  static Type = 'Section'
+  lineGraphic: SectionGraphic
+
+  constructor() {
+    super(Section.Type)
+    this.lineGraphic = new SectionGraphic();
+    // this.transformSave = true;
+    this.addChild(this.lineGraphic);
+  }
 
   doRepaint(): void {
     console.log('repaint')
   }
-
 }
diff --git a/src/packages/Section/SectionGraphic.ts b/src/packages/Section/SectionGraphic.ts
new file mode 100644
index 0000000..400e5b8
--- /dev/null
+++ b/src/packages/Section/SectionGraphic.ts
@@ -0,0 +1,51 @@
+import { Graphics, IPointData } from 'pixi.js';
+import { assertBezierPoints, convertToBezierParams } from 'jl-graphic';
+
+export class SectionGraphic extends Graphics {
+  static Type = 'SectionGraphic';
+  private _points: IPointData[] = [];
+  public get points(): IPointData[] {
+    return this._points;
+  }
+  public set points(value: IPointData[]) {
+    if (!this.isCurve) {
+      if (value.length < 2) {
+        throw Error('Polyline must have at least 2 points');
+      }
+    } else {
+      assertBezierPoints(value);
+    }
+    this._points = value;
+  }
+
+  private _segmentsCount = 10;
+  public get segmentsCount(): number {
+    return this._segmentsCount;
+  }
+  public set segmentsCount(value: number) {
+    if (value < 1) {
+      throw Error('segmentsCount must be at least 1');
+    }
+    this._segmentsCount = value;
+  }
+
+  isCurve = false;
+
+  constructor() {
+    super();
+  }
+
+  paint() {
+    if (this.isCurve) {
+      const bps = convertToBezierParams(this.points);
+      bps.forEach((bp) => {
+        this.drawBezierCurve(bp.p1, bp.p2, bp.cp1, bp.cp2, this.segmentsCount);
+      });
+    } else {
+      this.moveTo(this.points[0].x, this.points[0].y);
+      for (let i = 1; i < this.points.length; i++) {
+        this.lineTo(this.points[i].x, this.points[i].y);
+      }
+    }
+  }
+}