diff --git a/src/quo/components/community/token_gating.cljs b/src/quo/components/community/token_gating.cljs
index 0de2b1d6cb..3cef0b0a42 100644
--- a/src/quo/components/community/token_gating.cljs
+++ b/src/quo/components/community/token_gating.cljs
@@ -3,7 +3,7 @@
     [clojure.string :as string]
     [quo.components.community.style :as style]
     [quo.components.markdown.text :as text]
-    [quo.components.tags.token-tag :as token-tag]
+    [quo.components.tags.token-tag.view :as token-tag]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -14,17 +14,17 @@
    {:style (style/token-row padding?)}
    (doall
     (map-indexed (fn [token-index token]
-                   (let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
+                   (let [{:keys [img-src amount sufficient? purchasable?]} token]
                      ^{:key token-index}
                      [rn/view {:style style/token-tag-spacing}
-                      [token-tag/token-tag
-                       {:symbol      (:symbol token)
-                        :value       amount
-                        :size        24
-                        :sufficient? sufficient?
-                        :purchasable purchasable?
-                        :loading?    loading?
-                        :img-src     img-src}]]))
+                      [token-tag/view
+                       {:token-symbol  (:symbol token)
+                        :token-value   amount
+                        :size          :size-24
+                        :options       (cond
+                                         sufficient?  :hold
+                                         purchasable? :add)
+                        :token-img-src img-src}]]))
                  tokens))])
 
 (defn- internal-view
diff --git a/src/quo/components/tags/token_tag.cljs b/src/quo/components/tags/token_tag.cljs
deleted file mode 100644
index 3c9e183553..0000000000
--- a/src/quo/components/tags/token_tag.cljs
+++ /dev/null
@@ -1,124 +0,0 @@
-(ns quo.components.tags.token-tag
-  (:require
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
-    [react-native.core :as rn]))
-
-(def themes
-  {:light {:background-color colors/neutral-20}
-   :dark  {:background-color colors/neutral-80}})
-
-(defn get-value-from-size
-  [size big-option small-option]
-  (if (= size :big) big-option small-option))
-
-(def icon-container-styles
-  {:display         :flex
-   :align-items     :center
-   :justify-content :center
-   :position        :absolute
-   :border-radius   20
-   :margin-left     2})
-
-(defn tag-container
-  [size]
-  {:height         (get-value-from-size size 32 24)
-   :align-items    :center
-   :flex-direction :row
-   :border-radius  20})
-
-(defn tag
-  "[tag opts \"label\"]]
-   opts
-   {
-    :size :small/:big
-    :token-img-src :token-img-src
-    :token-img-style {}
-    :border-color :color
-    :overlay child-elements
-    }"
-  [_ _]
-  (fn [{:keys [size img-src img-style border-color overlay]
-        :or   {size :small}}
-       label]
-    [rn/view
-     {:style (when border-color
-               {:border-color  border-color
-                :border-radius 20
-                :border-width  1})}
-     [rn/view
-      {:style (merge (tag-container size) (get themes (theme/get-theme)))}
-      [rn/image
-       {:src   img-src
-        :style (merge
-                {:height       (get-value-from-size size 28 20)
-                 :width        (get-value-from-size size 28 20)
-                 :margin-left  2
-                 :margin-right (get-value-from-size size 8 6)}
-                img-style)}]
-      [text/text
-       {:weight :medium
-        :number-of-lines 1
-        :style
-        {:margin-right (get-value-from-size size 12 11)}
-        :size (get-value-from-size size :paragraph-2 :label)} label]
-      overlay]]))
-
-(defn loading-icon
-  []
-  [rn/view
-   {:style {:align-items     :center
-            :justify-content :center
-            :position        :absolute
-            :right           -8
-            :top             -8}}
-   [icons/icon :t/checktoken
-    {:no-color true
-     :size     20}]])
-
-(defn icon
-  [size border-color sufficient?]
-  [rn/view
-   {:style (merge
-            icon-container-styles
-            {:background-color border-color
-             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
-             :border-width     1
-             :right            (get-value-from-size size -3.75 -5.75)
-             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
-   [icons/icon (if sufficient? :i/hold :i/add)
-    {:no-color true
-     :size     12}]])
-
-(defn token-tag
-  "[token-tag opts]
-   opts
-   {
-    :symbol string
-    :value string
-    :size :small/:big
-    :token-img-src :token-img-src
-    :border-color :color
-    :sufficient? true/false
-    :purchasable? true/false
-    :loading? true/false
-    }"
-  [_ _]
-  (fn [{:keys [value size img-src border-color purchasable? sufficient? loading?]
-        :or   {size :small}
-        :as   props}]
-    (let [sym          (:symbol props)
-          sufficient?  (when-not loading? sufficient?)
-          border-color (if sufficient? colors/success-50 border-color)]
-      [tag
-       {:size size
-        :img-src img-src
-        :border-color (if sufficient? colors/success-50 border-color)
-        :overlay
-        (if loading?
-          [loading-icon]
-          (when (or purchasable? sufficient?)
-            [icon size border-color sufficient?]))}
-       (str value " " sym)])))
diff --git a/src/quo/components/tags/token_tag/style.cljs b/src/quo/components/tags/token_tag/style.cljs
new file mode 100644
index 0000000000..fc16fa0eb5
--- /dev/null
+++ b/src/quo/components/tags/token_tag/style.cljs
@@ -0,0 +1,49 @@
+(ns quo.components.tags.token-tag.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [size options blur? theme]
+  (let [hold? (= options :hold)]
+    (merge {:background-color (if blur?
+                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+            :flex-direction   :row
+            :align-items      :center
+            :padding-left     2
+            :border-width     (if hold? 1 0)
+            :border-radius    20
+            :border-color     (colors/theme-colors colors/success-50 colors/success-60 theme)}
+           (condp = size
+             :size-24 {:height        (if hold? 26 24)
+                       :padding-right 10
+                       :border-radius (if hold? 13 12)}
+             :size-32 {:height        (if hold? 34 32)
+                       :padding-right 12
+                       :border-radius (if hold? 17 16)}))))
+
+(defn options-icon
+  [size]
+  (assoc
+   (condp = size
+     :size-24 {:right -8
+               :top   -8}
+     :size-32 {:right -6
+               :top   -6})
+   :position
+   :absolute))
+
+(defn token-img
+  [size]
+  (condp = size
+    :size-24 {:width         20
+              :height        20
+              :margin-right  6
+              :border-radius 10}
+    :size-32 {:width         28
+              :height        28
+              :margin-right  8
+              :border-radius 14}))
+
+(defn label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
diff --git a/src/quo/components/tags/token_tag/view.cljs b/src/quo/components/tags/token_tag/view.cljs
new file mode 100644
index 0000000000..31fa22b9d3
--- /dev/null
+++ b/src/quo/components/tags/token_tag/view.cljs
@@ -0,0 +1,57 @@
+(ns quo.components.tags.token-tag.view
+  (:require
+    [oops.core :refer [oget]]
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.token-tag.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]
+    [reagent.core :as reagent]))
+
+(defn- view-internal
+  "Options:
+    - :options - false / :add / :hold (default false)
+    - :size - :size-24 / :size-32 (default :size-24)
+    - :blur? - boolean (default false)
+    - :theme - :light / :dark 
+    - :token-img-src - token image source
+    - :token-value - string - token value
+    - :token-symbol - string"
+  []
+  (let [container-width (reagent/atom 0)]
+    (fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
+          :or   {size :size-24}}]
+      [rn/view
+       {:on-layout #(reset! container-width
+                      (oget % :nativeEvent :layout :width))}
+       [hole-view/hole-view
+        {:holes (if options
+                  [{:x            (- @container-width
+                                     (condp = size
+                                       :size-24 10
+                                       :size-32 12))
+                    :y            (condp = size
+                                    :size-24 -6
+                                    :size-32 -4)
+                    :width        16
+                    :height       16
+                    :borderRadius 8}]
+                  [])}
+        [rn/view
+         {:style (style/container size options blur? theme)}
+         [rn/image
+          {:style  (style/token-img size)
+           :source token-img-src}]
+         [text/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  (style/label theme)}
+          (str token-value " " token-symbol)]]]
+       (when options
+         [rn/view {:style (style/options-icon size)}
+          [icons/icon (if (= options :hold) :i/hold :i/add-token)
+           {:size     20
+            :no-color true}]])])))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo/core.cljs b/src/quo/core.cljs
index 9be41f8d87..6bcc643b89 100644
--- a/src/quo/core.cljs
+++ b/src/quo/core.cljs
@@ -132,7 +132,7 @@
     quo.components.tags.tag
     quo.components.tags.tags
     quo.components.tags.tiny-tag.view
-    quo.components.tags.token-tag
+    quo.components.tags.token-tag.view
     quo.components.text-combinations.view
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
@@ -360,7 +360,7 @@
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)
-(def token-tag quo.components.tags.token-tag/tag)
+(def token-tag quo.components.tags.token-tag.view/view)
 
 ;;;; Text combinations
 (def text-combinations quo.components.text-combinations.view/view)
