diff --git a/App.vue b/App.vue
index 8ea13921..6d83aaf9 100644
--- a/App.vue
+++ b/App.vue
@@ -30,6 +30,7 @@ export default {
 body {
   --overlay-z-index: 1;
   --sidebar-aside-z-index: 2;
+  --sidebar-z-index: 2;
   --bottom-navigation-height: 3.75rem;
   --bar-height: 3.125rem;
   --notification-font-size: var(--font-sm);
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50534d5c..446ce7c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,17 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.4] - UNRELEASED
+## [1.0.4] - 04.01.2020
 
 ### Added
 
 ### Changed / Improved
-
-- Fixed Broken tiles of mega menu on mobile (#465)
-
+- Improved spacing around product carousal on home page(#471)
+- Improved navbar layout (#467)
+- Improved heading in search panel (#478)
+- Fixed broken tiles of mega menu on mobile (#465)
+- Improved: Consistency of profile icon (#553)
+- Improved: Z-index for dropdowns(#536)
+- Improved Error page spacings (#537)
+- Improved styling around notification (#540)
+- Added active state for the profile in bottom navigation (#541)
+- Z-index for sidebar (#501)
+- Added safe are in bottom elements (#499)
+- Added safe are in bottom elements (#499)
+- Used spacer variable for footer icons (#484)
+- Improved spacing of elements of product page (#481)
 - Removed: Overridden logo height (#490)
 - Fixed: duplicate image issue in offine mode (#498)
 - Improved: code to add the overflow-wrap property on the SfProperty value (#555)
+- Fixed: Blank prices field on checkout in offline mode (#513)
 
 ## [1.0.3] - 20.09.2020
 
@@ -41,7 +53,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replaced deprecated action product/list call with findProducts (#417)
 - Fix hydration errors with fresh installation (#462)
 - Fixed console warning related to  value of key 'Sort by' is not a string (#476)
-- Added phone number validation in shipping and payment (#4767)
 - Update pwacompat to avoid loading multiple favicons (https://github.com/DivanteLtd/vue-storefront/issues/4559)
 - Fixed changing and deleting shipping details on MyAccount (#4499)
 - Corrected displayed price when choosing configurable product second time (#493)
diff --git a/components/molecules/m-error.vue b/components/molecules/m-error.vue
index 96edb593..27728286 100644
--- a/components/molecules/m-error.vue
+++ b/components/molecules/m-error.vue
@@ -47,21 +47,15 @@ export default {
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .error {
-  margin: auto;
-  padding: 0 1.25rem;
-  &__image,
-  &__message {
-    margin: calc(var(--spacer-xl) * 2) 0;
-    text-align: center;
-    --heading-border: none;
-  }
-  &__image {
-    display: flex;
-    justify-content: center;
-  }
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
   &__action {
-    max-width: 24rem;
-    margin: var(--spacer-2xl) auto;
+    margin-top: var(--spacer-2xl);
     @include for-desktop {
       display: flex;
     }
@@ -69,10 +63,9 @@ export default {
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: var(--spacer-xl) 0;
+      margin-top: var(--spacer-xl);
       @include for-desktop {
-        margin: 0;
-        text-align: right;
+        margin: auto var(--spacer-2xl);
       }
     }
   }
diff --git a/components/molecules/m-price-summary.vue b/components/molecules/m-price-summary.vue
index 5de911b1..81bdcb2a 100644
--- a/components/molecules/m-price-summary.vue
+++ b/components/molecules/m-price-summary.vue
@@ -7,18 +7,28 @@
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.subtotal"
       :name="$t('Subtotal')"
       :value="prices.subtotal | price"
       class="sf-property--full-width property"
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.subtotal_incl_tax"
+      :name="$t('Subtotal Incl Tax')"
+      :value="prices.subtotal_incl_tax | price"
+      class="sf-property--full-width property"
+      :class="{'sf-property--large': isLarge}"
+    />
+    <SfProperty
+      v-if="prices.tax || prices.tax === 0"
       :name="$t('Tax')"
       :value="prices.tax | price"
       class="sf-property--full-width property"
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.shipping || prices.shipping === 0"
       :name="$t('Shipping')"
       :value="prices.shipping | price"
       class="sf-property--full-width property"
diff --git a/components/molecules/m-product-additional-info.vue b/components/molecules/m-product-additional-info.vue
index 62426f7b..a823ff05 100644
--- a/components/molecules/m-product-additional-info.vue
+++ b/components/molecules/m-product-additional-info.vue
@@ -109,7 +109,7 @@ export default {
     margin: var(--spacer-lg) auto var(--spacer-2xl);
     @include for-desktop {
       margin-top: var(--spacer-2xl);
-      --tabs-content-tab-padding: 3.5rem 0 0 0;
+      --tabs-content-tab-padding: var(--spacer-xl) 0 0 0;
     }
   }
   &__property {
diff --git a/components/molecules/m-product-options-configurable.vue b/components/molecules/m-product-options-configurable.vue
index d9d7fc07..9109ae5f 100644
--- a/components/molecules/m-product-options-configurable.vue
+++ b/components/molecules/m-product-options-configurable.vue
@@ -133,7 +133,6 @@ export default {
 .product {
   &__select-size {
     flex: 100%;
-    margin: 0 var(--spacer-sm);
     @include for-desktop {
       margin: 0;
     }
@@ -143,13 +142,13 @@ export default {
     flex: 100%;
     order: 1;
     align-items: center;
-    margin: var(--spacer-xl) var(--spacer-sm) 0;
+    margin: var(--spacer-xl) 0 0;
     @include for-desktop {
       margin: var(--spacer-xl) 0 0;
     }
   }
   &__color-label {
-    margin: 0 var(--spacer-lg) 0 0;
+    margin: 0 var(--spacer-base) 0 0;
   }
   &__color {
     margin: 0 var(--spacer-2xs);
diff --git a/components/molecules/m-product-short-info.vue b/components/molecules/m-product-short-info.vue
index 39e4745b..61371108 100644
--- a/components/molecules/m-product-short-info.vue
+++ b/components/molecules/m-product-short-info.vue
@@ -84,7 +84,6 @@ export default {
 
 .product {
   &__header {
-    margin: 0 var(--spacer-sm);
     display: flex;
     justify-content: space-between;
     @include for-desktop {
@@ -95,7 +94,7 @@ export default {
     animation: moveicon 1s ease-in-out infinite;
   }
   &__price-and-rating {
-    margin: var(--spacer-xs) var(--spacer-sm) var(--spacer-base);
+    margin: var(--spacer-xs) 0 var(--spacer-base);
     align-items: center;
     @include for-desktop {
       display: flex;
diff --git a/components/molecules/m-review-list.vue b/components/molecules/m-review-list.vue
index e9bc1331..5914d040 100644
--- a/components/molecules/m-review-list.vue
+++ b/components/molecules/m-review-list.vue
@@ -95,4 +95,7 @@ export default {
     margin: var(--spacer-lg) 0 0;
   }
 }
+.m-review-list {
+  margin-top: var(--spacer-base);
+}
 </style>
diff --git a/components/organisms/o-bottom-navigation.vue b/components/organisms/o-bottom-navigation.vue
index 9e7441f6..e1adc164 100644
--- a/components/organisms/o-bottom-navigation.vue
+++ b/components/organisms/o-bottom-navigation.vue
@@ -34,7 +34,7 @@ export default {
         { icon: 'home', label: this.$t('Home'), onClick: this.goToHome },
         { icon: 'menu', label: this.$t('Menu'), onClick: this.goToMenu },
         { icon: 'search', label: this.$t('Search'), onClick: this.goToSearch },
-        { icon: 'profile', label: this.$t('Profile'), onClick: this.goToAccount },
+        { icon: 'account', label: this.$t('Profile'), onClick: this.goToAccount },
         { icon: 'add_to_cart', label: this.$t('Cart'), onClick: this.goToCart, isFloating: true }
       ]
     }
@@ -58,6 +58,10 @@ export default {
           case 'search': {
             return this.isSearchPanelVisible
           }
+          case 'profile': {
+            const isProfile = this.$route.name === this.localizedRoute({ name: 'my-account', path: 'my-account' }).name
+            return isProfile && !this.isMobileMenu
+          }
           default: {
             // we don't need to show active icon for profile and cart, because bottom navigation is below
             return false
diff --git a/components/organisms/o-footer.vue b/components/organisms/o-footer.vue
index b7d6bf95..187e0fdc 100644
--- a/components/organisms/o-footer.vue
+++ b/components/organisms/o-footer.vue
@@ -167,14 +167,14 @@ export default {
   flex-basis: auto;
 }
 .social-icon {
-  padding: 20px 40px;
+  padding: var(--spacer-sm) var(--spacer-xl);
   @include for-desktop {
-    padding: 6px 0;
+    padding: var(--spacer-xs) 0;
   }
   &__img {
     height: 1.75rem;
     &:not(:last-child) {
-      margin-right: 1.25rem;
+      margin-right: var(--spacer-base);
     }
   }
 }
diff --git a/components/organisms/o-header.vue b/components/organisms/o-header.vue
index 11b1eceb..7afa33d0 100644
--- a/components/organisms/o-header.vue
+++ b/components/organisms/o-header.vue
@@ -165,7 +165,6 @@ export default {
     }
     @include for-mobile {
       width: 100%;
-      padding: 0 var(--spacer-sm);
       .sf-button {
         margin: 0 0 0 var(--spacer-sm);
       }
diff --git a/components/organisms/o-notification.vue b/components/organisms/o-notification.vue
index fa4cf887..52a4fd05 100644
--- a/components/organisms/o-notification.vue
+++ b/components/organisms/o-notification.vue
@@ -62,6 +62,7 @@ export default {
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .o-notification {
+  --notification-max-width: 100%;
   position: fixed;
   top: 100px;
   right: 5%;
diff --git a/components/organisms/o-payment.vue b/components/organisms/o-payment.vue
index 0a35ea61..ae4be325 100644
--- a/components/organisms/o-payment.vue
+++ b/components/organisms/o-payment.vue
@@ -116,10 +116,6 @@
         class="form__element"
         name="phone"
         :label="$t('Phone Number')"
-        required
-        :valid="!$v.payment.phoneNumber.$error"
-        :error-message="$t('Please provide valid phone number')"
-        @blur="$v.payment.phoneNumber.$touch()"
       />
       <SfCheckbox
         v-model="generateInvoice"
@@ -198,7 +194,7 @@
 </template>
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
-import { unicodeAlpha, unicodeAlphaNum, phoneNum } from '@vue-storefront/core/helpers/validators';
+import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { Payment } from '@vue-storefront/core/modules/checkout/components/Payment';
 import {
   SfInput,
@@ -254,10 +250,6 @@ export default {
       },
       paymentMethod: {
         required
-      },
-      phoneNumber: {
-        required,
-        phoneNum
       }
     };
 
diff --git a/components/organisms/o-product-details.vue b/components/organisms/o-product-details.vue
index 768550a8..95f6f450 100644
--- a/components/organisms/o-product-details.vue
+++ b/components/organisms/o-product-details.vue
@@ -155,15 +155,15 @@ export default {
   }
   &__info {
     margin: var(--spacer-sm) auto var(--spacer-xs);
+    padding: 0 var(--spacer-sm);
     @include for-desktop {
       max-width: 32.625rem;
       margin: 0 0 0 7.5rem;
+      padding: 0;
     }
   }
   &__add-to-cart {
-    @include for-mobile {
-      margin: var(--spacer-sm) var(--spacer-sm) 0;
-    }
+    margin: var(--spacer-base) 0 0;
     @include for-desktop {
       margin-top: var(--spacer-sm);
     }
diff --git a/components/organisms/o-search-panel.vue b/components/organisms/o-search-panel.vue
index a6cf8b97..372848b4 100644
--- a/components/organisms/o-search-panel.vue
+++ b/components/organisms/o-search-panel.vue
@@ -8,9 +8,7 @@
     </div>
     <div v-else class="container">
       <div class="categories">
-        <h1 class="categories__title">
-          {{ $t("Categories") }}
-        </h1>
+        <SfHeading :level="3" :title="$t('Categories')" class="categories__title sf-heading--left" />
         <SfList v-if="visibleProducts.length && categories.length > 1" class="categories__listing">
           <SfListItem
             v-for="category in categories"
@@ -26,9 +24,7 @@
         </SfList>
       </div>
       <div class="products">
-        <h1 class="products__title">
-          {{ $t("Product suggestions") }}
-        </h1>
+        <SfHeading :level="3" :title="$t('Product suggestions')" class="products__title sf-heading--left" />
         <div class="products__listing">
           <SfProductCard
             v-for="product in visibleProducts"
@@ -67,7 +63,7 @@ import { htmlDecode } from '@vue-storefront/core/filters';
 import { formatProductLink } from '@vue-storefront/core/modules/url/helpers';
 import { prepareCategoryProduct } from 'theme/helpers';
 import VueOfflineMixin from 'vue-offline/mixin';
-import { SfButton, SfList, SfMenuItem, SfProductCard } from '@storefront-ui/vue';
+import { SfHeading, SfButton, SfList, SfMenuItem, SfProductCard } from '@storefront-ui/vue';
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 
 export default {
@@ -76,7 +72,8 @@ export default {
     SfButton,
     SfList,
     SfMenuItem,
-    SfProductCard
+    SfProductCard,
+    SfHeading
   },
   mixins: [VueOfflineMixin],
   data () {
@@ -179,8 +176,7 @@ export default {
 
   .container {
     display: flex;
-    padding-left: 40px;
-    padding-right: 40px;
+    padding: 0 var(--spacer-sm);
     max-width: 1272px;
     margin: auto;
     @include for-desktop {
@@ -188,6 +184,7 @@ export default {
     }
     @include for-mobile {
       flex-direction: column;
+      padding: 0 var(--spacer-xl);
     }
   }
 
@@ -200,9 +197,8 @@ export default {
 
     &__title {
       padding: 0;
-      font-size: var(--font-lg);
-      font-weight: 500;
-      line-height: 3;
+      margin-top: var(--spacer-base);
+      justify-content: start;
     }
     &__listing {
       @include for-desktop {
@@ -223,15 +219,13 @@ export default {
     width: 100%;
     &__title {
       padding: 0;
-      font-size: var(--font-lg);
-      font-weight: 500;
-      line-height: 3;
+      justify-content: start;
+      margin-top: var(--spacer-base);
     }
     &__listing {
       display: flex;
       flex: 0 1 auto;
       flex-wrap: wrap;
-      margin: -1rem -1rem 0;
     }
     &__product-card {
       --product-card-max-width: 200px;
diff --git a/components/organisms/o-shipping.vue b/components/organisms/o-shipping.vue
index df327ffe..68dd4b55 100644
--- a/components/organisms/o-shipping.vue
+++ b/components/organisms/o-shipping.vue
@@ -110,10 +110,6 @@
         class="form__element"
         name="phone"
         :label="$t('Phone Number')"
-        required
-        :valid="!$v.shipping.phoneNumber.$error"
-        :error-message="$t('Please provide valid phone number')"
-        @blur="$v.shipping.phoneNumber.$touch()"
       />
     </div>
     <SfHeading
@@ -162,7 +158,7 @@
 </template>
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
-import { unicodeAlpha, unicodeAlphaNum, phoneNum } from '@vue-storefront/core/helpers/validators';
+import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { Shipping } from '@vue-storefront/core/modules/checkout/components/Shipping';
 import {
   SfInput,
@@ -215,10 +211,6 @@ export default {
       city: {
         required,
         unicodeAlpha
-      },
-      phoneNumber: {
-        required,
-        phoneNum
       }
     }
   },
diff --git a/package.json b/package.json
index 4b9e862a..a5d5a64a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-capybara",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "New theme for Vue Storefront based on Storefront UI",
   "main": "index.js",
   "scripts": {
diff --git a/pages/Category.vue b/pages/Category.vue
index 5b25e0a7..08f6104f 100644
--- a/pages/Category.vue
+++ b/pages/Category.vue
@@ -12,22 +12,22 @@
         <SfHeading :level="3" :title="$t('Categories')" class="navbar__title" />
       </div>
       <div class="navbar__main">
-        <SfButton
-          class="sf-button--text navbar__filters-button"
-          @click="isFilterSidebarOpen = true"
-        >
-          <SfIcon size="18px" class="navbar__filters-icon" color="#BEBFC4" icon="filter" />
-          {{ $t("Filters") }}
+        <div class="navbar__filter">
+          <SfButton
+            class="sf-button--text navbar__filters-button"
+            @click="isFilterSidebarOpen = true"
+          >
+            <SfIcon size="18px" class="navbar__filters-icon" color="#BEBFC4" icon="filter" />
+            {{ $t("Filters") }}
+          </SfButton>
           <template v-if="activeFiltersCount">
             ({{ activeFiltersCount }})
+            <span> &nbsp;&mdash;&nbsp;</span>
+            <button @click="clearAllFilters" class="sf-button sf-button--text navbar__filters-clear-all">
+              {{ $t('Clear all') }}
+            </button>
           </template>
-        </SfButton>
-        <template v-if="activeFiltersCount">
-          <span>&nbsp;&mdash;&nbsp;</span>
-          <button @click="clearAllFilters" class="sf-button sf-button--text navbar__filters-clear-all">
-            {{ $t('Clear all') }}
-          </button>
-        </template>
+        </div>
         <div class="navbar__sort">
           <span class="navbar__label desktop-only">{{ $t("Sort By") }}:</span>
           <SfSelect
@@ -45,14 +45,14 @@
               {{ option.label }}
             </SfSelectOption>
           </SfSelect>
+          <SfButton
+            class="sf-button--text navbar__filters-button sort-by__button mobile-only"
+            @click="$refs.SortBy.toggle()"
+          >
+            {{ $t('Sort By') }}
+            <ASortIcon />
+          </SfButton>
         </div>
-        <SfButton
-          class="sf-button--text navbar__filters-button sort-by__button mobile-only"
-          @click="$refs.SortBy.toggle()"
-        >
-          {{ $t('Sort By') }}
-          <ASortIcon />
-        </SfButton>
         <div class="navbar__counter">
           <span class="navbar__label desktop-only">
             {{ $t("Products found") }}:
@@ -627,39 +627,35 @@ export default {
       padding: 0;
     }
   }
-  &__aside,
-  &__main {
-    display: flex;
-    align-items: center;
-    padding: var(--spacer-sm) 0;
-  }
   &__aside {
+    align-items: center;
+    display: flex;
     flex: 0 0 15%;
     padding: var(--spacer-sm) var(--spacer-sm);
     border: 1px solid var(--c-light);
     border-width: 0 1px 0 0;
   }
   &__main {
+    align-items: center;
+    display: grid;
     flex: 1;
-    padding: 0;
+    grid-template-columns: 1fr minmax( auto, max-content) 1fr;
+    grid-template-areas:'filter counter sort';
     @include for-desktop {
+      grid-template-areas:'filter sort counter';
+      grid-column-gap: var(--spacer-2xl);
+      grid-template-columns: max-content max-content auto;
       padding: var(--spacer-xs) var(--spacer-xl);
     }
   }
-  &__title {
-    --heading-title-font-weight: var(--font-light);
-    --heading-title-font-size: var(--font-xl);
-  }
   &__filters-button {
     display: flex;
     align-items: center;
     font-size: 1rem;
-    svg {
-      fill: var(--c-text-muted);
-      transition: fill 150ms ease;
-    }
+    grid-column: 1;
+    justify-self: start;
     &:hover {
-      svg {
+      .sf-icon {
         fill: var(--c-primary);
       }
     }
@@ -671,6 +667,10 @@ export default {
       }
     }
   }
+  &__filter {
+    display: flex;
+    grid-area: filter;
+  }
   &__filters-icon {
     margin: 0 var(--spacer-sm) 0 0;
   }
@@ -691,29 +691,17 @@ export default {
   &__sort {
     display: flex;
     align-items: center;
-    margin: 0 auto 0 var(--spacer-2xl);
-
-    // This is needed to hide SfSelect main element on mobile view.
-    // This code can be removed when SfSelect supports better customization.
-    @include for-mobile {
-      position: absolute;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      --select-dropdown-z-index: 2;
-      ::v-deep .sf-select__cancel {
-        margin: 16px;
-        box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25);
-        --button-width: calc(100% - 32px);
-      }
+    justify-self: end;
+    grid-area: sort;
+    @include for-desktop {
+      justify-self: center;
     }
   }
   &__counter {
     font-family: var(--font-family-secondary);
-    margin: auto;
-    @include for-desktop {
-      margin: auto 0 auto auto;
-    }
+    grid-column: 3;
+    justify-self: end;
+    grid-area: counter;
   }
   &__view {
     display: flex;
@@ -735,6 +723,7 @@ export default {
 .sort-by {
   --select-dropdown-z-index: 2;
   flex: unset;
+  padding: 0;
   ::v-deep {
     .sf-select__dropdown {
       min-width: max-content;
@@ -743,6 +732,20 @@ export default {
       cursor: pointer;
     }
   }
+  // This is needed to hide SfSelect main element on mobile view.
+  // This code can be removed when SfSelect supports better customization.
+  @include for-mobile {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    --select-dropdown-z-index: 2;
+    ::v-deep .sf-select__cancel {
+      margin: 16px;
+      box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25);
+      --button-width: calc(100% - 32px);
+    }
+  }
 }
 .main {
   display: flex;
diff --git a/pages/Home.vue b/pages/Home.vue
index 6b6382fb..1703bd9a 100644
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -173,10 +173,4 @@ export default {
     margin: var(--spacer-2xl) 0;
   }
 }
-.section {
-  @include for-desktop {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
 </style>
diff --git a/pages/Product.vue b/pages/Product.vue
index 83d1cbc7..ff5f60a8 100644
--- a/pages/Product.vue
+++ b/pages/Product.vue
@@ -246,7 +246,7 @@ export default {
   box-sizing: border-box;
   padding: 0 var(--spacer-sm);
   @include for-desktop {
-    padding: 0 var(--spacer-sm);
+    padding: 0;
     max-width: 1272px;
   }
 }