diff --git a/components/NewProject.vue b/components/NewProject.vue
new file mode 100644
index 0000000..8b6d8a4
--- /dev/null
+++ b/components/NewProject.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-dialog
+    v-model="props.show_dialog"
+    @click:outside="emit('close')"
+    max-width="800px"
+    radius="20px"
+    class="text-center"
+  >
+    <v-sheet border="md">
+      <v-card color="#3c9983">
+        <v-card-title>
+          <h3 class="mt-4">New Project</h3>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col>
+                <v-text-field label="Project Name" required></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions justify-center>
+          <v-btn
+            variant="outlined"
+            color="white"
+            text
+            @click="emit('close')"
+            class="ml-8 mb-4"
+            >Close</v-btn
+          >
+          <v-btn
+            variant="outlined"
+            class="mb-4"
+            color="white"
+            text
+            @click="emit('close')"
+            >Create</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script setup>
+const emit = defineEmits(["close"]);
+
+const props = defineProps({
+  show_dialog: { type: Boolean, required: true },
+});
+</script>
diff --git a/components/OpenProject.vue b/components/OpenProject.vue
new file mode 100644
index 0000000..0a00764
--- /dev/null
+++ b/components/OpenProject.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-dialog
+    v-model="props.show_dialog"
+    @click:outside="emit('close')"
+    max-width="800px"
+    class="text-center"
+  >
+    <v-sheet border="md">
+      <v-card color="#3c9983">
+        <v-card-title>
+          <h3 class="mt-4">Open Project</h3>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col>
+                <v-file-input label="Open Project" required></v-file-input>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions justify-center>
+          <v-btn
+            variant="outlined"
+            color="white"
+            text
+            @click="emit('close')"
+            class="ml-8 mb-4"
+            >Close</v-btn
+          >
+          <v-btn
+            variant="outlined"
+            class="mb-4"
+            color="white"
+            text
+            @click="emit('close')"
+            >Load</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script setup>
+const emit = defineEmits(["close"]);
+
+const props = defineProps({
+  show_dialog: { type: Boolean, required: true },
+});
+</script>
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 8225dc4..6ad267d 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -37,83 +37,8 @@
       </template>
     </v-tooltip>
 
-    <v-dialog
-      v-model="newproject"
-      max-width="800px"
-      radius="20px"
-      class="text-center"
-    >
-      <v-sheet border="md">
-        <v-card color="#3c9983">
-          <v-card-title>
-            <h3 class="mt-4">New Project</h3>
-          </v-card-title>
-          <v-card-text>
-            <v-container>
-              <v-row>
-                <v-col>
-                  <v-text-field label="Project Name" required></v-text-field>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-card-text>
-          <v-card-actions justify-center>
-            <v-btn
-              variant="outlined"
-              color="white"
-              text
-              @click="newproject = false"
-              class="ml-8 mb-4"
-              >Close</v-btn
-            >
-            <v-btn
-              variant="outlined"
-              class="mb-4"
-              color="white"
-              text
-              @click="newproject = false"
-              >Create</v-btn
-            >
-          </v-card-actions>
-        </v-card>
-      </v-sheet>
-    </v-dialog>
-    <v-dialog v-model="openproject" max-width="800px" class="text-center">
-      <v-sheet border="md">
-        <v-card color="#3c9983">
-          <v-card-title>
-            <h3 class="mt-4">Open Project</h3>
-          </v-card-title>
-          <v-card-text>
-            <v-container>
-              <v-row>
-                <v-col>
-                  <v-file-input label="Open Project" required></v-file-input>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-card-text>
-          <v-card-actions justify-center>
-            <v-btn
-              variant="outlined"
-              color="white"
-              text
-              @click="openproject = false"
-              class="ml-8 mb-4"
-              >Close</v-btn
-            >
-            <v-btn
-              variant="outlined"
-              class="mb-4"
-              color="white"
-              text
-              @click="openproject = false"
-              >Load</v-btn
-            >
-          </v-card-actions>
-        </v-card>
-      </v-sheet>
-    </v-dialog>
+    <NewProject :show_dialog="newproject" @close="newproject = false" />
+    <OpenProject :show_dialog="openproject" @close="openproject = false" />
   </v-navigation-drawer>
 </template>
 
@@ -121,7 +46,6 @@
 const drawer = ref(true);
 const newproject = ref(false);
 const openproject = ref(false);
