diff --git a/src/Components/Category/Category.tsx b/src/Components/Category/Category.tsx
index 254c984..f3d0e4f 100644
--- a/src/Components/Category/Category.tsx
+++ b/src/Components/Category/Category.tsx
@@ -4,25 +4,29 @@ import { ICategory } from '../../Interfaces/ICategory';
 import { TruncateString } from '../../utils/stringtools';
 
 interface ICategoryProps {
-  children: JSX.Element[]
+  heightClass?: string
+  children?: JSX.Element[] | JSX.Element
   category: ICategory
+  defaultIsOpen?: boolean
 }
 
 export function Category(props: ICategoryProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);
 
   const categoryType: string = props.category.Type;
   const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;
 
+  const heightClass = props.heightClass ?? 'h-16';
+
   return (
     <div
-      className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
+      className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : `overflow-visible ${heightClass}`}`}
       key={categoryType}
       id={categoryType}
       title={categoryDisplayedText}
     >
       <div
-        className={'flex flex-row group h-16 cursor-pointer'}
+        className={`flex flex-row group cursor-pointer ${heightClass}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         <span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>
diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx
index d3e82f4..31718b5 100644
--- a/src/Components/ContainerProperties/ContainerForm.tsx
+++ b/src/Components/ContainerProperties/ContainerForm.tsx
@@ -12,6 +12,7 @@ import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenc
 import { OrientationSelector } from '../RadioGroupButtons/OrientationSelector';
 import { OrientationCheckboxes } from '../CheckboxGroupButtons/OrientationCheckboxes';
 import { PositionCheckboxes } from '../CheckboxGroupButtons/PositionCheckboxes';
+import { Category } from '../Category/Category';
 
 interface IContainerFormProps {
   properties: IContainerProperties
@@ -28,8 +29,8 @@ function GetCSSInputs(properties: IContainerProperties,
       id={key}
       labelText={key}
       inputKey={key}
-      labelClassName=''
-      inputClassName=''
+      labelClassName='col-span-2'
+      inputClassName='col-span-3'
       type='string'
       value={(properties.style as any)[key]}
       onChange={(value) => onChange(key, value, PropertyType.Style)} />);
@@ -38,32 +39,9 @@ function GetCSSInputs(properties: IContainerProperties,
 }
 
 export function ContainerForm(props: IContainerFormProps): JSX.Element {
+  const categoryHeight = 'h-11';
   return (
-    <div className='grid grid-cols-1 md:grid-cols-2 gap-y-6 items-center'>
-      <InputGroup
-        labelText='Name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.id.toString()}
-        isDisabled={true} />
-      <InputGroup
-        labelText='Parent name'
-        inputKey='parentId'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.parentId}
-        isDisabled={true} />
-      <InputGroup
-        labelText='Type'
-        inputKey='type'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.type}
-        isDisabled={true} />
+    <div className='grid grid-cols-1 gap-y-4 items-center'>
       <TextInputGroup
         id={`${props.properties.id}-displayedText`}
         labelText='Displayed text'
@@ -80,234 +58,356 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.orientation}
         onChange={props.onChange}
       />
-      <TextInputGroup
-        id={`${props.properties.id}-x`}
-        labelText='x'
-        inputKey='x'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        isDisabled={props.properties.linkedSymbolId !== ''}
-        value={TransformX(
-          RemoveXMargin(props.properties.x, props.properties.margin.left),
-          props.properties.width,
-          props.properties.positionReference
-        ).toString()}
-        onChange={(value) => props.onChange(
-          'x',
-          ApplyXMargin(
-            RestoreX(
-              Number(value),
+
+      <Category
+        category={{
+          Type: 'Properties',
+          DisplayedText: 'Properties'
+        }}
+        heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-1 gap-y-6 items-center prop-category-body'>
+          <div>
+            <InputGroup
+              labelText='Name'
+              inputKey='id'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.id.toString()}
+              isDisabled={true} />
+          </div>
+          <div>
+            <InputGroup
+              labelText='Parent name'
+              inputKey='parentId'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.parentId}
+              isDisabled={true} />
+          </div>
+          <div>
+            <InputGroup
+              labelText='Type'
+              inputKey='type'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.type}
+              isDisabled={true} />
+          </div>
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Position',
+        DisplayedText: 'Position'
+      }}
+      defaultIsOpen={true}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-3 gap-y-2 items-center prop-category-body'>
+          <TextInputGroup
+            id={`${props.properties.id}-x`}
+            labelText='x'
+            inputKey='x'
+            labelClassName=''
+            inputClassName='col-span-2'
+            type='number'
+            isDisabled={props.properties.linkedSymbolId !== ''}
+            value={TransformX(
+              RemoveXMargin(props.properties.x, props.properties.margin.left),
               props.properties.width,
               props.properties.positionReference
-            ),
-            props.properties.margin.left
-          )
-        )} />
-      <TextInputGroup
-        id={`${props.properties.id}-y`}
-        labelText='y'
-        inputKey='y'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={TransformY(
-          RemoveXMargin(props.properties.y, props.properties.margin.top),
-          props.properties.height,
-          props.properties.positionReference
-        ).toString()}
-        onChange={(value) => props.onChange(
-          'y',
-          ApplyXMargin(
-            RestoreY(
-              Number(value),
+            ).toString()}
+            onChange={(value) => props.onChange(
+              'x',
+              ApplyXMargin(
+                RestoreX(
+                  Number(value),
+                  props.properties.width,
+                  props.properties.positionReference
+                ),
+                props.properties.margin.left
+              )
+            )} />
+          <TextInputGroup
+            id={`${props.properties.id}-y`}
+            labelText='y'
+            inputKey='y'
+            labelClassName=''
+            inputClassName='col-span-2'
+            type='number'
+            value={TransformY(
+              RemoveXMargin(props.properties.y, props.properties.margin.top),
               props.properties.height,
               props.properties.positionReference
-            ),
-            props.properties.margin.top
-          )
-        )} />
-      <TextInputGroup
-        id={`${props.properties.id}-minWidth`}
-        labelText='Minimum Width'
-        inputKey='minWidth'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.minWidth.toString()}
-        onChange={(value) => props.onChange('minWidth', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-maxWidth`}
-        labelText='Maximum Width'
-        inputKey='maxWidth'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.maxWidth.toString()}
-        onChange={(value) => props.onChange('maxWidth', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-width`}
-        labelText='Width'
-        inputKey='width'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={props.properties.minWidth}
-        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} />
-      <TextInputGroup
-        id={`${props.properties.id}-minHeight`}
-        labelText='Minimum Height'
-        inputKey='minHeight'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.minHeight.toString()}
-        onChange={(value) => props.onChange('minHeight', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-maxHeight`}
-        labelText='Maximum Height'
-        inputKey='maxHeight'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.maxHeight.toString()}
-        onChange={(value) => props.onChange('maxHeight', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-height`}
-        labelText='Height'
-        inputKey='height'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={props.properties.minHeight}
-        max={props.properties.maxHeight}
-        value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()}
-        onChange={(value) => props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom))}
-        isDisabled={props.properties.isFlex}
-      />
-      <TextInputGroup
-        id={`${props.properties.id}-ml`}
-        labelText='Margin left'
-        inputKey='left'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={(props.properties.margin.left ?? 0).toString()}
-        onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
-      <TextInputGroup
-        id={`${props.properties.id}-mb`}
-        labelText='Margin bottom'
-        inputKey='bottom'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={(props.properties.margin.bottom ?? 0).toString()}
-        onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
-      <TextInputGroup
-        id={`${props.properties.id}-mt`}
-        labelText='Margin top'
-        inputKey='top'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={(props.properties.margin.top ?? 0).toString()}
-        onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
-      <TextInputGroup
-        id={`${props.properties.id}-mr`}
-        labelText='Margin right'
-        inputKey='right'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={(props.properties.margin.right ?? 0).toString()}
-        onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
-      <ToggleButton
-        labelText='Flex'
-        inputKey='isFlex'
-        labelClassName=''
-        inputClassName=''
-        type={ToggleType.Full}
-        checked={props.properties.isFlex}
-        onChange={(event) => props.onChange('isFlex', event.target.checked)}
-      />
-      <ToggleButton
-        labelText='Anchor'
-        inputKey='isAnchor'
-        labelClassName=''
-        inputClassName=''
-        type={ToggleType.Full}
-        checked={props.properties.isAnchor}
-        onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
-      <PositionReferenceSelector
-        id='positionReference'
-        name='PositionReference'
-        labelText='Alignment'
-        value={props.properties.positionReference}
-        onChange={props.onChange}
-      />
-      <Select
-        inputKey='linkedSymbolId'
-        labelText='Align with symbol'
-        labelClassName=''
-        inputClassName=''
-        inputs={[...props.symbols.values()].map(symbol => ({
-          key: symbol.id,
-          text: symbol.id,
-          value: symbol.id
-        }))}
-        value={props.properties.linkedSymbolId ?? ''}
-        onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
-      {GetCSSInputs(props.properties, props.onChange)}
-      {
-        SHOW_SELF_DIMENSIONS &&
-        <PositionCheckboxes
-          id='showSelfDimensions'
-          name='ShowSelfDimensions'
-          labelText='Show dimension'
-          value={props.properties.showSelfDimensions}
-          onChange={props.onChange}
-        />
-      }
-      {
-        SHOW_CHILDREN_DIMENSIONS &&
-        <PositionCheckboxes
-          id='showChildrenDimensions'
-          name='ShowChildrenDimensions'
-          labelText='Show overall dimension of its children'
-          value={props.properties.showChildrenDimensions}
-          onChange={props.onChange}
-        />
-      }
-      {
-        SHOW_BORROWER_DIMENSIONS &&
-      <>
-        <OrientationCheckboxes
-          id='markPosition'
-          name='MarkPosition'
-          value={props.properties.markPosition}
-          labelText='Mark the position'
-          onChange={props.onChange}
-        />
-        <PositionCheckboxes
-          id='showDimensionWithMarks'
-          name='ShowDimensionWithMarks'
-          labelText='Show dimension with marked children'
-          value={props.properties.showDimensionWithMarks}
-          onChange={props.onChange}
-        />
-      </>
-      }
+            ).toString()}
+            onChange={(value) => props.onChange(
+              'y',
+              ApplyXMargin(
+                RestoreY(
+                  Number(value),
+                  props.properties.height,
+                  props.properties.positionReference
+                ),
+                props.properties.margin.top
+              )
+            )} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Size',
+        DisplayedText: 'Size'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-5 gap-y-2 items-center prop-category-body'>
+          <TextInputGroup
+            id={`${props.properties.id}-minWidth`}
+            labelText='Minimum Width'
+            inputKey='minWidth'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.minWidth.toString()}
+            onChange={(value) => props.onChange('minWidth', Number(value))} />
+          <TextInputGroup
+            id={`${props.properties.id}-width`}
+            labelText='Width'
+            inputKey='width'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={props.properties.minWidth}
+            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} />
+          <TextInputGroup
+            id={`${props.properties.id}-maxWidth`}
+            labelText='Maximum Width'
+            inputKey='maxWidth'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.maxWidth.toString()}
+            onChange={(value) => props.onChange('maxWidth', Number(value))} />
+          <div className='col-span-5 p-3'></div>
+          <TextInputGroup
+            id={`${props.properties.id}-minHeight`}
+            labelText='Minimum Height'
+            inputKey='minHeight'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.minHeight.toString()}
+            onChange={(value) => props.onChange('minHeight', Number(value))} />
+          <TextInputGroup
+            id={`${props.properties.id}-height`}
+            labelText='Height'
+            inputKey='height'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={props.properties.minHeight}
+            max={props.properties.maxHeight}
+            value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()}
+            onChange={(value) => props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom))}
+            isDisabled={props.properties.isFlex}
+          />
+          <TextInputGroup
+            id={`${props.properties.id}-maxHeight`}
+            labelText='Maximum Height'
+            inputKey='maxHeight'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.maxHeight.toString()}
+            onChange={(value) => props.onChange('maxHeight', Number(value))} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Margins',
+        DisplayedText: 'Margins'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
+          <TextInputGroup
+            id={`${props.properties.id}-ml`}
+            labelText='Margin left'
+            inputKey='left'
+            labelClassName=''
+            inputClassName=''
+            type='number'
+            min={0}
+            value={(props.properties.margin.left ?? 0).toString()}
+            onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
+          <TextInputGroup
+            id={`${props.properties.id}-mb`}
+            labelText='Margin bottom'
+            inputKey='bottom'
+            labelClassName=''
+            inputClassName=''
+            type='number'
+            min={0}
+            value={(props.properties.margin.bottom ?? 0).toString()}
+            onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
+          <TextInputGroup
+            id={`${props.properties.id}-mt`}
+            labelText='Margin top'
+            inputKey='top'
+            labelClassName=''
+            inputClassName=''
+            type='number'
+            min={0}
+            value={(props.properties.margin.top ?? 0).toString()}
+            onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
+          <TextInputGroup
+            id={`${props.properties.id}-mr`}
+            labelText='Margin right'
+            inputKey='right'
+            labelClassName=''
+            inputClassName=''
+            type='number'
+            min={0}
+            value={(props.properties.margin.right ?? 0).toString()}
+            onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Behaviors',
+        DisplayedText: 'Behaviors'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
+          <ToggleButton
+            labelText='Flex'
+            inputKey='isFlex'
+            labelClassName=''
+            inputClassName='ml-auto mr-auto block'
+            type={ToggleType.Full}
+            checked={props.properties.isFlex}
+            onChange={(event) => props.onChange('isFlex', event.target.checked)}
+          />
+          <ToggleButton
+            labelText='Anchor'
+            inputKey='isAnchor'
+            labelClassName=''
+            inputClassName='ml-auto mr-auto block'
+            type={ToggleType.Full}
+            checked={props.properties.isAnchor}
+            onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Alignment',
+        DisplayedText: 'Alignment'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='prop-category-body'>
+          <PositionReferenceSelector
+            id='positionReference'
+            name='PositionReference'
+            labelText='Alignment'
+            value={props.properties.positionReference}
+            onChange={props.onChange}
+          />
+          <div className='p-3'></div>
+          <Select
+            inputKey='linkedSymbolId'
+            labelText='Align with symbol'
+            labelClassName=''
+            inputClassName=''
+            inputs={[...props.symbols.values()].map(symbol => ({
+              key: symbol.id,
+              text: symbol.id,
+              value: symbol.id
+            }))}
+            value={props.properties.linkedSymbolId ?? ''}
+            onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Dimensions',
+        DisplayedText: 'Dimensions'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-1 gap-6 prop-category-body'>
+          {
+            SHOW_SELF_DIMENSIONS &&
+            <div className='grid grid-cols-1 gap-2'>
+              <PositionCheckboxes
+                id='showSelfDimensions'
+                name='ShowSelfDimensions'
+                labelText='Show dimension'
+                value={props.properties.showSelfDimensions}
+                onChange={props.onChange}
+              />
+            </div>
+          }
+          {
+            SHOW_CHILDREN_DIMENSIONS &&
+            <div className='grid grid-cols-1 gap-2'>
+              <PositionCheckboxes
+                id='showChildrenDimensions'
+                name='ShowChildrenDimensions'
+                labelText='Show overall dimension of its children'
+                value={props.properties.showChildrenDimensions}
+                onChange={props.onChange}
+              />
+            </div>
+          }
+          {
+            SHOW_BORROWER_DIMENSIONS &&
+          <>
+            <div className='grid grid-cols-1 gap-2'>
+              <OrientationCheckboxes
+                id='markPosition'
+                name='MarkPosition'
+                value={props.properties.markPosition}
+                labelText='Mark the position'
+                onChange={props.onChange}
+              />
+            </div>
+            <div className='grid grid-cols-1 gap-2'>
+              <PositionCheckboxes
+                id='showDimensionWithMarks'
+                name='ShowDimensionWithMarks'
+                labelText='Show dimension with marked children'
+                value={props.properties.showDimensionWithMarks}
+                onChange={props.onChange}
+              />
+            </div>
+          </>
+          }
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Style',
+        DisplayedText: 'Style'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
+          {GetCSSInputs(props.properties, props.onChange)}
+        </div>
+      </Category>
     </div>
   );
 }
diff --git a/src/Components/ToggleButton/ToggleButton.tsx b/src/Components/ToggleButton/ToggleButton.tsx
index 4bcab7b..74829bf 100644
--- a/src/Components/ToggleButton/ToggleButton.tsx
+++ b/src/Components/ToggleButton/ToggleButton.tsx
@@ -35,7 +35,7 @@ export function ToggleButton(props: IToggleButtonProps): JSX.Element {
       { props.labelText }
     </label>
     <label
-      className="relative cursor-pointer"
+      className={`relative cursor-pointer ${props.inputClassName}`}
       htmlFor={props.inputKey}
     >
       <input
diff --git a/src/index.scss b/src/index.scss
index 059061d..41c4b9c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -118,6 +118,10 @@
         text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
         bg-white border-2 border-white rounded-lg placeholder-gray-800
         focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
+        disabled:bg-slate-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
+  }
+
+  .prop-category-body {
+    @apply rounded-lg bg-slate-300 p-3
   }
 }
\ No newline at end of file