diff --git a/src/composables/usePlannerState.js b/src/composables/usePlannerState.js
new file mode 100644
index 0000000..1af94ac
--- /dev/null
+++ b/src/composables/usePlannerState.js
@@ -0,0 +1,33 @@
+import { ref } from 'vue'
+
+const numbers = ref([])
+const clickCount = ref(1)
+const listOfTrips = ref([])
+
+function createEmptyGrid() {
+    return Array.from({ length: 100 }, (_, i) => ({
+        variable: [],
+        x: i % 10,
+        y: 9 - Math.floor(i / 10),
+        index: i,
+        isPlatform: false,
+        isQR: false,
+        BgImg: 'images/ArUco-marker.jpg',
+    }))
+}
+
+function ensureGridInitialized() {
+    if (numbers.value.length === 0) {
+        numbers.value = createEmptyGrid()
+    }
+}
+
+export function usePlannerState() {
+    ensureGridInitialized()
+
+    return {
+        numbers,
+        clickCount,
+        listOfTrips,
+    }
+}
diff --git a/src/views/PlannerView.vue b/src/views/PlannerView.vue
index f18135e..0da68eb 100644
--- a/src/views/PlannerView.vue
+++ b/src/views/PlannerView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, h, inject, provide } from "vue";
+import { ref, h, inject, provide } from "vue";
 import { useRouter } from "vue-router";
 import izitoast from "@/shared/izitoast";
 import { useEventListener } from "@vueuse/core";
@@ -16,32 +16,17 @@ import Trash from "@/components/UI/svg/Trash.vue";
 import Back from "@/components/UI/svg/Back.vue";
 import { NTooltip } from 'naive-ui'
 import { useFlightCode } from '@/composables/useFlightCode'
+import { usePlannerState } from '@/composables/usePlannerState'
 
 
 const router = useRouter()
 const { finallyText } = useFlightCode()
+const { numbers, clickCount, listOfTrips } = usePlannerState()
 
-const numbers = ref([]);
-const clickCount = ref(1);
-const listOfTrips = ref([]);
 const isModalVisible = ref(false);
 const dropMenu = ref(null);
 provide('dropMenu', dropMenu);
 
-onMounted(() => {
-    for (let i = 0; i < 100; i++) {
-        numbers.value.push({
-            variable: [],
-            x: i % 10,
-            y: 9 - Math.floor(i / 10),
-            index: i,
-            isPlatform: false,
-            isQR: false,
-            BgImg: 'images/ArUco-marker.jpg'
-        });
-    }
-});
-
 function setNumber(item) {
     let valueOfMarker = item.variable[0];
     if (valueOfMarker === "") {