diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs
index 5e16bdf..4218a42 100644
--- a/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs
+++ b/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs
@@ -1,4 +1,4 @@
-using System.Runtime.Serialization;
+using System.Runtime.Serialization;
 using System.Collections.Generic;
 
 namespace SVGLDLibs.Models
@@ -26,5 +26,8 @@ namespace SVGLDLibs.Models
 
         [DataMember(EmitDefaultValue = false)]
         public List<string> linkedContainers { get; set; }
+
+        [DataMember(EmitDefaultValue = false)]
+        public List<bool> showDimension { get; set; }
     }
 }
\ No newline at end of file
diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx
index 55c8224..4bdc262 100644
--- a/src/Components/ContainerProperties/ContainerForm.tsx
+++ b/src/Components/ContainerProperties/ContainerForm.tsx
@@ -5,10 +5,18 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import {
   SHOW_BORROWER_DIMENSIONS,
   SHOW_CHILDREN_DIMENSIONS,
-  SHOW_SELF_DIMENSIONS,
-  SHOW_SELF_MARGINS_DIMENSIONS
+  SHOW_SELF_DIMENSIONS, SHOW_SELF_MARGINS_DIMENSIONS
 } from '../../utils/default';
-import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
+import {
+  ApplyWidthMargin,
+  ApplyXMargin,
+  RemoveWidthMargin,
+  RemoveXMargin,
+  RestoreX,
+  RestoreY,
+  TransformX,
+  TransformY
+} from '../../utils/svg';
 import { Text } from '../Text/Text';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
@@ -38,7 +46,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         inputClassName=''
         type='string'
         value={props.properties.displayedText?.toString()}
-        onChange={(value) => props.onChange('displayedText', value)} />
+        onChange={(value) => props.onChange('displayedText', value)}/>
       <OrientationSelector
         id='orientation'
         name='Orientation'
@@ -63,7 +71,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               inputClassName=''
               type='string'
               value={props.properties.id.toString()}
-              isDisabled={true} />
+              isDisabled={true}/>
           </div>
           <div>
             <InputGroup
@@ -73,7 +81,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               inputClassName=''
               type='string'
               value={props.properties.parentId}
-              isDisabled={true} />
+              isDisabled={true}/>
           </div>
           <div>
             <InputGroup
@@ -83,7 +91,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               inputClassName=''
               type='string'
               value={props.properties.type}
-              isDisabled={true} />
+              isDisabled={true}/>
           </div>
         </div>
       </Category>
@@ -119,7 +127,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 ),
                 props.properties.margin.left
               )
-            )} />
+            )}/>
           <TextInputGroup
             id={`${props.properties.id}-y`}
             labelText={Text({ textId: '@ContainerY' })}
@@ -142,7 +150,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 ),
                 props.properties.margin.top
               )
-            )} />
+            )}/>
         </div>
       </Category>
 
@@ -163,7 +171,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={1}
             value={props.properties.minWidth.toString()}
-            onChange={(value) => props.onChange('minWidth', Number(value))} />
+            onChange={(value) => props.onChange('minWidth', Number(value))}/>
           <TextInputGroup
             id={`${props.properties.id}-width`}
             labelText={Text({ textId: '@ContainerWidth' })}
@@ -175,7 +183,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             max={props.properties.maxWidth}
             value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
             onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
-            isDisabled={props.properties.isFlex} />
+            isDisabled={props.properties.isFlex}/>
           <TextInputGroup
             id={`${props.properties.id}-maxWidth`}
             labelText={Text({ textId: '@ContainerMaxWidth' })}
@@ -185,7 +193,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={1}
             value={props.properties.maxWidth.toString()}
-            onChange={(value) => props.onChange('maxWidth', Number(value))} />
+            onChange={(value) => props.onChange('maxWidth', Number(value))}/>
           <div className='col-span-5 p-3'></div>
           <TextInputGroup
             id={`${props.properties.id}-minHeight`}
@@ -196,7 +204,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={1}
             value={props.properties.minHeight.toString()}
