diff --git a/config/default.json b/config/default.json
index fb1612f6fc..3d41dd1929 100644
--- a/config/default.json
+++ b/config/default.json
@@ -38,7 +38,8 @@
       "templates": {
         "default": "dist/index.html",
         "minimal": "dist/index.minimal.html",
-        "basic": "dist/index.basic.html"
+        "basic": "dist/index.basic.html",
+        "amp": "dist/index.amp.html"
       },
       "executeMixedinAsyncData": true,
       "initialStateFilter": ["__DEMO_MODE__", "version", "storeView"],
diff --git a/core/build/webpack.base.config.js b/core/build/webpack.base.config.js
index 9fa8462d9e..f38bfb1e50 100644
--- a/core/build/webpack.base.config.js
+++ b/core/build/webpack.base.config.js
@@ -22,7 +22,8 @@ const themeCSS = themeRoot + '/css'
 const themeApp = themeRoot + '/App.vue'
 const themedIndex = path.join(themeRoot, 'index.template.html')
 const themedIndexMinimal = path.join(themeRoot, 'index.minimal.template.html')
-const themedIndexBasic= path.join(themeRoot, 'index.basic.template.html')
+const themedIndexBasic = path.join(themeRoot, 'index.basic.template.html')
+const themedIndexAmp = path.join(themeRoot, 'index.amp.template.html')
 
 const translationPreprocessor = require('@vue-storefront/i18n/scripts/translation.preprocessor.js')
 translationPreprocessor([
@@ -57,14 +58,19 @@ module.exports = {
       inject: isProd == false // in dev mode we're not using clientManifest therefore renderScripts() is returning empty string and we need to inject scripts using HTMLPlugin
     }),
     new HTMLPlugin({
-      template: fs.existsSync(themedIndex) ? themedIndexMinimal : 'src/index.minimal.template.html',
+      template: fs.existsSync(themedIndexMinimal) ? themedIndexMinimal : 'src/index.minimal.template.html',
       filename: 'index.minimal.html',
       inject: isProd == false
     }),
     new HTMLPlugin({
-      template: fs.existsSync(themedIndex) ? themedIndexBasic: 'src/index.basic.template.html',
+      template: fs.existsSync(themedIndexBasic) ? themedIndexBasic: 'src/index.basic.template.html',
       filename: 'index.basic.html',
       inject: isProd == false
+    }),
+    new HTMLPlugin({
+      template: fs.existsSync(themedIndexAmp) ? themedIndexAmp: 'src/index.amp.template.html',
+      filename: 'index.amp.html',
+      inject: isProd == false
     })
   ],
   devtool: 'source-map',
diff --git a/core/pages/Category.js b/core/pages/Category.js
index be893f53b4..4fc4ba6ca9 100644
--- a/core/pages/Category.js
+++ b/core/pages/Category.js
@@ -5,7 +5,7 @@ import store from '@vue-storefront/store'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 import { baseFilterProductsQuery, buildFilterProductsQuery } from '@vue-storefront/store/helpers'
 import { htmlDecode } from '@vue-storefront/core/filters/html-decode'
