diff --git a/README.md b/README.md
index fc361b3..3990137 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,19 @@ You can also link the css style from a CDN in your index.html
 
 ##### PolygonDraw
 
-**Props**
+![Editing Polygon](docs/polygon-editor.gif)
+
+**Editing functionalities:**
+- Undo: undoes the last action
+- Redo: redoes the last action
+- Pen: adds small points between each vertex to enable editing the polygon shape and creating more vertexes.
+- Delete: deletes selected vertex(es)
+- Import: enables the import of a polygon with GeoJSON format
+- Export: exports the polygon in GEOJson, JTS, or LtnLng formats
+- Focus: refocuses the map to the selected polygon
+
+
+**Component Props**
 
 -   **polygon**: _Coordinate[] | Coordinate[][]_ (Single or list of polygons to render)
 -   **activeIndex**?: _number_ (index of currently active polygon, can be omitted when only one polygon exists. **Default value: 0**)
@@ -60,7 +72,7 @@ You can also link the css style from a CDN in your index.html
 The initialCenter and initialZoom props are applicable only when both the polygon and the boundary coordinates are empty.
 This flow explains which parameters are used to focus the map:
 
-![Focus flow](map_focus_flow.png)
+![Focus flow](docs/map_focus_flow.png)
 
 For more details, have a look at the Component definition in [PolygonDraw](src/PolygonDraw/PolygonDraw.tsx)
 
