diff --git a/src/components/SelectReleaseDialog.vue b/src/components/SelectReleaseDialog.vue
index 1fec4e5d..7668f763 100644
--- a/src/components/SelectReleaseDialog.vue
+++ b/src/components/SelectReleaseDialog.vue
@@ -1,14 +1,14 @@
 <template>
   <HCDialog ref="dialog" @closing="$emit('closing-dialog')" closeOnSideClick>
-
     <div
       class="column"
       style="align-items: center; margin: 10px 15px; padding: 10px 20px"
     >
-
-      <div class="column" style="width: 100%; align-items: flex-start; margin: 12px 0 40px 0;">
-
-        <div class="row" style="align-items: center; margin-bottom: 20px;">
+      <div
+        class="column"
+        style="width: 100%; align-items: flex-start; margin: 12px 0 40px 0"
+      >
+        <div class="row" style="align-items: center; margin-bottom: 20px">
           <!-- if icon provided -->
           <img
             v-if="imgSrc || imgSrcFetched"
@@ -51,19 +51,74 @@
           </div>
         </div>
 
-        <div style="margin-left: 10px;"><span style="font-weight: 600;">published by: </span>{{ publisher? `${publisher.name}, ${publisher.location.country}` : "unknown" }}</div>
-        <div style="margin-left: 10px; margin-bottom: 20px;"><span style="font-weight: 600;">first published: </span>{{ (new Date(app.published_at)).toLocaleDateString(locale) }}</div>
+        <div style="margin-left: 10px">
+          <span style="font-weight: 600">published by: </span
+          >{{
+            publisher
+              ? `${publisher.name}, ${publisher.location.country}`
+              : "unknown"
+          }}
+        </div>
+        <div style="margin-left: 10px; margin-bottom: 20px">
+          <span style="font-weight: 600">first published: </span
+          >{{ new Date(app.published_at).toLocaleDateString(locale) }}
+        </div>
 
-        <div style="width: 100%; align-items: flex-end;" class="column">
+        <div style="width: 100%; align-items: flex-end" class="column">
           <div>
-            <div class="row" style="align-items: center;" title="number of known peers that are part of the app distribution peer network and currently responsive">
-              <span style="background-color: #17d310; border-radius: 50%; width: 10px; height: 10px; margin-right: 10px;"></span>
-              <span v-if="peerHostStatus"><span style="font-weight: 600;" :title="availablePeerHostList()">{{ peerHostStatus.responded.length }} available</span> peer host{{ peerHostStatus.responded.length === 1 ? "" : "s"}}</span>
+            <div
+              class="row"
+              style="align-items: center"
+              title="number of known peers that are part of the app distribution peer network and currently responsive"
+            >
+              <span
+                style="
+                  background-color: #17d310;
+                  border-radius: 50%;
+                  width: 10px;
+                  height: 10px;
+                  margin-right: 10px;
+                "
+              ></span>
+              <span v-if="peerHostStatus"
+                ><span style="font-weight: 600" :title="availablePeerHostList()"
+                  >{{ peerHostStatus.responded.length }} available</span
+                >
+                peer host{{
+                  peerHostStatus.responded.length === 1 ? "" : "s"
+                }}</span
+              >
               <span v-else>pinging peer hosts...</span>
             </div>
-            <div class="row" style="align-items: center;" title="number of known peers that registered themselves in the app distribution peer network but are currently unresponsive">
-              <span style="background-color: #bfbfbf; border-radius: 50%; width: 10px; height: 10px; margin-right: 10px;"></span>
-              <span v-if="peerHostStatus"><span style="font-weight: 600;">{{ peerHostStatus.totalHosts - peerHostStatus.responded.length }} unresponsive</span> peer host{{ (peerHostStatus.totalHosts - peerHostStatus.responded.length) === 1 ? "" : "s"}}</span>
+            <div
+              class="row"
+              style="align-items: center"
+              title="number of known peers that registered themselves in the app distribution peer network but are currently unresponsive"
+            >
+              <span
+                style="
+                  background-color: #bfbfbf;
+                  border-radius: 50%;
+                  width: 10px;
+                  height: 10px;
+                  margin-right: 10px;
+                "
+              ></span>
+              <span v-if="peerHostStatus"
+                ><span style="font-weight: 600"
+                  >{{
+                    peerHostStatus.totalHosts - peerHostStatus.responded.length
+                  }}
+                  unresponsive</span
+                >
+                peer host{{
+                  peerHostStatus.totalHosts -
+                    peerHostStatus.responded.length ===
+                  1
+                    ? ""
+                    : "s"
+                }}</span
+              >
               <span v-else>pinging peer hosts...</span>
             </div>
           </div>
