diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
new file mode 100644
index 00000000..a5c532b7
--- /dev/null
+++ b/app/composables/useQueryCRUD.ts
@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryCRUDMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  type ModeType = 'list' | 'entry'
+  const mode = useState<ModeType>('route-query-' + key, () => 'list')
+  const modeSrc = computed<ModeType>({
+    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+    set: (val) => {
+      mode.value = val
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  const goToEntry = () => {
+    modeSrc.value = 'entry'
+  }
+  const backToList = () => {
+    modeSrc.value = 'list'
+  }
+
+  return { mode, goToEntry, backToList }
+}
+
+export function useQueryCRUDRecordId(key: string = 'record-id') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const recordId = useState('route-query-' + key, () => '')
+  computed({
+    get: () => route.query[key],
+    set: (val: string) => {
+      recordId.value = val
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  return { recordId }
+}