diff --git a/frontend/src/lib/ButtonMain.svelte b/frontend/src/lib/ButtonMain.svelte
index 9e72b45..97c274c 100644
--- a/frontend/src/lib/ButtonMain.svelte
+++ b/frontend/src/lib/ButtonMain.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
     export let onClick = (e?) => {};
+    export let square = false;
 </script>
 
 <button
     type="button"
-    class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 w-6 h-6 justify-center"
+    class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 px-2 justify-center {square
+        ? 'w-6 h-6'
+        : ''}"
     on:click|preventDefault={onClick}
 >
     <slot />
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 60311e5..6a6db23 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -10,4 +10,11 @@ export interface Word {
     word: string;
     definition: string;
     level: Level;
+}
+
+export interface Grid {
+    id: number;
+    words: Word[];
+    width: number;
+    height: number;
 }
\ No newline at end of file
diff --git a/frontend/src/routes/ma_chaeliou/+page.svelte b/frontend/src/routes/ma_chaeliou/+page.svelte
index 08caf9f..5bf0d53 100644
--- a/frontend/src/routes/ma_chaeliou/+page.svelte
+++ b/frontend/src/routes/ma_chaeliou/+page.svelte
@@ -1,7 +1,22 @@
 <script>
     import { page } from "$app/stores";
+    import ButtonMain from "$lib/ButtonMain.svelte";
+    import axios from "$lib/api";
+
+    function newGrid() {
+        try {
+            axios.post("grids/").then((data) => {
+                const gridId = data.data.id;
+                window.location.href = "/ma_chaeliou/" + gridId;
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
 </script>
 
 <main>
-    {$page.url.pathname}
+    <ButtonMain onClick={newGrid}
+        ><span class="fa-solid fa-plus mr-2" />Krouiñ ur gael</ButtonMain
+    >
 </main>
diff --git a/frontend/src/routes/ma_chaeliou/[id]/+page.svelte b/frontend/src/routes/ma_chaeliou/[id]/+page.svelte
new file mode 100644
index 0000000..d10f367
--- /dev/null
+++ b/frontend/src/routes/ma_chaeliou/[id]/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import ButtonMain from "$lib/ButtonMain.svelte";
+    import axios from "$lib/api";
+    import { onMount } from "svelte";
+    import type { Grid } from "$lib/types";
+    import { snakeToCamelCase } from "$lib/case";
+
+    let grid: Grid | null;
+    $: grid = null;
+
+    function fetchData() {
+        try {
+            axios.get("grids/" + $page.params.id + "/").then((data) => {
+                grid = snakeToCamelCase(data.data);
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    onMount(() => {
+        fetchData();
+    });
+</script>
+
+<main>
+    {#if grid}
+        id : {grid.id}, width: {grid.width}, height: {grid.height}
+    {/if}
+</main>
diff --git a/frontend/src/routes/ma_geriou/+page.svelte b/frontend/src/routes/ma_geriou/+page.svelte
index 52169ee..2d2256b 100644
--- a/frontend/src/routes/ma_geriou/+page.svelte
+++ b/frontend/src/routes/ma_geriou/+page.svelte
@@ -37,9 +37,14 @@
 
     function fetchLevels() {
         try {
-            promiseLevels = axios.get("levels/").then((data) => {
-                levels = snakeToCamelCase(data.data);
-            });
+            promiseLevels = axios
+                .get("levels/")
+                .then((data) => {
+                    levels = snakeToCamelCase(data.data);
+                })
+                .then(() => {
+                    $form.level = levels[0].id.toString();
+                });
         } catch (e) {
             console.log(e);
         }
@@ -97,6 +102,12 @@
     onMount(() => {
         fetchData();
         fetchLevels();
+
+        window.addEventListener("keyup", (e) => {
+            if (e.key == "Escape") {
+                toggleFormNew();
+            }
+        });
     });
 </script>
 
@@ -139,7 +150,7 @@
                                     class="p-1 rounded-md border"
                                 >
                                     {#await promiseLevels then}
-                                        {#each levels as level, i}
+                                        {#each levels as level}
                                             <option value={level.levelNumber}>
                                                 {level.levelString}</option
                                             >
diff --git a/grids/migrations/0004_grid_height_grid_width.py b/grids/migrations/0004_grid_height_grid_width.py
new file mode 100644
index 0000000..bca9ba1
--- /dev/null
+++ b/grids/migrations/0004_grid_height_grid_width.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.5 on 2023-09-17 19:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("grids", "0003_rename_string_number_level_level_string"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="grid",
+            name="height",
+            field=models.IntegerField(default=0),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name="grid",
+            name="width",
+            field=models.IntegerField(default=0),
+            preserve_default=False,
+        ),
+    ]
diff --git a/grids/models.py b/grids/models.py
index 4cc5232..55a3b10 100644
--- a/grids/models.py
+++ b/grids/models.py
@@ -15,6 +15,13 @@ class Word(models.Model):
 class Grid(models.Model):
     level = models.ForeignKey(Level, on_delete=models.CASCADE, related_name="grids")
     words = models.ManyToManyField(Word, through="Placement")
+    width = models.IntegerField()
+    height = models.IntegerField()
+
+    def save(self, *args, **kwargs):
+        if not hasattr(self, "level") or self.level is None:
+            self.level = Level.objects.first()
+        super(Grid, self).save(*args, **kwargs)
 
 
 class Direction: