diff --git a/e2e/canvas/move-shape-using-keyboard.spec.ts b/e2e/canvas/move-shape-using-keyboard.spec.ts
new file mode 100644
index 00000000..196917c6
--- /dev/null
+++ b/e2e/canvas/move-shape-using-keyboard.spec.ts
@@ -0,0 +1,111 @@
+import { test, expect } from '@playwright/test';
+import {
+  dragAndDrop,
+  getLocatorPosition,
+  getByShapeType,
+  getShapePosition,
+  moveSelected,
+} from '../helpers';
+import { Group } from 'konva/lib/Group';
+
+const numShifts: number = 10;
+
+test('move shape with the keyboard - left', async ({ page }) => {
+  await page.goto('');
+
+  const component = page.getByAltText('Input', { exact: true });
+  const position = await getLocatorPosition(component);
+
+  await dragAndDrop(page, position, {
+    x: position.x + 500,
+    y: position.y - 240,
+  });
+
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+
+  const draggedPosition = await getShapePosition(inputShape);
+
+  moveSelected(page, 'ArrowLeft', numShifts);
+
+  const inputShapeMoved = (await getByShapeType(page, 'input')) as Group;
+  const movedPosition = await getShapePosition(inputShapeMoved);
+
+  expect(movedPosition.x === draggedPosition.x - numShifts * 2).toBeTruthy();
+  expect(movedPosition.y === draggedPosition.y).toBeTruthy();
+});
+
+test('move shape with the keyboard - up', async ({ page }) => {
+  await page.goto('');
+
+  const component = page.getByAltText('Input', { exact: true });
+  const position = await getLocatorPosition(component);
+
+  await dragAndDrop(page, position, {
+    x: position.x + 500,
+    y: position.y - 240,
+  });
+
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+
+  const draggedPosition = await getShapePosition(inputShape);
+
+  moveSelected(page, 'ArrowUp', numShifts);
+
+  const inputShapeMoved = (await getByShapeType(page, 'input')) as Group;
+  const movedPosition = await getShapePosition(inputShapeMoved);
+
+  expect(movedPosition.x === draggedPosition.x).toBeTruthy();
+  expect(movedPosition.y === draggedPosition.y - numShifts * 2).toBeTruthy();
+});
+
+test('move shape with the keyboard - down', async ({ page }) => {
+  await page.goto('');
+
+  const component = page.getByAltText('Input', { exact: true });
+  const position = await getLocatorPosition(component);
+
+  await dragAndDrop(page, position, {
+    x: position.x + 500,
+    y: position.y - 240,
+  });
+
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+
+  const draggedPosition = await getShapePosition(inputShape);
+
+  moveSelected(page, 'ArrowDown', numShifts);
+
+  const inputShapeMoved = (await getByShapeType(page, 'input')) as Group;
+  const movedPosition = await getShapePosition(inputShapeMoved);
+
+  expect(movedPosition.x === draggedPosition.x).toBeTruthy();
+  expect(movedPosition.y === draggedPosition.y + numShifts * 2).toBeTruthy();
+});
+
+test('move shape with the keyboard - right', async ({ page }) => {
+  await page.goto('');
+
+  const component = page.getByAltText('Input', { exact: true });
+  const position = await getLocatorPosition(component);
+
+  await dragAndDrop(page, position, {
+    x: position.x + 500,
+    y: position.y - 240,
+  });
+
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+
+  const draggedPosition = await getShapePosition(inputShape);
+
+  moveSelected(page, 'ArrowRight', numShifts);
+
+  const inputShapeMoved = (await getByShapeType(page, 'input')) as Group;
+  const movedPosition = await getShapePosition(inputShapeMoved);
+
+  expect(movedPosition.x === draggedPosition.x + numShifts * 2).toBeTruthy();
+  expect(movedPosition.y === draggedPosition.y).toBeTruthy();
+});
diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts
index 22f2fe21..fc747d50 100644
--- a/e2e/helpers/konva-testing.helpers.ts
+++ b/e2e/helpers/konva-testing.helpers.ts
@@ -2,6 +2,8 @@ import { Page } from '@playwright/test';
 import { Layer } from 'konva/lib/Layer';
 import { Shape } from 'konva/lib/Shape';
 import { Group } from 'konva/lib/Group';
+import { E2E_CanvasItemKeyAttrs } from './types/e2e-types';
+import { getCanvasBoundingBox } from './position.helpers';
 
 const getLayer = async (page: Page): Promise<Layer> =>
   await page.evaluate(() => {
@@ -59,3 +61,60 @@ export const getTransformer = async (page: Page): Promise<any> => {
   });
   return transformer;
 };
+
+export const getWithinCanvasItemList = async (
+  page: Page
+): Promise<Group['attrs'][]> => {
+  const items = await page.evaluate(() => {
+    return window.__TESTING_KONVA_LAYER__.find(
+      (c: any) => c.getType('Group') && (c.attrs['data-id'] as Group)
+    );
+  });
+  return items.map(it => it.attrs);
+};
+
+export const clickOnCanvasItem = async (
+  page: Page,
+  item: E2E_CanvasItemKeyAttrs
+) => {
+  const { x, y } = item;
+  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const canvasWindowPos = await stageCanvas.boundingBox();
+  if (!canvasWindowPos) throw new Error('Canvas is not loaded on ui');
+  await page.mouse.move(
+    canvasWindowPos?.x + x + 20,
+    canvasWindowPos?.y + y + 20
+  );
+
+  await page.mouse.down();
+  await page.mouse.up();
+
+  return item;
+};
+
+export const dbClickOnCanvasItem = async (
+  page: Page,
+  item: E2E_CanvasItemKeyAttrs
+) => {
+  const { x, y } = item;
+  const canvasWindowPos = await getCanvasBoundingBox(page);
+  await page.mouse.dblclick(
+    canvasWindowPos?.x + x + 20,
+    canvasWindowPos?.y + y + 20
+  );
+  return item;
+};
+
+export const ctrlClickOverCanvasItems = async (
+  page: Page,
+  itemList: E2E_CanvasItemKeyAttrs[]
+) => {
+  if (!itemList.length)
+    throw new Error('Please, add an array with at least one canvas Item');
+  // NOTE: The keyboard entry 'ControlOrMeta' is the way to simulate both 'Ctrl' or 'Command' key
+  await page.keyboard.down('ControlOrMeta');
+  for (const item of itemList) {
+    await clickOnCanvasItem(page, item);
+  }
+  await page.keyboard.up('ControlOrMeta');
+};
diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts
index 84485272..c29f19f1 100644
--- a/e2e/helpers/position.helpers.ts
+++ b/e2e/helpers/position.helpers.ts
@@ -1,4 +1,5 @@
 import { Locator, Page } from '@playwright/test';