diff --git a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
index c1b26f489d..edd8b8ca70 100644
--- a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
+++ b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
@@ -42,8 +42,10 @@
   [:<>
    [quo/text {:style {:margin-right 4}} "Hold"]
    [quo/token-tag
-    {:size          :small
-     :token-img-src (quo.resources/get-token :eth)} "ETH"]
+    {:size          :size-24
+     :token-img-src (quo.resources/get-token :eth)
+     :token-value   5
+     :token-symbol  "ETH"}]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-3
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 64004722f4..70e4b5c2a5 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -151,6 +151,7 @@
     [status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
+    [status-im2.contexts.quo-preview.tags.tag :as tag]
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
@@ -416,21 +417,23 @@
                        {:name      :account-selector
                         :component account-selector/view}]
    :tags              [{:name      :context-tags
-                        :component context-tags/preview-context-tags}
+                        :component context-tags/view}
                        {:name      :network-tags
-                        :component network-tags/preview}
+                        :component network-tags/view}
                        {:name      :number-tag
-                        :component number-tag/preview}
+                        :component number-tag/view}
                        {:name      :permission-tag
-                        :component permission-tag/preview-permission-tag}
+                        :component permission-tag/view}
                        {:name      :status-tags
-                        :component status-tags/preview-status-tags}
+                        :component status-tags/view}
+                       {:name      :tag
+                        :component tag/view}
                        {:name      :tags
-                        :component tags/preview-tags}
+                        :component tags/view}
                        {:name      :tiny-tag
                         :component tiny-tag/preview-tiny-tag}
                        {:name      :token-tag
-                        :component token-tag/preview-token-tag}]
+                        :component token-tag/view}]
    :text-combinations [{:name      :text-combinations
                         :component text-combinations/view}]
    :wallet            [{:name :account-card :component account-card/preview-account-card}
diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
index 364db4ab6c..14023f1191 100644
--- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
@@ -21,15 +21,13 @@
     :value "User pic female 2"}])
 
 (def size-descriptor
-  {:label   "Size"
-   :key     :size
+  {:key     :size
    :type    :select
    :options [{:key 24}
              {:key 32}]})
 
 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
     :options [{:key :default}
               {:key :multiuser}
@@ -66,8 +64,7 @@
                nil
                (resources/mock-images :user-picture-female2)
                nil]]