-
+import { localizedRoute } from '@vue-storefront/store/lib/multistore'
 import Composite from '@vue-storefront/core/mixins/composite'
 
 export default {
@@ -262,6 +262,16 @@ export default {
   },
   metaInfo () {
     return {
+      link: [
+        { rel: 'amphtml',
+          href: this.$router.resolve(localizedRoute({
+            name: 'category-amp',
+            params: {
+              slug: this.category.slug
+            }
+          })).href
+        }
+      ],
       title: htmlDecode(this.$route.meta.title || this.categoryName),
       meta: this.$route.meta.description ? [{ vmid: 'description', description: htmlDecode(this.$route.meta.description) }] : []
     }
diff --git a/core/pages/Product.js b/core/pages/Product.js
index fb8473ac4e..846c9957cb 100644
--- a/core/pages/Product.js
+++ b/core/pages/Product.js
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex'
 import store from '@vue-storefront/store'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 import { htmlDecode, stripHTML } from '@vue-storefront/core/filters'
-import { currentStoreView } from '@vue-storefront/store/lib/multistore'
+import { currentStoreView, localizedRoute } from '@vue-storefront/store/lib/multistore'
 import { CompareProduct } from '@vue-storefront/core/modules/compare/components/Product.ts'
 import { AddToCompare } from '@vue-storefront/core/modules/compare/components/AddToCompare.ts'
 import { isOptionAvailableAsync } from '@vue-storefront/core/modules/catalog/helpers/index'
@@ -227,6 +227,18 @@ export default {
   metaInfo () {
     return {
       title: htmlDecode(this.$route.meta.title || this.productName),
+      link: [
+        { rel: 'amphtml',
+          href: this.$router.resolve(localizedRoute({
+            name: this.product.type_id + '-product-amp',
+            params: {
+              parentSku: this.product.parentSku ? this.product.parentSku : this.product.sku,
+              slug: this.product.slug,
+              childSku: this.product.sku
+            }
+          })).href
+        }
+      ],
       meta: [{ vmid: 'description', description: this.product.short_description ? stripHTML(htmlDecode(this.product.short_description)) : htmlDecode(stripHTML(this.product.description)) }]
     }
   }
diff --git a/core/scripts/server.js b/core/scripts/server.js
index 1e02ec1a50..d3d89b60e2 100755
--- a/core/scripts/server.js
+++ b/core/scripts/server.js
@@ -155,6 +155,7 @@ app.get('*', (req, res, next) => {
       output: {
         prepend: (context) => { return '' }, // these functions can be replaced in the Vue components to append or prepend some content AFTER all other things are rendered. So in this function You may call: output.prepend() { return context.renderStyles() } to attach styles
         append: (context) => { return '' },
+        appendHead: (context) => { return '' },
         template: 'default',
         cacheTags: null
       },
@@ -185,6 +186,7 @@ app.get('*', (req, res, next) => {
 
       output = contentPrepend + output + contentAppend
       if (context.output.template) { // case when we've got the template name back from vue app
+        if (!isProd) context.output.template = 'default' // in dev mode we can not use pre-rendered HTML templates
         if (templatesCache[context.output.template]) { // please look at: https://github.com/vuejs/vue/blob/79cabadeace0e01fb63aa9f220f41193c0ca93af/src/server/template-renderer/index.js#L87 for reference
           output = templatesCache[context.output.template](context).replace('<!--vue-ssr-outlet-->', output)
         } else {
diff --git a/src/index.amp.template.html b/src/index.amp.template.html
new file mode 100755
index 0000000000..6b1a43e36c
--- /dev/null
+++ b/src/index.amp.template.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html data-vue-meta-server-rendered {{{ meta.inject().htmlAttrs.text() }}} amp>
+  <head><!-- index for default theme -->
+  	{{{ meta.inject().title.text() }}}
+  	{{{ meta.inject().meta.text() }}}
+		{{{ meta.inject().link.text() }}}
+		{{{ output.appendHead() }}}
+		{{{ renderStyles().replace("<style", "<style amp-custom") }}}
+	</head>
+  <body>
+		<!--vue-ssr-outlet-->
+  </body>
+</html>
diff --git a/src/index.basic.template.html b/src/index.basic.template.html
index 541312bdcd..3d88763d1f 100755
--- a/src/index.basic.template.html
+++ b/src/index.basic.template.html
@@ -18,7 +18,8 @@
 				s.parentNode.insertBefore(wf, s);
 			})(); 
 		</script>
-    {{{ renderStyles() }}}
+		{{{ renderStyles() }}}
+		{{{ output.appendHead() }}}		
 	</head>
   <body>
 		<!--vue-ssr-outlet-->
diff --git a/src/index.minimal.template.html b/src/index.minimal.template.html
index 3508f20ede..14f95dd79b 100755
--- a/src/index.minimal.template.html
+++ b/src/index.minimal.template.html
@@ -4,6 +4,7 @@
   	{{{ meta.inject().title.text() }}}
   	{{{ meta.inject().meta.text() }}}
 		{{{ meta.inject().link.text() }}}
+		{{{ output.appendHead() }}}
 	</head>
   <body>
 		<!--vue-ssr-outlet-->
diff --git a/src/index.template.html b/src/index.template.html
index 815b54b7e7..af17427948 100755
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -19,7 +19,8 @@
 			})(); 
 		</script>
 		{{{ renderResourceHints() }}}
-    {{{ renderStyles() }}}
+		{{{ renderStyles() }}}
+		{{{ output.appendHead() }}}		
 	</head>
   <body>
 		<!--vue-ssr-outlet-->
diff --git a/src/modules/amp-renderer/index.ts b/src/modules/amp-renderer/index.ts
new file mode 100644
index 0000000000..912796090e
--- /dev/null
+++ b/src/modules/amp-renderer/index.ts
@@ -0,0 +1,19 @@
+import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/module'
+import moduleRoutes from './router'
+
+const store = {
+  namespaced: true,
+  state: {
+    key: null
+  }
+}
+
+const KEY = 'amp-renderer'
+
+const moduleConfig: VueStorefrontModuleConfig = {
+  key: KEY,
+  router: { routes: moduleRoutes },
+  store: { modules: [{ key: KEY, module: store }] }
+}
+
+export const AmpRenderer = new VueStorefrontModule(moduleConfig)
\ No newline at end of file
diff --git a/src/modules/amp-renderer/package.json b/src/modules/amp-renderer/package.json
new file mode 100644
index 0000000000..6c846fd1cf
--- /dev/null
+++ b/src/modules/amp-renderer/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "@vue-storefront/module-amp-renderer",
+    "version": "1.0.0",
+    "description": "Google AMP Renderer for Vue Storefront",
+    "license": "MIT",
+    "main": "index.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}
\ No newline at end of file
diff --git a/src/modules/amp-renderer/router.ts b/src/modules/amp-renderer/router.ts
new file mode 100755
index 0000000000..0eea5d67e4
--- /dev/null
+++ b/src/modules/amp-renderer/router.ts
@@ -0,0 +1,2 @@
+import AmpThemeRouting from 'src/themes/default-amp/router'
+export default AmpThemeRouting
diff --git a/src/modules/index.ts b/src/modules/index.ts
index 8c65784910..894b78e785 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { VueStorefrontModule } from '@vue-storefront/module'
 import { Catalog } from "@vue-storefront/core/modules/catalog"
 import { Cart } from '@vue-storefront/core/modules/cart'
@@ -14,6 +15,7 @@ import { Claims } from './claims'
 import { PromotedOffers } from './promoted-offers'
 import { Ui } from './ui-store'
 import { GoogleAnalytics } from './google-analytics';
+import { AmpRenderer } from './amp-renderer';
 
 // Some modules  that still needs API refactoring are  temporary registered in core
 // This is how you can adjust any module with application-specific behavior
@@ -43,3 +45,7 @@ export const registerModules: VueStorefrontModule[] = [
   GoogleAnalytics
   // Example
 ]
+
+if (Vue.prototype.$isServer) { // extensions that are not required in the SSR mode
+  registerModules.push(AmpRenderer)
+}
\ No newline at end of file
diff --git a/src/themes/default-amp/components/core/Header.vue b/src/themes/default-amp/components/core/Header.vue
new file mode 100755
index 0000000000..a87efb9b6b
--- /dev/null
+++ b/src/themes/default-amp/components/core/Header.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="header">
+    <header
+      class="fixed w-100 brdr-bottom-1 bg-cl-primary brdr-cl-secondary"
+      :class="{ 'is-visible': navVisible }"
+    >
+      <div class="container px15">
+        <div class="row between-xs middle-xs" v-if="!isCheckoutPage">
+          <div class="col-sm-4 col-xs-2 middle-xs" />
+          <div class="col-xs-2 visible-xs">
+            <search-icon class="p15 icon pointer" />
+          </div>
+          <div class="col-sm-4 col-xs-4 center-xs pt5">
+            <div>
+              <logo width="36px" height="41px"/>
+            </div>
+          </div>
+          <div class="col-xs-2 visible-xs">
+            <wishlist-icon class="p15 icon pointer" />
+          </div>
+          <div class="col-sm-4 col-xs-2 end-xs" />
+        </div>
+        <div class="row between-xs middle-xs px15 py5" v-if="isCheckoutPage">
+          <div class="col-xs-5 col-md-3 middle-xs">
+            <div>
+              <router-link :to="localizedRoute('/')" class="cl-tertiary links">
+                {{ $t('Return to shopping') }}
+              </router-link>
+            </div>
+          </div>
+          <div class="col-xs-2 col-md-6 center-xs">
+            <logo width="36px" height="41px"/>
+          </div>
+          <div class="col-xs-5 col-md-3 end-xs">
+            <div>
+              <a v-if="!currentUser" href="#" @click.prevent="gotoAccount" class="cl-tertiary links">
+                {{ $t('Login to your account') }}
+              </a>
+              <span v-else>
+                {{ $t('You are logged in as') }} {{ currentUser.firstname }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="header-placeholder"/>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CurrentPage from 'theme/mixins/currentPage'
+import Header from 'theme/components/core//blocks/Header/Header'
+import AccountIcon from 'theme/components/core/blocks/Header/AccountIcon'
+import CompareIcon from 'theme/components/core/blocks/Header/CompareIcon'
+import HamburgerIcon from 'theme/components/core/blocks/Header/HamburgerIcon'
+import Logo from 'theme/components/core/Logo'
+import MicrocartIcon from 'theme/components/core/blocks/Header/MicrocartIcon'
+import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon'
+import SearchIcon from 'theme/components/core/blocks/Header/SearchIcon'
+import WishlistIcon from 'theme/components/core/blocks/Header/WishlistIcon'
+
+export default {
+  components: {
+    AccountIcon,
+    CompareIcon,
+    HamburgerIcon,
+    Logo,
+    MicrocartIcon,
+    ReturnIcon,
+    SearchIcon,
+    WishlistIcon
+  },
+  mixins: [Header, CurrentPage],
+  data () {
+    return {
+      navVisible: true,
+      isScrolling: false,
+      scrollTop: 0,
+      lastScrollTop: 0,
+      navbarHeight: 54
+    }
+  },
+  computed: {
+    ...mapState({
+      isOpenLogin: state => state.ui.signUp,
+      currentUser: state => state.user.current
+    })
+  },
+  beforeMount () {
+    window.addEventListener('scroll', () => {
+      this.isScrolling = true
+    })
+
+    setInterval(() => {
+      if (this.isScrolling) {
+        this.hasScrolled()
+        this.isScrolling = false
+      }
+    }, 250)
+  },
+  methods: {
+    gotoAccount () {
+      this.$bus.$emit('modal-toggle', 'modal-signup')
+    },
+    hasScrolled () {
+      this.scrollTop = window.scrollY
+      if (this.scrollTop > this.lastScrollTop && this.scrollTop > this.navbarHeight) {
+        this.navVisible = false
+      } else {
+        this.navVisible = true
+      }
+      this.lastScrollTop = this.scrollTop
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-icon-hover: color(secondary, $colors-background);
+
+header {
+  height: 54px;
+  top: -55px;
+  z-index: 2;
+  transition: top 0.2s ease-in-out;
+  &.is-visible {
+    top: 0;
+  }
+}
+.icon {
+  opacity: 0.6;
+  &:hover,
+  &:focus {
+    background-color: $color-icon-hover;
+    opacity: 1;
+  }
+}
+.right-icons {
+  //for edge
+  float: right;
+}
+.header-placeholder {
+  height: 54px;
+}
+.links {
+  text-decoration: underline;
+}
+@media (max-width: 767px) {
+  .row.middle-xs {
+    margin: 0 -15px;
+
+    &.py5 {
+      margin: 0;
+    }
+  }
+  .col-xs-2:first-of-type {
+      padding-left: 0;
+  }
+  .col-xs-2:last-of-type {
+      padding-right: 0;
+  }
+  a, span {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/themes/default-amp/components/core/ProductListing.vue b/src/themes/default-amp/components/core/ProductListing.vue
new file mode 100755
index 0000000000..7c5e81b406
--- /dev/null
+++ b/src/themes/default-amp/components/core/ProductListing.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="product-listing row m0 center-xs start-md">
+    <div
+      v-for="(product, key) in products"
+      :key="product.id"
+      class="col-sm-6 flex"
+      :class="['col-md-' + (12/columns)%10, wide(product.sale, product.new, key)]"
+    >
+      <product-tile :product="product"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductListing from 'theme/components/core/ProductListing'
+import ProductTile from './ProductTile'
+let lastHero = 0
+export default {
+  components: {
+    ProductTile
+  },
+  mixins: [ProductListing],
+  props: {
+    products: {
+      type: null,
+      required: true
+    },
+    columns: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  methods: {
+    wide (isOnSale, isNew, index) {
+      let deltaCondition = index > 0 && ((index - 1) - lastHero) % 2 === 0
+      // last image always shouldn't be big, we also need to count from last promoted to check if it will look ok
+      let isHero = ((isOnSale === '1' || isNew === '1') && deltaCondition) || (index === this.products.length - 1 && (index - lastHero) % 2 !== 0)
+      if (isHero) {
+        lastHero = index
+      }
+      return isHero ? 'col-xs-12' : 'col-xs-6'
+    }
+  }
+}
+</script>
diff --git a/src/themes/default-amp/components/core/ProductTile.vue b/src/themes/default-amp/components/core/ProductTile.vue
new file mode 100755
index 0000000000..f81668b623
--- /dev/null
+++ b/src/themes/default-amp/components/core/ProductTile.vue
@@ -0,0 +1,192 @@
+<template>
+  <div
+    class="product align-center w-100 pb20"
+    v-observe-visibility="visibilityChanged"
+  >
+    <router-link
+      class="block no-underline product-link"
+      :to="localizedRoute({
+        name: product.type_id + '-product',
+        params: {
+          parentSku: product.parentSku ? product.parentSku : product.sku,
+          slug: product.slug,
+          childSku: product.sku
+        }
+      })"
+      data-testid="productLink"
+    >
+      <div
+        class="product-image relative bg-cl-secondary"
+        :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]">
+        <amp-img
+          :alt="product.name"
+          :src="thumbnailObj.src"
+          height="300"
+          width="310"
+        />
+      </div>
+
+      <p class="mb0 cl-accent mt10" v-if="!onlyImage">
+        {{ product.name | htmlDecode }}
+      </p>
+
+      <span
+        class="price-original mr5 lh30 cl-secondary"
+        v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
+      >
+        {{ product.originalPriceInclTax | price }}
+      </span>
+
+      <span
+        class="price-special lh30 cl-accent weight-700"
+        v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
+      >
+        {{ product.priceInclTax | price }}
+      </span>
+
+      <span
+        class="lh30 cl-secondary"
+        v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
+      >
+        {{ product.priceInclTax | price }}
+      </span>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import rootStore from '@vue-storefront/store'
+import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
+
+export default {
+  mixins: [ProductTile],
+  props: {
+    labelsActive: {
+      type: Boolean,
+      requred: false,
+      default: true
+    },
+    onlyImage: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    onProductPriceUpdate (product) {
+      if (product.sku === this.product.sku) {
+        Object.assign(this.product, product)
+      }
+    },
+    visibilityChanged (isVisible, entry) {
+      if (isVisible) {
+        if (rootStore.state.config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {
+          const skus = [this.product.sku]
+          if (this.product.type_id === 'configurable' && this.product.configurable_children && this.product.configurable_children.length > 0) {
+            for (const confChild of this.product.configurable_children) {
+              const cachedItem = rootStore.state.stock.cache[confChild.id]
+              if (typeof cachedItem === 'undefined' || cachedItem === null) {
+                skus.push(confChild.sku)
+              }
+            }
+            if (skus.length > 0) {
+              rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
+            }
+          }
+        }
+      }
+    }
+  },
+  beforeMount () {
+    this.$bus.$on('product-after-priceupdate', this.onProductPriceUpdate)
+  },
+  beforeDestroy () {
+    this.$bus.$off('product-after-priceupdate', this.onProductPriceUpdate)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~theme/css/animations/transitions';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+
+$bg-secondary: color(secondary, $colors-background);
+$border-secondary: color(secondary, $colors-border);
+$color-white: color(white);
+
+.product {
+  @media (max-width: 767px) {
+    padding-bottom: 10px;
+  }
+}
+
+.price-original {
+  text-decoration: line-through;
+}
+
+%label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: $border-secondary;
+  text-transform: uppercase;
+  color: $color-white;
+  font-size: 12px;
+}
+
+.product-image {
+  width: 100%;
+  overflow: hidden;
+  max-height: 300px;
+
+  &:hover {
+    amp-img {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+
+    &.sale::after,
+    &.new::after {
+      opacity: 0.8;
+    }
+  }
+
+  amp-img {
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    margin: auto;
+    mix-blend-mode: darken;
+    opacity: 0.8;
+    transform: scale(1);
+    transition: 0.3s opacity $motion-main, 0.3s transform $motion-main;
+    /deep/ img {
+        height: initial;
+        width: initial;
+        min-height: initial;
+        min-width: initial;
+    }
+  }
+
+  &.sale {
+    &::after {
+      @extend %label;
+      content: 'Sale';
+    }
+  }
+
+  &.new {
+    &::after {
+      @extend %label;
+      content: 'New';
+    }
+  }
+}
+</style>
diff --git a/src/themes/default-amp/css/_README.md b/src/themes/default-amp/css/_README.md
new file mode 100755
index 0000000000..8ff35b8260
--- /dev/null
+++ b/src/themes/default-amp/css/_README.md
@@ -0,0 +1,4 @@
+# Documentation
+Please read the docs before working with stylesheets.
+
+[Working with stylesheets](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Working%20with%20stylesheets%20(CSS).md) -  how to use and extend stylesheets in Vue Storefront.
\ No newline at end of file
diff --git a/src/themes/default-amp/css/animations/_animations.scss b/src/themes/default-amp/css/animations/_animations.scss
new file mode 100755
index 0000000000..a24afcaa1e
--- /dev/null
+++ b/src/themes/default-amp/css/animations/_animations.scss
@@ -0,0 +1,27 @@
+@keyframes images-lazy-loading {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+[lazy="loaded"] {
+  animation: images-lazy-loading;
+  animation-duration: 0.3s;
+}
+
+@keyframes ripple-effect {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+  20% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
diff --git a/src/themes/default-amp/css/animations/_transitions.scss b/src/themes/default-amp/css/animations/_transitions.scss
new file mode 100755
index 0000000000..363d9f0b63
--- /dev/null
+++ b/src/themes/default-amp/css/animations/_transitions.scss
@@ -0,0 +1,38 @@
+$motion-main: cubic-bezier(0.54, 0.02, 0.35, 0.88);
+$duration-main: .3s;
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity $duration-main;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
+
+.fade-in {
+  &-down-enter-active,
+  &-down-leave-active,
+  &-up-enter-active,
+  &-up-leave-active {
+    transition: all $duration-main $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/default-amp/css/base/_base.scss b/src/themes/default-amp/css/base/_base.scss
new file mode 100755
index 0000000000..1a079fa17d
--- /dev/null
+++ b/src/themes/default-amp/css/base/_base.scss
@@ -0,0 +1,25 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  position: relative;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  overflow-x: hidden;
+}
+
+#viewport {
+  overflow-x: hidden;
+}
+
+.no-scroll {
+  overflow: hidden;
+}
diff --git a/src/themes/default-amp/css/base/_color.scss b/src/themes/default-amp/css/base/_color.scss
new file mode 100755
index 0000000000..401f7cb5ff
--- /dev/null
+++ b/src/themes/default-amp/css/base/_color.scss
@@ -0,0 +1,16 @@
+// Colors / backgrounds
+// =======================
+// Generate colors selectors
+// .cl-{#name-of-color}
+@include color-selectors(map_merge($colors, $colors-theme), 'cl', 'color');
+
+// .cl-{#palette}-{#name-of-color}
+@include color-selectors($colors-background, 'cl-bg', 'color');
+@include color-selectors($colors-border, 'cl-brdr', 'color');
+
+// Generate background-color selectors
+// .bg-cl-{#name-of-color}
+@include color-selectors(map_merge($colors, $colors-background), 'bg-cl', 'background-color');
+
+// .bg-cl-#{#palette}-{#name-of-color}
+@include color-selectors($colors-theme, 'bg-cl-th', 'background-color');
diff --git a/src/themes/default-amp/css/base/_flexbox-grid.css b/src/themes/default-amp/css/base/_flexbox-grid.css
new file mode 100755
index 0000000000..2f502c950c
--- /dev/null
+++ b/src/themes/default-amp/css/base/_flexbox-grid.css
@@ -0,0 +1 @@
+.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.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:-.5rem;margin-left:-.5rem}.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}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.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}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.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}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.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-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.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{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.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}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.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-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.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{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.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}}
\ No newline at end of file
diff --git a/src/themes/default-amp/css/base/_global_vars.scss b/src/themes/default-amp/css/base/_global_vars.scss
new file mode 100755
index 0000000000..4d9f11ec5a
--- /dev/null
+++ b/src/themes/default-amp/css/base/_global_vars.scss
@@ -0,0 +1,7 @@
+// @todo move to separate file
+$z-index: (
+  overlay: 3,
+  modal: 10,
+  notification: 1000,
+  loader: 1001
+)
diff --git a/src/themes/default-amp/css/base/_icons.scss b/src/themes/default-amp/css/base/_icons.scss
new file mode 100755
index 0000000000..a9af0a28fd
--- /dev/null
+++ b/src/themes/default-amp/css/base/_icons.scss
@@ -0,0 +1,26 @@
+// @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/default-amp/css/base/_text.scss b/src/themes/default-amp/css/base/_text.scss
new file mode 100755
index 0000000000..941cf239a7
--- /dev/null
+++ b/src/themes/default-amp/css/base/_text.scss
@@ -0,0 +1,114 @@
+// Global styles for text
+body {
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Playfair Display', serif;
+}
+
+h1,
+.h1 {
+  font-size: 48px;
+}
+
+h2,
+.h2 {
+  font-size: 36px;
+
+  @media (max-width: 767px) {
+    font-size: 24px;
+  }
+}
+h3,
+.h3 {
+  font-size: 24px;
+}
+h4,
+.h4 {
+  font-size: 18px;
+}
+h5,
+.h5 {
+  font-size: 14px;
+}
+h6,
+.h6 {
+  font-size: 12px;
+}
+
+// Atomic styles for text
+.serif {
+  font-family: 'Playfair Display', serif;
+}
+.sans-serif {
+  font-family: 'Roboto', sans-serif;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.align-center {
+  text-align: center;
+}
+.align-right {
+  text-align: right;
+}
+.align-left {
+  text-align: left;
+}
+.align-justify {
+  text-align: justify;
+}
+
+.weight-400 {
+  font-weight: 400;
+}
+.weight-700 {
+  font-weight: 700;
+}
+
+.lh16 {
+  line-height: 16px;
+}
+.lh20 {
+  line-height: 20px;
+}
+.lh25 {
+  line-height: 25px;
+}
+.lh30 {
+  line-height: 30px;
+}
+.lh35 {
+  line-height: 35px;
+}
+.lh40 {
+  line-height: 40px;
+}
+
+// Sizes
+.fs-medium-small {
+  font-size: 14px;
+}
+.fs-medium {
+  font-size: 18px;
+}
+.fs-large {
+  font-size: 24px;
+}
+.fs-big {
+  font-size: 36px;
+}
+
+// @todo its not in styleguite therefore shouldn't be here, ask Karol Bzik
+.fs16 {
+  font-size: 16px;
+}
diff --git a/src/themes/default-amp/css/components/_buttons.scss b/src/themes/default-amp/css/components/_buttons.scss
new file mode 100755
index 0000000000..7a233d18ec
--- /dev/null
+++ b/src/themes/default-amp/css/components/_buttons.scss
@@ -0,0 +1,49 @@
+.ripple {
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    left: 50%;
+    top: 50%;
+    width: 120px;
+    height: 120px;
+    background-color: #f5f5f5;
+    border-radius: 50%;
+    opacity: .2;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  &:not(:active):after {
+    animation: ripple-effect 1s ease-out;
+  }
+  &::after {
+    visibility: hidden;
+  }
+  &:focus {
+    &::after {
+      visibility: visible;
+    }
+  }
+  &-dark {
+    &::after {
+      background-color: #ddd;
+    }
+  }
+}
+
+.button-disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+button,
+.button {
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
diff --git a/src/themes/default-amp/css/helpers/_functions.scss b/src/themes/default-amp/css/helpers/_functions.scss
new file mode 100755
index 0000000000..48a30f39da
--- /dev/null
+++ b/src/themes/default-amp/css/helpers/_functions.scss
@@ -0,0 +1,3 @@
+// Global functions
+// ================
+@import 'functions/color'
diff --git a/src/themes/default-amp/css/helpers/_mixins.scss b/src/themes/default-amp/css/helpers/_mixins.scss
new file mode 100755
index 0000000000..03c91646e7
--- /dev/null
+++ b/src/themes/default-amp/css/helpers/_mixins.scss
@@ -0,0 +1,3 @@
+// Global mixins
+// =============
+@import 'mixins/color-selectors'
diff --git a/src/themes/default-amp/css/helpers/functions/_color.scss b/src/themes/default-amp/css/helpers/functions/_color.scss
new file mode 100755
index 0000000000..57375dae72
--- /dev/null
+++ b/src/themes/default-amp/css/helpers/functions/_color.scss
@@ -0,0 +1,16 @@
+/// An easy way to get colors from the $colors map
+/// @name color
+/// @param {String} $color - Color name
+/// @param {Map} $map [ map_merge($colors, $colors_theme] - Map of colors
+@function color($color, $map: map_merge($colors, $colors-theme), $variant: default) {
+  @if (type-of(map-get($map, $color)) == map) {
+    @if map_has_key(map-get($map, $color), $variant) {
+      @return map-get(map-get($map, $color), $variant)
+    } @else {
+      @return map-get(map-get($map, $color), default)
+    }
+  } @else {
+    @return map-get($map, $color)
+  }
+
+}
diff --git a/src/themes/default-amp/css/helpers/mixins/_color-selectors.scss b/src/themes/default-amp/css/helpers/mixins/_color-selectors.scss
new file mode 100755
index 0000000000..11d54da83a
--- /dev/null
+++ b/src/themes/default-amp/css/helpers/mixins/_color-selectors.scss
@@ -0,0 +1,33 @@
+/// Generate colors values
+/// @name color-selectors
+/// @param {Map} $map [$colors] - Map with color values
+/// @param {String} $selector ['.cl'] - Selector to css class, .#{$selector}-#{$name-of-color}
+/// @param {String} $property ['color'] - CSS property
+@mixin color-selectors($map: $colors, $selector: 'cl', $property: 'color') {
+  @each $name, $value in $map {
+    // in case when color value is map with hover, focus variants
+    @if type-of($value) == map {
+      @if map_has_key($value, default) {
+        .#{$selector}-#{$name} {
+          #{$property}: map-get($value, default);
+        }
+      }
+
+      @if map_has_key($value, hover) {
+        .\:#{$selector}-#{$name}:hover {
+          #{$property}: map-get($value, hover);
+        }
+      }
+
+      @if map_has_key($value, focus) {
+        .\:#{$selector}-#{$name}:focus {
+          #{$property}: map-get($value, focus);
+        }
+      }
+    } @else {
+      .#{$selector}-#{$name} {
+        #{$property}: #{$value};
+      }
+    }
+  }
+}
diff --git a/src/themes/default-amp/css/layout/_border.scss b/src/themes/default-amp/css/layout/_border.scss
new file mode 100755
index 0000000000..56c556c16d
--- /dev/null
+++ b/src/themes/default-amp/css/layout/_border.scss
@@ -0,0 +1,46 @@
+// Pixel sizes
+$border-px: 1;
+
+// Radius
+$border-radius: (
+  square: 0,
+  circle: 50%
+);
+
+@mixin border {
+  @each $i in $border-px {
+    .brdr-#{$i} {
+      border: #{$i}px solid;
+    }
+    .brdr-top-#{$i} {
+      border-top-width: #{$i}px;
+      border-top-style: solid;
+    }
+    .brdr-bottom-#{$i} {
+      border-bottom-width: #{$i}px;
+      border-bottom-style: solid;
+    }
+    .brdr-left-#{$i} {
+      border-left-width: #{$i}px;
+      border-left-style: solid;
+    }
+    .brdr-right-#{$i} {
+      border-right-width: #{$i}px;
+      border-right-style: solid;
+    }
+  }
+  @each $name, $value in $border-radius {
+    .brdr-#{$name} {
+      border-radius: #{$value};
+    }
+  }
+  @include color-selectors(map_merge($colors, $colors-border), 'brdr-cl', 'border-color');
+  @include color-selectors($colors-theme, 'brdr-cl-th', 'border-color');
+  @include color-selectors($colors-background, 'brdr-cl-bg', 'border-color');
+}
+
+.brdr-none {
+  border: none;
+}
+
+@include border;
diff --git a/src/themes/default-amp/css/layout/_layout.scss b/src/themes/default-amp/css/layout/_layout.scss
new file mode 100755
index 0000000000..b3142d9b25
--- /dev/null
+++ b/src/themes/default-amp/css/layout/_layout.scss
@@ -0,0 +1,51 @@
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex {
+  display: flex;
+}
+
+.block {
+  display: block;
+}
+
+.center-self {
+  align-self: center;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.mw-100 {
+  max-width: 100%
+}
diff --git a/src/themes/default-amp/css/layout/_margin.scss b/src/themes/default-amp/css/layout/_margin.scss
new file mode 100755
index 0000000000..b67b36ae16
--- /dev/null
+++ b/src/themes/default-amp/css/layout/_margin.scss
@@ -0,0 +1,102 @@
+// Try to use multiples of 5 when using pixels
+
+// .m5 .mx5 .my5 .mt5 .mb5 .ml5 .mr5 - example classes for px margins
+// .m5p .mx5p .my5p .mt5p .mb5p .ml5p .mr5p - example classes for % margins
+
+// Pixels
+$margin-px: 0 5 10 40;
+$margin-x-px: 5 10;
+$margin-y-px: 0 5 10 15 20 30;
+$margin-top-px: 0 5 8 10 15 20 25 30 35 50 55 60;
+$margin-bottom-px: 0 5 10 15 20 25 30 35 40 45 55 80;
+$margin-left-px: 10 15 20 30 40;
+$margin-right-px: 0 5 10 15 20 35;
+
+// Percents
+$margin-p: 5;
+$margin-x-p: 5;
+$margin-y-p: 5;
+$margin-top-p: 5;
+$margin-bottom-p: 5;
+$margin-left-p: 5;
+$margin-right-p: 5;
+
+// Generators
+@mixin margin {
+  @each $i in $margin-px {
+    .m#{$i} {
+      margin: #{$i}px;
+    }
+  }
+  @each $i in $margin-p {
+    .m#{$i}p {
+      margin: percentage($i/100);
+    }
+  }
+  @each $i in $margin-x-px {
+    .mx#{$i} {
+      margin-left: #{$i}px;
+      margin-right: #{$i}px;
+    }
+  }
+  @each $i in $margin-x-p {
+    .mx#{$i}p {
+      margin-left: percentage($i/100);
+      margin-right: percentage($i/100);
+    }
+  }
+  @each $i in $margin-y-px {
+    .my#{$i} {
+      margin-top: #{$i}px;
+      margin-bottom: #{$i}px;
+    }
+  }
+  @each $i in $margin-y-p {
+    .my#{$i}p {
+      margin-top: percentage($i/100);
+      margin-bottom: percentage($i/100);
+    }
+  }
+  @each $i in $margin-top-px {
+    .mt#{$i} {
+      margin-top: #{$i}px;
+    }
+  }
+  @each $i in $margin-top-p {
+    .mt#{$i}p {
+      margin-top: percentage($i/100);
+    }
+  }
+  @each $i in $margin-bottom-px {
+    .mb#{$i} {
+      margin-bottom: #{$i}px;
+    }
+  }
+  @each $i in $margin-bottom-p {
+    .mb#{$i}p {
+      margin-bottom: percentage($i/100);
+    }
+  }
+  @each $i in $margin-left-px {
+    .ml#{$i} {
+      margin-left: #{$i}px;
+    }
+  }
+  @each $i in $margin-left-p {
+    .ml#{$i}p {
+      margin-left: percentage($i/100);
+    }
+  }
+  @each $i in $margin-right-px {
+    .mr#{$i} {
+      margin-right: #{$i}px;
+    }
+  }
+  @each $i in $margin-right-p {
+    .mr#{$i}p {
+      margin-right: percentage($i/100);
+    }
+  }
+}
+
+@include margin;
diff --git a/src/themes/default-amp/css/layout/_padding.scss b/src/themes/default-amp/css/layout/_padding.scss
new file mode 100755
index 0000000000..2c9b079119
--- /dev/null
+++ b/src/themes/default-amp/css/layout/_padding.scss
@@ -0,0 +1,66 @@
+// IMPORTANT: Add new css rules ON DEMAND only when you need them!
+// Try to use multiples of 5 when using pixels
+
+// .p0 .px10 .py5 - example classes for px paddings
+// .px10p - example class for % padding
+
+// Pixels
+$padding-px: 0 5 10 12 15 20 25 45 50;
+$padding-x-px: 2 10 15 20 25 40 55 65 70;
+$padding-y-px: 0 5 10 15 20 25 30 35 40 50;
+$padding-top-px: 0 5 10 15 20 25 30 35 40 45 50 55 70;
+$padding-bottom-px: 10 15 20 30 35 40 45 50 60 70;
+$padding-left-px: 0 20 30 35 40 70;
+$padding-right-px: 0 5 15 20 30 55 70;
+
+// Percents
+$padding-x-p: 10;
+
+// Generators
+@mixin padding {
+  @each $i in $padding-px {
+    .p#{$i} {
+      padding: #{$i}px;
+    }
+  }
+  @each $i in $padding-x-px {
+    .px#{$i} {
+      padding-left: #{$i}px;
+      padding-right: #{$i}px;
+    }
+  }
+  @each $i in $padding-x-p {
+    .px#{$i}p {
+      padding-left: percentage($i/100);
+      padding-right: percentage($i/100);
+    }
+  }
+  @each $i in $padding-y-px {
+    .py#{$i} {
+      padding-top: #{$i}px;
+      padding-bottom: #{$i}px;
+    }
+  }
+  @each $i in $padding-top-px {
+    .pt#{$i} {
+      padding-top: #{$i}px;
+    }
+  }
+  @each $i in $padding-bottom-px {
+    .pb#{$i} {
+      padding-bottom: #{$i}px;
+    }
+  }
+  @each $i in $padding-right-px {
+    .pr#{$i} {
+      padding-right: #{$i}px;
+    }
+  }
+  @each $i in $padding-left-px {
+    .pl#{$i} {
+      padding-left: #{$i}px;
+    }
+  }
+}
+
+@include padding;
diff --git a/src/themes/default-amp/css/main.scss b/src/themes/default-amp/css/main.scss
new file mode 100755
index 0000000000..04dc5cbf10
--- /dev/null
+++ b/src/themes/default-amp/css/main.scss
@@ -0,0 +1,24 @@
+@import 'vendor/flexboxgrid2';
+
+@import 'variables/variables';
+@import 'helpers/mixins';
+@import 'helpers/functions';
+@import 'base/base';
+@import 'base/flexbox-grid';
+@import 'base/global_vars';
+@import 'base/text';
+@import 'base/color';
+@import 'base/icons';
+
+@import 'layout/layout';
+@import 'layout/border';
+@import 'layout/margin';
+@import 'layout/padding';
+
+@import 'components/buttons';
+
+@import 'utilities/utilities';
+@import 'utilities/visibility';
+
+@import 'animations/animations';
+@import 'animations/transitions';
diff --git a/src/themes/default-amp/css/utilities/_utilities.scss b/src/themes/default-amp/css/utilities/_utilities.scss
new file mode 100755
index 0000000000..5347c1e876
--- /dev/null
+++ b/src/themes/default-amp/css/utilities/_utilities.scss
@@ -0,0 +1,28 @@
+.no-outline {
+  outline: 0;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+a.underline:after,
+a:not(.no-underline):hover:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: color(primary, $colors-border)
+}
+
+.no-underline:hover:after {
+  height: 0;
+}
+
+@media (hover: none) {
+  a:not(.no-underline):after {
+    display: none;
+  }
+}
diff --git a/src/themes/default-amp/css/utilities/_visibility.scss b/src/themes/default-amp/css/utilities/_visibility.scss
new file mode 100755
index 0000000000..fb4efbd368
--- /dev/null
+++ b/src/themes/default-amp/css/utilities/_visibility.scss
@@ -0,0 +1,35 @@
+[v-cloak],
+.hidden {
+  display: none;
+}
+
+.hidden-xs {
+  display: none;
+
+  @media only screen and (min-width:48em) {
+    display: inherit
+  }
+}
+
+.hidden-md {
+  @media only screen and (min-width:48em) {
+    display: none;
+  }
+}
+
+@media only screen and (min-width:768px) {
+  .visible-xs {
+    display: none;
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
diff --git a/src/themes/default-amp/css/variables/_colors.scss b/src/themes/default-amp/css/variables/_colors.scss
new file mode 100755
index 0000000000..16d4fa4d5c
--- /dev/null
+++ b/src/themes/default-amp/css/variables/_colors.scss
@@ -0,0 +1,62 @@
+// Colors
+// ======
+// @LandonSchropp's approach of naming color variables.
+// - http://davidwalsh.name/sass-color-variables-dont-suck
+// - http://www.color-blindness.com/color-name-hue/
+
+// General colors palette
+$colors: (
+  transparent: transparent,
+  black: #000,
+  white: #fff,
+  white-smoke: #f2f2f2,
+  gainsboro: #e0e0e0,
+  silver: #bdbdbd,
+  gray: #828282,
+  suva-gray: #8e8e8e,
+  matterhorn: #4f4f4f,
+  burnt-sienna: #eb5757,
+  buccaneer: #755,
+  forest-green: #308c14,
+  puerto-rico: #4dba87,
+  mine-shaft: #333
+);
+
+// Theme generic colors
+// Key: name of color
+// Value: color value or map with default, hover, focus color values
+$colors-theme: (
+  primary: (
+    default: map-get($colors, matterhorn),
+    hover: map-get($colors, matterhorn)
+  ),
+  secondary: (
+    default: map-get($colors, gray),
+    hover: map-get($colors, matterhorn),
+  ),
+  accent: (
+    default: map-get($colors, matterhorn),
+    hover: map-get($colors, black),
+  ),
+  tertiary: map-get($colors, silver),
+  success: map-get($colors, puerto-rico),
+  warning: map-get($colors, buccaneer),
+  error: map-get($colors, burnt-sienna)
+);
+
+$colors-border: (
+  primary: map-get($colors, silver),
+  secondary: map-get($colors, gainsboro),
+);
+
+$colors-background: (
+  primary: (
+    default: map-get($colors, white),
+    hover: map-get($colors, silver)
+  ),
+  secondary: (
+    default: map-get($colors, white-smoke),
+    hover: map-get($colors, gainsboro)
+  ),
+  tertiary: map-get($colors, suva-gray)
+);
diff --git a/src/themes/default-amp/css/variables/_variables.scss b/src/themes/default-amp/css/variables/_variables.scss
new file mode 100755
index 0000000000..1a5baa0a5f
--- /dev/null
+++ b/src/themes/default-amp/css/variables/_variables.scss
@@ -0,0 +1,5 @@
+// Default theme variables
+// =======================
+
+// Colors
+@import 'colors';
diff --git a/src/themes/default-amp/css/vendor/_flexboxgrid2.scss b/src/themes/default-amp/css/vendor/_flexboxgrid2.scss
new file mode 100755
index 0000000000..567c7dc1f6
--- /dev/null
+++ b/src/themes/default-amp/css/vendor/_flexboxgrid2.scss
@@ -0,0 +1,1209 @@
+.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/default-amp/index.js b/src/themes/default-amp/index.js
new file mode 100755
index 0000000000..b6a88a0450
--- /dev/null
+++ b/src/themes/default-amp/index.js
@@ -0,0 +1,12 @@
+import { setupMultistoreRoutes } from '@vue-storefront/store/lib/multistore'
+import config from 'config'
+import routes from './router'
+
+export default function (app, router, store) {
+  // if youre' runing multistore setup this is copying the routed above adding the 'storeCode' prefix to the urls and the names of the routes
+  // You can do it on your own and then be able to customize the components used for example for German storeView checkout
+  // To do so please execlude the desired storeView from the config.storeViews.mapStoreUrlsFor and map the urls by Your own like:
+  // { name: 'de-checkout', path: '/checkout', component: CheckoutCustomized },
+  setupMultistoreRoutes(config, router, routes)
+  router.addRoutes(routes)
+}
diff --git a/src/themes/default-amp/package.json b/src/themes/default-amp/package.json
new file mode 100755
index 0000000000..0ac135e7aa
--- /dev/null
+++ b/src/themes/default-amp/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@vue-storefront/theme-default-amp",
+  "version": "1.3.0",
+  "description": "Default AMP theme for Vue Storefront",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cd ../../../ && node core/scripts/server"
+  },
+  "author": "pkarw <pkarwatka@divante.pl> and contributors",
+  "license": "MIT",
+  "dependencies": {
+    "bodybuilder": "2.2.13",
+    "vue": "^2.5.17",
+    "vue-carousel": "^0.6.9",
+    "vue-no-ssr": "^0.2.2",
+    "vue-progressbar": "^0.7.5",
+    "vuelidate": "^0.6.2",
+    "vuex": "^3.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/src/themes/default-amp/pages/Category.vue b/src/themes/default-amp/pages/Category.vue
old mode 100644
new mode 100755
index 3451b6e547..bbcb607598
--- a/src/themes/default-amp/pages/Category.vue
+++ b/src/themes/default-amp/pages/Category.vue
@@ -11,12 +11,12 @@
     <div class="container pb60">
       <div class="row m0 pt15">
         <p class="col-xs-12 hidden-md m0 px20 cl-secondary">{{ productsCounter }} items</p>
-        <div class="col-md-9 pt20 px10 border-box products-list">
+        <div class="col-md-9 pt20 px10 border-box products-list block-center">
           <div v-if="isCategoryEmpty" class="hidden-xs">
             <h4 data-testid="noProductsInfo">{{ $t('No products found!') }}</h4>
             <p>{{ $t('Please change Your search criteria and try again. If still not finding anything relevant, please visit the Home page and try out some of our bestsellers!') }}</p>
           </div>
-          <product-listing columns="3" :products="products" />
+          <product-listing columns="4" :products="products" />
         </div>
       </div>
     </div>
@@ -25,10 +25,12 @@
 
 <script>
 import Category from '@vue-storefront/core/pages/Category' // theme = default/base theme
-import ProductListing from 'theme/components/core/ProductListing.vue'
 import Breadcrumbs from 'theme/components/core/Breadcrumbs.vue'
 // import builder from 'bodybuilder'
 
+// temporary(?) relative path
+import ProductListing from '../components/core/ProductListing.vue'
+
 export default {
   components: {
     ProductListing,
@@ -40,7 +42,10 @@ export default {
     }
   },
   asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
-    context.output.template = 'basic'
+    context.output.template = 'amp'
+    context.output.appendHead = (context) => {
+      return '<script async src="https://cdn.ampproject.org/v0.js"><' + '/script>'
+    }
     return new Promise((resolve, reject) => {
       store.state.category.current_product_query = Object.assign(store.state.category.current_product_query, { // this is just an example how can you modify the search criteria in child components
         sort: 'updated_at:desc'
@@ -150,4 +155,8 @@ export default {
   .close {
     margin-left: auto;
   }
+
+  .block-center {
+    margin: 0 auto;
+  }
 </style>
diff --git a/src/themes/default-amp/pages/Product.vue b/src/themes/default-amp/pages/Product.vue
old mode 100644
new mode 100755
index 0cabbc8ad5..74dc498af6
--- a/src/themes/default-amp/pages/Product.vue
+++ b/src/themes/default-amp/pages/Product.vue
@@ -4,12 +4,21 @@
       <div class="container">
         <section class="row m0 between-xs">
           <div class="col-xs-12 col-md-6 center-xs middle-xs image">
-            <product-gallery
-              :gallery="gallery"
-              :offline="offlineImage"
-              :configuration="configuration"
-              :product="product"
-            />
+            <amp-carousel
+              class="product-gallery"
+              width="450"
+              height="500"
+              layout="responsive"
+              type="slides">
+              <amp-img
+                class="product-image"
+                layout="responsive"
+                v-for="image in gallery"
+                :key="image.src"
+                :src="image.src"
+                :width="450"
+                :height="500"/>
+            </amp-carousel>
           </div>
           <div class="col-xs-12 col-md-5 data">
             <breadcrumbs
@@ -70,9 +79,14 @@
               :product="product"
             />
             <div class="row m0">
-              <a
-                class="col-xs-12 col-sm-4 col-md-6"
-              >{{ $t('Add to cart') }}</a>
+              <router-link class="button-full text-center block w-100 px10 py20 bg-cl-mine-shaft :bg-cl-th-secondary ripple weight-400 h4 cl-white sans-serif fs-medium col-xs-12 col-sm-4 col-md-6" :to="localizedRoute({
+                name: product.type_id + '-product',
+                params: {
+                  parentSku: product.parentSku ? product.parentSku : product.sku,
+                  slug: product.slug,
+                  childSku: product.sku
+                }
+              })">Check available sizes</router-link>
             </div>
           </div>
         </section>
@@ -108,17 +122,11 @@
         </div>
       </div>
     </section>
-    <related-products
-      type="upsell"
-      :heading="$t('We found other products you might like')"
-    />
-    <related-products type="related" />
   </div>
 </template>
 
 <script>
 import Product from '@vue-storefront/core/pages/Product'
-
 import RelatedProducts from 'theme/components/core/blocks/Product/Related.vue'
 import GenericSelector from 'theme/components/core/GenericSelector'
 import ColorSelector from 'theme/components/core/ColorSelector.vue'
@@ -167,11 +175,15 @@ export default {
     }
   },
   asyncData ({ store, route, context }) {
-    console.log('DUPIKA')
-    context.output.template = 'basic'
-    context.renderHead = (context) => {
-      return '<script async src="https://cdn.ampproject.org/v0.js"><' + '/script>'
+    context.output.template = 'amp'
+    context.output.appendHead = (context) => {
+      return '<script async src="https://cdn.ampproject.org/v0.js"><' + '/script>' +
+      '<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"><' + '/script>'
     }
+    // const oldRenderer = context.renderStyles
+    // context.renderStyles = (context) => {
+    //   return oldRenderer().replace('<style>', '<style amp-custom>')
+    // }
     return new Promise((resolve, reject) => {
       resolve()
     })
@@ -187,6 +199,8 @@ $color-tertiary: color(tertiary);
 $color-secondary: color(secondary);
 $color-white: color(white);
 $bg-secondary: color(secondary, $colors-background);
+$color-mine-shaft: color(mine-shaft);
+$color-suva-gray: color(suva-gray);
 
 .breadcrumbs {
   @media (max-width: 767px) {
@@ -200,6 +214,7 @@ $bg-secondary: color(secondary, $colors-background);
   font-weight: bold;
   padding-bottom: 15px;
 }
+
 .data {
   @media (max-width: 767px) {
     border-bottom: 1px solid $bg-secondary;
@@ -350,4 +365,70 @@ $bg-secondary: color(secondary, $colors-background);
   font-size: 14px;
 }
 
+.button-full {
+  min-width: 250px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.product-gallery .product-image {
+  opacity: 0.9;
+  mix-blend-mode: multiply;
+  vertical-align: top;
+}
+
+</style>
+
+<style lang="scss">
+
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-suva-gray: color(suva-gray);
+
+.amp-carousel-button-prev, .amp-carousel-button-next {
+  background: none;
+  outline: 0;
+  display: none;
+  cursor: pointer;
+  &:before {
+    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;
+    height: 100%;
+    line-height: 34px;
+    -webkit-font-smoothing: antialiased;
+    color: $color-suva-gray;
+  }
+}
+
+.product-gallery {
+  &:hover {
+      .amp-carousel-button-prev, .amp-carousel-button-next {
+        display: initial;
+      }
+  }
+}
+
+.amp-carousel-button-prev {
+  &:before {
+    content: 'keyboard_arrow_left';
+  }
+}
+
+.amp-carousel-button-next {
+  &:before {
+    content: 'keyboard_arrow_right';
+  }
+}
+
 </style>
diff --git a/src/themes/default-amp/router/index.js b/src/themes/default-amp/router/index.ts
old mode 100644
new mode 100755
similarity index 94%
rename from src/themes/default-amp/router/index.js
rename to src/themes/default-amp/router/index.ts
index 3ec5198c7f..450c465e46
--- a/src/themes/default-amp/router/index.js
+++ b/src/themes/default-amp/router/index.ts
@@ -2,20 +2,21 @@
 // uncomment if you want to modify the router e.g. add before/after hooks
 import Category from '../pages/Category.vue'
 import Product from '../pages/Product.vue'
+import { RouteConfig } from 'vue-router'
 
-import store from '@vue-storefront/store'
+import config from 'config'
 
-let routes = [
+let routes: RouteConfig[] = [
 ]
-if (!store.state.config.products.useShortCatalogUrls) {
+if (!config.products.useShortCatalogUrls) {
   routes = routes.concat([{ name: 'virtual-product-amp', path: '/amp/p/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'bundle-product-amp', path: '/amp/p/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'simple-product-amp', path: '/amp/p/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'downloadable-product-amp', path: '/amp/p/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'grouped-product-amp', path: '/amp/p/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'configurable-product-amp', path: '/amp/p/:parentSku/:slug/:childSku', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
-    { name: 'product-amp', path: '/amp/p/:parentSku/:slug/:childSku', component: Product, meta: { layout: 'minimal' } }])// :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
-  // { name: 'category', path: '/amp/c/:slug', component: Category }])
+    { name: 'product-amp', path: '/amp/p/:parentSku/:slug/:childSku', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
+    { name: 'category-amp', path: '/amp/c/:slug', component: Category }])
 } else {
   routes = routes.concat([{ name: 'virtual-product-amp', path: '/amp/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
     { name: 'bundle-product-amp', path: '/amp/:parentSku/:slug', component: Product, meta: { layout: 'minimal' } }, // :sku param can be marked as optional with ":sku?" (https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js#L16), but it requires a lot of work to adjust the rest of the site
diff --git a/src/themes/default-amp/webpack.config.js b/src/themes/default-amp/webpack.config.js
new file mode 100755
index 0000000000..f31eabdac6
--- /dev/null
+++ b/src/themes/default-amp/webpack.config.js
@@ -0,0 +1,4 @@
+// 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/index.basic.template.html b/src/themes/default/index.basic.template.html
index 541312bdcd..3d88763d1f 100755
--- a/src/themes/default/index.basic.template.html
+++ b/src/themes/default/index.basic.template.html
@@ -18,7 +18,8 @@
 				s.parentNode.insertBefore(wf, s);
 			})(); 
 		</script>
-    {{{ renderStyles() }}}
+		{{{ renderStyles() }}}
+		{{{ output.appendHead() }}}		
 	</head>
   <body>
 		<!--vue-ssr-outlet-->
diff --git a/src/themes/default/index.minimal.template.html b/src/themes/default/index.minimal.template.html
index 3508f20ede..14f95dd79b 100755
--- a/src/themes/default/index.minimal.template.html
+++ b/src/themes/default/index.minimal.template.html
@@ -4,6 +4,7 @@
   	{{{ meta.inject().title.text() }}}
   	{{{ meta.inject().meta.text() }}}
 		{{{ meta.inject().link.text() }}}
+		{{{ output.appendHead() }}}
 	</head>
   <body>
 		<!--vue-ssr-outlet-->
diff --git a/src/themes/default/index.template.html b/src/themes/default/index.template.html
index 668d86c85d..781b74ca1a 100755
--- a/src/themes/default/index.template.html
+++ b/src/themes/default/index.template.html
@@ -21,7 +21,8 @@
 			})(); 
 		</script>
 		{{{ renderResourceHints() }}}
-    {{{ renderStyles() }}}
+		{{{ renderStyles() }}}
+		{{{ output.appendHead() }}}		
 	</head>
   <body>
 		<!--vue-ssr-outlet-->