diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
index eed5cf9aa6e0cbb2b1096c75854b0cf863eaac4c..9322e85208eb6f54f7926f1a182623678c4269a6 100644
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@@ -26,5 +26,5 @@
     * [Update GraphQL Queries](for-developers/frontend/Update-queries-GrahpQL-in-the-frontend.md)
   * [📖 Storybook](for-developers/frontend/visualisations.md)
 * [👩🍳 Recipes](for-developers/recipes/README.md)
-  * [🚧 Add a visualization](for-developers/recipes/add-a-visualization.md)
+  * [Add a result type](for-developers/recipes/add-a-result-type.md)
   * [Add an algorithm handler on Exareme](for-developers/recipes/add-an-algorithm-handler-on-exareme.md)
diff --git a/docs/for-developers/recipes/add-a-result-type.md b/docs/for-developers/recipes/add-a-result-type.md
new file mode 100644
index 0000000000000000000000000000000000000000..565d1e76fd2d71f14793b5409552607ba4d9adca
--- /dev/null
+++ b/docs/for-developers/recipes/add-a-result-type.md
@@ -0,0 +1,96 @@
+---
+description: This page describe the process to add a type of result
+---
+
+# Add a result type
+
+Result's types are defined in the gateway, in order to add a new type of result for the Frontend we need to create a new kind of result inside the gateway. 
+
+All results are stored inside the `engine` module, specifically inside the `src/engine/models/result` folder. 
+
+Let's create a model for the demonstration
+
+{% code title="my-custom.model.ts" lineNumbers="true" %}
+```typescript
+@ObjectType()
+export class MyCustomResult extends Result {
+    @Field()
+    name: string;
+    
+    @Field()
+    customProperty: string;
+}
+```
+{% endcode %}
+
+Annotations are related to GraphQL, see more about GraphQL's annotation [here](https://docs.nestjs.com/graphql/resolvers#object-types).
+
+Once our model is created we need to declare it as a part of the possible result types, for this open  the file `src/engine/models/result/common/result-union.model.ts` and add the type to the list
+
+{% code title="result-union.model.ts" lineNumbers="true" %}
+```typescript
+export const ResultUnion = createUnionType({
+  name: 'ResultUnion',
+  types: () => [
+    ...
+    MyCustomResult,
+  ],
+  resolveType(value) {
+    ...
+
+    if (value.customProperty) return MyCustomResult 
+
+    return RawResult;
+  },
+});
+
+```
+{% endcode %}
+
+{% hint style="info" %}
+The `resolveType` function help GraphQL determines the result's type when the object receive is a literal JavaScript object (not a class).
+{% endhint %}
+
+#### Integration in the Frontend
+
+First of all, as describe in [this issue](https://github.com/apollographql/apollo-client/issues/7050), we need tell Apollo which types we should expect from this `union field`. Open the file `src/components/API/GraphQL/cache.tsx` and in the cache configuration, we need to add a mention to our new type
+
+{% code title="cache.tsx" lineNumbers="true" %}
+```typescript
+export const cacheConfig = {
+  possibleTypes: {
+    // https://github.com/apollographql/apollo-client/issues/7050
+    ResultUnion: [
+      ...
+      'MyCustomResult' // <- Our new result type
+    ],
+    ...
+  },
+  ...
+}
+```
+{% endcode %}
+
+Once the possible types is defined, we need to tell Apollo what we want to extract from the the specific result.&#x20;
+
+open the file `src/components/API/GraphQL/fragments.ts` and add the details of our new result.&#x20;
+
+{% code title="fragments.ts" lineNumbers="true" %}
+```typescript
+export const coreInfoResult = gql`
+  fragment coreInfoResult on ResultUnion {
+    ... on RawResult {
+      rawdata
+    }
+    ... on MyCustomResult {
+      name
+      customProperty
+    }
+    (...)
+  }
+`;
+```
+{% endcode %}
+
+After that we are all setup to receive a `MyCustomResult` from any Experiment.
+
diff --git a/docs/for-developers/recipes/add-a-visualization.md b/docs/for-developers/recipes/add-a-visualization.md
deleted file mode 100644
index 8a4ddcd3aa448112aa65773a564af8a18aa07cde..0000000000000000000000000000000000000000
--- a/docs/for-developers/recipes/add-a-visualization.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# 🚧 Add a visualization
-
-//TODO ResultUnion, gateway and frontend