-    [{:label   "users"
-      :key     :users
+    [{:key     :users
       :type    :select
       :options (map (fn [idx]
                       {:key   (mapv (fn [picture idx-name]
@@ -81,44 +78,36 @@
 
 (def group-descriptor
   [size-descriptor
-   {:label "Group"
-    :key   :group-name
-    :type  :text}])
+   {:key  :group-name
+    :type :text}])
 
 (def channel-descriptor
   [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}
-   {:label "Channel name"
-    :key   :channel-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}
+   {:key  :channel-name
+    :type :text}])
 
 (def community-descriptor
   [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}])
 
 (def token-descriptor
   [size-descriptor
-   {:label "Amount"
-    :key   :amount
-    :type  :text}
-   {:label "Token name"
-    :key   :token-name
-    :type  :text}])
+   {:key  :amount
+    :type :text}
+   {:key  :token-name
+    :type :text}])
 
 (def network-descriptor
   [size-descriptor
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])
 
 (def multinetwork-descriptor
   (let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
-    [{:label   "Networks"
-      :key     :networks
+    [{:key     :networks
       :type    :select
       :options (map (fn [size]
                       {:key   (take size networks)
@@ -127,11 +116,9 @@
 
 (def account-descriptor
   [size-descriptor
-   {:label "Account name"
-    :key   :account-name
-    :type  :text}
-   {:label   "Emoji"
-    :key     :emoji
+   {:key  :account-name
+    :type :text}
+   {:key     :emoji
     :type    :select
     :options [{:key "🐷" :value "🐷"}
               {:key "🍇" :value "🍇"}
@@ -139,39 +126,63 @@
 
 (def collectible-descriptor
   [size-descriptor
-   {:label "Collectible name"
-    :key   :collectible-name
-    :type  :text}
-   {:label "Collectible number"
-    :key   :collectible-number
-    :type  :text}])
+   {:key  :collectible-name
+    :type :text}
+   {:key  :collectible-number
+    :type :text}])
 
 (def address-descriptor
   [size-descriptor])
 
 (def icon-descriptor
   [size-descriptor
-   {:label "Context"
-    :key   :context
-    :type  :text}
-   {:label   "Icon"
-    :key     :icon
+   {:key  :context
+    :type :text}
+   {:key     :icon
     :type    :select
     :options [{:key :i/placeholder :value "Placeholder"}
               {:key :i/add :value "Add"}
               {:key :i/alert :value "Alert"}]}])
 
 (def audio-descriptor
-  [{:label "Duration"
-    :key   :duration
-    :type  :text}])
+  [{:key  :duration
+    :type :text}])
 
-(defn preview-context-tags
+(defn f-view
+  [state type]
+  (rn/use-effect (fn []
+                   (when (#{:multiuser :multinetwork :audio} @type)
+                     (swap! state assoc :size 24)))
+                 [@type])
+  [preview/preview-container
+   {:state                 state
+    :descriptor            (concat descriptor
+                                   (case (:type @state)
+                                     :default      default-descriptor
+                                     :multiuser    multiuser-descriptor
+                                     :group        group-descriptor
+                                     :channel      channel-descriptor
+                                     :community    community-descriptor
+                                     :token        token-descriptor
+                                     :network      network-descriptor
+                                     :multinetwork multinetwork-descriptor
+                                     :account      account-descriptor
+                                     :collectible  collectible-descriptor
+                                     :address      address-descriptor
+                                     :icon         icon-descriptor
+                                     :audio        audio-descriptor
+                                     default-descriptor))
+    :blur-height           80
+    :blur?                 (:blur? @state)
+    :show-blur-background? true}
+   [rn/view {:style {:align-items :center}}
+    [quo/context-tag @state]]])
+
+(defn view
   []
   (let [state
         (reagent/atom
-         {:label               "Name"
-          :size                32
+         {:size                32
           :type                :group
           :blur?               false
           :state               :selected
@@ -208,32 +219,4 @@
           :context             "Context"
           :duration            "00:32"})
         type (reagent/cursor state [:type])]
-    [:f>
-     (fn []
-       (rn/use-effect (fn []
-                        (when (#{:multiuser :multinetwork :audio} @type)
-                          (swap! state assoc :size 24)))
-                      [@type])
-       [preview/preview-container
-        {:state                 state
-         :descriptor            (concat descriptor
-                                        (case (:type @state)
-                                          :default      default-descriptor
-                                          :multiuser    multiuser-descriptor
-                                          :group        group-descriptor
-                                          :channel      channel-descriptor
-                                          :community    community-descriptor
-                                          :token        token-descriptor
-                                          :network      network-descriptor
-                                          :multinetwork multinetwork-descriptor
-                                          :account      account-descriptor
-                                          :collectible  collectible-descriptor
-                                          :address      address-descriptor
-                                          :icon         icon-descriptor
-                                          :audio        audio-descriptor
-                                          default-descriptor))
-         :blur-height           80
-         :blur?                 true
-         :show-blur-background? (:blur? @state)}
-        [rn/view {:style {:align-items :center}}
-         [quo/context-tag @state]]])]))
+    [:f> f-view state type]))
diff --git a/src/status_im2/contexts/quo_preview/tags/network_tags.cljs b/src/status_im2/contexts/quo_preview/tags/network_tags.cljs
index a337bae810..fb4462d534 100644
--- a/src/status_im2/contexts/quo_preview/tags/network_tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/network_tags.cljs
@@ -30,7 +30,7 @@
     :key  :blur?}])
 
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:title    "Tag"
                              :status   :default
@@ -46,7 +46,6 @@
                  :justify-content :center
                  :flex            1}}
         [quo/network-tags
-         {:networks (nth community-networks (dec (:networks @state)))
-          :status   (:status @state)
-          :title    (:title @state)
-          :blur?    (:blur? @state)}]]])))
+         (assoc @state
+                :networks
+                (nth community-networks (dec (:networks @state))))]]])))
diff --git a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
index d37793a6d2..cc5a2378d4 100644
--- a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.number-tag
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -27,16 +26,16 @@
    {:key  :blur?
     :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:type   :squared
                              :number "148"
                              :size   :size-32
                              :blur?  false})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [rn/view
-        {:padding-vertical 60
-         :flex-direction   :row
-         :justify-content  :center}
-        [quo/number-tag @state]]])))
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/number-tag @state]])))
diff --git a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs
index f28f97ce39..5f063dda9e 100644
--- a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.permission-tag
   (:require
-    [quo.components.tags.permission-tag :as permission-tag]
+    [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]
@@ -8,16 +8,14 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label "Locked:"
-    :key   :locked?
-    :type  :boolean}])
+   {:key  :locked?
+    :type :boolean}])
 
 (def community-tokens
   [{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]}
@@ -168,27 +166,23 @@
                       {:id 5 :token-icon (resources/get-mock-image :status-logo)}
                       {:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
 
-(defn preview-permission-tag
+(defn view
   []
   (let [state (reagent/atom {:size 32})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-self       :center
-          :justify-content  :center}
-         (when @state
-           (for [{:keys [tokens]} community-tokens]
-             ^{:key tokens}
-             [rn/view
-              {:margin-top 20
-               :align-self :flex-end}
-              [permission-tag/tag
-               (merge @state
-                      {:tokens           tokens
-                       :background-color (colors/theme-colors
-                                          colors/neutral-10
-                                          colors/neutral-80)})]]))]]])))
+       {:state                     state
+        :component-container-style {:margin-bottom 40}
+        :descriptor                descriptor}
+       (when @state
+         (for [{:keys [tokens]} community-tokens]
+           ^{:key tokens}
+           [rn/view
+            {:margin-top 20
+             :align-self :flex-end}
+            [quo/permission-tag
+             (merge @state
+                    {:tokens           tokens
+                     :background-color (colors/theme-colors
+                                        colors/neutral-10
+                                        colors/neutral-80)})]]))])))
diff --git a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs
index f3e747be1d..3d8ee495f2 100644
--- a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs
@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.status-tags
   (:require
-    [quo.components.tags.status-tags :as quo]
-    [quo.foundations.colors :as colors]
+    [quo.core :as quo]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]
@@ -31,7 +30,7 @@
     :key   :blur?
     :type  :boolean}])
 