@@ -73,40 +128,63 @@
           Description:
         </div>
 
-        <div style="max-height: 200px; min-width: 610px; overflow-y: auto; background: #f6f6fa; padding: 5px 10px; border-radius: 10px;">
+        <div
+          style="
+            max-height: 200px;
+            min-width: 610px;
+            overflow-y: auto;
+            background: #f6f6fa;
+            padding: 5px 10px;
+            border-radius: 10px;
+          "
+        >
           {{ app.description }}
         </div>
 
-
         <div style="font-weight: 600; font-size: 20px; margin: 30px 0 10px 0">
           Available Releases:
         </div>
 
         <div v-if="releaseDatas && releaseDatas.length > 0">
           <div class="column card">
-            <div style="text-align: right; font-weight: 600">latest Release</div>
+            <div style="text-align: right; font-weight: 600">
+              latest Release
+            </div>
 
-            <div class="row" style="align-items: flex-end;">
+            <div class="row" style="align-items: flex-end">
               <div class="column">
-                <div><span style="font-weight: 600;">hApp version:</span> {{ releaseDatas[0].happRelease.content.version }}</div>
-                <div><span style="font-weight: 600;">UI version: </span>{{ releaseDatas[0].guiRelease? releaseDatas[0].guiRelease.content.version : "no official UI" }}</div>
+                <div>
+                  <span style="font-weight: 600">hApp version:</span>
+                  {{ releaseDatas[0].happRelease.content.version }}
+                </div>
+                <div>
+                  <span style="font-weight: 600">UI version: </span
+                  >{{
+                    releaseDatas[0].guiRelease
+                      ? releaseDatas[0].guiRelease.content.version
+                      : "no official UI"
+                  }}
+                </div>
                 <!-- GUI version as well here? Needs to be fetched independently from a DevHub host -->
               </div>
-              <span style="display: flex; flex: 1;"></span>
-              <HCButton @click="() => {
-                $emit('release-selected', releaseDatas ? releaseDatas[0] : undefined);
-                close();
-              }">Install</HCButton>
+              <span style="display: flex; flex: 1"></span>
+              <HCButton
+                @click="
+                  () => {
+                    releaseDatas ? releaseSelected(releaseDatas[0]) : undefined;
+                  }
+                "
+                >Install</HCButton
+              >
             </div>
           </div>
 
-
-          <div class="row" style="margin: 20px 0 10px 10px;">
+          <div class="row" style="margin: 20px 0 10px 10px">
             <div
               @click="showAdvanced = !showAdvanced"
               @keydown.enter="showAdvanced = !showAdvanced"
               class="row advanced-button"
-              style="align-items: center;"
+              style="align-items: center"
               tabindex="0"
             >
               <div
@@ -119,63 +197,100 @@
               >
                 {{ showAdvanced ? "-" : "+" }}
               </div>
-              <div style="font-size: 18px; margin-left: 10px">show older releases</div>
+              <div style="font-size: 18px; margin-left: 10px">
+                show older releases
+              </div>
             </div>
-            <span style="display: flex; flex: 1;"></span>
+            <span style="display: flex; flex: 1"></span>
           </div>
 
-          <div v-show="showAdvanced" class="column" style="align-items: center; width: 100%;">
-            <div v-if="releaseDatas.length < 2" style="text-align: center;">
+          <div
+            v-show="showAdvanced"
+            class="column"
+            style="align-items: center; width: 100%"
+          >
+            <div v-if="releaseDatas.length < 2" style="text-align: center">
               No older releases available for this app.
             </div>
             <div v-else>
               <div
-                v-for="(releaseData) of releaseDatas.slice(1)"
+                v-for="releaseData of releaseDatas.slice(1)"
                 :key="releaseData.happRelease.content.version"
                 class="row card"
-                style="align-items: flex-end; padding-top: 15px;"
+                style="align-items: flex-end; padding-top: 15px"
               >
                 <div class="column">