+import { Group } from 'konva/lib/Group';
 
 interface Position {
   x: number;
@@ -8,6 +9,7 @@ interface Position {
 export const getLocatorPosition = async (
   locator: Locator
 ): Promise<Position> => {
+  await locator.scrollIntoViewIfNeeded();
   const box = (await locator.boundingBox()) || {
     x: 0,
     y: 0,
@@ -17,6 +19,17 @@ export const getLocatorPosition = async (
   return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
 };
 
+export const getCanvasBoundingBox = async (page: Page) => {
+  const canvasWindowPos = await page
+    .locator('#konva-stage canvas')
+    .boundingBox();
+  if (canvasWindowPos) {
+    return canvasWindowPos;
+  } else {
+    throw new Error('Canvas is not loaded on ui');
+  }
+};
+
 export const dragAndDrop = async (
   page: Page,
   aPosition: Position,
@@ -32,11 +45,13 @@ export const addComponentsToCanvas = async (
   page: Page,
   components: string[]
 ) => {
-  const canvasPosition = await page.locator('canvas').boundingBox();
+  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const canvasPosition = await stageCanvas.boundingBox();
   if (!canvasPosition) throw new Error('No canvas found');
 
   for await (const [index, c] of components.entries()) {
     const component = page.getByAltText(c, { exact: true });
+    await component.scrollIntoViewIfNeeded();
     const position = await getLocatorPosition(component);
 
     const targetPosition = (
@@ -53,3 +68,15 @@ export const addComponentsToCanvas = async (
     await dragAndDrop(page, position, targetPosition(120, index));
   }
 };
+
+export const getShapePosition = async (shape: Group): Promise<Position> => {
+  return { x: shape?.attrs.x, y: shape?.attrs.y };
+};
+
+export const moveSelected = (
+  page: Page,
+  direction: string,
+  numShifts: number
+) => {
+  for (let i: number = 0; i < numShifts; i++) page.keyboard.down(direction);
+};
diff --git a/e2e/helpers/types/e2e-types.d.ts b/e2e/helpers/types/e2e-types.d.ts
new file mode 100644
index 00000000..d755d3f1
--- /dev/null
+++ b/e2e/helpers/types/e2e-types.d.ts
@@ -0,0 +1,8 @@
+export interface E2E_CanvasItemKeyAttrs {
+  x: number;
+  y: number;
+  ['data-id']: string;
+  width: number;
+  height: number;
+  shapeType: string;
+}
diff --git a/e2e/helpers/ui-buttons.helpers.ts b/e2e/helpers/ui-buttons.helpers.ts
new file mode 100644
index 00000000..9dad6572
--- /dev/null
+++ b/e2e/helpers/ui-buttons.helpers.ts
@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+
+export const clickUndoUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Undo' }).click();
+
+export const clickRedoUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Redo' }).click();
+
+export const clickCopyUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Copy' }).click();
+
+export const clickPasteUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Paste' }).click();
diff --git a/e2e/inline-edit/multiple-line-inline-edit.spec.ts b/e2e/inline-edit/multiple-line-inline-edit.spec.ts
new file mode 100644
index 00000000..ad85802c
--- /dev/null
+++ b/e2e/inline-edit/multiple-line-inline-edit.spec.ts
@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test';
+import { Group } from 'konva/lib/Group';
+import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';
+
+test('can add textarea to canvas, edit content, and verify shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+  const textareaContent = await textarea.inputValue();
+  expect(textareaContent).toEqual('Your text here...');
+
+  const textContent = 'Hello';
+  await textarea.fill(textContent);
+  await page.mouse.click(800, 130);
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === textContent
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('cancels textarea edit on Escape and verifies original shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'Hello';
+  await textarea.fill(textContent);
+  await page.keyboard.press('Escape');
+  const originalTextContent = 'Your text here...';
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === originalTextContent
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('can add and edit input, and delete last letter', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'World';
+  await textarea.fill(textContent);
+  await page.keyboard.press('Backspace');
+  const updatedTextareaContent = await textarea.inputValue();
+  expect(updatedTextareaContent).toEqual('Worl');
+
+  await page.mouse.click(800, 130);
+
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === 'Worl'
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('adds multi-line text to textarea on canvas and verifies shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'Line 1\nLine 2';
+  await textarea.fill(textContent);
+
+  await page.mouse.click(800, 130);
+
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === textContent
+  );
+  expect(textShape).toBeDefined();
+});
diff --git a/e2e/inline-edit/simple-inline-edit.spec.ts b/e2e/inline-edit/simple-inline-edit.spec.ts
index b29d1a14..7057a1b7 100644
--- a/e2e/inline-edit/simple-inline-edit.spec.ts
+++ b/e2e/inline-edit/simple-inline-edit.spec.ts
@@ -61,3 +61,29 @@ test('can add and edit input, and delete last letter', async ({ page }) => {
   );
   expect(textShape).toBeDefined();
 });
+
+test('can edit input, press Esc key, and cancel edition', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Input', { exact: true });
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y);
+  const input = page.getByRole('textbox').first();
+  const inputValue = await input.getAttribute('value');
+  expect(inputValue).toEqual('Placeholder');
+
+  const textContent = 'User';
+  await input.fill(textContent);
+  await page.keyboard.press('Escape');
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+  const textShape = inputShape.children.find(
+    child => child.attrs.text === 'Placeholder'
+  );
+  expect(textShape).toBeDefined();
+});
diff --git a/e2e/selection/multiple-selection.spec.ts b/e2e/selection/multiple-selection.spec.ts
index 5992b0ee..7866ce20 100644
--- a/e2e/selection/multiple-selection.spec.ts
+++ b/e2e/selection/multiple-selection.spec.ts
@@ -1,5 +1,11 @@
 import { test, expect } from '@playwright/test';
-import { dragAndDrop, addComponentsToCanvas, getTransformer } from '../helpers';
+import {
+  dragAndDrop,
+  addComponentsToCanvas,
+  getTransformer,
+  getWithinCanvasItemList,
+  ctrlClickOverCanvasItems,
+} from '../helpers';
 
 test('Should perform multiple selection when dragging and dropping over multiple components in the canvas', async ({
   page,
@@ -20,3 +26,52 @@ test('Should perform multiple selection when dragging and dropping over multiple
   const selectedItems = await getTransformer(page);
   expect(selectedItems._nodes.length).toEqual(3);
 });
+
+test('Should deselect all previously selected items when clicking on an empty point on the canvas', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Input', 'Icon', 'Label'];
+  await addComponentsToCanvas(page, componentsAtCanvas);
+
+  //Click Away
+  await page.mouse.click(800, 130);
+
+  //Perform items selection by drag and drop
+  await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+  //Assert
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(3);
+
+  //Click Away
+  await page.mouse.click(800, 130);
+  //Assert
+  const updatedSelectedItems = await getTransformer(page);
+  expect(updatedSelectedItems._nodes.length).toEqual(0);
+});
+
+test('Should add some in-canvas-items to the current selection, by clicking on them, while pressing the CTRL / CMD keyboard.', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Button', 'Textarea', 'Combobox'];
+  await addComponentsToCanvas(page, componentsAtCanvas);
+  const insideCanvasItemList = await getWithinCanvasItemList(page);
+
+  //Assert no elements at current selection
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(1);
+
+  // Add 2 canvas items to current selection
+  const itemsToBeSelected = insideCanvasItemList.slice(1, 3);
+  await ctrlClickOverCanvasItems(page, itemsToBeSelected);
+
+  //Assert the quantity of selected-items
+  const currentSelection = await getTransformer(page);
+  expect(currentSelection._nodes.length).toEqual(3);
+});
diff --git a/e2e/selection/shape-selection.spec.ts b/e2e/selection/shape-selection.spec.ts
index ad9a7b93..cc352ccc 100644
--- a/e2e/selection/shape-selection.spec.ts
+++ b/e2e/selection/shape-selection.spec.ts
@@ -46,7 +46,8 @@ test('drop shape in canvas, click on canvas, drop diselected', async ({
   const inputShape = (await getByShapeType(page, 'input')) as Group;
   expect(inputShape).toBeDefined();
 
-  await page.click('canvas');
+  //Click Away
+  await page.mouse.click(800, 130);
 
   const transformer = await getTransformer(page);
   expect(transformer).toBeDefined();
diff --git a/e2e/ui-functionality/copy-paste.spec.ts b/e2e/ui-functionality/copy-paste.spec.ts
new file mode 100644
index 00000000..3b085f34
--- /dev/null
+++ b/e2e/ui-functionality/copy-paste.spec.ts
@@ -0,0 +1,158 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsToCanvas,
+  dragAndDrop,
+  getWithinCanvasItemList,
+} from '../helpers';
+import { E2E_CanvasItemKeyAttrs } from '../helpers/types/e2e-types';
+import {
+  clickCopyUiButton,
+  clickPasteUiButton,
+} from '../helpers/ui-buttons.helpers';
+
+test.describe('Copy/Paste functionality tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+
+  test('Should copy and paste a single shape using the ToolBar UI buttons', async ({
+    page,
+  }) => {
+    //Arrange one Input component
+    const addInputIntoCanvas = ['Input'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Copy and assert there are only one component within the canvas
+    await clickCopyUiButton(page);
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    expect(insideCanvasItemList.length).toEqual(1);
+
+    //Paste and assert there are 2 Input Components and that they have different IDs
+    await clickPasteUiButton(page);
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComponent, copiedComponent] = updatedInsideCanvasItemList;
+
+    expect(updatedInsideCanvasItemList.length).toEqual(2);
+    expect(originalComponent.shapeType).toEqual(copiedComponent.shapeType);
+    expect(originalComponent['data-id']).not.toEqual(
+      copiedComponent['data-id']
+    );
+  });
+
+  test('Should copy and paste a single shape using keyboard commands', async ({
+    page,
+  }) => {
+    // NOTE: This test has the same steps as the previous one, except for the keyboard commands.
+    //Arrange one Input component
+    const addInputIntoCanvas = ['Input'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Copy and assert there are only one component within the canvas
+    await page.keyboard.press('ControlOrMeta+c');
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    expect(insideCanvasItemList.length).toEqual(1);
+
+    //Paste and assert there are 2 Input Components and that they have different IDs
+    await page.keyboard.press('ControlOrMeta+v');
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComponent, copiedComponent] = updatedInsideCanvasItemList;
+
+    expect(updatedInsideCanvasItemList.length).toEqual(2);
+    expect(originalComponent.shapeType).toEqual(copiedComponent.shapeType);
+    expect(originalComponent['data-id']).not.toEqual(
+      copiedComponent['data-id']
+    );
+  });
+
+  /*
+  test('Should copy and paste a multiple shapes using the ToolBar UI buttons', async ({
+    page,
+  }) => {
+    //Add several components into the canvas
+    const addInputIntoCanvas = ['Input', 'Combobox', 'Icon'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Select items by drag and drop
+    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+    //Copy and assert there are 3 components within the canvas
+    await clickCopyUiButton(page);
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComp_1, originalComp_2, originalComp_3] =
+      insideCanvasItemList;
+    expect(insideCanvasItemList.length).toEqual(3);
+
+    //Paste
+    await clickPasteUiButton(page);
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [, , , copiedComp_1, copiedComp_2, copiedComp_3] =
+      updatedInsideCanvasItemList;
+
+    //Assert there are 6 Components,
+    expect(updatedInsideCanvasItemList.length).toEqual(6);
+
+    //Assert they match the same shapes respectively
+    expect(originalComp_1.shapeType).toEqual(copiedComp_1.shapeType);
+    expect(originalComp_2.shapeType).toEqual(copiedComp_2.shapeType);
+    expect(originalComp_3.shapeType).toEqual(copiedComp_3.shapeType);
+
+    //Assert they have different IDs
+    expect(originalComp_1['data-id']).not.toEqual(copiedComp_1['data-id']);
+    expect(originalComp_2['data-id']).not.toEqual(copiedComp_2['data-id']);
+    expect(originalComp_3['data-id']).not.toEqual(copiedComp_3['data-id']);
+  });
+*/
+  test('Should copy and paste a multiple shapes using keyboard commands', async ({
+    page,
+  }) => {
+    // NOTE: This test has the same steps as the previous one, except for the keyboard commands.
+    //Add several components into the canvas
+    const addInputIntoCanvas = ['Input', 'Combobox', 'Icon'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Select items by drag and drop
+    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+    //Copy and assert there are 3 components within the canvas
+    await page.keyboard.press('ControlOrMeta+c');
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComp_1, originalComp_2, originalComp_3] =
+      insideCanvasItemList;
+    expect(insideCanvasItemList.length).toEqual(3);
+
+    //Paste
+    await page.keyboard.press('ControlOrMeta+v');
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [, , , copiedComp_1, copiedComp_2, copiedComp_3] =
+      updatedInsideCanvasItemList;
+
+    //Assert there are 6 Components,
+    expect(updatedInsideCanvasItemList.length).toEqual(6);
+
+    //Assert they match the same shapes respectively
+    expect(originalComp_1.shapeType).toEqual(copiedComp_1.shapeType);
+    expect(originalComp_2.shapeType).toEqual(copiedComp_2.shapeType);
+    expect(originalComp_3.shapeType).toEqual(copiedComp_3.shapeType);
+
+    //Assert they have different IDs
+    expect(originalComp_1['data-id']).not.toEqual(copiedComp_1['data-id']);
+    expect(originalComp_2['data-id']).not.toEqual(copiedComp_2['data-id']);
+    expect(originalComp_3['data-id']).not.toEqual(copiedComp_3['data-id']);
+  });
+});
diff --git a/e2e/ui-functionality/toolbar_undo-redo.spec.ts b/e2e/ui-functionality/toolbar_undo-redo.spec.ts
new file mode 100644
index 00000000..c9ad1c68
--- /dev/null
+++ b/e2e/ui-functionality/toolbar_undo-redo.spec.ts
@@ -0,0 +1,166 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsToCanvas,
+  getWithinCanvasItemList,
+  getByShapeType,
+  dbClickOnCanvasItem,
+  getCanvasBoundingBox,
+  getShapePosition,
+} from '../helpers';
+import { E2E_CanvasItemKeyAttrs } from '../helpers/types/e2e-types';
+import { Group } from 'konva/lib/Group';
+import {
+  clickRedoUiButton,
+  clickUndoUiButton,
+} from '../helpers/ui-buttons.helpers';
+
+test.describe('ToolBar buttons Undo/Redo functionality tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+
+  test('Should remove and restore a just dragged into canvas-item, respectively', async ({
+    page,
+  }) => {
+    //Arrange
+    const addInputIntoCanvas = ['Input'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Undo and check within canvas items
+    await clickUndoUiButton(page);
+    const insideCanvasItemList = await getWithinCanvasItemList(page);
+
+    expect(insideCanvasItemList.length).toEqual(0);
+
+    //Redo and check existing item within canvas
+    await clickRedoUiButton(page);
+    const updatedInsideCanvasItemList = await getWithinCanvasItemList(page);
+
+    expect(updatedInsideCanvasItemList.length).toEqual(1);
+  });
+
+  test('Should remove and restore the last item you just dragged into the canvas', async ({
+    page,
+  }) => {
+    //Arrange
+    const addComponentsIntoCanvas = ['Input', 'Combobox'];
+    await addComponentsToCanvas(page, addComponentsIntoCanvas);
+
+    //Undo and assert there is only one Item within canvas
+    await clickUndoUiButton(page);
+    const insideCanvasItemList = await getWithinCanvasItemList(page);
+
+    expect(insideCanvasItemList.length).toEqual(1);
+
+    const firsCanvastItem = await getByShapeType(page, 'input');
+    expect(firsCanvastItem).toBeDefined();
+
+    //Redo and assert both items are contained within the canvas
+    await clickRedoUiButton(page);
+    const updatedInsideCanvasItemList = await getWithinCanvasItemList(page);
+    const secondCanvasItem = await getByShapeType(page, 'combobox');
+
+    expect(updatedInsideCanvasItemList.length).toEqual(2);
+    expect(firsCanvastItem).toBeDefined();
+    expect(secondCanvasItem).toBeDefined();
+  });
+
+  test('Should reverse and restore an edited text of an Input Component', async ({
+    page,
+  }) => {
+    //Arrange data and drag an input
+    const addComponentsIntoCanvas = ['Input'];
+    const defaultInputPlaceholder = 'Placeholder';
+    const updatedText = 'Hello';
+
+    await addComponentsToCanvas(page, addComponentsIntoCanvas);
+    const [inputOnCanvas] = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+
+    //Start Input component inline editing
+    await dbClickOnCanvasItem(page, inputOnCanvas);
+    const editableInput = page.locator('input[data-is-inline-edition-on=true]');
+    const defaultInputValue = await editableInput.inputValue();
+
+    await editableInput.fill(updatedText);
+    const updatedInputValue = await editableInput.inputValue();
+
+    //Undo edit and assert text is reversed
+    await clickUndoUiButton(page);
+    expect(defaultInputValue).toEqual(defaultInputPlaceholder);
+
+    //Redo edit and assert that input contains the restored updated text
+    await clickRedoUiButton(page);
+    expect(updatedInputValue).toEqual(updatedText);
+  });
+
+  test('Should restore the item position to its previous placement', async ({
+    page,
+  }) => {
+    //Arrange data and drag an input into canvas
+    const componentToAddintoCanvas = ['Input'];
+    await addComponentsToCanvas(page, componentToAddintoCanvas);
+
+    const { x: canvasXStart, y: canvasYStart } =
+      await getCanvasBoundingBox(page);
+
+    const inputElement = (await getByShapeType(page, 'input')) as Group;
+
+    const inputInitialPosition = await getShapePosition(inputElement);
+    const inputModifiedPosition = {
+      x: inputInitialPosition.x + canvasXStart + 200,
+      y: inputInitialPosition.y + canvasYStart,
+    };
+
+    //Displace item within the canvas
+    await page.mouse.down();
+    await page.mouse.move(inputModifiedPosition.x, inputModifiedPosition.y);
+    await page.mouse.up();
+
+    //Undo and assert that the item is placed in its initial position
+    await clickUndoUiButton(page);
+    const finalInputPosition = await getShapePosition(inputElement);
+
+    expect(finalInputPosition).toEqual(inputInitialPosition);
+  });
+
+  test('Should undo and redo, backward and forward severals steps consistently', async ({
+    page,
+  }) => {
+    //Arrange data and drag an items into canvas
+    const componentsToAddIntoCanvas = ['Input', 'Combobox'];
+    await addComponentsToCanvas(page, componentsToAddIntoCanvas);
+
+    await page.getByText('Rich Components').click();
+    const richComponentsToAddintoCanvas = ['Accordion'];
+    await addComponentsToCanvas(page, richComponentsToAddintoCanvas);
+
+    //Assert there are 3 items within the canvas
+    const itemsQtyWithinCanvas_step1 = (await getWithinCanvasItemList(page))
+      .length;
+
+    expect(itemsQtyWithinCanvas_step1).toEqual(3);
+
+    //x3 undo
+    await clickUndoUiButton(page);
+    await clickUndoUiButton(page);
+    await clickUndoUiButton(page);
+
+    //Assert there are no items within the canvas
+    const itemsQtyWithinCanvas_step2 = (await getWithinCanvasItemList(page))
+      .length;
+
+    expect(itemsQtyWithinCanvas_step2).toEqual(0);
+
+    //x3 redo
+    await clickRedoUiButton(page);
+    await clickRedoUiButton(page);
+    await clickRedoUiButton(page);
+
+    //Assert there are again 3 items within the canvas
+    const itemsQtyWithinCanvas_step3 = (await getWithinCanvasItemList(page))
+      .length;
+    expect(itemsQtyWithinCanvas_step3).toEqual(3);
+  });
+});
diff --git a/public/icons/addlist.svg b/public/icons/addlist.svg
new file mode 100644
index 00000000..e8e1e1b4
--- /dev/null
+++ b/public/icons/addlist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m6 70h176a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12m104 52H40a6 6 0 0 0 0 12h104a6 6 0 0 0 0-12m88 0h-18v-18a6 6 0 0 0-12 0v18h-18a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0v-18h18a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/alarm.svg b/public/icons/alarm.svg
new file mode 100644
index 00000000..a2f17aec
--- /dev/null
+++ b/public/icons/alarm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 42a94 94 0 1 0 94 94a94.11 94.11 0 0 0-94-94m0 176a82 82 0 1 1 82-82a82.1 82.1 0 0 1-82 82M60.24 36.24l-32 32a6 6 0 1 1-8.48-8.48l32-32a6 6 0 1 1 8.48 8.48m176 32a6 6 0 0 1-8.48 0l-32-32a6 6 0 0 1 8.48-8.48l32 32a6 6 0 0 1 0 8.48M184 130a6 6 0 0 1 0 12h-56a6 6 0 0 1-6-6V80a6 6 0 0 1 12 0v50Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/alternativemouse.svg b/public/icons/alternativemouse.svg
new file mode 100644
index 00000000..37a674b9
--- /dev/null
+++ b/public/icons/alternativemouse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M144 18h-32a62.07 62.07 0 0 0-62 62v96a62.07 62.07 0 0 0 62 62h32a62.07 62.07 0 0 0 62-62V80a62.07 62.07 0 0 0-62-62m50 62v26h-60V30h10a50.06 50.06 0 0 1 50 50m-82-50h10v76H62V80a50.06 50.06 0 0 1 50-50m32 196h-32a50.06 50.06 0 0 1-50-50v-58h132v58a50.06 50.06 0 0 1-50 50"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowbendupleft.svg b/public/icons/arrowbendupleft.svg
new file mode 100644
index 00000000..8622868d
--- /dev/null
+++ b/public/icons/arrowbendupleft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M230 200a6 6 0 0 1-12 0a90.1 90.1 0 0 0-90-90H46.49l37.75 37.76a6 6 0 1 1-8.48 8.48l-48-48a6 6 0 0 1 0-8.48l48-48a6 6 0 0 1 8.48 8.48L46.49 98H128a102.12 102.12 0 0 1 102 102"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowbendupright.svg b/public/icons/arrowbendupright.svg
new file mode 100644
index 00000000..16929199
--- /dev/null
+++ b/public/icons/arrowbendupright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m228.24 108.24l-48 48a6 6 0 0 1-8.48-8.48L209.51 110H128a90.1 90.1 0 0 0-90 90a6 6 0 0 1-12 0A102.12 102.12 0 0 1 128 98h81.51l-37.75-37.76a6 6 0 0 1 8.48-8.48l48 48a6 6 0 0 1 0 8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowfatdown.svg b/public/icons/arrowfatdown.svg
new file mode 100644
index 00000000..3b68d491
--- /dev/null
+++ b/public/icons/arrowfatdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M229.54 133.7A6 6 0 0 0 224 130h-42V48a14 14 0 0 0-14-14H88a14 14 0 0 0-14 14v82H32a6 6 0 0 0-4.24 10.24l96 96a6 6 0 0 0 8.48 0l96-96a6 6 0 0 0 1.3-6.54M128 223.51L46.49 142H80a6 6 0 0 0 6-6V48a2 2 0 0 1 2-2h80a2 2 0 0 1 2 2v88a6 6 0 0 0 6 6h33.51Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowfatleft.svg b/public/icons/arrowfatleft.svg
new file mode 100644
index 00000000..bc94d86f
--- /dev/null
+++ b/public/icons/arrowfatleft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 74h-82V32a6 6 0 0 0-10.24-4.24l-96 96a6 6 0 0 0 0 8.48l96 96A6 6 0 0 0 126 224v-42h82a14 14 0 0 0 14-14V88a14 14 0 0 0-14-14m2 94a2 2 0 0 1-2 2h-88a6 6 0 0 0-6 6v33.51L32.49 128L114 46.49V80a6 6 0 0 0 6 6h88a2 2 0 0 1 2 2Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowfatright.svg b/public/icons/arrowfatright.svg
new file mode 100644
index 00000000..0000fd9d
--- /dev/null
+++ b/public/icons/arrowfatright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m236.24 123.76l-96-96A6 6 0 0 0 130 32v42H48a14 14 0 0 0-14 14v80a14 14 0 0 0 14 14h82v42a6 6 0 0 0 10.24 4.24l96-96a6 6 0 0 0 0-8.48M142 209.51V176a6 6 0 0 0-6-6H48a2 2 0 0 1-2-2V88a2 2 0 0 1 2-2h88a6 6 0 0 0 6-6V46.49L223.51 128Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowfatup.svg b/public/icons/arrowfatup.svg
new file mode 100644
index 00000000..c95f2b8d
--- /dev/null
+++ b/public/icons/arrowfatup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m228.24 115.76l-96-96a6 6 0 0 0-8.48 0l-96 96A6 6 0 0 0 32 126h42v82a14 14 0 0 0 14 14h80a14 14 0 0 0 14-14v-82h42a6 6 0 0 0 4.24-10.24M176 114a6 6 0 0 0-6 6v88a2 2 0 0 1-2 2H88a2 2 0 0 1-2-2v-88a6 6 0 0 0-6-6H46.49L128 32.49L209.51 114Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowsclockwise.svg b/public/icons/arrowsclockwise.svg
new file mode 100644
index 00000000..2ac71b81
--- /dev/null
+++ b/public/icons/arrowsclockwise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 48v48a6 6 0 0 1-6 6h-48a6 6 0 0 1 0-12h33.52l-18.05-18a81.5 81.5 0 0 0-57.53-24h-.46a81.5 81.5 0 0 0-57.29 23.28a6 6 0 1 1-8.38-8.58a93.38 93.38 0 0 1 65.67-26.76h.52a93.45 93.45 0 0 1 66 27.53l18 18V48a6 6 0 0 1 12 0m-34.19 136.72a81.5 81.5 0 0 1-57.29 23.34h-.46a81.5 81.5 0 0 1-57.53-24L54.48 166H88a6 6 0 0 0 0-12H40a6 6 0 0 0-6 6v48a6 6 0 0 0 12 0v-33.52l18 18.05a93.45 93.45 0 0 0 66 27.53h.52a93.38 93.38 0 0 0 65.67-26.76a6 6 0 1 0-8.38-8.58"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrowscounterclockwise.svg b/public/icons/arrowscounterclockwise.svg
new file mode 100644
index 00000000..3756d8d0
--- /dev/null
+++ b/public/icons/arrowscounterclockwise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M88 102H40a6 6 0 0 1-6-6V48a6 6 0 0 1 12 0v33.52l18-18a93.45 93.45 0 0 1 66-27.53h.52a93.4 93.4 0 0 1 65.67 26.71a6 6 0 0 1-8.38 8.58A82 82 0 0 0 72.53 72L54.48 90H88a6 6 0 0 1 0 12m128 52h-48a6 6 0 0 0 0 12h33.52l-18.05 18a81.5 81.5 0 0 1-57.53 24h-.46a81.5 81.5 0 0 1-57.29-23.34a6 6 0 0 0-8.38 8.58A93.4 93.4 0 0 0 125.48 220h.52a93.45 93.45 0 0 0 66-27.53l18-18.05V208a6 6 0 0 0 12 0v-48a6 6 0 0 0-6-6"/></svg>
\ No newline at end of file
diff --git a/public/icons/autoflash.svg b/public/icons/autoflash.svg
new file mode 100644
index 00000000..75495c8e
--- /dev/null
+++ b/public/icons/autoflash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M173.88 111.94a6 6 0 0 0-3.42-4.27L119 84.56l14-59.17a6 6 0 0 0-10.24-5.47L27.6 122.78a6 6 0 0 0 1.94 9.55L81 155.44l-14 59.17a6 6 0 0 0 3 6.68a6 6 0 0 0 7.22-1.22l95.2-102.85a6 6 0 0 0 1.46-5.28m-90 83.21l9.92-41.76a6 6 0 0 0-3.38-6.86L42.08 124.8l74-80l-9.92 41.77a6 6 0 0 0 3.38 6.86l48.38 21.73Zm153.44 18.16l-36-72a6 6 0 0 0-10.74 0l-36 72a6 6 0 0 0 10.74 5.37L175.71 198h40.58l10.34 20.68A6 6 0 0 0 232 222a5.9 5.9 0 0 0 2.68-.64a6 6 0 0 0 2.68-8.05ZM181.71 186L196 157.42L210.29 186Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/calendar.svg b/public/icons/calendar.svg
new file mode 100644
index 00000000..7b9270ce
--- /dev/null
+++ b/public/icons/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="#000000" d="M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2m-70-78a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10m-88 40a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10m44 0a10 10 0 1 1-10-10a10 10 0 0 1 10 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/callphoneincoming.svg b/public/icons/callphoneincoming.svg
new file mode 100644
index 00000000..ec93c6e3
--- /dev/null
+++ b/public/icons/callphoneincoming.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m213.59 168.3l-47.24-21.17a14 14 0 0 0-13.28 1.22a5 5 0 0 0-.56.42l-24.69 21a1.88 1.88 0 0 1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91 1.91 0 0 1 0-1.68l21.07-25a5 5 0 0 0 .42-.58a14 14 0 0 0 1.12-13.27L87.73 42.49a14 14 0 0 0-14.56-8.38A54.25 54.25 0 0 0 26 88c0 78.3 63.7 142 142 142a54.25 54.25 0 0 0 53.89-47.17a14 14 0 0 0-8.3-14.53M168 218C96.32 218 38 159.68 38 88a42.23 42.23 0 0 1 36.67-42h.23a2 2 0 0 1 1.84 1.31l21.1 47.11a2 2 0 0 1 0 1.67l-21.11 25.06a5 5 0 0 0-.43.57a14 14 0 0 0-.91 13.73c8.87 18.16 27.17 36.32 45.53 45.19a14 14 0 0 0 13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92 1.92 0 0 1 1.6-.1l47.25 21.17a2 2 0 0 1 1.21 2A42.24 42.24 0 0 1 168 218m-22-114V64a6 6 0 0 1 12 0v25.51l37.76-37.75a6 6 0 0 1 8.48 8.48L166.48 98H192a6 6 0 0 1 0 12h-40a6 6 0 0 1-6-6"/></svg>
\ No newline at end of file
diff --git a/public/icons/camera.svg b/public/icons/camera.svg
new file mode 100644
index 00000000..d51fcf35
--- /dev/null
+++ b/public/icons/camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 58h-28.79L165 36.67a6 6 0 0 0-5-2.67H96a6 6 0 0 0-5 2.67L76.78 58H48a22 22 0 0 0-22 22v112a22 22 0 0 0 22 22h160a22 22 0 0 0 22-22V80a22 22 0 0 0-22-22m10 134a10 10 0 0 1-10 10H48a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10h32a6 6 0 0 0 5-2.67L99.21 46h57.57L171 67.33a6 6 0 0 0 5 2.67h32a10 10 0 0 1 10 10ZM128 90a42 42 0 1 0 42 42a42 42 0 0 0-42-42m0 72a30 30 0 1 1 30-30a30 30 0 0 1-30 30"/></svg>
\ No newline at end of file
diff --git a/public/icons/caretdown.svg b/public/icons/caretdown.svg
new file mode 100644
index 00000000..6bcca3ef
--- /dev/null
+++ b/public/icons/caretdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66"/></svg>
\ No newline at end of file
diff --git a/public/icons/caretleft.svg b/public/icons/caretleft.svg
new file mode 100644
index 00000000..b4bf3c51
--- /dev/null
+++ b/public/icons/caretleft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M168 48v160a8 8 0 0 1-13.66 5.66l-80-80a8 8 0 0 1 0-11.32l80-80A8 8 0 0 1 168 48"/></svg>
\ No newline at end of file
diff --git a/public/icons/caretright.svg b/public/icons/caretright.svg
new file mode 100644
index 00000000..523c9793
--- /dev/null
+++ b/public/icons/caretright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m181.66 133.66l-80 80A8 8 0 0 1 88 208V48a8 8 0 0 1 13.66-5.66l80 80a8 8 0 0 1 0 11.32"/></svg>
\ No newline at end of file
diff --git a/public/icons/caretup.svg b/public/icons/caretup.svg
new file mode 100644
index 00000000..5f197bec
--- /dev/null
+++ b/public/icons/caretup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M215.39 163.06A8 8 0 0 1 208 168H48a8 8 0 0 1-5.66-13.66l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 1.73 8.72"/></svg>
\ No newline at end of file
diff --git a/public/icons/check.svg b/public/icons/check.svg
new file mode 100644
index 00000000..f3015dcb
--- /dev/null
+++ b/public/icons/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m228.24 76.24l-128 128a6 6 0 0 1-8.48 0l-56-56a6 6 0 0 1 8.48-8.48L96 191.51L219.76 67.76a6 6 0 0 1 8.48 8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/checkfat.svg b/public/icons/checkfat.svg
new file mode 100644
index 00000000..3a62fb8a
--- /dev/null
+++ b/public/icons/checkfat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m241.87 69.66l-24-23.56a14 14 0 0 0-19.77 0L104 139l-38.1-36.9a14 14 0 0 0-19.8 0l-24 24a14 14 0 0 0 0 19.79l71.62 72a14 14 0 0 0 19.8 0L241.91 89.5a14 14 0 0 0-.04-19.84M233.42 81L105 209.41a2 2 0 0 1-2.81 0l-71.62-72a2 2 0 0 1 0-2.82l24-24A2 2 0 0 1 56 110a2.12 2.12 0 0 1 1.5.64l42.35 41.08a6 6 0 0 0 8.39 0l98.37-97.11a2 2 0 0 1 2.87 0l24 23.56a2 2 0 0 1-.06 2.83"/></svg>
\ No newline at end of file
diff --git a/public/icons/company.svg b/public/icons/company.svg
new file mode 100644
index 00000000..a72ba20c
--- /dev/null
+++ b/public/icons/company.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M248 210h-18V94h2a6 6 0 0 0 0-12h-50V46h2a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12h2v164H24a6 6 0 0 0 0 12h224a6 6 0 0 0 0-12M218 94v116h-36V94ZM54 46h116v164h-28v-50a6 6 0 0 0-6-6H88a6 6 0 0 0-6 6v50H54Zm76 164H94v-44h36ZM74 80a6 6 0 0 1 6-6h16a6 6 0 0 1 0 12H80a6 6 0 0 1-6-6m48 0a6 6 0 0 1 6-6h16a6 6 0 0 1 0 12h-16a6 6 0 0 1-6-6m-42 46a6 6 0 0 1 0-12h16a6 6 0 0 1 0 12Zm42-6a6 6 0 0 1 6-6h16a6 6 0 0 1 0 12h-16a6 6 0 0 1-6-6"/></svg>
\ No newline at end of file
diff --git a/public/icons/controller.svg b/public/icons/controller.svg
new file mode 100644
index 00000000..fbc75e00
--- /dev/null
+++ b/public/icons/controller.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M176 110h-24a6 6 0 0 1 0-12h24a6 6 0 0 1 0 12m-72-12H94V88a6 6 0 0 0-12 0v10H72a6 6 0 0 0 0 12h10v10a6 6 0 0 0 12 0v-10h10a6 6 0 0 0 0-12m135.84 101.5A34 34 0 0 1 212 214a34.1 34.1 0 0 1-24-9.95l-.26-.28L147.38 158h-38.76l-40.31 45.76l-.31.24a34 34 0 0 1-24 10a34 34 0 0 1-33.46-39.91s0-.06 0-.1L26.9 89.88A57.89 57.89 0 0 1 83.89 42H172a58.07 58.07 0 0 1 57.05 47.63v.19L245.46 174v.11a33.75 33.75 0 0 1-5.62 25.39M172 146a46 46 0 0 0 0-92H83.89a45.9 45.9 0 0 0-45.18 38a.4.4 0 0 0 0 .1l-16.38 84.13a22 22 0 0 0 37.11 19.45l42-47.65a6 6 0 0 1 4.5-2Zm61.67 30.23l-9.79-50.35A58.06 58.06 0 0 1 172 158h-8.63l33.19 37.68a22 22 0 0 0 37.11-19.45"/></svg>
\ No newline at end of file
diff --git a/public/icons/copyright.svg b/public/icons/copyright.svg
new file mode 100644
index 00000000..b8838440
--- /dev/null
+++ b/public/icons/copyright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90m-34-90a34 34 0 0 0 61.2 20.4a6 6 0 0 1 9.6 7.21a46 46 0 1 1 0-55.22a6 6 0 0 1-9.6 7.21A34 34 0 0 0 94 128"/></svg>
\ No newline at end of file
diff --git a/public/icons/cursor.svg b/public/icons/cursor.svg
new file mode 100644
index 00000000..1776f3bf
--- /dev/null
+++ b/public/icons/cursor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M166.59 134.1a1.91 1.91 0 0 1-.55-1.79a2 2 0 0 1 1.08-1.42l46.25-17.76l.24-.1A14 14 0 0 0 212.38 87L52.29 34.7A13.95 13.95 0 0 0 34.7 52.29L87 212.38a13.82 13.82 0 0 0 12.6 9.6h.69a13.84 13.84 0 0 0 12.71-8.37a2 2 0 0 0 .1-.24l17.76-46.25a2 2 0 0 1 3.21-.53l51.31 51.31a14 14 0 0 0 19.8 0l12.69-12.69a14 14 0 0 0 0-19.8Zm42.82 62.63l-12.68 12.68a2 2 0 0 1-2.83 0l-51.31-51.31a14 14 0 0 0-22.74 4.32a2 2 0 0 0-.1.24L102 208.91a2 2 0 0 1-3.61-.26L46.11 48.57a1.87 1.87 0 0 1 .47-2a1.92 1.92 0 0 1 1.35-.57a2.2 2.2 0 0 1 .64.1l160.08 52.28a2 2 0 0 1 .26 3.61l-46.25 17.76l-.24.1a14 14 0 0 0-4.32 22.74l51.31 51.31a2 2 0 0 1 0 2.83"/></svg>
\ No newline at end of file
diff --git a/public/icons/cursorclick.svg b/public/icons/cursorclick.svg
new file mode 100644
index 00000000..151300e7
--- /dev/null
+++ b/public/icons/cursorclick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M90 24v-8a6 6 0 0 1 12 0v8a6 6 0 0 1-12 0m-74 78h8a6 6 0 0 0 0-12h-8a6 6 0 0 0 0 12m109.32-64.63a6 6 0 0 0 8.05-2.69l8-16a6 6 0 0 0-10.74-5.37l-8 16a6 6 0 0 0 2.69 8.06m-96 85.26l-16 8a6 6 0 0 0 5.36 10.74l16-8a6 6 0 1 0-5.36-10.74m188.58 62.78a14 14 0 0 1 0 19.8l-12.69 12.69a14 14 0 0 1-19.8 0l-51.31-51.31a2 2 0 0 0-3.21.54l-17.75 46.24a2 2 0 0 0-.1.24a13.85 13.85 0 0 1-12.78 8.39h-.68A13.85 13.85 0 0 1 87 212.38L34.7 52.3a14 14 0 0 1 17.6-17.6L212.38 87a14 14 0 0 1 1.23 26l-.24.09l-46.25 17.76a2 2 0 0 0-.53 3.21Zm-8.49 8.49l-51.31-51.31a14 14 0 0 1 4.32-22.74l.24-.1L208.91 102a2 2 0 0 0-.26-3.61L48.58 46.11a2.3 2.3 0 0 0-.65-.11a2 2 0 0 0-1.82 2.58l52.27 160.07a1.84 1.84 0 0 0 1.77 1.35a1.81 1.81 0 0 0 1.84-1.09l17.76-46.25l.1-.24a14 14 0 0 1 22.74-4.32l51.31 51.31a2 2 0 0 0 2.83 0l12.68-12.68a2 2 0 0 0 0-2.83"/></svg>
\ No newline at end of file
diff --git a/public/icons/dotssquare.svg b/public/icons/dotssquare.svg
new file mode 100644
index 00000000..90e4c2b6
--- /dev/null
+++ b/public/icons/dotssquare.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M70 60a10 10 0 1 1-10-10a10 10 0 0 1 10 10m58-10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m68 20a10 10 0 1 0-10-10a10 10 0 0 0 10 10M60 118a10 10 0 1 0 10 10a10 10 0 0 0-10-10m68 0a10 10 0 1 0 10 10a10 10 0 0 0-10-10m68 0a10 10 0 1 0 10 10a10 10 0 0 0-10-10M60 186a10 10 0 1 0 10 10a10 10 0 0 0-10-10m68 0a10 10 0 1 0 10 10a10 10 0 0 0-10-10m68 0a10 10 0 1 0 10 10a10 10 0 0 0-10-10"/></svg>
\ No newline at end of file
diff --git a/public/icons/dotsvertical.svg b/public/icons/dotsvertical.svg
new file mode 100644
index 00000000..e78d0c71
--- /dev/null
+++ b/public/icons/dotsvertical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M118 60a10 10 0 1 1 10 10a10 10 0 0 1-10-10m10 58a10 10 0 1 0 10 10a10 10 0 0 0-10-10m0 68a10 10 0 1 0 10 10a10 10 0 0 0-10-10"/></svg>
\ No newline at end of file
diff --git a/public/icons/doublecheck.svg b/public/icons/doublecheck.svg
new file mode 100644
index 00000000..0b8babe4
--- /dev/null
+++ b/public/icons/doublecheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m148.2 84.28l-89.6 88a6 6 0 0 1-8.4 0l-38.4-37.71a6 6 0 1 1 8.4-8.57l34.2 33.58l85.4-83.87a6 6 0 1 1 8.4 8.56Zm96.08-8.48a6 6 0 0 0-8.48-.08l-85.4 83.87l-20.23-19.87a6 6 0 1 0-8.41 8.56l24.44 24a6 6 0 0 0 8.4 0l89.6-88a6 6 0 0 0 .08-8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/drive.svg b/public/icons/drive.svg
new file mode 100644
index 00000000..adcab6ac
--- /dev/null
+++ b/public/icons/drive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M235.9 144.82L167.43 32.58A13.91 13.91 0 0 0 155.56 26h-55.13a13.92 13.92 0 0 0-11.87 6.58v.05L20.13 144.76a14 14 0 0 0-.28 14.37L47.17 207a14 14 0 0 0 12.15 7h137.35a14 14 0 0 0 12.16-7l27.32-47.82a14 14 0 0 0-.25-14.36M222.56 146h-51.17L135 85.33l25.08-41.79Zm-124 0L128 97l29.4 49Zm66 12L191 202H65l26.4-44ZM128 73.67L106.6 38h42.8ZM95.93 43.54L121 85.33L84.6 146H33.43ZM33 158h44.4l-22.73 37.89Zm168.3 37.89L178.59 158H223Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/emptybattery.svg b/public/icons/emptybattery.svg
new file mode 100644
index 00000000..8d4cbada
--- /dev/null
+++ b/public/icons/emptybattery.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M200 58H32a22 22 0 0 0-22 22v96a22 22 0 0 0 22 22h168a22 22 0 0 0 22-22V80a22 22 0 0 0-22-22m10 118a10 10 0 0 1-10 10H32a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10h168a10 10 0 0 1 10 10Zm44-80v64a6 6 0 0 1-12 0V96a6 6 0 0 1 12 0"/></svg>
\ No newline at end of file
diff --git a/public/icons/factory.svg b/public/icons/factory.svg
new file mode 100644
index 00000000..c41a3fe1
--- /dev/null
+++ b/public/icons/factory.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M114 176a6 6 0 0 1-6 6H80a6 6 0 0 1 0-12h28a6 6 0 0 1 6 6m62-6h-28a6 6 0 0 0 0 12h28a6 6 0 0 0 0-12m62 46a6 6 0 0 1-6 6H24a6 6 0 0 1 0-12h10V88a6 6 0 0 1 9.6-4.8L98 124V88a6 6 0 0 1 9.6-4.8l41.4 31.08l12-84.26a14.07 14.07 0 0 1 13.86-12h18.12a14.07 14.07 0 0 1 13.86 12l15 105.13s.06.59.06.85v74h10a6 6 0 0 1 6.1 6m-78-93.51l10 7.51h39.08L195 31.72a2 2 0 0 0-2-1.72h-18.06a2 2 0 0 0-2 1.72ZM46 210h164v-68h-42a6 6 0 0 1-3.6-1.2L150 130l-40-30v36a6 6 0 0 1-9.6 4.8L46 100Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/filedoc.svg b/public/icons/filedoc.svg
new file mode 100644
index 00000000..0e59f4fa
--- /dev/null
+++ b/public/icons/filedoc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M52 146H36a6 6 0 0 0-6 6v56a6 6 0 0 0 6 6h16a34 34 0 0 0 0-68m0 56H42v-44h10a22 22 0 0 1 0 44m168.15-5.46a6 6 0 0 1 .18 8.48A28.06 28.06 0 0 1 200 214c-16.54 0-30-15.25-30-34s13.46-34 30-34a28.06 28.06 0 0 1 20.33 9a6 6 0 0 1-8.66 8.3A16.23 16.23 0 0 0 200 158c-9.93 0-18 9.87-18 22s8.07 22 18 22a16.23 16.23 0 0 0 11.67-5.28a6 6 0 0 1 8.48-.18M128 146c-16.54 0-30 15.25-30 34s13.46 34 30 34s30-15.25 30-34s-13.46-34-30-34m0 56c-9.93 0-18-9.87-18-22s8.07-22 18-22s18 9.87 18 22s-8.07 22-18 22m-80-84a6 6 0 0 0 6-6V40a2 2 0 0 1 2-2h90v50a6 6 0 0 0 6 6h50v18a6 6 0 0 0 12 0V88a6 6 0 0 0-1.76-4.24l-56-56A6 6 0 0 0 152 26H56a14 14 0 0 0-14 14v72a6 6 0 0 0 6 6m110-71.52L193.52 82H158Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/fileexcel.svg b/public/icons/fileexcel.svg
new file mode 100644
index 00000000..daf4d734
--- /dev/null
+++ b/public/icons/fileexcel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M154 208a6 6 0 0 1-6 6h-28a6 6 0 0 1-6-6v-56a6 6 0 1 1 12 0v50h22a6 6 0 0 1 6 6m-62.52-60.89a6 6 0 0 0-8.36 1.39L68 169.67L52.88 148.5a6 6 0 1 0-9.76 7L60.63 180l-17.51 24.5a6 6 0 1 0 9.76 7L68 190.31l15.12 21.16A6 6 0 0 0 88 214a5.9 5.9 0 0 0 3.48-1.12a6 6 0 0 0 1.4-8.37L75.37 180l17.51-24.51a6 6 0 0 0-1.4-8.38M191 173.22c-10.85-3.13-13.41-4.69-13-7.91a6.59 6.59 0 0 1 2.88-5.08c5.6-3.79 17.65-1.83 21.44-.84a6 6 0 0 0 3.07-11.6c-2-.54-20.1-5-31.21 2.48a18.64 18.64 0 0 0-8.08 13.54c-1.8 14.19 12.26 18.25 21.57 20.94c12.12 3.5 14.77 5.33 14.2 9.76a6.85 6.85 0 0 1-3 5.34c-5.61 3.73-17.48 1.64-21.19.62a6 6 0 0 0-3.21 11.53a59.4 59.4 0 0 0 14.68 2c5.49 0 11.54-.95 16.36-4.14a18.89 18.89 0 0 0 8.31-13.81c2.01-15.66-12.91-19.97-22.82-22.83M42 112V40a14 14 0 0 1 14-14h96a6 6 0 0 1 4.24 1.76l56 56A6 6 0 0 1 214 88v24a6 6 0 1 1-12 0V94h-50a6 6 0 0 1-6-6V38H56a2 2 0 0 0-2 2v72a6 6 0 1 1-12 0m116-30h35.5L158 46.48Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/filejpg.svg b/public/icons/filejpg.svg
new file mode 100644
index 00000000..63c73cc0
--- /dev/null
+++ b/public/icons/filejpg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M120 146h-16a6 6 0 0 0-6 6v56a6 6 0 0 0 12 0v-10h10a26 26 0 0 0 0-52m0 40h-10v-28h10a14 14 0 0 1 0 28m94-2v16.87a6 6 0 0 1-1.67 4.15A28.06 28.06 0 0 1 192 214c-16.54 0-30-15.25-30-34s13.46-34 30-34a27.43 27.43 0 0 1 15.36 4.77a6 6 0 0 1-6.72 9.95A15.25 15.25 0 0 0 192 158c-9.93 0-18 9.87-18 22s8.07 22 18 22a15.75 15.75 0 0 0 10-3.73V190h-2a6 6 0 0 1 0-12h8a6 6 0 0 1 6 6M78 152v38a24 24 0 0 1-48 0a6 6 0 0 1 12 0a12 12 0 0 0 24 0v-38a6 6 0 0 1 12 0m134.24-68.24l-56-56A6 6 0 0 0 152 26H56a14 14 0 0 0-14 14v72a6 6 0 0 0 12 0V40a2 2 0 0 1 2-2h90v50a6 6 0 0 0 6 6h50v18a6 6 0 0 0 12 0V88a6 6 0 0 0-1.76-4.24M158 82V46.48L193.52 82Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/filepdf.svg b/public/icons/filepdf.svg
new file mode 100644
index 00000000..db9d41a5
--- /dev/null
+++ b/public/icons/filepdf.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 152a6 6 0 0 1-6 6h-26v20h18a6 6 0 0 1 0 12h-18v18a6 6 0 0 1-12 0v-56a6 6 0 0 1 6-6h32a6 6 0 0 1 6 6M90 172a26 26 0 0 1-26 26H54v10a6 6 0 0 1-12 0v-56a6 6 0 0 1 6-6h16a26 26 0 0 1 26 26m-12 0a14 14 0 0 0-14-14H54v28h10a14 14 0 0 0 14-14m84 8a34 34 0 0 1-34 34h-16a6 6 0 0 1-6-6v-56a6 6 0 0 1 6-6h16a34 34 0 0 1 34 34m-12 0a22 22 0 0 0-22-22h-10v44h10a22 22 0 0 0 22-22M42 112V40a14 14 0 0 1 14-14h96a6 6 0 0 1 4.25 1.76l56 56A6 6 0 0 1 214 88v24a6 6 0 0 1-12 0V94h-50a6 6 0 0 1-6-6V38H56a2 2 0 0 0-2 2v72a6 6 0 0 1-12 0m116-30h35.52L158 46.48Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/filepng.svg b/public/icons/filepng.svg
new file mode 100644
index 00000000..2b12da29
--- /dev/null
+++ b/public/icons/filepng.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M60 146H44a6 6 0 0 0-6 6v56a6 6 0 0 0 12 0v-10h10a26 26 0 0 0 0-52m0 40H50v-28h10a14 14 0 0 1 0 28m162 14.87a6 6 0 0 1-1.67 4.15A28.06 28.06 0 0 1 200 214c-16.54 0-30-15.25-30-34s13.46-34 30-34a27.43 27.43 0 0 1 15.36 4.77a6 6 0 0 1-6.72 9.95A15.25 15.25 0 0 0 200 158c-9.93 0-18 9.87-18 22s8.07 22 18 22a15.75 15.75 0 0 0 10-3.73V190h-2a6 6 0 0 1 0-12h8a6 6 0 0 1 6 6ZM154 152v56a6 6 0 0 1-4.17 5.71a5.8 5.8 0 0 1-1.83.29a6 6 0 0 1-4.88-2.51L114 170.72V208a6 6 0 0 1-12 0v-56a6 6 0 0 1 10.88-3.49L142 189.28V152a6 6 0 0 1 12 0M48 118a6 6 0 0 0 6-6V40a2 2 0 0 1 2-2h90v50a6 6 0 0 0 6 6h50v18a6 6 0 0 0 12 0V88a6 6 0 0 0-1.76-4.24l-56-56A6 6 0 0 0 152 26H56a14 14 0 0 0-14 14v72a6 6 0 0 0 6 6m110-71.52L193.52 82H158Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/filepowerpoint.svg b/public/icons/filepowerpoint.svg
new file mode 100644
index 00000000..9444ea8c
--- /dev/null
+++ b/public/icons/filepowerpoint.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 152a6 6 0 0 1-6 6h-14v50a6 6 0 0 1-12 0v-50h-14a6 6 0 0 1 0-12h40a6 6 0 0 1 6 6M90 172a26 26 0 0 1-26 26H54v10a6 6 0 0 1-12 0v-56a6 6 0 0 1 6-6h16a26 26 0 0 1 26 26m-12 0a14 14 0 0 0-14-14H54v28h10a14 14 0 0 0 14-14m80 0a26 26 0 0 1-26 26h-10v10a6 6 0 0 1-12 0v-56a6 6 0 0 1 6-6h16a26 26 0 0 1 26 26m-12 0a14 14 0 0 0-14-14h-10v28h10a14 14 0 0 0 14-14M42 112V40a14 14 0 0 1 14-14h96a6 6 0 0 1 4.25 1.76l56 56A6 6 0 0 1 214 88v24a6 6 0 0 1-12 0V94h-50a6 6 0 0 1-6-6V38H56a2 2 0 0 0-2 2v72a6 6 0 0 1-12 0m116-30h35.52L158 46.48Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/firstaid.svg b/public/icons/firstaid.svg
new file mode 100644
index 00000000..07581b08
--- /dev/null
+++ b/public/icons/firstaid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M216 90h-50V40a14 14 0 0 0-14-14h-48a14 14 0 0 0-14 14v50H40a14 14 0 0 0-14 14v48a14 14 0 0 0 14 14h50v50a14 14 0 0 0 14 14h48a14 14 0 0 0 14-14v-50h50a14 14 0 0 0 14-14v-48a14 14 0 0 0-14-14m2 62a2 2 0 0 1-2 2h-56a6 6 0 0 0-6 6v56a2 2 0 0 1-2 2h-48a2 2 0 0 1-2-2v-56a6 6 0 0 0-6-6H40a2 2 0 0 1-2-2v-48a2 2 0 0 1 2-2h56a6 6 0 0 0 6-6V40a2 2 0 0 1 2-2h48a2 2 0 0 1 2 2v56a6 6 0 0 0 6 6h56a2 2 0 0 1 2 2Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/flag.svg b/public/icons/flag.svg
new file mode 100644
index 00000000..36594a99
--- /dev/null
+++ b/public/icons/flag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M44.08 51.37A6 6 0 0 0 42 55.9V224a6 6 0 0 0 12 0v-45.22c28.08-22.79 51.88-11 79.34 2.57c16.12 8 33.49 16.58 52 16.58c13.57 0 27.76-4.6 42.56-17.42A6 6 0 0 0 230 176V55.9a6 6 0 0 0-9.93-4.54c-29 25.12-53.28 13.09-81.41-.84c-27.89-13.81-59.66-29.36-94.58.85M218 173.17c-28.08 22.8-51.88 11-79.34-2.58C113.4 158.08 85.09 144.07 54 164V58.72c28.08-22.8 51.88-11 79.34 2.56C158.6 73.79 186.91 87.8 218 67.91Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/flashslash.svg b/public/icons/flashslash.svg
new file mode 100644
index 00000000..466efdd1
--- /dev/null
+++ b/public/icons/flashslash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M52.44 36a6 6 0 0 0-8.88 8l40.49 44.58l-40.44 43.33a6 6 0 0 0 2.28 9.71l59.23 22.21l-15 75a6 6 0 0 0 3.14 6.52A6.1 6.1 0 0 0 96 246a6 6 0 0 0 4.39-1.91l63.34-67.87L203.56 220a6 6 0 0 0 8.88-8.08ZM106 220.46l11.85-59.28a6 6 0 0 0-3.77-6.8l-55.6-20.85l33.64-36l63.48 69.83Zm4-150.91a6 6 0 0 1-.29-8.48l45.88-49.16a6 6 0 0 1 10.27 5.27l-15 75l59.23 22.21a6 6 0 0 1 2.28 9.71L190.08 148a6 6 0 1 1-8.77-8.19l16.18-17.33l-55.6-20.85a6 6 0 0 1-3.77-6.8L150 35.54l-31.5 33.71a6 6 0 0 1-8.5.3"/></svg>
\ No newline at end of file
diff --git a/public/icons/gitlab.svg b/public/icons/gitlab.svg
new file mode 100644
index 00000000..bbc69a9c
--- /dev/null
+++ b/public/icons/gitlab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m228.21 117.61l-19.89-76.12a9.94 9.94 0 0 0-19-.93L171.17 90H84.83L66.66 40.56a9.94 9.94 0 0 0-19 .93l-19.87 76.12A55.18 55.18 0 0 0 49 176.42l73.27 51.77a9.94 9.94 0 0 0 11.44 0L207 176.42a55.18 55.18 0 0 0 21.21-58.81M57.65 50.82L75 98.07a6 6 0 0 0 5.64 3.93h94.72a6 6 0 0 0 5.64-3.93l17.36-47.25l15 57.52L128 168.66l-85.38-60.32Zm-18.27 69.92L117.6 176l-24.19 17.1l-37.47-26.48a43.1 43.1 0 0 1-16.56-45.88M128 217.53l-24.19-17.09L128 183.35l24.19 17.09Zm72.06-50.91l-37.47 26.48L138.4 176l78.22-55.26a43.1 43.1 0 0 1-16.56 45.88"/></svg>
\ No newline at end of file
diff --git a/public/icons/hammer.svg b/public/icons/hammer.svg
new file mode 100644
index 00000000..110aa5c6
--- /dev/null
+++ b/public/icons/hammer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m249.92 113.4l-67.45-67.91a94.12 94.12 0 0 0-133 .06L35.68 59.78a6 6 0 0 0 8.63 8.35L58 54a82 82 0 0 1 20.55-15l49 49l-97.46 97.4a14 14 0 0 0 0 19.81l20.69 20.69a14 14 0 0 0 19.8 0L168 128.46l33.42 33.42a14 14 0 0 0 19.8 0l28.68-28.69a14 14 0 0 0 .02-19.79M62.1 217.41a2 2 0 0 1-2.83 0l-20.69-20.69a2 2 0 0 1 0-2.83L108 124.46L131.51 148Zm101.66-101.68L140 139.49L116.48 116l23.76-23.76a6 6 0 0 0 0-8.49L90.54 34A82.07 82.07 0 0 1 174 54l45.62 45.93L188 131.49l-15.76-15.76a6 6 0 0 0-8.48 0m77.66 9l-28.69 28.7a2 2 0 0 1-2.83 0L196.49 140l31.56-31.57l13.37 13.46a2 2 0 0 1 0 2.81Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/help.svg b/public/icons/help.svg
new file mode 100644
index 00000000..6097ec58
--- /dev/null
+++ b/public/icons/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M138 180a10 10 0 1 1-10-10a10 10 0 0 1 10 10M128 74c-21 0-38 15.25-38 34v4a6 6 0 0 0 12 0v-4c0-12.13 11.66-22 26-22s26 9.87 26 22s-11.66 22-26 22a6 6 0 0 0-6 6v8a6 6 0 0 0 12 0v-2.42c18.11-2.58 32-16.66 32-33.58c0-18.75-17-34-38-34m102 54A102 102 0 1 1 128 26a102.12 102.12 0 0 1 102 102m-12 0a90 90 0 1 0-90 90a90.1 90.1 0 0 0 90-90"/></svg>
\ No newline at end of file
diff --git a/public/icons/home.svg b/public/icons/home.svg
new file mode 100644
index 00000000..188c3d2d
--- /dev/null
+++ b/public/icons/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M240 210h-18v-78.83l5.76 5.76a6 6 0 0 0 8.48-8.49L137.9 30.09a14 14 0 0 0-19.8 0l-98.34 98.35a6 6 0 0 0 8.48 8.49l5.76-5.76V210H16a6 6 0 0 0 0 12h224a6 6 0 0 0 0-12M46 119.17l80.58-80.59a2 2 0 0 1 2.84 0L210 119.17V210h-52v-58a6 6 0 0 0-6-6h-48a6 6 0 0 0-6 6v58H46ZM146 210h-36v-52h36Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/joystick.svg b/public/icons/joystick.svg
new file mode 100644
index 00000000..d5ecc1c1
--- /dev/null
+++ b/public/icons/joystick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 146h-74V93.52a38 38 0 1 0-12 0V146H48a14 14 0 0 0-14 14v48a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14v-48a14 14 0 0 0-14-14M102 56a26 26 0 1 1 26 26a26 26 0 0 1-26-26m108 152a2 2 0 0 1-2 2H48a2 2 0 0 1-2-2v-48a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2Zm-42-94h32a6 6 0 0 1 0 12h-32a6 6 0 0 1 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/key.svg b/public/icons/key.svg
new file mode 100644
index 00000000..b6ec42ae
--- /dev/null
+++ b/public/icons/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M215.15 40.85A78 78 0 0 0 86.2 121.31l-56.1 56.1a13.94 13.94 0 0 0-4.1 9.9V216a14 14 0 0 0 14 14h32a6 6 0 0 0 6-6v-18h18a6 6 0 0 0 6-6v-18h18a6 6 0 0 0 4.24-1.76l10.45-10.44A77.6 77.6 0 0 0 160 174h.1a78 78 0 0 0 55.05-133.15M226 98.16c-1.12 35.16-30.67 63.8-65.88 63.84a65.9 65.9 0 0 1-24.51-4.67a6 6 0 0 0-6.64 1.26L117.51 170H96a6 6 0 0 0-6 6v18H72a6 6 0 0 0-6 6v18H40a2 2 0 0 1-2-2v-28.69a2 2 0 0 1 .58-1.41l58.83-58.83a6 6 0 0 0 1.26-6.64A65.6 65.6 0 0 1 94 95.92c0-35.21 28.68-64.76 63.83-65.92A66 66 0 0 1 226 98.16M190 76a10 10 0 1 1-10-10a10 10 0 0 1 10 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/keyboard.svg b/public/icons/keyboard.svg
new file mode 100644
index 00000000..a7a79892
--- /dev/null
+++ b/public/icons/keyboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 50H32a14 14 0 0 0-14 14v128a14 14 0 0 0 14 14h192a14 14 0 0 0 14-14V64a14 14 0 0 0-14-14m2 142a2 2 0 0 1-2 2H32a2 2 0 0 1-2-2V64a2 2 0 0 1 2-2h192a2 2 0 0 1 2 2Zm-20-64a6 6 0 0 1-6 6H56a6 6 0 0 1 0-12h144a6 6 0 0 1 6 6m0-32a6 6 0 0 1-6 6H56a6 6 0 0 1 0-12h144a6 6 0 0 1 6 6M70 160a6 6 0 0 1-6 6h-8a6 6 0 0 1 0-12h8a6 6 0 0 1 6 6m96 0a6 6 0 0 1-6 6H96a6 6 0 0 1 0-12h64a6 6 0 0 1 6 6m40 0a6 6 0 0 1-6 6h-8a6 6 0 0 1 0-12h8a6 6 0 0 1 6 6"/></svg>
\ No newline at end of file
diff --git a/public/icons/lightning.svg b/public/icons/lightning.svg
new file mode 100644
index 00000000..88fd6ae3
--- /dev/null
+++ b/public/icons/lightning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M213.84 118.63a6 6 0 0 0-3.73-4.25l-59.23-22.21l15-75a6 6 0 0 0-10.27-5.27l-112 120a6 6 0 0 0 2.28 9.71l59.23 22.21l-15 75a6 6 0 0 0 3.14 6.52A6.1 6.1 0 0 0 96 246a6 6 0 0 0 4.39-1.91l112-120a6 6 0 0 0 1.45-5.46M106 220.46l11.85-59.28a6 6 0 0 0-3.77-6.8l-55.6-20.85l91.46-98l-11.82 59.29a6 6 0 0 0 3.77 6.8l55.6 20.85Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/linux.svg b/public/icons/linux.svg
new file mode 100644
index 00000000..65615d6d
--- /dev/null
+++ b/public/icons/linux.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M227.74 212.69a6 6 0 0 1-8.42-.94C218 210.05 186 169.17 186 88a58 58 0 0 0-116 0c0 81.17-31.95 122.05-33.31 123.75a6 6 0 0 1-9.38-7.49C27.68 203.79 58 164.56 58 88a70 70 0 0 1 140 0c0 76.63 30.38 115.87 30.69 116.26a6 6 0 0 1-.95 8.43M100 90a10 10 0 1 0 10 10a10 10 0 0 0-10-10m66 10a10 10 0 1 0-10 10a10 10 0 0 0 10-10m-67.31 30.63a6 6 0 0 0-5.37 10.74l32 16a6 6 0 0 0 2.68.63a6.1 6.1 0 0 0 2.69-.63l32-16a6 6 0 0 0-5.37-10.74L128 145.29ZM128 178a52.07 52.07 0 0 0-45.24 27.08a6 6 0 0 0 10.49 5.84a39.33 39.33 0 0 1 69.51 0A6 6 0 0 0 168 214a5.9 5.9 0 0 0 2.91-.76a6 6 0 0 0 2.33-8.16A52.09 52.09 0 0 0 128 178"/></svg>
\ No newline at end of file
diff --git a/public/icons/listchecks.svg b/public/icons/listchecks.svg
new file mode 100644
index 00000000..e447fa2b
--- /dev/null
+++ b/public/icons/listchecks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 128a6 6 0 0 1-6 6h-88a6 6 0 0 1 0-12h88a6 6 0 0 1 6 6m-94-58h88a6 6 0 0 0 0-12h-88a6 6 0 0 0 0 12m88 116h-88a6 6 0 0 0 0 12h88a6 6 0 0 0 0-12M83.76 43.76L56 71.51L44.24 59.76a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0-8.48-8.48m0 64L56 135.51l-11.76-11.75a6 6 0 1 0-8.48 8.48l16 16a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0-8.48-8.48m0 64L56 199.51l-11.76-11.75a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0-8.48-8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/listdashes.svg b/public/icons/listdashes.svg
new file mode 100644
index 00000000..102e7a31
--- /dev/null
+++ b/public/icons/listdashes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M90 64a6 6 0 0 1 6-6h120a6 6 0 0 1 0 12H96a6 6 0 0 1-6-6m126 58H96a6 6 0 0 0 0 12h120a6 6 0 0 0 0-12m0 64H96a6 6 0 0 0 0 12h120a6 6 0 0 0 0-12M56 58H40a6 6 0 0 0 0 12h16a6 6 0 0 0 0-12m0 64H40a6 6 0 0 0 0 12h16a6 6 0 0 0 0-12m0 64H40a6 6 0 0 0 0 12h16a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/listdots.svg b/public/icons/listdots.svg
new file mode 100644
index 00000000..bfb265e6
--- /dev/null
+++ b/public/icons/listdots.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M82 64a6 6 0 0 1 6-6h128a6 6 0 0 1 0 12H88a6 6 0 0 1-6-6m134 58H88a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12m0 64H88a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12M44 54a10 10 0 1 0 10 10a10 10 0 0 0-10-10m0 128a10 10 0 1 0 10 10a10 10 0 0 0-10-10m0-64a10 10 0 1 0 10 10a10 10 0 0 0-10-10"/></svg>
\ No newline at end of file
diff --git a/public/icons/listheart.svg b/public/icons/listheart.svg
new file mode 100644
index 00000000..40ee0693
--- /dev/null
+++ b/public/icons/listheart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m6 70h64a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12m80 52H40a6 6 0 0 0 0 12h80a6 6 0 0 0 0-12m126-42c0 35.3-49.22 60.32-51.32 61.37a6 6 0 0 1-5.36 0C187.22 204.32 138 179.3 138 144a30 30 0 0 1 54-18a30 30 0 0 1 54 18m-12 0a18 18 0 0 0-36 0a6 6 0 0 1-12 0a18 18 0 0 0-36 0c0 14.15 11.78 27 21.67 35.25A139 139 0 0 0 192 193.19a138 138 0 0 0 20.33-13.94C222.22 171 234 158.15 234 144"/></svg>
\ No newline at end of file
diff --git a/public/icons/listnumbers.svg b/public/icons/listnumbers.svg
new file mode 100644
index 00000000..1f72ebab
--- /dev/null
+++ b/public/icons/listnumbers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 128a6 6 0 0 1-6 6H104a6 6 0 0 1 0-12h112a6 6 0 0 1 6 6M104 70h112a6 6 0 0 0 0-12H104a6 6 0 0 0 0 12m112 116H104a6 6 0 0 0 0 12h112a6 6 0 0 0 0-12M42.68 53.37L50 49.71V104a6 6 0 0 0 12 0V40a6 6 0 0 0-8.68-5.37l-16 8a6 6 0 0 0 5.36 10.74M72 202H52l21.48-28.74A21.5 21.5 0 0 0 77.79 157A21.75 21.75 0 0 0 69 142.38a22.86 22.86 0 0 0-31.35 4.31a22.2 22.2 0 0 0-3.28 5.92a6 6 0 0 0 11.28 4.11a9.9 9.9 0 0 1 1.48-2.67a10.78 10.78 0 0 1 14.78-2a9.9 9.9 0 0 1 4 6.61a9.64 9.64 0 0 1-2 7.28l-.06.09l-28.65 38.38A6 6 0 0 0 40 214h32a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/liststar.svg b/public/icons/liststar.svg
new file mode 100644
index 00000000..243c4eaf
--- /dev/null
+++ b/public/icons/liststar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m6 70h56a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12m72 52H40a6 6 0 0 0 0 12h72a6 6 0 0 0 0-12m123.82-43.76l-23.49 19.39l7.16 28.93a6 6 0 0 1-8.87 6.61L184 181.5l-26.62 15.67a6 6 0 0 1-8.87-6.61l7.16-28.93l-23.49-19.39a6 6 0 0 1 3.36-10.61l31-2.4l11.91-27.61a6 6 0 0 1 11 0l11.91 27.61l31 2.4a6 6 0 0 1 3.36 10.61Zm-19.1.21l-19.83-1.53a6 6 0 0 1-5-3.61L184 119.14l-7.84 18.17a6 6 0 0 1-5 3.61l-19.83 1.53l14.94 12.33a6 6 0 0 1 2 6.07l-4.63 18.74L181 169.37a6 6 0 0 1 6.08 0l17.37 10.22l-4.63-18.74a6 6 0 0 1 2-6.07Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/lock.svg b/public/icons/lock.svg
new file mode 100644
index 00000000..6eaba0b9
--- /dev/null
+++ b/public/icons/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 82h-34V56a46 46 0 0 0-92 0v26H48a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V96a14 14 0 0 0-14-14M94 56a34 34 0 0 1 68 0v26H94Zm116 152a2 2 0 0 1-2 2H48a2 2 0 0 1-2-2V96a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2Zm-82-94a26 26 0 0 0-6 51.29V184a6 6 0 0 0 12 0v-18.71a26 26 0 0 0-6-51.29m0 40a14 14 0 1 1 14-14a14 14 0 0 1-14 14"/></svg>
\ No newline at end of file
diff --git a/public/icons/lockopen.svg b/public/icons/lockopen.svg
new file mode 100644
index 00000000..bc29248f
--- /dev/null
+++ b/public/icons/lockopen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 82H94V56a34 34 0 0 1 34-34c16.3 0 31 11.69 34.12 27.19a6 6 0 0 0 11.76-2.38C169.55 25.48 150.26 10 128 10a46.06 46.06 0 0 0-46 46v26H48a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V96a14 14 0 0 0-14-14m2 126a2 2 0 0 1-2 2H48a2 2 0 0 1-2-2V96a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2Zm-82-94a26 26 0 0 0-6 51.29V184a6 6 0 0 0 12 0v-18.71a26 26 0 0 0-6-51.29m0 40a14 14 0 1 1 14-14a14 14 0 0 1-14 14"/></svg>
\ No newline at end of file
diff --git a/public/icons/microphone.svg b/public/icons/microphone.svg
new file mode 100644
index 00000000..be171729
--- /dev/null
+++ b/public/icons/microphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 174a46.06 46.06 0 0 0 46-46V64a46 46 0 0 0-92 0v64a46.06 46.06 0 0 0 46 46M94 64a34 34 0 0 1 68 0v64a34 34 0 0 1-68 0Zm40 141.75V240a6 6 0 0 1-12 0v-34.25A78.09 78.09 0 0 1 50 128a6 6 0 0 1 12 0a66 66 0 0 0 132 0a6 6 0 0 1 12 0a78.09 78.09 0 0 1-72 77.75"/></svg>
\ No newline at end of file
diff --git a/public/icons/microphoneslash.svg b/public/icons/microphoneslash.svg
new file mode 100644
index 00000000..262343fa
--- /dev/null
+++ b/public/icons/microphoneslash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m212.44 220l-160-176a6 6 0 0 0-8.88 8L82 94.32V128a46 46 0 0 0 67.56 40.64l13.75 15.12A65.26 65.26 0 0 1 128 194a66.08 66.08 0 0 1-66-66a6 6 0 0 0-12 0a78.09 78.09 0 0 0 72 77.75V240a6 6 0 0 0 12 0v-34.23a76.93 76.93 0 0 0 37.48-13L203.56 228a6 6 0 0 0 8.88-8.08ZM128 162a34 34 0 0 1-34-34v-20.48l47.12 51.84A33.8 33.8 0 0 1 128 162m59.32-5a65.4 65.4 0 0 0 6.68-29a6 6 0 0 1 12 0a77.3 77.3 0 0 1-7.9 34.25a6 6 0 1 1-10.78-5.25M85.8 45.67A46 46 0 0 1 174 64v64a45 45 0 0 1-.25 4.81a6 6 0 0 1-6 5.38h-.63a6 6 0 0 1-5.34-6.59a35 35 0 0 0 .22-3.6V64a34 34 0 0 0-65.2-13.55a6 6 0 0 1-11-4.78"/></svg>
\ No newline at end of file
diff --git a/public/icons/moon.svg b/public/icons/moon.svg
new file mode 100644
index 00000000..ba13967b
--- /dev/null
+++ b/public/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/musicnote.svg b/public/icons/musicnote.svg
new file mode 100644
index 00000000..b77539be
--- /dev/null
+++ b/public/icons/musicnote.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M211.69 19.27a6 6 0 0 0-5.15-1.09l-128 32A6 6 0 0 0 74 56v114.11A34 34 0 1 0 86 196v-87.32l116-29v58.43A34 34 0 1 0 214 164V24a6 6 0 0 0-2.31-4.73M52 218a22 22 0 1 1 22-22a22 22 0 0 1-22 22M86 96.32V60.68l116-29v35.64ZM180 186a22 22 0 1 1 22-22a22 22 0 0 1-22 22"/></svg>
\ No newline at end of file
diff --git a/public/icons/normalshield.svg b/public/icons/normalshield.svg
new file mode 100644
index 00000000..9293db66
--- /dev/null
+++ b/public/icons/normalshield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 42H48a14 14 0 0 0-14 14v56c0 51.94 25.12 83.4 46.2 100.64c22.73 18.6 45.27 24.89 46.22 25.15a6 6 0 0 0 3.16 0c.95-.26 23.49-6.55 46.22-25.15C196.88 195.4 222 163.94 222 112V56a14 14 0 0 0-14-14m2 70c0 37.76-13.94 68.39-41.44 91.06A131.2 131.2 0 0 1 128 225.72a131 131 0 0 1-40.56-22.66C59.94 180.39 46 149.76 46 112V56a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/phone.svg b/public/icons/phone.svg
new file mode 100644
index 00000000..6bf536a0
--- /dev/null
+++ b/public/icons/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m221.59 160.3l-47.24-21.17a14 14 0 0 0-13.28 1.22a5 5 0 0 0-.56.42l-24.69 21a1.88 1.88 0 0 1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91 1.91 0 0 1 0-1.68l21.07-25a6 6 0 0 0 .42-.58a14 14 0 0 0 1.12-13.27L95.73 34.49a14 14 0 0 0-14.56-8.38A54.24 54.24 0 0 0 34 80c0 78.3 63.7 142 142 142a54.25 54.25 0 0 0 53.89-47.17a14 14 0 0 0-8.3-14.53M176 210c-71.68 0-130-58.32-130-130a42.23 42.23 0 0 1 36.67-42h.23a2 2 0 0 1 1.84 1.31l21.1 47.11a2 2 0 0 1 0 1.67l-21.11 25.06a5 5 0 0 0-.43.57a14 14 0 0 0-.91 13.73c8.87 18.16 27.17 36.32 45.53 45.19a14 14 0 0 0 13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92 1.92 0 0 1 1.6-.1l47.25 21.17a2 2 0 0 1 1.21 2A42.24 42.24 0 0 1 176 210"/></svg>
\ No newline at end of file
diff --git a/public/icons/phonecall.svg b/public/icons/phonecall.svg
new file mode 100644
index 00000000..fbecdd97
--- /dev/null
+++ b/public/icons/phonecall.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M146.2 46.45a6 6 0 0 1 7.35-4.25a84.24 84.24 0 0 1 60.25 60.25a6 6 0 0 1-4.25 7.35a6 6 0 0 1-1.55.2a6 6 0 0 1-5.8-4.45a72.34 72.34 0 0 0-51.75-51.75a6 6 0 0 1-4.25-7.35m-3.75 39.35C157 89.68 166.32 99 170.2 113.55A6 6 0 0 0 176 118a6 6 0 0 0 1.55-.2a6 6 0 0 0 4.25-7.35c-5-18.71-17.54-31.25-36.25-36.25a6 6 0 1 0-3.1 11.6m79.44 97A54.25 54.25 0 0 1 168 230C89.7 230 26 166.3 26 88a54.25 54.25 0 0 1 47.17-53.89a14 14 0 0 1 14.56 8.39l21.1 47.1a14 14 0 0 1-1.12 13.28a6 6 0 0 1-.42.57l-21.07 25.06a1.89 1.89 0 0 0 0 1.67c7.66 15.68 24.1 32 40 39.65a1.88 1.88 0 0 0 1.68-.06l24.69-21a5 5 0 0 1 .56-.42a14 14 0 0 1 13.28-1.22l47.24 21.17a14 14 0 0 1 8.22 14.53ZM210 181.32a2 2 0 0 0-1.21-2l-47.25-21.17a1.92 1.92 0 0 0-1.6.1l-24.68 21c-.18.15-.37.29-.56.42a14 14 0 0 1-13.77 1c-18.36-8.87-36.66-27-45.53-45.19a14 14 0 0 1 .91-13.73a5 5 0 0 1 .43-.57l21.05-25.09a2 2 0 0 0 0-1.67L76.74 47.31A2 2 0 0 0 74.9 46h-.23A42.24 42.24 0 0 0 38 88c0 71.68 58.32 130 130 130a42.24 42.24 0 0 0 42-36.68"/></svg>
\ No newline at end of file
diff --git a/public/icons/phonehang.svg b/public/icons/phonehang.svg
new file mode 100644
index 00000000..09677754
--- /dev/null
+++ b/public/icons/phonehang.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M230.19 91.55c-55.39-55.4-149-55.4-204.38 0c-19.25 19.27-21.11 47.67-4.52 69.06a14 14 0 0 0 16.1 4.39l49-17.38l.22-.09a13.93 13.93 0 0 0 8.53-10.25l5.9-29.52a1.93 1.93 0 0 1 1.21-1.47a78.53 78.53 0 0 1 51.18-.11a1.93 1.93 0 0 1 1.22 1.45l6.21 29.75a14 14 0 0 0 8.5 10.14l.23.08l49 17.4a14 14 0 0 0 16.1-4.42c16.61-21.36 14.75-49.76-4.5-69.03m-5 61.71a2 2 0 0 1-2.29.58l-.22-.09l-49-17.38a2 2 0 0 1-1.08-1.37l-6.22-29.74a14 14 0 0 0-9.06-10.35a90.53 90.53 0 0 0-59 .13a14 14 0 0 0-9 10.45L83.37 135a2 2 0 0 1-1.15 1.44l-48.94 17.31l-.22.09a2 2 0 0 1-2.29-.58c-13-16.74-11.56-38.12 3.53-53.22c25.39-25.4 59.55-38.1 93.7-38.1s68.31 12.7 93.7 38.1c15.09 15.1 16.51 36.48 3.53 53.22ZM222 200a6 6 0 0 1-6 6H40a6 6 0 0 1 0-12h176a6 6 0 0 1 6 6"/></svg>
\ No newline at end of file
diff --git a/public/icons/phonelist.svg b/public/icons/phonelist.svg
new file mode 100644
index 00000000..57dd209d
--- /dev/null
+++ b/public/icons/phonelist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m213.59 168.3l-47.24-21.17a14 14 0 0 0-13.28 1.22a5 5 0 0 0-.56.42l-24.69 21a1.88 1.88 0 0 1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.89 1.89 0 0 1 0-1.67l21.07-25.06a6 6 0 0 0 .42-.58a14 14 0 0 0 1.12-13.27L87.73 42.49a14 14 0 0 0-14.56-8.38A54.25 54.25 0 0 0 26 88c0 78.3 63.7 142 142 142a54.25 54.25 0 0 0 53.89-47.17a14 14 0 0 0-8.3-14.53M168 218C96.32 218 38 159.68 38 88a42.23 42.23 0 0 1 36.67-42h.23a2 2 0 0 1 1.84 1.31l21.1 47.11a2 2 0 0 1 0 1.67l-21.11 25.06a5 5 0 0 0-.43.57a14 14 0 0 0-.91 13.73c8.87 18.16 27.17 36.32 45.53 45.19a14 14 0 0 0 13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92 1.92 0 0 1 1.6-.1l47.25 21.17a2 2 0 0 1 1.21 2A42.24 42.24 0 0 1 168 218M138 64a6 6 0 0 1 6-6h64a6 6 0 0 1 0 12h-64a6 6 0 0 1-6-6m0 40a6 6 0 0 1 6-6h64a6 6 0 0 1 0 12h-64a6 6 0 0 1-6-6"/></svg>
\ No newline at end of file
diff --git a/public/icons/phonepause.svg b/public/icons/phonepause.svg
new file mode 100644
index 00000000..dbb6a8db
--- /dev/null
+++ b/public/icons/phonepause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m213.59 168.3l-47.24-21.17a14 14 0 0 0-13.28 1.22a5 5 0 0 0-.56.42l-24.69 21a1.88 1.88 0 0 1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.89 1.89 0 0 1 0-1.67l21.07-25.06c.15-.18.29-.38.42-.57a14 14 0 0 0 1.12-13.28L87.73 42.49a14 14 0 0 0-14.56-8.38A54.25 54.25 0 0 0 26 88c0 78.3 63.7 142 142 142a54.25 54.25 0 0 0 53.89-47.17a14 14 0 0 0-8.3-14.53M168 218C96.32 218 38 159.68 38 88a42.24 42.24 0 0 1 36.67-42h.23a2 2 0 0 1 1.84 1.31l21.1 47.11a2 2 0 0 1 0 1.67l-21.11 25.06a5 5 0 0 0-.43.57a14 14 0 0 0-.91 13.73c8.87 18.16 27.17 36.32 45.53 45.19a14 14 0 0 0 13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92 1.92 0 0 1 1.6-.1l47.25 21.17a2 2 0 0 1 1.21 2A42.24 42.24 0 0 1 168 218m26-114V48a6 6 0 0 1 12 0v56a6 6 0 0 1-12 0m-40 0V48a6 6 0 0 1 12 0v56a6 6 0 0 1-12 0"/></svg>
\ No newline at end of file
diff --git a/public/icons/phoneslash.svg b/public/icons/phoneslash.svg
new file mode 100644
index 00000000..e7086a36
--- /dev/null
+++ b/public/icons/phoneslash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M52.44 36a6 6 0 0 0-8.88 8l29.52 32.51a139.3 139.3 0 0 0-47.27 31.08c-19.25 19.26-21.11 47.65-4.52 69a14 14 0 0 0 16.1 4.41l49-17.37l.22-.09a13.93 13.93 0 0 0 8.53-10.25l5.9-29.51a2 2 0 0 1 1.21-1.47a80 80 0 0 1 10-2.75L203.56 220a6 6 0 0 0 8.88-8.08Zm45.85 75a14 14 0 0 0-9 10.45L83.37 151a2 2 0 0 1-1.15 1.43l-48.94 17.34l-.22.08a2 2 0 0 1-2.29-.58c-13-16.73-11.56-38.11 3.53-53.19A127.9 127.9 0 0 1 81.75 86l21.34 23.48c-1.62.52-3.22.99-4.8 1.52m136.42 65.61a14 14 0 0 1-16.1 4.41l-9.28-3.29a6 6 0 1 1 4-11.31l9.38 3.33l.22.08a2 2 0 0 0 2.29-.58c13-16.73 11.56-38.11-3.53-53.19C195.64 90 158.86 76.2 120.83 78.19a6 6 0 1 1-.63-12c41.44-2.15 81.52 12.93 110 41.39c19.24 19.27 21.1 47.66 4.51 69.05Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/plug.svg b/public/icons/plug.svg
new file mode 100644
index 00000000..2e07385f
--- /dev/null
+++ b/public/icons/plug.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.24 67.76a6 6 0 0 0-8.48 0L192 103.51L152.49 64l35.75-35.76a6 6 0 0 0-8.48-8.48L144 55.51l-27.76-27.75a6 6 0 1 0-8.48 8.48l7.75 7.76l-54.38 54.38a38 38 0 0 0 0 53.75l17.13 17.12l-50.5 50.51a6 6 0 1 0 8.48 8.48l50.51-50.5l17.13 17.13a38 38 0 0 0 53.74 0L212 140.49l7.76 7.75a6 6 0 0 0 8.48-8.48L200.49 112l35.75-35.76a6 6 0 0 0 0-8.48m-87.11 118.62a26 26 0 0 1-36.77 0l-42.74-42.74a26 26 0 0 1 0-36.77L124 52.49L203.51 132Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/power.svg b/public/icons/power.svg
new file mode 100644
index 00000000..c52b50bb
--- /dev/null
+++ b/public/icons/power.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M122 128V48a6 6 0 0 1 12 0v80a6 6 0 0 1-12 0m57.28-77a6 6 0 0 0-6.56 10C196.41 76.47 210 100.88 210 128a82 82 0 0 1-164 0c0-27.12 13.59-51.53 37.28-67a6 6 0 0 0-6.56-10C49.57 68.68 34 96.75 34 128a94 94 0 0 0 188 0c0-31.25-15.57-59.32-42.72-77"/></svg>
\ No newline at end of file
diff --git a/public/icons/printer.svg b/public/icons/printer.svg
new file mode 100644
index 00000000..c2df959d
--- /dev/null
+++ b/public/icons/printer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M214.67 74H198V40a6 6 0 0 0-6-6H64a6 6 0 0 0-6 6v34H41.33C28.47 74 18 83.87 18 96v80a6 6 0 0 0 6 6h34v34a6 6 0 0 0 6 6h128a6 6 0 0 0 6-6v-34h34a6 6 0 0 0 6-6V96c0-12.13-10.47-22-23.33-22M70 46h116v28H70Zm116 164H70v-52h116Zm40-40h-28v-18a6 6 0 0 0-6-6H64a6 6 0 0 0-6 6v18H30V96c0-5.51 5.08-10 11.33-10h173.34c6.25 0 11.33 4.49 11.33 10Zm-28-54a10 10 0 1 1-10-10a10 10 0 0 1 10 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/scissors.svg b/public/icons/scissors.svg
new file mode 100644
index 00000000..fc8fc248
--- /dev/null
+++ b/public/icons/scissors.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M159.38 112a6 6 0 0 1 1.57-8.34l67.66-46.31a6 6 0 0 1 6.78 9.91l-67.67 46.3a6 6 0 0 1-8.34-1.56M237 197.09a6 6 0 0 1-8.34 1.56L136 135.27l-45 30.79A34 34 0 1 1 84 156a2 2 0 0 0 .19.2l41.18-28.2l-41.14-28.16l-.23.16a34 34 0 1 1 7-10.1l144.38 98.8a6 6 0 0 1 1.62 8.39M75.56 91.55a22 22 0 1 0-31.12 0a21.88 21.88 0 0 0 31.12 0M82 180a22 22 0 1 0-6.44 15.56A21.88 21.88 0 0 0 82 180"/></svg>
\ No newline at end of file
diff --git a/public/icons/searchlist.svg b/public/icons/searchlist.svg
new file mode 100644
index 00000000..d1575f46
--- /dev/null
+++ b/public/icons/searchlist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m6 70h72a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12m88 52H40a6 6 0 0 0 0 12h88a6 6 0 0 0 0-12m108.24 10.24a6 6 0 0 1-8.48 0l-21.49-21.48a38.06 38.06 0 1 1 8.49-8.49l21.48 21.49a6 6 0 0 1 0 8.48M184 170a26 26 0 1 0-26-26a26 26 0 0 0 26 26"/></svg>
\ No newline at end of file
diff --git a/public/icons/shieldcheck.svg b/public/icons/shieldcheck.svg
new file mode 100644
index 00000000..ee9d4bfb
--- /dev/null
+++ b/public/icons/shieldcheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 42H48a14 14 0 0 0-14 14v56c0 51.94 25.12 83.4 46.2 100.64c22.73 18.6 45.27 24.89 46.22 25.15a6 6 0 0 0 3.16 0c.95-.26 23.49-6.55 46.22-25.15C196.88 195.4 222 163.94 222 112V56a14 14 0 0 0-14-14m2 70c0 37.76-13.94 68.39-41.44 91.06A131.2 131.2 0 0 1 128 225.72a131 131 0 0 1-40.56-22.66C59.94 180.39 46 149.76 46 112V56a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2Zm-37.76-12.24a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0"/></svg>
\ No newline at end of file
diff --git a/public/icons/shieldcheckered.svg b/public/icons/shieldcheckered.svg
new file mode 100644
index 00000000..e0623fd7
--- /dev/null
+++ b/public/icons/shieldcheckered.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 42H48a14 14 0 0 0-14 14v56c0 51.94 25.12 83.4 46.2 100.64c22.73 18.6 45.27 24.89 46.22 25.15a6 6 0 0 0 3.16 0c.95-.26 23.49-6.55 46.22-25.15C196.88 195.4 222 163.94 222 112V56a14 14 0 0 0-14-14m2 14v56c0 3.39-.12 6.72-.34 10H134V54h74a2 2 0 0 1 2 2M46 56a2 2 0 0 1 2-2h74v68H46.34c-.22-3.28-.34-6.61-.34-10Zm1.71 78H122v89.52a133.1 133.1 0 0 1-34.56-20.46C65.5 185 52.2 161.8 47.71 134m120.85 69.06A133.1 133.1 0 0 1 134 223.52V134h74.29c-4.49 27.8-17.79 51-39.73 69.06"/></svg>
\ No newline at end of file
diff --git a/public/icons/shieldslash.svg b/public/icons/shieldslash.svg
new file mode 100644
index 00000000..267243bd
--- /dev/null
+++ b/public/icons/shieldslash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M52.44 36a6 6 0 0 0-9.63 7A14 14 0 0 0 34 56v56c0 51.94 25.12 83.4 46.2 100.64c22.73 18.6 45.27 24.89 46.22 25.15a6 6 0 0 0 3.16 0c1.36-.37 31.91-8.95 57.67-35.7L203.56 220a6 6 0 0 0 8.88-8.08ZM128 225.72a130.8 130.8 0 0 1-40.56-22.66C59.94 180.39 46 149.75 46 112V56a2 2 0 0 1 2-2h4.6l126.56 139.19A130.7 130.7 0 0 1 128 225.72M222 56v56c0 20.29-3.83 39.05-11.38 55.77a6 6 0 0 1-5.47 3.53a5.9 5.9 0 0 1-2.47-.54a6 6 0 0 1-3-7.93C206.53 147.67 210 130.57 210 112V56a2 2 0 0 0-2-2H98.52a6 6 0 1 1 0-12H208a14 14 0 0 1 14 14"/></svg>
\ No newline at end of file
diff --git a/public/icons/shieldwarning.svg b/public/icons/shieldwarning.svg
new file mode 100644
index 00000000..8c930220
--- /dev/null
+++ b/public/icons/shieldwarning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M122 136V96a6 6 0 0 1 12 0v40a6 6 0 0 1-12 0m6 26a10 10 0 1 0 10 10a10 10 0 0 0-10-10m94-106v56c0 51.94-25.12 83.4-46.2 100.64c-22.73 18.6-45.27 24.89-46.22 25.15a6 6 0 0 1-3.16 0c-1-.26-23.49-6.55-46.22-25.15C59.12 195.4 34 163.94 34 112V56a14 14 0 0 1 14-14h160a14 14 0 0 1 14 14m-12 0a2 2 0 0 0-2-2H48a2 2 0 0 0-2 2v56c0 37.75 13.94 68.39 41.44 91.06A131 131 0 0 0 128 225.72a131.2 131.2 0 0 0 40.56-22.66C196.06 180.39 210 149.75 210 112Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/signin.svg b/public/icons/signin.svg
new file mode 100644
index 00000000..4290f3e8
--- /dev/null
+++ b/public/icons/signin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m140.24 132.24l-40 40a6 6 0 0 1-8.48-8.48L121.51 134H24a6 6 0 0 1 0-12h97.51L91.76 92.24a6 6 0 0 1 8.48-8.48l40 40a6 6 0 0 1 0 8.48M200 34h-64a6 6 0 0 0 0 12h58v164h-58a6 6 0 0 0 0 12h64a6 6 0 0 0 6-6V40a6 6 0 0 0-6-6"/></svg>
\ No newline at end of file
diff --git a/public/icons/signout.svg b/public/icons/signout.svg
new file mode 100644
index 00000000..26c94390
--- /dev/null
+++ b/public/icons/signout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M118 216a6 6 0 0 1-6 6H48a6 6 0 0 1-6-6V40a6 6 0 0 1 6-6h64a6 6 0 0 1 0 12H54v164h58a6 6 0 0 1 6 6m110.24-92.24l-40-40a6 6 0 0 0-8.48 8.48L209.51 122H112a6 6 0 0 0 0 12h97.51l-29.75 29.76a6 6 0 1 0 8.48 8.48l40-40a6 6 0 0 0 0-8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/spinner.svg b/public/icons/spinner.svg
new file mode 100644
index 00000000..94b6df09
--- /dev/null
+++ b/public/icons/spinner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M134 32v32a6 6 0 0 1-12 0V32a6 6 0 0 1 12 0m39.25 56.75A6 6 0 0 0 177.5 87l22.62-22.63a6 6 0 0 0-8.48-8.48L169 78.5a6 6 0 0 0 4.24 10.25ZM224 122h-32a6 6 0 0 0 0 12h32a6 6 0 0 0 0-12m-46.5 47a6 6 0 0 0-8.5 8.5l22.63 22.62a6 6 0 0 0 8.48-8.48ZM128 186a6 6 0 0 0-6 6v32a6 6 0 0 0 12 0v-32a6 6 0 0 0-6-6m-49.5-17l-22.62 22.64a6 6 0 1 0 8.48 8.48L87 177.5a6 6 0 1 0-8.5-8.5M70 128a6 6 0 0 0-6-6H32a6 6 0 0 0 0 12h32a6 6 0 0 0 6-6m-5.64-72.12a6 6 0 0 0-8.48 8.48L78.5 87a6 6 0 1 0 8.5-8.5Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/star.svg b/public/icons/star.svg
new file mode 100644
index 00000000..d2659c54
--- /dev/null
+++ b/public/icons/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M237.28 97.87A14.18 14.18 0 0 0 224.76 88l-60.25-4.87l-23.22-56.2a14.37 14.37 0 0 0-26.58 0L91.49 83.11L31.24 88a14.18 14.18 0 0 0-12.52 9.89A14.43 14.43 0 0 0 23 113.32l46 39.61l-14 59.25a14.4 14.4 0 0 0 5.59 15a14.1 14.1 0 0 0 15.91.6l51.5-31.66l51.58 31.71a14.1 14.1 0 0 0 15.91-.6a14.4 14.4 0 0 0 5.59-15l-14-59.25L233 113.32a14.43 14.43 0 0 0 4.28-15.45m-12.14 6.37l-48.69 42a6 6 0 0 0-1.92 5.92l14.88 62.79a2.35 2.35 0 0 1-.95 2.57a2.24 2.24 0 0 1-2.6.1L131.14 184a6 6 0 0 0-6.28 0l-54.72 33.61a2.24 2.24 0 0 1-2.6-.1a2.35 2.35 0 0 1-1-2.57l14.88-62.79a6 6 0 0 0-1.92-5.92l-48.69-42a2.37 2.37 0 0 1-.73-2.65a2.28 2.28 0 0 1 2.07-1.65l63.92-5.16a6 6 0 0 0 5.06-3.69l24.63-59.6a2.35 2.35 0 0 1 4.38 0l24.63 59.6a6 6 0 0 0 5.06 3.69l63.92 5.16a2.28 2.28 0 0 1 2.07 1.65a2.37 2.37 0 0 1-.68 2.66"/></svg>
\ No newline at end of file
diff --git a/public/icons/subtitles.svg b/public/icons/subtitles.svg
new file mode 100644
index 00000000..075c420d
--- /dev/null
+++ b/public/icons/subtitles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 50H32a14 14 0 0 0-14 14v128a14 14 0 0 0 14 14h192a14 14 0 0 0 14-14V64a14 14 0 0 0-14-14m2 142a2 2 0 0 1-2 2H32a2 2 0 0 1-2-2V64a2 2 0 0 1 2-2h192a2 2 0 0 1 2 2ZM50 136a6 6 0 0 1 6-6h16a6 6 0 0 1 0 12H56a6 6 0 0 1-6-6m156 0a6 6 0 0 1-6 6h-96a6 6 0 0 1 0-12h96a6 6 0 0 1 6 6m-48 32a6 6 0 0 1-6 6H56a6 6 0 0 1 0-12h96a6 6 0 0 1 6 6m48 0a6 6 0 0 1-6 6h-16a6 6 0 0 1 0-12h16a6 6 0 0 1 6 6"/></svg>
\ No newline at end of file
diff --git a/public/icons/textaligncenter.svg b/public/icons/textaligncenter.svg
new file mode 100644
index 00000000..ed31774d
--- /dev/null
+++ b/public/icons/textaligncenter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m30 34a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12Zm152 40H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12m-24 40H64a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/textalignjustify.svg b/public/icons/textalignjustify.svg
new file mode 100644
index 00000000..bdddc920
--- /dev/null
+++ b/public/icons/textalignjustify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m182 34H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12m0 40H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12m0 40H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/textalignleft.svg b/public/icons/textalignleft.svg
new file mode 100644
index 00000000..2b5c720e
--- /dev/null
+++ b/public/icons/textalignleft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m6 46h128a6 6 0 0 0 0-12H40a6 6 0 0 0 0 12m176 28H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12m-48 40H40a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/textalignright.svg b/public/icons/textalignright.svg
new file mode 100644
index 00000000..365ec8cc
--- /dev/null
+++ b/public/icons/textalignright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M34 64a6 6 0 0 1 6-6h176a6 6 0 0 1 0 12H40a6 6 0 0 1-6-6m182 34H88a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12m0 40H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12m0 40H88a6 6 0 0 0 0 12h128a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/textindent.svg b/public/icons/textindent.svg
new file mode 100644
index 00000000..6b6d648f
--- /dev/null
+++ b/public/icons/textindent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 128a6 6 0 0 1-6 6H112a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6M112 70h104a6 6 0 0 0 0-12H112a6 6 0 0 0 0 12m104 116H40a6 6 0 0 0 0 12h176a6 6 0 0 0 0-12M35.76 140.24a6 6 0 0 0 8.48 0l40-40a6 6 0 0 0 0-8.48l-40-40a6 6 0 0 0-8.48 8.48L71.51 96l-35.75 35.76a6 6 0 0 0 0 8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/upload.svg b/public/icons/upload.svg
new file mode 100644
index 00000000..daf15cbe
--- /dev/null
+++ b/public/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M222 144v64a6 6 0 0 1-6 6H40a6 6 0 0 1-6-6v-64a6 6 0 0 1 12 0v58h164v-58a6 6 0 0 1 12 0M92.24 76.24L122 46.49V144a6 6 0 0 0 12 0V46.49l29.76 29.75a6 6 0 0 0 8.48-8.48l-40-40a6 6 0 0 0-8.48 0l-40 40a6 6 0 0 0 8.48 8.48"/></svg>
\ No newline at end of file
diff --git a/public/icons/warning.svg b/public/icons/warning.svg
new file mode 100644
index 00000000..7924d15f
--- /dev/null
+++ b/public/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M235.07 189.09L147.61 37.22a22.75 22.75 0 0 0-39.22 0L20.93 189.09a21.53 21.53 0 0 0 0 21.72A22.35 22.35 0 0 0 40.55 222h174.9a22.35 22.35 0 0 0 19.6-11.19a21.53 21.53 0 0 0 .02-21.72m-10.41 15.71a10.46 10.46 0 0 1-9.21 5.2H40.55a10.46 10.46 0 0 1-9.21-5.2a9.51 9.51 0 0 1 0-9.72l87.45-151.87a10.75 10.75 0 0 1 18.42 0l87.46 151.87a9.51 9.51 0 0 1-.01 9.72M122 144v-40a6 6 0 0 1 12 0v40a6 6 0 0 1-12 0m16 36a10 10 0 1 1-10-10a10 10 0 0 1 10 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/warningcircle.svg b/public/icons/warningcircle.svg
new file mode 100644
index 00000000..f645bd1c
--- /dev/null
+++ b/public/icons/warningcircle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90m-6-82V80a6 6 0 0 1 12 0v56a6 6 0 0 1-12 0m16 36a10 10 0 1 1-10-10a10 10 0 0 1 10 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/webcam.svg b/public/icons/webcam.svg
new file mode 100644
index 00000000..a28cd7ea
--- /dev/null
+++ b/public/icons/webcam.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M166 104a38 38 0 1 0-38 38a38 38 0 0 0 38-38m-64 0a26 26 0 1 1 26 26a26 26 0 0 1-26-26m122 98h-90v-20.25a78 78 0 1 0-12 0V202H32a6 6 0 0 0 0 12h192a6 6 0 0 0 0-12M62 104a66 66 0 1 1 66 66a66.08 66.08 0 0 1-66-66"/></svg>
\ No newline at end of file
diff --git a/public/icons/webcamslash.svg b/public/icons/webcamslash.svg
new file mode 100644
index 00000000..591edab2
--- /dev/null
+++ b/public/icons/webcamslash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="m212.44 212l-160-176a6 6 0 0 0-8.88 8l17.75 19.56A78 78 0 0 0 122 181.75V202H32a6 6 0 0 0 0 12h166.07l5.49 6a6 6 0 0 0 8.88-8.08Zm-91.67-83a26.05 26.05 0 0 1-18.31-20.15ZM62 104a65.6 65.6 0 0 1 7.78-31.12l21.07 23.18A38 38 0 0 0 128 142a38 38 0 0 0 4.38-.26l21.06 23.17A66 66 0 0 1 62 104m72 98v-20.24a78.3 78.3 0 0 0 27.93-7.51L187.16 202ZM87.26 44.32a6 6 0 0 1 2.26-8.18a78 78 0 0 1 102.37 112.61a6 6 0 1 1-9.82-6.89a66 66 0 0 0-86.63-95.29a6 6 0 0 1-8.18-2.25m65.47 67.73a26 26 0 0 0-30.4-33.43a6 6 0 1 1-2.6-11.72a38 38 0 0 1 44.41 48.86a6 6 0 0 1-11.41-3.71"/></svg>
\ No newline at end of file
diff --git a/public/icons/windows.svg b/public/icons/windows.svg
new file mode 100644
index 00000000..dbf56516
--- /dev/null
+++ b/public/icons/windows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 138h-80a6 6 0 0 0-6 6v57.45a6 6 0 0 0 4.93 5.91l80 14.54a5.5 5.5 0 0 0 1.07.1a6 6 0 0 0 6-6v-72a6 6 0 0 0-6-6m-6 70.81l-68-12.36V150h68ZM96 138H32a6 6 0 0 0-6 6v40a6 6 0 0 0 4.93 5.9l64 11.64a6.4 6.4 0 0 0 1.07.1a6 6 0 0 0 6-6V144a6 6 0 0 0-6-6m-6 50.45L38 179v-29h52ZM211.84 35.39a6 6 0 0 0-4.91-1.29l-80 14.54a6 6 0 0 0-4.93 5.91V112a6 6 0 0 0 6 6h80a6 6 0 0 0 6-6V40a6 6 0 0 0-2.16-4.61M202 106h-68V59.55l68-12.36ZM99.84 55.76a6 6 0 0 0-4.91-1.3l-64 11.64A6 6 0 0 0 26 72v40a6 6 0 0 0 6 6h64a6 6 0 0 0 6-6V60.36a6 6 0 0 0-2.16-4.6M90 106H38V77l52-9.46Z"/></svg>
\ No newline at end of file
diff --git a/public/shapes/line.svg b/public/shapes/horizontalLine.svg
similarity index 83%
rename from public/shapes/line.svg
rename to public/shapes/horizontalLine.svg
index 2c40684d..967d76cd 100644
--- a/public/shapes/line.svg
+++ b/public/shapes/horizontalLine.svg
@@ -1,4 +1,4 @@
 <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
-  <!-- Línea -->
+  <!-- Línea Horizontal -->
   <line x1="10" y1="25" x2="190" y2="25" style="stroke:black;stroke-width:2"/>
 </svg>
\ No newline at end of file
diff --git a/public/shapes/verticalLine.svg b/public/shapes/verticalLine.svg
new file mode 100644
index 00000000..e8f76fac
--- /dev/null
+++ b/public/shapes/verticalLine.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Línea vertical -->
+  <line x1="25" y1="10" x2="25" y2="190" style="stroke:black;stroke-width:2"/>
+</svg>
\ No newline at end of file
diff --git a/public/widgets/datepicker.svg b/public/widgets/datepicker.svg
index ce18562e..d0bf6e63 100644
--- a/public/widgets/datepicker.svg
+++ b/public/widgets/datepicker.svg
@@ -1,9 +1,68 @@
-<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Marco del input -->
-  <rect x="10" y="30" width="280" height="40" rx="10" ry="10"
-        style="fill:none;stroke:black;stroke-width:2"/>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="276.000000pt" height="120.000000pt" viewBox="0 0 276.000000 120.000000"
+ preserveAspectRatio="xMidYMid meet">
 
-  <!-- Separadores -->
-  <line x1="120" y1="35" x2="100" y2="65" style="stroke:black;stroke-width:2"/>
-  <line x1="220" y1="35" x2="200" y2="65" style="stroke:black;stroke-width:2"/>
-</svg>
\ No newline at end of file
+<g transform="translate(0.000000,120.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M370 935 c0 -54 1 -55 29 -55 16 0 35 8 42 18 11 14 11 15 -1 5 -8
+-7 -24 -13 -37 -13 -21 0 -23 5 -23 45 0 40 2 45 23 45 13 0 29 -6 37 -12 12
+-11 12 -10 1 5 -7 9 -26 17 -42 17 -28 0 -29 -1 -29 -55z"/>
+<path d="M568 970 c-5 -17 3 -90 11 -90 3 0 5 21 4 46 -1 46 -8 65 -15 44z"/>
+<path d="M486 952 c-3 -5 6 -7 19 -4 33 6 32 -14 -1 -22 -35 -9 -29 -41 9 -42
+26 -1 28 1 25 35 -2 28 -8 37 -25 39 -11 2 -24 -1 -27 -6z m44 -42 c0 -12 -28
+-25 -36 -17 -9 9 6 27 22 27 8 0 14 -5 14 -10z"/>
+<path d="M612 948 c-25 -25 -6 -68 29 -68 10 0 20 4 23 8 2 4 -7 8 -21 7 -14
+0 -28 6 -30 13 -3 8 6 12 26 12 17 0 31 4 31 8 0 12 -22 32 -35 32 -6 0 -16
+-5 -23 -12z m43 -8 c4 -6 -5 -10 -20 -10 -15 0 -24 4 -20 10 3 6 12 10 20 10
+8 0 17 -4 20 -10z"/>
+<path d="M209 931 c-24 -19 -24 -20 -27 -278 -2 -142 0 -272 3 -290 12 -68
+-78 -63 1140 -63 l1104 0 15 22 c14 19 16 65 16 304 l0 283 -26 20 c-27 21
+-32 21 -870 21 -744 0 -844 -2 -844 -15 0 -13 101 -15 850 -15 l850 0 10 -26
+c6 -14 10 -138 10 -277 0 -212 -2 -256 -16 -275 l-15 -22 -1080 0 c-726 0
+-1087 3 -1100 10 -18 10 -19 24 -19 288 0 203 3 281 12 290 7 7 31 12 55 12
+32 0 43 4 43 15 0 23 -82 20 -111 -4z"/>
+<path d="M451 934 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M2236 721 c-5 -8 -25 -12 -50 -10 -80 4 -76 9 -76 -91 l0 -91 88 3
+87 3 3 88 c3 81 1 87 -17 87 -11 0 -21 5 -23 12 -3 9 -6 9 -12 -1z m44 -37 c0
+-11 -18 -14 -80 -14 -62 0 -80 3 -80 14 0 11 18 14 80 14 62 0 80 -3 80 -14z
+m-5 -84 l0 -55 -77 -3 -78 -3 0 61 0 61 78 -3 77 -3 0 -55z"/>
+<path d="M2190 620 c0 -5 5 -10 11 -10 5 0 7 5 4 10 -3 6 -8 10 -11 10 -2 0
+-4 -4 -4 -10z"/>
+<path d="M2235 620 c-3 -5 -1 -10 4 -10 6 0 11 5 11 10 0 6 -2 10 -4 10 -3 0
+-8 -4 -11 -10z"/>
+<path d="M2190 580 c0 -5 5 -10 11 -10 5 0 7 5 4 10 -3 6 -8 10 -11 10 -2 0
+-4 -4 -4 -10z"/>
+<path d="M2230 580 c0 -5 5 -10 10 -10 6 0 10 5 10 10 0 6 -4 10 -10 10 -5 0
+-10 -4 -10 -10z"/>
+<path d="M410 676 c0 -21 -5 -24 -27 -23 -20 2 -31 -5 -42 -25 -14 -25 -14
+-31 -1 -55 12 -22 24 -28 53 -30 l37 -1 0 79 c0 46 -4 79 -10 79 -5 0 -10 -11
+-10 -24z m-2 -69 c5 -38 -14 -60 -39 -46 -19 10 -27 58 -12 73 17 17 48 0 51
+-27z"/>
+<path d="M530 676 c0 -19 -4 -23 -20 -19 -30 8 -50 -15 -50 -57 0 -45 16 -60
+58 -57 l32 2 0 78 c0 45 -4 77 -10 77 -5 0 -10 -11 -10 -24z m3 -57 c12 -46
+-19 -81 -48 -53 -20 20 -19 61 2 72 22 13 40 5 46 -19z"/>
+<path d="M591 624 c-12 -42 -20 -78 -17 -81 2 -2 11 19 19 49 23 79 30 108 25
+108 -3 0 -15 -34 -27 -76z"/>
+<path d="M1035 688 c-17 -45 -42 -148 -36 -148 4 0 16 36 28 80 12 44 19 80
+17 80 -3 0 -7 -6 -9 -12z"/>
+<path d="M652 595 l1 -60 6 50 c5 42 10 51 29 53 20 3 22 0 22 -47 0 -28 5
+-51 10 -51 6 0 10 22 10 49 0 32 5 51 13 54 24 9 36 -7 40 -58 l3 -50 2 58 c2
+63 -10 77 -47 58 -12 -7 -22 -7 -26 -1 -3 5 -19 8 -35 7 -30 -2 -30 -2 -28
+-62z"/>
+<path d="M832 595 c1 -56 2 -57 5 -13 3 33 10 51 22 58 25 13 31 4 31 -52 0
+-62 18 -63 22 0 3 40 6 47 26 50 20 3 22 0 22 -47 0 -28 5 -51 10 -51 15 0 12
+97 -2 107 -7 4 -41 8 -75 8 l-63 0 2 -60z"/>
+<path d="M1060 656 c0 -2 10 -30 22 -61 21 -56 21 -58 3 -71 -10 -8 -15 -17
+-12 -21 4 -4 14 0 22 8 18 18 68 149 56 149 -5 0 -15 -20 -22 -45 -7 -25 -16
+-45 -20 -45 -3 0 -12 20 -19 45 -7 25 -17 45 -21 45 -5 0 -9 -2 -9 -4z"/>
+<path d="M1170 655 c0 -6 9 -34 20 -63 21 -56 20 -72 -8 -72 -12 0 -13 -3 -4
+-12 17 -17 34 4 60 75 29 76 27 96 -2 32 l-23 -50 -13 40 c-12 40 -30 68 -30
+50z"/>
+<path d="M1280 655 c0 -6 9 -34 20 -63 21 -56 20 -72 -8 -72 -12 0 -13 -3 -4
+-12 17 -17 34 4 60 75 29 76 27 96 -2 32 l-23 -50 -13 40 c-12 40 -30 68 -30
+50z"/>
+<path d="M1390 655 c0 -6 9 -34 20 -63 21 -56 20 -72 -8 -72 -12 0 -13 -3 -4
+-12 17 -17 34 4 60 75 29 76 27 96 -2 32 l-23 -50 -13 40 c-12 40 -30 68 -30
+50z"/>
+</g>
+</svg>
diff --git a/public/widgets/timepicker.svg b/public/widgets/timepicker.svg
index d71771ce..1a262986 100644
--- a/public/widgets/timepicker.svg
+++ b/public/widgets/timepicker.svg
@@ -1,13 +1,24 @@
-<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Marco del input -->
-  <rect x="10" y="30" width="280" height="40" rx="10" ry="10"
-        style="fill:none;stroke:black;stroke-width:2"/>
-
-  <!-- Separadores -->
-  <text x="120" y="60" font-family="Comic Sans MS, Balsamiq Sans, cursive" font-size="20" fill="black">
-    :
-  </text>
-  <text x="220" y="60" font-family="Comic Sans MS, Balsamiq Sans, cursive" font-size="20" fill="black">
-    :
-  </text>
+<svg width="100%" height="100%" viewBox="0 0 159 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(0.75,0,0,0.75,0,0)">
+        <g transform="matrix(1,0,0,1,13.2725,12.871)">
+            <g>
+                <text x="0px" y="0px" style="font-family:'Comic Sans MS', 'Balsamiq Sans', 'cursive';font-size:16px;">T<tspan x="8.992px " y="0px ">i</tspan>me</text>
+            </g>
+        </g>
+        <g transform="matrix(1.42538,0,0,1.42538,14.3551,47.7428)">
+            <text x="0px" y="0px" style="font-family:'Comic Sans MS', 'Balsamiq Sans', 'cursive';font-size:16px;">hh:mm</text>
+        </g>
+        <g transform="matrix(0.916667,0,0,0.916667,174.7,29.0713)">
+            <g id="access_time.svg">
+                <g>
+                    <rect x="0" y="0" width="24" height="24" style="fill:none;"/>
+                    <path d="M11.99,2C6.47,2 2,6.48 2,12C2,17.52 6.47,22 11.99,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 11.99,2ZM12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20Z" style="fill-rule:nonzero;"/>
+                    <path d="M12.5,7L11,7L11,13L16.25,16.15L17,14.92L12.5,12.25L12.5,7Z" style="fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+        <g transform="matrix(1.37166,0,0,1.43452,-3.29753,-1.12255)">
+            <path d="M40.939,6.313L152.227,6.313C154.015,6.313 155.466,7.701 155.466,9.41L155.466,43.849C155.466,45.558 154.015,46.945 152.227,46.945L7.24,46.945C5.453,46.945 4.002,45.558 4.002,43.849L4.002,9.41C4.002,7.701 5.453,6.313 7.24,6.313L11.095,6.313" style="fill:none;stroke:black;stroke-width:1px;"/>
+        </g>
+    </g>
 </svg>
diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
index 2bf628b8..c5a2d422 100644
--- a/src/common/components/icons/index.ts
+++ b/src/common/components/icons/index.ts
@@ -8,3 +8,5 @@ export * from './x-icon.component';
 export * from './quickmock-logo.component';
 export * from './copy-icon.component';
 export * from './paste-icon.component';
+export * from './delete-icon.component';
+export * from './pencil-icon.component';
diff --git a/src/common/components/icons/pencil-icon.component.tsx b/src/common/components/icons/pencil-icon.component.tsx
new file mode 100644
index 00000000..232a6868
--- /dev/null
+++ b/src/common/components/icons/pencil-icon.component.tsx
@@ -0,0 +1,15 @@
+export const PencilIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="m225.9 74.78l-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M48.49 160L136 72.48L155.51 92L68 179.51ZM46 208v-33.52L81.51 210H48a2 2 0 0 1-2-2m50-.49L76.49 188L164 100.48L183.51 120ZM217.41 86.1L192 111.51L144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83"
+      />
+    </svg>
+  );
+};
diff --git a/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx
similarity index 81%
rename from src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx
rename to src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx
index 21600aa2..35b3e729 100644
--- a/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx
+++ b/src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx
@@ -7,7 +7,7 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
-const lineShapeRestrictions: ShapeSizeRestrictions = {
+const horizontalLineShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
   minHeight: 10,
   maxWidth: -1,
@@ -16,12 +16,12 @@ const lineShapeRestrictions: ShapeSizeRestrictions = {
   defaultHeight: 10,
 };
 
-export const getlineShapeRestrictions = (): ShapeSizeRestrictions =>
-  lineShapeRestrictions;
+export const getHorizontalLineShapeRestrictions = (): ShapeSizeRestrictions =>
+  horizontalLineShapeRestrictions;
 
-const shapeType: ShapeType = 'line';
+const shapeType: ShapeType = 'horizontalLine';
 
-export const LineShape = forwardRef<any, ShapeProps>((props, ref) => {
+export const HorizontalLineShape = forwardRef<any, ShapeProps>((props, ref) => {
   const {
     x,
     y,
@@ -34,7 +34,7 @@ export const LineShape = forwardRef<any, ShapeProps>((props, ref) => {
     ...shapeProps
   } = props;
   const restrictedSize = fitSizeToShapeSizeRestrictions(
-    lineShapeRestrictions,
+    horizontalLineShapeRestrictions,
     width,
     height
   );
diff --git a/src/common/components/mock-components/front-basic-shapes/index.ts b/src/common/components/mock-components/front-basic-shapes/index.ts
index 602fa0ba..8a8940da 100644
--- a/src/common/components/mock-components/front-basic-shapes/index.ts
+++ b/src/common/components/mock-components/front-basic-shapes/index.ts
@@ -1,7 +1,8 @@
 export * from './rectangle-basic-shape';
 export * from './postit-basic-shape';
 export * from './diamond-shape';
-export * from './line-basic-shape';
+export * from './horizontal-line-basic-shape';
+export * from './vertical-line-basic-shape';
 export * from './triangle-basic-shape';
 export * from './circle-basic-shape';
 export * from './star-shape';
diff --git a/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx
new file mode 100644
index 00000000..5cdf01e0
--- /dev/null
+++ b/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx
@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { ShapeProps } from '../shape.model';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const verticalLineShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 50,
+  maxWidth: 10,
+  maxHeight: -1,
+  defaultWidth: 10,
+  defaultHeight: 200,
+};
+
+export const getVerticalLineShapeRestrictions = (): ShapeSizeRestrictions =>
+  verticalLineShapeRestrictions;
+
+const shapeType: ShapeType = 'verticalLine';
+
+export const VerticalLineShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    verticalLineShapeRestrictions,
+    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}>
+      {/* Transparent rectangle for applying margin */}
+      <Rect
+        width={restrictedWidth}
+        height={restrictedHeight}
+        fill="transparent"
+      />
+
+      <Line
+        x={restrictedWidth / 2}
+        y={0}
+        points={[0, 0, 0, restrictedHeight]}
+        stroke={stroke}
+        strokeWidth={2}
+        dash={strokeStyle}
+      />
+    </Group>
+  );
+});
diff --git a/src/common/components/mock-components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx
index a24f8a34..73c3941e 100644
--- a/src/common/components/mock-components/front-components/button-shape.tsx
+++ b/src/common/components/mock-components/front-components/button-shape.tsx
@@ -11,7 +11,7 @@ const buttonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
   minHeight: 35,
   maxWidth: -1,
-  maxHeight: 35,
+  maxHeight: 100,
   defaultWidth: 100,
   defaultHeight: 35,
 };
@@ -68,9 +68,9 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
       />
       <Text
         x={0}
-        y={10}
-        width={width}
-        height={height - 10}
+        y={restrictedHeight / 2 - 5}
+        width={restrictedWidth}
+        height={restrictedHeight - restrictedHeight / 2 - 5}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
index 21b41729..e3b1d90a 100644
--- a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
+++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -2,17 +2,19 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { Group, Rect, Line } from 'react-konva';
-import { BASIC_SHAPE } from './shape.const';
+import { Group, Rect, Text, Image } from 'react-konva';
+import { INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
+import calendarIconSrc from '/icons/calendar.svg';
+
 const datepickerInputShapeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 80,
-  minHeight: 50,
+  minWidth: 100,
+  minHeight: 30,
   maxWidth: -1,
   maxHeight: 50,
-  defaultWidth: 220,
+  defaultWidth: 180,
   defaultHeight: 50,
 };
 
@@ -23,8 +25,17 @@ export const getDatepickerInputShapeSizeRestrictions =
 
 export const DatepickerInputShape = forwardRef<any, ShapeProps>(
   (props, ref) => {
-    const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
-      props;
+    const {
+      x,
+      y,
+      width,
+      height,
+      id,
+      onSelected,
+      text,
+      otherProps,
+      ...shapeProps
+    } = props;
     const restrictedSize = fitSizeToShapeSizeRestrictions(
       datepickerInputShapeRestrictions,
       width,
@@ -33,14 +44,8 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const separatorPadding = 12;
-    const separator1X = restrictedWidth / 3;
-    const separator2X = (2 * restrictedWidth) / 3;
-
-    const { stroke, strokeStyle, fill, borderRadius } = useShapeProps(
-      otherProps,
-      BASIC_SHAPE
-    );
+    const { stroke, fill, textColor, strokeStyle, borderRadius } =
+      useShapeProps(otherProps, INPUT_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -49,40 +54,80 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
       ref
     );
 
+    const iconWidth = 25;
+    const availableWidth = restrictedWidth - iconWidth - 20;
+    const fontSize = Math.min(
+      availableWidth * 0.2,
+      restrictedHeight * 0.35,
+      20
+    );
+    const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
+
+    const calendarIcon = new window.Image();
+    calendarIcon.src = calendarIconSrc;
+
     return (
       <Group {...commonGroupProps} {...shapeProps}>
-        {/* input frame */}
+        {/* External Rectangle */}
         <Rect
           x={0}
           y={0}
           width={restrictedWidth}
-          height={restrictedHeight + 4}
+          height={restrictedHeight}
           cornerRadius={borderRadius}
           stroke={stroke}
-          strokeWidth={2}
           dash={strokeStyle}
+          strokeWidth={2}
           fill={fill}
         />
-        {/* Inverted diagonal spacers */}
-        <Line
-          points={[
-            separator1X + separatorPadding,
-            separatorPadding - 4,
-            separator1X - separatorPadding,
-            10 + restrictedHeight - separatorPadding,
-          ]}
-          stroke={stroke}
-          strokeWidth={2}
+        {/* Background of Date Label */}
+        <Rect
+          x={10}
+          y={-5}
+          width={labelFontSize + 20}
+          height={labelFontSize}
+          cornerRadius={borderRadius}
+          fill="white"
         />
-        <Line
-          points={[
-            separator2X + separatorPadding,
-            separatorPadding - 4,
-            separator2X - separatorPadding,
-            10 + restrictedHeight - separatorPadding,
-          ]}
-          stroke={stroke}
-          strokeWidth={2}
+        {/* Label "Date" */}
+        <Text
+          text="Date"
+          x={13}
+          y={-5}
+          fontSize={labelFontSize}
+          fill={stroke}
+          align="center"
+          color={stroke}
+        />
+        {/* Main Text */}
+        <Text
+          text={text}
+          fill={textColor}
+          x={10}
+          y={(restrictedHeight - fontSize) / 2 + 2}
+          width={availableWidth}
+          fontSize={fontSize}
+          align="left"
+          ellipsis={true}
+          wrap="none"
+        />
+
+        <Text
+          text="Date"
+          x={13}
+          y={20}
+          fontSize={10}
+          fill="red"
+          align="center"
+          color={stroke}
+        />
+        {/* Calendar Icon */}
+        <Image
+          image={calendarIcon}
+          x={restrictedWidth - iconWidth - 5}
+          y={(restrictedHeight - 20) / 2}
+          width={20}
+          height={20}
         />
       </Group>
     );
diff --git a/src/common/components/mock-components/front-components/icon/icon-shape.business.ts b/src/common/components/mock-components/front-components/icon/icon-shape.business.ts
new file mode 100644
index 00000000..9378b3e3
--- /dev/null
+++ b/src/common/components/mock-components/front-components/icon/icon-shape.business.ts
@@ -0,0 +1,33 @@
+import { IconSize } from '@/core/model';
+
+export const loadSvgWithFill = async (url: string, fillColor: string) => {
+  const response = await fetch(url);
+  const svgText = await response.text();
+
+  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
+
+  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
+  const objectURL = URL.createObjectURL(svgBlob);
+
+  const img = new window.Image();
+  img.src = objectURL;
+
+  return img;
+};
+
+export const returnIconSize = (iconSize: IconSize): number[] => {
+  switch (iconSize) {
+    case 'XS':
+      return [25, 25];
+    case 'S':
+      return [50, 50];
+    case 'M':
+      return [100, 100];
+    case 'L':
+      return [125, 125];
+    case 'XL':
+      return [150, 150];
+    default:
+      return [50, 50];
+  }
+};
diff --git a/src/common/components/mock-components/front-components/icon-shape.tsx b/src/common/components/mock-components/front-components/icon/icon-shape.tsx
similarity index 66%
rename from src/common/components/mock-components/front-components/icon-shape.tsx
rename to src/common/components/mock-components/front-components/icon/icon-shape.tsx
index 6e3936e2..f268a9ae 100644
--- a/src/common/components/mock-components/front-components/icon-shape.tsx
+++ b/src/common/components/mock-components/front-components/icon/icon-shape.tsx
@@ -1,18 +1,13 @@
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import {
-  BASE_ICONS_URL,
-  IconSize,
-  ShapeSizeRestrictions,
-  ShapeType,
-} from '@/core/model';
-import { forwardRef } from 'react';
+import { BASE_ICONS_URL, ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { Group, Image } from 'react-konva';
-import useImage from 'use-image';
-import { ShapeProps } from '../shape.model';
+import { ShapeProps } from '../../shape.model';
 import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
 import { IconModal } from '@/pods/properties/components/icon-selector/modal';
 import { useCanvasContext } from '@/core/providers';
-import { useGroupShapeProps } from '../mock-components.utils';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { loadSvgWithFill, returnIconSize } from './icon-shape.business';
 
 const iconShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,
@@ -38,11 +33,13 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
     onSelected,
     iconInfo,
     iconSize,
+    stroke,
     ...shapeProps
   } = props;
   const { openModal } = useModalDialogContext();
   const { selectionInfo } = useCanvasContext();
   const { updateOtherPropsOnSelected } = selectionInfo;
+
   const handleDoubleClick = () => {
     openModal(
       <IconModal
@@ -52,24 +49,6 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
       'Choose Icon'
     );
   };
-  const [image] = useImage(`${BASE_ICONS_URL}${iconInfo.filename}`);
-
-  const returnIconSize = (iconSize: IconSize): number[] => {
-    switch (iconSize) {
-      case 'XS':
-        return [25, 25];
-      case 'S':
-        return [50, 50];
-      case 'M':
-        return [100, 100];
-      case 'L':
-        return [125, 125];
-      case 'XL':
-        return [150, 150];
-      default:
-        return [50, 50];
-    }
-  };
 
   const [iconWidth, iconHeight] = returnIconSize(iconSize);
 
@@ -88,15 +67,32 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+  const imageRef = useRef(null);
+
+  useEffect(() => {
+    if (iconInfo?.filename) {
+      loadSvgWithFill(
+        `${BASE_ICONS_URL}${iconInfo.filename}`,
+        `${stroke}`
+      ).then(img => {
+        setImage(img);
+      });
+    }
+  }, [iconInfo?.filename, stroke]);
+
   return (
     <Group {...commonGroupProps} {...shapeProps} onDblClick={handleDoubleClick}>
-      <Image
-        image={image}
-        x={0}
-        y={0}
-        width={restrictedWidth}
-        height={restrictedHeight}
-      />
+      {image && (
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          ref={imageRef}
+        />
+      )}
     </Group>
   );
 });
diff --git a/src/common/components/mock-components/front-components/icon/index.ts b/src/common/components/mock-components/front-components/icon/index.ts
new file mode 100644
index 00000000..076f313a
--- /dev/null
+++ b/src/common/components/mock-components/front-components/icon/index.ts
@@ -0,0 +1 @@
+export * from './icon-shape';
diff --git a/src/common/components/mock-components/front-components/index.ts b/src/common/components/mock-components/front-components/index.ts
index ae303ff1..f79d76ca 100644
--- a/src/common/components/mock-components/front-components/index.ts
+++ b/src/common/components/mock-components/front-components/index.ts
@@ -7,9 +7,9 @@ export * from './progressbar-shape';
 export * from './listbox';
 export * from './datepickerinput-shape';
 export * from './button-shape';
-export * from './timepickerinput-shape';
+export * from './timepickerinput/timepickerinput-shape';
 export * from './radiobutton-shape';
-export * from './icon-shape';
+export * from './icon';
 export * from './verticalscrollbar-shape';
 export * from './horizontalscrollbar-shape';
 export * from './label-shape';
diff --git a/src/common/components/mock-components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx
index 2c415044..959c66e8 100644
--- a/src/common/components/mock-components/front-components/input-shape.tsx
+++ b/src/common/components/mock-components/front-components/input-shape.tsx
@@ -82,3 +82,33 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     </Group>
   );
 });
+
+/*
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        cornerRadius={borderRadius}
+        stroke={stroke}
+        dash={strokeStyle}
+        strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
+        fill={fill}
+      />
+      <Text
+        x={INPUT_SHAPE.DEFAULT_PADDING}
+        y={INPUT_SHAPE.DEFAULT_PADDING + 1}
+        width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
+        text={text}
+        fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
+        lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
+        fill={textColor}
+        align="left"
+        ellipsis={true}
+        wrap="none"
+      />
+    </Group>
+
+*/
diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
index b3d155ba..f35a775e 100644
--- a/src/common/components/mock-components/front-components/shape.const.ts
+++ b/src/common/components/mock-components/front-components/shape.const.ts
@@ -3,7 +3,7 @@ const DEFAULT_STROKE_COLOR = '#000000';
 const DEFAULT_STROKE_WIDTH = 1;
 const DEFAULT_STROKE_STYLE: number[] = [];
 const DEFAULT_FILL_BACKGROUND = '#ffffff';
-const DEFAULT_FONT_FAMILY = 'Comic Sans MS, Balsamiq Sans, cursive';
+const DEFAULT_FONT_FAMILY = 'Balsamiq Sans, Comic Sans MS, cursive';
 const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_FILL_TEXT = '#000000';
 const DEFAULT_PADDING = 10;
diff --git a/src/common/components/mock-components/front-components/timepickerinput-shape.tsx b/src/common/components/mock-components/front-components/timepickerinput-shape.tsx
deleted file mode 100644
index a4b64adc..00000000
--- a/src/common/components/mock-components/front-components/timepickerinput-shape.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
-import { forwardRef } from 'react';
-import { ShapeProps } from '../shape.model';
-import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { Group, Rect, Text } from 'react-konva';
-import { BASIC_SHAPE } from './shape.const';
-import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { useGroupShapeProps } from '../mock-components.utils';
-
-const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 100,
-  minHeight: 50,
-  maxWidth: -1,
-  maxHeight: 50,
-  defaultWidth: 220,
-  defaultHeight: 50,
-};
-
-const shapeType: ShapeType = 'timepickerinput';
-
-export const getTimepickerInputShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => timepickerInputShapeRestrictions;
-
-export const TimepickerInputShape = forwardRef<any, ShapeProps>(
-  (props, ref) => {
-    const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
-      props;
-    const restrictedSize = fitSizeToShapeSizeRestrictions(
-      timepickerInputShapeRestrictions,
-      width,
-      height
-    );
-    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-
-    const separatorPadding = 3; // Extra padding for spacers
-    const separator1X = restrictedWidth / 3;
-    const separator2X = (2 * restrictedWidth) / 3;
-
-    const { stroke, strokeStyle, fill, borderRadius } = useShapeProps(
-      otherProps,
-      BASIC_SHAPE
-    );
-
-    const commonGroupProps = useGroupShapeProps(
-      props,
-      restrictedSize,
-      shapeType,
-      ref
-    );
-
-    return (
-      <Group {...commonGroupProps} {...shapeProps}>
-        {/* input frame */}
-        <Rect
-          x={0}
-          y={0}
-          width={restrictedWidth}
-          height={restrictedHeight}
-          cornerRadius={borderRadius}
-          stroke={stroke}
-          strokeWidth={2}
-          dash={strokeStyle}
-          fill={fill}
-        />
-
-        {/* Separators : */}
-        <Text
-          x={separator1X - 10}
-          y={restrictedHeight / separatorPadding}
-          text=":"
-          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-          fontSize={20}
-          fill={stroke}
-        />
-        <Text
-          x={separator2X - 10}
-          y={restrictedHeight / separatorPadding}
-          text=":"
-          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-          fontSize={20}
-          fill={stroke}
-        />
-      </Group>
-    );
-  }
-);
diff --git a/src/common/components/mock-components/front-components/timepickerinput/index.ts b/src/common/components/mock-components/front-components/timepickerinput/index.ts
new file mode 100644
index 00000000..b2663481
--- /dev/null
+++ b/src/common/components/mock-components/front-components/timepickerinput/index.ts
@@ -0,0 +1 @@
+export * from './timepickerinput-shape.tsx';
diff --git a/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.business.ts b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.business.ts
new file mode 100644
index 00000000..a257c096
--- /dev/null
+++ b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.business.ts
@@ -0,0 +1,33 @@
+const MAX_DIGITS = 2;
+const MAX_HOURS = '23';
+const MAX_MINUTES = '59';
+const HOUR_MASK = 'hh';
+const MINUTES_MASK = 'mm';
+
+export const splitCSVContent = (csvContent: string): string[] => {
+  const splitedCsvContent = csvContent
+    .trim()
+    .split(/[:|,]/)
+    .map(el => el.trim());
+  return splitedCsvContent;
+};
+
+export const setTime = (csvData: string[]) => {
+  let [hour, minutes] = csvData;
+  if (csvData.length < 2) {
+    return true;
+  }
+  if (csvData[0] !== HOUR_MASK || csvData[1] !== MINUTES_MASK) {
+    if (
+      csvData.length > MAX_DIGITS ||
+      hour.length !== MAX_DIGITS ||
+      hour === '' ||
+      hour > MAX_HOURS ||
+      minutes.length !== MAX_DIGITS ||
+      minutes === '' ||
+      minutes > MAX_MINUTES
+    ) {
+      return true;
+    }
+  }
+};
diff --git a/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
new file mode 100644
index 00000000..a0ec43c8
--- /dev/null
+++ b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
@@ -0,0 +1,148 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text, Image } from 'react-konva';
+import { BASIC_SHAPE } from '../shape.const';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { splitCSVContent, setTime } from './timepickerinput-shape.business';
+
+import clockIconSrc from '/icons/clock.svg';
+
+const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: 50,
+  defaultWidth: 220,
+  defaultHeight: 50,
+};
+
+const shapeType: ShapeType = 'timepickerinput';
+
+export const getTimepickerInputShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => timepickerInputShapeRestrictions;
+
+export const TimepickerInputShape = forwardRef<any, ShapeProps>(
+  (props, ref) => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      id,
+      text,
+      onSelected,
+      otherProps,
+      ...shapeProps
+    } = props;
+
+    const restrictedSize = fitSizeToShapeSizeRestrictions(
+      timepickerInputShapeRestrictions,
+      width,
+      height
+    );
+    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+    const { stroke, strokeStyle, fill, borderRadius } = useShapeProps(
+      otherProps,
+      BASIC_SHAPE
+    );
+
+    const commonGroupProps = useGroupShapeProps(
+      props,
+      restrictedSize,
+      shapeType,
+      ref
+    );
+
+    const csvData = splitCSVContent(text);
+    let isError = setTime(csvData);
+
+    const iconWidth = 25;
+    const availableWidth = restrictedWidth - iconWidth - 20;
+    const fontSize = Math.min(
+      availableWidth * 0.2,
+      restrictedHeight * 0.35,
+      20
+    );
+    const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
+
+    const clockIcon = new window.Image();
+    clockIcon.src = clockIconSrc;
+
+    return (
+      <Group {...commonGroupProps} {...shapeProps}>
+        {/* External Rectangle */}
+        <Rect
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          cornerRadius={borderRadius}
+          stroke={stroke}
+          dash={strokeStyle}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+          fill={fill}
+        />
+        {/* Background of Time Label */}
+        <Rect
+          x={10}
+          y={-5}
+          width={labelFontSize + 20}
+          height={labelFontSize}
+          cornerRadius={borderRadius}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+          fill="white"
+        />
+        {/* Label "Time" */}
+        <Text
+          text="Time"
+          x={13}
+          y={-5}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE - 4}
+          fill={stroke}
+          align="center"
+          color={stroke}
+        />
+        {/* Main Text */}
+        <Text
+          text={text}
+          x={10}
+          y={(restrictedHeight - fontSize) / 2 + 2}
+          width={availableWidth}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
+          lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
+          align="left"
+          ellipsis={true}
+          wrap="none"
+        />
+        {/* Error Text */}
+        {isError && (
+          <Text
+            text="Error, valid format hh:mm"
+            x={10}
+            y={35}
+            fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+            fontSize={10}
+            fill="red"
+            align="center"
+            color={stroke}
+          />
+        )}
+
+        {/* Clock Icon */}
+        <Image
+          image={clockIcon}
+          x={restrictedWidth - iconWidth - 5}
+          y={(restrictedHeight - 20) / 2}
+          width={20}
+          height={20}
+        />
+      </Group>
+    );
+  }
+);
diff --git a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
index 524d8937..a40eca77 100644
--- a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
+++ b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
@@ -21,7 +21,7 @@ export const getBrowserWindowShapeSizeRestrictions =
 const shapeType: ShapeType = 'browser';
 
 export const BrowserWindowShape = forwardRef<any, ShapeProps>((props, ref) => {
-  const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+  const { x, y, width, height, id, onSelected, text, ...shapeProps } = props;
   const restrictedSize = fitSizeToShapeSizeRestrictions(
     browserWindowShapeSizeRestrictions,
     width,
@@ -114,9 +114,9 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>((props, ref) => {
       <Text
         x={margin * 4}
         y={margin * 3.5 + titleBarHeight}
-        width={restrictedWidth - 50}
-        height={restrictedHeight - 50}
-        text="https://example.com"
+        width={restrictedWidth - margin * 7}
+        height={urlBarHeight}
+        text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={12}
         fill="black"
diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
index f7c516f6..38d35911 100644
--- a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
@@ -8,7 +8,7 @@ import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const heading1SizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 40,
   minHeight: 20,
   maxWidth: -1,
   maxHeight: -1,
diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
index aeecde05..52359915 100644
--- a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
@@ -8,7 +8,7 @@ import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const heading2SizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 40,
   minHeight: 20,
   maxWidth: -1,
   maxHeight: -1,
diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
index 6a068cbf..42b994bf 100644
--- a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
@@ -8,7 +8,7 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const heading3SizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 40,
   minHeight: 20,
   maxWidth: -1,
   maxHeight: -1,
diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
index 980dc489..e1c39371 100644
--- a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
@@ -8,7 +8,7 @@ import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const normaltextSizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 40,
   minHeight: 20,
   maxWidth: -1,
   maxHeight: 30,
diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
index a430b2dc..00824939 100644
--- a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
@@ -8,12 +8,12 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const paragraphSizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 300,
-  minHeight: 100,
+  minWidth: 200,
+  minHeight: 70,
   maxWidth: -1,
   maxHeight: -1,
   defaultWidth: 420,
-  defaultHeight: 125,
+  defaultHeight: 130,
 };
 
 export const getParagraphSizeRestrictions = (): ShapeSizeRestrictions =>
@@ -61,9 +61,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontSize={14}
         fill={textColor}
         align="left"
-        verticalAlign="middle"
         ellipsis={true}
-        wrap="none"
       />
     </Group>
   );
diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
index 4d2da7bd..aa392a5f 100644
--- a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
+++ b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
@@ -8,7 +8,7 @@ import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const smalltextSizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 40,
   minHeight: 20,
   maxWidth: -1,
   maxHeight: -1,
diff --git a/src/core/local-disk/shapes-to-document.mapper.ts b/src/core/local-disk/shapes-to-document.mapper.ts
index 2d01dbbe..e32bbe69 100644
--- a/src/core/local-disk/shapes-to-document.mapper.ts
+++ b/src/core/local-disk/shapes-to-document.mapper.ts
@@ -1,36 +1,46 @@
 import { ShapeModel } from '../model';
 import { DocumentModel } from '../providers/canvas/canvas.model';
-import { QuickMockFileContract, Page } from './local-disk.model';
+import { QuickMockFileContract } from './local-disk.model';
 
 export const mapFromShapesArrayToQuickMockFileDocument = (
-  shapes: ShapeModel[]
+  fullDocument: DocumentModel
 ): QuickMockFileContract => {
-  const pages: Page[] = shapes.reduce((acc, shape) => {
-    /*
-     * TODO: Add the correct id, name and version values.
-     */
-    const newPage: Page = {
-      id: '1',
-      name: 'default',
-      shapes: [{ ...shape }],
-    };
-
-    return [...acc, newPage];
-  }, [] as Page[]);
-
+  // TODO: Serialize the activePageIndex?
   return {
-    version: '0.1',
-    pages,
+    version: '0.2',
+    pages: fullDocument.pages,
   };
 };
 
 export const mapFromQuickMockFileDocumentToApplicationDocument = (
   fileDocument: QuickMockFileContract
 ): DocumentModel => {
-  const shapes: ShapeModel[] = fileDocument.pages.reduce((acc, page) => {
-    return [...acc, ...page.shapes];
-  }, [] as ShapeModel[]);
   return {
-    shapes,
+    activePageIndex: 0,
+    pages: fileDocument.pages,
+  };
+};
+
+// Example function to handle version 0.1 parsing
+export const mapFromQuickMockFileDocumentToApplicationDocumentV0_1 = (
+  fileDocument: QuickMockFileContract
+): DocumentModel => {
+  // Combine all shapes into a single page
+  const combinedShapes: ShapeModel[] = fileDocument.pages.reduce<ShapeModel[]>(
+    (acc: ShapeModel[], page) => {
+      return acc.concat(page.shapes);
+    },
+    []
+  );
+
+  return {
+    activePageIndex: 0,
+    pages: [
+      {
+        id: '1',
+        name: 'default',
+        shapes: combinedShapes,
+      },
+    ],
   };
 };
diff --git a/src/core/local-disk/shapes-to.document.mapper.spec.ts b/src/core/local-disk/shapes-to.document.mapper.spec.ts
index f5c943cb..f5b713af 100644
--- a/src/core/local-disk/shapes-to.document.mapper.spec.ts
+++ b/src/core/local-disk/shapes-to.document.mapper.spec.ts
@@ -1,6 +1,7 @@
 import {
   mapFromShapesArrayToQuickMockFileDocument,
   mapFromQuickMockFileDocumentToApplicationDocument,
+  mapFromQuickMockFileDocumentToApplicationDocumentV0_1,
 } from './shapes-to-document.mapper';
 import { ShapeModel } from '../model';
 import { QuickMockFileContract } from './local-disk.model';
@@ -8,20 +9,6 @@ import { DocumentModel } from '../providers/canvas/canvas.model';
 
 describe('shapes to document mapper', () => {
   describe('mapFromShapesArrayToQuickMockFileDocument', () => {
-    it('Should return a ShapeModel with empty pages', () => {
-      // Arrange
-      const shapes: ShapeModel[] = [];
-      const expectedResult: QuickMockFileContract = {
-        version: '0.1',
-        pages: [],
-      };
-      // Act
-      const result = mapFromShapesArrayToQuickMockFileDocument(shapes);
-
-      // Assert
-      expect(result).toEqual(expectedResult);
-    });
-
     it('Should return a ShapeModel with one pages and shapes', () => {
       // Arrange
       const shapes: ShapeModel[] = [
@@ -36,29 +23,30 @@ describe('shapes to document mapper', () => {
           typeOfTransformer: ['rotate'],
         },
       ];
+
+      const document: DocumentModel = {
+        activePageIndex: 0,
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: shapes,
+          },
+        ],
+      };
+
       const expectedResult: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
             name: 'default',
-            shapes: [
-              {
-                id: '1',
-                x: 0,
-                y: 0,
-                width: 100,
-                height: 100,
-                type: 'rectangle',
-                allowsInlineEdition: false,
-                typeOfTransformer: ['rotate'],
-              },
-            ],
+            shapes: shapes,
           },
         ],
       };
       // Act
-      const result = mapFromShapesArrayToQuickMockFileDocument(shapes);
+      const result = mapFromShapesArrayToQuickMockFileDocument(document);
 
       // Assert
       expect(result).toEqual(expectedResult);
@@ -88,45 +76,31 @@ describe('shapes to document mapper', () => {
           typeOfTransformer: ['rotate'],
         },
       ];
-      const expectedResult: QuickMockFileContract = {
-        version: '0.1',
+
+      const document: DocumentModel = {
+        activePageIndex: 0,
         pages: [
           {
             id: '1',
             name: 'default',
-            shapes: [
-              {
-                id: '1',
-                x: 0,
-                y: 0,
-                width: 100,
-                height: 100,
-                type: 'rectangle',
-                allowsInlineEdition: false,
-                typeOfTransformer: ['rotate'],
-              },
-            ],
+            shapes: shapes,
           },
+        ],
+      };
+
+      const expectedResult: QuickMockFileContract = {
+        version: '0.2',
+        pages: [
           {
             id: '1',
             name: 'default',
-            shapes: [
-              {
-                id: '2',
-                x: 0,
-                y: 0,
-                width: 100,
-                height: 100,
-                type: 'circle',
-                allowsInlineEdition: true,
-                typeOfTransformer: ['rotate'],
-              },
-            ],
+            shapes: shapes,
           },
         ],
       };
+
       // Act
-      const result = mapFromShapesArrayToQuickMockFileDocument(shapes);
+      const result = mapFromShapesArrayToQuickMockFileDocument(document);
 
       // Assert
       expect(result).toEqual(expectedResult);
@@ -137,11 +111,25 @@ describe('shapes to document mapper', () => {
     it('Should return a document model with a empty shapes array when we feed a empty pages array', () => {
       //arrange
       const fileDocument: QuickMockFileContract = {
-        version: '0.1',
-        pages: [],
+        version: '0.2',
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: [],
+          },
+        ],
       };
+
       const expectedResult: DocumentModel = {
-        shapes: [],
+        activePageIndex: 0,
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: [],
+          },
+        ],
       };
       //act
       const result =
@@ -153,7 +141,7 @@ describe('shapes to document mapper', () => {
     it('Should return a document model with a empty shapes array when we feed a file document with a one page but with empty shapes', () => {
       //arrange
       const fileDocument: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
@@ -162,9 +150,18 @@ describe('shapes to document mapper', () => {
           },
         ],
       };
+
       const expectedResult: DocumentModel = {
-        shapes: [],
+        activePageIndex: 0,
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: [],
+          },
+        ],
       };
+
       //act
       const result =
         mapFromQuickMockFileDocumentToApplicationDocument(fileDocument);
@@ -195,20 +192,29 @@ describe('shapes to document mapper', () => {
           },
         ],
       };
+
       const expectedResult: DocumentModel = {
-        shapes: [
+        activePageIndex: 0,
+        pages: [
           {
             id: '1',
-            type: 'rectangle',
-            x: 0,
-            y: 0,
-            width: 100,
-            height: 100,
-            allowsInlineEdition: false,
-            typeOfTransformer: ['rotate'],
+            name: 'default',
+            shapes: [
+              {
+                id: '1',
+                type: 'rectangle',
+                x: 0,
+                y: 0,
+                width: 100,
+                height: 100,
+                allowsInlineEdition: false,
+                typeOfTransformer: ['rotate'],
+              },
+            ],
           },
         ],
       };
+
       //act
       const result =
         mapFromQuickMockFileDocumentToApplicationDocument(fileDocument);
@@ -218,72 +224,131 @@ describe('shapes to document mapper', () => {
 
     it('Should return a document model with shapes when we feed a file document with two pages and shapes', () => {
       //arrange
+      const shapespageA: ShapeModel[] = [
+        {
+          id: '1',
+          type: 'rectangle',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: false,
+          typeOfTransformer: ['rotate'],
+        },
+      ];
+
+      const shapesPageB: ShapeModel[] = [
+        {
+          id: '3',
+          type: 'browser',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: true,
+          typeOfTransformer: [' rotate'],
+        },
+      ];
+
       const fileDocument: QuickMockFileContract = {
         version: '0.1',
         pages: [
           {
             id: '1',
             name: 'default',
-            shapes: [
-              {
-                id: '1',
-                type: 'rectangle',
-                x: 0,
-                y: 0,
-                width: 100,
-                height: 100,
-                allowsInlineEdition: false,
-                typeOfTransformer: ['rotate'],
-              },
-            ],
+            shapes: shapespageA,
           },
           {
             id: '2',
             name: 'default',
-            shapes: [
-              {
-                id: '3',
-                type: 'browser',
-                x: 0,
-                y: 0,
-                width: 100,
-                height: 100,
-                allowsInlineEdition: true,
-                typeOfTransformer: [' rotate'],
-              },
-            ],
+            shapes: shapesPageB,
           },
         ],
       };
+
       const expectedResult: DocumentModel = {
-        shapes: [
+        activePageIndex: 0,
+        pages: [
           {
             id: '1',
-            type: 'rectangle',
-            x: 0,
-            y: 0,
-            width: 100,
-            height: 100,
-            allowsInlineEdition: false,
-            typeOfTransformer: ['rotate'],
+            name: 'default',
+            shapes: shapespageA,
           },
           {
-            id: '3',
-            type: 'browser',
-            x: 0,
-            y: 0,
-            width: 100,
-            height: 100,
-            allowsInlineEdition: true,
-            typeOfTransformer: [' rotate'],
+            id: '2',
+            name: 'default',
+            shapes: shapesPageB,
           },
         ],
       };
+
       //act
       const result =
         mapFromQuickMockFileDocumentToApplicationDocument(fileDocument);
       //assert
       expect(result).toEqual(expectedResult);
     });
+
+    it('Should return a document model with shapes in one page when we feed a file document from version 0.1', () => {
+      //arrange
+      const shapespageA: ShapeModel[] = [
+        {
+          id: '1',
+          type: 'rectangle',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: false,
+          typeOfTransformer: ['rotate'],
+        },
+      ];
+
+      const shapesPageB: ShapeModel[] = [
+        {
+          id: '3',
+          type: 'browser',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: true,
+          typeOfTransformer: [' rotate'],
+        },
+      ];
+
+      const fileDocument: QuickMockFileContract = {
+        version: '0.1',
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: shapespageA,
+          },
+          {
+            id: '2',
+            name: 'default',
+            shapes: shapesPageB,
+          },
+        ],
+      };
+
+      const expectedResult: DocumentModel = {
+        activePageIndex: 0,
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: shapespageA.concat(shapesPageB),
+          },
+        ],
+      };
+
+      //act
+      const result =
+        mapFromQuickMockFileDocumentToApplicationDocumentV0_1(fileDocument);
+      //assert
+      expect(result).toEqual(expectedResult);
+    });
   });
 });
diff --git a/src/core/local-disk/use-local-disk.hook.ts b/src/core/local-disk/use-local-disk.hook.ts
index eea12115..1d5bd4ea 100644
--- a/src/core/local-disk/use-local-disk.hook.ts
+++ b/src/core/local-disk/use-local-disk.hook.ts
@@ -3,6 +3,7 @@ import { useCanvasContext } from '../providers';
 import {
   mapFromShapesArrayToQuickMockFileDocument,
   mapFromQuickMockFileDocumentToApplicationDocument,
+  mapFromQuickMockFileDocumentToApplicationDocumentV0_1,
 } from './shapes-to-document.mapper';
 import { fileInput, OnFileSelectedCallback } from '@/common/file-input';
 import { QuickMockFileContract } from './local-disk.model';
@@ -12,10 +13,12 @@ const DEFAULT_FILE_EXTENSION = 'qm';
 const DEFAULT_EXTENSION_DESCRIPTION = 'quick mock';
 
 export const useLocalDisk = () => {
-  const { shapes, loadDocument } = useCanvasContext();
+  const { fullDocument, loadDocument, fileName, setFileName } =
+    useCanvasContext();
 
   const serializeShapes = (): string => {
-    const quickMockDocument = mapFromShapesArrayToQuickMockFileDocument(shapes);
+    const quickMockDocument =
+      mapFromShapesArrayToQuickMockFileDocument(fullDocument);
     return JSON.stringify(quickMockDocument);
   };
 
@@ -38,11 +41,11 @@ export const useLocalDisk = () => {
       },
       content
     );
-    console.log('saveFilename', savedFilename);
+    setFileName(savedFilename);
   };
 
   const handleSave = () => {
-    const filename = DEFAULT_FILE_NAME;
+    const filename = fileName !== '' ? fileName : DEFAULT_FILE_NAME;
     const content = serializeShapes();
     if ((window as any).showDirectoryPicker === undefined) {
       OldBrowsersDownloadFile(filename, content);
@@ -55,9 +58,18 @@ export const useLocalDisk = () => {
     reader.onload = () => {
       const content = reader.result as string;
       const parseData: QuickMockFileContract = JSON.parse(content);
-      const appDocument =
-        mapFromQuickMockFileDocumentToApplicationDocument(parseData);
-      loadDocument(appDocument);
+
+      if (parseData.version === '0.1') {
+        // Handle version 0.1 parsing
+        const appDocument =
+          mapFromQuickMockFileDocumentToApplicationDocumentV0_1(parseData);
+        loadDocument(appDocument);
+      } else {
+        // Handle other versions
+        const appDocument =
+          mapFromQuickMockFileDocumentToApplicationDocument(parseData);
+        loadDocument(appDocument);
+      }
     };
     reader.readAsText(file);
   };
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index cebb04e3..2e68160b 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -32,7 +32,8 @@ export type ShapeType =
   | 'audioPlayer'
   | 'diamond'
   | 'icon'
-  | 'line'
+  | 'horizontalLine'
+  | 'verticalLine'
   | 'accordion'
   | 'pie'
   | 'horizontal-menu'
@@ -90,7 +91,8 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   videoPlayer: 'Video Player',
   audioPlayer: 'Audio Player',
   diamond: 'Diamond',
-  line: 'Line',
+  horizontalLine: 'Horizontal Line',
+  verticalLine: 'Vertical Line',
   accordion: 'Accordion',
   pie: 'Pie',
   breadcrumb: 'Breadcrumb',
diff --git a/src/core/providers/canvas/canvas.business.ts b/src/core/providers/canvas/canvas.business.ts
index 2458e7db..be5a6b9e 100644
--- a/src/core/providers/canvas/canvas.business.ts
+++ b/src/core/providers/canvas/canvas.business.ts
@@ -1,4 +1,5 @@
 import { ShapeModel } from '@/core/model';
+import { DocumentModel } from './canvas.model';
 
 export const removeShapesFromList = (
   shapeIds: string[],
@@ -10,3 +11,18 @@ export const removeShapesFromList = (
 
   return shapeCollection.filter(shape => !shapeIds.includes(shape.id));
 };
+
+export const isPageIndexValid = (document: DocumentModel) => {
+  return (
+    document.activePageIndex !== -1 &&
+    document.activePageIndex < document.pages.length
+  );
+};
+
+export const getActivePageShapes = (document: DocumentModel) => {
+  if (!isPageIndexValid(document)) {
+    return [];
+  }
+
+  return document.pages[document.activePageIndex].shapes;
+};
diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts
index 844ab71d..0337290d 100644
--- a/src/core/providers/canvas/canvas.model.ts
+++ b/src/core/providers/canvas/canvas.model.ts
@@ -11,6 +11,28 @@ import { Node, NodeConfig } from 'konva/lib/Node';
 
 export type ZIndexAction = 'top' | 'bottom' | 'up' | 'down';
 
+export interface Page {
+  id: string;
+  name: string;
+  shapes: ShapeModel[];
+}
+
+export interface DocumentModel {
+  pages: Page[];
+  activePageIndex: number;
+}
+
+export const createDefaultDocumentModel = (): DocumentModel => ({
+  activePageIndex: 0,
+  pages: [
+    {
+      id: '1',
+      name: 'Page 1',
+      shapes: [],
+    },
+  ],
+});
+
 export interface SelectionInfo {
   transformerRef: React.RefObject<Konva.Transformer>;
   shapeRefs: React.MutableRefObject<ShapeRefs>;
@@ -24,6 +46,7 @@ export interface SelectionInfo {
       | Konva.KonvaEventObject<MouseEvent>
       | Konva.KonvaEventObject<TouchEvent>
   ) => void;
+  clearSelection: () => void;
   selectedShapesRefs: React.MutableRefObject<Node<NodeConfig>[] | null>;
   selectedShapesIds: string[];
   selectedShapeType: ShapeType | null;
@@ -40,7 +63,7 @@ export interface SelectionInfo {
 export interface CanvasContextModel {
   shapes: ShapeModel[];
   scale: number;
-  clearCanvas: () => void;
+  createNewFullDocument: () => void;
   setScale: React.Dispatch<React.SetStateAction<number>>;
   addNewShape: (
     type: ShapeType,
@@ -69,12 +92,16 @@ export interface CanvasContextModel {
   loadDocument: (document: DocumentModel) => void;
   isInlineEditing: boolean;
   setIsInlineEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  fileName: string;
+  setFileName: (fileName: string) => void;
+  fullDocument: DocumentModel;
+  addNewPage: () => void;
+  duplicatePage: (pageIndex: number) => void;
+  setActivePage: (pageId: string) => void;
+  deletePage: (pageIndex: number) => void;
+  editPageTitle: (pageIndex: number, newName: string) => void;
+  isThumbnailContextMenuVisible: boolean;
+  setIsThumbnailContextMenuVisible: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
 }
-
-export interface DocumentModel {
-  shapes: ShapeModel[];
-}
-
-export const createDefaultDocumentModel = (): DocumentModel => ({
-  shapes: [],
-});
diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
index dcfa6c4c..8e27e500 100644
--- a/src/core/providers/canvas/canvas.provider.tsx
+++ b/src/core/providers/canvas/canvas.provider.tsx
@@ -8,8 +8,9 @@ import { useStateWithInterceptor } from './canvas.hook';
 import { createDefaultDocumentModel, DocumentModel } from './canvas.model';
 import { v4 as uuidv4 } from 'uuid';
 import Konva from 'konva';
-import { removeShapesFromList } from './canvas.business';
+import { isPageIndexValid, removeShapesFromList } from './canvas.business';
 import { useClipboard } from './use-clipboard.hook';
+import { produce } from 'immer';
 
 interface Props {
   children: React.ReactNode;
@@ -21,6 +22,9 @@ export const CanvasProvider: React.FC<Props> = props => {
   const [scale, setScale] = React.useState(1);
   const stageRef = React.useRef<Konva.Stage>(null);
   const [isInlineEditing, setIsInlineEditing] = React.useState(false);
+  const [fileName, setFileName] = React.useState<string>('');
+  const [isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible] =
+    React.useState(false);
 
   const {
     addSnapshot,
@@ -39,16 +43,92 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const selectionInfo = useSelection(document, setDocument);
 
+  const addNewPage = () => {
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages.push({
+          id: uuidv4(),
+          name: `Page ${draft.pages.length + 1}`,
+          shapes: [],
+        });
+      })
+    );
+  };
+
+  const duplicatePage = (pageIndex: number) => {
+    const newShapes: ShapeModel[] = document.pages[pageIndex].shapes.map(
+      shape => {
+        const newShape: ShapeModel = { ...shape };
+        newShape.id = uuidv4();
+        return newShape;
+      }
+    );
+
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        const newPage = {
+          id: uuidv4(),
+          name: `${document.pages[pageIndex].name} - copy`,
+          shapes: newShapes,
+        };
+        draft.pages.push(newPage);
+        setActivePage(newPage.id);
+      })
+    );
+  };
+
+  const deletePage = (pageIndex: number) => {
+    const newActivePageId =
+      pageIndex < document.pages.length - 1
+        ? document.pages[pageIndex + 1].id // If it's not the last page, select the next one
+        : document.pages[pageIndex - 1].id; // Otherwise, select the previous one
+
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages = draft.pages.filter(
+          currentPage => document.pages[pageIndex].id !== currentPage.id
+        );
+      })
+    );
+
+    setActivePage(newActivePageId);
+  };
+
+  const setActivePage = (pageId: string) => {
+    selectionInfo.clearSelection();
+    selectionInfo.shapeRefs.current = {};
+
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        const pageIndex = draft.pages.findIndex(page => page.id === pageId);
+        if (pageIndex !== -1) {
+          draft.activePageIndex = pageIndex;
+        }
+      })
+    );
+  };
+
+  const editPageTitle = (pageIndex: number, newName: string) => {
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages[pageIndex].name = newName;
+      })
+    );
+  };
+
   const pasteShapes = (shapes: ShapeModel[]) => {
     const newShapes: ShapeModel[] = shapes.map(shape => {
       shape.id = uuidv4();
       return shape;
     });
 
-    setDocument(prevDocument => ({
-      ...prevDocument,
-      shapes: [...prevDocument.shapes, ...newShapes],
-    }));
+    if (isPageIndexValid(document)) {
+      setDocument(lastDocument =>
+        produce(lastDocument, draft => {
+          draft.pages[lastDocument.activePageIndex].shapes.push(...newShapes);
+        })
+      );
+    }
 
     // Just select the new pasted shapes
     // need to wait for the shapes to be rendered (previous set document is async)
@@ -70,20 +150,28 @@ export const CanvasProvider: React.FC<Props> = props => {
   };
 
   const { copyShapeToClipboard, pasteShapeFromClipboard, canCopy, canPaste } =
-    useClipboard(pasteShapes, document.shapes, selectionInfo);
+    useClipboard(
+      pasteShapes,
+      document.pages[document.activePageIndex].shapes,
+      selectionInfo
+    );
 
-  const clearCanvas = () => {
-    setDocument({ shapes: [] });
+  const createNewFullDocument = () => {
+    setDocument(createDefaultDocumentModel());
   };
 
   const deleteSelectedShapes = () => {
-    setDocument(prevDocument => ({
-      ...prevDocument,
-      shapes: removeShapesFromList(
-        selectionInfo.selectedShapesIds,
-        prevDocument.shapes
-      ),
-    }));
+    if (isPageIndexValid(document)) {
+      setDocument(lastDocument =>
+        produce(lastDocument, draft => {
+          draft.pages[lastDocument.activePageIndex].shapes =
+            removeShapesFromList(
+              selectionInfo.selectedShapesIds,
+              draft.pages[lastDocument.activePageIndex].shapes
+            );
+        })
+      );
+    }
   };
 
   // TODO: instenad of x,y use Coord and reduce the number of arguments
@@ -93,14 +181,17 @@ export const CanvasProvider: React.FC<Props> = props => {
     y: number,
     otherProps?: OtherProps
   ) => {
+    if (!isPageIndexValid(document)) {
+      return '';
+    }
+
     const newShape = createShape({ x, y }, type, otherProps);
 
-    setDocument(({ shapes }) => {
-      const newShapes = [...shapes, newShape];
-      return {
-        shapes: newShapes,
-      };
-    });
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages[lastDocument.activePageIndex].shapes.push(newShape);
+      })
+    );
 
     return newShape.id;
   };