-(defn preview-status-tags
+(defn view
   []
   (let [state (reagent/atom {:status :positive
                              :size   :small
@@ -48,11 +47,9 @@
                                   (assoc :status {:type :pending})
                                   (assoc :label (i18n/label :t/pending))))]
         [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view {:padding-bottom 150}
-          [preview/blur-view
-           {:show-blur-background? (:blur? @state)
-            :blur-view-props       {:blur-type     :dark
-                                    :overlay-color colors/neutral-80-opa-80}
-            :style                 {:align-self :center}} [quo/status-tag props]]]]))))
+         {:state                 state
+          :show-blur-background? true
+          :blur?                 (:blur? @state)
+          :descriptor            descriptor}
+         [rn/view {:style {:flex-direction :row}}
+          [quo/status-tag props]]]))))
diff --git a/src/status_im2/contexts/quo_preview/tags/tag.cljs b/src/status_im2/contexts/quo_preview/tags/tag.cljs
index e0611012a8..4bc00bcf7f 100644
--- a/src/status_im2/contexts/quo_preview/tags/tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/tag.cljs
@@ -1,23 +1,18 @@
 (ns status-im2.contexts.quo-preview.tags.tag
   (:require
-    [quo.components.tags.tag :as tag]
-    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
+    [quo.core :as quo]
     [reagent.core :as reagent]
-    [status-im.ui.components.react :as react]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Type:"
-    :key     :type
+   {:key     :type
     :type    :select
     :options [{:key   :emoji
                :value "Emoji"}
@@ -25,63 +20,31 @@
                :value "Icons"}
               {:key   :label
                :value "Label"}]}
-   {:label "Labelled:"
-    :key   :labelled?
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Blurred background:"
-    :key   :blurred?
-    :type  :boolean}])
+   {:key  :labelled?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :blurred?
+    :type :boolean}])
 