-const router = useRouter();
 
 const items = ref([
   {
@@ -139,21 +63,6 @@ const items = ref([
     icon: "mdi-folder-outline",
     click: () => (openproject.value = true),
   },
-  {
-    title: "Supperposition",
-    icon: "mdi-layers",
-    click: () => navigateTo("/supperposition"),
-  },
-  {
-    title: "Download",
-    icon: "mdi-upload",
-    click: () => navigateTo("/download"),
-  },
-  {
-    title: "Settings",
-    icon: "mdi-cog",
-    click: () => navigateTo("/settings"),
-  },
 ]);
 
 let draggedItem = null;
diff --git a/pages/TreeObject.vue b/pages/TreeObject.vue
deleted file mode 100644
index 2d4acef..0000000
--- a/pages/TreeObject.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <v-container>
-    <v-row>
-      <v-col>
-        <v-treeview
-          v-model:selected="treeviewStore.selection"
-          :items="treeviewStore.items"
-          :select-strategy="treeviewStore.selectionType"
-          return-object
-          selectable
-          class="transparent-treeview"
-        ></v-treeview>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  color: white;
-}
-</style>
-
-<script setup>
-const treeviewStore = useTreeviewStore();
-</script>
diff --git a/pages/download.vue b/pages/download.vue
deleted file mode 100644
index cc340bc..0000000
--- a/pages/download.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/pages/extensions.vue b/pages/extensions.vue
deleted file mode 100644
index cc340bc..0000000
--- a/pages/extensions.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/pages/new-project.vue b/pages/new-project.vue
deleted file mode 100644
index cc340bc..0000000
--- a/pages/new-project.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/pages/settings.vue b/pages/settings.vue
deleted file mode 100644
index cc340bc..0000000
--- a/pages/settings.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/pages/supperposition.vue b/pages/supperposition.vue
deleted file mode 100644
index de35a77..0000000
--- a/pages/supperposition.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <StepImport class="mr-12" />
-</template>
-
-<script setup>
-import _ from "lodash";
-import FileSelector from "@geode/opengeodeweb-front/components/FileSelector.vue";
-import MissingFilesSelector from "@geode/opengeodeweb-front/components/MissingFilesSelector.vue";
-import ObjectSelector from "@geode/opengeodeweb-front/components/ObjectSelector.vue";
-import ImportFile from "@/components/ImportFile.vue";
-
-const geode_store = use_geode_store();
-const viewer_store = use_viewer_store();
-
-geode_store.$patch({ is_running: true });
-viewer_store.$patch({ is_running: true });
-
-const files = ref([]);
-const input_geode_object = ref("");
-const additional_files = ref([]);
-
-const stepper_tree = reactive({
-  current_step_index: ref(0),
-  files,
-  input_geode_object,
-  steps: [
-    {
-      step_title: "Please select a file to convert",
-      component: {
-        component_name: shallowRef(FileSelector),
-        component_options: {
-          multiple: true,
-        },
-      },
-      chips: computed(() => {
-        return files.value.map((file) => file.name);
-      }),
-    },
-    {
-      step_title: "Confirm the data type",
-      component: {
-        component_name: shallowRef(ObjectSelector),
-        component_options: {
-          filenames: computed(() => {
-            return files.value.map((file) => file.name);
-          }),
-        },
-      },
-      chips: computed(() => {
-        if (input_geode_object.value === "") {
-          return [];
-        } else {
-          return [input_geode_object.value];
-        }
-      }),
-    },
-
-    {
-      step_title: "Please select additionnal files",
-      component: {
-        component_name: shallowRef(MissingFilesSelector),
-        component_options: {
-          multiple: true,
-          input_geode_object,
-          filenames: computed(() => {
-            return files.value.map((file) => file.name);
-          }),
-        },
-      },
-      chips: computed(() => {
-        return additional_files.value.map(
-          (additional_file) => additional_file.name
-        );
-      }),
-    },
-    {
-      step_title: "Import your file(s)",
-      component: {
-        component_name: shallowRef(ImportFile),
-        component_options: {
-          input_geode_object,
-          filenames: computed(() => {
-            return files.value.map((file) => file.name);
-          }),
-        },
-      },
-      chips: computed(() => {
-        const output_params = computed(() => {
-          return [files.value.map((file) => file.name), input_geode_object, additional_files.value.map((file) => file.name)];
-        });
-        if (_.isEmpty(output_params)) {
-          return [];
-        } else {
-          const array = [];
-          for (const property in output_params.value) {
-            if (output_params.value[property].value !== "") {
-              array.push(output_params.value[property].value);
-            }
-          }
-          return array;
-        }
-      }),
-    },
-  ],
-});
-const schema = {
-  "$id": "/ping",
-  "methods": ["POST"],
-  "type": "object",
-  "properties": {
-  },
-  "required": [],
-  "additionalProperties": false
-}
-const schema2 = {
-  "$id": "/",
-  "methods": ["POST"],
-  "type": "object",
-  "properties": {
-  },
-  "required": [],
-  "additionalProperties": false
-}
-await api_fetch({ schema: schema2, params: {} });
-provide("stepper_tree", stepper_tree);
-</script>