diff --git a/utils/ui/capra_ui.json b/utils/ui/capra_ui.json
new file mode 100644
index 0000000..f904185
--- /dev/null
+++ b/utils/ui/capra_ui.json
@@ -0,0 +1,279 @@
+{
+  "configById": {
+    "Publish!1b7sy1a": {
+      "buttonText": "Front LED ON",
+      "buttonTooltip": "",
+      "advancedView": false,
+      "value": "{}",
+      "foxglovePanelTitle": "Front LED ON"
+    },
+    "Indicator!360e2e8": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ]
+    },
+    "Publish!gkhilm": {
+      "buttonText": "Front LED OFF",
+      "buttonTooltip": "",
+      "advancedView": false,
+      "value": "{}",
+      "foxglovePanelTitle": "Front LED OFF"
+    },
+    "Indicator!3iqk2un": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ],
+      "foxglovePanelTitle": "Mode"
+    },
+    "Publish!2vkw4zk": {
+      "buttonText": "Back LED ON",
+      "buttonTooltip": "",
+      "advancedView": false,
+      "value": "{}",
+      "foxglovePanelTitle": "Back LED ON"
+    },
+    "Indicator!l0f2va": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ],
+      "foxglovePanelTitle": "Flipper"
+    },
+    "Publish!22modxz": {
+      "buttonText": "Back LED OFF",
+      "buttonTooltip": "",
+      "advancedView": false,
+      "value": "{}",
+      "foxglovePanelTitle": "Back LED OFF"
+    },
+    "Indicator!1srygfi": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ],
+      "foxglovePanelTitle": "Bras"
+    },
+    "Battery Indicator.Battery display!2ungb0h": {
+      "batteryTopic": "",
+      "topic": {
+        "batteryTopic": ""
+      }
+    },
+    "Indicator!38j960d": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ]
+    },
+    "CallService!qyzghd": {
+      "requestPayload": "{}",
+      "layout": "vertical",
+      "timeoutSeconds": 10,
+      "editingMode": false,
+      "foxglovePanelTitle": "ESTOP",
+      "buttonTooltip": "",
+      "buttonColor": "#ff0000",
+      "buttonText": "ESTOP"
+    },
+    "Indicator!21d1yds": {
+      "path": "",
+      "style": "bulb",
+      "fallbackColor": "#a0a0a0",
+      "fallbackLabel": "False",
+      "rules": [
+        {
+          "operator": "=",
+          "rawValue": "true",
+          "color": "#68e24a",
+          "label": "True"
+        }
+      ],
+      "foxglovePanelTitle": "Estop status"
+    },
+    "3D!wd5ayb": {
+      "cameraState": {
+        "perspective": true,
+        "distance": 19.999999999999982,
+        "phi": 59.99999999999997,
+        "thetaOffset": 44.99999999999999,
+        "targetOffset": [
+          -0.048227452644863535,
+          0.04822745264486353,
+          3.7860779849614555e-18
+        ],
+        "target": [
+          0,
+          0,
+          0
+        ],
+        "targetOrientation": [
+          0,
+          0,
+          0,
+          1
+        ],
+        "fovy": 45,
+        "near": 0.5,
+        "far": 5000
+      },
+      "followMode": "follow-pose",
+      "scene": {},
+      "transforms": {},
+      "topics": {},
+      "layers": {},
+      "publish": {
+        "type": "point",
+        "poseTopic": "/move_base_simple/goal",
+        "pointTopic": "/clicked_point",
+        "poseEstimateTopic": "/initialpose",
+        "poseEstimateXDeviation": 0.5,
+        "poseEstimateYDeviation": 0.5,
+        "poseEstimateThetaDeviation": 0.26179939
+      },
+      "imageMode": {}
+    },
+    "Table!1xg0s4v": {
+      "topicPath": ""
+    },
+    "RosOut!14blizg": {
+      "searchTerms": [],
+      "minLogLevel": 1,
+      "nameFilter": {}
+    },
+    "Tab!2iobm2s": {
+      "activeTabIdx": 0,
+      "tabs": [
+        {
+          "title": "status",
+          "layout": {
+            "first": {
+              "first": {
+                "first": "Publish!1b7sy1a",
+                "second": "Indicator!360e2e8",
+                "direction": "column",
+                "splitPercentage": 55.757575757575765
+              },
+              "second": {
+                "first": "Publish!gkhilm",
+                "second": "Indicator!3iqk2un",
+                "direction": "column",
+                "splitPercentage": 55.757575757575765
+              },
+              "direction": "row"
+            },
+            "second": {
+              "first": {
+                "first": {
+                  "first": "Publish!2vkw4zk",
+                  "second": "Indicator!l0f2va",
+                  "direction": "column",
+                  "splitPercentage": 56.36363636363636
+                },
+                "second": {
+                  "first": "Publish!22modxz",
+                  "second": "Indicator!1srygfi",
+                  "direction": "column",
+                  "splitPercentage": 56.36363636363636
+                },
+                "direction": "row",
+                "splitPercentage": 51.956429780033865
+              },
+              "second": {
+                "first": {
+                  "first": "Battery Indicator.Battery display!2ungb0h",
+                  "second": "Indicator!38j960d",
+                  "direction": "column",
+                  "splitPercentage": 56.96969696969697
+                },
+                "second": {
+                  "first": "CallService!qyzghd",
+                  "second": "Indicator!21d1yds",
+                  "direction": "column",
+                  "splitPercentage": 56.96969696969697
+                },
+                "direction": "row",
+                "splitPercentage": 59.009099648981575
+              },
+              "direction": "row",
+              "splitPercentage": 49.00497512437809
+            },
+            "direction": "row",
+            "splitPercentage": 33.881578947368425
+          }
+        }
+      ]
+    },
+    "Tab!1dud6cr": {
+      "activeTabIdx": 0,
+      "tabs": [
+        {
+          "title": "1",
+          "layout": {
+            "first": "3D!wd5ayb",
+            "second": {
+              "first": "Table!1xg0s4v",
+              "second": "RosOut!14blizg",
+              "direction": "column",
+              "splitPercentage": 48.263254113345525
+            },
+            "direction": "row",
+            "splitPercentage": 50.911458333333336
+          }
+        }
+      ]
+    }
+  },
+  "globalVariables": {},
+  "userNodes": {},
+  "playbackConfig": {
+    "speed": 1
+  },
+  "layout": {
+    "first": "Tab!2iobm2s",
+    "second": "Tab!1dud6cr",
+    "direction": "column",
+    "splitPercentage": 25.259067357512954
+  }
+}
\ No newline at end of file
diff --git a/utils/ui/readme.md b/utils/ui/readme.md
new file mode 100644
index 0000000..266e8d5
--- /dev/null
+++ b/utils/ui/readme.md
@@ -0,0 +1,22 @@
+# Rove Web UI
+
+Utilisation de [Foxglove](https://foxglove.dev) pour la visualisation de données
+
+## Quick links
+
+- Download [Foxglove](https://foxglove.dev/download)
+- Docs [Foxglove](https://docs.foxglove.dev/docs/introduction)
+
+## Setup
+
+1. Connexion
+      1. Il est nécessaire de se connecter avec un compte Foxglove pour importer un layout
+2. Ajout d'extension
+   1. Cliquer sur l'icone de `profile` (en haut à droite) et `Extensions`
+   2. Installer l'extension [`battery-display`](https://github.com/Lynxdrone/foxglove-battery-extension)
+3. Importer le layout
+   1. Cliquer sur l'icone de `layout` (en haut à droite) et `import from file`
+4. Connection au robot
+   1. Cliquer sur le logo de Foxglove (en haut à gauche) et `Open connection`
+      1. [Foxglove WebSocket](https://docs.foxglove.dev/docs/connecting-to-data/frameworks/ros2/#foxglove-websocket)
+      2. [ROS Foxglove bridge](https://docs.foxglove.dev/docs/connecting-to-data/ros-foxglove-bridge)