-(defn preview-tag
+(defn view
   []
   (let [state (reagent/atom {:size      32
                              :labelled? true
                              :type      :emoji})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:style {:flex   1
-                     :height 100}}
-            [react/image
-             {:source (resources/get-mock-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
-          [tag/tag
-           (merge @state
-                  {:id        1
-                   :label     "Tag"
-                   :labelled? (if (= (:type @state) :label)
-                                true
-                                (:labelled? @state))
-                   :resource  (if (= :emoji (:type @state))
-                                (resources/get-image :music)
-                                :i/placeholder)})]]]]])))
+       {:state                 state
+        :descriptor            descriptor
+        :show-blur-background? true
+        :blur?                 (:blurred? @state)}
+       [quo/tag
+        (merge @state
+               {:id        1
+                :label     "Tag"
+                :labelled? (if (= (:type @state) :label)
+                             true
+                             (:labelled? @state))
+                :resource  (if (= :emoji (:type @state))
+                             (resources/get-image :music)
+                             :i/placeholder)})]])))
diff --git a/src/status_im2/contexts/quo_preview/tags/tags.cljs b/src/status_im2/contexts/quo_preview/tags/tags.cljs
index f710de7beb..4f71b68e1e 100644
--- a/src/status_im2/contexts/quo_preview/tags/tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/tags.cljs
@@ -1,23 +1,18 @@
 (ns status-im2.contexts.quo-preview.tags.tags
   (:require
-    [quo.components.tags.tags :as tags]
-    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
+    [quo.core :as quo]
     [reagent.core :as reagent]
-    [status-im.ui.components.react :as react]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Type:"
-    :key     :type
+   {:key     :type
     :type    :select
     :options [{:key   :emoji
                :value "Emoji"}
@@ -25,27 +20,22 @@
                :value "Icons"}
               {:key   :label
                :value "Label"}]}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}
