diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index 0c18850..493ace4 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -57,9 +57,11 @@
           </template>
         </v-select>
       </v-col>
-      <!-- selected_shikigami_names: {{ selected_shikigami_names }} <br />
-      selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
+      <!-- selected_shikigami_names: {{ selected_shikigami_names }} <br /> -->
+      <!-- selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
       <!-- selected_shikigami_decks: {{ selected_shikigami_decks }} -->
+      url: {{ construct_url() }}
+      <v-textarea v-model="url" color="teal"> </v-textarea>
     </v-row>
     <v-row v-for="(_, index) in selected_shikigami_names" :key="index">
       <v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
@@ -201,8 +203,44 @@ export default {
       console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
       console.log(shiki_index, card_index);
     },
+    construct_url() {
+      const saved_selected_shikigami_names = btoa(
+        JSON.stringify(this.selected_shikigami_names)
+      );
+      const saved_selected_shikigami_decks = btoa(
+        JSON.stringify(this.selected_shikigami_decks)
+      );
+      const url = `?selected_shikigami_names=${saved_selected_shikigami_names}&selected_shikigami_decks=${saved_selected_shikigami_decks}`;
+      return url;
+    },
   },
   computed: {},
+  mounted() {
+    // console.log(JSON.stringify(this.selected_shikigami_decks));
+    // var encoded = btoa(JSON.stringify(this.selected_shikigami_decks));
+    // console.log(encoded);
+    // console.log(atob(encoded));
+    // console.log(this.$route.query.selected_shikigami_data);
+    // console.log(atob(this.$route.query.selected_shikigami_data))
+
+    // TODO: check the query param exists first before calling atob
+    const saved_selected_shikigami_names = JSON.parse(
+      atob(this.$route.query.selected_shikigami_names)
+    );
+    console.log(saved_selected_shikigami_names);
+    for (let i = 0; i < saved_selected_shikigami_names.length; i++) {
+      this.selected_shikigami_names.push(saved_selected_shikigami_names[i]);
+    }
+
+    const saved_selected_shikigami_decks = JSON.parse(
+      atob(this.$route.query.selected_shikigami_decks)
+    );
+    console.log(saved_selected_shikigami_decks);
+    this.selected_shikigami_decks = [];
+    for (let i = 0; i < saved_selected_shikigami_decks.length; i++) {
+      this.selected_shikigami_decks.push(saved_selected_shikigami_decks[i]);
+    }
+  },
   watch: {
     selected_shikigami_names: function () {
       this.selected_shikigami_data = [];