diff --git a/map_focus_flow.png b/docs/map_focus_flow.png
similarity index 100%
rename from map_focus_flow.png
rename to docs/map_focus_flow.png
diff --git a/docs/polygon-editor.gif b/docs/polygon-editor.gif
new file mode 100644
index 0000000..57a6038
Binary files /dev/null and b/docs/polygon-editor.gif differ
diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx
index e656885..9300762 100644
--- a/src/ActionBar/ActionBar.tsx
+++ b/src/ActionBar/ActionBar.tsx
@@ -50,10 +50,10 @@ export const ActionBar: FunctionComponent<Props> = ({
     onUndo,
 }) => (
     <Container>
-        <ActionButton onClick={onUndo} icon={ActionButtonIcons.IMPORT} disabled={!isUndoable} inactive={!isUndoable}>
+        <ActionButton onClick={onUndo} icon={ActionButtonIcons.UNDO} disabled={!isUndoable} inactive={!isUndoable}>
             {LABELS.UNDO}
         </ActionButton>
-        <ActionButton onClick={onRedo} icon={ActionButtonIcons.EXPORT} disabled={!isRedoable} inactive={!isRedoable}>
+        <ActionButton onClick={onRedo} icon={ActionButtonIcons.REDO} disabled={!isRedoable} inactive={!isRedoable}>
             {LABELS.REDO}
         </ActionButton>
         {editable && (
diff --git a/src/ActionBar/ActionButton.tsx b/src/ActionBar/ActionButton.tsx
index 7d55fae..24c665b 100644
--- a/src/ActionBar/ActionButton.tsx
+++ b/src/ActionBar/ActionButton.tsx
@@ -1,13 +1,15 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
-import { AUTHENTIC_BLUE_900, AUTHENTIC_BLUE_200, ACTION_BLUE_900, WHITE } from '../common/colors';
+import { ACTION_BLUE_900, AUTHENTIC_BLUE_200, AUTHENTIC_BLUE_900, WHITE } from '../common/colors';
 
+import { Export } from './Icons/Export';
 import { Frame } from './Icons/Frame';
+import { Import } from './Icons/Import';
+import { Redo } from './Icons/Redo';
 import { Trashcan } from './Icons/Trashcan';
+import { Undo } from './Icons/Undo';
 import { VectorMode } from './Icons/VectorMode';
-import { Export } from './Icons/Export';
-import { Import } from './Icons/Import';
 
 export enum ActionButtonIcons {
     TRASHCAN = 'TRASHCAN',
@@ -15,12 +17,15 @@ export enum ActionButtonIcons {
     VECTOR_MODE = 'VECTOR_MODE',
     EXPORT = 'EXPORT',
     IMPORT = 'IMPORT',
+    UNDO = 'UNDO',
+    REDO = 'REDO',
 }
 
 interface ContainerProps {
     disabled?: boolean;
 }
-const Container = styled('button').attrs(() => ({type: 'button'}))<ContainerProps>`
+
+const Container = styled('button').attrs(() => ({ type: 'button' }))<ContainerProps>`
     position: relative;
     width: 42px;
     height: 42px;
@@ -71,6 +76,12 @@ const renderIcon = (icon: ActionButtonIcons, inactive?: boolean, activeIconColor
         case ActionButtonIcons.IMPORT: {
             return <Import {...props} />;
         }
+        case ActionButtonIcons.REDO: {
+            return <Redo {...props} />;
+        }
+        case ActionButtonIcons.UNDO: {
+            return <Undo {...props} />;
+        }
         default:
             return null;
     }
diff --git a/src/ActionBar/Icons/Export.tsx b/src/ActionBar/Icons/Export.tsx
index e2633e8..0afbc11 100644
--- a/src/ActionBar/Icons/Export.tsx
+++ b/src/ActionBar/Icons/Export.tsx
@@ -1,12 +1,7 @@
-import React, { SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Export: React.FC<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Export = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg viewBox="0 0 24 24" {...props}>
         <path
             d="M19 19v2H5v-2h14zM13 3v10.436l5-4.445v2.676L12 17l-6-5.333V8.991l5 4.445V3h2z"
diff --git a/src/ActionBar/Icons/Frame.tsx b/src/ActionBar/Icons/Frame.tsx
index ea4f9d6..a35d5f4 100644
--- a/src/ActionBar/Icons/Frame.tsx
+++ b/src/ActionBar/Icons/Frame.tsx
@@ -1,10 +1,7 @@
-import { FunctionComponent, SVGProps } from 'react';
+import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Frame: FunctionComponent<Props> = ({ iconColor, ...props }) => (
+export const Frame = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg width={24} height={24} viewBox="0 0 24 24" {...props}>
         <path
             fill={iconColor}
diff --git a/src/ActionBar/Icons/Import.tsx b/src/ActionBar/Icons/Import.tsx
index d9b671c..1dd1644 100644
--- a/src/ActionBar/Icons/Import.tsx
+++ b/src/ActionBar/Icons/Import.tsx
@@ -1,12 +1,7 @@
-import React, { SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Import: React.FC<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Import = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg viewBox="0 0 24 24" {...props}>
         <path
             d="M19 19v2H5v-2h14zM12 3l6 5.333v2.675l-5-4.444V17h-2V6.564l-5 4.445V8.334L12 3z"
diff --git a/src/ActionBar/Icons/Redo.tsx b/src/ActionBar/Icons/Redo.tsx
new file mode 100644
index 0000000..39db3f7
--- /dev/null
+++ b/src/ActionBar/Icons/Redo.tsx
@@ -0,0 +1,12 @@
+import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
+
+export const Redo = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
+    <svg viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+        <path
+            d="M9 18h3v-2H9c-1.654 0-3-1.346-3-3s1.346-3 3-3h6v3l5-4-5-4v3H9c-2.757 0-5 2.243-5 5s2.243 5 5 5z"
+            fill={iconColor}
+            fillRule="nonzero"
+        />
+    </svg>
+);
diff --git a/src/ActionBar/Icons/Trashcan.tsx b/src/ActionBar/Icons/Trashcan.tsx
index 46855a5..85dd7e8 100644
--- a/src/ActionBar/Icons/Trashcan.tsx
+++ b/src/ActionBar/Icons/Trashcan.tsx
@@ -1,12 +1,7 @@
-import { FunctionComponent, SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Trashcan: FunctionComponent<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Trashcan = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg width={24} height={24} viewBox="4 4 19 19" {...props}>
         <path
             fill={iconColor}
diff --git a/src/ActionBar/Icons/Undo.tsx b/src/ActionBar/Icons/Undo.tsx
new file mode 100644
index 0000000..9a293c7
--- /dev/null
+++ b/src/ActionBar/Icons/Undo.tsx
@@ -0,0 +1,12 @@
+import { AUTHENTIC_BLUE_900 } from '../../common/colors'
+import { IconProps } from './types'
+
+export const Undo = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
+    <svg viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+        <path
+            d="M9 10h6c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v2h3c2.757 0 5-2.243 5-5s-2.243-5-5-5H9V5L4 9l5 4v-3z"
+            fill={iconColor}
+            fillRule="nonzero"
+        />
+    </svg>
+);
diff --git a/src/ActionBar/Icons/types.ts b/src/ActionBar/Icons/types.ts
new file mode 100644
index 0000000..d3f0b35
--- /dev/null
+++ b/src/ActionBar/Icons/types.ts
@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+    iconColor?: string;
+}