-   {:label   "Fade Out:"
-    :key     :fade-end-percentage
+   {:key  :scrollable?
+    :type :boolean}
+   {:key     :fade-end-percentage
     :type    :select
     :options [{:key   1
                :value "1%"}
               {:key   0.4
                :value "0.4%"}]}
-   {:label "Labelled:"
-    :key   :labelled?
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Blurred background:"
-    :key   :blurred?
-    :type  :boolean}])
+   {:key  :labelled?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :blurred?
+    :type :boolean}])
 
-(defn preview-tags
+(defn view
   []
   (let [state (reagent/atom {:size                32
                              :labelled?           true
@@ -54,51 +44,21 @@
                              :scrollable?         false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:align-items   :center
-             :height        100
-             :border-radius 16}
-            [react/image
-             {:source (resources/get-mock-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
-          [tags/tags
-           (merge
-            @state
-            {:default-active 1
-             :component      :tags
-             :labelled?      (if (= :label (:type @state)) true (:labelled? @state))
-             :data           [{:id 1 :label "Music" :resource (resources/get-image :music)}
-                              {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
-                              {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
-                              {:id 2 :label "Music" :resource (resources/get-image :music)}
-                              {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
-            (when (:scrollable? @state)
-              {:scroll-on-press? true
-               :fade-end?        true}))]]]]])))
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blurred? @state)
+        :show-blur-background? true}
+       [quo/tags
+        (merge
+         @state
+         {:default-active 1
+          :component      :tags
+          :labelled?      (if (= :label (:type @state)) true (:labelled? @state))
+          :data           [{:id 1 :label "Music" :resource (resources/get-image :music)}
+                           {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
+                           {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
+                           {:id 2 :label "Music" :resource (resources/get-image :music)}
+                           {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
+         (when (:scrollable? @state)
+           {:scroll-on-press? true
+            :fade-end?        true}))]])))
diff --git a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs
index 62daaf7970..61f550aaa1 100644
--- a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs
@@ -1,21 +1,19 @@
 (ns status-im2.contexts.quo-preview.tags.token-tag
   (:require
-    [quo.components.tags.token-tag :as quo]
+    [quo.core :as quo]
     [quo.foundations.resources :as resources]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :big
-               :value "big"}
-              {:key   :small
-               :value "small"}]}
-   {:label   "Value:"
-    :key     :value
+    :options [{:key   :size-24
+               :value "Size 24"}
+              {:key   :size-32
+               :value "Size 32"}]}
+   {:key     :token-value
     :type    :select
     :options [{:key   0
                :value "0"}
@@ -27,14 +25,17 @@
                :value "1000"}
               {:key   10000
                :value "10000"}]}
-   {:label "Is Sufficient:"
-    :key   :sufficient?
-    :type  :boolean}
-   {:label "Is Purchasable:"
-    :key   :purchasable?
-    :type  :boolean}
-   {:label   "Token:"
-    :key     :token
+   {:key     :options
+    :type    :select
+    :options [{:key   false
+               :value false}
+              {:key   :add
+               :value :add}
+              {:key   :hold
+               :value :hold}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key     :token-symbol
     :type    :select
     :options [{:key   "ETH"
                :value "ETH"}
@@ -44,17 +45,21 @@
 (def eth-token (resources/get-token :eth))
 (def snt-token (resources/get-token :snt))
 
-(defn preview-token-tag
+(defn view
   []
-  (let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})]
+  (let [state (reagent/atom {:size         :size-24
+                             :token-value  10
+                             :token-symbol "ETH"
+                             :options      false
+                             :blur?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/token-tag
-          (merge @state
-                 {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
+       {:state                 state
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :descriptor            descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/token-tag
+         (assoc @state
+                :token-img-src
+                (if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))