diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts
index 800502847..2e035501c 100644
--- a/packages/draw/src/engines/basic-shapes/cloud.ts
+++ b/packages/draw/src/engines/basic-shapes/cloud.ts
@@ -114,7 +114,7 @@ export const CloudEngine: ShapeEngine = {
                 .join('\n') +
             ' Z';
 
-        const svgElement = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const svgElement = rs.path(pathData, options);
         setPathStrokeLinecap(svgElement, 'round');
         return svgElement;
     },
diff --git a/packages/draw/src/engines/basic-shapes/comment.ts b/packages/draw/src/engines/basic-shapes/comment.ts
index d9db63e40..791d99d1c 100644
--- a/packages/draw/src/engines/basic-shapes/comment.ts
+++ b/packages/draw/src/engines/basic-shapes/comment.ts
@@ -18,7 +18,7 @@ export const CommentEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
         const points = getCommentPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        const polygon = rs.polygon(points, options);
         setStrokeLinecap(polygon, 'round');
         return polygon;
     },
diff --git a/packages/draw/src/engines/basic-shapes/ellipse.ts b/packages/draw/src/engines/basic-shapes/ellipse.ts
index ad48b532a..d2202b935 100644
--- a/packages/draw/src/engines/basic-shapes/ellipse.ts
+++ b/packages/draw/src/engines/basic-shapes/ellipse.ts
@@ -23,7 +23,7 @@ export function createEllipseEngine(createOptions?: CreateEllipseOptions): Shape
         draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
             const rs = PlaitBoard.getRoughSVG(board);
-            const shape = rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            const shape = rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, options);
             setStrokeLinecap(shape, 'round');
             return shape;
         },
diff --git a/packages/draw/src/engines/basic-shapes/polygon.ts b/packages/draw/src/engines/basic-shapes/polygon.ts
index 223928b47..5932485f9 100644
--- a/packages/draw/src/engines/basic-shapes/polygon.ts
+++ b/packages/draw/src/engines/basic-shapes/polygon.ts
@@ -24,7 +24,7 @@ export function createPolygonEngine(options: CreateOptions): ShapeEngine {
         draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
             const points = getPoints(rectangle);
             const rs = PlaitBoard.getRoughSVG(board);
-            const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+            const polygon = rs.polygon(points, options);
             setStrokeLinecap(polygon, 'round');
             return polygon;
         },
diff --git a/packages/draw/src/engines/basic-shapes/rectangle.ts b/packages/draw/src/engines/basic-shapes/rectangle.ts
index 2c6ce61b8..8b592168f 100644
--- a/packages/draw/src/engines/basic-shapes/rectangle.ts
+++ b/packages/draw/src/engines/basic-shapes/rectangle.ts
@@ -5,7 +5,7 @@ import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
 
 export const RectangleEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
