From f54651cdfdce4dbc2a65e8f6699d2e3e76303edf Mon Sep 17 00:00:00 2001
From: Leo Nicolle <leo@linkurio.us>
Date: Tue, 31 Oct 2023 18:50:16 +0100
Subject: [PATCH] added style for non solution

---
 client/public/test-db-4.json                  | 1318 ++++++++++++++++
 client/public/test-db-5.json                  | 1330 +++++++++++++++++
 client/src/api/index.ts                       |   14 +-
 client/src/components/fonts/FontLoader.vue    |   11 +-
 client/src/components/fonts/FontSelector.vue  |    2 +
 client/src/components/fonts/load-font.ts      |   17 +-
 client/src/components/forms/GridStyleForm.vue |   14 +-
 client/src/components/svg-renderer/Grid.vue   |   40 +-
 client/src/i18n/languages/en-en.ts            |    1 +
 client/src/i18n/languages/es-es.ts            |    1 +
 client/src/i18n/languages/fr-fr.ts            |    1 +
 client/src/views/Fonts.vue                    |    2 -
 client/src/views/editors/SolutionsEditor.vue  |    5 +-
 client/src/views/editors/StyleEditor.vue      |    1 +
 database/src/idb.ts                           |   98 +-
 database/src/supadb.ts                        |    2 +-
 database/src/types.ts                         |    1 -
 grid/src/types.ts                             |    9 +
 18 files changed, 2792 insertions(+), 75 deletions(-)
 create mode 100644 client/public/test-db-4.json
 create mode 100644 client/public/test-db-5.json

diff --git a/client/public/test-db-4.json b/client/public/test-db-4.json
new file mode 100644
index 0000000..b60782a
--- /dev/null
+++ b/client/public/test-db-4.json
@@ -0,0 +1,1318 @@
+{
+  "grids": [
+    {
+      "id": "bf487ae7-e131-4fe9-bd58-0929d5a3c552",
+      "rows": 10,
+      "cols": 10,
+      "cells": [
+        [
+          {
+            "x": 0,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "rightdown",
+              "none",
+              "downright"
+            ],
+            "suggestion": "",
+            "text": "Def\n\nDef2"
+          },
+          {
+            "x": 1,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          },
+          {
+            "x": 1,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "O"
+          },
+          {
+            "x": 2,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "U"
+          },
+          {
+            "x": 3,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          },
+          {
+            "x": 4,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "O"
+          },
+          {
+            "x": 5,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "U"
+          },
+          {
+            "x": 6,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 1,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 2,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 2,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 3,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 3,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 4,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 4,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 5,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 6,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 6,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 6,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 7,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 7,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 8,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 9,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ]
+      ],
+      "comment": "",
+      "created": 1698414350249,
+      "title": "Nouvelle Grille",
+      "styleId": "default"
+    }
+  ],
+  "styles": [
+    {
+      "id": "default",
+      "name": "Default",
+      "grid": {
+        "cellSize": 54,
+        "borderSize": 1,
+        "borderColor": "#000000",
+        "outerBorderSize": 2,
+        "outerBorderColor": "#000000",
+        "spaceSize": 4
+      },
+      "definition": {
+        "font": "sans-serif",
+        "size": 12,
+        "color": "black",
+        "backgroundColor": "#ccc"
+      },
+      "arrow": {
+        "size": 10,
+        "color": "#000000"
+      },
+      "paper": {
+        "width": 21,
+        "height": 29.7,
+        "orientation": "portrait",
+        "dpi": 300,
+        "margin": {
+          "top": 1,
+          "bottom": 1,
+          "left": 1,
+          "right": 1
+        }
+      }
+    },
+    {
+      "id": "solution",
+      "name": "solution",
+      "grid": {
+        "cellSize": 20,
+        "borderSize": 1,
+        "borderColor": "#000000",
+        "outerBorderSize": 2,
+        "outerBorderColor": "#000000",
+        "spaceSize": 4
+      },
+      "definition": {
+        "font": "sans-serif",
+        "size": 12,
+        "color": "black",
+        "backgroundColor": "#ccc"
+      },
+      "arrow": {
+        "size": 10,
+        "color": "#000000"
+      },
+      "paper": {
+        "width": 21,
+        "height": 29.7,
+        "orientation": "portrait",
+        "dpi": 300,
+        "margin": {
+          "top": 1,
+          "bottom": 1,
+          "left": 1,
+          "right": 1
+        }
+      },
+      "grids": {
+        "rows": 2,
+        "cols": 2,
+        "gridN": {
+          "font": "sans-serif",
+          "size": "1em",
+          "color": "black",
+          "margin": {
+            "bottom": "0.5rem"
+          }
+        }
+      },
+      "words": {
+        "font": "sans-serif",
+        "size": "1em",
+        "color": "black",
+        "tolerance": 2
+      },
+      "size": {
+        "font": "sans-serif",
+        "size": "1.5em",
+        "color": "black"
+      },
+      "pagination": {
+        "font": "sans-serif",
+        "size": "1.5em",
+        "color": "black",
+        "startIdx": 1,
+        "align": "left",
+        "margin": {
+          "top": "1rem",
+          "bottom": "1rem",
+          "left": "1rem"
+        }
+      },
+      "isSolution": true
+    }
+  ],
+  "words": []
+}
\ No newline at end of file
diff --git a/client/public/test-db-5.json b/client/public/test-db-5.json
new file mode 100644
index 0000000..b55035f
--- /dev/null
+++ b/client/public/test-db-5.json
@@ -0,0 +1,1330 @@
+{
+  "fonts": [],
+  "grids": [
+    {
+      "id": "3740f074-01f1-4c9d-9329-a68351812ea2",
+      "rows": 10,
+      "cols": 10,
+      "cells": [
+        [
+          {
+            "x": 0,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": "coucou\n\ncaca"
+          },
+          {
+            "x": 1,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 0,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 0,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          },
+          {
+            "x": 1,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "O"
+          },
+          {
+            "x": 2,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "U"
+          },
+          {
+            "x": 3,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          },
+          {
+            "x": 4,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "O"
+          },
+          {
+            "x": 5,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "U"
+          },
+          {
+            "x": 6,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          },
+          {
+            "x": 7,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "O"
+          },
+          {
+            "x": 8,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "U"
+          },
+          {
+            "x": 9,
+            "y": 1,
+            "definition": false,
+            "highlighted": true,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": "C"
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 2,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 2,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 2,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 2,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 3,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 3,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 3,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 4,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 4,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 5,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 5,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 5,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 6,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 6,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 6,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 7,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 7,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 8,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 8,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ],
+        [
+          {
+            "x": 0,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 1,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 2,
+            "y": 9,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 3,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 4,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 5,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 6,
+            "y": 9,
+            "definition": true,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [
+              "none",
+              "none",
+              "none"
+            ],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 7,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 8,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          },
+          {
+            "x": 9,
+            "y": 9,
+            "definition": false,
+            "highlighted": false,
+            "spaceV": false,
+            "spaceH": false,
+            "arrows": [],
+            "suggestion": "",
+            "text": ""
+          }
+        ]
+      ],
+      "comment": "",
+      "created": 1698760656952,
+      "title": "Nouvelle Grille",
+      "styleId": "default"
+    }
+  ],
+  "styles": [
+    {
+      "id": "default",
+      "name": "Default",
+      "grid": {
+        "cellSize": 54,
+        "borderSize": 1,
+        "borderColor": "#000000",
+        "outerBorderSize": 2,
+        "outerBorderColor": "#000000",
+        "spaceSize": 4
+      },
+      "definition": {
+        "family": "Roboto",
+        "isGoogle": true,
+        "weight": "400",
+        "size": 12,
+        "color": "black",
+        "backgroundColor": "#ccc"
+      },
+      "arrow": {
+        "size": 10,
+        "color": "#000000"
+      },
+      "paper": {
+        "width": 21,
+        "height": 29.7,
+        "orientation": "portrait",
+        "dpi": 300,
+        "margin": {
+          "top": 1,
+          "bottom": 1,
+          "left": 1,
+          "right": 1
+        }
+      }
+    },
+    {
+      "id": "solution",
+      "name": "solution",
+      "grid": {
+        "cellSize": 20,
+        "borderSize": 1,
+        "borderColor": "#000000",
+        "outerBorderSize": 2,
+        "outerBorderColor": "#000000",
+        "spaceSize": 4
+      },
+      "definition": {
+        "family": "Roboto",
+        "isGoogle": true,
+        "weight": "400",
+        "size": 12,
+        "color": "black",
+        "backgroundColor": "#ccc"
+      },
+      "arrow": {
+        "size": 10,
+        "color": "#000000"
+      },
+      "paper": {
+        "width": 21,
+        "height": 29.7,
+        "orientation": "portrait",
+        "dpi": 300,
+        "margin": {
+          "top": 1,
+          "bottom": 1,
+          "left": 1,
+          "right": 1
+        }
+      },
+      "grids": {
+        "rows": 2,
+        "cols": 2,
+        "gridN": {
+          "family": "Roboto",
+          "isGoogle": true,
+          "weight": "400",
+          "size": "1em",
+          "color": "black",
+          "margin": {
+            "bottom": "0.5rem"
+          }
+        }
+      },
+      "words": {
+        "family": "Roboto",
+        "isGoogle": true,
+        "weight": "400",
+        "size": "1em",
+        "color": "black",
+        "tolerance": 2
+      },
+      "size": {
+        "family": "Roboto",
+        "isGoogle": true,
+        "weight": "400",
+        "size": "1.5em",
+        "color": "black"
+      },
+      "pagination": {
+        "family": "Roboto",
+        "isGoogle": true,
+        "weight": "400",
+        "size": "1.5em",
+        "color": "black",
+        "startIdx": 1,
+        "align": "left",
+        "margin": {
+          "bottom": "1rem",
+          "left": "1rem"
+        }
+      },
+      "isSolution": true
+    }
+  ],
+  "words": []
+}
\ No newline at end of file
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 0cb75b7..94a2e9d 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -1,19 +1,17 @@
 import { Grid } from 'grid';
 import { Idatabase, SupaDB, setDatabase } from 'database';
 import axios from 'axios';
-const debugMigration = false;
+const debugMigration = true;
 class API {
   public idb: Idatabase;
   public supadb: SupaDB;
   public _mode: string;
   constructor(mode: string = 'unknown') {
-    let prepromise: Promise<unknown> = Promise.resolve();
-    if (debugMigration) {
-      prepromise = prepromise
-        .then(() => axios.get('/test-db.json'))
-        .then(({ data }) => setDatabase(data, 4))
-    }
-    this.idb = new Idatabase(prepromise);
+    // axios.get('/test-db-5.json')
+    // .then(({ data }) => {
+    //   setDatabase(data, 5)
+    // });
+    this.idb = new Idatabase();
     this.supadb = new SupaDB('https://tnvxmrqhkdlynhtdzmpw.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRudnhtcnFoa2RseW5odGR6bXB3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODIyNTM0MTEsImV4cCI6MTk5NzgyOTQxMX0.4PczPPAxbkwBvig7NTHNbR8JumuwPPqfyS_kGnkxP5I');
     this._mode = mode;
   }
diff --git a/client/src/components/fonts/FontLoader.vue b/client/src/components/fonts/FontLoader.vue
index 4c2906b..40c5993 100644
--- a/client/src/components/fonts/FontLoader.vue
+++ b/client/src/components/fonts/FontLoader.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from "vue";
+import { defineProps, onMounted, ref } from "vue";
 import { watch } from "vue";
 import { loadFont } from "./load-font";
 import axios from "axios";
@@ -15,7 +15,8 @@ const props = defineProps<{
   isEmbedded?: boolean;
 }>();
 const url = ref<string | null>(null);
-watch([props], () => {
+
+function update() {
   const { value } = props;
   if (isGoogleFont(value)) {
     let weightUrl = `https://fonts.googleapis.com/css?family=${value.family}:${value.weight}`;
@@ -31,6 +32,12 @@ watch([props], () => {
   }
   url.value = null;
   loadFont(value);
+}
+watch([props], () => {
+  update();
+});
+onMounted(() => {
+  update();
 });
 </script>
 
diff --git a/client/src/components/fonts/FontSelector.vue b/client/src/components/fonts/FontSelector.vue
index 9efad60..5c44fa8 100644
--- a/client/src/components/fonts/FontSelector.vue
+++ b/client/src/components/fonts/FontSelector.vue
@@ -26,6 +26,8 @@
         v-else
         :role="`${rolePrefix}-size`"
         v-model:value="value.size"
+        :precision="2"
+        :step="0.1"
       />
     </n-form-item>
     <n-form-item :label="$t('forms.color')" path="color">
diff --git a/client/src/components/fonts/load-font.ts b/client/src/components/fonts/load-font.ts
index 460bfbc..b16d75f 100644
--- a/client/src/components/fonts/load-font.ts
+++ b/client/src/components/fonts/load-font.ts
@@ -1,7 +1,18 @@
 import { LocalFont } from "grid";
+import { api } from "../../api";
+export const loadedFonts = new Set();
 
 export function loadFont(font: LocalFont) {
-  const fontface = new FontFace(font.family, `url(${font.content})`);
-  return fontface.load()
-    .then((fontface) => document.fonts.add(fontface));
+  if (loadedFonts.has(font.family)) {
+    return Promise.resolve();
+  }
+  return api.db.getFont(font.family)
+    .then((font) => {
+      const fontface = new FontFace(font.family, `url(${font.content})`);
+      return fontface.load();
+    })
+    .then((fontface) => {
+      loadedFonts.add(font.family);
+      document.fonts.add(fontface);
+    });
 }
\ No newline at end of file
diff --git a/client/src/components/forms/GridStyleForm.vue b/client/src/components/forms/GridStyleForm.vue
index 93d3365..3a44378 100644
--- a/client/src/components/forms/GridStyleForm.vue
+++ b/client/src/components/forms/GridStyleForm.vue
@@ -51,6 +51,16 @@
           <n-input-number role="space" v-model:value="value.grid.spaceSize" />
         </n-form-item>
       </div>
+      <h3>{{ $t("forms.solutions") }}</h3>
+      <FontSelector v-model="value.solutions" role-prefix="solutions" />
+      <n-form-item :label="$t('forms.offset')" path="top">
+        <n-input-number
+          v-model:value="value.solutions.top"
+          :step="0.5"
+          :precision="1"
+          role="solutions-top"
+        />
+      </n-form-item>
       <div v-if="definition">
         <h3>{{ $t("forms.definitions") }}</h3>
         <FontSelector v-model="value.definition" rolePrefix="definition" />
@@ -126,7 +136,9 @@ const emit = defineEmits<{
   (event: "update:modelValue", value: GridStyle): void;
 }>();
 const value = useModel<GridStyle>(props, emit);
-
+watch(value.value, () => {
+  emit("update:modelValue", value.value);
+});
 </script>
 
 <style scoped>
diff --git a/client/src/components/svg-renderer/Grid.vue b/client/src/components/svg-renderer/Grid.vue
index afb0779..5ffdd3d 100644
--- a/client/src/components/svg-renderer/Grid.vue
+++ b/client/src/components/svg-renderer/Grid.vue
@@ -13,7 +13,8 @@
     @mouseout="onMouseLeave"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <FontLoader :value="style.definition"/>
+    <FontLoader :value="style.definition" />
+    <FontLoader v-if="isSolutionStyle(style)" :value="style.solutions" />
     <defs></defs>
     <g
       class="cells"
@@ -60,10 +61,13 @@
           </text>
           <text
             :x="xText(cell)"
-            :y="yText(cell) + (6 * cellWidth(style)) / 7"
-            :font-family="textFont"
+            :y="yText(cell) + cellWidth(style) / 2 + textTopOffset"
+            alignment-baseline="central"
+            dominant-baseline="center"
+            :font-family="textFontFamily"
+            :font-weight="textFontWeight"
+            :fill="textFontColor"
             :font-size="textSize"
-            dominant-baseline="alphabetic"
             v-else-if="!cell.definition && exportOptions.texts"
           >
             {{ cell.text || cell.suggestion }}
@@ -182,6 +186,8 @@ import {
   getLines,
   arrowPositions,
   ArrowDir,
+  SolutionStyle,
+  isSolutionStyle,
 } from "grid";
 import { ExportOptions } from "../../types";
 import { getCellClass } from "../../js/utils";
@@ -197,7 +203,7 @@ const props = defineProps<{
   /**
    * The style of the grid
    */
-  style: GridStyle;
+  style: SolutionStyle | GridStyle;
   /**
    * The focused cell (can be nullCell)
    */
@@ -237,9 +243,20 @@ const lineColor = computed(() => props.style.grid.borderColor);
 const spaceStroke = computed(() => props.style.grid.spaceSize);
 const outerLineStroke = computed(() => props.style.grid.outerBorderSize);
 const outerLineColor = computed(() => props.style.grid.outerBorderColor);
-const defSize = computed(() => props.style.definition.size);
-const textSize = computed(() => props.style.grid.cellSize);
-const textFont = computed(() => `roboto`);
+const defSize = computed(
+  () => (props.style.grid.cellSize / 4) * props.style.definition.size
+);
+const textSize = computed(() => {
+  return (
+    (isSolutionStyle(props.style) ? props.style.solutions.size : 1) *
+    props.style.grid.cellSize
+  );
+});
+const textFontFamily = computed(() => props.style.solutions.family);
+const textFontWeight = computed(() => props.style.solutions.weight);
+const textFontColor = computed(() => props.style.solutions.color);
+const textTopOffset = computed(() => props.style.solutions.top);
+
 const defFontFamily = computed(() => `${props.style.definition.family}`);
 const defFontWeight = computed(() => `${props.style.definition.weight}`);
 
@@ -313,8 +330,7 @@ const splits = computed(() =>
         ratio * cellWidth(props.style);
       return {
         x1: cell.x * cellAndBorderWidth(props.style),
-        x2:
-          cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style),
+        x2: cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style),
         y1: y,
         y2: y,
       };
@@ -352,9 +368,7 @@ const spaces = computed(() => {
 });
 
 function xText(cell: Cell) {
-  return (
-    cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style) / 2
-  );
+  return cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style) / 2;
 }
 function yText(cell: Cell) {
   return cell.y * cellAndBorderWidth(props.style);
diff --git a/client/src/i18n/languages/en-en.ts b/client/src/i18n/languages/en-en.ts
index fecb28c..fda3e6b 100644
--- a/client/src/i18n/languages/en-en.ts
+++ b/client/src/i18n/languages/en-en.ts
@@ -91,6 +91,7 @@ export const lang = {
     randomize: "Randomize",
     fontFamily: "Font family",
     fontWeight: "Font weight",
+    offset: "Offset",
   },
   tooltips: {
     incomplete: "is incomplete",
diff --git a/client/src/i18n/languages/es-es.ts b/client/src/i18n/languages/es-es.ts
index a3506c4..483770c 100644
--- a/client/src/i18n/languages/es-es.ts
+++ b/client/src/i18n/languages/es-es.ts
@@ -91,6 +91,7 @@ export const lang = {
         randomize: "Randomizar",
         fontFamily: "Fuente",
         fontWeight: "Peso",
+        offset: "Desplazamiento",
     },
     tooltips: {
         incomplete: "esta incompleto",
diff --git a/client/src/i18n/languages/fr-fr.ts b/client/src/i18n/languages/fr-fr.ts
index 15a8572..2a5078b 100644
--- a/client/src/i18n/languages/fr-fr.ts
+++ b/client/src/i18n/languages/fr-fr.ts
@@ -91,6 +91,7 @@ export const lang = {
         randomize: "Regénérer",
         fontFamily: "Police",
         fontWeight: "Epaisseur",
+        offset: "Décalage",
 
     },
     tooltips: {
diff --git a/client/src/views/Fonts.vue b/client/src/views/Fonts.vue
index 7f129d6..bb0ca33 100644
--- a/client/src/views/Fonts.vue
+++ b/client/src/views/Fonts.vue
@@ -57,9 +57,7 @@ function onUpload(filesContents: [string, string][]) {
         .replace(/\..*/, "")
         .replace(/[^\w]/gi, "")
         .replace(/[0-9]+/gi, "");
-      debugger;
       return api.db.pushFont({
-        id: uuid(),
         family,
         updated: Date.now(),
         content: dataURL,
diff --git a/client/src/views/editors/SolutionsEditor.vue b/client/src/views/editors/SolutionsEditor.vue
index f80e3e0..9922291 100644
--- a/client/src/views/editors/SolutionsEditor.vue
+++ b/client/src/views/editors/SolutionsEditor.vue
@@ -2,7 +2,7 @@
   <Layout>
     <template #left-panel v-if="grids.length && style">
       <OptionsForm v-model="style" @update:modelValue="save" grid format>
-        <SolutionsForm v-model="style" @update:modelValue="save" />
+        <SolutionsForm v-model="style" @update:modelValue="save"/>
       </OptionsForm>
     </template>
     <template #body>
@@ -81,10 +81,11 @@ function fetch() {
 }
 
 function save() {
+  console.log("on update");
   clearTimeout(saveTimeout.value);
   saveTimeout.value = +setTimeout(() => {
     if (!style.value) return;
-    // api.db.pushStyle(toRaw(style.value) as unknown as SolutionStyle);
+    api.db.pushStyle(toRaw(style.value) as unknown as SolutionStyle);
   }, 100);
 }
 
diff --git a/client/src/views/editors/StyleEditor.vue b/client/src/views/editors/StyleEditor.vue
index 4d12c9d..b7c67eb 100644
--- a/client/src/views/editors/StyleEditor.vue
+++ b/client/src/views/editors/StyleEditor.vue
@@ -60,6 +60,7 @@ function fetch() {
 }
 
 function onUpdate() {
+  console.log('on update');
   clearTimeout(saveTimeout.value);
   saveTimeout.value = setTimeout(() => {
     if (!style.value) return;
diff --git a/database/src/idb.ts b/database/src/idb.ts
index aae24ed..4431259 100644
--- a/database/src/idb.ts
+++ b/database/src/idb.ts
@@ -5,6 +5,7 @@ import {
   defaultSolutionStyle,
   isSolutionStyle,
   Font as GridFont,
+  defaultTextStyle,
 } from 'grid';
 import { Database } from './db';
 import { mergeOptionsWithDefaults } from './utils';
@@ -34,8 +35,8 @@ export interface MotsFlexDB extends DBSchema {
 }
 
 async function create() {
-  let promise = Promise.resolve();
-  const db = await openDB<MotsFlexDB>('mots-flex-db', 5, {
+  let promise: Promise<unknown> = Promise.resolve();
+  const db = await openDB<MotsFlexDB>('mots-flex-db', 6, {
     upgrade(db, old, _, transaction) {
       // @ts-ignore
       if (db.objectStoreNames.contains('style')) {
@@ -61,10 +62,10 @@ async function create() {
         optionStore.createIndex('by-id', 'id');
       }
       if (!db.objectStoreNames.contains('fonts')) {
-        const gridStore = db.createObjectStore('fonts', {
-          keyPath: 'id',
+        const fontStore = db.createObjectStore('fonts', {
+          keyPath: 'family',
         });
-        gridStore.createIndex('by-id', 'id');
+        fontStore.createIndex('by-id', 'family');
       }
 
       // @ts-ignore
@@ -84,49 +85,58 @@ async function create() {
       if (old <= 3) {
         const gridStore = transaction.objectStore('grids');
         promise = promise.then(() => gridStore.getAll())
-          .then(grids => {
-            grids.forEach(grid => {
-              // @ts-ignore
-              grid.styleId = grid.optionsId;
-              // @ts-ignore
-              delete grid.optionsId;
-              gridStore.put(grid as GridState);
-            });
-          });
+          .then(grids => Promise.all(grids.map(grid => {
+            // @ts-ignore
+            grid.styleId = grid.optionsId;
+            // @ts-ignore
+            delete grid.optionsId;
+            return gridStore.put(grid as GridState);
+          })));
       }
       if (old <= 5) {
         const styleStore = transaction.objectStore('styles');
         promise = promise.then(() => styleStore.getAll())
-          .then(styles => {
-            styles.forEach(style => {
-              const defs: GridFont[] = [style.definition];
-              if (isSolutionStyle(style)) {
-                //@ts-ignore
-                delete style.pagination.margin.top
-                defs.push(style.grids.gridN);
-                defs.push(style.pagination);
-                defs.push(style.words);
-                defs.push(style.size);
-              }
-              defs.forEach(def => {
-                // @ts-ignore
-                delete def.font;
-                // @ts-ignore
-                delete def.name;
-                def.family = 'Roboto';
-                def.isGoogle = true;
-                def.weight = "400";
-                styleStore.put(style as GridStyle);
-              })
+          .then(styles => Promise.all(styles.map(style => {
+            const defs: GridFont[] = [style.definition];
+            if (isSolutionStyle(style)) {
+              //@ts-ignore
+              delete style.pagination.margin.top
+              defs.push(style.grids.gridN);
+              defs.push(style.pagination);
+              defs.push(style.words);
+              defs.push(style.size);
+            }
+            defs.forEach(def => {
+              // @ts-ignore
+              delete def.font;
+              // @ts-ignore
+              delete def.name;
+              def.family = 'Roboto';
+              def.isGoogle = true;
+              def.weight = "400";
             });
-          });
+            return styleStore.put(style as GridStyle);
+          })));
+      }
+      if (old <= 6) {
+        console.log('UPDATE TO 6');
+        const styleStore = transaction.objectStore('styles');
+        db.deleteObjectStore('fonts');
+        const fontStore = db.createObjectStore('fonts', {
+          keyPath: 'family',
+        });
+        fontStore.createIndex('by-id', 'family');
+        promise = promise
+          .then(() => styleStore.getAll())
+          .then(styles => Promise.all(styles.map(style => {
+            style.definition.size = 1;
+            style.solutions = { ...defaultTextStyle, size: 1, top: 0 };
+            return styleStore.put(style as GridStyle);
+          })));
       }
-
     },
   })
-
   return promise.then(() => db);
-
 }
 
 export class Idatabase extends Database {
@@ -136,7 +146,10 @@ export class Idatabase extends Database {
     if (!prepromise) {
       prepromise = Promise.resolve();
     }
-    this.loadingPromise = prepromise.then(() => create())
+    this.loadingPromise = prepromise.then(() => {
+      console.log('Create');
+      return create()
+    })
       .then((db) => {
         return db.get('styles', defaultStyles.id)
           .then((style) => style ? Promise.resolve('')
@@ -259,11 +272,11 @@ export function deleteDatabase() {
   });
 }
 export function setDatabase(json: any, version: number) {
+  let promise = Promise.resolve();
   return deleteDatabase()
     .then(() => {
       return openDB<MotsFlexDB>('mots-flex-db', version, {
         upgrade(db, __, _, transaction) {
-          let promise = Promise.resolve();
           Object.entries(json).forEach(([key, values]) => {
             // @ts-ignore
             const objstore = db.createObjectStore(key, {
@@ -285,5 +298,6 @@ export function setDatabase(json: any, version: number) {
           });
         }
       });
-    });
+    })
+    .then(() => promise);
 }
\ No newline at end of file
diff --git a/database/src/supadb.ts b/database/src/supadb.ts
index ac29299..0b15074 100644
--- a/database/src/supadb.ts
+++ b/database/src/supadb.ts
@@ -162,7 +162,7 @@ export class SupaDB extends Database {
       userid: this.userid,
       data: fonts,
     });
-    return font.id;
+    return font.family;
   }
 
   async deleteFont(fontId: string) {
diff --git a/database/src/types.ts b/database/src/types.ts
index 4855f7d..b29855d 100644
--- a/database/src/types.ts
+++ b/database/src/types.ts
@@ -1,7 +1,6 @@
 import { GridStyle, GridState } from "grid";
 
 export type Font = {
-  id: string;
   family: string;
   content: string;
   updated: number;
diff --git a/grid/src/types.ts b/grid/src/types.ts
index a9c9a71..a9b318f 100644
--- a/grid/src/types.ts
+++ b/grid/src/types.ts
@@ -177,6 +177,10 @@ export type GridStyle = {
   definition: TextStyle<number> & {
     backgroundColor: string;
   };
+  /**
+  * Style of the solutions within the grid
+  */
+  solutions: TextStyle<number> & { top: number };
   /**
    * Arrow style
    */
@@ -251,6 +255,11 @@ export const defaultStyles: GridStyle = {
     outerBorderColor: '#000000',
     spaceSize: 4,
   },
+  solutions: {
+    ...defaultTextStyle,
+    size: 1,
+    top: 0
+  },
   definition: {
     ...defaultTextStyle,
     size: 12,