-            onChange={(value) => props.onChange('minHeight', Number(value))} />
+            onChange={(value) => props.onChange('minHeight', Number(value))}/>
           <TextInputGroup
             id={`${props.properties.id}-height`}
             labelText={Text({ textId: '@ContainerHeight' })}
@@ -219,7 +227,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={1}
             value={props.properties.maxHeight.toString()}
-            onChange={(value) => props.onChange('maxHeight', Number(value))} />
+            onChange={(value) => props.onChange('maxHeight', Number(value))}/>
         </div>
       </Category>
 
@@ -239,7 +247,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={0}
             value={(props.properties.margin.left ?? 0).toString()}
-            onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
+            onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)}/>
           <TextInputGroup
             id={`${props.properties.id}-mb`}
             labelText={Text({ textId: '@ContainerMarginBottom' })}
@@ -249,7 +257,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={0}
             value={(props.properties.margin.bottom ?? 0).toString()}
-            onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
+            onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)}/>
           <TextInputGroup
             id={`${props.properties.id}-mt`}
             labelText={Text({ textId: '@ContainerMarginTop' })}
@@ -259,7 +267,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={0}
             value={(props.properties.margin.top ?? 0).toString()}
-            onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
+            onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)}/>
           <TextInputGroup
             id={`${props.properties.id}-mr`}
             labelText={Text({ textId: '@ContainerMarginRight' })}
@@ -269,7 +277,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             type='number'
             min={0}
             value={(props.properties.margin.right ?? 0).toString()}
-            onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
+            onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)}/>
         </div>
       </Category>
 
@@ -296,7 +304,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             inputClassName='ml-auto mr-auto block'
             type={ToggleType.Full}
             checked={props.properties.isAnchor}
-            onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
+            onChange={(event) => props.onChange('isAnchor', event.target.checked)}/>
         </div>
       </Category>
 
@@ -326,7 +334,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               value: symbol.id
             }))}
             value={props.properties.linkedSymbolId ?? ''}
-            onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
+            onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/>
         </div>
       </Category>
 
