diff --git a/spa/src/App.vue b/spa/src/App.vue
index b302784..689f1b9 100644
--- a/spa/src/App.vue
+++ b/spa/src/App.vue
@@ -1,12 +1,15 @@
 <template>
-  <FullscreenViewport/>
-  <router-view />
+  <div class="app-container">
+    <FullscreenViewport/>
+    <router-view />
+  </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import { useWebAppViewport } from 'vue-tg';
+import {onMounted, ref, watch} from "vue";
+import { useWebAppViewport, useBackButton } from 'vue-tg';
 import { useMiniApp, FullscreenViewport } from 'vue-tg';
+import {useRoute, useRouter} from "vue-router";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -14,4 +17,28 @@ platform.value = tg.platform;
 
 const { disableVerticalSwipes } = useWebAppViewport();
 disableVerticalSwipes();
+
+const router = useRouter();
+const route = useRoute();
+const backButton = useBackButton();
+
+watch(
+    () => route.fullPath,
+    () => {
+      if (route.name === 'home') {
+        if (typeof backButton.hide === 'function') {
+          backButton.hide();
+        }
+      } else {
+        if (typeof backButton.show === 'function') {
+          backButton.show();
+          backButton.onClick(() => {
+            router.back();
+          });
+        }
+
+      }
+    },
+    { immediate: true }
+);
 </script>
diff --git a/spa/src/router.js b/spa/src/router.js
index ac8d0cf..08f267a 100644
--- a/spa/src/router.js
+++ b/spa/src/router.js
@@ -5,7 +5,7 @@ import CategoriesList from "./views/CategoriesList.vue";
 import ProductsList from "./views/ProductsList.vue";
 
 const routes = [
-    {path: '/', component: Home},
+    {path: '/', name: 'home', component: Home},
     {path: '/product/:id', component: Product},
     {path: '/categories', component: CategoriesList},
     {path: '/category/:id', component: ProductsList},
diff --git a/spa/src/style.css b/spa/src/style.css
index c1309a8..726c6d9 100644
--- a/spa/src/style.css
+++ b/spa/src/style.css
@@ -10,8 +10,15 @@ html, body {
 }
 
 #app {
-    padding-top: env(--tg-content-safe-area-inset-top);
-    padding-bottom: env(--tg-content-safe-area-inset-bottom);
-    padding-left: env(--tg-content-safe-area-inset-left);
-    padding-right: env(--tg-content-safe-area-inset-right);
+    padding-top: var(--tg-content-safe-area-inset-top);
+    padding-bottom: var(--tg-content-safe-area-inset-bottom);
+    padding-left: var(--tg-content-safe-area-inset-left);
+    padding-right: var(--tg-content-safe-area-inset-right);
 }
+
+.app-container {
+    padding-top: var(--tg-safe-area-inset-top);
+    padding-bottom: var(--tg-safe-area-inset-bottom);
+    padding-left: var(--tg-safe-area-inset-left);
+    padding-right: var(--tg-safe-area-inset-right);
+}
\ No newline at end of file
diff --git a/spa/src/views/Home.vue b/spa/src/views/Home.vue
index 92cb22b..cf6aa62 100644
--- a/spa/src/views/Home.vue
+++ b/spa/src/views/Home.vue
@@ -6,21 +6,13 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
 
 const goodsRef = ref();
 function scrollToProducts() {
   goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
 }
 
-import { useBackButton } from 'vue-tg';
 import ProductsList from "./ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-const backButton = useBackButton();
-
-onMounted(() => {
-  if (backButton.isVisible.value) {
-    backButton.hide();
-  }
-});
 </script>
diff --git a/spa/src/views/Product.vue b/spa/src/views/Product.vue
index 9cfaae5..36efdcf 100644
--- a/spa/src/views/Product.vue
+++ b/spa/src/views/Product.vue
@@ -46,14 +46,12 @@ import {onMounted, ref} from "vue";
 import {$fetch} from "ofetch";
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
-import {useBackButton, useHapticFeedback} from 'vue-tg';
+import {useHapticFeedback} from 'vue-tg';
 const hapticFeedback = useHapticFeedback();
 
 const router = useRouter()
 const route = useRoute()
 const productId = route.params.id
-
-const id = 28;
 const product = ref([]);
 
 onMounted(async () => {
@@ -61,14 +59,6 @@ onMounted(async () => {
   product.value = data;
 });
 
-const backButton = useBackButton();
-if (typeof backButton.show === 'function') {
-  backButton.show();
-  backButton.onClick(() => {
-    router.back()
-  });
-}
-
 const carouselRef = ref();
 let lastScrollLeft = 0;
 function onScroll(e) {
diff --git a/spa/src/views/ProductsList.vue b/spa/src/views/ProductsList.vue
index 1ef9684..7ec1738 100644
--- a/spa/src/views/ProductsList.vue
+++ b/spa/src/views/ProductsList.vue
@@ -1,27 +1,38 @@
 <template>
   <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
-    <h2 class="text-lg font-bold mb-5 text-center">{{ productsMeta.currentCategoryName }}</h2>
 
-    <div v-if="products.length > 0" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-      <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
-        <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
-          <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
-            <img :src="image.url" :alt="image.alt" loading="lazy"/>
-          </div>
-        </div>
-
-        <h3 class="mt-4 text-sm">{{ product.name }}</h3>
-        <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
-      </RouterLink>
+    <div v-if="isLoading" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
+        <div class="aspect-square bg-gray-200 rounded-md"></div>
+        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+      </div>
     </div>
 
-    <NoProducts v-else/>
+    <template v-else>
+      <h2 class="text-lg font-bold mb-5 text-center">{{ productsMeta.currentCategoryName }}</h2>
+
+      <div v-if="products.length > 0" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+        <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
+          <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+            <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+              <img :src="image.url" :alt="image.alt" loading="lazy"/>
+            </div>
+          </div>
+
+          <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+          <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+        </RouterLink>
+      </div>
+
+      <NoProducts v-else/>
+    </template>
   </div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {useBackButton, useHapticFeedback, useMiniApp} from 'vue-tg';
+import {useHapticFeedback} from 'vue-tg';
 import { useRouter, useRoute } from 'vue-router';
 import ftch from "../utils/ftch.js";
 import NoProducts from "../components/NoProducts.vue";
@@ -31,6 +42,7 @@ const router = useRouter();
 const route = useRoute();
 const categoryId = route.params.id;
 
+const isLoading = ref(true);
 const products = ref([]);
 const productsMeta = ref([]);
 
@@ -46,19 +58,12 @@ function onScroll(e) {
   }
 }
 
-const backButton = useBackButton();
-if (typeof backButton.show === 'function') {
-  backButton.show();
-  backButton.onClick(() => {
-    router.back()
-  });
-}
-
 onMounted(async () => {
   const {data, meta} = await ftch('products', {
     categoryId: categoryId,
   });
   productsMeta.value = meta;
   products.value = data;
+  isLoading.value = false;
 });
 </script>