diff --git a/core/mixins/onEscapePress/index.js b/core/mixins/onEscapePress/index.js
index e029d7c6dd..0cd2028122 100644
--- a/core/mixins/onEscapePress/index.js
+++ b/core/mixins/onEscapePress/index.js
@@ -1,3 +1,14 @@
-import { onEscapePress } from 'core/modules/ui'
-// for backward compatibility, probably will be changed for a module
-export default onEscapePress
+export default {
+  mounted () {
+    const keydownHandler = (e) => {
+      // for old browser support as a fallback
+      if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
+        this.onEscapePress()
+      }
+    }
+    document.addEventListener('keydown', keydownHandler)
+    this.$once('hook:desktroyed', () => {
+      document.removeEventListener('keydown', keydownHandler)
+    })
+  }
+}
diff --git a/core/modules/README.md b/core/modules/README.md
deleted file mode 100644
index 1d15a211ac..0000000000
--- a/core/modules/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# About VS modules
-
-This is an experimental APi that will replace standard core components in the future. 
-
-It's just a basic overwiew of the idea - feel free to share your opinion here https://github.com/DivanteLtd/vue-storefront/pull/1184.
-
-This is just a showcase DO NOT USE this API until the format will be confirmed.
-
diff --git a/core/modules/cart/add.js b/core/modules/cart/add.js
deleted file mode 100644
index c165f9e638..0000000000
--- a/core/modules/cart/add.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  props: {
-    product: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    addToCart (product) {
-      this.$store.dispatch('cart/addItem', { productToAdd: product })
-    }
-  }
-}
diff --git a/core/modules/cart/index.js b/core/modules/cart/index.js
deleted file mode 100644
index fa33dc15f2..0000000000
--- a/core/modules/cart/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import addToCart from './add'
-import removeFromCart from './remove'
-import productsInCart from './products'
-
-export default {
-  addToCart,
-  removeFromCart,
-  productsInCart
-}
-
-export {
-  addToCart,
-  removeFromCart,
-  productsInCart
-}
diff --git a/core/modules/cart/products.js b/core/modules/cart/products.js
deleted file mode 100644
index e45ae8ebf4..0000000000
--- a/core/modules/cart/products.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  computed: {
-    // previosly 'items'
-    productsInCart () {
-      return this.$store.state.cart.cartItems
-    }
-  }
-}
diff --git a/core/modules/cart/remove.js b/core/modules/cart/remove.js
deleted file mode 100644
index 058c92459e..0000000000
--- a/core/modules/cart/remove.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { mapActions } from 'vuex'
-
-// Change to not use mapActions
-export default {
-  methods: {
-    ...mapActions({ 'removeFromCart': 'cart/removeItem' })
-  }
-}
diff --git a/core/modules/ui/index.js b/core/modules/ui/index.js
deleted file mode 100644
index d46b285253..0000000000
--- a/core/modules/ui/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import onEscapePress from './onEscapePress'
-
-export default {
-  onEscapePress
-}
-
-export {
-  onEscapePress
-}
diff --git a/core/modules/ui/onEscapePress.js b/core/modules/ui/onEscapePress.js
deleted file mode 100644
index 6dba905cba..0000000000
--- a/core/modules/ui/onEscapePress.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// After injecting this mixin create onEscapePress function in your component
-// which will be fired after pressing Esc key and put the desired logic inside it
-export default {
-  mounted () {
-    const keydownHandler = (e) => {
-      // for old browser support as a fallback
-      if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
-        this.onEscapePress()
-      }
-    }
-    document.addEventListener('keydown', keydownHandler)
-    this.$once('hook:desktroyed', () => {
-      document.removeEventListener('keydown', keydownHandler)
-    })
-  }
-}
diff --git a/src/themes/catalog/.gitignore b/src/themes/catalog/.gitignore
deleted file mode 100644
index 40b878db5b..0000000000
--- a/src/themes/catalog/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-node_modules/
\ No newline at end of file
diff --git a/src/themes/catalog/App.vue b/src/themes/catalog/App.vue
deleted file mode 100644
index f19e4eaa13..0000000000
--- a/src/themes/catalog/App.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div id="app">
-    <notification />
-    <overlay v-if="overlayActive" />
-    <wishlist />
-    <main-header />
-    <router-view />
-    <main-footer />
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-import MainHeader from 'theme/components/core/blocks/Header/Header'
-import MainFooter from 'theme/components/core/blocks/Footer/Footer'
-import Notification from 'theme/components/core/Notification'
-
-import Wishlist from 'theme/components/core/blocks/Wishlist/Wishlist'
-import Overlay from 'theme/components/core/Overlay'
-
-import Head from 'theme/resource/head'
-
-export default {
-  computed: {
-    ...mapState({
-      overlayActive: state => state.ui.overlay
-    })
-  },
-  metaInfo: Head,
-  components: {
-    MainHeader,
-    MainFooter,
-    Notification,
-    Wishlist,
-    Overlay
-  }
-}
-</script>
-
-<style lang="scss" src="./css/main.scss">
diff --git a/src/themes/catalog/app-extend.js b/src/themes/catalog/app-extend.js
deleted file mode 100644
index 1f31925a10..0000000000
--- a/src/themes/catalog/app-extend.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// You can extend main app.js file here. The function param is a root Vue instance.
-
-export default function (Vue) {
-
-}
diff --git a/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff b/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff
deleted file mode 100644
index b648a3eea2..0000000000
Binary files a/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff and /dev/null differ
diff --git a/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff2 b/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff2
deleted file mode 100644
index 9fa2112520..0000000000
Binary files a/src/themes/catalog/assets/fonts/MaterialIcons-Regular.woff2 and /dev/null differ
diff --git a/src/themes/catalog/assets/homepage/magazines/marathon.png b/src/themes/catalog/assets/homepage/magazines/marathon.png
deleted file mode 100644
index 7e9c146f98..0000000000
Binary files a/src/themes/catalog/assets/homepage/magazines/marathon.png and /dev/null differ
diff --git a/src/themes/catalog/assets/homepage/magazines/roads.png b/src/themes/catalog/assets/homepage/magazines/roads.png
deleted file mode 100644
index c62f5b6e7c..0000000000
Binary files a/src/themes/catalog/assets/homepage/magazines/roads.png and /dev/null differ
diff --git a/src/themes/catalog/assets/homepage_bg.png b/src/themes/catalog/assets/homepage_bg.png
deleted file mode 100644
index c8f2907417..0000000000
Binary files a/src/themes/catalog/assets/homepage_bg.png and /dev/null differ
diff --git a/src/themes/catalog/assets/manifest.json b/src/themes/catalog/assets/manifest.json
deleted file mode 100644
index 35f99d1d7a..0000000000
--- a/src/themes/catalog/assets/manifest.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-    "short_name": "Vue Storefront",
-    "name": "Vue Storefront Catalog",
-    "background_color": "#ffffff",
-    "display": "standalone",
-    "theme_color": "#ffffff",
-    "icons": [
-      {
-        "src": "/assets/launcher-icon-1x.png",
-        "type": "image/png",
-        "sizes": "48x48"
-      },
-      {
-        "src": "/assets/launcher-icon-72x72.png",
-        "type": "image/png",
-        "sizes": "72x72"
-      },
-      {
-        "src": "/assets/launcher-icon-2x.png",
-        "type": "image/png",
-        "sizes": "96x96"
-      },
-      {
-        "src": "/assets/launcher-icon-144x144.png",
-        "type": "image/png",
-        "sizes": "144x144"
-      },
-      {
-        "src": "/assets/launcher-icon-168x168.png",
-        "type": "image/png",
-        "sizes": "168x168"
-      },
-      {
-        "src": "/assets/launcher-icon-4x.png",
-        "type": "image/png",
-        "sizes": "192x192"
-      }
-    ],
-    "start_url": "/pwa.html"
-  }
diff --git a/src/themes/catalog/components/core/Breadcrumbs.vue b/src/themes/catalog/components/core/Breadcrumbs.vue
deleted file mode 100644
index c9cb3b44b6..0000000000
--- a/src/themes/catalog/components/core/Breadcrumbs.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="breadcrumbs">
-    <span v-for="(link, index) in routes" :key="index" class="c-secondary-lighter">
-      {{ link.name | htmlDecode }} /
-    </span>
-    <span>
-      {{ activeRoute | htmlDecode }}
-    </span>
-  </div>
-</template>
-
-<script>
-import Breadcrumbs from 'core/components/Breadcrumbs'
-
-export default {
-  mixins: [Breadcrumbs]
-}
-</script>
diff --git a/src/themes/catalog/components/core/CategoryTile.vue b/src/themes/catalog/components/core/CategoryTile.vue
deleted file mode 100644
index 72e527852d..0000000000
--- a/src/themes/catalog/components/core/CategoryTile.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="category-tile center-xs middle-xs flex fs-large extrabold bg-accent bg-accent-hover c-on-accent">
-    {{ label }}
-  </div>
-</template>
-
-<script>
-// not in Core
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/additional';
-.category-tile {
-    height: 150px;
-    @media ( min-width: $md ) {
-      height: 350px;
-    }
-}
-</style>
diff --git a/src/themes/catalog/components/core/ColorFilter.vue b/src/themes/catalog/components/core/ColorFilter.vue
deleted file mode 100644
index 1746c92015..0000000000
--- a/src/themes/catalog/components/core/ColorFilter.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div @click="switchFilter(id, from, to)" class="color-filter b b-circle inline-flex middle-xs center-xs pointer" :class="{ active : active }">
-    <div class="b b-circle" :style="'background-color:' + color"/>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    color: { type: String, required: true },
-    id: { type: Number, required: true },
-    from: { type: Number, required: false, default: 0 },
-    to: { type: Number, required: false, default: 0 },
-    initialActive: { type: Boolean, required: false, default: false }
-  },
-  data () {
-    return {
-      active: this.initialActive,
-      context: 'product',
-      code: 'color'
-    }
-  },
-  beforeMount () {
-    this.$bus.$on('filter-changed-' + this.context, (filterOption) => {
-      if (filterOption.attribute_code === this.code) {
-        if (filterOption.id === this.id) {
-          if (this.active) {
-            this.active = false
-          } else {
-            this.active = true
-          }
-        } else {
-          this.active = false
-        }
-        // filterOption.id === this.id ? this.active = true : this.active = false
-      }
-    })
-  },
-  methods: {
-    switchFilter (id, from, to) {
-      this.$bus.$emit('filter-changed-' + this.context, { attribute_code: this.code, id: id, from: from, to: to })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/colors';
-
-.color-filter {
-  width: 40px;
-  height: 40px;
-  border-color: transparent;
-}
-.color-filter.active {
-  border-color: darken($c-border, 20%);
-}
-.color-filter > div {
-  width: 34px;
-  height: 34px;
-}
-</style>
diff --git a/src/themes/catalog/components/core/Logo.vue b/src/themes/catalog/components/core/Logo.vue
deleted file mode 100644
index 83f1403408..0000000000
--- a/src/themes/catalog/components/core/Logo.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <img
-    src="/assets/logo.svg"
-    alt="Vuestore logo"
-  >
-</template>
diff --git a/src/themes/catalog/components/core/Notification.vue b/src/themes/catalog/components/core/Notification.vue
deleted file mode 100644
index 8db9372601..0000000000
--- a/src/themes/catalog/components/core/Notification.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="notifications">
-    <transition-group name="fade-in-down">
-      <div class="notification c-on-dark" v-for="(notification, index) in notifications" :key="index" :class="{ info : notification.type == 'info', success: notification.type == 'success', error: notification.type == 'error', warning: notification.type == 'warning'} ">
-        <div class="message" v-html="notification.message"/>
-        <div class="actions uppercase" @click="action(notification.action1.action, index)">
-          {{ notification.action1.label }}
-        </div>
-      </div>
-    </transition-group>
-  </div>
-</template>
-
-<script>
-import Notification from 'core/components/Notification'
-
-export default {
-  mixins: [Notification]
-}
-</script>
-
-<style lang="scss" scoped>
-// TODO: refactor according to new theme styles
-.notifications {
-  position: fixed;
-  top: 50px;
-  right: 5%;
-  width: 320px;
-  z-index: 2;
-
-  @media (max-width: 64em) {
-    width: auto;
-    top: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .fade-in-down-enter,
-    .fade-in-down-leave-to {
-      transform: translateY(100%);
-    }
-  }
-}
-.notification {
-  box-sizing: border-box;
-  box-shadow: 0px 0px 35px -5px rgba(0,0,0,.7);
-  & + &  {
-    margin-top: 30px;
-  }
-
-}
-
-.notification > .message {
-  padding: 20px;
-}
-.notification > .actions {
-  padding: 10px 20px;
-  font-weight: bolder;
-  background: rgba(0,0,0,.2);
-  cursor: pointer;
-}
-
-.notification.success {
-  background: #308C14;
-
-}
-.notification.error {
-  background: #E63030;
-
-}
-.notification.warning {
-  background: #775555;
-}
-
-.notification.info {
-  background: #4F4F4F;
-}
-</style>
diff --git a/src/themes/catalog/components/core/Overlay.vue b/src/themes/catalog/components/core/Overlay.vue
deleted file mode 100644
index d29f361c9b..0000000000
--- a/src/themes/catalog/components/core/Overlay.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="overlay full-width" @click="close" v-if="isVisible" />
-</template>
-
-<script>
-import Overlay from 'core/components/Overlay'
-
-export default {
-  mixins: [Overlay],
-  beforeCreate () {
-    document.documentElement.classList.add('no-scroll')
-  },
-  destroyed () {
-    document.documentElement.classList.remove('no-scroll')
-  },
-  methods: {
-    close () {
-      this.$store.commit('ui/setOverlay', false)
-      this.$store.commit('ui/setMicrocart', false)
-      this.$store.commit('ui/setWishlist', false)
-      this.$store.commit('ui/setSearchpanel', false)
-      this.$store.commit('ui/setSidebar', false)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.overlay {
-  position: fixed;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 3;
-}
-</style>
diff --git a/src/themes/catalog/components/core/ProductTile.vue b/src/themes/catalog/components/core/ProductTile.vue
deleted file mode 100644
index 5488f813c4..0000000000
--- a/src/themes/catalog/components/core/ProductTile.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="product-tile py10-md">
-    <div class="row center-xs fs-medium-small" :class="{ 'middle-xs p10' : mobileHorizontalMode, p30 : !mobileHorizontalMode}">
-      <div class="col-md-12" :class="{ 'col-xs-4' : mobileHorizontalMode}">
-        <figure class="image center-xs middle-xs flex m0 mt10" :class="{ 'image-horizontal' : mobileHorizontalMode }">
-          <img :src="thumbnail()" :alt="product.name">
-        </figure>
-      </div>
-      <div class="col-md-12 center-md" :class="{ 'col-xs-8 middle-xs start-xs' : mobileHorizontalMode}">
-        <div class="c-secondary" :class="{ mt20 : !mobileHorizontalMode }"> {{ product.name | htmlDecode }}</div>
-        <div class="bold c-on-light mt10"> {{ product.price | price }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    product: {
-      type: Object,
-      required: true
-    },
-    // desktopHorizontalMode: Boolean, - will be available soon
-    mobileHorizontalMode: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    thumbnail () {
-      return this.getThumbnail(this.product.image, 230, 250)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/additional';
-@import '~theme/css/mixins/transitions';
-
-.product-tile img {
-    @include transition-long;
-}
-.product-tile:hover img {
-    transform: scale(1.05);
-}
-.image {
-  height: 270px;
-  mix-blend-mode: multiply;
-}
-.image img {
-  overflow: hidden;
-  height: 250px;
-}
-
-@media ( max-width: $md ) {
-  .image-horizontal {
-    height: 80px;
-  }
-  .image-horizontal img {
-    height: 80px;
-  }
-}
-
-</style>
diff --git a/src/themes/catalog/components/core/SizeFilter.vue b/src/themes/catalog/components/core/SizeFilter.vue
deleted file mode 100644
index 74a1858287..0000000000
--- a/src/themes/catalog/components/core/SizeFilter.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <button @click="switchFilter(id, from, to)" class="p0 b pointer" :class="{ 'c-primary active': active, 'c-secondary-lighter' : !active }">
-    {{ size }}
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    size: { type: String, required: true },
-    id: { type: Number, required: true },
-    from: { type: Number, required: false, default: 0 },
-    to: { type: Number, required: false, default: 0 },
-    initialActive: { type: Boolean, required: false, default: false }
-  },
-  data () {
-    return {
-      active: this.initialActive,
-      context: 'product',
-      code: 'size'
-    }
-  },
-  beforeMount () {
-    this.$bus.$on('filter-changed-' + this.context, (filterOption) => {
-      if (filterOption.attribute_code === this.code) {
-        if (filterOption.id === this.id) {
-          if (this.active) {
-            this.active = false
-          } else {
-            this.active = true
-          }
-        } else {
-          this.active = false
-        }
-        // filterOption.id === this.id ? this.active = true : this.active = false
-      }
-    })
-  },
-  methods: {
-    switchFilter (id, from, to) {
-      this.$bus.$emit('filter-changed-' + this.context, { attribute_code: this.code, id: id, from: from, to: to })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/colors';
-
-button {
-  width: 40px;
-  height: 40px;
-  border-color: $c-border;
-  background: transparent;
-}
-
-button.active {
-  border-color: $c-text-primary;
-}
-</style>
diff --git a/src/themes/catalog/components/core/blocks/Footer/Footer.vue b/src/themes/catalog/components/core/blocks/Footer/Footer.vue
deleted file mode 100644
index d688c6632b..0000000000
--- a/src/themes/catalog/components/core/blocks/Footer/Footer.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <footer class="footer">
-
-    <div class="flex center-xs bg-secondary py70 ">
-      <div class="container">
-        <div class="row center-xs">
-          <div class="col-md-8 center-xs">
-            <NewsletterSubscribeForm />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="container py70">
-      <div class="row">
-        <div v-for="box in boxes" :key="box.title" class="col-xs-12 col-md-4">
-          <router-link :to="localizedRoute(box.link)">
-            <box :title="box.title" :content="box.content" :icon="box.icon" />
-          </router-link>
-        </div>
-      </div>
-    </div>
-
-  </footer>
-</template>
-
-<script>
-import NewsletterSubscribeForm from 'theme/components/theme/NewsletterSubscribeForm'
-import Box from 'theme/components/theme/blocks/Footer/Box'
-
-export default {
-  data () {
-    return {
-      boxes: [{
-        title: 'Call center',
-        content: '1-312-231-21-42',
-        icon: 'phone',
-        link: '/'
-      }, {
-        title: 'Online assistance',
-        content: 'Chat with us',
-        icon: 'chat',
-        link: '/'
-      }, {
-        title: 'Local stores',
-        content: 'Find a store',
-        icon: 'store',
-        link: '/'
-      }]
-    }
-  },
-  components: {
-    NewsletterSubscribeForm,
-    Box
-  }
-}
-</script>
diff --git a/src/themes/catalog/components/core/blocks/Header/Header.vue b/src/themes/catalog/components/core/blocks/Header/Header.vue
deleted file mode 100644
index 28e140dc20..0000000000
--- a/src/themes/catalog/components/core/blocks/Header/Header.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <header class="header b-bottom">
-
-    <div class="col-sm-12 p15 c-secondary-lighter bg-secondary center-xs">
-      <router-link to="/">Visit our stores</router-link>, choose one of 100+ stores in 52 countries all over the world!
-    </div>
-
-    <nav class="menu container">
-      <div class="row middle-xs between-md pl10 full-size">
-        <div class="col-xs-6 col-md-3 start-xl center-md middle-xs inline-flex">
-          <router-link to="/"><logo class="logo inline-flex pr25"/></router-link>
-          <i @click="focusSearchBox" class="material-icons b-left-md middle-xs px25 full-size inline-flex">search</i>
-        </div>
-        <div class="col-md-5 semibold end-xs middle-xs inline-flex uppercase hide flex-md">
-          <router-link v-for="category in categories" :key="category.name" :to="'/c/' + category.slug" class="menu-link full-size px20 middle-xs flex">
-            <div class="inline-flex">{{ category.name }}</div>
-            <div class="material-icons inline-flex c-accent">keyboard_arrow_down</div>
-          </router-link>
-        </div>
-        <div class="col-xs-6 col-md-4 uppercase end-xs">
-          <router-link to="/" class="px20 full-size magazine middle-xs semibold inline-flex-md hide">
-            <div class="material-icons inline-flex pr10">book</div>
-            <div class="inline-flex">Magazine</div>
-          </router-link>
-          <i @click="openWishlist" class="material-icons middle-xs px25 full-size inline-flex b-left-md">favorite_border</i>
-          <i @click="liveChatMessage" class="material-icons middle-xs px25 full-size inline-flex">forum</i>
-        </div>
-      </div>
-    </nav>
-
-  </header>
-</template>
-
-<script>
-import WishlistIcon from './newcore_WishlistIcon'
-import Logo from 'theme/components/core/Logo'
-import i18n from 'core/lib/i18n'
-
-export default {
-  computed: {
-    categories () {
-      return this.$store.state.category.list.filter(
-        category => category.level === 2 &&
-        (category.product_count > 0 || category.children_data.length > 0)
-      ).splice(0, 4)
-    }
-  },
-  methods: {
-    getCategories () {
-      return this.$store.dispatch('category/list', {})
-    },
-    liveChatMessage () {
-      this.$bus.$emit('notification', {
-        type: 'success',
-        message: i18n.t('This feature has not been implemented yet. Please follow our <a class="c-on-dark" style="text-decoration: underline" href="https://github.com/DivanteLtd/vue-storefront/issues">Roadmap</a> for the details'),
-        action1: { label: i18n.t('OK'), action: 'close' },
-        timeToLive: 20000
-      })
-    },
-    focusSearchBox () {
-      this.$bus.$emit('focusSearch')
-      if (this.$route.path !== '/') {
-        this.$router.push('/')
-      }
-    }
-  },
-  created () {
-    this.getCategories()
-  },
-  components: {
-    Logo
-  },
-  // TODO: Move wishlist icon mixin as a new core
-  mixins: [WishlistIcon]
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/colors';
-@import '~theme/css/mixins/transitions';
-@import '~theme/css/mixins/hovers';
-
-.logo {
-  height: 50px;
-}
-
-a {
-  color: $c-text-header-link;
-}
-
-.full-size {
-  height: 75px;
-}
-
-.magazine {
-    @include hover-bg($c-header-background-hover);
-    line-height: 25px;
-    .material-icons {
-      color: $c-icon;
-    }
-}
-
-i.material-icons {
-    @include transition-icon;
-    @include hover-bg($c-header-background-hover);
-    color: $c-icon;
-    &:hover {
-        color: $c-icon-hover;
-    }
-}
-
-.menu-link {
-  @include hover-bg($c-header-background-hover);
-  line-height: 25px;
-}
-
-//temporary
-i.material-icons {
-  cursor: pointer;
-}
-</style>
diff --git a/src/themes/catalog/components/core/blocks/Header/newcore_WishlistIcon.js b/src/themes/catalog/components/core/blocks/Header/newcore_WishlistIcon.js
deleted file mode 100644
index 32fb68b2ed..0000000000
--- a/src/themes/catalog/components/core/blocks/Header/newcore_WishlistIcon.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// new core proposal
-export default {
-  methods: {
-    openWishlist () {
-      this.$store.commit('ui/setWishlist', true)
-      this.$store.commit('ui/setOverlay', true)
-    }
-  }
-}
diff --git a/src/themes/catalog/components/core/blocks/Product/ProductAttribute.vue b/src/themes/catalog/components/core/blocks/Product/ProductAttribute.vue
deleted file mode 100644
index 7d765189a9..0000000000
--- a/src/themes/catalog/components/core/blocks/Product/ProductAttribute.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <strong v-html="label + ': '"/>
-    <span v-html="value"/>
-  </div>
-</template>
-
-<script>
-import ProductAttribute from 'core/components/ProductAttribute'
-
-export default {
-  mixins: [ProductAttribute]
-}
-</script>
diff --git a/src/themes/catalog/components/core/blocks/Product/SimilarProducts.vue b/src/themes/catalog/components/core/blocks/Product/SimilarProducts.vue
deleted file mode 100644
index e4bccada69..0000000000
--- a/src/themes/catalog/components/core/blocks/Product/SimilarProducts.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="similar row" >
-    <router-link :class="classes" v-for="product in related.by_category" :key="product.id" :to="`/p/${product.sku}/${product.slug}/${product.sku}`">
-      <product-tile :product="product"/>
-    </router-link>
-  </div>
-</template>
-
-<script>
-import builder from 'bodybuilder'
-import ProductTile from 'theme/components/core/ProductTile'
-
-export default {
-  props: {
-    number: {
-      type: Number,
-      required: true
-    },
-    classes: {
-      type: String,
-      default: ''
-    }
-  },
-  beforeMount () {
-    let store = this.$store
-    let inst = this
-    let byCategoryQuery = builder().query('terms', 'category.category_id', this.product.category.map((cat) => { return cat.category_id })).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */).build()
-
-    this.$store.dispatch('product/list', {
-      query: byCategoryQuery,
-      size: this.number,
-      sort: 'created_at:desc'
-    }).then(function (res) {
-      if (res) {
-        store.dispatch('product/related', { key: 'by_category', items: res.items })
-        inst.$forceUpdate()
-      }
-    })
-  },
-  components: {
-    ProductTile
-  },
-  computed: {
-    product () {
-      return this.$store.state.product.current
-    },
-    related () {
-      return this.$store.state.product.related
-    }
-  }
-}
-</script>
diff --git a/src/themes/catalog/components/core/blocks/Wishlist/Product.vue b/src/themes/catalog/components/core/blocks/Wishlist/Product.vue
deleted file mode 100644
index 09896a7d47..0000000000
--- a/src/themes/catalog/components/core/blocks/Wishlist/Product.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="row py30 b-bottom">
-    <div class="image flex col-xs-5 col-md-2 middle-xs">
-      <img v-lazy="thumbnail" >
-    </div>
-    <div class="col-md-10 col-xs-7 pl40 pb15 pt15 middle-xs">
-      <div class="fs-medium row extrabold">
-        {{ product.name | htmlDecode }}
-      </div>
-      <div class="row mt10 fs-medium">
-        <span class="price-special" v-if="product.special_price">
-          {{ product.priceInclTax | price }}
-        </span>
-        <span class="price-original" v-if="product.special_price">
-          {{ product.originalPriceInclTax | price }}
-        </span>
-        <span v-if="!product.special_price">
-          {{ product.priceInclTax | price }}
-        </span>
-      </div>
-      <div class="row mt30">
-        <div
-          class="py10 px20 bg-secondary c-on-secondary inline-flex pointer bg-secondary-hover"
-          @click="removeItem"
-        >
-          Remove Item
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Product from 'core/components/blocks/Wishlist/Product'
-
-export default {
-  mixins: [Product],
-  data () {
-    return {
-      qty: 1
-    }
-  },
-  methods: {
-    removeItem () {
-      this.$store.dispatch('wishlist/removeItem', this.product)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-.image img {
-  max-width: 100%;
-}
-
-</style>
diff --git a/src/themes/catalog/components/core/blocks/Wishlist/Wishlist.vue b/src/themes/catalog/components/core/blocks/Wishlist/Wishlist.vue
deleted file mode 100644
index 5d90868410..0000000000
--- a/src/themes/catalog/components/core/blocks/Wishlist/Wishlist.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="wishlist pl50 bg-primary" :class="{ active: isOpen }">
-    <div class="row">
-      <div class="col-md-12 end-xs">
-        <i class="material-icons p15 pointer" @click="closeWishlist">close</i>
-      </div>
-    </div>
-    <div class="row pr50-md pl20 pr20 pl0-md" v-if="!items.length">
-      <div class="col-md-12">
-        <h4>Your wishlist is empty.</h4>
-        <div>
-          Don't hesitate and
-          <router-link to="/">browse our catalog</router-link>
-          to find something beatufiul for you!
-        </div>
-      </div>
-    </div>
-    <div class="row pr50-md pl20 pr20 pl0-md">
-      <div class="col-md-12">
-        <h1 v-if="items.length">Wishlist</h1>
-        <div class="products">
-          <product v-for="product in items" :key="product.id" :product="product" />
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'vuex'
-
-import Product from './Product'
-
-export default {
-  name: 'Wishlist',
-  created () {
-    this.$store.dispatch('wishlist/load') // Load wishlist from the indexedDb
-  },
-  methods: {
-    closeWishlist () {
-      this.$store.commit('ui/setOverlay', false)
-      this.$store.commit('ui/setWishlist', false)
-    },
-    ...mapActions({ 'removeFromWishlist': 'wishlist/removeItem' })
-  },
-  computed: {
-    ...mapState('wishlist', [
-      'items'
-    ]),
-    ...mapState({
-      isOpen: state => state.ui.wishlist
-    })
-  },
-  components: {
-    Product
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/transitions';
-  .wishlist {
-    height: 100vh;
-    width: 700px;
-    top: 0;
-    right: 0;
-    max-width: 100%;
-    position: fixed;
-    z-index: 3;
-    transform: translateX(100%);
-    transition: transform 300ms $motion-main;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    &.active {
-      transform: translateX(0)
-    }
-  }
-</style>
diff --git a/src/themes/catalog/components/theme/MagazineTile.vue b/src/themes/catalog/components/theme/MagazineTile.vue
deleted file mode 100644
index 447020a901..0000000000
--- a/src/themes/catalog/components/theme/MagazineTile.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <section class="magazine-tile center-xs flex c-on-dark pt50% pl20% pr20%" >
-    <img :src="bgUrl" alt="">
-    <div class="category"> {{ category }} </div>
-    <h1 class="c-on-dark regular fs-large"> {{ title }} </h1>
-  </section>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    category: {
-      type: String,
-      required: true
-    },
-    bgUrl: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/mixins/transitions';
-@import '~theme/css/vars/additional';
-
-.magazine-tile {
-  height: 450px;
-  flex-direction: column;
-  background-size: cover;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  &:hover img {
-    transform: scale(1.1)
-  }
-}
-div, h1 {
-  z-index: 2;
-}
-img {
-  @include transition-long;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  height: 100%;
-  z-index: 1;
-}
-@media (min-width: $md) {
-  .magazine-tile {
-      height: 520px;
-  }
-  img {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/themes/catalog/components/theme/NewsletterSubscribeForm.vue b/src/themes/catalog/components/theme/NewsletterSubscribeForm.vue
deleted file mode 100644
index 37c580bac9..0000000000
--- a/src/themes/catalog/components/theme/NewsletterSubscribeForm.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="newsletter-subscribe-form">
-    <input v-model="email" type="email" class="m0 px25 inline-flex fs-medium" autocomplete="email" :placeholder="$t('E-mail address')">
-    <button @click="subscribeNewsletter" class="m0 fs-medium inline-flex center-xs c-on-accent bg-accent bg-accent-hover pointer">{{ $t('Subscribe to magazine') }}</button>
-  </div>
-</template>
-
-<script>
-import i18n from 'core/lib/i18n'
-
-export default {
-  data () {
-    return {
-      email: null,
-      // Temporary for demo purposes, normally we should use Vuex
-      subscribed: false
-    }
-  },
-  methods: {
-    subscribeNewsletter () {
-      const notification = {
-        subscribed: {
-          type: 'success',
-          message: i18n.t('Newsletter successfully subscribed. Thank you!'),
-          action1: { label: i18n.t('OK'), action: 'close' }
-        },
-        alreadySubscribed: {
-          type: 'error',
-          message: i18n.t('You have already subscribed our newsletter'),
-          action1: { label: i18n.t('OK'), action: 'close' }
-        },
-        wrongEmail: {
-          type: 'error',
-          message: i18n.t('Email field is empty'),
-          action1: { label: i18n.t('OK'), action: 'close' }
-        }
-      }
-
-      if (this.email && !this.subscribed) {
-        this.subscribed = true
-        this.$bus.$emit('newsletter-after-subscribe', { email: this.email })
-        this.$bus.$emit('notification', notification.subscribed)
-      } else if (this.subscribed) {
-        this.$bus.$emit('notification', notification.alreadySubscribed)
-      } else if (!this.email) {
-        this.$bus.$emit('notification', notification.wrongEmail)
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import '~theme/css/vars/additional';
-
-.newsletter-subscribe-form {
-    input, button {
-        height: 60px;
-        box-sizing: border-box;
-        border: none;
-    }
-    input {
-        width: 65%;
-    }
-    button {
-        width: 35%;
-        outline: none;
-    }
-    @media (max-width: $md) {
-      input, button {
-        width: 80%;
-      }
-    }
-
-}
-</style>
diff --git a/src/themes/catalog/components/theme/Search.vue b/src/themes/catalog/components/theme/Search.vue
deleted file mode 100644
index 2a98114312..0000000000
--- a/src/themes/catalog/components/theme/Search.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <section class="search c-on-dark middle-xs p0 pt40-md pt100-md">
-    <div class="row center-xs pb20  hide flex-md">
-      <div class="col-md-6">
-        <h1 class="c-on-dark extrabold">{{ $t('Find the right sporting clothes for all situations') }}</h1>
-      </div>
-    </div>
-    <div class="row center-xs">
-      <div class="search-box col-md-8 col-xs-12">
-        <input ref="search" v-model="search" @input="makeSearch" type="text" class="m0 px25 inline-flex fs-medium" :placeholder="$t('What are you looking for?')">
-      </div>
-    </div>
-    <div class="top-searches row center-xs py70-md py30 fs-medium hide show-md">
-      <span class="extrabold px15 inline-flex-md flex">Top searches</span>
-      <span class="px15 c-on-dark pointer" @click="search = 'Shoes'; makeSearch()">Shoes</span>
-      <span class="px15 c-on-dark pointer" @click="search = 'Bags'; makeSearch()">Bags</span>
-      <span class="px15 c-on-dark pointer" @click="search = 'Longsleeves'; makeSearch()">Longsleeves</span>
-      <span class="px15 c-on-dark pointer" @click="search = 'Jackets'; makeSearch()">Jackets</span>
-    </div>
-    <div class="row" v-if="search">
-      <div v-for="(product, index) in products" :key="index" class="col-md-4 mb15-md px0 px8-md">
-        <router-link :to="`/p/${product.sku}/${product.slug}/${product.sku}`">
-          <product-tile :product="product" class="b bg-primary" :mobile-horizontal-mode="true"/>
-        </router-link>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import SearchPanel from 'core/components/blocks/SearchPanel/SearchPanel'
-import ProductTile from 'theme/components/core/ProductTile'
-
-export default {
-  components: {
-    ProductTile
-  },
-  mixins: [SearchPanel],
-  data () {
-    return {
-      search: null,
-      emptyResults: false
-    }
-  },
-  mounted () {
-    this.focusSearchBox()
-    this.$bus.$on('focusSearch', () => {
-      this.focusSearchBox()
-    })
-  },
-  methods: {
-    focusSearchBox () {
-      this.$refs.search.focus()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/additional';
-
-.search-box {
-    input, button {
-        height: 60px;
-        box-sizing: border-box;
-        border: none;
-    }
-    input {
-        width: 100%;
-    }
-    button {
-        width: 25%;
-        outline: none;
-    }
-}
-
-.top-searches a:hover {
-    text-decoration: underline;
-}
-</style>
diff --git a/src/themes/catalog/components/theme/blocks/Footer/Box.vue b/src/themes/catalog/components/theme/blocks/Footer/Box.vue
deleted file mode 100644
index b4942e9cf8..0000000000
--- a/src/themes/catalog/components/theme/blocks/Footer/Box.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="box row middle-xs my20 my0-md">
-    <div class="col-xs-12 col-md-4 center-xs">
-      <div class="inline-flex icon-with-bg p20">
-        <div class="material-icons">{{ icon }}</div>
-      </div>
-    </div>
-    <div class="col-xs-12 col-md-8 mt10 mt0-md">
-      <h4 class="flex center-xs start-md semibold uppercase c-secondary-lighter my0-md">{{ title }}</h4>
-      <span class="flex center-xs start-md fs-large semibold c-primary">{{ content }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, required: true },
-    content: { type: String, required: true },
-    icon: { type: String, required: true }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/colors';
-@import '~theme/css/mixins/transitions';
-
-.box {
-    .icon-with-bg, span {
-        @include transition;
-    }
-}
-.box:hover {
-    .icon-with-bg {
-        background: $c-accent;
-    }
-    span {
-        color: $c-accent;
-    }
-}
-</style>
diff --git a/src/themes/catalog/css/_background.scss b/src/themes/catalog/css/_background.scss
deleted file mode 100644
index b84d28a5f6..0000000000
--- a/src/themes/catalog/css/_background.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// Global
-
-body {
-    background: $c-bg-primary;
-}
-
-// Colors 
-.bg-transparent {
-    background: transparent;
-}
-.bg-primary {
-    background: $c-bg-primary;
-}
-.bg-secondary {
-    background: $c-bg-secondary;
-    &-hover:hover {
-        @include hover-bg-darken($c-bg-secondary);
-    }
-}
-.bg-accent {
-    background: $c-accent;
-    &-hover:hover {
-        @include hover-bg-darken($c-accent);
-    }
-}
-
-@media (min-width: $md) {
-    .bg-transparent-md {
-        background: transparent;
-    }
-    .bg-primary-md {
-        background: $c-bg-primary;
-    }
-    .bg-secondary-md {
-        background: $c-bg-secondary;
-        &-hover:hover {
-            @include hover-bg-darken($c-bg-secondary);
-        }
-    }
-    .bg-accent-md {
-        background: $c-accent;
-        &-hover:hover {
-            @include hover-bg-darken($c-accent);
-        }
-    }
-}
-
-// Btn colors
-
-.bg-btn-negaive {
-    background: $c-bg-btn-negative;
-}
-
-.bg-btn-positive {
-    background: $c-bg-btn-positive;
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_border.scss b/src/themes/catalog/css/_border.scss
deleted file mode 100644
index 707ad98957..0000000000
--- a/src/themes/catalog/css/_border.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-
-//todo: loop :)
-.b {
-    border: $border-width $border-style $c-border;
-}
-
-.b-top {
-    border-top-color: $c-border;    
-    border-top-width: $border-width;
-    border-top-style: $border-style;
-}
-
-.b-bottom {
-    border-bottom-color: $c-border;    
-    border-bottom-width: $border-width;
-    border-bottom-style: $border-style;
-}
-
-.b-right {
-    border-right-color: $c-border;    
-    border-right-width: $border-width;
-    border-right-style: $border-style;
-}
-
-.b-left {
-    border-left-color: $c-border;    
-    border-left-width: $border-width;
-    border-left-style: $border-style;
-}
-
-
-
-.b-none {
-    border: none;
-}
-.b-bottom-none {
-    border-bottom: none;
-}
-
-.b-right-none {
-    border-right: none;
-}
-
-.b-left-none {
-    border-left: none;
-}
-
-.b-circle {
-    border-radius: 50%;
-}
-
-@media (min-width: $md) {
-
-    .b-bottom-md {
-        border-bottom-color: $c-border;    
-        border-bottom-width: $border-width;
-        border-bottom-style: $border-style;
-    }
-    
-    .b-right-md {
-        border-right-color: $c-border;    
-        border-right-width: $border-width;
-        border-right-style: $border-style;
-    }
-    
-    .b-left-md {
-        border-left-color: $c-border;    
-        border-left-width: $border-width;
-        border-left-style: $border-style;
-    }
-    
-    .b-md {
-        border: $border-width $border-style $c-border;
-    }
-    
-    .b-none-md {
-        border: none;
-    }
-
-    .b-top-none-md {
-        border-top: none;
-    }
-
-    .b-bottom-none-md {
-        border-bottom: none;
-    }
-    
-    .b-right-none-md {
-        border-right: none;
-    }
-    
-    .b-left-none-md {
-        border-left: none;
-    }
-    
-    .b-circle-md {
-        border-radius: 50%;
-    }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_icon.scss b/src/themes/catalog/css/_icon.scss
deleted file mode 100644
index 456c641962..0000000000
--- a/src/themes/catalog/css/_icon.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.icon-with-bg {
-    color: $c-icon-with-background;
-    background: $c-bg-icon-with-background;
-    border-radius: $icon-with-background-radius;
-}
-
-.c-icon {
-    color: $c-icon;
-}
-
-.c-icon-hover:hover {
-    color: $c-icon-hover;
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_layout.scss b/src/themes/catalog/css/_layout.scss
deleted file mode 100644
index 47b2cf2783..0000000000
--- a/src/themes/catalog/css/_layout.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-// Global
-body {
-    padding: 0;
-    margin: 0;
-}
-
-// Display
-
-.inline-flex {
-    display: inline-flex;
-}
-
-.flex {
-    display: flex;
-}
-
-// Size
-
-.full-width {
-    width: 100%;
-}
-// Show/hide 
-.hide {
-    display: none;
-}
-
-
-
-
-@media ( min-width: $md ) {
-    
-    .flex-md {
-        display: flex;
-    }
-    .inline-flex-md {
-        display: inline-flex;
-    }
-    .show-md {
-        display: block;
-    }
-    .hide-md {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_margin.scss b/src/themes/catalog/css/_margin.scss
deleted file mode 100644
index 819b65f363..0000000000
--- a/src/themes/catalog/css/_margin.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-$sizes: 0 5 8 10 15 20 25 30 35 40 45 50 70 80;
-
-@each $m in $sizes {
-    .m#{$m} {
-      margin: #{$m}px;
-    }
-    .mt#{$m} {
-        margin-top: #{$m}px;
-    }
-    .mb#{$m} {
-        margin-bottom: #{$m}px;
-    }
-    .ml#{$m} {
-        margin-left: #{$m}px;
-    }
-    .mr#{$m} {
-        margin-right: #{$m}px;
-    }
-    .mx#{$m} {
-        margin-left: #{$m}px;
-        margin-right: #{$m}px;        
-    }
-    .my#{$m} {
-        margin-top: #{$m}px;
-        margin-bottom: #{$m}px;        
-    }
-}
-
-// Responsive for specific breakpoints
-
-@media (min-width: $md) {
-    @each $m in $sizes {
-        .m#{$m}-md {
-          margin: #{$m}px;
-        }
-        .mt#{$m}-md {
-            margin-top: #{$m}px;
-        }
-        .mb#{$m}-md {
-            margin-bottom: #{$m}px;
-        }
-        .ml#{$m}-md {
-            margin-left: #{$m}px;
-        }
-        .mr#{$m}-md {
-            margin-right: #{$m}px;
-        }
-        .mx#{$m}-md {
-            margin-left: #{$m}px;
-            margin-right: #{$m}px;        
-        }
-        .my#{$m}-md {
-            margin-top: #{$m}px;
-            margin-bottom: #{$m}px;        
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_other.scss b/src/themes/catalog/css/_other.scss
deleted file mode 100644
index b2edd5ea8c..0000000000
--- a/src/themes/catalog/css/_other.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.pointer {
-  cursor: pointer
-}
-
-.no-scroll {
-  overflow: hidden;
-}
diff --git a/src/themes/catalog/css/_padding.scss b/src/themes/catalog/css/_padding.scss
deleted file mode 100644
index 895173bcff..0000000000
--- a/src/themes/catalog/css/_padding.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-$sizes: 0 5 8 10 15 20 25 30 35 40 45 50 60 70 100;
-$sizespercent: 20 50;
-
-//8 is basic flexbox grid padding, keep it in mind when using paddings in RWD
-
-@each $p in $sizes {
-    .p#{$p} {
-      padding: #{$p}px;
-    }
-    .pt#{$p} {
-        padding-top: #{$p}px;
-    }
-    .pb#{$p} {
-        padding-bottom: #{$p}px;
-    }
-    .pl#{$p} {
-        padding-left: #{$p}px;
-    }
-    .pr#{$p} {
-        padding-right: #{$p}px;
-    }
-    .px#{$p} {
-        padding-left: #{$p}px;
-        padding-right: #{$p}px;        
-    }
-    .py#{$p} {
-        padding-top: #{$p}px;
-        padding-bottom: #{$p}px;        
-    }
-}
-
-@each $p in $sizespercent {
-    .p#{$p}\% {
-      padding: percentage($p/100);
-    }
-    .pt#{$p}\% {
-        padding-top: percentage($p/100);
-    }
-    .pb#{$p}\% {
-        padding-bottom: percentage($p/100);
-    }
-    .pl#{$p}\% {
-        padding-left: percentage($p/100);
-    }
-    .pr#{$p}\% {
-        padding-right: percentage($p/100);
-    }
-    .px#{$p}\% {
-        padding-left: percentage($p/100);
-        padding-right: percentage($p/100);        
-    }
-    .py#{$p}\% {
-        padding-top: percentage($p/100);
-        padding-bottom: percentage($p/100);       
-    }
-}
-
-// Responsive for specific breakpoints
-
-@media (min-width: $md) {
-    @each $p in $sizes {
-        .p#{$p}-md {
-        padding: #{$p}px;
-        }
-        .pt#{$p}-md {
-            padding-top: #{$p}px;
-        }
-        .pb#{$p}-md {
-            padding-bottom: #{$p}px;
-        }
-        .pl#{$p}-md {
-            padding-left: #{$p}px;
-        }
-        .pr#{$p}-md {
-            padding-right: #{$p}px;
-        }
-        .px#{$p}-md {
-            padding-left: #{$p}px;
-            padding-right: #{$p}px;        
-        }
-        .py#{$p}-md {
-            padding-top: #{$p}px;
-            padding-bottom: #{$p}px;        
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_text.scss b/src/themes/catalog/css/_text.scss
deleted file mode 100644
index e16c36c593..0000000000
--- a/src/themes/catalog/css/_text.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-// Globals
-
-body {
-    font-family: $font-family;
-    color: $c-text-primary;    
-    font-size: $font-size;
-    font-weight: $font-weight;
-}
-
-a {
-    text-decoration: $link-text-decoration;
-}
-h1 {
-    font-size: $font-size-h1;
-    color: $c-text-heading;
-    font-weight: $font-weight-h1;    
-}
-h2 {
-    font-size: $font-size-h2;
-    color: $c-text-heading;
-    font-weight: $font-weight-h2;
-}
-
-// Colors
-
-
-.c-primary {
-    color: $c-text-primary;
-}
-.c-secondary {
-    color: $c-text-secondary;    
-}
-.c-secondary-lighter {
-    color: $c-text-secondary-lighter;        
-}
-.c-accent {
-    color: $c-accent;
-}
-.c-on-accent {
-    color: $c-text-on-accent;
-}
-.c-on-secondary {
-    color: $c-text-on-bg-secondary;
-}
-.c-on-dark {
-    color: $c-text-on-dark;
-}
-.c-on-light {
-    color: $c-text-on-light;
-}
-
-// Weights
-
-.regular {
-    font-weight: 300;
-}
-.semibold {
-    font-weight: 600;
-}
-.bold {
-    font-weight: 600;
-}
-.extrabold {
-    font-weight: 800;
-}
-.uppercase {
-    text-transform: uppercase;
-}
-
-// Sizes
-
-.fs-medium-small {
-    font-size: $font-size-medium-small;
-}
-.fs-medium {
-    font-size: $font-size-medium;
-}
-.fs-large {
-    font-size: $font-size-large;
-}
-.fs-big {
-    font-size: $font-size-big;
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/_transitions.scss b/src/themes/catalog/css/_transitions.scss
deleted file mode 100644
index 02f06892f8..0000000000
--- a/src/themes/catalog/css/_transitions.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import 'vars/additional';
-$motion-main: cubic-bezier(0.54, 0.02, 0.35, 0.88);
-
-
-// hover transition class
-
-.hover-transition {
-  transition: $transition-time all;
-}
-
-// vue transitions
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity $transition-time;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0
-}
-
-.fade-in {
-  &-down-enter-active,
-  &-down-leave-active,
-  &-up-enter-active,
-  &-up-leave-active {
-    transition: all $transition-time $motion-main;
-  }
-
-  &-down-enter,
-  &-down-leave-to,
-  &-up-enter,
-  &-up-leave-to {
-    opacity: 0;
-  }
-
-  &-down-enter,
-  &-down-leave-to {
-    transform: translateY(-100%);
-  }
-  &-up-enter,
-  &-up-leave-to {
-    transform: translateY(100%);
-  }
-}
diff --git a/src/themes/catalog/css/base/_icons.scss b/src/themes/catalog/css/base/_icons.scss
deleted file mode 100644
index 4c045add04..0000000000
--- a/src/themes/catalog/css/base/_icons.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Material Icons'),
-      local('MaterialIcons-Regular'),
-      url('../assets/fonts/MaterialIcons-Regular.woff2') format('woff2'),
-      url('../assets/fonts/MaterialIcons-Regular.woff') format('woff');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/main.scss b/src/themes/catalog/css/main.scss
deleted file mode 100644
index 3722dd0315..0000000000
--- a/src/themes/catalog/css/main.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import 'vars/colors';
-@import 'vars/text';
-@import 'vars/additional';
-
-@import 'mixins/transitions';
-@import 'mixins/hovers';
-
-@import 'base/icons';
-
-@import 'vendor/flexboxgrid2';
-
-@import 'text';
-@import 'background';
-@import 'border';
-@import 'padding';
-@import 'margin';
-@import 'layout';
-@import 'icon';
-@import 'other';
-
-@import 'transitions'
\ No newline at end of file
diff --git a/src/themes/catalog/css/mixins/_hovers.scss b/src/themes/catalog/css/mixins/_hovers.scss
deleted file mode 100644
index 024e9c3671..0000000000
--- a/src/themes/catalog/css/mixins/_hovers.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin hover-bg-darken ($color) {
-    transition: $transition-time-hover background;
-    &:hover {
-        background-color: darken($color, 10%);
-        transition: $transition-time-hover background;
-    }
-}
-
-@mixin hover-bg ($color) {
-    transition: $transition-time-hover background;
-    &:hover {
-        background-color: $color;
-        transition: $transition-time-hover background;
-    }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/css/mixins/_transitions.scss b/src/themes/catalog/css/mixins/_transitions.scss
deleted file mode 100644
index b5267fdcf3..0000000000
--- a/src/themes/catalog/css/mixins/_transitions.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../vars/additional';
-
-@mixin transition {
-    transition: $transition-time all;
-    &:hover {
-        transition: $transition-time all;        
-    }
-}
-
-@mixin transition-long {
-    transition: $transition-time-long all;
-    &:hover {
-        transition: $transition-time-long all;        
-    }
-}
-
-@mixin transition-icon {
-    transition: $transition-time all;
-    &:hover {
-        transition: $transition-time all;        
-    }
-}
-
-
diff --git a/src/themes/catalog/css/vars/_additional.scss b/src/themes/catalog/css/vars/_additional.scss
deleted file mode 100644
index 39ba12868b..0000000000
--- a/src/themes/catalog/css/vars/_additional.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//Border
-$border-style: solid;
-$border-width: 1px;
-
-
-//transitions time
-$transition-time: 0.3s;
-$transition-time-long: 0.5s;
-$transition-time-hover: 0.3s;
-
-
-//icon with background radius
-$icon-with-background-radius: 50%;
-
-//breakpoints 
-$md: 75em;
\ No newline at end of file
diff --git a/src/themes/catalog/css/vars/_colors.scss b/src/themes/catalog/css/vars/_colors.scss
deleted file mode 100644
index 1b6a1af7dd..0000000000
--- a/src/themes/catalog/css/vars/_colors.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Layout accent
-$c-accent: #1A4D96;
-
-// Text
-$c-text-primary: #4F4F4F;
-$c-text-secondary: #828282;
-$c-text-secondary-lighter: #BDBDBD;
-
-$c-text-on-dark: white;
-$c-text-on-light: black;
-$c-text-on-accent: white;
-$c-text-on-bg-secondary: #4F4F4F;
-$c-text-heading: #4F4F4F;
-
-$c-text-header-link: black;
-
-$c-text-positive: #00CC00;
-$c-text-negative: #FF4040;
-
-// Icons
-$c-icon: #E0E0E0;
-$c-icon-hover: #4F4F4F;
-$c-icon-with-background: #ffffff;
-$c-bg-icon-with-background: #BDBDBD;
-$c-header-background-hover: #F2F2F2;
-
-// Borders
-$c-border: #F2F2F2;
-
-// Backgrounds
-$c-bg-primary: #FFFFFF;
-$c-bg-secondary: #F2F2F2;
-
-// Buttons
-$c-bg-btn-negative: #FF4040;
-$c-bg-btn-positive: #00CC00;
\ No newline at end of file
diff --git a/src/themes/catalog/css/vars/_text.scss b/src/themes/catalog/css/vars/_text.scss
deleted file mode 100644
index 3586b0446f..0000000000
--- a/src/themes/catalog/css/vars/_text.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$font-family: 'Montserrat', sans-serif;
-$font-weight: 500;
-
-$font-size: 12px;
-
-$font-size-medium-small: 14px;
-$font-size-medium: 18px;
-$font-size-large: 24px;
-$font-size-big: 36px;
-
-$font-size-h1: 36px;
-$font-size-h2: 24px;
-
-$font-weight-h1: 800;
-$font-weight-h2: 800;
-
-$link-text-decoration: none;
\ No newline at end of file
diff --git a/src/themes/catalog/css/vendor/_flexboxgrid2.scss b/src/themes/catalog/css/vendor/_flexboxgrid2.scss
deleted file mode 100644
index 567c7dc1f6..0000000000
--- a/src/themes/catalog/css/vendor/_flexboxgrid2.scss
+++ /dev/null
@@ -1,1209 +0,0 @@
-.container {
-  box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
-  padding-right: 8px;
-  padding-left: 8px;
-}
-
-.container-fluid {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-@media only screen and (min-width: 576px) {
-  .container {
-    width: 560px;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .container {
-    width: 752px;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  .container {
-    width: 976px;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width: 1200px) {
-  .container {
-    width: 1184px;
-    max-width: 100%;
-  }
-}
-
-.row {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -8px;
-  margin-left: -8px;
-}
-
-.row.reverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.col.reverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-[class^="col-"] {
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  padding-right: 8px;
-  padding-left: 8px;
-  max-width: 100%;
-}
-
-.col-xs {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  max-width: 100%;
-}
-
-.col-xs-1 {
-  -ms-flex-preferred-size: 8.33333333%;
-  flex-basis: 8.33333333%;
-  max-width: 8.33333333%;
-}
-
-.col-xs-2 {
-  -ms-flex-preferred-size: 16.66666667%;
-  flex-basis: 16.66666667%;
-  max-width: 16.66666667%;
-}
-
-.col-xs-3 {
-  -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-
-.col-xs-4 {
-  -ms-flex-preferred-size: 33.33333333%;
-  flex-basis: 33.33333333%;
-  max-width: 33.33333333%;
-}
-
-.col-xs-5 {
-  -ms-flex-preferred-size: 41.66666667%;
-  flex-basis: 41.66666667%;
-  max-width: 41.66666667%;
-}
-
-.col-xs-6 {
-  -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-
-.col-xs-7 {
-  -ms-flex-preferred-size: 58.33333333%;
-  flex-basis: 58.33333333%;
-  max-width: 58.33333333%;
-}
-
-.col-xs-8 {
-  -ms-flex-preferred-size: 66.66666667%;
-  flex-basis: 66.66666667%;
-  max-width: 66.66666667%;
-}
-
-.col-xs-9 {
-  -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-
-.col-xs-10 {
-  -ms-flex-preferred-size: 83.33333333%;
-  flex-basis: 83.33333333%;
-  max-width: 83.33333333%;
-}
-
-.col-xs-11 {
-  -ms-flex-preferred-size: 91.66666667%;
-  flex-basis: 91.66666667%;
-  max-width: 91.66666667%;
-}
-
-.col-xs-12 {
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-
-.col-xs-offset-0 {
-  margin-left: 0;
-}
-
-.col-xs-offset-1 {
-  margin-left: 8.33333333%;
-}
-
-.col-xs-offset-2 {
-  margin-left: 16.66666667%;
-}
-
-.col-xs-offset-3 {
-  margin-left: 25%;
-}
-
-.col-xs-offset-4 {
-  margin-left: 33.33333333%;
-}
-
-.col-xs-offset-5 {
-  margin-left: 41.66666667%;
-}
-
-.col-xs-offset-6 {
-  margin-left: 50%;
-}
-
-.col-xs-offset-7 {
-  margin-left: 58.33333333%;
-}
-
-.col-xs-offset-8 {
-  margin-left: 66.66666667%;
-}
-
-.col-xs-offset-9 {
-  margin-left: 75%;
-}
-
-.col-xs-offset-10 {
-  margin-left: 83.33333333%;
-}
-
-.col-xs-offset-11 {
-  margin-left: 91.66666667%;
-}
-
-.start-xs {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  text-align: start;
-}
-
-.center-xs {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.end-xs {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  text-align: end;
-}
-
-.top-xs {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-
-.middle-xs {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.bottom-xs {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-
-.around-xs {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.between-xs {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.first-xs {
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
-  order: -1;
-}
-
-.last-xs {
-  -webkit-box-ordinal-group: 2;
-  -ms-flex-order: 1;
-  order: 1;
-}
-
-.initial-order-xs {
-  -webkit-box-ordinal-group: NaN;
-  -ms-flex-order: initial;
-  order: initial;
-}
-
-@media only screen and (min-width: 576px) {
-  .col-sm {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%;
-  }
-
-  .col-sm-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%;
-  }
-
-  .col-sm-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%;
-  }
-
-  .col-sm-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-
-  .col-sm-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%;
-  }
-
-  .col-sm-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%;
-  }
-
-  .col-sm-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-
-  .col-sm-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%;
-  }
-
-  .col-sm-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%;
-  }
-
-  .col-sm-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-
-  .col-sm-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%;
-  }
-
-  .col-sm-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%;
-  }
-
-  .col-sm-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  .col-sm-offset-0 {
-    margin-left: 0;
-  }
-
-  .col-sm-offset-1 {
-    margin-left: 8.33333333%;
-  }
-
-  .col-sm-offset-2 {
-    margin-left: 16.66666667%;
-  }
-
-  .col-sm-offset-3 {
-    margin-left: 25%;
-  }
-
-  .col-sm-offset-4 {
-    margin-left: 33.33333333%;
-  }
-
-  .col-sm-offset-5 {
-    margin-left: 41.66666667%;
-  }
-
-  .col-sm-offset-6 {
-    margin-left: 50%;
-  }
-
-  .col-sm-offset-7 {
-    margin-left: 58.33333333%;
-  }
-
-  .col-sm-offset-8 {
-    margin-left: 66.66666667%;
-  }
-
-  .col-sm-offset-9 {
-    margin-left: 75%;
-  }
-
-  .col-sm-offset-10 {
-    margin-left: 83.33333333%;
-  }
-
-  .col-sm-offset-11 {
-    margin-left: 91.66666667%;
-  }
-
-  .start-sm {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  .center-sm {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .end-sm {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end;
-  }
-
-  .top-sm {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-  }
-
-  .middle-sm {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  .bottom-sm {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
-  }
-
-  .around-sm {
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-  }
-
-  .between-sm {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-
-  .first-sm {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .last-sm {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .initial-order-sm {
-    -webkit-box-ordinal-group: NaN;
-    -ms-flex-order: initial;
-    order: initial;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .col-md,
-  .col-md-1,
-  .col-md-2,
-  .col-md-3,
-  .col-md-4,
-  .col-md-5,
-  .col-md-6,
-  .col-md-7,
-  .col-md-8,
-  .col-md-9,
-  .col-md-10,
-  .col-md-11,
-  .col-md-12,
-  .col-md-offset-0,
-  .col-md-offset-1,
-  .col-md-offset-2,
-  .col-md-offset-3,
-  .col-md-offset-4,
-  .col-md-offset-5,
-  .col-md-offset-6,
-  .col-md-offset-7,
-  .col-md-offset-8,
-  .col-md-offset-9,
-  .col-md-offset-10,
-  .col-md-offset-11,
-  .col-md-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 8px;
-    padding-left: 8px;
-  }
-
-  .col-md {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%;
-  }
-
-  .col-md-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%;
-  }
-
-  .col-md-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%;
-  }
-
-  .col-md-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-
-  .col-md-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%;
-  }
-
-  .col-md-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%;
-  }
-
-  .col-md-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-
-  .col-md-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%;
-  }
-
-  .col-md-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%;
-  }
-
-  .col-md-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-
-  .col-md-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%;
-  }
-
-  .col-md-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%;
-  }
-
-  .col-md-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  .col-md-offset-0 {
-    margin-left: 0;
-  }
-
-  .col-md-offset-1 {
-    margin-left: 8.33333333%;
-  }
-
-  .col-md-offset-2 {
-    margin-left: 16.66666667%;
-  }
-
-  .col-md-offset-3 {
-    margin-left: 25%;
-  }
-
-  .col-md-offset-4 {
-    margin-left: 33.33333333%;
-  }
-
-  .col-md-offset-5 {
-    margin-left: 41.66666667%;
-  }
-
-  .col-md-offset-6 {
-    margin-left: 50%;
-  }
-
-  .col-md-offset-7 {
-    margin-left: 58.33333333%;
-  }
-
-  .col-md-offset-8 {
-    margin-left: 66.66666667%;
-  }
-
-  .col-md-offset-9 {
-    margin-left: 75%;
-  }
-
-  .col-md-offset-10 {
-    margin-left: 83.33333333%;
-  }
-
-  .col-md-offset-11 {
-    margin-left: 91.66666667%;
-  }
-
-  .start-md {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  .center-md {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .end-md {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end;
-  }
-
-  .top-md {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-  }
-
-  .middle-md {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  .bottom-md {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
-  }
-
-  .around-md {
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-  }
-
-  .between-md {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-
-  .first-md {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .last-md {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .initial-order-md {
-    -webkit-box-ordinal-group: NaN;
-    -ms-flex-order: initial;
-    order: initial;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  .col-lg,
-  .col-lg-1,
-  .col-lg-2,
-  .col-lg-3,
-  .col-lg-4,
-  .col-lg-5,
-  .col-lg-6,
-  .col-lg-7,
-  .col-lg-8,
-  .col-lg-9,
-  .col-lg-10,
-  .col-lg-11,
-  .col-lg-12,
-  .col-lg-offset-0,
-  .col-lg-offset-1,
-  .col-lg-offset-2,
-  .col-lg-offset-3,
-  .col-lg-offset-4,
-  .col-lg-offset-5,
-  .col-lg-offset-6,
-  .col-lg-offset-7,
-  .col-lg-offset-8,
-  .col-lg-offset-9,
-  .col-lg-offset-10,
-  .col-lg-offset-11,
-  .col-lg-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 8px;
-    padding-left: 8px;
-  }
-
-  .col-lg {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%;
-  }
-
-  .col-lg-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%;
-  }
-
-  .col-lg-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%;
-  }
-
-  .col-lg-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-
-  .col-lg-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%;
-  }
-
-  .col-lg-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%;
-  }
-
-  .col-lg-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-
-  .col-lg-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%;
-  }
-
-  .col-lg-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%;
-  }
-
-  .col-lg-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-
-  .col-lg-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%;
-  }
-
-  .col-lg-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%;
-  }
-
-  .col-lg-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  .col-lg-offset-0 {
-    margin-left: 0;
-  }
-
-  .col-lg-offset-1 {
-    margin-left: 8.33333333%;
-  }
-
-  .col-lg-offset-2 {
-    margin-left: 16.66666667%;
-  }
-
-  .col-lg-offset-3 {
-    margin-left: 25%;
-  }
-
-  .col-lg-offset-4 {
-    margin-left: 33.33333333%;
-  }
-
-  .col-lg-offset-5 {
-    margin-left: 41.66666667%;
-  }
-
-  .col-lg-offset-6 {
-    margin-left: 50%;
-  }
-
-  .col-lg-offset-7 {
-    margin-left: 58.33333333%;
-  }
-
-  .col-lg-offset-8 {
-    margin-left: 66.66666667%;
-  }
-
-  .col-lg-offset-9 {
-    margin-left: 75%;
-  }
-
-  .col-lg-offset-10 {
-    margin-left: 83.33333333%;
-  }
-
-  .col-lg-offset-11 {
-    margin-left: 91.66666667%;
-  }
-
-  .start-lg {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  .center-lg {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .end-lg {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end;
-  }
-
-  .top-lg {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-  }
-
-  .middle-lg {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  .bottom-lg {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
-  }
-
-  .around-lg {
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-  }
-
-  .between-lg {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-
-  .first-lg {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .last-lg {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .initial-order-lg {
-    -webkit-box-ordinal-group: NaN;
-    -ms-flex-order: initial;
-    order: initial;
-  }
-}
-
-@media only screen and (min-width: 1200px) {
-  .col-xl,
-  .col-xl-1,
-  .col-xl-2,
-  .col-xl-3,
-  .col-xl-4,
-  .col-xl-5,
-  .col-xl-6,
-  .col-xl-7,
-  .col-xl-8,
-  .col-xl-9,
-  .col-xl-10,
-  .col-xl-11,
-  .col-xl-12,
-  .col-xl-offset-0,
-  .col-xl-offset-1,
-  .col-xl-offset-2,
-  .col-xl-offset-3,
-  .col-xl-offset-4,
-  .col-xl-offset-5,
-  .col-xl-offset-6,
-  .col-xl-offset-7,
-  .col-xl-offset-8,
-  .col-xl-offset-9,
-  .col-xl-offset-10,
-  .col-xl-offset-11,
-  .col-xl-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 8px;
-    padding-left: 8px;
-  }
-
-  .col-xl {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%;
-  }
-
-  .col-xl-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%;
-  }
-
-  .col-xl-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%;
-  }
-
-  .col-xl-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-
-  .col-xl-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%;
-  }
-
-  .col-xl-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%;
-  }
-
-  .col-xl-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-
-  .col-xl-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%;
-  }
-
-  .col-xl-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%;
-  }
-
-  .col-xl-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-
-  .col-xl-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%;
-  }
-
-  .col-xl-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%;
-  }
-
-  .col-xl-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  .col-xl-offset-0 {
-    margin-left: 0;
-  }
-
-  .col-xl-offset-1 {
-    margin-left: 8.33333333%;
-  }
-
-  .col-xl-offset-2 {
-    margin-left: 16.66666667%;
-  }
-
-  .col-xl-offset-3 {
-    margin-left: 25%;
-  }
-
-  .col-xl-offset-4 {
-    margin-left: 33.33333333%;
-  }
-
-  .col-xl-offset-5 {
-    margin-left: 41.66666667%;
-  }
-
-  .col-xl-offset-6 {
-    margin-left: 50%;
-  }
-
-  .col-xl-offset-7 {
-    margin-left: 58.33333333%;
-  }
-
-  .col-xl-offset-8 {
-    margin-left: 66.66666667%;
-  }
-
-  .col-xl-offset-9 {
-    margin-left: 75%;
-  }
-
-  .col-xl-offset-10 {
-    margin-left: 83.33333333%;
-  }
-
-  .col-xl-offset-11 {
-    margin-left: 91.66666667%;
-  }
-
-  .start-xl {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  .center-xl {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .end-xl {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end;
-  }
-
-  .top-xl {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-  }
-
-  .middle-xl {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  .bottom-xl {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
-  }
-
-  .around-xl {
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-  }
-
-  .between-xl {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-
-  .first-xl {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .last-xl {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .initial-order-xl {
-    -webkit-box-ordinal-group: NaN;
-    -ms-flex-order: initial;
-    order: initial;
-  }
-}
-
-@media only screen and (max-width: 575px) {
-  .hidden-xs {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-  .hidden-sm {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  .hidden-md {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  .hidden-lg {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 1200px) {
-  .hidden-xl {
-    display: none;
-  }
-}
\ No newline at end of file
diff --git a/src/themes/catalog/extensions/example/index.js b/src/themes/catalog/extensions/example/index.js
deleted file mode 100644
index 1a6190504f..0000000000
--- a/src/themes/catalog/extensions/example/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const EXTENSION_KEY = 'theme_default_example'
-
-export default function (app, router, store, config) {
-  app.$on('application-after-init', () => {
-    console.log('Hello from custom theme extension')
-  })
-  return { EXTENSION_KEY, extensionRoutes: null, extensionStore: null }
-}
diff --git a/src/themes/catalog/extensions/index.js b/src/themes/catalog/extensions/index.js
deleted file mode 100644
index f14296c8bf..0000000000
--- a/src/themes/catalog/extensions/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Custom theme related extensions goes here
-//
-// if you need to have BABEL applied to extensions inside node_modules
-// (by default excluded from BABEL) please add ".js" file ext inside require
-
-export default [
-  require('theme/extensions/example/index.js')
-]
diff --git a/src/themes/catalog/filters/index.js b/src/themes/catalog/filters/index.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/themes/catalog/index.js b/src/themes/catalog/index.js
deleted file mode 100644
index aa7945b288..0000000000
--- a/src/themes/catalog/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Home from './pages/Home.vue'
-import Category from './pages/Category.vue'
-import Product from './pages/Product.vue'
-
-const routes = [
-  { path: '/', component: Home },
-  { path: '/c/:slug', component: Category },
-  { path: '/p/:parentSku/:slug/:childSku', component: Product, name: 'product' }
-]
-
-export default function (app, router, store) {
-  router.addRoutes(routes)
-}
diff --git a/src/themes/catalog/index.template.html b/src/themes/catalog/index.template.html
deleted file mode 100755
index 85645a87c1..0000000000
--- a/src/themes/catalog/index.template.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html data-vue-meta-server-rendered {{{ meta.inject().htmlAttrs.text() }}}>
-  <head><!-- index for default theme -->
-  	{{{ meta.inject().title.text() }}}
-  	{{{ meta.inject().meta.text() }}}
-		{{{ meta.inject().link.text() }}}
-	  
-		<script type="text/javascript">
-			WebFontConfig = {
-				google: { families: [ 'Montserrat:300,400,400i,500,600,700,800' ] }
-			};
-			(function() {
-				var wf = document.createElement('script');
-				wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-				'://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
-				wf.type = 'text/javascript';
-				wf.async = 'true';
-				var s = document.getElementsByTagName('script')[0];
-				s.parentNode.insertBefore(wf, s);
-			})(); 
-		</script>
-
-    <% for (var chunk of webpack.chunks) {
-        for (var file of chunk.files) {
-          if (file.match(/\.(js|css)$/)) { %>
-    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
-  </head>
-  <body>
-    <!--vue-ssr-outlet-->
-  </body>
-</html>
diff --git a/src/themes/catalog/mixins/index.js b/src/themes/catalog/mixins/index.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/themes/catalog/package.json b/src/themes/catalog/package.json
deleted file mode 100644
index 4e427dcef4..0000000000
--- a/src/themes/catalog/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "@vue-storefront/theme-catalog",
-  "version": "1.0.0-rc.3",
-  "description": "Catalog theme for Vue Storefront",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "pkarw <pkarwatka@divante.pl> and contributors",
-  "license": "MIT",
-  "dependencies": {
-    "bodybuilder": "^2.2.7",
-    "vue-carousel": "^0.6.9",
-    "vue-no-ssr": "^0.2.2",
-    "vuex": "^3.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/src/themes/catalog/pages/Category.vue b/src/themes/catalog/pages/Category.vue
deleted file mode 100644
index aa1038224d..0000000000
--- a/src/themes/catalog/pages/Category.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div id="category">
-    <div class="top-bar b-bottom">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 center-xs mt20 mb0">
-            <h1> {{ category.name }}</h1>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-12 uppercase semibold center-xs c-secondary-lighter">
-            <ul class="mb0 pl0">
-              <li class="active py15 mx15-md mx8">All items</li>
-              <li class="py15 mx15-md mx8">Bestsellers</li>
-              <li class="py15 mx15-md mx8">Sales</li>
-              <li class="py15 mx15-md mx8">New arrivals</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="container animate">
-        <div class="row my50-md">
-          <div v-for="(product, index) in products" :key="product.name" class="col-md-3" :class="{ 'pr0-md' : (index+1) % 4 != 0, 'pl0-md' : (index+1) % 4 != 1 }">
-            <router-link :to="`/p/${product.sku}/${product.slug}/${product.sku}`">
-              <product-tile :mobile-horizontal-mode="true" class="b-md b-bottom py0-md py10" :product="product" :class="{ 'b-right-none' : index % 4 != 0 }"/>
-            </router-link>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Category from 'core/pages/Category'
-import ProductTile from 'theme/components/core/ProductTile'
-
-export default {
-  components: {
-    ProductTile
-  },
-  mixins: [Category]
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/colors';
-#category {
-    overflow-x: hidden;
-}
-.top-bar ul {
-    list-style-type: none;
-    position: relative;
-    bottom: -1px;
-    li {
-        display: inline-flex;
-    }
-    li.active {
-        border-bottom: $c-accent solid 2px;
-        color: $c-text-primary;
-    }
-}
-</style>
diff --git a/src/themes/catalog/pages/Home.vue b/src/themes/catalog/pages/Home.vue
deleted file mode 100644
index fe5d7f65ae..0000000000
--- a/src/themes/catalog/pages/Home.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-  <div id="home">
-    <div class="container mb45-md ">
-
-      <search class="animate"/>
-      <div class="row mt70-md mt40 animate ">
-        <div v-for="category in categories" :key="category.name" class="col-md-4 mb15 hide show-md">
-          <router-link :to="'/c/' + category.slug">
-            <category-tile :label="category.name"/>
-          </router-link>
-        </div>
-        <nossr class="hide-md">
-          <div class="col-md-12 px0">
-            <carousel :autoplay="true" :per-page="1" :pagination-enabled="false" :loop="true" :speed="2000">
-              <slide v-for="category in categories" :key="category.name">
-                <router-link :to="'/c/' + category.slug">
-                  <category-tile class="mx8" :label="category.name"/>
-                </router-link>
-              </slide>
-            </carousel>
-          </div>
-        </nossr>
-      </div>
-
-      <div class="row bg-primary bg-transparent-md mt0-md mt40 ">
-        <h2 class="center-xs mt80-md mt50 mb50 col-xs-12">New items</h2>
-        <div v-for="(product, index) in newProducts" :key="index" class="col-md-3 hide show-md  " :class="{ pr0 : (index+1) % 4 != 0, pl0 : (index+1) % 4 != 1 }">
-          <router-link :to="`/p/${product.sku}/${product.slug}/${product.sku}`">
-            <product-tile :product="product" class="b" :class="{ 'b-right-none' : (index+1) % 4 != 0 }"/>
-          </router-link>
-        </div>
-        <nossr class="hide-md">
-          <div class="col-md-12 px0">
-            <carousel :autoplay="true" :per-page="1" :pagination-enabled="false" :loop="true">
-              <slide v-for="(product, index) in newProducts" :key="index">
-                <router-link :to="`/p/${product.sku}/${product.slug}/${product.sku}`">
-                  <product-tile class="bg-secondary" :product="product"/>
-                </router-link>
-              </slide>
-            </carousel>
-          </div>
-        </nossr>
-      </div>
-
-      <div class="row">
-        <h2 class="center-xs mt80-md mt50 mb50 animate col-xs-12">Magazine</h2>
-        <div v-for="(magazine, index) in magazines" :key="magazine.title" class="col-md-6 px0 " :class="{ 'pr0-md pl8-md' : index % 2 == 0, 'pl0-md pr8-md' : index % 2 == 1 }">
-          <router-link to="/">
-            <magazine-tile class="b-md" :class="{ 'b-right-none b-top' : index % 2 == 0 }" :title="magazine.title" :category="magazine.category" :bg-url="magazine.bgUrl" />
-          </router-link>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import builder from 'bodybuilder'
-import Search from 'theme/components/theme/Search'
-import CategoryTile from 'theme/components/core/CategoryTile'
-import ProductTile from 'theme/components/core/ProductTile'
-import MagazineTile from 'theme/components/theme/MagazineTile'
-import Nossr from 'vue-no-ssr'
-import { Carousel, Slide } from 'vue-carousel'
-import i18n from 'core/lib/i18n'
-
-export default {
-  metaInfo () {
-    return {
-      title: this.$route.meta.title || i18n.t('Home Page'),
-      meta: this.$route.meta.description ? [{vmid: 'description', description: this.$route.meta.description}] : []
-    }
-  },
-  data () {
-    return {
-      newProducts: [],
-      magazines: [{
-        title: '10 the most extreme roads for running',
-        category: 'Guide',
-        bgUrl: '/assets/homepage/magazines/roads.png'
-      }, {
-        title: 'What is the best way to train for a marathon?',
-        category: ' Guide',
-        bgUrl: '/assets/homepage/magazines/marathon.png'
-      }],
-      flickityOptions: {
-        initialIndex: 3
-      }
-    }
-  },
-  computed: {
-    categories () {
-      return this.$store.state.category.list.filter(category => category.level === 2)
-      // TODO: also should contain '&& category.product_count > 0' but it's omitted due to demo purposes
-    }
-  },
-  methods: {
-    getProducts (query, size) {
-      const params = {
-        query: query,
-        size: size,
-        sort: 'created_at:desc'
-      }
-      return this.$store.dispatch('product/list', params)
-    }
-  },
-  created () {
-    const productQuery = builder().query('match', 'category.name', 'Tees').build()
-    this.getProducts(productQuery, 8).then(res => { this.newProducts = res.items })
-  },
-  mounted () {
-    require('scrollreveal')().reveal('.animate', {
-      distance: 0,
-      scale: 0.8,
-      duration: 600
-    })
-  },
-  components: {
-    Search,
-    CategoryTile,
-    ProductTile,
-    MagazineTile,
-    Carousel,
-    Slide,
-    Nossr
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~theme/css/vars/additional';
-
-#home {
-  background: url('/assets/homepage_bg.png') no-repeat;
-  @media (min-width: $md) {
-    background-size: 100% auto;
-  }
-}
-
-</style>
diff --git a/src/themes/catalog/pages/Product.vue b/src/themes/catalog/pages/Product.vue
deleted file mode 100644
index c33e13d298..0000000000
--- a/src/themes/catalog/pages/Product.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div id="product">
-    <div class="container px30 px0-md">
-      <div class="row my30">
-        <div class="col-xs-12">
-          <breadcrumbs :routes="breadcrumbs.routes" :active-route="breadcrumbs.name" />
-        </div>
-      </div>
-      <div class="row">
-        <div class="animate col-xs-12 col-md-7 pr20-md">
-          <img class="full-width b" v-lazy="image" ref="image">
-        </div>
-        <div class="animate col-xs-12 col-md-5">
-          <div class="row">
-            <div class="col-xs-12">
-              <h1 class="mt0">
-                {{ product.name }}
-              </h1>
-            </div>
-          </div>
-          <div class="row mb10">
-            <div class="col-xs-12 fs-large">
-              <span>{{ product.price | price }}</span>
-            </div>
-          </div>
-          <div class="row" v-if="product.type_id =='configurable'" v-for="(variant, index) in product.configurable_options" :key="index">
-            <div class="col-md-12 uppercase c-secondary">
-              <h4>{{ variant.label }}</h4>
-            </div>
-            <div class="col-xs-12">
-              <color-filter v-for="(color, i) in options.color" :key="i" :color="color.label" :id="color.id" class="mr5" :initial-active="color.id == configuration.color.id" v-if="variant.label == 'Color'" />
-              <size-filter v-for="(size, i) in options.size" :key="i" :size="size.label" :id="size.id" class="mr15" :initial-active="size.id == configuration.size.id" v-if="variant.label == 'Size'" />
-            </div>
-          </div>
-          <div class="row mt30">
-            <div class="col-xs-12">
-              <button
-                class="availibility-btn c-on-accent fs-large b-none py20 medium"
-                :class="{ 'bg-accent bg-accent-hover' : !availability.checked,
-                          'bg-btn-positive' : availability.checked || availability.available,
-                          'bg-btn-positive' : availability.checked || !availability.available }"
-                @click="isAvailable()"> {{ availabilityLabel }}</button>
-            </div>
-          </div>
-          <div v-if="!isOnWishlist" class="row mt40">
-            <div class="col-xs-12 col-md-4">
-              <div @click="addToList('wishlist')" class="c-secondary-lighter c-icon-hover pointer flex start-xs middle-xs uppercase fs-medium-small hover-transition">
-                <span class="material-icons">favorite_border</span>
-                <span class="pl10">{{ $t('Save product') }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="row mt40 fs-medium-small">
-            <div class="col-xs-12 uppercase bold c-secondary-lighter">
-              <span @click="ui.aboutProduct = true; ui.qualities = false" :class="{ 'c-primary' : ui.aboutProduct}" class="mr20 pointer">About product</span>
-              <span @click="ui.aboutProduct = false; ui.qualities = true" :class="{ 'c-primary' : ui.qualities}" class="pointer">Qualities</span>
-            </div>
-            <div v-if="ui.aboutProduct" v-html="product.description" class="col-md-12 mt10"/>
-            <div v-if="ui.qualities" class="col-md-12 mt20">
-              <product-attribute :key="attr.attribute_code" v-for="attr in customAttributes" :product="product" :attribute="attr" empty-placeholder="N/A"/>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="row py60 center-xs">
-        <div class="col-xs-12 animate">
-          <h2 class="mb40">Similar products</h2>
-          <similar-pdoducts :number="4" classes="col-md-3 b mb15 mb0-md"/>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Product from 'core/pages/Product'
-
-import Breadcrumbs from 'theme/components/core/Breadcrumbs'
-import ProductAttribute from 'theme/components/core/blocks/Product/ProductAttribute'
-import ColorFilter from 'theme/components/core/ColorFilter'
-import SizeFilter from 'theme/components/core/SizeFilter'
-import SimilarPdoducts from 'theme/components/core/blocks/Product/SimilarProducts'
-
-export default {
-  data () {
-    return {
-      availability: {
-        checked: false,
-        available: true
-      },
-      ui: {
-        aboutProduct: true,
-        qualities: false
-      },
-      scrollReveal: null
-    }
-  },
-  computed: {
-    availabilityLabel () {
-      let text = this.availability.checked ? (this.availability.available ? 'Product in stock' : 'No product in stock') : 'Check availability'
-      return text
-    }
-  },
-  methods: {
-    isAvailable () {
-      this.availability.checked = true
-      this.availability.available = this.product.stock.is_in_stock
-    },
-    resetProductState () {
-      this.availability.checked = false
-    }
-  },
-  mounted () {
-    require('scrollreveal')().reveal('.animate', {
-      distance: 0,
-      scale: 0.8,
-      duration: 600,
-      viewFactor: 0.5
-    })
-  },
-  watch: {
-    '$route': 'resetProductState'
-  },
-  components: {
-    Breadcrumbs,
-    ProductAttribute,
-    ColorFilter,
-    SizeFilter,
-    SimilarPdoducts
-  },
-  mixins: [Product]
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~theme/css/mixins/transitions";
-// Temporary workaround
-#product {
-  overflow-x: hidden;
-}
-button {
-  outline: none;
-}
-.availibility-btn {
-    @include transition;
-    width: 300px;
-    cursor: pointer;
-}
-</style>
diff --git a/src/themes/catalog/plugins/index.js b/src/themes/catalog/plugins/index.js
deleted file mode 100644
index 3a88884e4c..0000000000
--- a/src/themes/catalog/plugins/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Add your own plugins in this folder by exporting object with their instances
-// They will be registered later with Vue.use(). You can find examples in core/plugins/index.js
-
-// Export plugin objects here. They will be proceeded by Vue.use()
-export {
-
-}
diff --git a/src/themes/catalog/resource/head.js b/src/themes/catalog/resource/head.js
deleted file mode 100644
index 79ff8608e8..0000000000
--- a/src/themes/catalog/resource/head.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default {
-  title: 'Theme Catalog',
-  titleTemplate: '%s - Vue Storefront',
-  htmlAttrs: {
-    lang: 'en'
-  },
-  meta: [
-    { charset: 'utf-8' },
-    { vmid: 'description', description: 'Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Prestashop or Shopware) through the API.' },
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, minimal-ui' },
-    { name: 'mobile-web-app-capable', content: 'yes' },
-    { name: 'theme-color', content: '#f60' },
-    { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
-  ],
-  link: [
-    { rel: 'icon', href: '/assets/logo.png' },
-    { rel: 'apple-touch-startup-image', href: '/assets/launcher-icon-2x.png' },
-    { rel: 'apple-touch-icon', href: '/assets/launcher-icon-1x.png' },
-    { rel: 'manifest', href: '/assets/manifest.json' }
-  ]
-}
diff --git a/src/themes/catalog/resource/i18n/en-US.csv b/src/themes/catalog/resource/i18n/en-US.csv
deleted file mode 100644
index 7e000453c1..0000000000
--- a/src/themes/catalog/resource/i18n/en-US.csv
+++ /dev/null
@@ -1 +0,0 @@
-"customMessage","You can define or override translation messages here."
\ No newline at end of file
diff --git a/src/themes/catalog/service-worker-ext.js b/src/themes/catalog/service-worker-ext.js
deleted file mode 100644
index 9518bc13cb..0000000000
--- a/src/themes/catalog/service-worker-ext.js
+++ /dev/null
@@ -1,13 +0,0 @@
-'use strict'
-
-/*
-Service worker extensions for theme CATALOG
-
-Add your own Service worker code here - for example using sw-toolbox library:
-
-toolbox.router.get("/", toolbox.cacheFirst, {});
-toolbox.router.get("/catalog", toolbox.fastest, {});
-*/
-
-self.addEventListener('message', function (event) {
-})
diff --git a/src/themes/catalog/store/index.js b/src/themes/catalog/store/index.js
deleted file mode 100644
index 54d94398f9..0000000000
--- a/src/themes/catalog/store/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Here you can place theme-specific stores that will be added to the core stores.
-// Everything that you will export here will be treated as a Vuex module
-// The good practice is to keep all modulase separated in this folder.
-
-// Below you can find commented exaple for additional theme store
-// const exampleThemeStore = {
-//   namespaced: true,
-//   state: {
-//   },
-//   mutations: {
-//   },
-//   actions: {
-//   }
-// }
-
-export default {
-  // exampleThemeStore
-}
diff --git a/src/themes/catalog/webpack.config.js b/src/themes/catalog/webpack.config.js
deleted file mode 100644
index f31eabdac6..0000000000
--- a/src/themes/catalog/webpack.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// You can extend default webpack build here. Read more on docs: https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Working%20with%20webpack.md
-module.exports = function (config, { isClient, isDev }) {
-  return config
-}
diff --git a/src/themes/default/components/core/ProductBundleOptions.vue b/src/themes/default/components/core/ProductBundleOptions.vue
index 2e8ae89940..11ceb5d052 100644
--- a/src/themes/default/components/core/ProductBundleOptions.vue
+++ b/src/themes/default/components/core/ProductBundleOptions.vue
@@ -16,18 +16,21 @@
           >
           <label class="pl10 lh20 h4 pointer" :for="('bundleOption_' + opval.id)" v-html="opval.product.name" />
         </div>
-        <label class="qty" :for="('bundleOptionQty_' + option.option_id)">{{ $t('Quantity') }}</label><input
-          @change="optionChanged(option)"
-          type="number"
-          min="0"
-          class="m0 no-outline qty"
-          :name="('bundleOptionQty_' + option.option_id)"
-          :id="('bundleOptionQty_' + option.option_id)"
-          focus
-          v-model="inputValues[('bundleOptionQty_' + option.option_id)]"
-        >
-        <span class="error" v-if="validation.results[('bundleOptionQty_' + option.option_id)].error">{{ validation.results[('bundleOptionQty_' + option.option_id)].message }}</span>
-        <span class="error" v-if="validation.results[('bundleOption_' + option.option_id)].error">{{ validation.results[('bundleOption_' + option.option_id)].message }}</span>
+        <div>
+          <label class="qty-label flex" :for="('bundleOptionQty_' + option.option_id)">{{ $t('Quantity') }}</label>
+          <input
+            @change="optionChanged(option)"
+            type="number"
+            min="0"
+            class="m0 no-outline qty-input py10 brdr-cl-primary bg-cl-transparent h4"
+            :name="('bundleOptionQty_' + option.option_id)"
+            :id="('bundleOptionQty_' + option.option_id)"
+            focus
+            v-model="inputValues[('bundleOptionQty_' + option.option_id)]"
+          >
+          <span class="error" v-if="validation.results[('bundleOptionQty_' + option.option_id)].error">{{ validation.results[('bundleOptionQty_' + option.option_id)].message }}</span>
+          <span class="error" v-if="validation.results[('bundleOption_' + option.option_id)].error">{{ validation.results[('bundleOption_' + option.option_id)].message }}</span>
+        </div>
       </div>
     </div>
   </form>
@@ -50,6 +53,11 @@ export default {
   $bg-secondary: color(secondary, $colors-background);
   $color-secondary: color(secondary);
   $color-error: color(error);
+  .qty-input {
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    width: 90px;
+  }
 
   .custom-option > label {
     font-weight: bold;
@@ -150,4 +158,8 @@ export default {
       }
     }
   }
+  .qty-label {
+    font-size: 12px !important;
+    padding-left: 0px !important;
+  }
 </style>