-                  <div><span style="font-weight: 600;">hApp version:</span> {{ releaseData.happRelease.content.version }}</div>
-                  <div><span style="font-weight: 600;">UI version: </span>{{ releaseData.guiRelease? releaseData.guiRelease.content.version : "no official UI" }}</div>
+                  <div>
+                    <span style="font-weight: 600">hApp version:</span>
+                    {{ releaseData.happRelease.content.version }}
+                  </div>
+                  <div>
+                    <span style="font-weight: 600">UI version: </span
+                    >{{
+                      releaseData.guiRelease
+                        ? releaseData.guiRelease.content.version
+                        : "no official UI"
+                    }}
+                  </div>
                   <!-- GUI version as well here? Needs to be fetched independently from a DevHub host -->
                 </div>
-                <span style="display: flex; flex: 1;"></span>
-                <HCButton @click="() => releaseSelected()">Install</HCButton>
+                <span style="display: flex; flex: 1"></span>
+                <HCButton @click="() => releaseSelected(releaseData)"
+                  >Install</HCButton
+                >
               </div>
             </div>
-
           </div>
         </div>
 
-        <div v-else-if="releaseDatas && releaseDatas.length < 1" style="text-align: center;">
+        <div
+          v-else-if="releaseDatas && releaseDatas.length < 1"
+          style="text-align: center"
+        >
           There are no installable releases available for this app.
         </div>
 
-        <div v-else-if="getReleaseDatasError" class="column" style="align-items: center;">
-          <div style="background: #f4b2b2; padding: 5px 10px; border-radius: 5px; width: 610px;">
-            <span v-if="getReleaseDatasError.type == 'noHosts'"><b>Error:</b> No peer host(s) found.</span>
-            <span v-else><b>Error:</b> Failed to fetch releases from peer host(s). See console for details.</span>
+        <div
+          v-else-if="getReleaseDatasError"
+          class="column"
+          style="align-items: center"
+        >
+          <div
+            style="
+              background: #f4b2b2;
+              padding: 5px 10px;
+              border-radius: 5px;
+              width: 610px;
+            "
+          >
+            <span v-if="getReleaseDatasError.type == 'noHosts'"
+              ><b>Error:</b> No peer host(s) found.</span
+            >
+            <span v-else
+              ><b>Error:</b> Failed to fetch releases from peer host(s). See
+              console for details.</span
+            >
           </div>
-          <HCButton @click="async () => await getReleaseDatas()" style="margin-top: 10px;">{{ $t('buttons.retry') }}</HCButton>
+          <HCButton
+            @click="async () => await getReleaseDatas()"
+            style="margin-top: 10px"
+            >{{ $t("buttons.retry") }}</HCButton
+          >
         </div>
 
-        <div v-else class="column" style="align-items: center; width: 100%;">
+        <div v-else class="column" style="align-items: center; width: 100%">
           <HCCircularProgress
             style="margin-top: 30px; margin-bottom: 20px"
           ></HCCircularProgress>
         </div>
-
       </div>
 
-
       <HCButton
-        style="width: 80px; height: 30px; margin: 4px 6px; margin-bottom: 15px;"
+        style="width: 80px; height: 30px; margin: 4px 6px; margin-bottom: 15px"
         outlined
         @click="cancel"
-      >Close
+        >Close
       </HCButton>
-
     </div>
   </HCDialog>
 
@@ -195,16 +310,30 @@ import HCSnackbar from "./subcomponents/HCSnackbar.vue";
 import HCCircularProgress from "./subcomponents/HCCircularProgress.vue";
 
 import { ResourceLocator, ReleaseData } from "../types";
-import { AppEntry, Entity, GUIReleaseEntry, HappReleaseEntry, HostAvailability, PublisherEntry } from "../appstore/types";
+import {
+  AppEntry,
+  Entity,
+  GUIReleaseEntry,
+  HappReleaseEntry,
+  HostAvailability,
+  PublisherEntry,
+} from "../appstore/types";
 import { AppWebsocket, encodeHashToBase64 } from "@holochain/client";
 import { APPSTORE_APP_ID } from "../constants";