@@ -111,27 +202,43 @@ export const CanvasProvider: React.FC<Props> = props => {
     size: Size,
     skipHistory: boolean = false
   ) => {
+    if (!isPageIndexValid(document)) {
+      return;
+    }
+
     if (skipHistory) {
-      setShapesSkipHistory(({ shapes }) => ({
-        shapes: shapes.map(shape =>
-          shape.id === id ? { ...shape, ...position, ...size } : shape
-        ),
-      }));
+      setShapesSkipHistory(fullDocument => {
+        return produce(fullDocument, draft => {
+          draft.pages[document.activePageIndex].shapes = draft.pages[
+            document.activePageIndex
+          ].shapes.map(shape =>
+            shape.id === id ? { ...shape, ...position, ...size } : shape
+          );
+        });
+      });
     } else {
-      setDocument(({ shapes }) => ({
-        shapes: shapes.map(shape =>
-          shape.id === id ? { ...shape, ...position, ...size } : shape
-        ),
-      }));
+      setDocument(fullDocument => {
+        return produce(fullDocument, draft => {
+          draft.pages[document.activePageIndex].shapes = draft.pages[
+            document.activePageIndex
+          ].shapes.map(shape =>
+            shape.id === id ? { ...shape, ...position, ...size } : shape
+          );
+        });
+      });
     }
   };
 
   const updateShapePosition = (id: string, { x, y }: Coord) => {
-    setDocument(({ shapes }) => ({
-      shapes: shapes.map(shape =>
-        shape.id === id ? { ...shape, x, y } : shape
-      ),
-    }));
+    if (isPageIndexValid(document)) {
+      setDocument(fullDocument => {
+        return produce(fullDocument, draft => {
+          draft.pages[document.activePageIndex].shapes = draft.pages[
+            document.activePageIndex
+          ].shapes.map(shape => (shape.id === id ? { ...shape, x, y } : shape));
+        });
+      });
+    }
   };
 
   const doUndo = () => {
@@ -163,10 +270,10 @@ export const CanvasProvider: React.FC<Props> = props => {
   return (
     <CanvasContext.Provider
       value={{
-        shapes: document.shapes,
+        shapes: document.pages[document.activePageIndex].shapes ?? [],
         scale,
         setScale,
-        clearCanvas,
+        createNewFullDocument,
         selectionInfo,
         addNewShape,
         updateShapeSizeAndPosition,
@@ -184,6 +291,16 @@ export const CanvasProvider: React.FC<Props> = props => {
         loadDocument,
         isInlineEditing,
         setIsInlineEditing,
+        fileName,
+        setFileName,
+        fullDocument: document,
+        addNewPage,
+        duplicatePage,
+        setActivePage,
+        deletePage,
+        editPageTitle,
+        isThumbnailContextMenuVisible,
+        setIsThumbnailContextMenuVisible,
       }}
     >
       {children}
diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts
index e8c491c3..e5ca7ac9 100644
--- a/src/core/providers/canvas/use-selection.hook.ts
+++ b/src/core/providers/canvas/use-selection.hook.ts
@@ -3,6 +3,8 @@ import Konva from 'konva';
 import { OtherProps, ShapeModel, ShapeRefs, ShapeType } from '@/core/model';
 import { DocumentModel, SelectionInfo, ZIndexAction } from './canvas.model';
 import { performZIndexAction } from './zindex.util';
+import { getActivePageShapes, isPageIndexValid } from './canvas.business';
+import { produce } from 'immer';
 
 export const useSelection = (
   document: DocumentModel,
@@ -28,7 +30,11 @@ export const useSelection = (
 
   // Remove unused shapes and reset selectedShapeId if it no longer exists
   useEffect(() => {
-    const shapes = document.shapes;
+    if (!isPageIndexValid(document)) {
+      return;
+    }
+
+    const shapes = getActivePageShapes(document);
     const currentIds = shapes.map(shape => shape.id);
 
     // 1. First cleanup Refs, let's get the list of shape and if there are any
@@ -50,7 +56,7 @@ export const useSelection = (
         setSelectedShapeType(null);
       }
     }
-  }, [document.shapes, selectedShapesIds]);
+  }, [document.pages, selectedShapesIds]);
 
   const isDeselectSingleItem = (arrayIds: string[]) => {
     return (
@@ -81,11 +87,17 @@ export const useSelection = (
     type: ShapeType,
     isUserDoingMultipleSelection: boolean
   ) => {
+    // When chaging active pages, the refs are not yet updated
+    // check if this is something temporary or final solution
+    if (Object.keys(shapeRefs.current).length === 0) {
+      return;
+    }
+
     // I want to know if the ids is string or array
     const arrayIds = typeof ids === 'string' ? [ids] : ids;
 
     if (!isUserDoingMultipleSelection) {
-      // No multiple selectio, just replace selection with current selected item(s)
+      // No multiple selection, just replace selection with current selected item(s)
       selectedShapesRefs.current = arrayIds.map(
         id => shapeRefs.current[id].current
       );
@@ -113,41 +125,55 @@ export const useSelection = (
     setSelectedShapeType(type);
   };
 
+  const clearSelection = () => {
+    transformerRef.current?.nodes([]);
+    selectedShapesRefs.current = [];
+    setSelectedShapesIds([]);
+    setSelectedShapeType(null);
+  };
+
   const handleClearSelection = (
     mouseEvent?:
       | Konva.KonvaEventObject<MouseEvent>
       | Konva.KonvaEventObject<TouchEvent>
   ) => {
     if (!mouseEvent || mouseEvent.target === mouseEvent.target.getStage()) {
-      transformerRef.current?.nodes([]);
-      selectedShapesRefs.current = [];
-      setSelectedShapesIds([]);
-      setSelectedShapeType(null);
+      clearSelection();
     }
   };
 
   const setZIndexOnSelected = (action: ZIndexAction) => {
-    setDocument(prevDocument => ({
-      shapes: performZIndexAction(
-        selectedShapesIds,
-        action,
-        prevDocument.shapes
-      ),
-    }));
+    if (!isPageIndexValid(document)) return;
+
+    setDocument(prevDocument =>
+      produce(prevDocument, draft => {
+        draft.pages[prevDocument.activePageIndex].shapes = performZIndexAction(
+          selectedShapesIds,
+          action,
+          getActivePageShapes(prevDocument)
+        );
+      })
+    );
   };
 
   const updateTextOnSelected = (text: string) => {
+    if (!isPageIndexValid(document)) return;
+
     // Only when selection is one
     if (selectedShapesIds.length !== 1) {
       return;
     }
 
     const selectedShapeId = selectedShapesIds[0];
-    setDocument(prevDocument => ({
-      shapes: prevDocument.shapes.map(shape =>
-        shape.id === selectedShapeId ? { ...shape, text } : shape
-      ),
-    }));
+    setDocument(prevDocument =>
+      produce(prevDocument, draft => {
+        draft.pages[prevDocument.activePageIndex].shapes = draft.pages[
+          prevDocument.activePageIndex
+        ].shapes.map(shape =>
+          shape.id === selectedShapeId ? { ...shape, text } : shape
+        );
+      })
+    );
   };
 
   // TODO: Rather implement this using immmer
@@ -156,6 +182,8 @@ export const useSelection = (
     key: K,
     value: OtherProps[K]
   ) => {
+    if (!isPageIndexValid(document)) return;
+
     // TODO: Right now applying this only to single selection
     // in the future we could apply to all selected shapes
     // BUT, we have to show only common shapes (pain in the neck)
@@ -165,13 +193,18 @@ export const useSelection = (
     }
 
     const selectedShapeId = selectedShapesIds[0];
-    setDocument(prevDocument => ({
-      shapes: prevDocument.shapes.map(shape =>
-        shape.id === selectedShapeId
-          ? { ...shape, otherProps: { ...shape.otherProps, [key]: value } }
-          : shape
-      ),
-    }));
+
+    setDocument(prevDocument =>
+      produce(prevDocument, draft => {
+        draft.pages[prevDocument.activePageIndex].shapes = draft.pages[
+          prevDocument.activePageIndex
+        ].shapes.map(shape =>
+          shape.id === selectedShapeId
+            ? { ...shape, otherProps: { ...shape.otherProps, [key]: value } }
+            : shape
+        );
+      })
+    );
   };
 
   // Added index, right now we got multiple selection
@@ -187,7 +220,9 @@ export const useSelection = (
 
     const selectedShapeId = selectedShapesIds[index];
 
-    return document.shapes.find(shape => shape.id === selectedShapeId);
+    return getActivePageShapes(document).find(
+      shape => shape.id === selectedShapeId
+    );
   };
 
   return {
@@ -195,6 +230,7 @@ export const useSelection = (
     shapeRefs,
     handleSelected,
     handleClearSelection,
+    clearSelection,
     selectedShapesRefs,
     selectedShapesIds,
     selectedShapeType,
diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
index 9363dd00..930989ff 100644
--- a/src/pods/canvas/canvas.pod.tsx
+++ b/src/pods/canvas/canvas.pod.tsx
@@ -132,6 +132,7 @@ export const CanvasPod = () => {
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
+        id="konva-stage" // data-id did not work for some reason
       >
         <Layer ref={layerRef}>
           {
diff --git a/src/pods/canvas/model/inline-editable.model.ts b/src/pods/canvas/model/inline-editable.model.ts
index 7db53fcf..53360f45 100644
--- a/src/pods/canvas/model/inline-editable.model.ts
+++ b/src/pods/canvas/model/inline-editable.model.ts
@@ -31,6 +31,9 @@ const inlineEditableShapes = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'tooltip',
+  'timepickerinput',
+  'datepickerinput',
+  'browser',
 ]);
 
 // Check if a shape type allows inline editing
@@ -66,6 +69,9 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'link',
+  'timepickerinput',
+  'datepickerinput',
+  'browser',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -98,6 +104,9 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
   link: 'link',
+  timepickerinput: 'hh:mm',
+  datepickerinput: new Date().toLocaleDateString(),
+  browser: 'https://example.com',
 };
 
 export const generateDefaultTextValue = (
diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
index 6cae99e5..ad713a11 100644
--- a/src/pods/canvas/model/shape-other-props.utils.ts
+++ b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -25,6 +25,13 @@ export const generateDefaultOtherProps = (
       };
     case 'button':
     case 'textarea':
+      return {
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
+        borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
+      };
     case 'vertical-menu':
     case 'horizontal-menu':
       return {
@@ -99,7 +106,12 @@ export const generateDefaultOtherProps = (
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
-    case 'line':
+    case 'horizontalLine':
+      return {
+        stroke: '#000000',
+        strokeStyle: [],
+      };
+    case 'verticalLine':
       return {
         stroke: '#000000',
         strokeStyle: [],
@@ -178,6 +190,7 @@ export const generateDefaultOtherProps = (
           categories: ['IT'],
         },
         iconSize: 'M',
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
       };
     case 'image':
       return {
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
index 6509a670..40bd9c5c 100644
--- a/src/pods/canvas/model/shape-size.mapper.ts
+++ b/src/pods/canvas/model/shape-size.mapper.ts
@@ -33,7 +33,8 @@ import {
   getDiamondShapeSizeRestrictions,
   getImageShapeSizeRestrictions,
   getLargeArrowShapeSizeRestrictions,
-  getlineShapeRestrictions,
+  getHorizontalLineShapeRestrictions,
+  getVerticalLineShapeRestrictions,
   getPostItShapeSizeRestrictions,
   getRectangleShapeSizeRestrictions,
   getStarShapeSizeRestrictions,
@@ -98,7 +99,8 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   rectangle: getRectangleShapeSizeRestrictions,
   videoPlayer: getVideoPlayerShapeSizeRestrictions,
   diamond: getDiamondShapeSizeRestrictions,
-  line: getlineShapeRestrictions,
+  horizontalLine: getHorizontalLineShapeRestrictions,
+  verticalLine: getVerticalLineShapeRestrictions,
   accordion: getAccordionShapeSizeRestrictions,
   triangle: getTriangleShapeSizeRestrictions,
   postit: getPostItShapeSizeRestrictions,
diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts
index 4115e76a..12769dc7 100644
--- a/src/pods/canvas/model/transformer.model.ts
+++ b/src/pods/canvas/model/transformer.model.ts
@@ -45,14 +45,12 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
   switch (shapeType) {
     case 'label':
     case 'input':
-    case 'button':
     case 'combobox':
-    case 'line':
+    case 'horizontalLine':
     case 'listbox':
     case 'checkbox':
     case 'toggleswitch':
     case 'progressbar':
-    case 'datepickerinput':
     case 'timepickerinput':
     case 'radiobutton':
     case 'horizontal-menu':
@@ -68,6 +66,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'buttonBar':
     case 'slider':
       return ['middle-left', 'middle-right'];
+    case 'verticalLine':
     case 'verticalScrollBar':
       return ['top-center', 'bottom-center'];
     case 'icon':
diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx
index 8efb3f10..cff2f7a3 100644
--- a/src/pods/canvas/shape-renderer/index.tsx
+++ b/src/pods/canvas/shape-renderer/index.tsx
@@ -46,7 +46,8 @@ import {
   renderDiamond,
   renderTriangle,
   renderRectangle,
-  renderLine,
+  renderHorizontalLine,
+  renderVerticalLine,
   renderCircle,
   renderStar,
   renderPostit,
@@ -120,8 +121,10 @@ export const renderShapeComponent = (
       return renderLineChart(shape, shapeRenderedProps);
     case 'diamond':
       return renderDiamond(shape, shapeRenderedProps);
-    case 'line':
-      return renderLine(shape, shapeRenderedProps);
+    case 'horizontalLine':
+      return renderHorizontalLine(shape, shapeRenderedProps);
+    case 'verticalLine':
+      return renderVerticalLine(shape, shapeRenderedProps);
     case 'accordion':
       return renderAccordion(shape, shapeRenderedProps);
     case 'triangle':
diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx
new file mode 100644
index 00000000..08403bfc
--- /dev/null
+++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx
@@ -0,0 +1,31 @@
+import { HorizontalLineShape } from '@/common/components/mock-components/front-basic-shapes';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderHorizontalLine = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <HorizontalLineShape
+      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/canvas/shape-renderer/simple-basic-shapes/index.ts b/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts
index 75daef9f..a676e622 100644
--- a/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts
+++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts
@@ -2,7 +2,8 @@ export * from './rectangle.rerender';
 export * from './postit.rerender';
 export * from './diamond.renderer';
 export * from './triangle.renderer';
-export * from './line.renderer';
+export * from './horizontal-line.renderer';
+export * from './vertical-line.renderer';
 export * from './circle.renderer';
 export * from './star.renderer';
 export * from './large-arrow.renderer';
diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx
similarity index 82%
rename from src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx
rename to src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx
index 2ce67348..fcfde41f 100644
--- a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx
@@ -1,8 +1,8 @@
-import { LineShape } from '@/common/components/mock-components/front-basic-shapes';
+import { VerticalLineShape } from '@/common/components/mock-components/front-basic-shapes';
 import { ShapeRendererProps } from '../model';
 import { ShapeModel } from '@/core/model';
 
-export const renderLine = (
+export const renderVerticalLine = (
   shape: ShapeModel,
   shapeRenderedProps: ShapeRendererProps
 ) => {
@@ -10,7 +10,7 @@ export const renderLine = (
     shapeRenderedProps;
 
   return (
-    <LineShape
+    <VerticalLineShape
       id={shape.id}
       key={shape.id}
       ref={shapeRefs.current[shape.id]}
diff --git a/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx
index 4b02957c..0eee92a7 100644
--- a/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx
@@ -26,6 +26,7 @@ export const renderDatepickerinput = (
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
       otherProps={shape.otherProps}
+      text={shape.text}
     />
   );
 };
diff --git a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx
index 702c3ecb..6cb0573b 100644
--- a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx
@@ -27,6 +27,7 @@ export const renderIcon = (
       onTransformEnd={handleTransform}
       iconInfo={shape.otherProps?.icon}
       iconSize={shape.otherProps?.iconSize}
+      stroke={shape.otherProps?.stroke}
     />
   );
 };
diff --git a/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx
index 99bc8425..6476b6b6 100644
--- a/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx
@@ -25,6 +25,8 @@ export const renderTimepickerinput = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
       otherProps={shape.otherProps}
     />
   );
diff --git a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
index ccfd8809..aadcf152 100644
--- a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
@@ -24,6 +24,8 @@ export const renderBrowserWindow = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };
diff --git a/src/pods/canvas/use-multiple-selection-shape.hook.tsx b/src/pods/canvas/use-multiple-selection-shape.hook.tsx
index 3e4b745a..698c265c 100644
--- a/src/pods/canvas/use-multiple-selection-shape.hook.tsx
+++ b/src/pods/canvas/use-multiple-selection-shape.hook.tsx
@@ -4,6 +4,7 @@ import Konva from 'konva';
 import { useState } from 'react';
 import { SelectionRect } from './model';
 import {
+  areCoordsInsideRect,
   findFirstShapeInCoords,
   getSelectedShapesFromSelectionRect,
 } from './use-multiple-selection.business';
@@ -11,6 +12,8 @@ import { getTransformerBoxAndCoords } from './transformer.utils';
 import { calculateScaledCoordsFromCanvasDivCoordinatesNoScroll } from './canvas.util';
 import { Stage } from 'konva/lib/Stage';
 import { isUserDoingMultipleSelectionUsingCtrlOrCmdKey } from '@/common/utils/shapes';
+import { KonvaEventObject } from 'konva/lib/Node';
+import { useCanvasContext } from '@/core/providers';
 
 // There's a bug here: if you make a multiple selectin and start dragging
 // inside the selection but on a blank area it won't drag the selection
@@ -47,6 +50,8 @@ export const useMultipleSelectionShapeHook = (
     visible: false,
   });
 
+  const { setIsThumbnailContextMenuVisible } = useCanvasContext();
+
   const isDraggingSelection = (mouseCoords: Coord) => {
     if (!transformerRef.current) {
       return false;
@@ -82,9 +87,39 @@ export const useMultipleSelectionShapeHook = (
     );
   };
 
+  const isUserClickingOnTransformer = (
+    e: KonvaEventObject<MouseEvent> | KonvaEventObject<TouchEvent>
+  ) => {
+    const transformerRect = transformerRef.current?.getClientRect();
+    console.log(transformerRect);
+    const mousePosition = e.target?.getStage()?.getPointerPosition() ?? {
+      x: 0,
+      y: 0,
+    };
+
+    return (
+      transformerRect &&
+      areCoordsInsideRect(
+        mousePosition.x,
+        mousePosition.y,
+        transformerRect.x,
+        transformerRect.y,
+        transformerRect.width,
+        transformerRect.height
+      )
+    );
+  };
+
   const handleMouseDown = (
     e: Konva.KonvaEventObject<MouseEvent> | Konva.KonvaEventObject<TouchEvent>
   ) => {
+    // Edge case if you drag on one of the transformer rectangle
+    // resize small boxes but you are on the outer part of the shape
+    // it will first select the shape that is behind (e.g. a windows or phone container)
+    // then the transformer (odd behavior, see: )
+    if (isUserClickingOnTransformer(e)) {
+      return;
+    }
     // If user is holding ctrl or cmd key let's abort drag and drop multiple selection
     // He is trying to multiselect shape by using the keyboard
     if (isUserDoingMultipleSelectionUsingCtrlOrCmdKey(e)) {
@@ -134,6 +169,8 @@ export const useMultipleSelectionShapeHook = (
       height: 0,
       visible: true,
     });
+
+    setIsThumbnailContextMenuVisible(false);
   };
 
   const handleMouseMove = (e: any) => {
diff --git a/src/pods/canvas/use-multiple-selection.business.ts b/src/pods/canvas/use-multiple-selection.business.ts
index 9a161cc6..f12be5eb 100644
--- a/src/pods/canvas/use-multiple-selection.business.ts
+++ b/src/pods/canvas/use-multiple-selection.business.ts
@@ -1,6 +1,22 @@
 import { Coord, ShapeModel, ShapeRefs } from '@/core/model';
 import { SelectionRect } from './model';
 
+export const areCoordsInsideRect = (
+  pointX: number,
+  pointY: number,
+  rectX: number,
+  rectY: number,
+  rectWidth: number,
+  rectHeight: number
+): boolean => {
+  return (
+    pointX >= rectX &&
+    pointX <= rectX + rectWidth &&
+    pointY >= rectY &&
+    pointY <= rectY + rectHeight
+  );
+};
+
 const isShapeInsideSelectionRect = (
   shapeRect: SelectionRect,
   selectionRect: SelectionRect
diff --git a/src/pods/canvas/use-transform.hook.ts b/src/pods/canvas/use-transform.hook.ts
index ac812661..5ee9da9c 100644
--- a/src/pods/canvas/use-transform.hook.ts
+++ b/src/pods/canvas/use-transform.hook.ts
@@ -33,6 +33,7 @@ export const useTransform = (
       transformerRef.current.enabledAnchors(
         selectedShape.attrs.typeOfTransformer
       );
+      transformerRef.current.rotateEnabled(false);
     }
   };
 
diff --git a/src/pods/context-menu/use-context-menu.hook.tsx b/src/pods/context-menu/use-context-menu.hook.tsx
index d2c53fbb..3b8e1177 100644
--- a/src/pods/context-menu/use-context-menu.hook.tsx
+++ b/src/pods/context-menu/use-context-menu.hook.tsx
@@ -26,7 +26,11 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({ dropRef }) => {
 
     const handleRightClick = (event: MouseEvent) => {
       event.preventDefault();
-      if (selectionInfo.getSelectedShapeData()) {
+      if (
+        selectionInfo.getSelectedShapeData() &&
+        stageRef.current &&
+        stageRef.current.container().contains(event.target as Node)
+      ) {
         setShowContextMenu(true);
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
       }
diff --git a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts b/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts
index 05a2e866..7a2991af 100644
--- a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts
+++ b/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts
@@ -1,13 +1,14 @@
 import { ItemInfo } from '@/common/components/gallery/components/model';
 
 export const mockBasicShapesCollection: ItemInfo[] = [
-  { thumbnailSrc: '/shapes/postit.svg', type: 'postit' },
-  { thumbnailSrc: '/shapes/image.svg', type: 'image' },
-  { thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
-  { thumbnailSrc: '/shapes/triangle.svg', type: 'triangle' },
   { thumbnailSrc: '/shapes/circle.svg', type: 'circle' },
   { thumbnailSrc: '/shapes/diamond.svg', type: 'diamond' },
-  { thumbnailSrc: '/shapes/star.svg', type: 'star' },
-  { thumbnailSrc: '/shapes/line.svg', type: 'line' },
+  { thumbnailSrc: '/shapes/horizontalLine.svg', type: 'horizontalLine' },
+  { thumbnailSrc: '/shapes/image.svg', type: 'image' },
   { thumbnailSrc: '/shapes/largeArrow.svg', type: 'largeArrow' },
+  { thumbnailSrc: '/shapes/postit.svg', type: 'postit' },
+  { thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
+  { thumbnailSrc: '/shapes/star.svg', type: 'star' },
+  { thumbnailSrc: '/shapes/triangle.svg', type: 'triangle' },
+  { thumbnailSrc: '/shapes/verticalLine.svg', type: 'verticalLine' },
 ];
diff --git a/src/pods/galleries/component-gallery/component-gallery-data/index.ts b/src/pods/galleries/component-gallery/component-gallery-data/index.ts
index ec5f7b14..19bb8c29 100644
--- a/src/pods/galleries/component-gallery/component-gallery-data/index.ts
+++ b/src/pods/galleries/component-gallery/component-gallery-data/index.ts
@@ -1,24 +1,24 @@
 import { ItemInfo } from '@/common/components/gallery/components/model';
 
 export const mockWidgetCollection: ItemInfo[] = [
-  { thumbnailSrc: '/widgets/icon.svg', type: 'icon' },
-  { thumbnailSrc: '/widgets/label.svg', type: 'label' },
-  { thumbnailSrc: '/widgets/input.svg', type: 'input' },
   { thumbnailSrc: '/widgets/button.svg', type: 'button' },
-  { thumbnailSrc: '/widgets/textarea.svg', type: 'textarea' },
-  { thumbnailSrc: '/widgets/combobox.svg', type: 'combobox' },
-  { thumbnailSrc: '/widgets/radiobutton.svg', type: 'radiobutton' },
   { thumbnailSrc: '/widgets/checkbox.svg', type: 'checkbox' },
-  { thumbnailSrc: '/widgets/toggleswitch.svg', type: 'toggleswitch' },
-  { thumbnailSrc: '/widgets/progressbar.svg', type: 'progressbar' },
-  { thumbnailSrc: '/widgets/listbox.svg', type: 'listbox' },
-  { thumbnailSrc: '/widgets/slider.svg', type: 'slider' },
+  { thumbnailSrc: '/widgets/combobox.svg', type: 'combobox' },
   { thumbnailSrc: '/widgets/datepicker.svg', type: 'datepickerinput' },
-  { thumbnailSrc: '/widgets/timepicker.svg', type: 'timepickerinput' },
-  { thumbnailSrc: '/widgets/tooltip.svg', type: 'tooltip' },
-  { thumbnailSrc: '/widgets/verticalscrollbar.svg', type: 'verticalScrollBar' },
   {
     thumbnailSrc: '/widgets/horizontalscrollbar.svg',
     type: 'horizontalScrollBar',
   },
+  { thumbnailSrc: '/widgets/icon.svg', type: 'icon' },
+  { thumbnailSrc: '/widgets/input.svg', type: 'input' },
+  { thumbnailSrc: '/widgets/label.svg', type: 'label' },
+  { thumbnailSrc: '/widgets/listbox.svg', type: 'listbox' },
+  { thumbnailSrc: '/widgets/progressbar.svg', type: 'progressbar' },
+  { thumbnailSrc: '/widgets/radiobutton.svg', type: 'radiobutton' },
+  { thumbnailSrc: '/widgets/slider.svg', type: 'slider' },
+  { thumbnailSrc: '/widgets/textarea.svg', type: 'textarea' },
+  { thumbnailSrc: '/widgets/timepicker.svg', type: 'timepickerinput' },
+  { thumbnailSrc: '/widgets/toggleswitch.svg', type: 'toggleswitch' },
+  { thumbnailSrc: '/widgets/tooltip.svg', type: 'tooltip' },
+  { thumbnailSrc: '/widgets/verticalscrollbar.svg', type: 'verticalScrollBar' },
 ];
diff --git a/src/pods/galleries/container-gallery/container-gallery-data/index.ts b/src/pods/galleries/container-gallery/container-gallery-data/index.ts
index 0def6bb8..6cb3a0d8 100644
--- a/src/pods/galleries/container-gallery/container-gallery-data/index.ts
+++ b/src/pods/galleries/container-gallery/container-gallery-data/index.ts
@@ -2,7 +2,7 @@ import { ItemInfo } from '@/common/components/gallery/components/model';
 
 export const mockContainerCollection: ItemInfo[] = [
   { thumbnailSrc: '/containers/browser.svg', type: 'browser' },
-  { thumbnailSrc: '/containers/tablet.svg', type: 'tablet' },
   { thumbnailSrc: 'containers/mobile.svg', type: 'mobilePhone' },
   { thumbnailSrc: 'containers/modal-dialog.svg', type: 'modalDialog' },
+  { thumbnailSrc: '/containers/tablet.svg', type: 'tablet' },
 ];
diff --git a/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts b/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts
index d2689139..983d76ae 100644
--- a/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts
+++ b/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts
@@ -1,26 +1,23 @@
 import { ItemInfo } from '@/common/components/gallery/components/model';
 
 export const mockRichComponentsCollection: ItemInfo[] = [
-  { thumbnailSrc: '/rich-components/audioPlayer.svg', type: 'audioPlayer' },
-  { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/accordion.svg', type: 'accordion' },
+  { thumbnailSrc: '/rich-components/appBar.svg', type: 'appBar' },
+  { thumbnailSrc: '/rich-components/audioPlayer.svg', type: 'audioPlayer' },
+  { thumbnailSrc: '/rich-components/barchart.svg', type: 'bar' },
+  { thumbnailSrc: '/rich-components/breadcrumb.svg', type: 'breadcrumb' },
+  { thumbnailSrc: '/rich-components/button-bar-group.svg', type: 'buttonBar' },
+  { thumbnailSrc: '/rich-components/calendar.svg', type: 'calendar' },
   {
     thumbnailSrc: '/rich-components/horizontal-menu.svg',
     type: 'horizontal-menu',
   },
-  { thumbnailSrc: '/rich-components/button-bar-group.svg', type: 'buttonBar' },
-  {
-    thumbnailSrc: '/rich-components/vertical-menu.svg',
-    type: 'vertical-menu',
-  },
-  { thumbnailSrc: '/rich-components/appBar.svg', type: 'appBar' },
-  { thumbnailSrc: '/rich-components/breadcrumb.svg', type: 'breadcrumb' },
+  { thumbnailSrc: '/rich-components/line-chart.svg', type: 'linechart' },
+  { thumbnailSrc: '/rich-components/map.svg', type: 'map' },
   { thumbnailSrc: '/rich-components/modal.svg', type: 'modal' },
+  { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
+  { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/tabsbar.svg', type: 'tabsBar' },
-  { thumbnailSrc: '/rich-components/calendar.svg', type: 'calendar' },
+  { thumbnailSrc: '/rich-components/vertical-menu.svg', type: 'vertical-menu' },
   { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
-  { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
-  { thumbnailSrc: '/rich-components/line-chart.svg', type: 'linechart' },
-  { thumbnailSrc: '/rich-components/barchart.svg', type: 'bar' },
-  { thumbnailSrc: '/rich-components/map.svg', type: 'map' },
 ];
diff --git a/src/pods/properties/components/active-element-selector/active-element-selector.component.tsx b/src/pods/properties/components/active-element-selector/active-element-selector.component.tsx
index dd827294..9b0c6b71 100644
--- a/src/pods/properties/components/active-element-selector/active-element-selector.component.tsx
+++ b/src/pods/properties/components/active-element-selector/active-element-selector.component.tsx
@@ -27,7 +27,7 @@ export const ActiveElementSelector: React.FC<Props> = ({
 
   // Checking whether the type is tabsBar and parsing the text
   const isElementTypeSupported =
-    type === 'tabsBar' || 'buttonBar' || 'horizontal-menu';
+    type === 'tabsBar' || 'buttonBar' || 'horizontal-menu' || 'timepickerinput';
   const elementNames =
     isElementTypeSupported && text ? extractElementNames(text) : [];
 
diff --git a/src/pods/properties/components/font-style/font-style.module.css b/src/pods/properties/components/font-style/font-style.module.css
index 4863b13c..52b4fe3c 100644
--- a/src/pods/properties/components/font-style/font-style.module.css
+++ b/src/pods/properties/components/font-style/font-style.module.css
@@ -6,35 +6,12 @@
   border-bottom: 1px solid var(--primary-300);
 }
 
-.buttonsContainer {
-  display: flex;
-  gap: 1em;
-  align-items: center;
-  margin-left: auto;
+.container :first-child {
+  flex: 1;
 }
 
-.button {
-  border: none;
-  color: var(--text-color);
-  background-color: inherit;
-  width: auto;
-  min-width: 30px;
-  border-radius: 10px;
-  font-size: var(--fs-xs);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease-in-out;
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.button:hover {
-  background-color: var(--primary-100);
-}
-
-.active {
-  background-color: var(--primary-200);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
-  transform: translateY(2px);
 }
diff --git a/src/pods/properties/components/font-style/font-style.tsx b/src/pods/properties/components/font-style/font-style.tsx
index 3caf0d21..9667a98c 100644
--- a/src/pods/properties/components/font-style/font-style.tsx
+++ b/src/pods/properties/components/font-style/font-style.tsx
@@ -20,31 +20,15 @@ export const FontStyle: React.FC<Props> = props => {
   return (
     <div className={classes.container}>
       <p>{label}</p>
-      <div className={classes.buttonsContainer}>
-        <button
-          onClick={handleToggle}
-          className={`${classes.button} ${fontStyle === FONT_STYLE_ITALIC ? classes.active : ''}`}
-          style={{
-            fontStyle: fontStyle === FONT_STYLE_ITALIC ? 'italic' : 'normal',
-          }}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 20V5a1 1 0 0 1 1-1h15"
-            />
-          </svg>
-        </button>
-      </div>
+      <input
+        type="checkbox"
+        checked={fontStyle === 'italic' ? true : false}
+        onChange={handleToggle}
+        className={classes.checkbox}
+        style={{
+          fontStyle: fontStyle === FONT_STYLE_ITALIC ? 'italic' : 'normal',
+        }}
+      />
     </div>
   );
 };
diff --git a/src/pods/properties/components/font-variant/font-variant.module.css b/src/pods/properties/components/font-variant/font-variant.module.css
index 4863b13c..52b4fe3c 100644
--- a/src/pods/properties/components/font-variant/font-variant.module.css
+++ b/src/pods/properties/components/font-variant/font-variant.module.css
@@ -6,35 +6,12 @@
   border-bottom: 1px solid var(--primary-300);
 }
 
-.buttonsContainer {
-  display: flex;
-  gap: 1em;
-  align-items: center;
-  margin-left: auto;
+.container :first-child {
+  flex: 1;
 }
 
-.button {
-  border: none;
-  color: var(--text-color);
-  background-color: inherit;
-  width: auto;
-  min-width: 30px;
-  border-radius: 10px;
-  font-size: var(--fs-xs);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease-in-out;
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.button:hover {
-  background-color: var(--primary-100);
-}
-
-.active {
-  background-color: var(--primary-200);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
-  transform: translateY(2px);
 }
diff --git a/src/pods/properties/components/font-variant/font-variant.tsx b/src/pods/properties/components/font-variant/font-variant.tsx
index f27aa293..dc995295 100644
--- a/src/pods/properties/components/font-variant/font-variant.tsx
+++ b/src/pods/properties/components/font-variant/font-variant.tsx
@@ -22,31 +22,15 @@ export const FontVariant: React.FC<Props> = props => {
   return (
     <div className={classes.container}>
       <p>{label}</p>
-      <div className={classes.buttonsContainer}>
-        <button
-          onClick={handleToggle}
-          className={`${classes.button} ${fontVariant === FONT_VARIANT_BOLD ? classes.active : ''}`}
-          style={{
-            fontStyle: fontVariant === FONT_VARIANT_BOLD ? 'bold' : 'normal',
-          }}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 20V5a1 1 0 0 1 1-1h15"
-            />
-          </svg>
-        </button>
-      </div>
+      <input
+        type="checkbox"
+        checked={fontVariant === 'bold' ? true : false}
+        onChange={handleToggle}
+        className={classes.checkbox}
+        style={{
+          fontStyle: fontVariant === FONT_VARIANT_BOLD ? 'bold' : 'normal',
+        }}
+      />
     </div>
   );
 };
diff --git a/src/pods/properties/components/icon-selector/modal/icons.ts b/src/pods/properties/components/icon-selector/modal/icons.ts
index 77f75426..8646e562 100644
--- a/src/pods/properties/components/icon-selector/modal/icons.ts
+++ b/src/pods/properties/components/icon-selector/modal/icons.ts
@@ -578,25 +578,13 @@ export const iconCollection: IconInfo[] = [
       'phone',
       'smartphone',
       'tablet',
-      'application',
-      'play store',
-      'google play',
     ],
     categories: ['IT'],
   },
   {
     name: 'Apple',
     filename: 'apple.svg',
-    searchTerms: [
-      'apple',
-      'system',
-      'mobile',
-      'phone',
-      'smartphone',
-      'tablet',
-      'application',
-      'app store',
-    ],
+    searchTerms: ['apple', 'system', 'mobile', 'phone', 'smartphone', 'tablet'],
     categories: ['IT'],
   },
   {
@@ -1187,7 +1175,7 @@ export const iconCollection: IconInfo[] = [
   {
     name: 'Chat',
     filename: 'chat.svg',
-    searchTerms: ['chat', 'message', 'conversation', 'chatting'],
+    searchTerms: ['chat', 'message', 'conversation', 'chatting', 'comment'],
     categories: ['IT'],
   },
   {
@@ -1322,4 +1310,581 @@ export const iconCollection: IconInfo[] = [
     searchTerms: ['pencil', 'edit', 'editing', 'edition'],
     categories: ['IT'],
   },
+  {
+    name: 'Calendar',
+    filename: 'calendar.svg',
+    searchTerms: ['calendar', 'days', 'date', 'hours', 'time', 'schedule'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Cursor',
+    filename: 'cursor.svg',
+    searchTerms: ['cursor', 'pointer', 'select', 'mouse'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Cursor click',
+    filename: 'cursorclick.svg',
+    searchTerms: ['cursor', 'click', 'pointer', 'select', 'mouse'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Microphone',
+    filename: 'microphone.svg',
+    searchTerms: ['microphone', 'record', 'micro', 'mic'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Microphone off',
+    filename: 'microphoneslash.svg',
+    searchTerms: ['microphone', 'mute', 'silence', 'mic'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Webcam',
+    filename: 'webcam.svg',
+    searchTerms: ['webcam', 'camera', 'video', 'camcorder'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Webcam off',
+    filename: 'webcamslash.svg',
+    searchTerms: ['webcam', 'camera', 'slash', 'camcorder', 'off'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Empty Battery',
+    filename: 'emptybattery.svg',
+    searchTerms: ['battery', 'empty', 'discharged', 'energy'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Sign in',
+    filename: 'signin.svg',
+    searchTerms: ['sign in', 'login', 'enter', 'access'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Sign out',
+    filename: 'signout.svg',
+    searchTerms: ['sign out', 'logout', 'exit', 'leave'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow Bend left',
+    filename: 'arrowbendupleft.svg',
+    searchTerms: ['arrow', 'left', 'bend', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow Bend right',
+    filename: 'arrowbendupright.svg',
+    searchTerms: ['arrow', 'right', 'bend', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Dots Square',
+    filename: 'dotssquare.svg',
+    searchTerms: ['dots', 'square', 'menu', 'more'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Dots Vertical',
+    filename: 'dotsvertical.svg',
+    searchTerms: ['dots', 'vertical', 'menu', 'options'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Google Drive',
+    filename: 'drive.svg',
+    searchTerms: ['drive', 'google', 'cloud', 'storage'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Linux',
+    filename: 'linux.svg',
+    searchTerms: ['linux', 'system', 'software', 'desktop'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Windows',
+    filename: 'windows.svg',
+    searchTerms: ['windows', 'system', 'software', 'desktop'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Moon',
+    filename: 'moon.svg',
+    searchTerms: ['moon', 'night', 'dark', 'sky'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Alarm',
+    filename: 'alarm.svg',
+    searchTerms: ['alarm', 'clock', 'alert', 'ring'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Gitlab',
+    filename: 'gitlab.svg',
+    searchTerms: ['gitlab', 'code', 'repository', 'version control'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List dots',
+    filename: 'listdots.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List checks',
+    filename: 'listchecks.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List dashes',
+    filename: 'listdashes.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List heart',
+    filename: 'listheart.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Search list',
+    filename: 'searchlist.svg',
+    searchTerms: ['search', 'list', 'find', 'lookup', 'query'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List numbers',
+    filename: 'listnumbers.svg',
+    searchTerms: ['list', 'categorize', 'ordered', 'classify', 'numbers'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Add list',
+    filename: 'addlist.svg',
+    searchTerms: ['add', 'list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
+  {
+    name: 'list star',
+    filename: 'liststar.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify', 'favorite'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Help',
+    filename: 'help.svg',
+    searchTerms: ['help', 'question', 'support', 'assist'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Star',
+    filename: 'star.svg',
+    searchTerms: ['star', 'favorite', 'like', 'rate'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Text align center',
+    filename: 'textaligncenter.svg',
+    searchTerms: ['text', 'align', 'center', 'format', 'paragraph'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Text align justify',
+    filename: 'textalignjustify.svg',
+    searchTerms: ['text', 'align', 'justify', 'format', 'paragraph'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Text align left',
+    filename: 'textalignleft.svg',
+    searchTerms: ['text', 'align', 'left', 'format', 'paragraph'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Text align right',
+    filename: 'textalignright.svg',
+    searchTerms: ['text', 'align', 'right', 'format', 'paragraph'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Text indent',
+    filename: 'textindent.svg',
+    searchTerms: ['text', 'indent', 'format', 'paragraph'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Upload',
+    filename: 'upload.svg',
+    searchTerms: ['upload', 'transfer', 'load', 'charge', 'import'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Warning circle',
+    filename: 'warningcircle.svg',
+    searchTerms: ['warning', 'circle', 'alert', 'caution'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Warning',
+    filename: 'warning.svg',
+    searchTerms: ['warning', 'alert', 'caution', 'attention'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Shield check',
+    filename: 'shieldcheck.svg',
+    searchTerms: ['shield', 'checked', 'security', 'verified'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Shield checkered',
+    filename: 'shieldcheckered.svg',
+    searchTerms: ['shield', 'protection', 'security', 'defense'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Shield desactivated',
+    filename: 'shieldslash.svg',
+    searchTerms: ['shield', 'desactivated', 'security', 'off'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Shield warning',
+    filename: 'shieldwarning.svg',
+    searchTerms: ['shield', 'warning', 'security', 'alert'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Shield',
+    filename: 'normalshield.svg',
+    searchTerms: ['shield', 'protection', 'security', 'defense'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Scissors',
+    filename: 'scissors.svg',
+    searchTerms: ['scissors', 'cut', 'tool', 'clip'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone',
+    filename: 'phone.svg',
+    searchTerms: ['phone', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone call',
+    filename: 'phonecall.svg',
+    searchTerms: ['phone', 'call', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone hang',
+    filename: 'phonehang.svg',
+    searchTerms: ['phone', 'hang', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone disconnected',
+    filename: 'phoneslash.svg',
+    searchTerms: ['phone', 'disconnected', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone pause',
+    filename: 'phonepause.svg',
+    searchTerms: ['phone', 'pause', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Call phone incoming',
+    filename: 'callphoneincoming.svg',
+    searchTerms: [
+      'call',
+      'phone',
+      'incoming',
+      'landline',
+      'device',
+      'telephone',
+    ],
+    categories: ['IT'],
+  },
+  {
+    name: 'Phone list',
+    filename: 'phonelist.svg',
+    searchTerms: ['phone', 'list', 'landline', 'device', 'telephone'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Music note',
+    filename: 'musicnote.svg',
+    searchTerms: ['music', 'note', 'sound', 'audio', 'melody'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File document',
+    filename: 'filedoc.svg',
+    searchTerms: ['file', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File pdf',
+    filename: 'filepdf.svg',
+    searchTerms: ['file', 'pdf', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File png',
+    filename: 'filepng.svg',
+    searchTerms: ['file', 'png', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File powerpoint',
+    filename: 'filepowerpoint.svg',
+    searchTerms: ['file', 'powerpoint', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File jpg',
+    filename: 'filejpg.svg',
+    searchTerms: ['file', 'jpg', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'File excel',
+    filename: 'fileexcel.svg',
+    searchTerms: ['file', 'excel', 'document', 'digital', 'sheet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrows clockwise',
+    filename: 'arrowsclockwise.svg',
+    searchTerms: ['arrows', 'clockwise', 'direction', 'rotate'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrows counter clockwise',
+    filename: 'arrowscounterclockwise.svg',
+    searchTerms: ['arrows', 'counter clockwise', 'direction', 'rotate'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow fat down',
+    filename: 'arrowfatdown.svg',
+    searchTerms: ['arrow', 'fat', 'down', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow fat left',
+    filename: 'arrowfatleft.svg',
+    searchTerms: ['arrow', 'fat', 'left', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow fat right',
+    filename: 'arrowfatright.svg',
+    searchTerms: ['arrow', 'fat', 'right', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow fat up',
+    filename: 'arrowfatup.svg',
+    searchTerms: ['arrow', 'fat', 'up', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Check fat',
+    filename: 'checkfat.svg',
+    searchTerms: ['check', 'confirmation', 'validate', 'success'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Check',
+    filename: 'check.svg',
+    searchTerms: ['check', 'confirmation', 'validate', 'success'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Double check',
+    filename: 'doublecheck.svg',
+    searchTerms: ['check', 'confirmation', 'validate', 'double'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Start',
+    filename: 'home.svg',
+    searchTerms: ['start', 'home', 'begin', 'launch'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Company',
+    filename: 'company.svg',
+    searchTerms: ['company', 'business', 'enterprise', 'corporation'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Factory',
+    filename: 'factory.svg',
+    searchTerms: ['factory', 'industry', 'manufacture', 'production'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Keyboard',
+    filename: 'keyboard.svg',
+    searchTerms: ['keyboard', 'device', 'computer', 'write'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Printer',
+    filename: 'printer.svg',
+    searchTerms: ['printer', 'device', 'computer', 'imprint'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Plug',
+    filename: 'plug.svg',
+    searchTerms: ['plug', 'device', 'connect', 'power'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Copyright',
+    filename: 'copyright.svg',
+    searchTerms: [
+      'copyright',
+      'rights',
+      'protected',
+      'intellectual',
+      'property',
+    ],
+    categories: ['IT'],
+  },
+  {
+    name: 'Caret down',
+    filename: 'caretdown.svg',
+    searchTerms: ['caret', 'down', 'arrow', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Caret left',
+    filename: 'caretleft.svg',
+    searchTerms: ['caret', 'left', 'arrow', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Caret up',
+    filename: 'caretup.svg',
+    searchTerms: ['caret', 'up', 'arrow', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Caret right',
+    filename: 'caretright.svg',
+    searchTerms: ['caret', 'right', 'arrow', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Camera',
+    filename: 'camera.svg',
+    searchTerms: ['camera', 'photo', 'shot', 'capture', 'snapshot'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Flag',
+    filename: 'flag.svg',
+    searchTerms: ['flag', 'signal', 'banderole', 'banner'],
+    categories: ['IT'],
+  },
+  {
+    name: 'First aid',
+    filename: 'firstaid.svg',
+    searchTerms: ['hospital', 'medical', 'emergency', 'health'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Hammer',
+    filename: 'hammer.svg',
+    searchTerms: ['hammer', 'tool', 'build', 'repair'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Joystick',
+    filename: 'joystick.svg',
+    searchTerms: ['joystick', 'game', 'play', 'controller'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Controller',
+    filename: 'controller.svg',
+    searchTerms: ['controller', 'game', 'play', 'gamepad'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Key',
+    filename: 'key.svg',
+    searchTerms: ['key', 'secure', 'password', 'access'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Lock',
+    filename: 'lock.svg',
+    searchTerms: ['lock', 'secure', 'password', 'access'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Unlock',
+    filename: 'lockopen.svg',
+    searchTerms: ['unlock', 'open', 'access', 'password'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Flash',
+    filename: 'lightning.svg',
+    searchTerms: ['flash', 'lightning', 'energy', 'power'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Auto flash',
+    filename: 'autoflash.svg',
+    searchTerms: ['auto', 'flash', 'lightning', 'energy', 'power'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Flash slash',
+    filename: 'flashslash.svg',
+    searchTerms: ['flash', 'slash', 'lightning', 'energy', 'power'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Another Mouse',
+    filename: 'alternativemouse.svg',
+    searchTerms: ['mouse', 'device', 'computer', 'click'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Power',
+    filename: 'power.svg',
+    searchTerms: ['power', 'on', 'off', 'energy'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Spinner',
+    filename: 'spinner.svg',
+    searchTerms: ['spinner', 'loading', 'wait', 'progress'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Subtitles',
+    filename: 'subtitles.svg',
+    searchTerms: ['subtitles', 'caption', 'language', 'translate'],
+    categories: ['IT'],
+  },
 ];
diff --git a/src/pods/properties/components/stroke-style/stroke.style.component.tsx b/src/pods/properties/components/stroke-style/stroke.style.component.tsx
index e1af3ad6..4529bc4c 100644
--- a/src/pods/properties/components/stroke-style/stroke.style.component.tsx
+++ b/src/pods/properties/components/stroke-style/stroke.style.component.tsx
@@ -31,6 +31,7 @@ export const StrokeStyle: React.FC<Props> = props => {
         <option value="10,10">- - - -</option>
         <option value="10,5,2,5">-.-.-.-</option>
         <option value="2,5">........</option>
+        <option value="0,1">None</option>
       </select>
     </div>
   );
diff --git a/src/pods/properties/components/text-decoration/text-decoration.module.css b/src/pods/properties/components/text-decoration/text-decoration.module.css
index 4863b13c..52b4fe3c 100644
--- a/src/pods/properties/components/text-decoration/text-decoration.module.css
+++ b/src/pods/properties/components/text-decoration/text-decoration.module.css
@@ -6,35 +6,12 @@
   border-bottom: 1px solid var(--primary-300);
 }
 
-.buttonsContainer {
-  display: flex;
-  gap: 1em;
-  align-items: center;
-  margin-left: auto;
+.container :first-child {
+  flex: 1;
 }
 
-.button {
-  border: none;
-  color: var(--text-color);
-  background-color: inherit;
-  width: auto;
-  min-width: 30px;
-  border-radius: 10px;
-  font-size: var(--fs-xs);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease-in-out;
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.button:hover {
-  background-color: var(--primary-100);
-}
-
-.active {
-  background-color: var(--primary-200);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
-  transform: translateY(2px);
 }
diff --git a/src/pods/properties/components/text-decoration/text-decoration.tsx b/src/pods/properties/components/text-decoration/text-decoration.tsx
index d4fda69f..57dac3dd 100644
--- a/src/pods/properties/components/text-decoration/text-decoration.tsx
+++ b/src/pods/properties/components/text-decoration/text-decoration.tsx
@@ -22,34 +22,16 @@ export const TextDecoration: React.FC<Props> = props => {
   return (
     <div className={classes.container}>
       <p>{label}</p>
-      <div className={classes.buttonsContainer}>
-        <button
-          onClick={handleToggle}
-          className={`${classes.button} ${textDecoration === TEXT_DECORATION_UNDERLINE ? classes.active : ''}`}
-          style={{
-            fontStyle:
-              textDecoration === TEXT_DECORATION_UNDERLINE
-                ? 'underline'
-                : 'none',
-          }}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 20V5a1 1 0 0 1 1-1h15"
-            />
-          </svg>
-        </button>
-      </div>
+      <input
+        type="checkbox"
+        checked={textDecoration === 'underline' ? true : false}
+        onChange={handleToggle}
+        className={classes.checkbox}
+        style={{
+          fontStyle:
+            textDecoration === TEXT_DECORATION_UNDERLINE ? 'underline' : 'none',
+        }}
+      />
     </div>
   );
 };
diff --git a/src/pods/thumb-pages/components/context-menu/context-menu.component.module.css b/src/pods/thumb-pages/components/context-menu/context-menu.component.module.css
new file mode 100644
index 00000000..82de8324
--- /dev/null
+++ b/src/pods/thumb-pages/components/context-menu/context-menu.component.module.css
@@ -0,0 +1,40 @@
+.context-menu {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: auto;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--primary-500);
+  background-color: var(--primary-100);
+  opacity: 0.98;
+}
+
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  font-size: var(--fs-xs);
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+  cursor: pointer;
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.container:hover {
+  background-color: var(--primary-200);
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: var(--primary-200);
+}
+
+.shortcut {
+  color: var(--primary-400);
+  font-weight: 500;
+}
diff --git a/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx b/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx
new file mode 100644
index 00000000..8b5a474e
--- /dev/null
+++ b/src/pods/thumb-pages/components/context-menu/context-menu.component.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useCanvasContext } from '@/core/providers';
+import classes from './context-menu.component.module.css';
+import { CopyIcon, DeleteIcon, PencilIcon } from '@/common/components/icons';
+
+interface ThumbPageContextMenuProps {
+  contextMenuRef: React.RefObject<HTMLDivElement>;
+  setShowContextMenu: (show: boolean) => void;
+  pageIndex: number;
+  setPageTitleBeingEdited: (index: number) => void;
+}
+
+export const ThumbPageContextMenu: React.FunctionComponent<
+  ThumbPageContextMenuProps
+> = props => {
+  const {
+    contextMenuRef,
+    setShowContextMenu,
+    pageIndex,
+    setPageTitleBeingEdited,
+  } = props;
+  const {
+    setIsThumbnailContextMenuVisible,
+    fullDocument,
+    duplicatePage,
+    deletePage,
+  } = useCanvasContext();
+
+  enum ContextButtonType {
+    'Duplicate',
+    'Rename',
+    'Delete',
+  }
+
+  const handleClickOnContextButton = (
+    event: React.MouseEvent,
+    buttonClicked: ContextButtonType
+  ) => {
+    event.stopPropagation();
+    switch (buttonClicked) {
+      case ContextButtonType.Duplicate:
+        duplicatePage(pageIndex);
+        break;
+      case ContextButtonType.Rename:
+        console.log('Rename');
+        setPageTitleBeingEdited(pageIndex);
+        break;
+      case ContextButtonType.Delete:
+        if (fullDocument.pages.length !== 1) {
+          deletePage(pageIndex);
+        }
+        break;
+    }
+    setShowContextMenu(false);
+    setIsThumbnailContextMenuVisible(false);
+  };
+
+  return (
+    <div ref={contextMenuRef} className={classes['context-menu']}>
+      <div
+        onClick={event =>
+          handleClickOnContextButton(event, ContextButtonType.Duplicate)
+        }
+        className={classes.container}
+      >
+        <p>Duplicate</p>
+        <CopyIcon />
+      </div>
+      <div
+        onClick={event =>
+          handleClickOnContextButton(event, ContextButtonType.Rename)
+        }
+        className={classes.container}
+      >
+        <p>Rename</p>
+        <PencilIcon />
+      </div>
+      <div
+        onClick={event =>
+          handleClickOnContextButton(event, ContextButtonType.Delete)
+        }
+        className={
+          fullDocument.pages.length === 1
+            ? `${classes.container} ${classes.disabled}`
+            : `${classes.container}`
+        }
+      >
+        <p>Delete</p>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
diff --git a/src/pods/thumb-pages/components/context-menu/index.ts b/src/pods/thumb-pages/components/context-menu/index.ts
new file mode 100644
index 00000000..61e476da
--- /dev/null
+++ b/src/pods/thumb-pages/components/context-menu/index.ts
@@ -0,0 +1 @@
+export * from './context-menu.component';
diff --git a/src/pods/thumb-pages/components/index.ts b/src/pods/thumb-pages/components/index.ts
new file mode 100644
index 00000000..f096ec4a
--- /dev/null
+++ b/src/pods/thumb-pages/components/index.ts
@@ -0,0 +1,2 @@
+export * from './thumb-page';
+export * from './page-title-inline-edit.component';
diff --git a/src/pods/thumb-pages/components/page-title-inline-edit.component.tsx b/src/pods/thumb-pages/components/page-title-inline-edit.component.tsx
new file mode 100644
index 00000000..da42d0fd
--- /dev/null
+++ b/src/pods/thumb-pages/components/page-title-inline-edit.component.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { useCanvasContext } from '@/core/providers';
+
+interface PageTitleInlineEditProps {
+  pageIndex: number;
+  setPageTitleBeingEdited: (index: number | null) => void;
+}
+
+export const PageTitleInlineEdit: React.FC<PageTitleInlineEditProps> = ({
+  pageIndex,
+  setPageTitleBeingEdited,
+}) => {
+  const { fullDocument, editPageTitle, setIsInlineEditing } =
+    useCanvasContext();
+  const [inputValue, setInputValue] = useState(
+    fullDocument.pages[pageIndex].name
+  );
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const updatePageTitle = () => {
+    editPageTitle(pageIndex, inputValue);
+    setPageTitleBeingEdited(null);
+    setIsInlineEditing(false);
+  };
+
+  const handleAction = (
+    event: React.FormEvent<HTMLFormElement> | React.FocusEvent<HTMLInputElement>
+  ) => {
+    if (event.type === 'submit') {
+      event.preventDefault();
+    }
+    updatePageTitle();
+  };
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      setIsInlineEditing(true);
+    }
+  }, []);
+
+  return (
+    <form onSubmit={handleAction}>
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={e => setInputValue(e.target.value)}
+        onBlur={handleAction}
+      />
+    </form>
+  );
+};
diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
new file mode 100644
index 00000000..bfa1c2be
--- /dev/null
+++ b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -0,0 +1,11 @@
+.container {
+  width: '200px';
+  height: '180px';
+  border: 3px solid;
+  border-color: black;
+  border-radius: 5px;
+  position: 'relative';
+  background-color: white;
+  margin-top: 10px;
+  padding: 5px;
+}
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
new file mode 100644
index 00000000..3c031d0c
--- /dev/null
+++ b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -0,0 +1,75 @@
+import { ShapeRefs } from '@/core/model';
+import { useCanvasContext } from '@/core/providers';
+import { renderShapeComponent } from '@/pods/canvas/shape-renderer';
+import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils';
+import { KonvaEventObject } from 'konva/lib/Node';
+import { createRef, useRef } from 'react';
+import { Layer, Stage } from 'react-konva';
+import { ThumbPageContextMenu } from './context-menu';
+import { useContextMenu } from '../use-context-menu-thumb.hook';
+import classes from './thumb-page.module.css';
+
+interface Props {
+  pageIndex: number;
+  onSetActivePage: (pageId: string) => void;
+  setPageTitleBeingEdited: (index: number) => void;
+}
+
+export const ThumbPage: React.FunctionComponent<Props> = props => {
+  const { pageIndex, onSetActivePage, setPageTitleBeingEdited } = props;
+  const { fullDocument } = useCanvasContext();
+  const page = fullDocument.pages[pageIndex];
+  const shapes = page.shapes;
+  const fakeShapeRefs = useRef<ShapeRefs>({});
+
+  const bounds = calculateCanvasBounds(shapes);
+  const canvasSize = {
+    width: bounds.x + bounds.width,
+    height: bounds.y + bounds.height,
+  };
+  const scaleFactorX = 200 / canvasSize.width;
+  const scaleFactorY = 180 / canvasSize.height;
+  const finalScale = Math.min(scaleFactorX, scaleFactorY);
+
+  const {
+    showContextMenu,
+    contextMenuRef,
+    setShowContextMenu,
+    handleShowContextMenu,
+  } = useContextMenu();
+
+  return (
+    <>
+      <div
+        className={classes.container}
+        onClick={() => onSetActivePage(page.id)}
+        onContextMenu={handleShowContextMenu}
+      >
+        <Stage width={200} height={180} scaleX={finalScale} scaleY={finalScale}>
+          <Layer>
+            {shapes.map(shape => {
+              if (!fakeShapeRefs.current[shape.id]) {
+                fakeShapeRefs.current[shape.id] = createRef();
+              }
+              return renderShapeComponent(shape, {
+                handleSelected: () => {},
+                shapeRefs: fakeShapeRefs,
+                handleDragEnd:
+                  (_: string) => (_: KonvaEventObject<DragEvent>) => {},
+                handleTransform: () => {},
+              });
+            })}
+          </Layer>
+        </Stage>
+        {showContextMenu && (
+          <ThumbPageContextMenu
+            contextMenuRef={contextMenuRef}
+            setShowContextMenu={setShowContextMenu}
+            pageIndex={pageIndex}
+            setPageTitleBeingEdited={setPageTitleBeingEdited}
+          />
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/src/pods/thumb-pages/index.ts b/src/pods/thumb-pages/index.ts
new file mode 100644
index 00000000..864664f5
--- /dev/null
+++ b/src/pods/thumb-pages/index.ts
@@ -0,0 +1 @@
+export * from './thumb-pages.pod';
diff --git a/src/pods/thumb-pages/thumb-pages.module.css b/src/pods/thumb-pages/thumb-pages.module.css
new file mode 100644
index 00000000..361dbc37
--- /dev/null
+++ b/src/pods/thumb-pages/thumb-pages.module.css
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  padding: var(--space-md);
+  gap: var(--space-md);
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.activeThumb {
+  background-color: rgb(41, 41, 235);
+}
+
+.activeText {
+  color: white;
+}
diff --git a/src/pods/thumb-pages/thumb-pages.pod.tsx b/src/pods/thumb-pages/thumb-pages.pod.tsx
new file mode 100644
index 00000000..69261574
--- /dev/null
+++ b/src/pods/thumb-pages/thumb-pages.pod.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import classes from './thumb-pages.module.css';
+import { useCanvasContext } from '@/core/providers';
+import { PageTitleInlineEdit, ThumbPage } from './components';
+
+export const ThumbPagesPod: React.FC = () => {
+  const { fullDocument, addNewPage, setActivePage } = useCanvasContext();
+  const [pageTitleBeingEdited, setPageTitleBeingEdited] = React.useState<
+    number | null
+  >(null);
+  const [activePageId, setActivePageId] = React.useState<string | null>(null);
+
+  const handleAddNewPage = () => {
+    addNewPage();
+  };
+
+  const handleSetActivePage = (pageId: string) => {
+    setActivePage(pageId);
+    setActivePageId(pageId);
+  };
+
+  return (
+    <div className={classes.container}>
+      {fullDocument.pages.map((page, index) => (
+        <React.Fragment key={page.id}>
+          <div
+            className={`${classes.container} ${
+              page.id === activePageId ? classes.activeThumb : ''
+            }`}
+          >
+            <ThumbPage
+              pageIndex={index}
+              onSetActivePage={handleSetActivePage}
+              setPageTitleBeingEdited={setPageTitleBeingEdited}
+            />
+            {pageTitleBeingEdited === index ? (
+              <PageTitleInlineEdit
+                pageIndex={index}
+                setPageTitleBeingEdited={setPageTitleBeingEdited}
+              />
+            ) : (
+              <div
+                onDoubleClick={() => setPageTitleBeingEdited(index)}
+                className={page.id === activePageId ? classes.activeText : ''}
+              >
+                {page.name}
+              </div>
+            )}
+          </div>
+        </React.Fragment>
+      ))}
+      <button onClick={handleAddNewPage}>Add new page</button>
+    </div>
+  );
+};
diff --git a/src/pods/thumb-pages/use-context-menu-thumb.hook.tsx b/src/pods/thumb-pages/use-context-menu-thumb.hook.tsx
new file mode 100644
index 00000000..5d5a65a6
--- /dev/null
+++ b/src/pods/thumb-pages/use-context-menu-thumb.hook.tsx
@@ -0,0 +1,42 @@
+import { useCanvasContext } from '@/core/providers';
+import { useEffect, useRef, useState } from 'react';
+
+export const useContextMenu = () => {
+  const [showContextMenu, setShowContextMenu] = useState(false);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const { setIsThumbnailContextMenuVisible } = useCanvasContext();
+
+  const handleShowContextMenu = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    if (!showContextMenu) {
+      setIsThumbnailContextMenuVisible(true);
+      setShowContextMenu(true);
+    }
+  };
+
+  useEffect(() => {
+    const closeContextMenu = (event: MouseEvent) => {
+      if (
+        contextMenuRef.current &&
+        !contextMenuRef.current.contains(event.target as Node)
+      ) {
+        setShowContextMenu(false);
+        setIsThumbnailContextMenuVisible(false);
+      }
+    };
+
+    window.addEventListener('mousedown', closeContextMenu);
+    return () => {
+      window.removeEventListener('mousedown', closeContextMenu);
+    };
+  }, [showContextMenu, setIsThumbnailContextMenuVisible]);
+
+  return {
+    showContextMenu,
+    contextMenuRef,
+    setShowContextMenu,
+    handleShowContextMenu,
+  };
+};
diff --git a/src/pods/toolbar/components/new-button/new-button.tsx b/src/pods/toolbar/components/new-button/new-button.tsx
index fa694298..54501807 100644
--- a/src/pods/toolbar/components/new-button/new-button.tsx
+++ b/src/pods/toolbar/components/new-button/new-button.tsx
@@ -4,7 +4,7 @@ import { useCanvasContext } from '@/core/providers';
 import { ToolbarButton } from '../toolbar-button';
 
 export const NewButton = () => {
-  const { clearCanvas } = useCanvasContext();
+  const { createNewFullDocument: clearCanvas } = useCanvasContext();
 
   const handleClick = () => {
     clearCanvas();
diff --git a/src/scenes/main.scene.tsx b/src/scenes/main.scene.tsx
index 086b26f9..93d74453 100644
--- a/src/scenes/main.scene.tsx
+++ b/src/scenes/main.scene.tsx
@@ -12,12 +12,17 @@ import {
 } from '@/pods';
 import { PropertiesPod } from '@/pods/properties';
 import { FooterPod } from '@/pods/footer/footer.pod';
+import { ThumbPagesPod } from '@/pods/thumb-pages';
 
 export const MainScene = () => {
   return (
     <MainLayout>
       <ToolbarPod />
       <div className={classes.leftTools}>
+        <details className={classes.container} name="toolsLeft">
+          <summary className={classes.title}>Pages</summary>
+          <ThumbPagesPod />
+        </details>
         <details className={classes.container} name="toolsLeft">
           <summary className={classes.title}>Devices</summary>
           <ContainerGalleryPod />