-        return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
+        return drawRectangle(board, rectangle, options);
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {
         const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
diff --git a/packages/draw/src/engines/basic-shapes/round-comment.ts b/packages/draw/src/engines/basic-shapes/round-comment.ts
index 26be4d691..ca4f442d6 100644
--- a/packages/draw/src/engines/basic-shapes/round-comment.ts
+++ b/packages/draw/src/engines/basic-shapes/round-comment.ts
@@ -40,7 +40,7 @@ export const RoundCommentEngine: ShapeEngine = {
 
         const shape = rs.path(
             `M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/basic-shapes/round-rectangle.ts b/packages/draw/src/engines/basic-shapes/round-rectangle.ts
index 3ea8428ff..09825b2f6 100644
--- a/packages/draw/src/engines/basic-shapes/round-rectangle.ts
+++ b/packages/draw/src/engines/basic-shapes/round-rectangle.ts
@@ -21,7 +21,7 @@ export const RoundRectangleEngine: ShapeEngine = {
             rectangle.y,
             rectangle.x + rectangle.width,
             rectangle.y + rectangle.height,
-            { ...options, fillStyle: 'solid' },
+            options,
             false,
             getRoundRectangleRadius(rectangle)
         );
diff --git a/packages/draw/src/engines/flowchart/database.ts b/packages/draw/src/engines/flowchart/database.ts
index 373b43581..fe40e2493 100644
--- a/packages/draw/src/engines/flowchart/database.ts
+++ b/packages/draw/src/engines/flowchart/database.ts
@@ -31,7 +31,7 @@ export const DatabaseEngine: ShapeEngine = {
                 rectangle.y + rectangle.height - rectangle.height * 0.15
             }
             V${rectangle.y + rectangle.height * 0.15}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/delay.ts b/packages/draw/src/engines/flowchart/delay.ts
index 633afaee5..db7c9919f 100644
--- a/packages/draw/src/engines/flowchart/delay.ts
+++ b/packages/draw/src/engines/flowchart/delay.ts
@@ -22,7 +22,7 @@ export const DelayEngine: ShapeEngine = {
                 4} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + (rectangle.width * 3) / 4} ${rectangle.y + rectangle.height} L${
                 rectangle.x
             } ${rectangle.y + rectangle.height} Z`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/flowchart/display.ts b/packages/draw/src/engines/flowchart/display.ts
index 7bfc909b7..3e917f05f 100644
--- a/packages/draw/src/engines/flowchart/display.ts
+++ b/packages/draw/src/engines/flowchart/display.ts
@@ -39,7 +39,7 @@ export const DisplayEngine: ShapeEngine = {
             L${rectangle.x} ${rectangle.y + rectangle.height / 2}
             Z
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/flowchart/document.ts b/packages/draw/src/engines/flowchart/document.ts
index bff6e0b1b..80c5a72c1 100644
--- a/packages/draw/src/engines/flowchart/document.ts
+++ b/packages/draw/src/engines/flowchart/document.ts
@@ -28,7 +28,7 @@ export const DocumentEngine: ShapeEngine = {
                 rectangle.height -
                 rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9}           
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/hard-disk.ts b/packages/draw/src/engines/flowchart/hard-disk.ts
index 2237e983b..23789f23b 100644
--- a/packages/draw/src/engines/flowchart/hard-disk.ts
+++ b/packages/draw/src/engines/flowchart/hard-disk.ts
@@ -32,7 +32,7 @@ export const HardDiskEngine: ShapeEngine = {
             A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${rectangle.y +
                 rectangle.height}
             H${rectangle.x + rectangle.width - rectangle.width * 0.15}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/internal-storage.ts b/packages/draw/src/engines/flowchart/internal-storage.ts
index ec1fbd4a5..03e39b015 100644
--- a/packages/draw/src/engines/flowchart/internal-storage.ts
+++ b/packages/draw/src/engines/flowchart/internal-storage.ts
@@ -22,7 +22,7 @@ export const InternalStorageEngine: ShapeEngine = {
             M${rectangle.x} ${rectangle.y + rectangle.height / 10} h${rectangle.width}
             M${rectangle.x + rectangle.width / 10} ${rectangle.y} v${rectangle.height}
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/multi-document.ts b/packages/draw/src/engines/flowchart/multi-document.ts
index a88c74923..7ba86450a 100644
--- a/packages/draw/src/engines/flowchart/multi-document.ts
+++ b/packages/draw/src/engines/flowchart/multi-document.ts
@@ -74,7 +74,7 @@ export const MultiDocumentEngine: ShapeEngine = {
                 rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3
             }
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/note-curly-left.ts b/packages/draw/src/engines/flowchart/note-curly-left.ts
index 0fa45f9d4..72b1db376 100644
--- a/packages/draw/src/engines/flowchart/note-curly-left.ts
+++ b/packages/draw/src/engines/flowchart/note-curly-left.ts
@@ -56,7 +56,7 @@ export const NoteCurlyLeftEngine: ShapeEngine = {
             ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/flowchart/note-curly-right.ts b/packages/draw/src/engines/flowchart/note-curly-right.ts
index 2687956a0..8aa8e695a 100644
--- a/packages/draw/src/engines/flowchart/note-curly-right.ts
+++ b/packages/draw/src/engines/flowchart/note-curly-right.ts
@@ -55,7 +55,7 @@ export const NoteCurlyRightEngine: ShapeEngine = {
             ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/flowchart/note-square.ts b/packages/draw/src/engines/flowchart/note-square.ts
index e289dbca1..acda658aa 100644
--- a/packages/draw/src/engines/flowchart/note-square.ts
+++ b/packages/draw/src/engines/flowchart/note-square.ts
@@ -21,7 +21,7 @@ export const NoteSquareEngine: ShapeEngine = {
             `M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${rectangle.x +
                 rectangle.width * 0.075}
            `,
-            { ...options, fillStyle: 'solid', fill: 'transparent' }
+            { ...options, fill: 'transparent' }
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/or.ts b/packages/draw/src/engines/flowchart/or.ts
index 2956a5146..611fa0e56 100644
--- a/packages/draw/src/engines/flowchart/or.ts
+++ b/packages/draw/src/engines/flowchart/or.ts
@@ -17,7 +17,7 @@ export const OrEngine: ShapeEngine = createEllipseEngine({
         M${rectangle.x + rectangle.width / 2} ${rectangle.y}
         L${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height}
         `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/predefined-process.ts b/packages/draw/src/engines/flowchart/predefined-process.ts
index d6bccf025..0310bc946 100644
--- a/packages/draw/src/engines/flowchart/predefined-process.ts
+++ b/packages/draw/src/engines/flowchart/predefined-process.ts
@@ -24,7 +24,7 @@ export const PredefinedProcessEngine: ShapeEngine = {
                 rectangle.height} M${rectangle.x + rectangle.width - rectangle.width * 0.06} ${rectangle.y} L${rectangle.x +
                 rectangle.width -
                 rectangle.width * 0.06} ${rectangle.y + rectangle.height}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/flowchart/stored-data.ts b/packages/draw/src/engines/flowchart/stored-data.ts
index 8132b0338..42e42f89f 100644
--- a/packages/draw/src/engines/flowchart/stored-data.ts
+++ b/packages/draw/src/engines/flowchart/stored-data.ts
@@ -27,7 +27,7 @@ export const StoredDataEngine: ShapeEngine = {
             } ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height / 2}, 0, 0, 1,${
                 rectangle.x + rectangle.width / 10
             } ${rectangle.y}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/flowchart/summing-junction.ts b/packages/draw/src/engines/flowchart/summing-junction.ts
index 2e8d533f4..00ec063a4 100644
--- a/packages/draw/src/engines/flowchart/summing-junction.ts
+++ b/packages/draw/src/engines/flowchart/summing-junction.ts
@@ -35,7 +35,7 @@ export const SummingJunctionEngine: ShapeEngine = createEllipseEngine({
         M${line2Points[0][0]} ${line2Points[0][1]}
         L${line2Points[1][0]} ${line2Points[1][1]}
         `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
 
         setStrokeLinecap(shape, 'round');
diff --git a/packages/draw/src/engines/flowchart/terminal.ts b/packages/draw/src/engines/flowchart/terminal.ts
index c9be93203..191cd6cf5 100644
--- a/packages/draw/src/engines/flowchart/terminal.ts
+++ b/packages/draw/src/engines/flowchart/terminal.ts
@@ -21,7 +21,7 @@ export const TerminalEngine: ShapeEngine = {
             rectangle.y,
             rectangle.x + rectangle.width,
             rectangle.y + rectangle.height,
-            { ...options, fillStyle: 'solid' },
+            options,
             false,
             getStartEndRadius(rectangle)
         );
diff --git a/packages/draw/src/engines/table/table.ts b/packages/draw/src/engines/table/table.ts
index fbdf9d18b..8a54e8cc8 100644
--- a/packages/draw/src/engines/table/table.ts
+++ b/packages/draw/src/engines/table/table.ts
@@ -31,7 +31,7 @@ export const TableEngine: ShapeEngine<PlaitTable, PlaitTableDrawOptions, DrawTex
                             width: width - ACTIVE_STROKE_WIDTH * 2,
                             height: height - ACTIVE_STROKE_WIDTH * 2
                         },
-                        { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 }
+                        { fill: cell.fill, fillStyle: roughOptions?.fillStyle, strokeWidth: 0 }
                     );
                     const cellRightBorder = drawLine(rs, [x + width, y], [x + width, y + height], roughOptions);
                     const cellBottomBorder = drawLine(rs, [x, y + height], [x + width, y + height], roughOptions);
diff --git a/packages/draw/src/engines/uml/activity-class.ts b/packages/draw/src/engines/uml/activity-class.ts
index d595b5f36..2142bc5e1 100644
--- a/packages/draw/src/engines/uml/activity-class.ts
+++ b/packages/draw/src/engines/uml/activity-class.ts
@@ -24,7 +24,7 @@ export const ActiveClassEngine: ShapeEngine = {
                 rectangle.height} M${rectangle.x + rectangle.width - rectangle.width * 0.125} ${rectangle.y} L${rectangle.x +
                 rectangle.width -
                 rectangle.width * 0.125} ${rectangle.y + rectangle.height}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/uml/actor.ts b/packages/draw/src/engines/uml/actor.ts
index b2b766a8d..9125c829b 100644
--- a/packages/draw/src/engines/uml/actor.ts
+++ b/packages/draw/src/engines/uml/actor.ts
@@ -77,7 +77,7 @@ export const ActorEngine: ShapeEngine = {
             `M${rightLegLine[0][0]} ${rightLegLine[0][1]} L${rightLegLine[1][0]} ${rightLegLine[1][1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/assembly.ts b/packages/draw/src/engines/uml/assembly.ts
index 0e583a9c5..ef9a865a7 100644
--- a/packages/draw/src/engines/uml/assembly.ts
+++ b/packages/draw/src/engines/uml/assembly.ts
@@ -80,10 +80,7 @@ export const AssemblyEngine: ShapeEngine = {
             `M${line2[0][0]} ${line2[0][1]} H${line2[1][0]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid'
-        });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/combined-fragment.ts b/packages/draw/src/engines/uml/combined-fragment.ts
index 08a12ab3f..222152b1a 100644
--- a/packages/draw/src/engines/uml/combined-fragment.ts
+++ b/packages/draw/src/engines/uml/combined-fragment.ts
@@ -30,7 +30,7 @@ export const CombinedFragmentEngine: ShapeEngine<PlaitMultipleTextGeometry, Draw
             V${rectangle.y}
             `,
 
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/uml/component-box.ts b/packages/draw/src/engines/uml/component-box.ts
index 2b0352a48..78463c30d 100644
--- a/packages/draw/src/engines/uml/component-box.ts
+++ b/packages/draw/src/engines/uml/component-box.ts
@@ -34,7 +34,7 @@ export const ComponentBoxEngine: ShapeEngine = {
             H${rectangle.x} Z
 
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
 
         const componentShape = ComponentEngine.draw(board, componentRectangle, options);
diff --git a/packages/draw/src/engines/uml/component.ts b/packages/draw/src/engines/uml/component.ts
index 1504d434c..4c61ff5c7 100644
--- a/packages/draw/src/engines/uml/component.ts
+++ b/packages/draw/src/engines/uml/component.ts
@@ -84,7 +84,7 @@ export const ComponentEngine: ShapeEngine = {
             `V${points.mainEnd[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/container.ts b/packages/draw/src/engines/uml/container.ts
index 6b8927687..faa5bcbb8 100644
--- a/packages/draw/src/engines/uml/container.ts
+++ b/packages/draw/src/engines/uml/container.ts
@@ -21,7 +21,7 @@ export const ContainerEngine: ShapeEngine = {
             `M${rectangle.x} ${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height} H${
                 rectangle.x
             } Z M${rectangle.x + 40} ${rectangle.y} L${rectangle.x + 40} ${rectangle.y + rectangle.height} `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/uml/deletion.ts b/packages/draw/src/engines/uml/deletion.ts
index 24112c6d1..830f9a9b0 100644
--- a/packages/draw/src/engines/uml/deletion.ts
+++ b/packages/draw/src/engines/uml/deletion.ts
@@ -32,7 +32,7 @@ export const DeletionEngine: ShapeEngine = {
         const lines = getDeletionLines(rectangle);
         const shape = rs.path(
             lines.map(([from, to]) => `M${from[0]} ${from[1]} L${to[0]} ${to[1]}`).join(' '),
-            { ...options, fillStyle: 'solid', strokeWidth: 4 }
+            { ...options, strokeWidth: 4 }
         );
         setStrokeLinecap(shape, 'round');
         return shape;
diff --git a/packages/draw/src/engines/uml/note.ts b/packages/draw/src/engines/uml/note.ts
index e5d60637f..93b96f4b5 100644
--- a/packages/draw/src/engines/uml/note.ts
+++ b/packages/draw/src/engines/uml/note.ts
@@ -30,7 +30,7 @@ export const NoteEngine: ShapeEngine = {
             M${rectangle.x + rectangle.width - 16} ${rectangle.y} 
             A16 16, 0,0,1, ${rectangle.x + rectangle.width} ${rectangle.y + 16}
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 
diff --git a/packages/draw/src/engines/uml/package.ts b/packages/draw/src/engines/uml/package.ts
index a484085f2..d444186a1 100644
--- a/packages/draw/src/engines/uml/package.ts
+++ b/packages/draw/src/engines/uml/package.ts
@@ -67,7 +67,7 @@ export const PackageEngine: ShapeEngine<PlaitMultipleTextGeometry, DrawOptions,
             `H${points.middlePoint[0]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/provided-interface.ts b/packages/draw/src/engines/uml/provided-interface.ts
index 594734789..4a8246b48 100644
--- a/packages/draw/src/engines/uml/provided-interface.ts
+++ b/packages/draw/src/engines/uml/provided-interface.ts
@@ -81,10 +81,7 @@ export const ProvidedInterfaceEngine: ShapeEngine = {
             )
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid'
-        });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/required-interface.ts b/packages/draw/src/engines/uml/required-interface.ts
index 3d66fad04..1e3fdc452 100644
--- a/packages/draw/src/engines/uml/required-interface.ts
+++ b/packages/draw/src/engines/uml/required-interface.ts
@@ -61,11 +61,7 @@ export const RequiredInterfaceEngine: ShapeEngine = {
             `M${line.startX} ${line.startY} H${line.endX}`
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid',
-            fill: 'transparent'
-        });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
diff --git a/packages/draw/src/engines/uml/template.ts b/packages/draw/src/engines/uml/template.ts
index bdbb5d177..34e313a3e 100644
--- a/packages/draw/src/engines/uml/template.ts
+++ b/packages/draw/src/engines/uml/template.ts
@@ -26,7 +26,6 @@ export const TemplateEngine: ShapeEngine = {
             rectangle.y + rectangle.height,
             {
                 ...options,
-                fillStyle: 'solid',
                 dashGap: 10,
                 strokeLineDash: [10, 10]
             },
diff --git a/packages/draw/src/generators/geometry-shape.generator.ts b/packages/draw/src/generators/geometry-shape.generator.ts
index a44ff2ce0..3d83a32e9 100644
--- a/packages/draw/src/generators/geometry-shape.generator.ts
+++ b/packages/draw/src/generators/geometry-shape.generator.ts
@@ -26,7 +26,8 @@ export class GeometryShapeGenerator extends Generator<PlaitGeometry, ShapeData>
             stroke: strokeColor,
             strokeWidth,
             fill,
-            strokeLineDash
+            strokeLineDash,
+            fillStyle: element.fillStyle
         });
     }
 }
diff --git a/packages/draw/src/interfaces/geometry.ts b/packages/draw/src/interfaces/geometry.ts
index 9607bfeaa..7cf5623c9 100644
--- a/packages/draw/src/interfaces/geometry.ts
+++ b/packages/draw/src/interfaces/geometry.ts
@@ -1,6 +1,9 @@
 import { PlaitElement, Point } from '@plait/core';
 import { DrawTextInfo } from '../generators/text.generator';
 import { ParagraphElement, StrokeStyle } from '@plait/common';
+import { Options } from 'roughjs/bin/core';
+
+export type FillStyle = Options['fillStyle'];
 
 export enum BasicShapes {
     rectangle = 'rectangle',
@@ -100,6 +103,7 @@ export interface PlaitCommonGeometry<T extends string = 'geometry', P extends Po
     strokeColor?: string;
     strokeWidth?: number;
     strokeStyle?: StrokeStyle;
+    fillStyle?: FillStyle;
     angle?: number;
     opacity?: number;
 }
diff --git a/packages/draw/src/interfaces/index.ts b/packages/draw/src/interfaces/index.ts
index aa0a7ab3e..f905a252f 100644
--- a/packages/draw/src/interfaces/index.ts
+++ b/packages/draw/src/interfaces/index.ts
@@ -1,4 +1,4 @@
-import { BasicShapes, FlowchartSymbols, GeometryShapes, PlaitCustomGeometry, PlaitGeometry, UMLSymbols } from './geometry';
+import { BasicShapes, FillStyle, FlowchartSymbols, GeometryShapes, PlaitCustomGeometry, PlaitGeometry, UMLSymbols } from './geometry';
 import { PlaitImage } from './image';
 import { PlaitArrowLine } from './arrow-line';
 import { PlaitSwimlane, SwimlaneSymbols } from './swimlane';
diff --git a/packages/draw/src/utils/fillstyle.spec.ts b/packages/draw/src/utils/fillstyle.spec.ts
new file mode 100644
index 000000000..e5982e441
--- /dev/null
+++ b/packages/draw/src/utils/fillstyle.spec.ts
@@ -0,0 +1,95 @@
+import { createTestingBoard, PlaitBoard, RectangleClient } from '@plait/core';
+import { withDraw, PlaitGeometry, BasicShapes, drawGeometry, FillStyle } from '@plait/draw';
+import { Options } from 'roughjs/bin/core';
+
+describe('fillStyle', () => {
+    let board: PlaitBoard;
+
+    beforeEach(() => {
+        board = createTestingBoard([withDraw], []);
+    });
+
+    describe('PlaitCommonGeometry interface', () => {
+        it('should accept fillStyle property on geometry elements', () => {
+            const element: PlaitGeometry = {
+                id: 'test-1',
+                type: 'geometry',
+                shape: BasicShapes.rectangle,
+                points: [
+                    [0, 0],
+                    [100, 100]
+                ],
+                fill: '#FF5733',
+                fillStyle: 'hachure',
+                strokeColor: '#000000',
+                strokeWidth: 2
+            };
+
+            expect(element.fillStyle).toBe('hachure');
+        });
+
+        it('should allow all rough.js fill styles', () => {
+            const fillStyles: FillStyle[] = [
+                'solid',
+                'hachure',
+                'zigzag',
+                'cross-hatch',
+                'dots',
+                'dashed',
+                'zigzag-line'
+            ];
+
+            fillStyles.forEach((fillStyle) => {
+                const element: PlaitGeometry = {
+                    id: `test-${fillStyle}`,
+                    type: 'geometry',
+                    shape: BasicShapes.rectangle,
+                    points: [
+                        [0, 0],
+                        [100, 100]
+                    ],
+                    fillStyle
+                };
+
+                expect(element.fillStyle).toBe(fillStyle);
+            });
+        });
+
+        it('should make fillStyle optional', () => {
+            const element: PlaitGeometry = {
+                id: 'test-optional',
+                type: 'geometry',
+                shape: BasicShapes.rectangle,
+                points: [
+                    [0, 0],
+                    [100, 100]
+                ]
+            };
+
+            expect(element.fillStyle).toBeUndefined();
+        });
+    });
+
+    describe('drawGeometry', () => {
+        it('should pass fillStyle to shape engine', () => {
+            const rectangle: RectangleClient = {
+                x: 0,
+                y: 0,
+                width: 100,
+                height: 100
+            };
+
+            const roughOptions: Options = {
+                stroke: '#000000',
+                strokeWidth: 2,
+                fill: '#FF5733',
+                fillStyle: 'hachure'
+            };
+
+            const result = drawGeometry(board, rectangle, BasicShapes.rectangle, roughOptions);
+            
+            expect(result).toBeDefined();
+            expect(result instanceof SVGGElement).toBe(true);
+        });
+    });
+});