@@ -339,168 +347,168 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         <div className='grid grid-cols-1 gap-6 prop-category-body'>
           {
             SHOW_SELF_DIMENSIONS &&
-            <div className='grid grid-cols-1 gap-2'>
-              <PositionCheckboxes
-                id='positionsSelfDimensions'
-                attribute='positions'
-                name='ShowSelfDimensions'
-                labelText={Text({ textId: '@ContainerShowDimension' })}
-                value={props.properties.dimensionOptions.selfDimensions.positions}
-                onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
-              />
-              <InputGroup
-                labelText={Text({ textId: '@Color' })}
-                inputKey='color'
-                labelClassName=''
-                inputClassName=''
-                type='color'
-                value={props.properties.dimensionOptions.selfDimensions.color}
-                onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
-            </div>
+                        <div className='grid grid-cols-1 gap-2'>
+                          <PositionCheckboxes
+                            id='positionsSelfDimensions'
+                            attribute='positions'
+                            name='ShowSelfDimensions'
+                            labelText={Text({ textId: '@ContainerShowDimension' })}
+                            value={props.properties.dimensionOptions.selfDimensions.positions}
+                            onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
+                          />
+                          <InputGroup
+                            labelText={Text({ textId: '@Color' })}
+                            inputKey='color'
+                            labelClassName=''
+                            inputClassName=''
+                            type='color'
+                            value={props.properties.dimensionOptions.selfDimensions.color}
+                            onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
+                        </div>
           }
           {
             SHOW_SELF_MARGINS_DIMENSIONS &&
-                <div className='grid grid-cols-1 gap-2'>
-                  <PositionCheckboxes
-                    id='positionsSelfMarginsDimensions'
-                    attribute='positions'
-                    name='ShowSelfMarginsDimensions'
-                    labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
-                    value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
-                    onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
-                  />
-                  <InputGroup
-                    labelText={Text({ textId: '@Color' })}
-                    inputKey='color'
-                    labelClassName=''
-                    inputClassName=''
-                    type='color'
-                    value={props.properties.dimensionOptions.selfMarginsDimensions.color}
-                    onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
-                </div>
+                        <div className='grid grid-cols-1 gap-2'>
+                          <PositionCheckboxes
+                            id='positionsSelfMarginsDimensions'
+                            attribute='positions'
+                            name='ShowSelfMarginsDimensions'
+                            labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
+                            value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
+                            onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
+                          />
+                          <InputGroup
+                            labelText={Text({ textId: '@Color' })}
+                            inputKey='color'
+                            labelClassName=''
+                            inputClassName=''
+                            type='color'
+                            value={props.properties.dimensionOptions.selfMarginsDimensions.color}
+                            onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
+                        </div>
           }
           {
             SHOW_CHILDREN_DIMENSIONS &&
-            <div className='grid grid-cols-1 gap-2'>
-              <PositionCheckboxes
-                id='positionsChildrenDimensions'
-                attribute='positions'
-                name='ShowChildrenDimensions'
-                labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
-                value={props.properties.dimensionOptions.childrenDimensions.positions}
-                onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
-              />
-              <InputGroup
-                labelText={Text({ textId: '@Color' })}
-                inputKey='color'
-                labelClassName=''
-                inputClassName=''
-                type='color'
-                value={props.properties.dimensionOptions.childrenDimensions.color}
-                onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
-            </div>
+                        <div className='grid grid-cols-1 gap-2'>
+                          <PositionCheckboxes
+                            id='positionsChildrenDimensions'
+                            attribute='positions'
+                            name='ShowChildrenDimensions'
+                            labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
+                            value={props.properties.dimensionOptions.childrenDimensions.positions}
+                            onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
+                          />
+                          <InputGroup
+                            labelText={Text({ textId: '@Color' })}
+                            inputKey='color'
+                            labelClassName=''
+                            inputClassName=''
+                            type='color'
+                            value={props.properties.dimensionOptions.childrenDimensions.color}
+                            onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
+                        </div>
           }
           {
             SHOW_BORROWER_DIMENSIONS &&
-            <>
-              <div className='grid grid-cols-1 gap-2'>
-                <OrientationCheckboxes
-                  id='markPosition'
-                  name='MarkPosition'
-                  value={props.properties.dimensionOptions.markPosition}
-                  labelText={Text({ textId: '@ContainerMarkPosition' })}
-                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
-                />
-              </div>
-              <div className='grid grid-cols-1 gap-2'>
-                <PositionCheckboxes
-                  id='positionsDimensionWithMarks'
-                  attribute='positions'
-                  name='ShowDimensionWithMarks'
-                  labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
-                  value={props.properties.dimensionOptions.dimensionWithMarks.positions}
-                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
-                />
-                <InputGroup
-                  labelText={Text({ textId: '@Color' })}
-                  inputKey='color'
-                  labelClassName=''
-                  inputClassName=''
-                  type='color'
-                  value={props.properties.dimensionOptions.dimensionWithMarks.color}
-                  onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
-              </div>
-            </>
+                        <>
+                          <div className='grid grid-cols-1 gap-2'>
+                            <OrientationCheckboxes
+                              id='markPosition'
+                              name='MarkPosition'
+                              value={props.properties.dimensionOptions.markPosition}
+                              labelText={Text({ textId: '@ContainerMarkPosition' })}
+                              onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
+                            />
+                          </div>
+                          <div className='grid grid-cols-1 gap-2'>
+                            <PositionCheckboxes
+                              id='positionsDimensionWithMarks'
+                              attribute='positions'
+                              name='ShowDimensionWithMarks'
+                              labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
+                              value={props.properties.dimensionOptions.dimensionWithMarks.positions}
+                              onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
+                            />
+                            <InputGroup
+                              labelText={Text({ textId: '@Color' })}
+                              inputKey='color'
+                              labelClassName=''
+                              inputClassName=''
+                              type='color'
+                              value={props.properties.dimensionOptions.dimensionWithMarks.color}
+                              onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
+                          </div>
+                        </>
           }
         </div>
       </Category>
 