-import { collectBytes, getHappReleasesFromHost, getPublisher, getVisibleHostsForZomeFunction, remoteCallToDevHubHost, tryWithHosts } from "../appstore/appstore-interface";
+import {
+  collectBytes,
+  getHappReleasesFromHost,
+  getPublisher,
+  getVisibleHostsForZomeFunction,
+  remoteCallToDevHubHost,
+  tryWithHosts,
+} from "../appstore/appstore-interface";
 import { HappEntry } from "../devhub/types";
 import { toSrc } from "../utils";
 
 interface GetReleasesError {
-  type: "noHosts" | "other",
-  error: string,
+  type: "noHosts" | "other";
+  error: string;
 }
 
 export default defineComponent({
@@ -257,9 +386,9 @@ export default defineComponent({
   beforeUnmount() {
     window.clearInterval(this.pollInterval!);
   },
-  async mounted () {
+  async mounted() {
     const customLocale = window.localStorage.getItem("customLocale");
-    this.locale =  customLocale ? customLocale : navigator.language;
+    this.locale = customLocale ? customLocale : navigator.language;
 
     // set up polling loop to periodically get gossip progress, global scope (window) seems to
     // be required to clear it again on beforeUnmount()
@@ -270,31 +399,34 @@ export default defineComponent({
     // With multiple possible DevHub networks, available peers are not necessarily unique
 
     try {
-      const result = await getVisibleHostsForZomeFunction(this.appWebsocket as AppWebsocket, appStoreInfo, this.app.devhub_address.dna, 'happ_library', 'get_webhapp_package', 4000);
+      const result = await getVisibleHostsForZomeFunction(
+        this.appWebsocket as AppWebsocket,
+        appStoreInfo,
+        this.app.devhub_address.dna,
+        "happ_library",
+        "get_webhapp_package",
+        4000
+      );
       this.peerHostStatus = result;
     } catch (e) {
       console.error(`Failed to get peer host statuses: ${JSON.stringify(e)}`);
     }
 
-    this.pollInterval = window.setInterval(
-      async () => {
-        const result = await getVisibleHostsForZomeFunction(
-          this.appWebsocket as AppWebsocket,
-          appStoreInfo,
-          this.app.devhub_address.dna,
-          "happ_library",
-          "get_webhapp_package",
-          4000
-        );
+    this.pollInterval = window.setInterval(async () => {
+      const result = await getVisibleHostsForZomeFunction(
+        this.appWebsocket as AppWebsocket,
+        appStoreInfo,
+        this.app.devhub_address.dna,
+        "happ_library",
+        "get_webhapp_package",
+        4000
+      );
 
-        this.peerHostStatus = result;
-      },
-      60000
-    );
+      this.peerHostStatus = result;
+    }, 60000);
   },
   methods: {
     async getReleaseDatas(): Promise<void> {
-
       this.getReleaseDatasError = undefined;
 
       const appStoreInfo = await this.appWebsocket!.appInfo({
@@ -305,8 +437,8 @@ export default defineComponent({
 
       const happLocator: ResourceLocator = {
         dna_hash: this.app.devhub_address.dna,
-        resource_hash:  this.app.devhub_address.happ,
-      }
+        resource_hash: this.app.devhub_address.happ,
+      };
 
       const devHubDnaHash = this.app.devhub_address.dna;
 
@@ -334,15 +466,15 @@ export default defineComponent({
               this.appWebsocket as AppWebsocket,
               appStoreInfo,
               host,
-              happLocator,
-            )
+              happLocator
+            );
           },
           this.appWebsocket as AppWebsocket,
           appStoreInfo,
           happLocator.dna_hash,
           "happ_library",
-          "get_happ_releases",
-        )
+          "get_happ_releases"
+        );
         // happReleases = await getHappReleases(this.appWebsocket as AppWebsocket, appStoreInfo, happLocator)
       } catch (e) {
         if (JSON.stringify(e).includes("No available peer host found")) {
@@ -350,14 +482,18 @@ export default defineComponent({
             type: "noHosts",
             error: "No available peer host found.",
           };
-          console.error(`Failed to find available releases: ${JSON.stringify(e)}`)
+          console.error(
+            `Failed to find available releases: ${JSON.stringify(e)}`
+          );
           return;
         } else {
           this.getReleaseDatasError = {
             type: "other",
-            error: `Failed to find available releases: ${JSON.stringify(e)}`
+            error: `Failed to find available releases: ${JSON.stringify(e)}`,
           };
-          console.error(`Failed to find available releases: ${JSON.stringify(e)}`)
+          console.error(
+            `Failed to find available releases: ${JSON.stringify(e)}`
+          );
           return;
         }
       }
@@ -365,7 +501,7 @@ export default defineComponent({
       if (!happReleases) {
         this.getReleaseDatasError = {
           type: "other",
-          error: `Failed to find available releases: happReleases undefined.`
+          error: `Failed to find available releases: happReleases undefined.`,
         };
         return;
       }
@@ -378,8 +514,8 @@ export default defineComponent({
       console.log("@getReleaseDatas: fetching gui release entries...");
 
       try {
-        await Promise.all(happReleases.map(
-          async (happReleaseEntity) => {
+        await Promise.all(
+          happReleases.map(async (happReleaseEntity) => {
             let releaseData: ReleaseData = {
               devhubDnaHash: devHubDnaHash,
               happRelease: happReleaseEntity,
@@ -389,20 +525,21 @@ export default defineComponent({
             const guiReleaseHash = happReleaseEntity.content.official_gui;
             if (guiReleaseHash) {
               const guiReleaseEntry = await tryWithHosts(
-                (host) => remoteCallToDevHubHost<Entity<GUIReleaseEntry>>(
-                  this.appWebsocket as AppWebsocket,
-                  appStoreInfo,
-                  devHubDnaHash,
-                  host,
-                  "happ_library",
-                  "get_gui_release",
-                  { id: guiReleaseHash }
-                ),
+                (host) =>
+                  remoteCallToDevHubHost<Entity<GUIReleaseEntry>>(
+                    this.appWebsocket as AppWebsocket,
+                    appStoreInfo,
+                    devHubDnaHash,
+                    host,
+                    "happ_library",
+                    "get_gui_release",
+                    { id: guiReleaseHash }
+                  ),
                 this.appWebsocket as AppWebsocket,
                 appStoreInfo,
                 devHubDnaHash,
                 "happ_library",
-                "get_gui_release",
+                "get_gui_release"
               );
 
               releaseData.guiRelease = guiReleaseEntry;
@@ -417,19 +554,27 @@ export default defineComponent({
             type: "noHosts",
             error: "No available peer host found.",
           };
-          console.error(`Failed to find available releases: ${JSON.stringify(e)}`)
+          console.error(
+            `Failed to find available releases: ${JSON.stringify(e)}`
+          );
           return;
         } else {
           this.getReleaseDatasError = {
             type: "other",
-            error: `Failed to find available releases: ${JSON.stringify(e)}`
+            error: `Failed to find available releases: ${JSON.stringify(e)}`,
           };
-          console.error(`Failed to find available releases: ${JSON.stringify(e)}`)
+          console.error(
+            `Failed to find available releases: ${JSON.stringify(e)}`
+          );
           return;
         }
       }
 
-      this.releaseDatas = releaseDatas.sort((a, b) => b.happRelease.content.published_at - a.happRelease.content.published_at);
+      this.releaseDatas = releaseDatas.sort(
+        (a, b) =>
+          b.happRelease.content.published_at -
+          a.happRelease.content.published_at
+      );
       this.getReleaseDatasError = undefined;
     },
     availablePeerHostList() {
@@ -446,8 +591,8 @@ export default defineComponent({
       await Promise.all([
         this.fetchPublisher(),
         this.fetchIconIfNecessary(),
-        this.getReleaseDatas()
-      ])
+        this.getReleaseDatas(),
+      ]);
     },
     async fetchIconIfNecessary() {
       // if icon not provided already by AppStore component, fetch it explicitly
@@ -457,11 +602,22 @@ export default defineComponent({
           appStoreInfo = await this.appWebsocket!.appInfo({
             installed_app_id: APPSTORE_APP_ID,
           });
-          this.publisher = await getPublisher(this.appWebsocket, appStoreInfo, this.app.publisher);
-          const collectedBytes = await collectBytes(this.appWebsocket, appStoreInfo, this.app.icon);
-          this.imgSrcFetched = toSrc(collectedBytes, this.app.metadata.icon_mime_type);
+          this.publisher = await getPublisher(
+            this.appWebsocket,
+            appStoreInfo,
+            this.app.publisher
+          );
+          const collectedBytes = await collectBytes(
+            this.appWebsocket,
+            appStoreInfo,
+            this.app.icon
+          );
+          this.imgSrcFetched = toSrc(
+            collectedBytes,
+            this.app.metadata.icon_mime_type
+          );
         } catch (e) {
-          console.error(`Failed to fetch icon: ${JSON.stringify(e)}`)
+          console.error(`Failed to fetch icon: ${JSON.stringify(e)}`);
         }
       }
     },
@@ -472,41 +628,40 @@ export default defineComponent({
         appStoreInfo = await this.appWebsocket!.appInfo({
           installed_app_id: APPSTORE_APP_ID,
         });
-        this.publisher = await getPublisher(this.appWebsocket, appStoreInfo, this.app.publisher);
+        this.publisher = await getPublisher(
+          this.appWebsocket,
+          appStoreInfo,
+          this.app.publisher
+        );
       } catch (e) {
-        console.error(`Failed to get publisher info: ${JSON.stringify(e)}`)
+        console.error(`Failed to get publisher info: ${JSON.stringify(e)}`);
       }
     },
-    releaseSelected() {
-      this.$emit(
-        'release-selected',
-        {
-          releaseData: this.releaseDatas ? this.releaseDatas[0] : undefined,
-          appEntry: this.app
-        }
-      );
+    releaseSelected(releaseData: ReleaseData) {
+      this.$emit("release-selected", {
+        releaseData,
+        appEntry: this.app,
+      });
       this.close();
     },
     close() {
       (this.$refs.dialog as typeof HCDialog).close();
-      this.$emit('closing-dialog');
+      this.$emit("closing-dialog");
     },
     cancel() {
       (this.$refs.dialog as typeof HCDialog).close();
-      this.$emit('cancel');
-    }
+      this.$emit("cancel");
+    },
   },
 });
 </script>
 
 <style scoped>
-
 .advanced-button:hover {
   opacity: 0.8;
   cursor: pointer;
 }
 
-
 .card {
   min-width: 600px;
   background: #f6f6fa;
diff --git a/src/views/AppStore.vue b/src/views/AppStore.vue
index d3fa71fc..08835d66 100644
--- a/src/views/AppStore.vue
+++ b/src/views/AppStore.vue
@@ -396,9 +396,9 @@ export default defineComponent({
         installed_app_id: APPSTORE_APP_ID,
       });
 
-      console.log("@fetchApps: appStoreInfo: ", appStoreInfo);
+      // console.log("@fetchApps: appStoreInfo: ", appStoreInfo);
       const allCells = appStoreInfo.cell_info;
-      console.log("@fetchApps: allCells: ", allCells);
+      // console.log("@fetchApps: allCells: ", allCells);
 
       const provisionedCells: [string, CellInfo | undefined][] = Object.entries(
         allCells
@@ -409,7 +409,7 @@ export default defineComponent({
         ];
       });
 
-      console.log("@fetchApps: provisionedCells: ", provisionedCells);
+      // console.log("@fetchApps: provisionedCells: ", provisionedCells);
 
       this.provisionedCells = provisionedCells.sort(
         ([roleName_a, _cellInfo_a], [roleName_b, _cellInfo_b]) => {
@@ -429,7 +429,15 @@ export default defineComponent({
         allApps = [];
       }
 
-      console.log("@fetchApps: allApps: ", allApps);
+      console.log(
+        "@fetchApps: allApps: ",
+        allApps.map((appEntity) => {
+          return {
+            app: appEntity.content,
+            actionHash: encodeHashToBase64(appEntity.action),
+          };
+        })
+      );
 
       // filter by apps of the relevant DevHub dna hash
       // this.installableApps = allApps.filter((appEntry) => JSON.stringify(appEntry.devhub_address.dna) === JSON.stringify(DEVHUB_HAPP_LIBRARY_DNA_HASH));
@@ -466,6 +474,7 @@ export default defineComponent({
       });
     },
     async saveApp(releaseInfo: ReleaseData, appEntry: AppEntry) {
+      console.log("@saveApp: releaseInfo: ", releaseInfo);
       // if downloading, always take holochain version of DevHub
       this.holochainSelection = false;
       this.loadingText = "searching available peer host";