diff --git a/.gitignore b/.gitignore
index e474ab2..1d3ec91 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 
 .env
 build
+package-lock.json
 
 
 # compiled output
diff --git a/packages/hyper-ui/package.json b/packages/hyper-ui/package.json
index d1a9b58..bb19302 100644
--- a/packages/hyper-ui/package.json
+++ b/packages/hyper-ui/package.json
@@ -61,6 +61,7 @@
         "emoji-mart-vue": "^2.6.6",
         "howler": "^2.1.2",
         "moment": "^2.24.0",
+        "vue-awesome-swiper": "^3.1.3",
         "vue-multiselect": "^2.1.6",
         "vue-youtube": "^1.3.5"
     }
diff --git a/packages/hyper-ui/src/components/activity-block/index.vue b/packages/hyper-ui/src/components/activity-block/index.vue
index 9404bb8..adf886a 100644
--- a/packages/hyper-ui/src/components/activity-block/index.vue
+++ b/packages/hyper-ui/src/components/activity-block/index.vue
@@ -69,6 +69,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ProgressBar': () => import('../progress-bar').then(m => m.ProgressBar)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/add-friends/index.vue b/packages/hyper-ui/src/components/add-friends/index.vue
index cf26c6c..cf8d05b 100644
--- a/packages/hyper-ui/src/components/add-friends/index.vue
+++ b/packages/hyper-ui/src/components/add-friends/index.vue
@@ -142,6 +142,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         permission: {
             type: Boolean,
diff --git a/packages/hyper-ui/src/components/asset-importer/index.vue b/packages/hyper-ui/src/components/asset-importer/index.vue
index 7c26ac1..fcb224c 100644
--- a/packages/hyper-ui/src/components/asset-importer/index.vue
+++ b/packages/hyper-ui/src/components/asset-importer/index.vue
@@ -261,6 +261,7 @@
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Loading-bar': () => import('../../').then(m => m.Loading-bar),
         'Button': () => import('../../').then(m => m.Button),
         'NotificationInline': () => import('../../').then(m => m.NotificationInline),
diff --git a/packages/hyper-ui/src/components/asset/list/list-item.vue b/packages/hyper-ui/src/components/asset/list/list-item.vue
index e45c670..4fae369 100644
--- a/packages/hyper-ui/src/components/asset/list/list-item.vue
+++ b/packages/hyper-ui/src/components/asset/list/list-item.vue
@@ -39,6 +39,9 @@
 <script>
 export default {
     name: 'AssetListItem',
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         asset: {
             type: Object,
diff --git a/packages/hyper-ui/src/components/assets-explorer/index.vue b/packages/hyper-ui/src/components/assets-explorer/index.vue
index 27f5c5d..94042d7 100644
--- a/packages/hyper-ui/src/components/assets-explorer/index.vue
+++ b/packages/hyper-ui/src/components/assets-explorer/index.vue
@@ -23,20 +23,20 @@
 
                 <div class="filter-block d-flex justify-content-between align-items-center margin-bottom-20">
                     <div class="d-inline-flex align-items-center">
-                        <Dropdown-menu
+                        <DropdownMenu
                             class="margin-right-10"
                             title="FILTER BY PRODUCTS">
                             <List
                                 :items="selectableProducts"
                                 @click="item => item.selected = !item.selected" />
-                        </Dropdown-menu>
-                        <Dropdown-menu
+                        </DropdownMenu>
+                        <DropdownMenu
                             class="margin-right-10"
                             title="FILTER BY GENRE">
                             <List
                                 :items="selectableGenres"
                                 @click="item => item.selected = !item.selected" />
-                        </Dropdown-menu>
+                        </DropdownMenu>
                         <InputSearcher
                             v-model="phrase"
                             class="assets-explorer__input-searcher" />
@@ -172,17 +172,17 @@
 </template>
 
 <script>
-
 export default {
     name: 'AssetsExplorer',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ContentNavigation': () => import('../../').then(m => m.ContentNavigation),
         'Block': () => import('../../').then(m => m.Block),
         'HeadingBarFields': () => import('../../').then(m => m.HeadingBarFields),
         'Dropdown': () => import('../../').then(m => m.Dropdown),
         'InputSearcher': () => import('../../').then(m => m.InputSearcher),
         'AssetsList': () => import('../../').then(m => m.AssetsList),
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
+        'DropdownMenu': () => import('../../').then(m => m.DropdownMenu),
         'List': () => import('../../').then(m => m.List),
         'OptionTag': () => import('../../').then(m => m.OptionTag)
     },
diff --git a/packages/hyper-ui/src/components/benchmark/index.vue b/packages/hyper-ui/src/components/benchmark/index.vue
index 90a6c5c..257da4c 100644
--- a/packages/hyper-ui/src/components/benchmark/index.vue
+++ b/packages/hyper-ui/src/components/benchmark/index.vue
@@ -53,6 +53,9 @@
 <script>
 export default {
     name: 'Benchmark',
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         settings: Object
     },
diff --git a/packages/hyper-ui/src/components/broken-page/index.vue b/packages/hyper-ui/src/components/broken-page/index.vue
index 8eb57f8..fa15891 100644
--- a/packages/hyper-ui/src/components/broken-page/index.vue
+++ b/packages/hyper-ui/src/components/broken-page/index.vue
@@ -42,6 +42,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         isError: {
             type: Object,
diff --git a/packages/hyper-ui/src/components/browser-ui/index.vue b/packages/hyper-ui/src/components/browser-ui/index.vue
index 0aa492a..cbd36e9 100644
--- a/packages/hyper-ui/src/components/browser-ui/index.vue
+++ b/packages/hyper-ui/src/components/browser-ui/index.vue
@@ -64,6 +64,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Dropdown': () => import('../../').then(m => m.Dropdown)
     },
     data() {
diff --git a/packages/hyper-ui/src/components/buttons/favorite.vue b/packages/hyper-ui/src/components/buttons/favorite.vue
index d4d1926..8b4a2f1 100644
--- a/packages/hyper-ui/src/components/buttons/favorite.vue
+++ b/packages/hyper-ui/src/components/buttons/favorite.vue
@@ -33,6 +33,9 @@ export default {
             default: 'heart'
         }
     },
+    components:{
+        'Icon': () => import('../../').then(m => m.Icon),
+    },
     computed: {
         dynamicTitle() {
             const { target, active } = this
diff --git a/packages/hyper-ui/src/components/buttons/index.vue b/packages/hyper-ui/src/components/buttons/index.vue
index 61f05e1..b4c4a02 100644
--- a/packages/hyper-ui/src/components/buttons/index.vue
+++ b/packages/hyper-ui/src/components/buttons/index.vue
@@ -37,6 +37,8 @@
 import { Howl } from 'howler'
 
 export default {
+    components: {
+    },
     props: {
         tag: {
             type: String,
diff --git a/packages/hyper-ui/src/components/chat-new/content/welcome.vue b/packages/hyper-ui/src/components/chat-new/content/welcome.vue
index f7a1bb2..e0533bf 100644
--- a/packages/hyper-ui/src/components/chat-new/content/welcome.vue
+++ b/packages/hyper-ui/src/components/chat-new/content/welcome.vue
@@ -4,7 +4,7 @@
             Welcome to ChanelName!
         </div>
         <div class="welcome-logo">
-            <img src="../../../static/img/logo.png">
+            <img src="/img/logo.png">
         </div>
         <div class="chat-group__welcome-action">
             <ul>
diff --git a/packages/hyper-ui/src/components/collection/list.vue b/packages/hyper-ui/src/components/collection/list.vue
index daad6fa..79c9fc3 100644
--- a/packages/hyper-ui/src/components/collection/list.vue
+++ b/packages/hyper-ui/src/components/collection/list.vue
@@ -91,6 +91,7 @@ export default {
         position: relative;
         backdrop-filter: blur(2px);
         display: flex;
+        flex-direction: column;
     }
     .collection-list__header{
         display: flex;
diff --git a/packages/hyper-ui/src/components/community/comment-v2.vue b/packages/hyper-ui/src/components/community/comment-v2.vue
index 9de5267..e4242e5 100644
--- a/packages/hyper-ui/src/components/community/comment-v2.vue
+++ b/packages/hyper-ui/src/components/community/comment-v2.vue
@@ -52,9 +52,11 @@ import VueEmojiReact from 'vue-emoji-react'
 
 export default {
     components: {
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply),
+        'DropdownMenu': () => import('../../').then(m => m.Dropdown4),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply),
+        'Button': () => import('../../').then(m => m.Button),
         'ButtonArrows': () => import('../../').then(m => m.ButtonArrows),
+        'Img': () => import('../../').then(m => m.Img),
         'EmojiPicker': VueEmojiReact
     },
     props: {
diff --git a/packages/hyper-ui/src/components/community/comment.vue b/packages/hyper-ui/src/components/community/comment.vue
index 0cbea6f..61238cc 100644
--- a/packages/hyper-ui/src/components/community/comment.vue
+++ b/packages/hyper-ui/src/components/community/comment.vue
@@ -16,7 +16,7 @@
             <div
                 class="comment-container"
                 :class="{ 'w-100' : !rate }">
-                <Dropdown-menu
+                <DropdownMenu
                     dropPosition="right"
                     style="right: 5px; top: 10px;" />
                 <div class="comment-content">
@@ -45,13 +45,13 @@
 </template>
 
 <script>
-import moment from 'moment'
 
 export default {
     name: 'Comment',
     components: {
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply),
+        'DropdownMenu': () => import('../../').then(m => m.DropdownPost),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply),
+        'Img': () => import('../../').then(m => m.Img),
         'ButtonArrows': () => import('../../').then(m => m.ButtonArrows)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/community/post-item.vue b/packages/hyper-ui/src/components/community/post-item.vue
index a81e145..1dfcca4 100644
--- a/packages/hyper-ui/src/components/community/post-item.vue
+++ b/packages/hyper-ui/src/components/community/post-item.vue
@@ -75,11 +75,13 @@
 
 <script>
 import moment from 'moment'
+import a from './../../index'
 
 export default {
     components: {
-        'PostComment': import('../../').then(m => m.PostComment),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply)
+        'Img': () => import('./../../index').then(m => m.Img),
+        'PostComment': () => import('../../').then(m => m.ProductCommunityComment),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply)
     },
     props: {
         id: {
diff --git a/packages/hyper-ui/src/components/contribute/form.vue b/packages/hyper-ui/src/components/contribute/form.vue
index f062705..7e70444 100644
--- a/packages/hyper-ui/src/components/contribute/form.vue
+++ b/packages/hyper-ui/src/components/contribute/form.vue
@@ -40,8 +40,14 @@ export default {
             type: Boolean,
             default: false
         },
-        value: Number,
-        defaultValue: Number,
+        value: {
+            type: [Number, String],
+            default: 0
+        },
+        defaultValue: {
+            type: [Number, String],
+            default: 0
+        },
         currency: String
     },
     data() {
diff --git a/packages/hyper-ui/src/components/contribute/pledge.vue b/packages/hyper-ui/src/components/contribute/pledge.vue
index e671065..a200969 100644
--- a/packages/hyper-ui/src/components/contribute/pledge.vue
+++ b/packages/hyper-ui/src/components/contribute/pledge.vue
@@ -79,7 +79,7 @@ export default {
             default: '$'
         },
         minPrice: {
-            type: String,
+            type: [Number, String],
             default: null
         },
         title: {
diff --git a/packages/hyper-ui/src/components/contributor-box/index.vue b/packages/hyper-ui/src/components/contributor-box/index.vue
index 179705b..a560b15 100644
--- a/packages/hyper-ui/src/components/contributor-box/index.vue
+++ b/packages/hyper-ui/src/components/contributor-box/index.vue
@@ -44,6 +44,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ProgressBar': () => import('../../').then(m => m.ProgressBar),
         'Checkbox': () => import('../../').then(m => m.Checkbox)
     },
diff --git a/packages/hyper-ui/src/components/curator-review/index.vue b/packages/hyper-ui/src/components/curator-review/index.vue
index 077272f..fc0e099 100644
--- a/packages/hyper-ui/src/components/curator-review/index.vue
+++ b/packages/hyper-ui/src/components/curator-review/index.vue
@@ -64,7 +64,8 @@ export default {
     components: {
         'Author': () => import('../../').then(m => m.Author),
         'RatingStars': () => import('../../').then(m => m.RatingStars),
-        'Button': () => import('../../').then(m => m.Button)
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {
         review: {
diff --git a/packages/hyper-ui/src/components/curator-reviews/index.vue b/packages/hyper-ui/src/components/curator-reviews/index.vue
index fbf8782..8084185 100644
--- a/packages/hyper-ui/src/components/curator-reviews/index.vue
+++ b/packages/hyper-ui/src/components/curator-reviews/index.vue
@@ -21,42 +21,45 @@
 </template>
 
 <script>
-    export default {
-        components: {
-            'HeadingBar': () => import('../../').then(m => m.HeadingBar),
-            'CuratorReview': () => import('../../').then(m => m.CuratorReview)
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'HeadingBar': () => import('../../').then(m => m.HeadingBar),
+        'CuratorReview': () => import('../../').then(m => m.CuratorReview),
+        'Swiper': () => import('../../').then(m => m.Swiper),
+        'SwiperSlide': () => import('../../').then(m => m.SwiperSlide),
+    },
+    props: {
+        reviews: {
+            type: Array,
+            require: true
         },
-        props: {
-            reviews: {
-                type: Array,
-                require: true
-            },
-            maxPerView: {
-                type: Number,
-                default: 3
-            }
-        },
-        data() {
-            return {
-                sliderOptions: {
-                    slidesPerView: this.maxPerView,
-                    spaceBetween: 15
-                }
-            }
-        },
-        computed: {
-            slider() {
-                return this.$refs.slider.swiper
+        maxPerView: {
+            type: Number,
+            default: 3
+        }
+    },
+    data() {
+        return {
+            sliderOptions: {
+                slidesPerView: this.maxPerView,
+                spaceBetween: 15
             }
-        },
-        methods: {
-            showArrowsState(el, count) {
-                if (el.length > count) {
-                    return true
-                }
-                return false
+        }
+    },
+    computed: {
+        slider() {
+            return this.$refs.slider.swiper
+        }
+    },
+    methods: {
+        showArrowsState(el, count) {
+            if (el.length > count) {
+                return true
             }
+            return false
         }
     }
+}
 </script>
 
diff --git a/packages/hyper-ui/src/components/download-block/index.vue b/packages/hyper-ui/src/components/download-block/index.vue
index 15655ff..47c77bf 100644
--- a/packages/hyper-ui/src/components/download-block/index.vue
+++ b/packages/hyper-ui/src/components/download-block/index.vue
@@ -9,7 +9,7 @@
                     alt="Logo" />
                 <Img
                     v-if="showPreview"
-                    src="static/img/download-block-bg.png"
+                    src="/img/download-block-bg.png"
                     class="absolute_img"
                     alt="Logo" />
             </div>
@@ -74,6 +74,9 @@
 
 <script>
 export default {
+    components :{
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         showPreview: {
             type: Boolean,
diff --git a/packages/hyper-ui/src/components/download-popup/index.vue b/packages/hyper-ui/src/components/download-popup/index.vue
index ac78918..0a35b29 100644
--- a/packages/hyper-ui/src/components/download-popup/index.vue
+++ b/packages/hyper-ui/src/components/download-popup/index.vue
@@ -34,6 +34,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup),
         'DownloadBlock': () => import('../../').then(m => m.DownloadBlock)
     },
diff --git a/packages/hyper-ui/src/components/draggable-video/index.vue b/packages/hyper-ui/src/components/draggable-video/index.vue
index a35390a..d32de59 100644
--- a/packages/hyper-ui/src/components/draggable-video/index.vue
+++ b/packages/hyper-ui/src/components/draggable-video/index.vue
@@ -61,6 +61,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Draggable': () => import('../../').then(m => m.Draggable)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/emoji/index.vue b/packages/hyper-ui/src/components/emoji/index.vue
index 0cebe81..2a243e3 100644
--- a/packages/hyper-ui/src/components/emoji/index.vue
+++ b/packages/hyper-ui/src/components/emoji/index.vue
@@ -52,6 +52,7 @@ import { Picker, Emoji } from 'emoji-mart-vue'
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'EmojiPicker': Picker,
         'Emoji': Emoji
     },
diff --git a/packages/hyper-ui/src/components/footer/index.vue b/packages/hyper-ui/src/components/footer/index.vue
index b416fd7..7ebfed8 100644
--- a/packages/hyper-ui/src/components/footer/index.vue
+++ b/packages/hyper-ui/src/components/footer/index.vue
@@ -154,55 +154,56 @@
 </template>
 
 <script>
-    export default {
-        components: {
-            'SidebarMenuItem': () => import('../../').then(m => m.SidebarMenuItem),
-            'SidebarMenu': () => import('../../').then(m => m.SidebarMenu),
-            'SocialLink': () => import('../../').then(m => m.SocialLink)
-        },
-        data() {
-            return {
-                sliderOptions: {
-                    slidesPerView: 8,
-                    spaceBetween: 40,
-                    loop: true,
-                    breakpoints: {
-                        1920: {
-                            slidesPerView: 10,
-                            spaceBetween: 40
-                        },
-                        1440: {
-                            slidesPerView: 8,
-                            spaceBetween: 40
-                        },
-                        1368: {
-                            slidesPerView: 6,
-                            spaceBetween: 30
-                        },
-                        1024: {
-                            slidesPerView: 4,
-                            spaceBetween: 20
-                        },
-                        768: {
-                            slidesPerView: 2,
-                            spaceBetween: 10
-                        }
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'SidebarMenuItem': () => import('../../').then(m => m.SidebarMenuItem),
+        'SidebarMenu': () => import('../../').then(m => m.SidebarMenu),
+        'SocialLink': () => import('../../').then(m => m.SocialLink)
+    },
+    data() {
+        return {
+            sliderOptions: {
+                slidesPerView: 8,
+                spaceBetween: 40,
+                loop: true,
+                breakpoints: {
+                    1920: {
+                        slidesPerView: 10,
+                        spaceBetween: 40
+                    },
+                    1440: {
+                        slidesPerView: 8,
+                        spaceBetween: 40
+                    },
+                    1368: {
+                        slidesPerView: 6,
+                        spaceBetween: 30
+                    },
+                    1024: {
+                        slidesPerView: 4,
+                        spaceBetween: 20
+                    },
+                    768: {
+                        slidesPerView: 2,
+                        spaceBetween: 10
                     }
-                },
-                logos: [
-                    'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Teradata_logo_2018.png/1600px-Teradata_logo_2018.png',
-                    'http://www.pngpix.com/wp-content/uploads/2016/07/PNGPIX-COM-Southern-Company-Logo-PNG-Transparent.png',
-                    'http://arckpack.com.br/assets/images/arckpack-logo.gif',
-                    'https://vignette.wikia.nocookie.net/logopedia/images/7/79/TVS_Motor_Company_Logo.png/revision/latest/scale-to-width-down/640?cb=20121212235421',
-                    'http://www.s3infotech.in/images/portfolio/2000px-Fujitsu-Logo.svg.png',
-                    'http://www.s3infotech.in/images/portfolio/sd-logo.png',
-                    'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Komatsu_company_logos.svg/1280px-Komatsu_company_logos.svg.png',
-                    'https://agrobiz.net/static-files/img/goods/0a/d7/prokladka-87553152-107783.png',
-                    'http://skladtechnika.ru/pics/images/informations/articles/Mitsubishi_logo.gif'
-                ]
-            }
+                }
+            },
+            logos: [
+                'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Teradata_logo_2018.png/1600px-Teradata_logo_2018.png',
+                'http://www.pngpix.com/wp-content/uploads/2016/07/PNGPIX-COM-Southern-Company-Logo-PNG-Transparent.png',
+                'http://arckpack.com.br/assets/images/arckpack-logo.gif',
+                'https://vignette.wikia.nocookie.net/logopedia/images/7/79/TVS_Motor_Company_Logo.png/revision/latest/scale-to-width-down/640?cb=20121212235421',
+                'http://www.s3infotech.in/images/portfolio/2000px-Fujitsu-Logo.svg.png',
+                'http://www.s3infotech.in/images/portfolio/sd-logo.png',
+                'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Komatsu_company_logos.svg/1280px-Komatsu_company_logos.svg.png',
+                'https://agrobiz.net/static-files/img/goods/0a/d7/prokladka-87553152-107783.png',
+                'http://skladtechnika.ru/pics/images/informations/articles/Mitsubishi_logo.gif'
+            ]
         }
     }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/hyper-ui/src/components/frequently-traded-assets/index.vue b/packages/hyper-ui/src/components/frequently-traded-assets/index.vue
index 0b5dc12..280f9df 100644
--- a/packages/hyper-ui/src/components/frequently-traded-assets/index.vue
+++ b/packages/hyper-ui/src/components/frequently-traded-assets/index.vue
@@ -36,9 +36,8 @@
 export default {
     name: 'FrequentlyTradedAssets',
     components: {
-        'Block': () => import('../../').then(m => m.Block),
         'Button': () => import('../../').then(m => m.Button),
-        'Img': () => import('../../').then(m => m.Img),
+        'Block': () => import('../../').then(m => m.Block)
     },
     props: {
         items: {
diff --git a/packages/hyper-ui/src/components/game-card/index.vue b/packages/hyper-ui/src/components/game-card/index.vue
index 58f02fa..4e47675 100644
--- a/packages/hyper-ui/src/components/game-card/index.vue
+++ b/packages/hyper-ui/src/components/game-card/index.vue
@@ -39,6 +39,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
     },
     filters: {
         currencySign(cur_name) {
diff --git a/packages/hyper-ui/src/components/game-installer/index.vue b/packages/hyper-ui/src/components/game-installer/index.vue
index bef2ad5..c1e79c3 100644
--- a/packages/hyper-ui/src/components/game-installer/index.vue
+++ b/packages/hyper-ui/src/components/game-installer/index.vue
@@ -114,7 +114,8 @@
 export default {
     components: {
         'BasicPopup': () => import('../../').then(m => m.BasicPopup),
-        'Dropdown': () => import('../../').then(m => m.Dropdown)
+        'Dropdown': () => import('../../').then(m => m.Dropdown),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {
         activated: {
diff --git a/packages/hyper-ui/src/components/game-library/card-item.vue b/packages/hyper-ui/src/components/game-library/card-item.vue
index b8dde0f..4ccb833 100644
--- a/packages/hyper-ui/src/components/game-library/card-item.vue
+++ b/packages/hyper-ui/src/components/game-library/card-item.vue
@@ -112,6 +112,7 @@
 export default {
     name: 'GameLibraryItem',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Dropdown': () => import('../../').then(m => m.Dropdown),
         'ShareList': () => import('../../').then(m => m.ShareList),
         'LoadingBarCircle': () => import('../../').then(m => m.LoadingBarCircle)
diff --git a/packages/hyper-ui/src/components/game-series/game-description.vue b/packages/hyper-ui/src/components/game-series/game-description.vue
index 48ac202..97d1acc 100644
--- a/packages/hyper-ui/src/components/game-series/game-description.vue
+++ b/packages/hyper-ui/src/components/game-series/game-description.vue
@@ -51,14 +51,15 @@
 </template>
 
 <script>
-import moment from 'moment'
+import moment from 'moment';
 
 export default {
     components: {
         'Button': () => import('../../').then(m => m.Button),
         'Swiper': () => import('../../').then(m => m.Swiper),
         'SwiperSlide': () => import('../../').then(m => m.SwiperSlide),
-        'Tags': () => import('../../').then(m => m.Tags)
+        'Tags': () => import('../../').then(m => m.Tags),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {
         id: Number,
diff --git a/packages/hyper-ui/src/components/game-series/game-includes-list.vue b/packages/hyper-ui/src/components/game-series/game-includes-list.vue
index 92f3b84..f796203 100644
--- a/packages/hyper-ui/src/components/game-series/game-includes-list.vue
+++ b/packages/hyper-ui/src/components/game-series/game-includes-list.vue
@@ -10,7 +10,7 @@
                 :key="item.id"
                 class="game-includes__item-container"
                 :style="{ width: 'calc(100% / ' + showNumber + ')'}">
-                <IncludesItem
+                <GameIncludesItem
                     :id="item.id"
                     :name="item.name"
                     :developer="item.developer"
@@ -37,7 +37,7 @@
 <script>
 export default {
     components: {
-        'IncludesItem': () => import('../../').then(m => m.IncludesItem),
+        'GameIncludesItem': () => import('../../').then(m => m.GameIncludesItem),
         'LoadMore': () => import('../../').then(m => m.LoadMore)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/games-explorer/index.vue b/packages/hyper-ui/src/components/games-explorer/index.vue
index 394e2e7..8de8cad 100644
--- a/packages/hyper-ui/src/components/games-explorer/index.vue
+++ b/packages/hyper-ui/src/components/games-explorer/index.vue
@@ -152,6 +152,8 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'Block': () => import('../../').then(m => m.Block),
         'HeadingBar': () => import('../../').then(m => m.HeadingBar),
         'HeadingBarFields': () => import('../../').then(m => m.HeadingBarFields),
         'InputSearcher': () => import('../../').then(m => m.InputSearcher),
diff --git a/packages/hyper-ui/src/components/games-list/list-item.vue b/packages/hyper-ui/src/components/games-list/list-item.vue
index 48c1d3a..ef3a243 100644
--- a/packages/hyper-ui/src/components/games-list/list-item.vue
+++ b/packages/hyper-ui/src/components/games-list/list-item.vue
@@ -140,6 +140,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         name: {
             type: String,
diff --git a/packages/hyper-ui/src/components/gift/index.vue b/packages/hyper-ui/src/components/gift/index.vue
index adb71a5..6804e5d 100644
--- a/packages/hyper-ui/src/components/gift/index.vue
+++ b/packages/hyper-ui/src/components/gift/index.vue
@@ -37,15 +37,18 @@
 </template>
 
 <script>
-    export default {
-        props: {
-            status: String,
-            user: String,
-            date: String,
-            text: String,
-            gift: Object
-        }
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
+    props: {
+        status: String,
+        user: String,
+        date: String,
+        text: String,
+        gift: Object
     }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/hyper-ui/src/components/global-search/index.vue b/packages/hyper-ui/src/components/global-search/index.vue
index c63da64..79940de 100644
--- a/packages/hyper-ui/src/components/global-search/index.vue
+++ b/packages/hyper-ui/src/components/global-search/index.vue
@@ -37,13 +37,13 @@
                                 </span>
                                 <span class="enter-icon">
                                     ENTER
-                                    <img src="../../static/img/icons/enter-arrow.png">
+                                    <img src="/img/icons/enter-arrow.png">
                                 </span>
                             </a>
                         </div>
                     </div>
                     <div class="keyboard-nav-info">
-                        <img src="../../static/img/icons/keyboard-arrows.png">
+                        <img src="/img/icons/keyboard-arrows.png">
                         Use arrows to select
                     </div>
                 </div>
diff --git a/packages/hyper-ui/src/components/headers/basic.vue b/packages/hyper-ui/src/components/headers/basic.vue
index 3031f84..d5b44e3 100644
--- a/packages/hyper-ui/src/components/headers/basic.vue
+++ b/packages/hyper-ui/src/components/headers/basic.vue
@@ -213,7 +213,7 @@
                             <DropdownMenu
                                 class="ml-4 account-menu"
                                 style="z-index: 12"
-                                name="Ololo"
+                                name=""
                                 @show="onShowMenu"
                                 @hide="onHideMenu">
                                 <template slot="title">
diff --git a/packages/hyper-ui/src/components/heading-bar/index.vue b/packages/hyper-ui/src/components/heading-bar/index.vue
index b06aa35..6415487 100644
--- a/packages/hyper-ui/src/components/heading-bar/index.vue
+++ b/packages/hyper-ui/src/components/heading-bar/index.vue
@@ -117,7 +117,7 @@ export default {
         width: 100%;
         justify-content: space-between;
         border-bottom: 2px solid #fff;
-        margin-bottom: 20px;
+        // margin-bottom: 20px;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
diff --git a/packages/hyper-ui/src/components/help/article-item.vue b/packages/hyper-ui/src/components/help/article-item.vue
index 76ccd32..a024e28 100644
--- a/packages/hyper-ui/src/components/help/article-item.vue
+++ b/packages/hyper-ui/src/components/help/article-item.vue
@@ -12,7 +12,10 @@
 <script>
 export default {
     name: 'ArticleListItem',
-    props: ['to', 'link']
+    props: ['to', 'link'],
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    }
 }
 </script>
 
diff --git a/packages/hyper-ui/src/components/help/simple-item.vue b/packages/hyper-ui/src/components/help/simple-item.vue
index 065f3c5..f3dbd73 100644
--- a/packages/hyper-ui/src/components/help/simple-item.vue
+++ b/packages/hyper-ui/src/components/help/simple-item.vue
@@ -12,7 +12,10 @@
 <script>
 export default {
     name: 'SimpleListItem',
-    props: ['to', 'link']
+    props: ['to', 'link'],
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    }
 }
 </script>
 
diff --git a/packages/hyper-ui/src/components/help/topic-item.vue b/packages/hyper-ui/src/components/help/topic-item.vue
index bf7fb72..769051d 100644
--- a/packages/hyper-ui/src/components/help/topic-item.vue
+++ b/packages/hyper-ui/src/components/help/topic-item.vue
@@ -15,7 +15,10 @@
 <script>
 export default {
     name: 'TopicListItem',
-    props: ['link', 'to', 'icon', 'size']
+    props: ['link', 'to', 'icon', 'size'],
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    }
 }
 </script>
 
diff --git a/packages/hyper-ui/src/components/icon/index.vue b/packages/hyper-ui/src/components/icon/index.vue
index 45be700..dbc3ff0 100644
--- a/packages/hyper-ui/src/components/icon/index.vue
+++ b/packages/hyper-ui/src/components/icon/index.vue
@@ -1,6 +1,5 @@
 <script>
 export default {
-    name: 'Icon',
     props: {
         name: {
             type: String,
diff --git a/packages/hyper-ui/src/components/idea-card/index.vue b/packages/hyper-ui/src/components/idea-card/index.vue
index a8c7363..5d90048 100644
--- a/packages/hyper-ui/src/components/idea-card/index.vue
+++ b/packages/hyper-ui/src/components/idea-card/index.vue
@@ -46,6 +46,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
     },
     filters: {
         currencySign(cur_name) {
diff --git a/packages/hyper-ui/src/components/infinite-content/index.vue b/packages/hyper-ui/src/components/infinite-content/index.vue
deleted file mode 100644
index 96c08da..0000000
--- a/packages/hyper-ui/src/components/infinite-content/index.vue
+++ /dev/null
@@ -1,786 +0,0 @@
-<template>
-    <div>
-        <template
-            v-for="(item, index) in sliced"
-            v-if="sliced">
-            <transition-group
-                :key="`level-1-${index}`"
-                name="slideUp">
-                <div
-                    :key="`level-2-${index}`"
-                    @mouseover="activeElementIndex = index">
-                    <div
-                        v-if="item.type === 'frontpageProduct'"
-                        class="row justify-content-center">
-                        <div class="col-12">
-                            <div class="frontpage-product">
-                                <Vote
-                                    v-if="activeElementIndex === index"
-                                    v-access="'rating.read'"
-                                    :votes="item.data.meta.rating" />
-                                <div class="row">
-                                    <div
-                                        v-if="item.data.meta.images"
-                                        class="col-12 col-lg-6 frontpage-product__slider">
-                                        <Img
-                                            :src="item.data.meta.images.mediumTile"
-                                            :data-link="`/product/${item.data.id}`" />
-                                    </div>
-                                    <div class="col-12 col-lg-6 frontpage-product__info">
-                                        <h2>
-                                            <nuxt-link :to="`/product/${item.data.id}`">
-                                                {{ item.data.name }}
-                                            </nuxt-link>
-                                        </h2>
-                                        <p>{{ item.data.meta.shortDescription }}</p>
-                                        <Tags v-if="item.data.meta.developerTags" :tags="item.data.meta.developerTags" />
-                                        <div class="frontpage-product__footer">
-                                            <div
-                                                v-if="item.data.meta.price"
-                                                class="price-list">
-                                                <div
-                                                    v-if="item.data.meta.oldPrice"
-                                                    class="price oldPrice">
-                                                    {{ item.data.meta.oldPrice | convertCurrency }}
-                                                </div>
-                                                <div class="price">
-                                                    {{ item.data.meta.price | convertCurrency }}
-                                                </div>
-                                            </div>
-                                            <Button
-                                                v-if="item.data.meta.price"
-                                                status="success">
-                                                Proceed to Purchase
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'featuredProductGallery'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <Banner
-                                v-if="item.data.slides"
-                                class="margin-bottom-30"
-                                :slides="item.data.slides" />
-
-                            <Block
-                                v-else
-                                class="margin-bottom-30"
-                                :title="item.data.title"
-                                :noGutter="true"
-                                :onlyContentBg="true"
-                                :bgGradient="true">
-                                <div v-if="!item.data.products.length">
-                                    Nothing could be found. Want to <Button
-                                        status="plain"
-                                        @click="$store.commit('application/activeModal', 'comingSoon')">
-                                        Check for updates
-                                    </Button>?
-                                </div>
-                            </Block>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'productSlider'"
-                        class="row">
-                        <div class="col-12">
-                            <ProductSlider
-                                v-if="item.data.products.length"
-                                :dynamic="true"
-                                :products="item.data.products"
-                                :title="item.data.title"
-                                :maxPerView="item.data.slidesPerView" />
-
-                            <Block
-                                v-else
-                                class="margin-bottom-30"
-                                :title="item.data.title"
-                                :noGutter="true"
-                                :onlyContentBg="true"
-                                :bgGradient="true">
-                                <div v-if="!item.data.products.length">
-                                    Nothing could be found. Want to <Button
-                                        status="plain"
-                                        @click="$store.commit('application/activeModal', 'comingSoon')">
-                                        Check for updates
-                                    </Button>?
-                                </div>
-                            </Block>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'collectionsList'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <CollectionList
-                                :title="`Get Started` | translate"
-                                :description="`Start building your collection today, share it and save it!` | translate"
-                                :collections="item.data.collectionsList" />
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'banners'"
-                        class="row align-items-stretch">
-                        <div class="col-12 col-md-5 col-lg-4 margin-bottom-30">
-                            <SimpleBanner
-                                imgSrc="/img/banners/banner-1.png"
-                                to="/battlepass/1">
-                                <h4 class="text-yellow">
-                                    summer block
-                                </h4>
-                                <h3>Championship</h3>
-                                <p>You won't believe the prize!</p>
-                            </SimpleBanner>
-                        </div>
-                        <div class="col-12 col-md-7 col-lg-8 margin-bottom-30">
-                            <SimpleBanner
-                                imgSrc="/img/banners/banner-2.png"
-                                to="/curators">
-                                <div class="align-items-start">
-                                    <h3 class="text-yellow margin-bottom-5">
-                                        top<br>curators
-                                    </h3>
-                                    <h4 class="text-capitalize">
-                                        What are they<br>playing?
-                                    </h4>
-                                </div>
-                            </SimpleBanner>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'banners'"
-                        class="row margin-bottom-50 margin-top-20 align-items-stretch">
-                        <div
-                            v-for="(banner, index) in item.data.banners"
-                            :key="index"
-                            :class="banner.class">
-                            <SimpleBanner
-                                v-if="item.type == 3"
-                                :imgSrc="banner.image"
-                                :link="banner.link">
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <div>
-                                        <h3 class="text-yellow">
-                                            {{ banner.title }}
-                                        </h3>
-                                        <p>{{ banner.subtitle }}</p>
-                                    </div>
-                                    <div class="banner-action">
-                                        <Button
-                                            status="info"
-                                            iconHide
-                                            size="lg">
-                                            {{ banner.buttonText }}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </SimpleBanner>
-                            <SimpleBanner
-                                v-if="item.type == 4"
-                                :imgSrc="banner.imagee"
-                                :link="banner.link">
-                                <h3 class="text-yellow margin-bottom-5">
-                                    {{ banner.title }}
-                                </h3>
-                                <p>{{ banner.subtitle }}</p>
-                            </SimpleBanner>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'productNews'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <div class="home-tabs">
-                                <NewsListNavigation
-                                    :list="item.data.headings" />
-                                <div class="tab-content">
-                                    <NewsListArticles
-                                        v-for="(list, index) in item.data.lists"
-                                        :key="index"
-                                        :articles="list"
-                                        :index="index" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'curatorReviews'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <Block
-                                :noGutter="true"
-                                :bgGradient="true"
-                                :onlyContentBg="true">
-                                <HeadingBar
-                                    slot="title"
-                                    class="mb-0"
-                                    :name="item.data.title"
-                                    showArrows
-                                    showActions
-                                    :activeIndex="curatorsIndex"
-                                    :itemsLength="item.data.reviews.length"
-                                    @prevClick="swiperCurators.slidePrev(); updateIndex('curatorsIndex', -1, item.data.reviews.length)"
-                                    @nextClick="swiperCurators.slideNext(); updateIndex('curatorsIndex', 1, item.data.reviews.length)" />
-                                <Swiper
-                                    ref="swiper"
-                                    :options="item.data.options">
-                                    <SwiperSlide
-                                        v-for="(review, index) in item.data.reviews"
-                                        :key="index">
-                                        <CuratorReview :review="review" />
-                                    </SwiperSlide>
-                                </Swiper>
-                                <div v-if="!item.data.reviews.length">
-                                    Nothing could be found. Want to <Button
-                                        status="plain"
-                                        @click="$store.commit('application/activeModal', 'comingSoon')">
-                                        Check for updates
-                                    </Button>?
-                                </div>
-                            </Block>
-                        </div>
-                    </div>
-
-                    <GamesExplorer
-                        v-if="item.type === 'gamesExplorer'"
-                        :products="item.data.products" />
-
-                    <AssetsExplorer
-                        v-if="item.type === 'assetGrid'"
-                        :assets="assets" />
-
-                    <div
-                        v-if="item.type === 'trendingProjectsRow'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <Block
-                                :noGutter="true"
-                                :bgGradient="true"
-                                :onlyContentBg="true">
-                                <HeadingBar
-                                    slot="title"
-                                    class="mb-0"
-                                    :name="item.data.title"
-                                    :showArrows="item.data.projects.length > 4"
-                                    showActions
-                                    @prevClick="swiperProjects.slidePrev()"
-                                    @nextClick="swiperProjects.slideNext()" />
-                                <Swiper
-                                    ref="swiper"
-                                    :options="item.data.options">
-                                    <SwiperSlide
-                                        v-for="(project, index) in item.data.projects"
-                                        :key="index">
-                                        <ProjectCard
-                                            :id="project.id"
-                                            class="p-2"
-                                            :image="project.images.mediumTile"
-                                            :description="project.description"
-                                            :funds="project.funds"
-                                            :parentName="project.product && project.product.name"
-                                            :parentDeveloper="project.product && project.product.developer"
-                                            :parentImage="project.product && project.product.images.mediumTile" />
-                                    </SwiperSlide>
-                                </Swiper>
-                                <div v-if="!item.data.projects.length">
-                                    Nothing could be found. Want to <Button
-                                        status="plain"
-                                        @click="$store.commit('application/activeModal', 'comingSoon')">
-                                        Check for updates
-                                    </Button>?
-                                </div>
-                            </Block>
-                        </div>
-                    </div>
-
-                    <div v-if="item.type === 'realmsRow'">
-                        <Swiper
-                            :options="item.data.options"
-                            class="padding-10">
-                            <SwiperSlide
-                                v-for="(realm, index) in item.data.realms"
-                                :key="index">
-                                <CollectionItem :item="realm" />
-                            </SwiperSlide>
-                        </Swiper>
-
-                        <Block
-                            :noGutter="true"
-                            :bgGradient="true"
-                            :onlyContentBg="true">
-                            <HeadingBar
-                                slot="title"
-                                class="mb-0"
-                                :name="item.data.title"
-                                :showArrows="true"
-                                :showActions="true"
-                                @prevClick="swiperRealms.slidePrev()"
-                                @nextClick="swiperRealms.slideNext()" />
-                            <Swiper
-                                :ref="swiper"
-                                :options="item.data.options">
-                                <SwiperSlide
-                                    v-for="(realm, index) in item.data.realms"
-                                    :key="index">
-                                    <Button :to="`/realm/${realm.id}`">
-                                        {{ realm.name }}
-                                    </Button>
-                                </SwiperSlide>
-                            </Swiper>
-                            <p v-if="!item.data.realms.length">
-                                Nothing could be found. Want to <Button
-                                    status="plain"
-                                    @click="$store.commit('application/activeModal', 'comingSoon')">
-                                    Check for updates
-                                </Button>?
-                            </p>
-                        </Block>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'gameSeries'"
-                        class="row margin-bottom-30">
-                        <div class="col-12">
-                            <GameSeries
-                                v-for="(game, index) in item.data.list"
-                                :key="index">
-                                <GameDescription :game="game" />
-                                <GameIncludesList
-                                    :list="game.products"
-                                    :showNumber="item.data.showNumber" />
-                            </GameSeries>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'newReleasesGrid'"
-                        class="row margin-bottom-30">
-                        <div class="col-md-12 col-lg-6 margin-bottom-30">
-                            <Block
-                                title="New Releases"
-                                :noGutter="true"
-                                :bgGradient="true"
-                                :onlyContentBg="true"
-                                showActions>
-                                <template slot="additional-action">
-                                    <HeadingBarFields
-                                        name="Reviews"
-                                        icon="star"
-                                        @clickUp=""
-                                        @clickDown="" />
-                                    <HeadingBarFields
-                                        name="Date"
-                                        icon="calendar"
-                                        @clickUp=""
-                                        @clickDown="" />
-                                </template>
-
-                                <GameGrid
-                                    :itemInRow="2"
-                                    :showRating="true"
-                                    :showDate="false"
-                                    :showLink="true"
-                                    :items="item.products.slice(0,5)"
-                                    itemBg="transparent"
-                                    pricePosition="right" />
-                            </Block>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="item.type === 'topItemsGrid'"
-                        class="row margin-bottom-30">
-                        <div class="col-md-12 col-lg-6 margin-bottom-30">
-                            <Block
-                                title="Top 20 Items"
-                                :noGutter="true"
-                                :bgGradient="true"
-                                :onlyContentBg="true"
-                                showActions>
-                                <template slot="additional-action">
-                                    <HeadingBarFields
-                                        name="Price"
-                                        icon="dollar-sign"
-                                        @clickUp=""
-                                        @clickDown="" />
-                                    <HeadingBarFields
-                                        name="Trading"
-                                        icon="star"
-                                        @clickUp=""
-                                        @clickDown="" />
-                                </template>
-
-                                <AssetsList
-                                    v-if="assets.length"
-                                    :items="assets"
-                                    itemInRow="2" />
-
-                                <div v-if="!assets.length">
-                                    Nothing could be found. Want to <Button
-                                        status="plain"
-                                        @click="$store.commit('application/activeModal', 'comingSoon')">
-                                        Check for updates
-                                    </Button>?
-                                </div>
-
-                                <ContentNavigation v-if="assets.length" />
-                            </Block>
-                        </div>
-                    </div>
-                </div>
-            </transition-group>
-        </template>
-
-        <transition
-            v-if="showSignIn"
-            name="fade-slow">
-            <div
-                v-if="end && !$store.state.application.signedIn"
-                class="row">
-                <div class="col-12 mb-4 mt-4">
-                    <RecommendationBlock />
-                </div>
-            </div>
-            <div
-                v-if="!sliced"
-                class="no-updates">
-                <h3>
-                    There is no more content.
-                </h3>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-export default {
-    components: {
-        'Button': () => import('../../').then(m => m.Button),
-        'HeadingBar': () => import('../../').then(m => m.HeadingBar),
-        'HeadingBarFields': () => import('../../').then(m => m.HeadingBarFields),
-        'ProductCard': () => import('../../').then(m => m.ProductCard),
-        'ProductCardDynamic': () => import('../../').then(m => m.ProductCardDynamic),
-        'ProductCards': () => import('../../').then(m => m.ProductCards),
-        'ProductSlider': () => import('../../').then(m => m.ProductSlider),
-        'ProjectCard': () => import('../../').then(m => m.ProjectCard),
-        'CuratorReview': () => import('../../').then(m => m.CuratorReview),
-        'GameGrid': () => import('../../').then(m => m.GameGrid),
-        'DropdownMenu': () => import('../../').then(m => m.DropdownMenu),
-        'Searcher': () => import('../../').then(m => m.Searcher),
-        'ContentNavigation': () => import('../../').then(m => m.ContentNavigation),
-        'AssetsListItem': () => import('../../').then(m => m.AssetsListItem),
-        'NewsListNavigation': () => import('../../').then(m => m.NewsListNavigation),
-        'NewsListArticles': () => import('../../').then(m => m.NewsListArticles),
-        'Block': () => import('../../').then(m => m.Block),
-        'SimpleBanner': () => import('../../').then(m => m.SimpleBanner),
-        'GamesExplorer': () => import('../../').then(m => m.GamesExplorer),
-        'AssetsExplorer': () => import('../../').then(m => m.AssetsExplorer),
-        'AssetsList': () => import('../../').then(m => m.AssetsList),
-        'DownloadBlock': () => import('../../').then(m => m.DownloadBlock),
-        'Banner': () => import('../../').then(m => m.Banner),
-        'GameSeries': () => import('../../').then(m => m.GameSeries),
-        'GameDescription': () => import('../../').then(m => m.GameDescription),
-        'GameIncludesList': () => import('../../').then(m => m.GameIncludesList),
-        'CollectionList': () => import('../../').then(m => m.CollectionList),
-        'CollectionItem': () => import('../../').then(m => m.CollectionItem),
-        'RecommendationBlock': () => import('../../').then(m => m.RecommendationBlock)
-    },
-    props: {
-        list: {
-            type: Array,
-            required: true
-        },
-        showSignIn: Boolean
-    },
-    data() {
-        return {
-            activeElementIndex: null,
-            show: false, // display content after API request
-            offset: 1,     // items to display after scroll
-            display: 3,     // initial items
-            trigger: 300,   // how far from the bottom to trigger infinite scroll
-            end: false, // no more updates,
-            curatorsIndex: 0
-        }
-    },
-    computed: {
-        assets() {
-            return []
-        },
-        sliced() {
-            return this.list.slice(0, this.display)
-        },
-        swiperCurators() {
-            return this.$refs.swiper[0].swiper
-        },
-        swiperProjects() {
-            return this.$refs.swiper[1].swiper
-        },
-        swiperRealms() {
-            return this.$refs.swiper[2].swiper
-        }
-    },
-    mounted() {
-        // $(this.$refs.trendingSlider).ionRangeSlider();
-
-        // this.scroll()
-    },
-    methods: {
-        showArrowsState(el, count) {
-            if (el.length > count) {
-                return true
-            }
-            return false
-        },
-        updateIndex(targetProp, dir, itemsLength) {
-            const target = this[targetProp]
-            if (dir && target + 1 <= itemsLength - 3) this[targetProp]++
-            else if (!dir && target - 1 >= 0) this[targetProp]--
-        },
-        slidePrev() {
-            const sl = this.$refs.swiperProjects[0].swiper
-            console.log(sl)
-            window.swiper = sl
-        },
-        scroll() {
-            window.onscroll = ev => {
-                if (
-                    window.innerHeight + window.scrollY >=
-                    (document.body.offsetHeight - this.trigger)
-                ) {
-                    if (this.display < this.list.length) {
-                        this.display = this.display + this.offset
-                    } else {
-                        this.end = true
-                    }
-                }
-            }
-        }
-    }
-}
-</script>
-
-
-<style lang="scss">
-    /*Crutch to work OWL fine*/
-    /*Fixing content and OWL width*/
-    .page__content > .content {
-        width: calc(100% - 500px);
-    }
-
-    /**/
-    /**/
-    .main-banner {
-        padding: 10px;
-        border-radius: 5px;
-        background: rgba(0, 0, 0, .1);
-    }
-
-    .img_slider {
-        margin-bottom: 15px;
-        position: relative;
-        display: inline-block;
-        width: 100%;
-        overflow: hidden;
-        img {
-            width: 100%;
-            height: 285px;
-            object-fit: cover;
-            border-radius: 5px;
-        }
-        .owl-controls{
-            display: inline-block!important;
-            float: left;
-            .owl-prev{
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                width: 15%;
-                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#30314c+1,30314c+100&1+24,0+100 */
-                background: linear-gradient(to right, rgba(48,49,76,1) 1%,rgba(48,49,76,1) 24%,rgba(48,49,76,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                &:before{
-                    content: "\f104";
-                    font-family: 'Font Awesome 5 Free';
-                    font-size: 60px;
-                    color: #fff;
-                    opacity: .6;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    top: calc( 50% - 30px );
-                }
-                &:hover{
-                    &:before{
-                        opacity: 1;
-                    }
-                }
-            }
-            .owl-next{
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                width: 15%;
-                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#30314c+1,30314c+100&1+24,0+100 */
-                background: linear-gradient(to right, rgba(48,49,76,0) 1%, rgba(48,49,76,1) 76%, rgba(48,49,76,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                &:before{
-                    content: "\f105";
-                    font-family: 'Font Awesome 5 Free';
-                    font-size: 60px;
-                    color: #fff;
-                    opacity: .6;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    top: calc( 50% - 30px );
-                }
-                &:hover{
-                    &:before{
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-
-    .project-card__item {
-        margin-bottom: 30px;
-    }
-
-    .frontpage-product{
-        margin-bottom: 30px;
-        background: rgba(0, 0, 0, 0.13);
-        border-radius: 5px;
-        width: 100%;
-        position: relative;
-    }
-    .frontpage-product__slider{
-        img{
-            margin: 10px;
-            width: 100%;
-            height: 250px;
-            object-fit: cover;
-        }
-    }
-    .frontpage-product__info{
-        h2{
-            font-size: 26px;
-            font-weight: bold;
-            margin: 10px 0;
-
-            a {
-                color: #fff;
-            }
-        }
-        p {
-            margin: 15px 0;
-        }
-    }
-    .frontpage-product__footer{
-        .price-list{
-            margin-right: 15px;
-            float: left;
-            .price{
-                float: left;
-                margin-right: 15px;
-                font-size: 18px;
-                font-weight: bold;
-                text-transform: uppercase;
-                line-height: 32px;
-                position: relative;
-                overflow: hidden;
-                span{
-                    font-size: 13px;
-                }
-                &.oldPrice{
-                    &:before{
-                        position: absolute;
-                        height: 2px;
-                        left: 0;
-                        right: 0;
-                        top: 50%;
-                        width: 100%;
-                        background: red;
-                        content: "";
-                        display: inline-block;
-                        transform: rotate(20deg);
-                        opacity: 0.7;
-                    }
-                    &:after{
-                        position: absolute;
-                        height: 2px;
-                        left: 0;
-                        right: 0;
-                        top: 50%;
-                        width: 100%;
-                        background: red;
-                        content: "";
-                        display: inline-block;
-                        transform: rotate(-20deg);
-                        opacity: 0.7;
-                    }
-                }
-            }
-        }
-        a{
-            padding: 5px 10px;
-            text-transform: uppercase;
-            font-size: 16px;
-            font-weight: bold;
-            i{
-                margin-right: 5px;
-            }
-        }
-    }
-
-    .block-bg{
-        background: rgba(0, 0, 0, .2);
-        margin: -20px 0 0;
-        width: 100%;
-        padding: 15px;
-        &.block-gradient{
-            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+88,000000+100&0.65+91,0+100 */
-            background: linear-gradient(to bottom, rgba(0,0,0,0.2) 88%,rgba(0,0,0,0.2) 91%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-        }
-    }
-
-    .banner{
-        .text-yellow{
-            color: #FADC72;
-        }
-        h3{
-            font-size: 2.5em;
-            text-transform: uppercase;
-            padding: 0;
-            margin: 5px 0;
-            font-weight: bold;
-        }
-        h4{
-            font-size: 1.5em;
-            text-transform: uppercase;
-            padding: 0;
-            margin: 0;
-            font-weight: bold;
-            line-height: 24px;
-        }
-        p{
-            font-size: 16px;
-            padding: 0;
-            margin: 0;
-        }
-    }
-</style>
diff --git a/packages/hyper-ui/src/components/infinite-content/recommendation-block.vue b/packages/hyper-ui/src/components/infinite-content/recommendation-block.vue
deleted file mode 100644
index 640537b..0000000
--- a/packages/hyper-ui/src/components/infinite-content/recommendation-block.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <div class="recommendation-block">
-        <div class="recommendation-block__title">
-            Looking for recommendations?
-        </div>
-        <div class="recommendation-block__body">
-            <p>Sign in to view personalized recommendations</p>
-            <Button
-                status="second-info"
-                class="mb-4 mt-2"
-                size="lg"
-                @click="$store.commit('application/activeModal', 'login')">
-                Sign In
-            </Button>
-            <p>
-                or <Button
-                    status="underline"
-                    @click="$store.commit('application/activeModal', 'register')">
-                    sign up
-                </Button> and join BlockHub for free
-            </p>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-    .recommendation-block{
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        padding: 15px 0;
-        overflow: hidden;
-    }
-    .recommendation-block__title{
-        font-size: 24px;
-        color: #fff;
-        position: relative;
-        margin: 0 auto 30px;
-        padding: 0 25px;
-        width: auto;
-        &:before,
-        &:after{
-            content: "";
-            position: absolute;
-            height: 1px;
-            background: #fff;
-            top: 50%;
-            transform: translateX(-100%);
-            left: 0;
-            width: 800px;
-        }
-        &:after{
-            left: unset;
-            right: 0;
-            transform: translateX(100%);
-        }
-    }
-    .recommendation-block__body{
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        p, a{
-            margin: 0;
-            padding: 0;
-            font-size: 16px !important;
-        }
-    }
-</style>
diff --git a/packages/hyper-ui/src/components/join-community/index.vue b/packages/hyper-ui/src/components/join-community/index.vue
index 7d51389..2dfc67f 100644
--- a/packages/hyper-ui/src/components/join-community/index.vue
+++ b/packages/hyper-ui/src/components/join-community/index.vue
@@ -1,50 +1,55 @@
 <template>
-  <div v-if="!signedIn" class="join-community">
-    <div class="join-community__wrapper">
-      <Img src="../../static/img/logo.fw.png" />
-      <div class="h5 font-weight-bold">Join the BlockHub community!</div>
-      <div>Discover the best games before they're mainstream.</div>
-      <Button
-        class="margin-top-15"
-        status="outline-white"
-        @click="$store.commit('application/activeModal', 'register')"
-      >Sign Up</Button>
+    <div
+        v-if="!signedIn"
+        class="join-community">
+        <div class="join-community__wrapper">
+            <Img src="/img/logo.fw.png" />
+            <div class="h5 font-weight-bold">
+                Join the BlockHub community!
+            </div>
+            <div>
+                Discover the best games before they're mainstream.
+            </div>
+            <Button
+                status="outline-white"
+                @click="$store.commit('application/activeModal', 'register')">
+                Sign Up
+            </Button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  components: {
-    Button: () => import("../../").then(m => m.Button),
-    Img: () => import("../../").then(m => m.Img)
-  },
-  computed: {
-    signedIn() {
-      return this.$store.state.application.signedIn;
+    components: {
+        'Img': () => import('../../').then(m => m.Img),
+        'Button': () => import('../../').then(m => m.Button),
+    },
+    computed: {
+        signedIn() {
+            return this.$store.state.application.signedIn
+        }
     }
-  }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.join-community__wrapper {
-  padding: 20px 10px;
-  border-radius: 5px;
-  background: rgba(93, 95, 136, 0.5);
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  color: #fff;
-  img {
-    max-width: 90%;
-    height: auto;
-    margin: 0 auto 15px;
-    display: block;
-  }
-  .Button {
-    margin: 20px auto auto;
-  }
-}
+    .join-community__wrapper{
+        padding: 20px 10px;
+        border-radius: 5px;
+        background: rgba(93, 95, 136, 0.5);
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        img{
+            max-width: 90%;
+            height: auto;
+            margin: 0 auto 15px;
+            display: block;
+        }
+        .Button{
+            margin: 20px auto auto;
+        }
+    }
 </style>
 
diff --git a/packages/hyper-ui/src/components/modal/vote.vue b/packages/hyper-ui/src/components/modal/vote.vue
index 39a4839..f39ec8b 100644
--- a/packages/hyper-ui/src/components/modal/vote.vue
+++ b/packages/hyper-ui/src/components/modal/vote.vue
@@ -32,8 +32,6 @@
 
 <script>
 export default {
-    name: 'Modal',
-    // props: ['id', 'title', 'modalClass'],
     props: {
         id: String,
         title: String,
diff --git a/packages/hyper-ui/src/components/model-editor/index.vue b/packages/hyper-ui/src/components/model-editor/index.vue
index b3dd772..1995519 100644
--- a/packages/hyper-ui/src/components/model-editor/index.vue
+++ b/packages/hyper-ui/src/components/model-editor/index.vue
@@ -131,6 +131,7 @@ import beautify from 'json-beautify'
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'HtmlEditor': () => import('../../').then(m => m.HtmlEditor),
         'JsonEditor': () => import('../../').then(m => m.JsonEditor),
         'Multiselect': () => import('vue-multiselect').then(m => m.default)
diff --git a/packages/hyper-ui/src/components/option-block/index.vue b/packages/hyper-ui/src/components/option-block/index.vue
index 687e137..10f0956 100644
--- a/packages/hyper-ui/src/components/option-block/index.vue
+++ b/packages/hyper-ui/src/components/option-block/index.vue
@@ -62,6 +62,7 @@
 export default {
     name: 'OptionBlock',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ButtonFav': () => import('../../').then(m => m.ButtonFav),
         'OptionListItem': () => import('../../').then(m => m.OptionListItem)
     },
diff --git a/packages/hyper-ui/src/components/option-tag/index.vue b/packages/hyper-ui/src/components/option-tag/index.vue
index cfa6c26..872e8a7 100644
--- a/packages/hyper-ui/src/components/option-tag/index.vue
+++ b/packages/hyper-ui/src/components/option-tag/index.vue
@@ -22,7 +22,6 @@
 
 <script>
 export default {
-    name: 'OptionTag',
     props: {
         title: {
             type: String,
diff --git a/packages/hyper-ui/src/components/participation-tier/index.vue b/packages/hyper-ui/src/components/participation-tier/index.vue
index b66e9fe..7c6258e 100644
--- a/packages/hyper-ui/src/components/participation-tier/index.vue
+++ b/packages/hyper-ui/src/components/participation-tier/index.vue
@@ -38,15 +38,15 @@ export default {
     props: {
         id: Number,
         price: {
-            type: Number,
+            type: [Number, String],
             default: 0
         },
         sold: {
-            type: Number,
+            type: [Number, String],
             default: 0
         },
         left: {
-            type: Number,
+            type: [Number, String],
             default: 0
         },
         tag: {
diff --git a/packages/hyper-ui/src/components/popups/add-collection.vue b/packages/hyper-ui/src/components/popups/add-collection.vue
index 9598fc0..89f8c5d 100644
--- a/packages/hyper-ui/src/components/popups/add-collection.vue
+++ b/packages/hyper-ui/src/components/popups/add-collection.vue
@@ -1,234 +1,259 @@
 <template>
-  <BasicPopup :activated="activated" @close="close">
-    <template slot="body">
-      <div class="item-info">
-        <div v-if="image" class="item-info__image">
-          <img :src="image" />
-        </div>
-        <div v-if="name" class="item-info__description">
-          <div class="h4 font-weight-bold mb-2 p-0">{{ name }}</div>
-          <p class="p-0 m-0" style="opacity: .7">{{ description }}</p>
-        </div>
-      </div>
-      <!-- <div v-if="name">
+    <BasicPopup
+        :activated="activated"
+        @close="close">
+        <template slot="body">
+            <div class="item-info">
+                <div
+                    v-if="image"
+                    class="item-info__image">
+                    <img :src="image">
+                </div>
+                <div
+                    v-if="name"
+                    class="item-info__description">
+                    <div class="h4 font-weight-bold mb-2 p-0">
+                        {{ name }}
+                    </div>
+                    <p
+                        class="p-0 m-0"
+                        style="opacity: .7">
+                        {{ description }}
+                    </p>
+                </div>
+            </div>
+            <!-- <div v-if="name">
                 <Button
                     status="plain"
                     icon="star"
                     class="p-0">
                     Highlight this
                 </Button>
-      </div>-->
-      <div
-        class="add-to-collection__filter d-flex align-items-end justify-content-between mt-3 mb-4 pb-4"
-      >
-        <div class="h4 font-weight-bold m-0 p-0 mr-4">Choose collection</div>
-        <div>
-          <Input
-            v-model="searchQuery"
-            bgcolor="rgba(255, 255, 255, .07)"
-            placeholder="Filter Collections"
-          />
-        </div>
-      </div>
-      <div class="create-collection d-flex">
-        <template v-if="createForm">
-          <Button
-            status="second-success"
-            size="sm"
-            class="mx-2"
-            @click="addCollection(createCollectionRequest)"
-          >Add</Button>
-          <Input
-            v-model="createCollectionRequest.name"
-            bgcolor="rgba(255, 255, 255, .07)"
-            placeholder="Collection name"
-          />
-          <Button status="second-warning" size="sm" @click="createForm = false">Cancel</Button>
+            </div> -->
+            <div class="add-to-collection__filter d-flex align-items-end justify-content-between mt-3 mb-4 pb-4">
+                <div class="h4 font-weight-bold m-0 p-0 mr-4">
+                    Choose collection
+                </div>
+                <div>
+                    <Input
+                        v-model="searchQuery"
+                        bgColor="rgba(255, 255, 255, .07)"
+                        placeholder="Filter Collections" />
+                </div>
+            </div>
+            <div class="create-collection d-flex">
+                <template v-if="createForm">
+                    <Button
+                        status="second-success"
+                        size="sm"
+                        class="mx-2"
+                        @click="addCollection(createCollectionRequest)">
+                        Add
+                    </Button>
+                    <Input
+                        v-model="createCollectionRequest.name"
+                        bgColor="rgba(255, 255, 255, .07)"
+                        placeholder="Collection name" />
+                    <Button
+                        status="second-warning"
+                        size="sm"
+                        @click="createForm = false">
+                        Cancel
+                    </Button>
+                </template>
+                <template v-if="!createForm">
+                    <Button
+                        status="second-info"
+                        icon="plus"
+                        size="sm"
+                        @click="createForm = true">
+                        Create New
+                    </Button>
+                </template>
+            </div>
+            <div class="add-to-collection__list mt-3">
+                <template v-if="collections">
+                    <CheckboxGroup v-if="filteredList.length">
+                        <Checkbox
+                            v-for="(collection, idx) in filteredList"
+                            :id="`collection_${idx}`"
+                            :key="idx"
+                            class="my-3"
+                            :class="{ 'mt-0' : idx == 1 }"
+                            :checked="(collection.resources || []).find(r => r.toProductId === resourceId)"
+                            @change="updateResource(collection, $event)">
+                            {{ collection.name }}
+                        </Checkbox>
+                    </CheckboxGroup>
+                    <div
+                        v-else
+                        class="h6 mt-3">
+                        No collections were found.
+                    </div>
+                </template>
+                <div
+                    v-else
+                    class="h5">
+                    You don't have collection yet.
+                </div>
+            </div>
         </template>
-        <template v-if="!createForm">
-          <Button status="second-info" icon="plus" size="sm" @click="createForm = true">Create New</Button>
-        </template>
-      </div>
-      <div class="add-to-collection__list mt-3">
-        <template v-if="collections">
-          <CheckboxGroup v-if="filteredList.length">
-            <Checkbox
-              v-for="(collection, idx) in filteredList"
-              :id="`collection_${idx}`"
-              :key="idx"
-              class="my-3"
-              :class="{ 'mt-0' : idx == 1 }"
-              :checked="(collection.resources || []).find(r => r.toProductId === resourceId)"
-              @change="updateResource(collection, $event)"
-            >{{ collection.name }}</Checkbox>
-          </CheckboxGroup>
-          <div v-else class="h6 mt-3">No collections were found.</div>
-        </template>
-        <div v-else class="h5">You don't have collection yet.</div>
-      </div>
-    </template>
-  </BasicPopup>
+    </BasicPopup>
 </template>
 
 <script>
 export default {
-  components: {
-    BasicPopup: () => import("../../").then(m => m.BasicPopup),
-    CheckboxGroup: () => import("../../").then(m => m.CheckboxGroup),
-    Checkbox: () => import("../../").then(m => m.Checkbox),
-    Button: () => import("../../").then(m => m.Button),
-    Input: () => import("../../").then(m => m.Input)
-  },
-  props: {
-    activated: Boolean,
-    buttonType: {
-      type: String,
-      default: "second-info"
-    },
-    image: {
-      type: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'BasicPopup': () => import('../../').then(m => m.BasicPopup),
+        'CheckboxGroup': () => import('../../').then(m => m.CheckboxGroup),
+        'Checkbox': () => import('../../').then(m => m.Checkbox)
     },
-    description: {
-      type: String,
-      default: null
-    },
-    resourceType: {
-      type: String,
-      default: null
+    props: {
+        activated: Boolean,
+        buttonType: {
+            type: String,
+            default: 'second-info'
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        name: {
+            type: String,
+            default: null
+        },
+        description: {
+            type: String,
+            default: null
+        },
+        resourceType: {
+            type: String,
+            default: null
+        },
+        resourceId: {
+            type: Number,
+            default: null
+        }
     },
-    resourceId: {
-      type: Number,
-      default: null
-    }
-  },
-  data() {
-    return {
-      searchQuery: "",
-      collections: [],
-      createForm: false,
-      createCollectionRequest: {
-        name: "",
-        meta: {
-          author: "Anonymous",
-          background: null,
-          assets: [],
-          estimatedValue: 0
+    data() {
+        return {
+            searchQuery: '',
+            collections: [],
+            createForm: false,
+            createCollectionRequest: {
+                name: '',
+                meta: {
+                    author: 'Anonymous',
+                    background: null,
+                    assets: [],
+                    estimatedValue: 0
+                }
+            }
         }
-      }
-    };
-  },
-  computed: {
-    filteredList() {
-      if (this.collections && this.searchQuery) {
-        return this.collections.filter(collection =>
-          collection.name.toLowerCase().includes(this.searchQuery.toLowerCase())
-        );
-      }
-      return this.collections;
-    }
-  },
-  async created() {
-    this.fetchCollections();
-  },
-  methods: {
-    close() {
-      this.activated = false;
-      this.$store.commit("application/activeModal", null);
     },
-    async fetchCollections() {
-      this.collections = (await this.$store.dispatch("collections/find", {
-        query: {
-          "owner.id": this.$store.state.application.activeProfile.id,
-          $joinRelation: "[owner]",
-          $eager: "[owner]"
+    computed: {
+        filteredList() {
+            if (this.collections && this.searchQuery) {
+                return this.collections.filter(collection => collection.name.toLowerCase().includes(this.searchQuery.toLowerCase()))
+            }
+            return this.collections
         }
-      })).data;
     },
-    async addCollection(collection) {
-      this.createForm = false;
+    async created() {
+        this.fetchCollections()
+    },
+    methods: {
+        close() {
+            this.activated = false
+            this.$store.commit('application/activeModal', null)
+        },
+        async fetchCollections() {
+            this.collections = (await this.$store.dispatch('collections/find', {
+                query: {
+                    'owner.id': this.$store.state.application.activeProfile.id,
+                    '$joinRelation': '[owner]',
+                    '$eager': '[owner]'
+                }
+            })).data
+        },
+        async addCollection(collection) {
+            this.createForm = false
 
-      collection.owner = this.$store.state.application.activeProfile;
-      collection.meta.author = this.$store.state.application.activeProfile.name;
-      collection.meta.background = this.image;
+            collection.owner = this.$store.state.application.activeProfile
+            collection.meta.author = this.$store.state.application.activeProfile.name
+            collection.meta.background = this.image
 
-      await this.$store.dispatch("collections/create", [
-        collection,
-        {
-          query: {
-            $joinRelation: "[owner]",
-            $eager: "[owner]"
-          }
-        }
-      ]);
+            await this.$store.dispatch('collections/create', [collection, {
+                query: {
+                    '$joinRelation': '[owner]',
+                    '$eager': '[owner]'
+                }
+            }])
 
-      // const { Collection } = this.$api
+            // const { Collection } = this.$api
 
-      // const collection = await new Collection(data)
+            // const collection = await new Collection(data)
 
-      // collection.save({
-      //     query: {
-      //         '$joinRelation': '[owner]',
-      //         '$eager': '[owner]'
-      //     }
-      // })
+            // collection.save({
+            //     query: {
+            //         '$joinRelation': '[owner]',
+            //         '$eager': '[owner]'
+            //     }
+            // })
 
-      await this.fetchCollections();
-    },
-    async updateResource(collection, enabled) {
-      const request = {
-        collectionId: collection.id,
-        resourceType: this.resourceType,
-        resourceId: this.resourceId
-      };
+            await this.fetchCollections()
+        },
+        async updateResource(collection, enabled) {
+            const request = {
+                collectionId: collection.id,
+                resourceType: this.resourceType,
+                resourceId: this.resourceId
+            }
 
-      if (enabled) {
-        await this.$store.dispatch("collectionResource/create", [request]);
-      } else {
-        await this.$store.dispatch("collectionResource/remove", [request]);
-      }
+            if (enabled) {
+                await this.$store.dispatch('collectionResource/create', [request])
+            } else {
+                await this.$store.dispatch('collectionResource/remove', [request])
+            }
+        }
     }
-  }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.add-to-collection {
-  display: inline-flex;
-}
-.add-to-collection__filter {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-}
-.item-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.item-info__image {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 3px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-  }
-}
-.item-info__description {
-  width: calc(100% - 80px);
-  padding-left: 20px;
-}
-.add-to-collection__list {
-  max-height: 250px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
+    .add-to-collection{
+        display: inline-flex;
+    }
+    .add-to-collection__filter{
+        border-bottom: 1px solid rgba(255, 255, 255, .2);
+    }
+    .item-info{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .item-info__image{
+        width: 80px;
+        height: 80px;
+        object-fit: cover;
+        border-radius: 3px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        img{
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+        }
+    }
+    .item-info__description{
+        width: calc( 100% - 80px );
+        padding-left: 20px;
+    }
+    .add-to-collection__list{
+        max-height: 250px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 </style>
diff --git a/packages/hyper-ui/src/components/popups/mature-content.vue b/packages/hyper-ui/src/components/popups/mature-content.vue
index 867099b..1e5bb18 100644
--- a/packages/hyper-ui/src/components/popups/mature-content.vue
+++ b/packages/hyper-ui/src/components/popups/mature-content.vue
@@ -10,7 +10,7 @@
 
 		<template slot="body">
 			<div class="img d-flex justify-content-center margin-bottom-30">
-				<img src="static/img/mature-icon.svg" height="150" />
+				<img src="/img/mature-icon.svg" height="150" />
 			</div>
 			<div class="h4 text-center">
 				You must be at least eighteen years old to view this game.
diff --git a/packages/hyper-ui/src/components/popups/play.vue b/packages/hyper-ui/src/components/popups/play.vue
index c608f78..ba858af 100644
--- a/packages/hyper-ui/src/components/popups/play.vue
+++ b/packages/hyper-ui/src/components/popups/play.vue
@@ -43,7 +43,7 @@
         <template slot="footer">
             <div class="d-flex align-items-center justify-content-between border-top pt-4">
                 <img
-                    src="/static/img/icons/steam-square-icon.png"
+                    src="/img/icons/steam-square-icon.png"
                     alt="BlockHub"
                     width="45"
                     style="opacity: .5"
diff --git a/packages/hyper-ui/src/components/popups/terms.vue b/packages/hyper-ui/src/components/popups/terms.vue
index c436061..5f9336a 100644
--- a/packages/hyper-ui/src/components/popups/terms.vue
+++ b/packages/hyper-ui/src/components/popups/terms.vue
@@ -47,6 +47,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         activated: {
             type: Boolean,
diff --git a/packages/hyper-ui/src/components/pricing-table/v1.vue b/packages/hyper-ui/src/components/pricing-table/v1.vue
index fb83e72..aaa6e36 100644
--- a/packages/hyper-ui/src/components/pricing-table/v1.vue
+++ b/packages/hyper-ui/src/components/pricing-table/v1.vue
@@ -33,14 +33,17 @@
 </template>
 
 <script>
-    export default {
-        props: {
-            items: {
-                type: Array,
-                default: () => []
-            },
-        }
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
     }
+}
 </script>
 
 <style lang="scss">
diff --git a/packages/hyper-ui/src/components/pricing-table/v2.vue b/packages/hyper-ui/src/components/pricing-table/v2.vue
index 7e32c82..60772c8 100644
--- a/packages/hyper-ui/src/components/pricing-table/v2.vue
+++ b/packages/hyper-ui/src/components/pricing-table/v2.vue
@@ -30,14 +30,17 @@
 </template>
 
 <script>
-    export default {
-        props: {
-            items: {
-                type: Array,
-                default: () => []
-            },
-        }
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
     }
+}
 </script>
 
 <style lang="scss">
diff --git a/packages/hyper-ui/src/components/pro-mode/notice1.vue b/packages/hyper-ui/src/components/pro-mode/notice1.vue
index b8c362a..e8e3194 100644
--- a/packages/hyper-ui/src/components/pro-mode/notice1.vue
+++ b/packages/hyper-ui/src/components/pro-mode/notice1.vue
@@ -71,6 +71,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         name: {
             type: String,
diff --git a/packages/hyper-ui/src/components/product-card/product-card-dynamic.vue b/packages/hyper-ui/src/components/product-card/product-card-dynamic.vue
index bf166d2..0dad888 100644
--- a/packages/hyper-ui/src/components/product-card/product-card-dynamic.vue
+++ b/packages/hyper-ui/src/components/product-card/product-card-dynamic.vue
@@ -66,6 +66,8 @@ import { debounce } from '@/mixins'
 
 export default {
     components: {
+        'Img': () => import('../../').then(m => m.Img),
+        'Button': () => import('../../').then(m => m.Button),
         'Tags': () => import('../../').then(m => m.Tags)
     },
     mixins: [debounce],
diff --git a/packages/hyper-ui/src/components/product-card/product-card.vue b/packages/hyper-ui/src/components/product-card/product-card.vue
index 90f1568..36dacba 100644
--- a/packages/hyper-ui/src/components/product-card/product-card.vue
+++ b/packages/hyper-ui/src/components/product-card/product-card.vue
@@ -25,6 +25,8 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
         'Tags': () => import('../../').then(m => m.Tags)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/product-card/product-cards.vue b/packages/hyper-ui/src/components/product-card/product-cards.vue
index f6cfde1..48a213d 100644
--- a/packages/hyper-ui/src/components/product-card/product-cards.vue
+++ b/packages/hyper-ui/src/components/product-card/product-cards.vue
@@ -1,14 +1,15 @@
 <template>
     <div class="product-grid-wrapper">
+<!--        {{ products }}-->
         <ProductCardDynamic
             v-for="(product, index) in products"
             :key="index"
             :id="product.id"
             :price="product.price"
-            :mediumTile="product.images.mediumTile"
+            :mediumTile="product.meta.images.mediumTile"
             :video="product.video"
             :shortDescription="product.shortDescription"
-            :previewImages="product.images.review"
+            :previewImages="product.meta.images.review"
             :developerTags="product.developerTags" />
     </div>
 </template>
diff --git a/packages/hyper-ui/src/components/product-slider/index.vue b/packages/hyper-ui/src/components/product-slider/index.vue
index ceba4eb..a697bdf 100644
--- a/packages/hyper-ui/src/components/product-slider/index.vue
+++ b/packages/hyper-ui/src/components/product-slider/index.vue
@@ -47,6 +47,10 @@
 <script>
 export default {
     components: {
+        'Swiper': () => import('../../').then(m => m.Swiper),
+        'SwiperSlide': () => import('../../').then(m => m.SwiperSlide),
+        'HeadingBar': () => import('../../').then(m => m.HeadingBar),
+        'Block': () => import('../../').then(m => m.Block),
         'ProductCard': () => import('../../').then(m => m.ProductCard),
         'ProductCardDynamic': () => import('../../').then(m => m.ProductCardDynamic)
     },
diff --git a/packages/hyper-ui/src/components/profile-chooser/index.vue b/packages/hyper-ui/src/components/profile-chooser/index.vue
index 71b6470..9d05882 100644
--- a/packages/hyper-ui/src/components/profile-chooser/index.vue
+++ b/packages/hyper-ui/src/components/profile-chooser/index.vue
@@ -63,6 +63,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'UserCard': () => import('../../').then(m => m.UserCard)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/profile-picker/index.vue b/packages/hyper-ui/src/components/profile-picker/index.vue
index 429e16a..20765ed 100644
--- a/packages/hyper-ui/src/components/profile-picker/index.vue
+++ b/packages/hyper-ui/src/components/profile-picker/index.vue
@@ -26,6 +26,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'UserCard': () => import('../../').then(m => m.UserCard)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/progress-bar/fancy.vue b/packages/hyper-ui/src/components/progress-bar/fancy.vue
index c523a3f..6575a7e 100644
--- a/packages/hyper-ui/src/components/progress-bar/fancy.vue
+++ b/packages/hyper-ui/src/components/progress-bar/fancy.vue
@@ -16,7 +16,7 @@
 export default {
     props: {
         percent: {
-            type: Number,
+            type: [Number, String],
             default: 0
         }
     },
diff --git a/packages/hyper-ui/src/components/project/card.vue b/packages/hyper-ui/src/components/project/card.vue
index 876c945..82961f4 100644
--- a/packages/hyper-ui/src/components/project/card.vue
+++ b/packages/hyper-ui/src/components/project/card.vue
@@ -51,7 +51,7 @@
         <Vote
             v-if="hovering"
             v-access="'rating.read'"
-            :votes="rating" />
+            :votes="rating || 0" />
     </div>
 </template>
 
diff --git a/packages/hyper-ui/src/components/purchase-block/index.vue b/packages/hyper-ui/src/components/purchase-block/index.vue
index ee71404..e126b7c 100644
--- a/packages/hyper-ui/src/components/purchase-block/index.vue
+++ b/packages/hyper-ui/src/components/purchase-block/index.vue
@@ -146,8 +146,8 @@ export default {
             default: 0
         },
         releaseDate: {
-            type: String,
-            default: new Date()
+            type: [String, Date],
+            default: () => new Date()
         },
         offersPurchases: {
             type: Boolean,
diff --git a/packages/hyper-ui/src/components/purchase-popup/index.vue b/packages/hyper-ui/src/components/purchase-popup/index.vue
index e378b21..8cf74f6 100644
--- a/packages/hyper-ui/src/components/purchase-popup/index.vue
+++ b/packages/hyper-ui/src/components/purchase-popup/index.vue
@@ -388,6 +388,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup),
     },
     props: ['activated'],
diff --git a/packages/hyper-ui/src/components/register-popup/index.vue b/packages/hyper-ui/src/components/register-popup/index.vue
index e6172e8..c37a936 100644
--- a/packages/hyper-ui/src/components/register-popup/index.vue
+++ b/packages/hyper-ui/src/components/register-popup/index.vue
@@ -159,6 +159,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'TermsPopup': () => import('../../').then(m => m.TermsPopup),
         'CustomModal': () => import('../../').then(m => m.CustomModal),
         'TermsBlock': () => import('../../').then(m => m.TermsBlock),
diff --git a/packages/hyper-ui/src/components/review/create.vue b/packages/hyper-ui/src/components/review/create.vue
index a156e17..fd609e1 100644
--- a/packages/hyper-ui/src/components/review/create.vue
+++ b/packages/hyper-ui/src/components/review/create.vue
@@ -107,6 +107,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Checkbox': () => import('../../').then(m => m.Checkbox),
         'TextFormatting': () => import('../../').then(m => m.TextFormatting),
         'BasicPopup': () => import('../../').then(m => m.BasicPopup)
diff --git a/packages/hyper-ui/src/components/review/index.vue b/packages/hyper-ui/src/components/review/index.vue
index 65d0f83..8a3acd8 100644
--- a/packages/hyper-ui/src/components/review/index.vue
+++ b/packages/hyper-ui/src/components/review/index.vue
@@ -64,9 +64,6 @@
                 {{ show_more ? 'HIDE REVIEW' : 'READ MORE...' }}
             </a>
         </div>
-        <!--<BasicPopup :activated="show_more" @close=" show_more = !show_more " width="800">-->
-        <!--<Post :post="post"/>-->
-        <!--</BasicPopup>-->
     </div>
 </template>
 
@@ -77,7 +74,8 @@ export default {
         'RatingStars': () => import('../../').then(m => m.RatingStars),
         'Author': () => import('../../').then(m => m.Author),
         'BasicPopup': () => import('../../').then(m => m.BasicPopup),
-        'Post': () => import('../../').then(m => m.Post)
+        'Post': () => import('../../').then(m => m.Post),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {
         review: {
diff --git a/packages/hyper-ui/src/components/review/view.vue b/packages/hyper-ui/src/components/review/view.vue
index 94a1b0f..6dc2bc5 100644
--- a/packages/hyper-ui/src/components/review/view.vue
+++ b/packages/hyper-ui/src/components/review/view.vue
@@ -67,7 +67,7 @@
             <div
                 v-if="comments"
                 class="w-100">
-                <Comment
+                <ProductCommunityComment
                     v-for="(comment, idx) in comments"
                     :key="`comment=${idx}`"
                     :canReply="false"
@@ -89,7 +89,8 @@
 <script>
 export default {
     components: {
-        'Comment': () => import('../../').then(m => m.Comment)
+        'Button': () => import('../../').then(m => m.Button),
+        'ProductCommunityComment': () => import('../../').then(m => m.ProductCommunityComment)
     },
     props: {
         isRecommend: {
diff --git a/packages/hyper-ui/src/components/screen-gallery/gallery.vue b/packages/hyper-ui/src/components/screen-gallery/gallery.vue
index a575401..d3860e9 100644
--- a/packages/hyper-ui/src/components/screen-gallery/gallery.vue
+++ b/packages/hyper-ui/src/components/screen-gallery/gallery.vue
@@ -70,6 +70,8 @@
 export default {
     components: {
         'Modal': () => import('../../').then(m => m.Modal),
+        'Img': () => import('../../').then(m => m.Img),
+        'Icon': () => import('../../').then(m => m.Icon),
         'ImagesExplorer': () => import('../../').then(m => m.ImagesExplorer),
         'ImageOverlay': () => import('../../').then(m => m.ImageOverlay)
     },
diff --git a/packages/hyper-ui/src/components/searcher/index.vue b/packages/hyper-ui/src/components/searcher/index.vue
index 19ff751..e3a845e 100644
--- a/packages/hyper-ui/src/components/searcher/index.vue
+++ b/packages/hyper-ui/src/components/searcher/index.vue
@@ -53,6 +53,7 @@ import { debounce } from '@/mixins'
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'InputSearcher': () => import('../../').then(m => m.InputSearcher)
     },
     mixins: [debounce],
diff --git a/packages/hyper-ui/src/components/security-check/index.vue b/packages/hyper-ui/src/components/security-check/index.vue
index e7ab66a..12e4b29 100644
--- a/packages/hyper-ui/src/components/security-check/index.vue
+++ b/packages/hyper-ui/src/components/security-check/index.vue
@@ -118,6 +118,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         codeIsSend: {
             type: Boolean,
diff --git a/packages/hyper-ui/src/components/send-funds-popup/index.vue b/packages/hyper-ui/src/components/send-funds-popup/index.vue
index 59eb24d..d1e88bf 100644
--- a/packages/hyper-ui/src/components/send-funds-popup/index.vue
+++ b/packages/hyper-ui/src/components/send-funds-popup/index.vue
@@ -191,7 +191,10 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup),
+        'Tabs': () => import('../../').then(m => m.Tabs),
+        'Tab': () => import('../../').then(m => m.Tab),
     },
     props: ['activated'],
     data() {
diff --git a/packages/hyper-ui/src/components/settings/index.vue b/packages/hyper-ui/src/components/settings/index.vue
index 6879d67..199d713 100644
--- a/packages/hyper-ui/src/components/settings/index.vue
+++ b/packages/hyper-ui/src/components/settings/index.vue
@@ -310,6 +310,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Benchmark': () => import('../../').then(m => m.Benchmark),
         'InlineNotification': () => import('../../').then(m => m.InlineNotification),
         'Toggle': () => import('../../').then(m => m.Toggle),
diff --git a/packages/hyper-ui/src/components/shortcut-grid/index.vue b/packages/hyper-ui/src/components/shortcut-grid/index.vue
index d54df62..784227f 100644
--- a/packages/hyper-ui/src/components/shortcut-grid/index.vue
+++ b/packages/hyper-ui/src/components/shortcut-grid/index.vue
@@ -9,7 +9,7 @@
                 <div
                     class="grid"
                     :style="gridStyle">
-                    <GridItem
+                    <Item
                         v-for="v in list"
                         :key="v.index"
                         :index="v.index"
@@ -31,7 +31,7 @@
                             :index="v.index"
                             :sort="v.sort"
                             :remove="() => { removeItem(v) }" />
-                    </GridItem>
+                    </Item>
                 </div>
             </div>
             <div
@@ -71,12 +71,11 @@
 
 <script>
 import { getWindowSize } from '@/mixins'
-import GridItem from '@/components/shortcut-grid-item'
 
 export default {
     components: {
-        GridItem,
-        'Icon': () => import('../../').then(m => m.Icon)
+        'Item': () => import('../../').then(m => m.ShortcutGridItem),
+        'Icon': () => import('../../').then(m => m.ShortcutIcon)
     },
     mixins: [getWindowSize],
     props: {
diff --git a/packages/hyper-ui/src/components/shortcut-icon/index.vue b/packages/hyper-ui/src/components/shortcut-icon/index.vue
index 7fcce4f..953f138 100644
--- a/packages/hyper-ui/src/components/shortcut-icon/index.vue
+++ b/packages/hyper-ui/src/components/shortcut-icon/index.vue
@@ -22,6 +22,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Tooltip': () => import('../../').then(m => m.Tooltip),
         'ProgressBar': () => import('../../').then(m => m.ProgressBar)
     },
diff --git a/packages/hyper-ui/src/components/shortcut-sidebar/index.vue b/packages/hyper-ui/src/components/shortcut-sidebar/index.vue
index 2973c83..444b465 100644
--- a/packages/hyper-ui/src/components/shortcut-sidebar/index.vue
+++ b/packages/hyper-ui/src/components/shortcut-sidebar/index.vue
@@ -54,8 +54,8 @@ const generateRGBColors = count => Array.apply(null, new Array(count)).map((none
 
 export default {
     components: {
-        'Grid': () => import('../../').then(m => m.Grid),
-        'Icon': () => import('../../').then(m => m.Icon)
+        Grid: () => import('../../').then(m => m.ShortcutGrid),
+        Icon: () => import('../../').then(m => m.ShortcutIcon)
     },
     props: {
         items: {
@@ -69,64 +69,64 @@ export default {
             selected: null,
             fixedItems: [
                 {
-                    'r': null,
-                    'g': null,
-                    'b': null,
-                    'image': '/img/icons/twitch.png',
-                    'eventKey': 'application/activeModal',
-                    'eventValue': 'connectNetwork',
-                    'unread': false,
-                    'text': 'Go to Twitch',
-                    'sort': 1,
-                    'removable': false
+                    r: null,
+                    g: null,
+                    b: null,
+                    image: '/img/icons/twitch.png',
+                    eventKey: 'application/activeModal',
+                    eventValue: 'connectNetwork',
+                    unread: false,
+                    text: 'Go to Twitch',
+                    sort: 1,
+                    removable: false
                 },
                 {
-                    'r': null,
-                    'g': null,
-                    'b': null,
-                    'image': '/img/icons/discord.png',
-                    'eventKey': 'application/activeModal',
-                    'eventValue': 'connectNetwork',
-                    'unread': false,
-                    'text': 'Go to Discord',
-                    'sort': 2,
-                    'removable': false
+                    r: null,
+                    g: null,
+                    b: null,
+                    image: '/img/icons/discord.png',
+                    eventKey: 'application/activeModal',
+                    eventValue: 'connectNetwork',
+                    unread: false,
+                    text: 'Go to Discord',
+                    sort: 2,
+                    removable: false
                 },
                 {
-                    'r': null,
-                    'g': null,
-                    'b': null,
-                    'image': '/img/icons/steam.png',
-                    'eventKey': 'application/activeModal',
-                    'eventValue': 'connectNetwork',
-                    'unread': false,
-                    'text': 'Go to BlockHub',
-                    'sort': 3,
-                    'removable': false
+                    r: null,
+                    g: null,
+                    b: null,
+                    image: '/img/icons/steam.png',
+                    eventKey: 'application/activeModal',
+                    eventValue: 'connectNetwork',
+                    unread: false,
+                    text: 'Go to BlockHub',
+                    sort: 3,
+                    removable: false
                 },
                 {
-                    'r': null,
-                    'g': null,
-                    'b': null,
-                    'image': '/img/icons/instagram.png',
-                    'eventKey': 'application/activeModal',
-                    'eventValue': 'connectNetwork',
-                    'unread': false,
-                    'text': 'Go to Instagram',
-                    'sort': 5,
-                    'removable': false
+                    r: null,
+                    g: null,
+                    b: null,
+                    image: '/img/icons/instagram.png',
+                    eventKey: 'application/activeModal',
+                    eventValue: 'connectNetwork',
+                    unread: false,
+                    text: 'Go to Instagram',
+                    sort: 5,
+                    removable: false
                 },
                 {
-                    'r': null,
-                    'g': null,
-                    'b': null,
-                    'image': '/img/icons/youtube.png',
-                    'eventKey': 'application/activeModal',
-                    'eventValue': 'connectNetwork',
-                    'unread': false,
-                    'text': 'Go to Youtube',
-                    'sort': 6,
-                    'removable': false
+                    r: null,
+                    g: null,
+                    b: null,
+                    image: '/img/icons/youtube.png',
+                    eventKey: 'application/activeModal',
+                    eventValue: 'connectNetwork',
+                    unread: false,
+                    text: 'Go to Youtube',
+                    sort: 6,
+                    removable: false
                 }
             ]
         }
diff --git a/packages/hyper-ui/src/components/social-connect/index.vue b/packages/hyper-ui/src/components/social-connect/index.vue
index 3f93853..3bdbc06 100644
--- a/packages/hyper-ui/src/components/social-connect/index.vue
+++ b/packages/hyper-ui/src/components/social-connect/index.vue
@@ -29,6 +29,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: ['icon', 'name', 'description', 'connected'],
     methods: {
         connect() {
diff --git a/packages/hyper-ui/src/components/stream/carousel.vue b/packages/hyper-ui/src/components/stream/carousel.vue
index f70554f..fddd486 100644
--- a/packages/hyper-ui/src/components/stream/carousel.vue
+++ b/packages/hyper-ui/src/components/stream/carousel.vue
@@ -35,7 +35,6 @@
 
 <script>
 export default {
-    name: 'ProductSlider',
     components: {
         'StreamItem': () => import('../../').then(m => m.StreamItem)
     },
diff --git a/packages/hyper-ui/src/components/text-formatting/index.vue b/packages/hyper-ui/src/components/text-formatting/index.vue
index 85bc934..6281599 100644
--- a/packages/hyper-ui/src/components/text-formatting/index.vue
+++ b/packages/hyper-ui/src/components/text-formatting/index.vue
@@ -202,6 +202,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'SimpleTable': () => import('../../').then(m => m.SimpleTable)
     }
 }
diff --git a/packages/hyper-ui/src/components/timeline/list.vue b/packages/hyper-ui/src/components/timeline/list.vue
index 8cebda4..4bf412f 100644
--- a/packages/hyper-ui/src/components/timeline/list.vue
+++ b/packages/hyper-ui/src/components/timeline/list.vue
@@ -7,7 +7,7 @@
                 :key="index"
                 :item="item"
                 :index="index"
-                :projectId="project_id" />
+                :projectId="projectId" />
             <div
                 v-if="item.period"
                 class="post-timeline__period-info">
diff --git a/packages/hyper-ui/src/components/token-sale-box/index.vue b/packages/hyper-ui/src/components/token-sale-box/index.vue
index 652d68a..8aaa190 100644
--- a/packages/hyper-ui/src/components/token-sale-box/index.vue
+++ b/packages/hyper-ui/src/components/token-sale-box/index.vue
@@ -3,7 +3,7 @@
         <div class="token-sale-box__head">
             <div class="d-flex align-items-center">
                 <div class="coin-img">
-                    <img src="../../static/img/icons/token-icon.png">
+                    <img src="https://via.placeholder.com/150">
                 </div>
                 <div class="box-title">
                     <h1 class="text-uppercase p-0 m-0">
@@ -143,6 +143,7 @@
 export default {
     name: 'TokenSale',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ProgressBar': () => import('../../').then(m => m.ProgressBar)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/token-sale-box/type-2.vue b/packages/hyper-ui/src/components/token-sale-box/type-2.vue
deleted file mode 100644
index f1be30a..0000000
--- a/packages/hyper-ui/src/components/token-sale-box/type-2.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<template>
-    <div class="token-sale-box">
-        <div class="token-sale-box__head">
-            <div class="d-flex align-items-center">
-                <div class="coin-img">
-                    <img src="../../static/img/icons/token-icon.png">
-                </div>
-                <div class="box-title">
-                    <h1 class="text-uppercase p-0 m-0">
-                        HBX
-                    </h1>
-                    <h3 class="text-uppercase p-0 m-0">
-                        token sale
-                    </h3>
-                </div>
-            </div>
-            <div class="d-flex align-items-center">
-                <div class="text-center mr-5">
-                    <div>
-                        Token
-                    </div>
-                    <div>
-                        <h2 class="font-weight-bold p-0 m-0">
-                            HBX
-                        </h2>
-                    </div>
-                </div>
-                <div>
-                    <Button
-                        status="success"
-                        size="lg"
-                        iconHide
-                        @click="$emit('purchase')">
-                        Purchase HBX
-                    </Button>
-                </div>
-            </div>
-        </div>
-        <div class="token-sale-box__body">
-            <div class="token-sale-box_body-info">
-                <h2 class="p-0 mb-2">
-                    Sale status
-                </h2>
-                <div style="margin-top: 10px;">
-                    <strong>
-                        Sold
-                    </strong>
-                    <span class="ml-4">
-                        {{ soldDollar | convertCurrency }}
-                    </span>
-                    <span class="ml-3">
-                        {{ soldTokens | numeralFormat(0,0) }} HBX
-                    </span>
-                </div>
-                <div class="mt-3">
-                    <ProgressBar :percentages="percentProgress" />
-                </div>
-                <div class="token-sale-box__money-info">
-                    <div>
-                        <strong>
-                            Supply
-                        </strong>
-                        <span>
-                            {{ volume | numeralFormat(0,0) }} HBX
-                        </span>
-                    </div>
-                    <div>
-                        <strong>
-                            Hard Cap
-                        </strong>
-                        <span>
-                            {{ hardCap | convertCurrency }}
-                        </span>
-                    </div>
-                    <div>
-                        <strong>
-                            Soft Cap
-                        </strong>
-                        <span>
-                            {{ softCap | convertCurrency }}
-                        </span>
-                    </div>
-                </div>
-                <div class="token-sale-box_body-links">
-                    <h3>
-                        More on HBX
-                    </h3>
-                    <ul>
-                        <li>
-                            <a
-                                href="https://hyperbridge.org/downloads/whitepaper.pdf"
-                                target="_blank">
-                                <i class="fas fa-file-alt" />
-                                White Paper
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                href="https://hyperbridge.org/team"
-                                target="_blank">
-                                <i class="fas fa-users" />
-                                Team
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                href="https://hyperbridge.org/roadmap"
-                                target="_blank">
-                                <i class="fas fa-gamepad" />
-                                Roadmap
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                href="https://hyperbridge.org/"
-                                target="_blank">
-                                <i class="fas fa-home" />
-                                Corp. website
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="token-sale-box_block-divider" />
-            <div class="token-sale-box__body-media">
-                <iframe
-                    width="380"
-                    height="220"
-                    src="https://www.youtube.com/embed/-QEdXZWMe-M"
-                    frameborder="0"
-                    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: 'TokenSale',
-    components: {
-        'ProgressBar': () => import('../../').then(m => m.ProgressBar)
-    },
-    props: {
-        hardCap: {
-            type: Number,
-            default: 0
-        },
-        softCap: {
-            type: Number,
-            default: 0
-        },
-        volume: {
-            type: Number,
-            default: 0
-        },
-        soldDollar: {
-            type: Number,
-            default: 0
-        },
-        soldTokens: {
-            type: Number,
-            default: 0
-        }
-    },
-    computed: {
-        percentProgress() {
-            return Number(this.soldTokens) * 100 / Number(this.volume)
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-    .token-sale-box{
-        display: flex;
-        flex-direction: column;
-        border-radius: 10px;
-        overflow: hidden;
-        color: #fff;
-        box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-    }
-    .token-sale-box__head{
-        background: rgba(0, 0, 0, .45);
-        padding: 10px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        h1, h2, h3, h4, h5{
-            color: #fff;
-        }
-        h1{
-            font-size: 28px;
-            font-weight: 900;
-        }
-        h3{
-            font-size: 18px;
-            font-weight: 100;
-        }
-        .coin-img{
-            height: 60px;
-            width: 60px;
-            margin-right: 20px;
-            img{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-    }
-    .token-sale-box__body{
-        padding: 20px;
-        display: flex;
-        background: #3D3E5D;
-        align-items: stretch;
-        justify-content: space-between;
-        @media (max-width: 1280px){
-            flex-wrap: wrap;
-        }
-    }
-    .token-sale-box_body-info{
-        display: flex;
-        flex-direction: column;
-        min-width: 450px;
-        @media (max-width: 1440px) {
-            width: 50%;
-        }
-        @media (max-width: 1280px) {
-            width: 100%;
-        }
-        .progress.progress-bar-horizontal{
-            height: 15px;
-            border-radius: 10px;
-            .progress-bar{
-                border-radius: 10px;
-            }
-        }
-    }
-    .token-sale-box_body-links{
-        position: relative;
-        text-align: left;
-        h3{
-            color: #fff;
-            padding: 0;
-            margin: 20px 0 5px 0;
-        }
-        ul{
-            padding: 0;
-            margin: 0;
-            display: flex;
-            justify-content: space-between;
-            li{
-                list-style: none;
-                text-align: right;
-                display: flex;
-                align-items: center;
-                padding: 5px 0;
-                justify-content: flex-end;
-                a{
-                    color: #FFFFFF;
-                    text-decoration: none;
-                    i{
-                        width: 20px;
-                        color: #FADC72;
-                        text-align: center;
-                        margin-right: 5px;
-                        font-size: 16px;
-                        transition: all 200ms ease-in-out;
-                    }
-                    &:hover{
-                        color: #FADC72;
-                    }
-                }
-            }
-        }
-    }
-    .token-sale-box__money-info{
-        background: rgba(0, 0, 0, .3);
-        border-radius: 10px;
-        overflow: hidden;
-        display: flex;
-        margin-top: auto;
-        @media (max-width: 1280px) {
-            margin-top: 15px;
-        }
-        div{
-            text-align: left;
-            display: flex;
-            padding: 10px;
-            flex-direction: column;
-            white-space: nowrap;
-            border-left: 3px solid #3D3E5D;
-            min-width: 140px;
-            &:first-child{
-                border-left: none;
-            }
-        }
-    }
-    .token-sale-box__body-media{
-        overflow: hidden;
-        border-radius: 10px;
-        width: 440px;
-        height: 248px;
-        @media (max-width: 1440px) {
-            width: 35%;
-        }
-        @media (max-width: 1280px) {
-            width: 100%;
-            margin-top: 30px;
-        }
-        video{
-            width: auto;
-            height: 158px;
-            border-radius: 10px;
-        }
-        iframe{
-            border-radius: 10px;
-            overflow: hidden;
-            height: 100%;
-            width: 100%;
-        }
-    }
-    .token-sale-box_block-divider{
-        width: 2px;
-        border-radius: 50%;
-        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+50,ffffff+50,ffffff+50&0+0,0.15+15,0.15+86,0+100 */
-        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 15%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 86%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    }
-</style>
diff --git a/packages/hyper-ui/src/components/trade-offer/index.vue b/packages/hyper-ui/src/components/trade-offer/index.vue
index 04856f4..fe1d11f 100644
--- a/packages/hyper-ui/src/components/trade-offer/index.vue
+++ b/packages/hyper-ui/src/components/trade-offer/index.vue
@@ -133,6 +133,7 @@
 export default {
     name: 'TradeOffer',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Author': () => import('../../').then(m => m.Author),
         'Tooltip': () => import('../../').then(m => m.Tooltip),
         'AssetPreview': () => import('../../').then(m => m.AssetPreview)
diff --git a/packages/hyper-ui/src/components/unlock-popup/index.vue b/packages/hyper-ui/src/components/unlock-popup/index.vue
index 2a14d56..4c97497 100644
--- a/packages/hyper-ui/src/components/unlock-popup/index.vue
+++ b/packages/hyper-ui/src/components/unlock-popup/index.vue
@@ -140,6 +140,7 @@ import moment from 'moment'
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup)
     },
     props: ['activated'],
diff --git a/packages/hyper-ui/src/components/user-card/index.vue b/packages/hyper-ui/src/components/user-card/index.vue
index 3541df5..00fb137 100644
--- a/packages/hyper-ui/src/components/user-card/index.vue
+++ b/packages/hyper-ui/src/components/user-card/index.vue
@@ -33,7 +33,7 @@
                     <Img
                         v-else
                         class="user-data__avatar user-avatar"
-                        src="../../static/img/user.png" />
+                        src="https://via.placeholder.com/150" />
                 </Button>
             </div>
             <div
@@ -47,7 +47,7 @@
                 </a>
                 <Img
                     v-else
-                    src="../../static/img/user.png" />
+                    src="https://via.placeholder.com/150" />
             </div>
 
             <div style="text-align: left;">
@@ -123,6 +123,7 @@
 export default {
     components: {
         'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
         'Loading': () => import('../../').then(m => m.Loading)
     },
     props: {
diff --git a/packages/hyper-ui/src/components/video-popup/index.vue b/packages/hyper-ui/src/components/video-popup/index.vue
index 8a7dd4c..e3831ab 100644
--- a/packages/hyper-ui/src/components/video-popup/index.vue
+++ b/packages/hyper-ui/src/components/video-popup/index.vue
@@ -7,7 +7,7 @@
             slot="customContent"
             class="video-popup">
             <div class="video-popup__video-container">
-                <LoadingBarCircle v-if="showLoader" />
+                <LoadingCircle v-if="showLoader" />
                 <youtube
                     v-if="youtube"
                     :video-id="youtube"
@@ -74,8 +74,9 @@ export default {
         'HeadingBar': () => import('../../').then(m => m.HeadingBar),
         'Youtube': () => import('../../').then(m => m.Youtube),
         'Video': () => import('../../').then(m => m.Video),
-        'Twitch': () => import('../../').then(m => m.Twitch),
-        'LoadingBarCircle': () => import('../../').then(m => m.LoadingBarCircle)
+        // 'Twitch': () => import('../../').then(m => m.Twitch),
+        'Button': () => import('../../').then(m => m.Button),
+        'LoadingCircle': () => import('../../').then(m => m.LoadingCircle)
     },
     props: {
         activated: {
diff --git a/packages/hyper-ui/src/components/video/index.vue b/packages/hyper-ui/src/components/video/index.vue
index 5f62a68..f54aae6 100644
--- a/packages/hyper-ui/src/components/video/index.vue
+++ b/packages/hyper-ui/src/components/video/index.vue
@@ -38,7 +38,7 @@ export default {
     components: {
         'Twitch': () => import('../../').then(m => m.Twitch),
         'LocalVideo': () => import('./_local.vue').then(m => m.default),
-        'LoadingBarCircle': () => import('../../').then(m => m.LoadingBarCircle)
+        'LoadingCircle': () => import('../../').then(m => m.LoadingCircle)
     },
     props: {
         src: {
diff --git a/packages/hyper-ui/src/components/wallet/account-edit.vue b/packages/hyper-ui/src/components/wallet/account-edit.vue
index c1098e6..1e88916 100644
--- a/packages/hyper-ui/src/components/wallet/account-edit.vue
+++ b/packages/hyper-ui/src/components/wallet/account-edit.vue
@@ -43,7 +43,7 @@
 <script>
 export default {
     component: {
-        'Button': () => import('../../').then(m => m.Button)
+        'Button': () => import('../../').then(m => m.Button),
     },
     data() {
         return {
diff --git a/packages/hyper-ui/src/components/wallet/base.vue b/packages/hyper-ui/src/components/wallet/base.vue
index 9448956..2b9e460 100644
--- a/packages/hyper-ui/src/components/wallet/base.vue
+++ b/packages/hyper-ui/src/components/wallet/base.vue
@@ -98,7 +98,7 @@
                     </div>
                     <div class="money-info">
                         <img
-                            src="static/img/icons/token-icon.png"
+                            src="/img/icons/token-icon.png"
                             alt="Token">
                         <div>
                             <strong>0 HBX</strong>
@@ -163,8 +163,9 @@ export default {
     name: 'WalletPopup',
     components: {
         'Dropdown': () => import('../../').then(m => m.Dropdown),
-        'DropdownSecond': () => import('../../').then(m => m.DropdownSecond),
-        'Button': () => import('../../').then(m => m.Button)
+        'DropdownSecond': () => import('../../').then(m => m.Dropdown),
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {},
     data() {
@@ -188,7 +189,7 @@ export default {
         width: 350px;
         padding: 30px 20px 20px;
         height: 540px;
-        /*background-image: url("/static/img/backgrounds/1.jpg");*/
+        /*background-image: url("/img/backgrounds/1.jpg");*/
         background-size: 300%;
     }
     .wallet-header {
diff --git a/packages/hyper-ui/src/components/wallet/index.vue b/packages/hyper-ui/src/components/wallet/index.vue
index d0d9217..473b5d3 100644
--- a/packages/hyper-ui/src/components/wallet/index.vue
+++ b/packages/hyper-ui/src/components/wallet/index.vue
@@ -2,7 +2,7 @@
     <div>
         <div class="wallet__info">
             <img
-                src="/static/img/icons/token-icon.png"
+                src="/img/icons/token-icon.png"
                 alt="Token">
             <div class="h2">
                 0 HBX
@@ -43,7 +43,8 @@ export default {
     name: 'WalletPopup',
     props: {},
     components: {
-        'Button': () => import('../../').then(m => m.Button)
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
     },
 }
 </script>
diff --git a/packages/hyper-ui/src/components/wallet/token.vue b/packages/hyper-ui/src/components/wallet/token.vue
index 0d00ebc..94c13c0 100644
--- a/packages/hyper-ui/src/components/wallet/token.vue
+++ b/packages/hyper-ui/src/components/wallet/token.vue
@@ -98,7 +98,8 @@
 export default {
     components: {
         'Input': () => import('../../').then(m => m.Input),
-        'Button': () => import('../../').then(m => m.Button)
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
     },
     data() {
         return {
diff --git a/packages/hyper-ui/src/components/welcome-popup/index.vue b/packages/hyper-ui/src/components/welcome-popup/index.vue
index 1bf9d32..ec5efb1 100644
--- a/packages/hyper-ui/src/components/welcome-popup/index.vue
+++ b/packages/hyper-ui/src/components/welcome-popup/index.vue
@@ -34,6 +34,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup),
         'WelcomeBox': () => import('../../').then(m => m.WelcomeBox)
     },
diff --git a/packages/hyper-ui/src/index.js b/packages/hyper-ui/src/index.js
index 9da508d..7156279 100644
--- a/packages/hyper-ui/src/index.js
+++ b/packages/hyper-ui/src/index.js
@@ -1,317 +1,451 @@
 import * as directives from './directives'
+import Vue from 'vue'
+//TODO I think we should install it
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
-export const PromotionBoxItem = require('./components/promotion-box/item');
-export const PromotionBoxList = require('./components/promotion-box/list');
-export const Notification = require('./components/notification');
-export const NotificationInline = require('./components/notification/inline');
-export const AssetsImporter = require('./components/asset-importer');
-export const Searcher = require('./components/searcher');
-export const RatingStars = require('./components/rating-stars');
-export const RatingBlock = require('./components/rating-block');
-export const Author = require('./components/author');
-export const Tags = require('./components/tags');
-export const StatusDot = require('./components/status-dot');
-export const LoadingLine = require('./components/loading-bar');
-export const LoadingCircle = require('./components/loading-bar/circle');
-export const Card = require('./components/project/card');
-export const Badges = require('./components/project/badges');
-export const Milestone = require('./components/project/milestone');
-export const UpdatesCount = require('./components/project/updates-count');
-export const Tabs = require('./components/tab/tabs');
-export const Tab = require('./components/tab/tab');
-export const SystemRequirements = require('./components/product-overview/system-requirements');
-export const MilestonesLine = require('./components/milestones-line');
-export const SidebarMenu = require('./components/sidebar-menu');
-export const SidebarMenuItem = require('./components/sidebar-menu/menu-item');
-export const Buttons = require('./components/buttons');
-export const LoadMore = require('./components/buttons/load-more');
-export const ButtonArrows = require('./components/buttons/arrows');
-export const MoneyInfo = require('./components/money-info');
-export const Checkbox = require('./components/checkbox');
-export const CheckboxGroup = require('./components/checkbox/group');
-export const Tooltips = require('./components/tooltips');
-export const TooltipUniversal = require('./components/tooltips/universal');
-export const ActivityChart = require('./components/activity-chart');
-export const PopUps = require('./components/popups');
-export const BasicPopup = require('./components/popups/basic');
-export const TermsPopup = require('./components/popups/terms');
-export const PlayPopup = require('./components/popups/play');
-export const AddCollectionPopup = require('./components/popups/add-collection');
-export const MatureContentPopup = require('./components/popups/mature-content');
-export const RangeSlider = require('./components/range-slider/pure');
-export const AssetsGrid = require('./components/assets-grid');
-export const Toggle = require('./components/toggle');
-export const AssetsList = require('./components/assets-list-item/featured-list');
-export const AssetsListDetail = require('./components/assets-list-item');
-export const AssetsItem = require('./components/assets-list-item/item');
-export const Block = require('./components/block');
-export const SimpleBlock = require('./components/block/simple');
-export const CustomModal = require('./components/modal/custom');
-export const Modal = require('./components/modal/');
-export const Dropdown = require('./components/dropdown');
-export const DropdownCustom = require('./components/dropdown-menu/type-3');
-export const DropdownPost = require('./components/dropdown-menu/index');
-export const DropdownCurrency = require('./components/dropdown-menu/currency');
-export const DropdownLang = require('./components/dropdown-menu/language');
-export const DropdownMenu = require('./components/dropdown-menu/type-2');
-export const TradedAssets = require('./components/frequently-traded-assets/index');
-export const GamePlan = require('./components/game-plans/plan');
-export const GamesGrid = require('./components/game-grid/with-description');
-export const GamesGridSimple = require('./components/game-grid/simple');
-export const HeadingBar = require('./components/heading-bar/index');
-export const HeadingBarWithSimpleColor = require('./components/heading-bar/simple-colored');
-export const HeadingBarWithAdditionalAction = require('./components/heading-bar/additional-action');
-export const NewsListNav = require('./components/news-list/navigation');
-export const NewsList = require('./components/news-list/articles');
-export const NewsArticle = require('./components/news-list/article');
-export const Pagination = require('./components/pagination/index');
-export const ProductCommunity = require('./components/community/post-item');
-export const ProductCommunityComment = require('./components/community/comment');
-export const ProductCommunityReply = require('./components/community/reply');
-export const ProjectCard = require('./components/project/card');
-export const UserCard = require('./components/user-card');
-export const ScreenGallery = require('./components/screen-gallery/gallery');
-export const ProductCardDynamic = require('./components/product-card/product-card-dynamic');
-export const ProductCard = require('./components/product-card/product-card');
-export const ProductsCards = require('./components/product-card/product-cards');
-export const CuratorReview = require('./components/curator-review');
-export const CuratorsReviews = require('./components/curator-reviews');
-export const ImagesExplorer = require('./components/images-explorer');
-export const CollectionItem = require('./components/collection/item');
-export const CollectionList = require('./components/collection/list');
-export const GameSeries = require('./components/game-series');
-export const GameDescription = require('./components/game-series/game-description');
-export const GameIncludesList = require('./components/game-series/game-includes-list');
-export const GameIncludesItem = require('./components/game-series/game-includes-item');
-export const ProgressBar = require('./components/progress-bar');
-export const ProgressBarFancy = require('./components/progress-bar/fancy');
-export const ProjectMilestone = require('./components/project/milestone');
-export const CommunitySpotlight = require('./components/community-spotlight');
-export const ProductReview = require('./components/review');
-export const ProductReviewForm = require('./components/review/create');
-export const Banner = require('./components/banner');
-export const LanguageSupport = require('./components/product-overview/language-support');
-export const Input = require('./components/inputs');
-export const InputSearcher = require('./components/inputs/searcher');
-export const TimelineList = require('./components/timeline/list');
-export const TimelineItem = require('./components/timeline/item');
-export const PurchaseBlock = require('./components/purchase-block');
-export const PurchaseOption = require('./components/purchase-option');
-export const ParticipationTier = require('./components/participation-tier');
-export const ContributeForm = require('./components/contribute/form');
-export const ContributePledge = require('./components/contribute/pledge');
-export const CookiePolicy = require('./components/cookie-policy');
-export const WelcomeBox = require('./components/welcome-box');
-export const Share = require('./components/share/type-1');
-export const StreamItem = require('./components/stream');
-export const DottedList = require('./components/list/dots');
-export const GameInstallerModal = require('./components/game-installer');
-export const Emoji = require('./components/emoji');
-export const EmojiSingle = require('./components/emoji/single');
-export const Landing = require('./components/landing');
-export const LandingTitle = require('./components/landing/block-title/simple');
-export const LandingTitleShadow = require('./components/landing/block-title/shadow');
-export const LandingTitleGradient = require('./components/landing/block-title/gradient');
-export const LandingContent = require('./components/landing/block-content/simple');
-export const SimpleBanner = require('./components/banner/simple');
-export const ProfileChooser = require('./components/profile-chooser');
-export const Popup = require('./components/popups');
-export const LogoLoader = require('./components/loading-bar/logo-loader');
-export const QuickLaunch = require('./components/quick-launch');
-export const Dropdown4 = require('./components/dropdown-menu/type-4');
-export const CuratorPanel = require('./components/curator-panel');
-export const CuratorInfo = require('./components/curator-panel/info-card');
-export const JoinCommunity = require('./components/join-community');
-export const Chat = require('./components/chat/chat');
-export const ChatAnswer = require('./components/chat-new/answer-field/field');
-export const ChatMessageSmall = require('./components/chat-new/message-small');
-export const ScrollableContent = require('./components/chat-new/content/scrollable-content');
-export const ChatBase = require('./components/chat-new/base');
-export const ChatMessage = require('./components/chat-new/message');
-export const ChatUser = require('./components/chat-new/user');
-export const ChatGroupSidebar = require('./components/chat-new/content/group-list');
-export const ChatGroup = require('./components/chat-new/content/group');
-export const ArrayView = require('./components/json-editor/array-view');
-export const Breadcrumb = require('./components/breadcrumb');
-export const Button = require('./components/buttons');
-export const Icon = require('./components/icon');
-export const Img = require('./components/img');
-export const InfiniteContent = require('./components/infinite-content');
-export const JsonView = require('./components/json-editor/json-view');
-export const LoadingIndicator = require('./components/loading-indicator');
-export const Spinner = require('./components/spinner');
-export const Vote = require('./components/vote');
-export const RecommendationBlock = require('./components/infinite-content/recommendation-block');
-export const RenderCondition = require('./components/render-condition');
-export const ProModeButton = require('./components/pro-mode/button');
-export const ProModeN1 = require('./components/pro-mode/notice1');
-export const ProModeN2 = require('./components/pro-mode/notice2');
-export const PricingTableV1 = require('./components/pricing-table/v1');
-export const PricingTableV2 = require('./components/pricing-table/v2');
-export const Video = require('./components/video');
-export const DraggableVideo = require('./components/draggable-video');
+// export const ActivityBlock = require('./components/activity-block')
+// export const ActivityChart = require('./components/activity-chart')
+// export const AddCollectionPopup = null
+// export const AddFriends = null
+// export const AddFriendsPopup = require('./components/add-friends')
+// export const AnnouncementPopup = require('./components/announcement-popup')
+// export const ArrayView = require('./components/json-editor/array-view')
+// export const AssetPopup = null
+// export const AssetsGrid = require('./components/assets-grid')
+// export const AssetsImporter = require('./components/asset-importer')
+// export const AssetsList = require('./components/assets-list-item/featured-list')
+// export const AssetsListDetail = require('./components/assets-list-item')
+// export const AssetsPreview = require('./components/asset/preview')
+// export const AssetsStoreCard = require('./components/asset/store-card')
+// export const Author = require('./components/author')
+// export const Badges = require('./components/project/badges')
+// export const Banner = require('./components/banner')
+// export const BasicPopup = require('./components/popups/basic')
+// export const Benchmark = require('./components/benchmark')
+// export const Block = require('./components/block')
+// export const Breadcrumb = require('./components/breadcrumb')
+// export const BrokenPage = require('./components/broken-page')
+// export const BrowserUi = require('./components/browser-ui')
+// export const Button = require('./components/buttons')
+// export const ButtonArrows = require('./components/buttons/arrows')
+// export const Buttons = require('./components/buttons')
+// export const Card = require('./components/project/card')
+// export const Carousel3d = require('./components/carousel-3d')
+// export const Chat = require('./components/chat/chat')
+// export const ChatAnswer = require('./components/chat-new/answer-field/field')
+// export const ChatBase = require('./components/chat-new/base')
+// export const ChatFriendsList = null
+// export const ChatGroup = require('./components/chat-new/content/group')
+// export const ChatGroupNew = null
+// export const ChatGroupSidebar = require('./components/chat-new/content/group-list')
+// export const ChatGroupWelcome = null
+// export const ChatMessage = require('./components/chat-new/message')
+// export const ChatMessageSmall = require('./components/chat-new/message-small')
+// export const ChatPrivate = null
+// export const ChatUser = require('./components/chat-new/user')
+// export const Checkbox = require('./components/checkbox')
+// export const CheckboxGroup = require('./components/checkbox/group')
+// export const Claim = require('./components/claim')
+// export const Clock = require('./components/clock')
+// export const CollectionItem = require('./components/collection/item')
+// export const CollectionList = require('./components/collection/list')
+// export const CommunitySpotlight = require('./components/community-spotlight')
+// export const ContentNavigation = null
+// export const ContributeForm = require('./components/contribute/form')
+// export const ContributePledge = require('./components/contribute/pledge')
+// export const ContributorBox = require('./components/contributor-box')
+// export const CookiePolicy = require('./components/cookie-policy')
+// export const CuratorInfo = require('./components/curator-panel/info-card')
+// export const CuratorPanel = require('./components/curator-panel')
+// export const CuratorReview = require('./components/curator-review')
+// export const CuratorReviews = null
+// export const CuratorsReviews = require('./components/curator-reviews')
+// export const CurrencyDropdown = null
+// export const CustomModal = require('./components/modal/custom')
+// export const DecentralizationMeter = null
+// export const DottedList = require('./components/list/dots')
+// export const DraggableVideo = require('./components/draggable-video')
+// export const Dropdown = require('./components/dropdown-menu/type-2')
+// export const Dropdown4 = require('./components/dropdown-menu/type-4')
+// export const DropdownCurrency = require('./components/dropdown-menu/currency')
+// export const DropdownCustom = require('./components/dropdown-menu/type-3')
+// export const DropdownLang = require('./components/dropdown-menu/language')
+// export const DropdownMenu = require('./components/dropdown-menu/type-2')
+// export const DropdownPost = require('./components/dropdown-menu')
+// export const Emoji = require('./components/emoji')
+// export const EmojiSingle = require('./components/emoji/single')
+// export const ExchangeBar = require('./components/list/exchange-bar')
+// export const FTradedAssets = require('./components/frequently-traded-assets')
+// export const GameCard = require('./components/game-card')
+// export const GameDescription = require('./components/game-series/game-description')
+// export const GameIncludesItem = require('./components/game-series/game-includes-item')
+// export const GameIncludesList = require('./components/game-series/game-includes-list')
+// export const GameInstaller = null
+// export const GameLibraryCard = null
+// export const GamePlan = require('./components/game-plans/plan')
+// export const GameSeries = require('./components/game-series')
+// export const GamesExplorer = require('./components/games-explorer')
+// export const GamesGrid = require('./components/game-grid/with-description')
+// export const GamesGridSimple = require('./components/game-grid/simple')
+// export const GamesList = null
+// export const GiftBox = require('./components/gift-box')
+// export const Giphy = require('./components/giphy')
+// export const GlobalSearch = require('./components/global-search')
+// export const Guide = require('./components/guide')
+// export const Heading = require('./components/heading')
+// export const HeadingBar = require('./components/heading-bar')
+// export const HeadingBarWithAdditionalAction = require('./components/heading-bar/additional-action')
+// export const HeadingBarWithSimpleColor = require('./components/heading-bar/simple-colored')
+// export const Icon = require('./components/icon')
+// export const ImagesExplorer = require('./components/images-explorer')
+// export const Img = require('./components/img')
+// export const InfiniteContent = require('./components/infinite-content')
+// export const Input = require('./components/inputs')
+// export const InputSearcher = require('./components/inputs/searcher')
+// export const JoinCommunity = require('./components/join-community')
+// export const JsonView = require('./components/json-editor/json-view')
+// export const Landing = require('./components/landing')
+// export const LandingBenefactor = require('./components/landing/benefactor')
+// export const LandingBlock = null
+// export const LandingBlockContentLevel = require('./components/landing/block-content/level')
+// export const LandingBlockContentWithFeatureItem = require('./components/landing/block-content/feature-item')
+// export const LandingBlockTitle = require('./components/landing/block-title/simple')
+// export const LandingBlockTitleGradient = require('./components/landing/block-title/gradient')
+// export const LandingBlockTitleShadow = require('./components/landing/block-title/shadow')
+// export const LandingButton = null
+// export const LandingContent = require('./components/landing/block-content/simple')
+// export const LandingDivider = require('./components/landing/divider')
+// export const LandingFeatureItem = null
+// export const LandingGradientBlock = null
+// export const LandingLevel = require('./components/landing/level')
+// export const LandingRewardList = require('./components/landing/block-content/reward-list')
+// export const LandingSlider = null
+// export const LandingTab = require('./components/landing/block-content/tab')
+// export const LandingTabs = require('./components/landing/block-content/tabs')
+// export const LandingTitle = require('./components/landing/block-title/simple')
+// export const LandingTitleGradient = require('./components/landing/block-title/gradient')
+// export const LandingTitleShadow = require('./components/landing/block-title/shadow')
+// export const LanguageSupport = require('./components/product-overview/language-support')
+// export const LanguagesDropdown = null
+// export const LineChart = require('./components/charts/line')
+// export const LoadMore = require('./components/buttons/load-more')
+// export const LoadingCircle = require('./components/loading-bar/circle')
+// export const LoadingIndicator = require('./components/loading-indicator')
+// export const LoadingLine = require('./components/loading-bar')
+// export const LogoLoader = require('./components/loading-bar/logo-loader')
+// export const MetroGrid = require('./components/metro/grid')
+// export const MetroItem = require('./components/metro/metro-item')
+// export const MetroTile = require('./components/metro/metro-tile')
+// export const Milestone = require('./components/project/milestone')
+// export const MilestonesLine = require('./components/milestones-line')
+// export const Modal = require('./components/modal/')
+// export const ModalList = null
+// export const MoneyInfo = require('./components/money-info')
+// export const NewsArticle = require('./components/news-list/article')
+// export const NewsList = require('./components/news-list/articles')
+// export const NewsListNav = require('./components/news-list/navigation')
+// export const NewsListNavigation = null
+// export const Notification = require('./components/notification')
+// export const NotificationInline = require('./components/notification/inline')
+// export const OptionBlock = null
+// export const Pagination = require('./components/pagination/index')
+// export const ParticipationTier = require('./components/participation-tier')
+// export const PlayPopup = null
+// export const Popup = require('./components/popups')
+// export const PricingTableV1 = require('./components/pricing-table/v1')
+// export const PricingTableV2 = require('./components/pricing-table/v2')
+// export const ProModeButton = require('./components/pro-mode/button')
+// export const ProModeN1 = require('./components/pro-mode/notice1')
+// export const ProModeN2 = require('./components/pro-mode/notice2')
+// export const ProductCard = require('./components/product-card/product-card')
+// export const ProductCardDynamic = require('./components/product-card/product-card-dynamic')
+// export const ProductCommunity = require('./components/community/post-item')
+// export const ProductCommunityComment = require('./components/community/comment')
+// export const ProductCommunityPost = null
+// export const ProductCommunityReply = require('./components/community/reply')
+// export const ProductReview = require('./components/review')
+// export const ProductReviewForm = require('./components/review/create')
+// export const ProductsCards = require('./components/product-card/product-cards')
+// export const ProfileChooser = require('./components/profile-chooser')
+// export const ProfilePicker = require('./components/profile-picker')
+// export const ProgressBar = require('./components/progress-bar')
+// export const ProgressBarFancy = require('./components/progress-bar/fancy')
+// export const ProjectCard = require('./components/project/card')
+// export const ProjectMilestone = require('./components/project/milestone')
+// export const PromotionBoxItem = require('./components/promotion-box/item')
+// export const PromotionBoxList = require('./components/promotion-box/list')
+// export const PurchaseBlock = require('./components/purchase-block')
+// export const PurchaseOption = require('./components/purchase-option')
+// export const QrCode = require('./components/tooltip/qr-code')
+// export const QuickLaunch = require('./components/quick-launch')
+// export const RangeSlider = require('./components/range-slider/pure')
+// export const RatingBlock = require('./components/rating-block')
+// export const RatingStars = require('./components/rating-stars')
+// export const RecommendationBlock = require('./components/infinite-content/recommendation-block')
+// export const RenderCondition = require('./components/render-condition')
+// export const Review = require('./components/review')
+// export const ReviewForm = null
+// export const ScreenGallery = require('./components/screen-gallery/gallery')
+// export const ScrollableContent = require('./components/chat-new/content/scrollable-content')
+// export const SearchBar = null
+// export const Searcher = require('./components/searcher')
+// export const SecurityCheck = require('./components/security-check')
+// export const SendingFundsPopup = null
+// export const Settings = null
+// export const Share = require('./components/share/type-1')
+// export const SidebarMenu = require('./components/sidebar-menu')
+// export const SidebarMenuItem = require('./components/sidebar-menu/menu-item')
+// export const SimpleBanner = require('./components/banner/simple')
+// export const SimpleBlock = require('./components/block/simple')
+// export const SimpleTable = require('./components/table-simple')
+// export const Slide = null
+// export const SocialConnect = require('./components/social-connect')
+// export const Spinner = require('./components/spinner')
+// export const StatusDot = require('./components/status-dot')
+// export const StreamCarousel = require('./components/stream/carousel')
+// export const StreamItem = require('./components/stream')
+// export const Swiper = null
+// export const SystemRequirements = require('./components/product-overview/system-requirements')
+// export const Tab = require('./components/tab/tab')
+// export const Tabs = require('./components/tab/tabs')
+// export const Tags = require('./components/tags')
+// export const TagsCount = require('./components/tags-count')
+// export const TermsPopup = require('./components/popups/terms')
+// export const TextFormatting = require('./components/text-formatting')
+// export const TextLabel = require('./components/text-label')
+// export const TimelineItem = require('./components/timeline/item')
+// export const TimelineList = require('./components/timeline/list')
+// export const Toggle = require('./components/toggle')
+// export const Tooltip = require('./components/tooltip/universal')
+// export const TooltipUniversal = require('./components/tooltips/universal')
+// export const Tooltips = require('./components/tooltips')
+// export const TradeOffer = require('./components/trade-offer')
+// export const TradedAssets = null
+// export const Twitch = require('./components/twitch')
+// export const UpdatesCount = require('./components/project/updates-count')
+// export const UserCard = require('./components/user-card')
+// export const Video = require('./components/video')
+// export const VideoList = require('./components/video-list')
+// export const ViewReview = null
+// export const Vote = require('./components/vote')
+// export const WalletDeposit = require('./components/wallet/deposit')
+// export const WalletTransfer = require('./components/wallet/transfer')
+// export const WelcomeBox = require('./components/welcome-box')
+// export const Youtube = require('./components/youtube')
 
-export const WalletBase = require('./components/wallet/base.vue');
-export const WalletMain = require('./components/wallet');
-export const WalletTransfer = require('./components/wallet/transfer');
-export const WalletDeposit = require('./components/wallet/deposit');
-export const WalletEdit = require('./components/wallet/account-edit');
 
-export const Header = require('./components/headers/basic');
-export const SlimHeader = require('./components/headers/slim');
+export const Swiper = swiper
+export const SwiperSlide = swiperSlide
+export const PromotionBoxItem = require('./components/promotion-box/item')
+export const PromotionBoxList = require('./components/promotion-box/list')
+export const Notification = require('./components/notification')
+export const NotificationInline = require('./components/notification/inline')
+export const AssetsImporter = require('./components/asset-importer')
+export const Searcher = require('./components/searcher')
+export const RatingStars = require('./components/rating-stars')
+export const RatingBlock = require('./components/rating-block')
+export const Author = require('./components/author')
+export const Tags = require('./components/tags')
+export const StatusDot = require('./components/status-dot')
+export const LoadingLine = require('./components/loading-bar')
+export const LoadingCircle = require('./components/loading-bar/circle')
+export const Card = require('./components/project/card')
+export const Badges = require('./components/project/badges')
+export const Milestone = require('./components/project/milestone')
+export const UpdatesCount = require('./components/project/updates-count')
+export const Tabs = require('./components/tab/tabs')
+export const Tab = require('./components/tab/tab')
+export const SystemRequirements = require('./components/product-overview/system-requirements')
+export const MilestonesLine = require('./components/milestones-line')
+export const SidebarMenu = require('./components/sidebar-menu')
+export const SidebarMenuItem = require('./components/sidebar-menu/menu-item')
+export const Buttons = require('./components/buttons')
+export const LoadMore = require('./components/buttons/load-more')
+export const ButtonArrows = require('./components/buttons/arrows')
+export const MoneyInfo = require('./components/money-info')
+export const Checkbox = require('./components/checkbox')
+export const CheckboxGroup = require('./components/checkbox/group')
+export const Tooltips = require('./components/tooltips')
+export const TooltipUniversal = require('./components/tooltips/universal')
+export const ActivityChart = require('./components/activity-chart')
+export const PopUps = require('./components/popups')
+export const BasicPopup = require('./components/popups/basic')
+export const TermsPopup = require('./components/popups/terms')
+export const PlayPopup = require('./components/popups/play')
+export const AddCollectionPopup = require('./components/popups/add-collection')
+export const MatureContentPopup = require('./components/popups/mature-content')
+export const RangeSlider = require('./components/range-slider/pure')
+export const AssetsGrid = require('./components/assets-grid')
+export const Toggle = require('./components/toggle')
+export const AssetsList = require('./components/assets-list-item/featured-list')
+export const AssetsListDetail = require('./components/assets-list-item')
+export const Block = require('./components/block')
+export const SimpleBlock = require('./components/block/simple')
+export const CustomModal = require('./components/modal/custom')
+export const Modal = require('./components/modal/')
+export const Dropdown = require('./components/dropdown')
+export const DropdownCustom = require('./components/dropdown-menu/type-3')
+export const DropdownPost = require('./components/dropdown-menu/index')
+export const DropdownCurrency = require('./components/dropdown-menu/currency')
+export const DropdownLang = require('./components/dropdown-menu/language')
+export const DropdownMenu = require('./components/dropdown-menu/type-2')
+export const FTradedAssets = require('./components/frequently-traded-assets/index')
+export const GamePlan = require('./components/game-plans/plan')
+export const GamesGrid = require('./components/game-grid/with-description')
+export const GamesGridSimple = require('./components/game-grid/simple')
+export const HeadingBar = require('./components/heading-bar/index')
+export const HeadingBarWithSimpleColor = require('./components/heading-bar/simple-colored')
+export const HeadingBarWithAdditionalAction = require('./components/heading-bar/additional-action')
+export const NewsListNav = require('./components/news-list/navigation')
+export const NewsList = require('./components/news-list/articles')
+export const NewsArticle = require('./components/news-list/article')
+export const Pagination = require('./components/pagination/index')
+export const ProductCommunity = require('./components/community/post-item')
+export const ProductCommunityComment = require('./components/community/comment')
+export const ProductCommunityReply = require('./components/community/reply')
+export const ProductCommunityPost = require('./components/community/post-item')
+export const ProjectCard = require('./components/project/card')
+export const UserCard = require('./components/user-card')
+export const ScreenGallery = require('./components/screen-gallery/gallery')
+export const ProductCardDynamic = require('./components/product-card/product-card-dynamic')
+export const ProductCard = require('./components/product-card/product-card')
+export const ProductsCards = require('./components/product-card/product-cards')
+export const CuratorReview = require('./components/curator-review')
+export const CuratorReviews = require('./components/curator-reviews')
+export const ImagesExplorer = require('./components/images-explorer')
+export const CollectionItem = require('./components/collection/item')
+export const CollectionList = require('./components/collection/list')
+export const GameSeries = require('./components/game-series')
+export const GameDescription = require('./components/game-series/game-description')
+export const GameIncludesList = require('./components/game-series/game-includes-list')
+export const GameIncludesItem = require('./components/game-series/game-includes-item')
+export const ProgressBar = require('./components/progress-bar')
+export const ProgressBarFancy = require('./components/progress-bar/fancy')
+export const ProjectMilestone = require('./components/project/milestone')
+export const CommunitySpotlight = require('./components/community-spotlight')
+export const ProductReview = require('./components/review')
+export const ProductReviewForm = require('./components/review/create')
+export const ProductViewReview = require('./components/review/view')
+export const Banner = require('./components/banner')
+export const LanguageSupport = require('./components/product-overview/language-support')
+export const Input = require('./components/inputs')
+export const InputSearcher = require('./components/inputs/searcher')
+export const TimelineList = require('./components/timeline/list')
+export const TimelineItem = require('./components/timeline/item')
+export const PurchaseBlock = require('./components/purchase-block')
+export const PurchaseOption = require('./components/purchase-option')
+export const OptionTag = require('./components/option-tag')
+export const ParticipationTier = require('./components/participation-tier')
+export const ContributeForm = require('./components/contribute/form')
+export const ContributePledge = require('./components/contribute/pledge')
+export const CookiePolicy = require('./components/cookie-policy')
+export const WelcomeBox = require('./components/welcome-box')
+export const Share = require('./components/share/type-1')
+export const StreamItem = require('./components/stream')
+export const List = require('./components/list')
+export const DottedList = require('./components/list/dots')
+export const GameInstallerModal = require('./components/game-installer')
+export const Emoji = require('./components/emoji')
+export const EmojiSingle = require('./components/emoji/single')
+export const Landing = require('./components/landing')
+export const LandingBlockTitle = require('./components/landing/block-title/simple')
+export const LandingBlockTitleShadow = require('./components/landing/block-title/shadow')
+export const LandingBlockDivider = require('./components/landing/block-content/divider')
+export const LandingBlockTitleGradient = require('./components/landing/block-title/gradient')
+export const LandingContent = require('./components/landing/block-content/simple')
+export const SimpleBanner = require('./components/banner/simple')
+export const ProfileChooser = require('./components/profile-chooser')
+export const Popup = require('./components/popups')
+export const LogoLoader = require('./components/loading-bar/logo-loader')
+export const QuickLaunch = require('./components/quick-launch')
+export const Dropdown4 = require('./components/dropdown-menu/type-4')
+export const CuratorPanel = require('./components/curator-panel')
+export const CuratorInfo = require('./components/curator-panel/info-card')
+export const JoinCommunity = require('./components/join-community')
+export const Chat = require('./components/chat/chat')
+export const ChatAnswer = require('./components/chat-new/answer-field/field')
+export const ChatMessageSmall = require('./components/chat-new/message-small')
+export const ScrollableContent = require('./components/chat-new/content/scrollable-content')
+export const ChatBase = require('./components/chat-new/base')
+export const ChatMessage = require('./components/chat-new/message')
+export const ChatUser = require('./components/chat-new/user')
+export const ChatGroupSidebar = require('./components/chat-new/content/group-list')
+export const ChatGroup = require('./components/chat-new/content/group')
+export const ArrayView = require('./components/json-editor/array-view')
+export const Breadcrumb = require('./components/breadcrumb')
+export const Button = require('./components/buttons')
+export const ButtonFav = require('./components/buttons/favorite')
+export const Icon = require('./components/icon')
+export const Img = require('./components/img')
+export const JsonView = require('./components/json-editor/json-view')
+export const LoadingIndicator = require('./components/loading-indicator')
+export const Spinner = require('./components/spinner')
+export const Vote = require('./components/vote')
+export const IdeaCard = require('./components/idea-card')
+export const RenderCondition = require('./components/render-condition')
+export const ProModeButton = require('./components/pro-mode/button')
+export const ProModeN1 = require('./components/pro-mode/notice1')
+export const ProModeN2 = require('./components/pro-mode/notice2')
+export const PricingTableV1 = require('./components/pricing-table/v1')
+export const PricingTableV2 = require('./components/pricing-table/v2')
+export const Video = require('./components/video')
+export const DraggableVideo = require('./components/draggable-video')
 
-export const PrivacyPopup = require('./components/privacy-popup');
-export const WelcomePopup = require('./components/welcome-popup');
-export const DownloadPopup = require('./components/download-popup');
-export const UnlockPopup = require('./components/unlock-popup');
-// export const ClaimPopup = require('./components/claim-popup');
-export const LoginPopup = require('./components/login-popup');
-export const RegisterPopup = require('./components/register-popup');
-export const SendFundsPopup = require('./components/send-funds-popup');
-export const PurchasePopup = require('./components/purchase-popup');
-export const MissionControlPopup = require('./components/mission-control-popup');
-export const Clock = require('./components/clock');
-export const Sidepanel = require('./components/sidepanel');
-export const QrCode = require('./components/qr-code');
-export const ShortcutSidebar = require('./components/shortcut-sidebar');
+export const WalletBase = require('./components/wallet/base.vue')
+export const WalletMain = require('./components/wallet')
+export const WalletTransfer = require('./components/wallet/transfer')
+export const WalletDeposit = require('./components/wallet/deposit')
+export const WalletEdit = require('./components/wallet/account-edit')
 
-export const Settings = require('./components/settings');
-export const SocialConnect = require('./components/social-connect');
+export const Header = require('./components/headers/basic')
+export const SlimHeader = require('./components/headers/slim')
 
-export const LoadingLogo = require('./components/loading-bar/logo-loader');
-export const CurrencyDropdown = require('./components/dropdown-menu/currency');
-export const LanguageDropdown = require('./components/dropdown-menu/language');
+export const PrivacyPopup = require('./components/privacy-popup')
+export const WelcomePopup = require('./components/welcome-popup')
+export const DownloadPopup = require('./components/download-popup')
+export const UnlockPopup = require('./components/unlock-popup')
+export const LoginPopup = require('./components/login-popup')
+export const RegisterPopup = require('./components/register-popup')
+export const SendFundsPopup = require('./components/send-funds-popup')
+export const PurchasePopup = require('./components/purchase-popup')
+export const MissionControlPopup = require('./components/mission-control-popup')
+export const Clock = require('./components/clock')
+export const Sidepanel = require('./components/sidepanel')
+export const QrCode = require('./components/qr-code')
+export const ShortcutSidebar = require('./components/shortcut-sidebar')
+export const ShortcutIcon = require('./components/shortcut-icon')
+export const ShortcutGrid = require('./components/shortcut-grid')
+export const ShortcutGridItem = require('./components/shortcut-grid-item')
 
-export const CryptoIcon = require('./components/icon/crypto');
+export const Settings = require('./components/settings')
+export const SocialConnect = require('./components/social-connect')
 
-export const ImageOverlay = require('./components/image-overlay');
-export const ProductCards = require('./components/product-card/product-cards');
-export const ProductSlider = require('./components/product-slider');
-export const GameGrid = require('./components/game-grid/simple');
-export const ContentNavigation = require('./components/content-navigation');
-export const AssetsListItem = require('./components/assets-list-item');
-export const NewsListNavigation = require('./components/news-list/navigation');
-export const NewsListArticles = require('./components/news-list/articles');
-export const GamesExplorer = require('./components/games-explorer');
-export const AssetsExplorer = require('./components/assets-explorer');
-export const DownloadBlock = require('./components/download-block');
-export const HeadingBarFields = require('./components/heading-bar');
-export const TermsBlock = require('./components/heading-bar');
-export const PrivacyBlock = require('./components/heading-bar');
-export const Loading = require('./components/loading-indicator');
-export const Message = require('./components/message');
-export const Drawer = require('./components/drawer');
-export const SimpleTable = require('./components/table-simple');
-export const ScrollTable = require('./components/scroll-table');
-export const TextFormatting = require('./components/text-formatting');
-// export const Switch = require('./components/switch');
+export const LoadingLogo = require('./components/loading-bar/logo-loader')
+export const CurrencyDropdown = require('./components/dropdown-menu/currency')
+export const LanguageDropdown = require('./components/dropdown-menu/language')
 
-
-export const Claim = require('./components/curator-panel/claim');
-export const AssetPopup = require('./components/asset-overview-popup');
-
-
-
-// export const Swiper = re
-
-
-//BlockContentWithFeatureItem': () => import('~/components/landing / block - content / feature - item').then(m => m.default),
-// 'c-header': () => import('~/components/headers/basic').then(m => m.default || m),
-// 'c-slim-header': () => import('~/components/headers/slim').then(m => m.default || m),
-// 'c-popup': () => import('@ericmuyser/hyper-ui').then(m => m.default || m),
-// 'c-basic-popup': () => import('~/components/popups/basic').then(m => m.default || m),
-// 'c-custom-modal': () => import('~/components/modal/custom').then(m => m.default || m),
-// 'c-terms-popup': () => import('~/components/terms-popup').then(m => m.default || m),
-// 'c-privacy-popup': () => import('~/components/privacy-popup').then(m => m.default || m),
-// 'c-collection-navigation': () => import('~/components/navigation/collection').then(m => m.default || m),
-// 'c-wallet-navigation': () => import('~/components/navigation/wallet').then(m => m.default || m),
-// 'c-account-navigation': () => import('~/components/navigation/account').then(m => m.default || m),
-// 'c-settings-navigation': () => import('~/components/navigation/settings').then(m => m.default || m),
-// 'c-help-navigation': () => import('~/components/navigation/help').then(m => m.default || m),
-// 'c-funding-navigation': () => import('~/components/navigation/funding').then(m => m.default || m),
-// 'c-store-navigation': () => import('~/components/navigation/store').then(m => m.default || m),
-// 'c-asset-navigation': () => import('~/components/navigation/asset').then(m => m.default || m),
-// 'c-product-navigation': () => import('~/components/navigation/product').then(m => m.default || m),
-// 'c-project-navigation': () => import('~/components/navigation/project').then(m => m.default || m),
-// 'c-chat-navigation': () => import('~/components/navigation/chat').then(m => m.default || m),
-// 'c-idea-navigation': () => import('~/components/navigation/idea').then(m => m.default || m),
-// 'c-community-navigation': () => import('~/components/navigation/community').then(m => m.default || m),
-// 'c-welcome-popup': () => import('~/components/welcome-popup').then(m => m.default || m),
-// 'c-download-popup': () => import('~/components/download-popup').then(m => m.default || m),
-// 'c-unlock-popup': () => import('~/components/unlock-popup').then(m => m.default || m),
-// 'c-claim-popup': () => import('~/components/claim-popup').then(m => m.default || m),
-// 'c-login-popup': () => import('~/components/login-popup').then(m => m.default || m),
-// 'c-register-popup': () => import('~/components/register-popup').then(m => m.default || m),
-// 'c-send-funds-popup': () => import('~/components/send-funds-popup').then(m => m.default || m),
-// 'c-purchase-popup': () => import('~/components/purchase-popup').then(m => m.default || m),
-// 'c-mission-control-popup': () => import('~/components/mission-control-popup').then(m => m.default || m),
-// 'c-add-collection-popup': () => import('~/components/popups/add-collection').then(m => m.default || m),
-// 'c-user-card': () => import('~/components/user-card').then(m => m.default || m),
-// 'c-clock': () => import('~/components/clock').then(m => m.default || m),
-// 'c-status-dot': () => import('~/components/status-dot').then(m => m.default || m),
-// 'c-sidepanel': () => import('~/components/sidepanel').then(m => m.default || m),
-// 'c-cookie-policy': () => import('~/components/cookie-policy').then(m => m.default || m),
-// 'c-qr-code': () => import('~/components/qr-code').then(m => m.default || m),
-// 'c-shortcut-sidebar': () => import('~/components/shortcut-sidebar').then(m => m.default || m),
-// 'c-load-more': () => import('~/components/buttons/load-more').then(m => m.default || m),
-// 'c-sidebar-menu-link': () => import('~/components/sidebar-menu/menu-item').then(m => m.default || m),
-// 'c-profile-chooser': () => import('~/components/profile-chooser').then(m => m.default || m),
-// 'c-settings': () => import('~/components/settings').then(m => m.default || m),
-// 'c-social-connect': () => import('~/components/social-connect').then(m => m.default || m),
-// 'c-draggable-video': () => import('~/components/draggable-video').then(m => m.default || m),
-// 'c-video': () => import('~/components/draggable-video').then(m => m.default || m)
-// import HeadingBar from '@/components/heading-bar/simple-colored'
-// import DottedList from '@/components/list/dots'
-// Layout from '../components/front-layout'
-// HeadingBar from '../components/heading-bar'
-// HeadingBarWithSimpleColor from '../components/heading-bar/simple-colored'
-// Button from '../components/buttons'
-// Block from '../components/block'
-// Switch from '../components/switch'
-// Checkbox from '../components/checkbox'
-// InfiniteContent from '../components/infinite-content'
-// Icon from '../components/icon'
-// Input from '../components/inputs'
-// InputSearcher from '../components/inputs/searcher'
-// LoadingIndicator from '../components/loading-indicator'
-// Breadcrumb from '../components/breadcrumb'
-// Img from '../components/img'
-// Access from '../components/access'
-// Vote from '../components/vote'
-// JsonView from '../components/json-editor/json-view'
-// ArrayView from '../components/json-editor/array-view'
-// Spinner from '../components/spinner'
-// Tabs from '../components/tab/tabs'
-// Tab from '../components/tab/tab'
-// import HeadingBar from '@/components/heading-bar/simple-colored'
-// import DottedList from '@/components/list/dots'
-
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-// export const zzz = () => import('./components/zzz')
-
-
-export const init = function() {
-
-}
+export const ImageOverlay = require('./components/image-overlay')
+export const ProductCards = require('./components/product-card/product-cards')
+export const ProductSlider = require('./components/product-slider')
+export const GameGrid = require('./components/game-grid/simple')
+export const ContentNavigation = require('./components/content-navigation')
+export const AssetsListItem = require('./components/assets-list-item')
+export const NewsListNavigation = require('./components/news-list/navigation')
+export const NewsListArticles = require('./components/news-list/articles')
+export const GamesExplorer = require('./components/games-explorer')
+export const AssetsExplorer = require('./components/assets-explorer')
+export const DownloadBlock = require('./components/download-block')
+export const HeadingBarFields = require('./components/heading-bar')
+export const TermsBlock = require('./components/heading-bar')
+export const PrivacyBlock = require('./components/heading-bar')
+export const Loading = require('./components/loading-indicator')
+export const Message = require('./components/message')
+export const Drawer = require('./components/drawer')
+export const SimpleTable = require('./components/table-simple')
+export const SendingFundsPopup = require('./components/send-funds-popup')
+export const TextFormatting = require('./components/text-formatting')
+export const TokenSale = require('./components/token-sale-box')
+export const Guide = require('./components/guide')
+export const VideoPopup = require('./components/video-popup')
+export const Youtube = require('./components/youtube')
+// export const InfiniteContent = require('./components/infinite-content')
diff --git a/packages/hyper-ui/yarn.lock b/packages/hyper-ui/yarn.lock
index b8e277f..a912426 100644
--- a/packages/hyper-ui/yarn.lock
+++ b/packages/hyper-ui/yarn.lock
@@ -98,6 +98,13 @@ debug@^2.6.6:
   dependencies:
     ms "2.0.0"
 
+dom7@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-2.1.3.tgz#a736f9c3bfbc4ca039a81cd095f97d1d7f3de19c"
+  integrity sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==
+  dependencies:
+    ssr-window "^1.0.1"
+
 emoji-mart-vue@^2.6.6:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/emoji-mart-vue/-/emoji-mart-vue-2.6.6.tgz#afd60da47ff0b59938b3d3cd90dacab6ab0f531e"
@@ -238,6 +245,11 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -307,6 +319,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"
+  integrity sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -321,6 +338,14 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+swiper@^4.0.7:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-4.5.1.tgz#ed43998e780ceb478610079c8d23fd425eca636f"
+  integrity sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==
+  dependencies:
+    dom7 "^2.1.3"
+    ssr-window "^1.0.1"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -328,6 +353,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+vue-awesome-swiper@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz#05500b501ffb3fec9bf7eb9985bcf4ae8360ed9e"
+  integrity sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==
+  dependencies:
+    object-assign "^4.1.1"
+    swiper "^4.0.7"
+
 vue-multiselect@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/vue-multiselect/-/vue-multiselect-2.1.6.tgz#5be5d811a224804a15c43a4edbb7485028a89c7f"