-      { props.properties.style !== undefined &&
-        <Category category={{
-          Type: 'Style',
-          DisplayedText: Text({ textId: '@ContainerStyle' })
-        }}
-        heightClass={`${categoryHeight}`}
-        >
-          <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
-            <TextInputGroup
-              id={`${props.properties.id}-stroke`}
-              labelText={Text({ textId: '@StyleStroke' })}
-              inputKey='stroke'
-              labelClassName='col-span-2'
-              inputClassName='col-span-3'
-              type='string'
-              value={props.properties.style.stroke ?? 'black'}
-              onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
-            />
-            <InputGroup
-              labelKey={`${props.properties.id}-strokeOpacity`}
-              labelText={Text({ textId: '@StyleStrokeOpacity' })}
-              inputKey='strokeOpacity'
-              labelClassName='col-span-2'
-              inputClassName='col-span-3'
-              type='range'
-              min={0}
-              max={1}
-              step={0.01}
-              value={(props.properties.style.strokeOpacity ?? 1).toString()}
-              onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
-            />
-            <TextInputGroup
-              id={`${props.properties.id}-strokeWidth`}
-              labelText={Text({ textId: '@StyleStrokeWidth' })}
-              inputKey='strokeWidth'
-              labelClassName='col-span-2'
-              inputClassName='col-span-3'
-              type='number'
-              value={(props.properties.style.strokeWidth ?? 1).toString()}
-              onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
-            />
-            <TextInputGroup
-              id={`${props.properties.id}-fill`}
-              labelText={Text({ textId: '@StyleFill' })}
-              inputKey='fill'
-              labelClassName='col-span-2'
-              inputClassName='col-span-3'
-              type='string'
-              value={props.properties.style.fill ?? 'black'}
-              onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
-            />
-            <InputGroup
-              labelKey={`${props.properties.id}-fillOpacity`}
-              labelText={Text({ textId: '@StyleFillOpacity' })}
-              inputKey='fillOpacity'
-              labelClassName='col-span-2'
-              inputClassName='col-span-3'
-              type='range'
-              min={0}
-              max={1}
-              step={0.01}
-              value={(props.properties.style.fillOpacity ?? 1).toString()}
-              onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
-            />
-          </div>
-        </Category>
+      {props.properties.style !== undefined &&
+                <Category category={{
+                  Type: 'Style',
+                  DisplayedText: Text({ textId: '@ContainerStyle' })
+                }}
+                heightClass={`${categoryHeight}`}
+                >
+                  <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
+                    <TextInputGroup
+                      id={`${props.properties.id}-stroke`}
+                      labelText={Text({ textId: '@StyleStroke' })}
+                      inputKey='stroke'
+                      labelClassName='col-span-2'
+                      inputClassName='col-span-3'
+                      type='string'
+                      value={props.properties.style.stroke ?? 'black'}
+                      onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
+                    />
+                    <InputGroup
+                      labelKey={`${props.properties.id}-strokeOpacity`}
+                      labelText={Text({ textId: '@StyleStrokeOpacity' })}
+                      inputKey='strokeOpacity'
+                      labelClassName='col-span-2'
+                      inputClassName='col-span-3'
+                      type='range'
+                      min={0}
+                      max={1}
+                      step={0.01}
+                      value={(props.properties.style.strokeOpacity ?? 1).toString()}
+                      onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
+                    />
+                    <TextInputGroup
+                      id={`${props.properties.id}-strokeWidth`}
+                      labelText={Text({ textId: '@StyleStrokeWidth' })}
+                      inputKey='strokeWidth'
+                      labelClassName='col-span-2'
+                      inputClassName='col-span-3'
+                      type='number'
+                      value={(props.properties.style.strokeWidth ?? 1).toString()}
+                      onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
+                    />
+                    <TextInputGroup
+                      id={`${props.properties.id}-fill`}
+                      labelText={Text({ textId: '@StyleFill' })}
+                      inputKey='fill'
+                      labelClassName='col-span-2'
+                      inputClassName='col-span-3'
+                      type='string'
+                      value={props.properties.style.fill ?? 'black'}
+                      onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
+                    />
+                    <InputGroup
+                      labelKey={`${props.properties.id}-fillOpacity`}
+                      labelText={Text({ textId: '@StyleFillOpacity' })}
+                      inputKey='fillOpacity'
+                      labelClassName='col-span-2'
+                      inputClassName='col-span-3'
+                      type='range'
+                      min={0}
+                      max={1}
+                      step={0.01}
+                      value={(props.properties.style.fillOpacity ?? 1).toString()}
+                      onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
+                    />
+                  </div>
+                </Category>
       }
     </div>
   );
diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx
index c705909..62d8bef 100644
--- a/src/Components/SVG/Elements/DimensionLayer.tsx
+++ b/src/Components/SVG/Elements/DimensionLayer.tsx
@@ -12,9 +12,11 @@ import {
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
 import { TransformX, TransformY } from '../../../utils/svg';
 import { Dimension } from './Dimension';
+import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 
 interface IDimensionLayerProps {
   containers: Map<string, IContainerModel>
+  symbols: Map<string, ISymbolModel>
   root: IContainerModel
   scale: number
 }
@@ -35,7 +37,8 @@ function ActionByPosition(
   horizontalAction: (dim: number, ...params: any[]) => void,
   verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
   params: any[]
-): void {
+): boolean {
+  let incrementDepthSymbols = false;
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
@@ -47,10 +50,12 @@ function ActionByPosition(
       }
       case Position.Down:
       case Position.Up:
+        incrementDepthSymbols = true;
         horizontalAction(dim, ...params);
         break;
     }
   });
+  return incrementDepthSymbols;
 }
 
 /**
@@ -58,7 +63,7 @@ function ActionByPosition(
  * @param param0 Object with the root container and the scale of the svg
  * @returns A list of dimensions
  */
-function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.ReactNode[] {
+function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): React.ReactNode[] {
   const it = MakeRecursionDFSIterator(root, containers, 0, [0, 0]);
   const dimensions: React.ReactNode[] = [];
   const topDim = root.properties.y;
@@ -69,6 +74,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
   if (!SHOW_SELF_DIMENSIONS) {
     return [];
   }
+  let startDepthSymbols: number = 0;
 
   for (const { container, depth, currentTransform } of it) {
     const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
@@ -78,7 +84,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
     const containerRightDim = rightDim + offset;
     const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
     if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
-      ActionByPosition(
+      const incrementDepthSymbol = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfDimensions.positions,
         AddHorizontalSelfDimension,
@@ -90,10 +96,11 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           scale,
           container.properties.dimensionOptions.selfDimensions.color]
       );
+      if (incrementDepthSymbol) { startDepthSymbols++; }
     }
 
     if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
-      ActionByPosition(
+      const incrementDepthSymbol = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfMarginsDimensions.positions,
         AddHorizontalSelfMarginsDimension,
@@ -105,12 +112,14 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           scale,
           container.properties.dimensionOptions.selfMarginsDimensions.color]
       );
+      if (incrementDepthSymbol) { startDepthSymbols++; }
     }
 
     if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
-      ActionByPosition(
+      const incrementDepthSymbol = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.dimensionWithMarks.positions,
+
         AddHorizontalBorrowerDimension,
         AddVerticalBorrowerDimension,
         [
@@ -122,10 +131,11 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           scale,
           container.properties.dimensionOptions.dimensionWithMarks.color]
       );
+      if (incrementDepthSymbol) { startDepthSymbols++; }
     }
 
     if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
-      ActionByPosition(
+      const incrementDepthSymbol = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.childrenDimensions.positions,
         AddHorizontalChildrenDimension,
@@ -138,12 +148,50 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           scale,
           container.properties.dimensionOptions.childrenDimensions.color]
       );
