diff --git a/modules/masonry/src/brick/design0/components/BrickBlock.tsx b/modules/masonry/src/brick/design0/components/BrickBlock.tsx
index 4fa2f1e4..7f81d1d7 100644
--- a/modules/masonry/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickBlock.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickBlock } from '@/@types/brick';
+import type { TBrickRenderPropsBlock, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickBlock component.
- */
 interface BrickBlockProps {
-  instance: IBrickBlock;
+  instance: TBrickRenderPropsBlock;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickBlock.
- * @param props - The props for BrickBlock.
- * @returns JSX.Element representing the BrickBlock as an SVG.
- */
-const BrickBlockComponent: React.FC<BrickBlockProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickBlock: React.FC<BrickBlockProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickBlockComponent;
+export default BrickBlock;
diff --git a/modules/masonry/src/brick/design0/components/BrickData.tsx b/modules/masonry/src/brick/design0/components/BrickData.tsx
index d9d362a6..05da3db0 100644
--- a/modules/masonry/src/brick/design0/components/BrickData.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickData.tsx
@@ -1,46 +1,43 @@
 import React from 'react';
-import type { IBrickData } from '@/@types/brick';
+import type { TBrickRenderPropsData, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickData component.
- */
 interface BrickDataProps {
-  instance: IBrickData; // The instance of BrickData
+  instance: TBrickRenderPropsData;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickData.
- * @param props - The props for BrickData.
- * @returns JSX.Element representing the BrickData as an SVG.
- */
-const BrickDataComponent: React.FC<BrickDataProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickData: React.FC<BrickDataProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
-        </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.glyph && (
+        <text
+          x={50}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickDataComponent;
+export default BrickData;
diff --git a/modules/masonry/src/brick/design0/components/BrickExpression.tsx b/modules/masonry/src/brick/design0/components/BrickExpression.tsx
index 948bca67..6fd659ae 100644
--- a/modules/masonry/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickExpression.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickExpression } from '@/@types/brick';
+import type { TBrickRenderPropsExpression, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickExpression component.
- */
 interface BrickExpressionProps {
-  instance: IBrickExpression;
+  instance: TBrickRenderPropsExpression;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickExpression.
- * @param props - The props for BrickExpression.
- * @returns JSX.Element representing the BrickExpression as an SVG.
- */
-const BrickExpressionComponent: React.FC<BrickExpressionProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickExpression: React.FC<BrickExpressionProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickExpressionComponent;
+export default BrickExpression;
diff --git a/modules/masonry/src/brick/design0/components/BrickStatement.tsx b/modules/masonry/src/brick/design0/components/BrickStatement.tsx
index 49127520..f1595297 100644
--- a/modules/masonry/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickStatement.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickStatement } from '@/@types/brick';
+import type { TBrickRenderPropsStatement, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickStatement component.
- */
 interface BrickStatementProps {
-  instance: IBrickStatement;
+  instance: TBrickRenderPropsStatement;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickStatement.
- * @param props - The props for BrickStatement.
- * @returns JSX.Element representing the BrickStatement as an SVG.
- */
-const BrickStatementComponent: React.FC<BrickStatementProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickStatement: React.FC<BrickStatementProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickStatementComponent;
+export default BrickStatement;
diff --git a/modules/masonry/src/brick/design0/components/BrickWrapper.tsx b/modules/masonry/src/brick/design0/components/BrickWrapper.tsx
index 7ba02052..3a1a0425 100644
--- a/modules/masonry/src/brick/design0/components/BrickWrapper.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickWrapper.tsx
@@ -5,162 +5,98 @@ import {
   createBrickExpression,
   createBrickStatement,
 } from '../brickFactory';
-import BrickDataComponent from './BrickData';
 import BrickBlockComponent from './BrickBlock';
+import BrickDataComponent from './BrickData';
 import BrickExpressionComponent from './BrickExpression';
 import BrickStatementComponent from './BrickStatement';
-import type { TColor } from '@/@types/brick';
+import type {
+  TBrickRenderPropsBlock,
+  TBrickRenderPropsData,
+  TBrickRenderPropsExpression,
+  TBrickRenderPropsStatement,
+  TCoords,
+} from '@/@types/brick';
 
-type BrickType = 'block' | 'data' | 'expression' | 'statement';
+type TBrickWrapperProps =
+  | { type: 'block'; params: TBrickRenderPropsBlock; coords?: TCoords }
+  | { type: 'data'; params: TBrickRenderPropsData; coords?: TCoords }
+  | { type: 'expression'; params: TBrickRenderPropsExpression; coords?: TCoords }
+  | { type: 'statement'; params: TBrickRenderPropsStatement; coords?: TCoords };
 
-interface BrickWrapperProps {
-  type: BrickType;
-  params:
-    | {
-        name: string;
-        label: string;
-        glyph: string;
-        args: { id: string; label: string }[];
-        colorBg: TColor;
-        colorFg: TColor;
-        colorBgHighlight: TColor;
-        colorFgHighlight: TColor;
-        outline: TColor;
-        scale: number;
-        connectAbove: boolean;
-        connectBelow: boolean;
-        nestLengthY: number;
-        folded?: boolean;
-      }
-    | {
-        name: string;
-        label: string;
-        glyph: string;
-        dynamic: boolean;
-        value?: boolean | number | string;
-        input?: 'boolean' | 'number' | 'string' | 'options';
-        colorBg: TColor;
-        colorFg: TColor;
-        colorBgHighlight: TColor;
-        colorFgHighlight: TColor;
-        outline: TColor;
-        scale: number;
-      }
-    | {
-        name: string;
-        label: string;
-        glyph: string;
-        args: Record<string, { label: string; dataType: string; meta: unknown }>;
-        colorBg: TColor;
-        colorFg: TColor;
-        colorBgHighlight: TColor;
-        colorFgHighlight: TColor;
-        outline: TColor;
-        scale: number;
-      }
-    | {
-        name: string;
-        label: string;
-        glyph: string;
-        args: Record<string, { label: string; dataType: string; meta: unknown }>;
-        colorBg: TColor;
-        colorFg: TColor;
-        colorBgHighlight: TColor;
-        colorFgHighlight: TColor;
-        outline: TColor;
-        scale: number;
-        connectAbove: boolean;
-        connectBelow: boolean;
-      };
-}
-
-/**
- * Higher-order component to wrap different brick components.
- * @param props - The props for BrickWrapper.
- * @returns JSX.Element representing the specific brick component.
- */
-const BrickWrapper: React.FC<BrickWrapperProps> = ({ type, params }) => {
+const BrickWrapper: React.FC<TBrickWrapperProps> = ({ type, params, coords }) => {
   switch (type) {
     case 'block': {
-      const instance = createBrickBlock(
-        params as {
-          name: string;
-          label: string;
-          glyph: string;
-          args: { id: string; label: string }[];
-          colorBg: TColor;
-          colorFg: TColor;
-          colorBgHighlight: TColor;
-          colorFgHighlight: TColor;
-          outline: TColor;
-          scale: number;
-          connectAbove: boolean;
-          connectBelow: boolean;
-          nestLengthY: number;
-          folded?: boolean;
-        },
-      );
-      return <BrickBlockComponent instance={instance} />;
+      const instance = createBrickBlock({
+        name: params.label,
+        label: params.label,
+        glyph: params.glyph || '',
+        args: params.labelArgs.map((label, index) => ({ id: `arg${index}`, label })),
+        colorBg: params.colorBg,
+        colorFg: params.colorFg,
+        colorBgHighlight: params.colorBg,
+        colorFgHighlight: params.colorFg,
+        outline: params.outline,
+        scale: params.scale,
+        connectAbove: true,
+        connectBelow: true,
+        nestLengthY: 0,
+        folded: params.folded,
+      });
+      return <BrickBlockComponent instance={instance.renderProps} coords={coords} />;
     }
-
     case 'data': {
-      const instance = createBrickData(
-        params as {
-          name: string;
-          label: string;
-          glyph: string;
-          dynamic: boolean;
-          value?: boolean | number | string;
-          input?: 'boolean' | 'number' | 'string' | 'options';
-          colorBg: TColor;
-          colorFg: TColor;
-          colorBgHighlight: TColor;
-          colorFgHighlight: TColor;
-          outline: TColor;
-          scale: number;
-        },
-      );
-      return <BrickDataComponent instance={instance} />;
+      const instance = createBrickData({
+        name: params.label,
+        label: params.label,
+        glyph: params.glyph || '',
+        dynamic: true,
+        colorBg: params.colorBg,
+        colorFg: params.colorFg,
+        colorBgHighlight: params.colorBg,
+        colorFgHighlight: params.colorFg,
+        outline: params.outline,
+        scale: params.scale,
+      });
+      return <BrickDataComponent instance={instance.renderProps} coords={coords} />;
     }
-
     case 'expression': {
-      const instance = createBrickExpression(
-        params as {
-          name: string;
-          label: string;
-          glyph: string;
-          args: Record<string, { label: string; dataType: string; meta: unknown }>;
-          colorBg: TColor;
-          colorFg: TColor;
-          colorBgHighlight: TColor;
-          colorFgHighlight: TColor;
-          outline: TColor;
-          scale: number;
-        },
-      );
-      return <BrickExpressionComponent instance={instance} />;
+      const instance = createBrickExpression({
+        name: params.label,
+        label: params.label,
+        glyph: params.glyph || '',
+        args: params.labelArgs.reduce((acc, label, index) => {
+          acc[`arg${index}`] = { label, dataType: 'unknown', meta: {} };
+          return acc;
+        }, {} as Record<string, { label: string; dataType: string; meta: unknown }>),
+        colorBg: params.colorBg,
+        colorFg: params.colorFg,
+        colorBgHighlight: params.colorBg,
+        colorFgHighlight: params.colorFg,
+        outline: params.outline,
+        scale: params.scale,
+      });
+      return <BrickExpressionComponent instance={instance.renderProps} coords={coords} />;
     }
-
     case 'statement': {
-      const instance = createBrickStatement(
-        params as {
-          name: string;
-          label: string;
-          glyph: string;
-          args: Record<string, { label: string; dataType: string; meta: unknown }>;
-          colorBg: TColor;
-          colorFg: TColor;
-          colorBgHighlight: TColor;
-          colorFgHighlight: TColor;
-          outline: TColor;
-          scale: number;
-          connectAbove: boolean;
-          connectBelow: boolean;
-        },
-      );
-      return <BrickStatementComponent instance={instance} />;
+      const instance = createBrickStatement({
+        name: params.label,
+        label: params.label,
+        glyph: params.glyph || '',
+        args: params.labelArgs.reduce((acc, label, index) => {
+          acc[`arg${index}`] = { label, dataType: 'unknown', meta: {} };
+          return acc;
+        }, {} as Record<string, { label: string; dataType: string; meta: unknown }>),
+        colorBg: params.colorBg,
+        colorFg: params.colorFg,
+        colorBgHighlight: params.colorBg,
+        colorFgHighlight: params.colorFg,
+        outline: params.outline,
+        scale: params.scale,
+        connectAbove: true,
+        connectBelow: true,
+      });
+      return <BrickStatementComponent instance={instance.renderProps} coords={coords} />;
     }
-
     default:
       return null;
   }