diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index a277ff0b9..ac7e4cdc7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -3,10 +3,13 @@ import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 import rough from 'roughjs';
-import { solidStateFill } from './handDrawnShapeStyles.js';
+import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const stateEnd = (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { cssStyles } = node;
   const { themeVariables } = getConfig();
   const { lineColor } = themeVariables;
   const shapeSvg = parent
@@ -14,22 +17,36 @@ export const stateEnd = (parent: SVG, node: Node) => {
     .attr('class', 'node default')
     .attr('id', node.domId || node.id);
 
-  let circle;
-  let innerCircle;
-  if (node.look === 'handDrawn') {
-    // @ts-ignore TODO: Fix rough typings
-    const rc = rough.svg(shapeSvg);
-    const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
-    const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' });
-    circle = shapeSvg.insert(() => roughNode);
-    innerCircle = shapeSvg.insert(() => roughInnerNode);
-  } else {
-    innerCircle = shapeSvg.insert('circle', ':first-child');
-    circle = shapeSvg.insert('circle', ':first-child');
+  // @ts-ignore TODO: Fix rough typings
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
 
-    circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
 
-    innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10);
+  const roughNode = rc.circle(0, 0, 14, {
+    ...solidStateFill(lineColor),
+    roughness: 0.5,
+    ...options,
+  });
+  const roughInnerNode = rc.circle(0, 0, 5, {
+    ...solidStateFill(lineColor),
+    fillStyle: 'solid',
+    ...options,
+  });
+  const circle = shapeSvg.insert(() => roughNode, ':first-child');
+  circle.insert(() => roughInnerNode);
+
+  circle.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    circle.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    circle.selectAll('path').attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, circle);