+
+      if (incrementDepthSymbol) { startDepthSymbols++; }
+    }
+  }
+
+  for (const symbol of symbols) {
+    if (symbol[1].showDimension) {
+      startDepthSymbols++;
+      AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols);
     }
   }
 
   return dimensions;
 }
 
+function AddHorizontalSymbolDimension(symbol: ISymbolModel,
+  dimensions: React.ReactNode[],
+  scale: number,
+  color: string,
+  depth: number
+): void {
+  const width = symbol.x + (symbol.width / 2);
+  if (width != null && width > 0) {
+    const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
+
+    const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const text = width
+      .toFixed(0)
+      .toString();
+    dimensions.push(
+      <Dimension
+        key={id}
+        id={id}
+        xStart={0}
+        yStart={-offset}
+        xEnd={width}
+        yEnd={-offset}
+        text={text}
+        scale={scale}
+        color={color}/>
+    );
+  }
+}
+
 /**
  * A layer containing all dimension
  * @param props
@@ -152,7 +200,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
 export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
   return (
     <g>
-      { Dimensions(props) }
+      {Dimensions(props)}
     </g>
   );
 }
@@ -230,7 +278,6 @@ function AddVerticalChildrenDimension(
   dimensions: React.ReactNode[],
   scale: number,
   color: string
-
 ): void {
   const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
 
@@ -451,7 +498,6 @@ function AddVerticalSelfDimension(
 }
 
 function AddHorizontalSelfDimension(
-
   yDim: number,
   container: IContainerModel,
   currentTransform: [number, number],
@@ -481,7 +527,6 @@ function AddHorizontalSelfDimension(
 }
 
 function AddHorizontalSelfMarginsDimension(
-
   yDim: number,
   container: IContainerModel,
   currentTransform: [number, number],
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index 92d4095..cdb11de 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -97,7 +97,7 @@ export function SVG(props: ISVGProps): JSX.Element {
           {SHOW_DIMENSIONS_PER_DEPTH
             ? <DepthDimensionLayer containers={props.containers} scale={scale} roots={props.children} />
             : null}
-          <DimensionLayer containers={props.containers} scale={scale} root={props.children} />
+          <DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
           <SymbolLayer scale={scale} symbols={props.symbols} />
           <Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
diff --git a/src/Components/SymbolProperties/SymbolForm.tsx b/src/Components/SymbolProperties/SymbolForm.tsx
index 0c9877d..9ffc727 100644
--- a/src/Components/SymbolProperties/SymbolForm.tsx
+++ b/src/Components/SymbolProperties/SymbolForm.tsx
@@ -4,6 +4,8 @@ import { RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { Text } from '../Text/Text';
+import { PropertyType } from '../../Enums/PropertyType';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 
 interface ISymbolFormProps {
   symbol: ISymbolModel
@@ -60,6 +62,13 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         min={0}
         value={props.symbol.width.toString()}
         onChange={(value) => props.onChange('width', Number(value))} />
+      <ToggleButton
+        labelText={Text({ textId: '@ShowDimension' })}
+        inputKey='showDimension'
+        labelClassName=''
+        inputClassName=''
+        checked={props.symbol.showDimension}
+        onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
     </div>
   );
 }
diff --git a/src/Interfaces/ISymbolModel.ts b/src/Interfaces/ISymbolModel.ts
index f58af29..3a71290 100644
--- a/src/Interfaces/ISymbolModel.ts
+++ b/src/Interfaces/ISymbolModel.ts
@@ -26,4 +26,7 @@ export interface ISymbolModel {
 
   /** List of linked container id */
   linkedContainers: Set<string>
+
+  /** Dimensions options */
+  showDimension: boolean
 }
diff --git a/src/utils/default.ts b/src/utils/default.ts
index b0648b1..632c12a 100644
--- a/src/utils/default.ts
+++ b/src/utils/default.ts
@@ -313,6 +313,7 @@ export function GetDefaultSymbolModel(name: string,
     x: 0,
     width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH,
     height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT,
-    linkedContainers: new Set()
+    linkedContainers: new Set(),
+    showDimension: false
   };
 }