diff --git a/app.vue b/app.vue
index 8265840..c835388 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="app-component">
-    <RangesShow :data-json="data" @selected="itemClicked($event.item)" />
+    <NuxtLink to="/">
+      Home
+    </NuxtLink>
+    <NuxtLink to="/ranges">
+      Ranges
+    </NuxtLink>
+    <NuxtPage :page-key="(route: RouteLocation) => route.fullPath" />
+    <!-- <RangesShow :data-json="data" @selected="itemClicked($event.item)" />
     <ProductModal
       v-if="selectedItem"
       :id="modalId"
@@ -8,7 +15,7 @@
       :settings="data.modalSettings"
       @saved="SaveContact"
     />
-    <AdministrativeModal :id="adminModalId" :contacts="contacts" />
+    <AdministrativeModal :id="adminModalId" :contacts="contacts" /> -->
   </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..ee46702
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="page-home">
+    <h1>Home</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "HomePage",
+  props: {
+  },
+  methods: {
+  }
+});
+</script>
diff --git a/pages/ranges/[slug].vue b/pages/ranges/[slug].vue
new file mode 100644
index 0000000..c2308ab
--- /dev/null
+++ b/pages/ranges/[slug].vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="page-ranges-index">
+    <h1>Range {{ router.params.slug }}</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
+
+export default defineComponent({
+  name: "RangesIndex",
+  props: {
+  },
+  data(): {
+    router: RouteLocationNormalizedLoaded
+  } {
+    return {
+      router: useRoute()
+    };
+  },
+  mounted() {
+    const route = useRoute();
+    console.log(route);
+  },
+  methods: {
+  }
+});
+</script>
diff --git a/pages/ranges/index.vue b/pages/ranges/index.vue
new file mode 100644
index 0000000..0188f2c
--- /dev/null
+++ b/pages/ranges/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="page-ranges-index">
+    <h1>RangesIndex</h1>
+    <NuxtLink to="/ranges/charcuterie">
+      charcuterie
+    </NuxtLink>
+    <br>
+    <NuxtLink to="/ranges/panés">
+      panés
+    </NuxtLink>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useRoute } from "vue-router";
+
+export default defineComponent({
+  name: "RangesIndex",
+  props: {
+  },
+  mounted() {
+    const route = useRoute();
+    console.log(route);
+  },
+  methods: {
+  }
+});
+</script>