diff --git a/e2e/rectangle-shape.spec.ts b/e2e/rectangle-shape.spec.ts
index be35ae18..3e56bf85 100644
--- a/e2e/rectangle-shape.spec.ts
+++ b/e2e/rectangle-shape.spec.ts
@@ -12,13 +12,13 @@ test('has rectangle component', async ({ page }) => {
   await page.goto('');
   await page.getByText('Basic Shapes').click();
 
-  await expect(page.getByAltText('Rectangle')).toBeVisible();
+  await expect(page.getByAltText(/^Rectangle$/)).toBeVisible();
 });
 
 test('can add rectangle component to canvas', async ({ page }) => {
   await page.goto('');
   await page.getByText('Basic Shapes').click();
-  const component = page.getByAltText('Rectangle');
+  const component = page.getByAltText(/^Rectangle$/);
 
   const position = await getLocatorPosition(component);
   await dragAndDrop(page, position, {
diff --git a/public/low-wireframes/rectangleLow.svg b/public/low-wireframes/rectangleLow.svg
new file mode 100644
index 00000000..bfe76d05
--- /dev/null
+++ b/public/low-wireframes/rectangleLow.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="4" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/src/common/components/mock-components/front-low-wireframes-components/index.ts b/src/common/components/mock-components/front-low-wireframes-components/index.ts
index 48739579..3de0c0f5 100644
--- a/src/common/components/mock-components/front-low-wireframes-components/index.ts
+++ b/src/common/components/mock-components/front-low-wireframes-components/index.ts
@@ -2,4 +2,5 @@ export * from './ellipse-low-shape';
 export * from './horizontal-line-low-shape';
 export * from './image-placeholder-shape';
 export * from './vertical-line-low-shape';
+export * from './rectangle-low-shape';
 export * from './circle-low-shape';
diff --git a/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
new file mode 100644
index 00000000..80f560c8
--- /dev/null
+++ b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
@@ -0,0 +1,66 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { Group, Rect } from 'react-konva';
+import { useGroupShapeProps } from '../mock-components.utils';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+
+const rectangleLowShapeRestriction: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 160,
+};
+
+export const getRectangleLowShapeRestrictions = (): ShapeSizeRestrictions =>
+  rectangleLowShapeRestriction;
+
+const shapeType: ShapeType = 'rectangleLow';
+
+export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    rectangleLowShapeRestriction,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        width={restrictedWidth}
+        height={restrictedHeight}
+        stroke={stroke}
+        dash={strokeStyle}
+        strokeWidth={6}
+        fill="white"
+      />
+    </Group>
+  );
+});
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index e3cd0d79..de8ffe0f 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -81,6 +81,7 @@ export type ShapeType =
   | 'horizontalLineLow'
   | 'verticalLineLow'
   | 'ellipseLow'
+  | 'rectangleLow'
   | 'circleLow';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
@@ -151,6 +152,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   horizontalLineLow: 'Horizontal Divider',
   verticalLineLow: 'Vertical Divider',
   ellipseLow: 'Ellipse',
+  rectangleLow: 'Rectangle Placeholder',
   circleLow: 'Circle',
 };
 
diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
index ae5e47f3..ae86143d 100644
--- a/src/pods/canvas/model/shape-other-props.utils.ts
+++ b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -123,6 +123,7 @@ export const generateDefaultOtherProps = (
       };
     case 'horizontalLine':
     case 'horizontalLineLow':
+    case 'rectangleLow':
     case 'circleLow':
     case 'verticalLineLow':
     case 'ellipseLow':
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
index fa029ea9..034c769e 100644
--- a/src/pods/canvas/model/shape-size.mapper.ts
+++ b/src/pods/canvas/model/shape-size.mapper.ts
@@ -82,6 +82,7 @@ import {
   getHorizontalLineLowShapeRestrictions,
   getImagePlaceholderShapeSizeRestrictions,
   getVerticalLineLowShapeRestrictions,
+  getRectangleLowShapeRestrictions,
   getEllipseLowShapeRestrictions,
   getCircleLowShapeSizeRestrictions,
 } from '@/common/components/mock-components/front-low-wireframes-components';
@@ -164,6 +165,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   horizontalLineLow: getHorizontalLineLowShapeRestrictions,
   verticalLineLow: getVerticalLineLowShapeRestrictions,
   ellipseLow: getEllipseLowShapeRestrictions,
+  rectangleLow: getRectangleLowShapeRestrictions,
   circleLow: getCircleLowShapeSizeRestrictions,
 };
 
diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx
index 7e667e91..92b85522 100644
--- a/src/pods/canvas/shape-renderer/index.tsx
+++ b/src/pods/canvas/shape-renderer/index.tsx
@@ -79,6 +79,7 @@ import {
   renderImagePlaceHolder,
   renderVerticalLowLine,
   renderEllipseLow,
+  renderRectangleLow,
 } from './simple-low-wireframes-components';
 
 export const renderShapeComponent = (
@@ -218,6 +219,8 @@ export const renderShapeComponent = (
       return renderVerticalLowLine(shape, shapeRenderedProps);
     case 'ellipseLow':
       return renderEllipseLow(shape, shapeRenderedProps);
+    case 'rectangleLow':
+      return renderRectangleLow(shape, shapeRenderedProps);
     case 'circleLow':
       return renderCircleLow(shape, shapeRenderedProps);
     default:
diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
index 8d2aadce..ca8ea9da 100644
--- a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
+++ b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
@@ -2,4 +2,5 @@ export * from './ellipse-low.renderer';
 export * from './image-placeholder.renderer';
 export * from './low-horizontal-line.renderer';
 export * from './low-vertical-line.renderer';
+export * from './rectangle-low.renderer';
 export * from './circle-low.renderer';
diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx
new file mode 100644
index 00000000..9fe27c44
--- /dev/null
+++ b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx
@@ -0,0 +1,31 @@
+import { ShapeModel } from '@/core/model';
+import { ShapeRendererProps } from '../model';
+import { RectangleLowShape } from '@/common/components/mock-components/front-low-wireframes-components';
+
+export const renderRectangleLow = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <RectangleLowShape
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      name="shape"
+      width={shape.width}
+      height={shape.height}
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      otherProps={shape.otherProps}
+    />
+  );
+};
diff --git a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts b/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
index 8eec8543..90bc575f 100644
--- a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
+++ b/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
@@ -17,6 +17,10 @@ export const mockLowWireframeCollection: ItemInfo[] = [
     thumbnailSrc: '/low-wireframes/ellipseLow.svg',
     type: 'ellipseLow',
   },
+  {
+    thumbnailSrc: '/low-wireframes/rectangleLow.svg',
+    type: 'rectangleLow',
+  },
   {
     thumbnailSrc: '/low-wireframes/circleLow.svg',
     type: 'circleLow',