diff --git a/user_manual/images/oc_connect.png b/user_manual/images/oc_connect.png
new file mode 100644
index 000000000..27aefc7a2
Binary files /dev/null and b/user_manual/images/oc_connect.png differ
diff --git a/user_manual/images/oc_ui.png b/user_manual/images/oc_ui.png
new file mode 100644
index 000000000..c30b22905
Binary files /dev/null and b/user_manual/images/oc_ui.png differ
diff --git a/user_manual/images/oc_ui.svg b/user_manual/images/oc_ui.svg
new file mode 100644
index 000000000..3a657c61e
--- /dev/null
+++ b/user_manual/images/oc_ui.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   width="1067"
+   height="698"
+   id="svg2894">
+  <defs
+     id="defs2898" />
+  <image
+     xlink:href="file:///Users/danimo/dev/documentation/user_manual/images/oc_files.tiff"
+     x="0"
+     y="0"
+     width="1067"
+     height="698"
+     id="image2904" />
+  <path
+     d="m 725.00002,428.14706 a 53.676472,53.676472 0 1 1 -107.35294,0 53.676472,53.676472 0 1 1 107.35294,0 z"
+     id="path2912"
+     style="fill:#1d2d44;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <path
+     d="m 461.76471,204.61765 a 24.264706,24.264706 0 1 1 -48.52942,0 24.264706,24.264706 0 1 1 48.52942,0 z"
+     transform="matrix(1.2619325,0,0,1.2619325,237.61043,-145.50778)"
+     id="path3686"
+     style="fill:#ffffff;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <path
+     d="m 355.88234,141.38235 a 28.67647,28.67647 0 1 1 -57.35294,0 28.67647,28.67647 0 1 1 57.35294,0 z"
+     transform="translate(-8.8235294,-4.4117647)"
+     id="path3688"
+     style="fill:#ffffff;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <rect
+     width="163.23529"
+     height="261.76471"
+     x="-1.4705882"
+     y="155.35294"
+     id="rect3784"
+     style="opacity:0.54918033;fill:#ffffff;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <g
+     transform="translate(-5.8823529,-263.23529)"
+     id="g3817">
+    <path
+       d="m 122.05883,552.41174 a 39.705883,39.705883 0 1 1 -79.41177,0 39.705883,39.705883 0 1 1 79.41177,0 z"
+       transform="translate(-4.4117647,-2.9411694e-8)"
+       id="path2910"
+       style="fill:#1d2d44;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <text
+       x="65.647057"
+       y="566.5882"
+       id="text3813"
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+         x="65.647057"
+         y="566.5882"
+         id="tspan3815">1</tspan></text>
+  </g>
+  <text
+     x="659.35291"
+     y="441.05881"
+     id="text3822"
+     xml:space="preserve"
+     style="font-size:40px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+       x="659.35291"
+       y="441.05881"
+       id="tspan3824">2</tspan></text>
+  <text
+     x="305.35294"
+     y="150.94118"
+     id="text3826"
+     xml:space="preserve"
+     style="font-size:40px;font-style:normal;font-weight:normal;fill:#1d2d44;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+       x="305.35294"
+       y="150.94118"
+       id="tspan3828">3</tspan></text>
+  <text
+     x="776.47058"
+     y="125.94117"
+     id="text3830"
+     xml:space="preserve"
+     style="font-size:40px;font-style:normal;font-weight:normal;fill:#1d2d44;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+       x="776.47058"
+       y="125.94117"
+       id="tspan3832">4</tspan></text>
+  <rect
+     width="154.41176"
+     height="26.470589"
+     x="2.9411764"
+     y="670.05884"
+     id="rect3834"
+     style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <text
+     x="100"
+     y="617.11768"
+     id="text3836"
+     xml:space="preserve"
+     style="font-size:40px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+       x="100"
+       y="617.11768"
+       id="tspan3838" /></text>
+  <path
+     d="m 124.25,659.625 a 25.875,27.125 0 1 1 -51.75,0 25.875,27.125 0 1 1 51.75,0 z"
+     id="path3874"
+     style="fill:#1d2d44;fill-opacity:1;stroke:#1d2d44;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <text
+     x="86.4375"
+     y="673.25"
+     id="text3876"
+     xml:space="preserve"
+     style="font-size:40px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
+       x="86.4375"
+       y="673.25"
+       id="tspan3878">5</tspan></text>
+</svg>