diff --git a/.routify/config.js b/.routify/config.js
index ca44d07e..7a0164e7 100644
--- a/.routify/config.js
+++ b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-12-01T17:51:26.247Z',
+  started: '2021-12-01T20:34:17.869Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
index e14bd521..2988e9d3 100644
--- a/.routify/routes.js
+++ b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Wed Dec 01 2021 17:51:28 GMT+0000 (Greenwich Mean Time)
+ * File generated Wed Dec 01 2021 20:34:20 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-12-01T17:51:28.874Z';
+export const __timestamp = '2021-12-01T20:34:20.849Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';
diff --git a/public/index.html b/public/index.html
index 22a87100..93b231fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,19 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
+    />
     <title>Enki</title>
-    
-    <link rel='icon' type='image/png' href='/favicon.png'>
-    <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1638381086245.css'>
-    
-    <script defer src='/build/bundle-1638381086245.js'></script>
+
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle-1638390857867.css" />
+
+    <script defer src="/build/bundle-1638390857867.js"></script>
   </head>
-  <body>
-  </body>
-</html>
\ No newline at end of file
+  <body></body>
+</html>
diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
index 056a866a..88fdd8da 100644
--- a/src/components/HexGrid/HexGrid.svelte
+++ b/src/components/HexGrid/HexGrid.svelte
@@ -18,18 +18,15 @@
     sourceElemArr[idx].srcset = imgElemArr[idx].src;
   };
 
-  // switch to flex box if screen is wider than 360 and item numbers are less than 3
-  $: outerWidth = 0;
   $: showGrid = data.length >= 3 ? true : false;
 </script>
 
-<svelte:window bind:outerWidth />
-<ul
-  in:fade={{ delay: 300, duration: 900 }}
-  class={showGrid ? 'root-categories-container' : 'flexbox-container'}
->
+<ul class={showGrid ? 'root-categories-container' : 'flexbox-container'}>
   {#each data as category, idx (category.Id)}
-    <li class={showGrid ? 'hex' : 'hex-flex'}>
+    <li
+      in:fade={{ delay: 400, duration: 1200 }}
+      class={showGrid ? 'hex' : 'hex-flex'}
+    >
       <div class="hex-in">
         <div class="hex-link">
           <picture>
diff --git a/src/components/ProductImage/ProductImage.svelte b/src/components/ProductImage/ProductImage.svelte
index 0a6ff24a..5fe4677a 100644
--- a/src/components/ProductImage/ProductImage.svelte
+++ b/src/components/ProductImage/ProductImage.svelte
@@ -78,7 +78,7 @@
 <svelte:window on:keydown={handleArrowKeydown} bind:outerWidth />
 {#if product}
   <div class="swipe-holder">
-    <Swipe bind:activeItem bind:this={SwipeComp} {...swipeConfig}>
+    <Swipe bind:active_item={activeItem} bind:this={SwipeComp} {...swipeConfig}>
       {#each product.ProductImages as _, idx ('main' + idx)}
         <SwipeItem allow_dynamic_height={true}>
           <img
diff --git a/src/components/SingleProduct/SingleProduct.svelte b/src/components/SingleProduct/SingleProduct.svelte
index 6f9c7627..160b09c8 100644
--- a/src/components/SingleProduct/SingleProduct.svelte
+++ b/src/components/SingleProduct/SingleProduct.svelte
@@ -21,7 +21,6 @@
       {/if}
       <div class="detailed-products-footer">
         <div class="product-details">
-          <h4>{`${product.Description}`}</h4>
           <h4>
             {`£${product.SalePrice} -- ${
               product.CurrentStock === 0
@@ -50,6 +49,10 @@
       <AddToBasket {product} detailed={showDetailedView} />
     {/if}
   </button>
+
+  {#if showDetailedView}
+    <h4>{`${product.Description}`}</h4>
+  {/if}
 {/if}
 
 <style>
@@ -116,6 +119,7 @@
   }
 
   h3 {
+    display: block;
     font-size: 0.7em;
   }
 
diff --git a/src/pages/shop/product/[product].svelte b/src/pages/shop/product/[product].svelte
index cd6a0e6f..bc6e76e8 100644
--- a/src/pages/shop/product/[product].svelte
+++ b/src/pages/shop/product/[product].svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
   import { params } from '@roxi/routify';
   import { products } from '@/stores/products';
   import SingleProduct from '@/components/SingleProduct/SingleProduct.svelte';
@@ -47,6 +48,7 @@
 <style>
   div {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }
