diff --git a/frontend/package.json b/frontend/package.json
index 62c0f9e..d5ce337 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,8 @@
     "lint": "eslint --ext .js,.vue ./",
     "dev/web": "quasar dev",
     "dev/electron": "quasar dev -m electron",
-    "build/web": "quasar build",
+    "build": "PRODUCTION=TRUE quasar build -m spa",
+    "build/dev": "DEV=TRUE quasar build -m spa",
     "build/electron": "quasar build -m electron",
     "compile-protofiles": "npx pbjs -t static-module -w es6 --no-comments --lint \"eslint-disable block-scoped-var, id-length, no-control-regex, no-magic-numbers, no-prototype-builtins, no-redeclare, no-shadow, no-var, sort-vars, camelcase, default-case-last, no-mixed-operators\" -o src/flipper/protobuf/proto-compiled.js ./flipperzero-protobuf/*.proto && eslint --fix src/flipper-js/protobuf/protobufCompiled.js"
   },
@@ -60,4 +61,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 04e679d..548f348 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -48,6 +48,12 @@ module.exports = configure(function (ctx) {
     build: {
       vueRouterMode: 'history', // available values: 'hash', 'history'
 
+      env: {
+        ARCHIVARIUS_API_ENDPOINT: process.env.PRODUCTION
+          ? 'https://catalog.flipperzero.one/api/v0'
+          : 'https://catalog.flipp.dev/api/v0',
+        PRODUCTION: process.env.PRODUCTION
+      },
       // transpile: false,
       // publicPath: '/',
 
diff --git a/frontend/src/components/AppList.vue b/frontend/src/components/AppList.vue
index db91cf3..9d6b71b 100644
--- a/frontend/src/components/AppList.vue
+++ b/frontend/src/components/AppList.vue
@@ -1,112 +1,124 @@
 <template>
   <div>
-    <div
-      class="row q-pr-md"
-      :class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
-    >
-      <q-list class="categories row" :class="$q.screen.width > 670 ? 'col-8' : 'justify-center'">
-        <div
-          :style="`opacity: ${currentCategory && currentCategory.name !== 'All apps' ? '0.5' : '1'}`"
-          style="background-color: #ebebeb; border-radius: 20px; padding: 4px 13px; cursor: pointer;"
-          class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
-          @click="currentCategory = null; $router.push('/apps')"
-        >
-          <span style="white-space: nowrap;">All apps</span>
-        </div>
-        <div
-          v-for="category in categories"
-          :key="category.name"
-          :style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
-          style="border-radius: 20px; padding: 4px 13px; cursor: pointer;"
-          class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
-          @click="currentCategory = category;"
-        >
-          <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
-          <span style="white-space: nowrap;">{{ category.name }}</span>
-        </div>
-      </q-list>
-      <q-space v-if="$q.screen.width > 670"/>
-      <div>
-        <div class="row no-wrap justify-end text-grey-7">
-          <q-select
-            v-model="sortModel"
-            :options="sortOptions"
-            dense
-            standout="bg-primary text-white no-shadow"
-            rounded
-            style="min-width: fit-content; border-radius: 20px;"
-          />
+    <template v-if="apps.length">
+      <div
+        class="row q-pr-md"
+        :class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
+      >
+        <q-list class="categories row" :class="$q.screen.width > 670 ? 'col-8' : 'justify-center'">
+          <div
+            :style="`opacity: ${currentCategory && currentCategory.name !== 'All apps' ? '0.5' : '1'}`"
+            style="background-color: #ebebeb; border-radius: 20px; padding: 4px 13px; cursor: pointer;"
+            class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
+            @click="currentCategory = null; $router.push('/apps')"
+          >
+            <span style="white-space: nowrap;">All apps</span>
+          </div>
+          <div
+            v-for="category in categories"
+            :key="category.name"
+            :style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
+            style="border-radius: 20px; padding: 4px 13px; cursor: pointer;"
+            class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
+            @click="currentCategory = category;"
+          >
+            <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
+            <span style="white-space: nowrap;">{{ category.name }}</span>
+          </div>
+        </q-list>
+        <q-space v-if="$q.screen.width > 670"/>
+        <div>
+          <div class="row no-wrap justify-end text-grey-7">
+            <q-select
+              v-model="sortModel"
+              :options="sortOptions"
+              dense
+              standout="bg-primary text-white no-shadow"
+              rounded
+              style="min-width: fit-content; border-radius: 20px;"
+            />
+          </div>
         </div>
       </div>
-    </div>
 
-    <q-list class="apps full-width q-mt-sm">
-      <div
-        v-for="app in filteredSortedApps"
-        :key="app.name"
-        class="flex justify-center q-pa-none card-container"
-        style="width: fit-content"
-        :class="action.type && action.id !== app.id ? 'disabled' : ''"
-      >
+      <q-list class="apps full-width q-mt-sm">
         <div
-          style="width: calc(256px + 4px + 8px)"
-          class="app-card"
-          @click="appClicked(app)"
+          v-for="app in filteredSortedApps"
+          :key="app.name"
+          class="flex justify-center q-pa-none card-container"
+          style="width: fit-content"
+          :class="action.type && action.id !== app.id ? 'disabled' : ''"
         >
-          <div class="screenshot q-mb-sm">
-            <img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
-          </div>
+          <div
+            style="width: calc(256px + 4px + 8px)"
+            class="app-card"
+            @click="appClicked(app)"
+          >
+            <div class="screenshot q-mb-sm">
+              <img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
+            </div>
 
-          <div class="flex justify-between" style="padding: 0 4px">
-            <div class="text-h6">{{ app.currentVersion.name }}</div>
-            <div style="font-size: 18px; line-height: 18px;">
-              <span>
-                <q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
-                <span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
-              </span>
+            <div class="flex justify-between" style="padding: 0 4px">
+              <div class="text-h6">{{ app.currentVersion.name }}</div>
+              <div style="font-size: 18px; line-height: 18px;">
+                <span>
+                  <q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
+                  <span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
+                </span>
+              </div>
             </div>
-          </div>
 
-          <div
-            style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
-            :style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
-          >
-            <span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
-              {{ app.currentVersion.shortDescription }}
-            </span>
-            <div class="col-shrink" style="width: 80px;">
-              <template v-if="action.type && action.id === app.id">
-                <q-linear-progress
-                  :value="action.progress"
-                  size="32px"
-                  :color="actionColors.bar"
-                  :track-color="actionColors.track"
-                  style="width: 80px; border-radius: 5px;"
-                >
-                  <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
-                    <div
-                      class="app-progress-label"
-                      style="font-size: 28px;"
-                    >{{ `${action.progress * 100}%` }}</div>
-                  </div>
-                </q-linear-progress>
-              </template>
-              <q-btn
-                v-else
-                flat
-                dense
-                color="white"
-                style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-                :label="app.actionButton.text"
-                class="fit no-shadow text-pixelated"
-                :class="app.actionButton.class"
-                @click="handleAction(app, app.actionButton.text)"
-              />
+            <div
+              style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
+              :style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
+            >
+              <span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
+                {{ app.currentVersion.shortDescription }}
+              </span>
+              <div class="col-shrink" style="width: 80px;">
+                <template v-if="action.type && action.id === app.id">
+                  <q-linear-progress
+                    :value="action.progress"
+                    size="32px"
+                    :color="actionColors.bar"
+                    :track-color="actionColors.track"
+                    style="width: 80px; border-radius: 5px;"
+                  >
+                    <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
+                      <div
+                        class="app-progress-label"
+                        style="font-size: 28px;"
+                      >{{ `${action.progress * 100}%` }}</div>
+                    </div>
+                  </q-linear-progress>
+                </template>
+                <q-btn
+                  v-else
+                  flat
+                  dense
+                  color="white"
+                  style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+                  :label="app.actionButton.text"
+                  class="fit no-shadow text-pixelated"
+                  :class="app.actionButton.class"
+                  @click="handleAction(app, app.actionButton.text)"
+                />
+              </div>
             </div>
           </div>
         </div>
+      </q-list>
+    </template>
+    <template v-else>
+      <div class="column items-center">
+        <q-spinner
+          color="primary"
+          size="3em"
+          class="q-mb-md"
+        ></q-spinner>
+        <p>Loading apps...</p>
       </div>
-    </q-list>
+    </template>
   </div>
 </template>
 
@@ -230,6 +242,7 @@ export default defineComponent({
 .apps
   display: grid
   grid-template-columns: repeat(4, 1fr)
+  justify-items: center
 
   .card-container
     padding: 12px
diff --git a/frontend/src/components/AppPage.vue b/frontend/src/components/AppPage.vue
index 65056fb..57b24e7 100644
--- a/frontend/src/components/AppPage.vue
+++ b/frontend/src/components/AppPage.vue
@@ -6,7 +6,7 @@
       </div>
       <div :class="$q.screen.width > 350 ? 'q-mr-md' : ''">
         <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
-        <div class="row">
+        <div class="row q-gutter-md">
           <div
             :style="`background-color: #${category.color};`"
             style="border-radius: 20px; padding: 4px 13px; width: fit-content;"
@@ -25,18 +25,20 @@
           </div>
 
           <template v-if="currentStatusHint">
-            <q-chip
-              :color="statusHints[currentStatusHint].color"
-              :icon="statusHints[currentStatusHint].icon"
-              :label="statusHints[currentStatusHint].text"
-              class="q-ml-lg q-my-none"
-              :clickable="!!statusHints[currentStatusHint].dialog"
-              @click="$emit('showDialog', statusHints[currentStatusHint].dialog)"
-            >
-            <q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
-              {{ statusHints[currentStatusHint].tooltip }}
-            </q-tooltip>
-            </q-chip>
+            <div>
+              <q-chip
+                :color="statusHints[currentStatusHint].color"
+                :icon="statusHints[currentStatusHint].icon"
+                :label="statusHints[currentStatusHint].text"
+                class="q-my-none"
+                :clickable="!!statusHints[currentStatusHint].dialog"
+                @click="$emit('showDialog', statusHints[currentStatusHint].dialog)"
+              >
+              <q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
+                {{ statusHints[currentStatusHint].tooltip }}
+              </q-tooltip>
+              </q-chip>
+            </div>
           </template>
         </div>
       </div>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 3ba8653..25aa1e2 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -188,6 +188,25 @@
                   @click="toggleInstallFromFile"
                   label="Third-party FW"
                 ></q-toggle>
+
+                <q-toggle
+                  v-if="flags.catalogCanBeEnabled"
+                  size="2.25rem"
+                  dense
+                  class="q-mt-lg q-mb-sm"
+                  v-model="flags.catalogEnabled"
+                  @click="toggleCatalogEnabled"
+                  label="Enable Apps"
+                ></q-toggle>
+                <q-toggle
+                  v-if="flags.catalogCanSwitchChannel && flags.catalogEnabled"
+                  size="2.25rem"
+                  dense
+                  class="q-my-sm"
+                  v-model="flags.catalogChannelProduction"
+                  @click="toggleCatalogChannel"
+                  label="Production Apps"
+                ></q-toggle>
               </div>
             </div>
             <q-item
@@ -340,7 +359,12 @@ export default defineComponent({
         updateInProgress: false,
         installFromFile: false,
         logsPopup: false,
-        settingsView: false
+        settingsView: false,
+
+        catalogCanBeEnabled: false,
+        catalogCanSwitchChannel: false,
+        catalogEnabled: false,
+        catalogChannelProduction: false
       }),
       routes: [
         {
@@ -676,6 +700,14 @@ export default defineComponent({
     toggleInstallFromFile () {
       localStorage.setItem('installFromFile', this.flags.installFromFile)
     },
+    toggleCatalogEnabled () {
+      localStorage.setItem('catalogEnabled', this.flags.catalogEnabled)
+      location.reload()
+    },
+    toggleCatalogChannel () {
+      localStorage.setItem('catalogChannel', this.flags.catalogChannelProduction ? 'production' : 'dev')
+      location.reload()
+    },
     setRpcStatus (s) {
       this.flags.rpcActive = s
     },
@@ -699,7 +731,6 @@ export default defineComponent({
     },
 
     checkConnectionRequirement (path) {
-      console.log(path)
       this.flags.connectionRequired = true
       for (const link of this.canLoadWithoutFlipper) {
         if ((path && path.includes(link)) || location.pathname.includes(link)) {
@@ -708,7 +739,7 @@ export default defineComponent({
         }
       }
 
-      if (location.hostname === 'lab.flipper.net' && localStorage.getItem('dev') !== 'true') {
+      if (this.flags.catalogEnabled !== true) {
         this.routes = this.routes.filter(e => e.link !== '/apps')
         if (location.pathname === '/apps') {
           this.$router.push('/')
@@ -798,7 +829,7 @@ export default defineComponent({
           await this.startRpc()
           await this.readInfo()
           await this.setTime()
-        }, 300)
+        }, 500)
       } else {
         this.flags.portSelectRequired = true
         if (manual) {
@@ -809,7 +840,9 @@ export default defineComponent({
   },
 
   async mounted () {
-    this.checkConnectionRequirement()
+    if (this.$q.screen.width < 900) {
+      this.leftDrawer = false
+    }
     if ('serial' in navigator) {
       if (localStorage.getItem('connectOnStart') !== 'false') {
         this.flags.connectOnStart = true
@@ -825,12 +858,23 @@ export default defineComponent({
       if (localStorage.getItem('installFromFile') === 'true') {
         this.flags.installFromFile = true
       }
+
+      if (localStorage.getItem('catalogEnabled') === 'true') {
+        this.flags.catalogEnabled = true
+      }
+      if (localStorage.getItem('catalogChannel') === 'production') {
+        this.flags.catalogChannelProduction = true
+      }
+      if (!process.env.PRODUCTION) {
+        this.flags.catalogCanSwitchChannel = true
+      }
       navigator.serial.addEventListener('disconnect', e => {
         this.autoReconnect()
       })
     } else {
       this.flags.serialSupported = false
     }
+    this.checkConnectionRequirement()
 
     navigator.serial.addEventListener('disconnect', (e) => {
       if (!this.flags.updateInProgress) {
diff --git a/frontend/src/pages/Apps.vue b/frontend/src/pages/Apps.vue
index f59dedb..1eccb0a 100644
--- a/frontend/src/pages/Apps.vue
+++ b/frontend/src/pages/Apps.vue
@@ -24,7 +24,7 @@
       <q-space />
       <div
         class="col-grow"
-        :style="$q.screen.width <= 353 ? 'margin-top: 16px; width: 100%' : 'max-width: 300px; min-width: 140px'"
+        :style="$q.screen.width <= 353 ? 'margin-top: 16px; width: 100%' : 'max-width: 300px; min-width: 140px; width: 100%; margin: 0.6rem 0;'"
       >
         <SearchBar
           :sdk="sdk"
@@ -63,6 +63,7 @@
             icon="mdi-github"
             label="Contribute"
             :stack="$q.screen.width <= 365"
+            href="https://github.com/flipperdevices/flipper-application-catalog"
           />
         </div>
       </div>
@@ -190,6 +191,27 @@
         </q-card-section>
       </q-card>
     </q-dialog>
+    <q-dialog v-model="flags.mobileAppDialog">
+      <q-card class="dialog">
+        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+        <q-card-section class="q-pa-none q-ma-md" align="center">
+          <q-icon name="mdi-alert-circle" color="primary" size="64px" />
+          <div class="text-h6 q-my-sm">Apps don't work in mobile browsers</div>
+          <p>Mobile browsers can't connect to Flipper, meaning you won't be able to install apps.</p>
+          <p>Get the official mobile app – it has the same features!</p>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none" align="center">
+          <q-btn
+            outline
+            color="primary"
+            label="Download app"
+            href="https://flpr.app"
+          ></q-btn>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
     <!--<q-dialog v-model="flags.TOSDialog">
       <q-card class="dialog">
         <q-card-section>
@@ -267,6 +289,7 @@ export default defineComponent({
         outdatedFirmwareDialog: false,
         outdatedAppDialog: false,
         connectFlipperDialog: false,
+        mobileAppDialog: false,
         // TOSDialog: true,
         loadingInitial: true
       }),
@@ -886,6 +909,9 @@ export default defineComponent({
 
   async mounted () {
     this.start()
+    if (this.$q.platform.is.mobile) {
+      this.flags.mobileAppDialog = true
+    }
   }
 })
 </script>
diff --git a/frontend/src/util/util.js b/frontend/src/util/util.js
index a09897f..53d88c6 100644
--- a/frontend/src/util/util.js
+++ b/frontend/src/util/util.js
@@ -3,11 +3,11 @@ import { untar } from '../untar/untar.js'
 import pako from 'pako'
 import _ from 'lodash'
 
-let API_ENDPOINT = 'https://catalog.flipperzero.one/api/v0'
-if (location.hostname !== 'lab.flipper.net') {
+let API_ENDPOINT = process.env.ARCHIVARIUS_API_ENDPOINT
+if (localStorage.getItem('catalogChannel') !== null) {
   if (localStorage.getItem('catalogChannel') === 'production') {
     API_ENDPOINT = 'https://catalog.flipperzero.one/api/v0'
-  } else {
+  } else if (localStorage.getItem('catalogChannel') === 'dev') {
     API_ENDPOINT = 'https://catalog.flipp.dev/api/v0'
   }
 }