diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 3b6e6619624f..c2f7c38efbbd 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 
 <!-- (PRs will only be accepted if squashed into single commit.) -->
 
+### Before and after screenshots comparison
+
+| Figma (if available) | iOS (if available)    | Android (if available)
+| --- | --- | --- |
+| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
+
 status: ready <!-- Can be ready or wip -->
diff --git a/src/quo2/README.md b/src/quo2/README.md
index 32a955eaa564..dac79a906783 100644
--- a/src/quo2/README.md
+++ b/src/quo2/README.md
@@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
   ...)
 ```
 
+### Handling Sizes
+In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
+
+The convention is `:size-<number>`, e.g size `20` is `:size-20`
+
+```clojure
+;; bad
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      20 20
+                      40 40
+                      0)}}]
+  ...)
+```
+
+```clojure
+;; good
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      :size-20 20
+                      :size-40 40
+                      0)}}]
+  ...)
+```
+
 ## Clojure var conventions
 
 - Due to the fact that every `view` namespace should export only one component
diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs
index 7d7608624e25..1620c0eefc41 100644
--- a/src/quo2/components/avatars/group_avatar/view.cljs
+++ b/src/quo2/components/avatars/group_avatar/view.cljs
@@ -7,21 +7,21 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:size/s-20 {:icon      12
-               :container 20}
-   :size/s-28 {:icon      16
-               :container 28}
-   :size/s-32 {:icon      16
-               :container 32}
-   :size/s-48 {:icon      20
-               :container 48}
-   :size/s-80 {:icon      32
-               :container 80}})
+  {:size-20 {:icon      12
+             :container 20}
+   :size-28 {:icon      16
+             :container 28}
+   :size-32 {:icon      16
+             :container 32}
+   :size-48 {:icon      20
+             :container 48}
+   :size-80 {:icon      32
+             :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
                customization-color :blue
                picture             nil
                icon-name           :i/group}}]
diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs
index 9f62a8975ec5..bf8f6c2d9aea 100644
--- a/src/quo2/components/avatars/icon_avatar.cljs
+++ b/src/quo2/components/avatars/icon_avatar.cljs
@@ -5,19 +5,19 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:size/s-48 {:component 48
-               :icon      20}
-   :size/s-32 {:component 32
-               :icon      20}
-   :size/s-24 {:component 24
-               :icon      16}
-   :size/s-20 {:component 20
-               :icon      12}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})
 
 (defn icon-avatar-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/custom-color color 50 opacity)
         icon-color                                  (colors/custom-color-by-theme color 50 60)]
diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs
index 7854290266ed..c0ffe54e2c07 100644
--- a/src/quo2/components/buttons/button/view.cljs
+++ b/src/quo2/components/buttons/button/view.cljs
@@ -29,10 +29,11 @@
    only icon
    [button {:icon-only? true} :i/close-circle]"
   [_ _]
-  (let [pressed? (reagent/atom false)]
+  (let [pressed-state? (reagent/atom false)]
     (fn
       [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-               customization-color theme accessibility-label icon-only? container-style inner-style]
+               customization-color theme accessibility-label icon-only? container-style inner-style
+               pressed? on-press-in on-press-out]
         :or   {type                :primary
                size                40
                customization-color (cond (= type :primary)  :blue
@@ -46,14 +47,18 @@
                                            :background          background
                                            :type                type
                                            :theme               theme
-                                           :pressed?            @pressed?
+                                           :pressed?            (if pressed? pressed? @pressed-state?)
                                            :icon-only?          icon-only?})
             icon-size (when (= 24 size) 12)]
         [rn/touchable-without-feedback
          {:disabled            disabled?
           :accessibility-label accessibility-label
-          :on-press-in         #(reset! pressed? true)
-          :on-press-out        #(reset! pressed? nil)
+          :on-press-in         (fn []
+                                 (reset! pressed-state? true)
+                                 (when on-press-in (on-press-in)))
+          :on-press-out        (fn []
+                                 (reset! pressed-state? nil)
+                                 (when on-press-out (on-press-out)))
           :on-press            on-press
           :on-long-press       on-long-press}
          [rn/view
@@ -76,7 +81,7 @@
              [customization-colors/overlay
               {:customization-color customization-color
                :theme               theme
-               :pressed?            @pressed?}])
+               :pressed?            (if pressed? pressed? @pressed-state?)}])
            (when (= background :photo)
              [blur/view
               {:blur-radius   20
diff --git a/src/quo2/components/dropdowns/network_dropdown/view.cljs b/src/quo2/components/dropdowns/network_dropdown/view.cljs
index b368bec77225..d14548fcf26b 100644
--- a/src/quo2/components/dropdowns/network_dropdown/view.cljs
+++ b/src/quo2/components/dropdowns/network_dropdown/view.cljs
@@ -20,7 +20,7 @@
        [preview-list/view
         {:type      :network
          :list-size (count networks)
-         :size      :size/s-20}
+         :size      :size-20}
         networks]])))
 
 (def view (quo.theme/with-theme internal-view))
diff --git a/src/quo2/components/list_items/preview_list/properties.cljs b/src/quo2/components/list_items/preview_list/properties.cljs
index b8a2f09cf426..21945efe8816 100644
--- a/src/quo2/components/list_items/preview_list/properties.cljs
+++ b/src/quo2/components/list_items/preview_list/properties.cljs
@@ -7,43 +7,43 @@
   (if (types-for-squared-border type) :squared :rounded))
 
 (def sizes
-  {:size/s-32 {:size             32
-               :user-avatar-size :small
-               :border-radius    {:rounded 16 :squared 10}
-               :hole-radius      {:rounded 18 :squared 12}
-               :margin-left      -8
-               :hole-size        36
-               :hole-x           22
-               :hole-y           -2}
-   :size/s-24 {:size             24
-               :user-avatar-size :xs
-               :border-radius    {:rounded 12 :squared 8}
-               :hole-radius      {:rounded 13 :squared 9}
-               :margin-left      -4
-               :hole-size        26
-               :hole-x           19
-               :hole-y           -1}
-   :size/s-20 {:size             20
-               :user-avatar-size :xxs
-               :border-radius    {:rounded 10 :squared 8}
-               :hole-radius      {:rounded 11 :squared 9}
-               :margin-left      -4
-               :hole-size        22
-               :hole-x           15
-               :hole-y           -1}
-   :size/s-16 {:size             16
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 8 :squared 8}
-               :hole-radius      {:rounded 9 :squared 9}
-               :margin-left      -4
-               :hole-size        18
-               :hole-x           11
-               :hole-y           -1}
-   :size/s-14 {:size             14
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 7 :squared 7}
-               :hole-radius      {:rounded 8 :squared 8}
-               :margin-left      -2
-               :hole-size        16
-               :hole-x           11
-               :hole-y           -1}})
+  {:size-32 {:size             32
+             :user-avatar-size :small
+             :border-radius    {:rounded 16 :squared 10}
+             :hole-radius      {:rounded 18 :squared 12}
+             :margin-left      -8
+             :hole-size        36
+             :hole-x           22
+             :hole-y           -2}
+   :size-24 {:size             24
+             :user-avatar-size :xs
+             :border-radius    {:rounded 12 :squared 8}
+             :hole-radius      {:rounded 13 :squared 9}
+             :margin-left      -4
+             :hole-size        26
+             :hole-x           19
+             :hole-y           -1}
+   :size-20 {:size             20
+             :user-avatar-size :xxs
+             :border-radius    {:rounded 10 :squared 8}
+             :hole-radius      {:rounded 11 :squared 9}
+             :margin-left      -4
+             :hole-size        22
+             :hole-x           15
+             :hole-y           -1}
+   :size-16 {:size             16
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 8 :squared 8}
+             :hole-radius      {:rounded 9 :squared 9}
+             :margin-left      -4
+             :hole-size        18
+             :hole-x           11
+             :hole-y           -1}
+   :size-14 {:size             14
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 7 :squared 7}
+             :hole-radius      {:rounded 8 :squared 8}
+             :margin-left      -2
+             :hole-size        16
+             :hole-x           11
+             :hole-y           -1}})
diff --git a/src/quo2/components/list_items/preview_list/view.cljs b/src/quo2/components/list_items/preview_list/view.cljs
index 3ec739ebefff..bbedcf0766cf 100644
--- a/src/quo2/components/list_items/preview_list/view.cljs
+++ b/src/quo2/components/list_items/preview_list/view.cljs
@@ -1,67 +1,13 @@
 (ns quo2.components.list-items.preview-list.view
   (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as quo2.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
             [quo2.components.list-items.preview-list.properties :as properties]
+            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [react-native.hole-view :as hole-view]))
 
-;; This overflow item needs to be cleaned up once the "number tag" component is implemented
-;; https://github.com/status-im/status-mobile/issues/17045
-(defn get-overflow-color
-  [blur? blur-light-color blur-dark-color light-color dark-color theme]
-  (if blur?
-    (colors/theme-colors blur-light-color blur-dark-color theme)
-    (colors/theme-colors light-color dark-color theme)))
-
-(def more-icon-for-sizes #{16 14})
-
-(defn overflow-label
-  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
-  [rn/view
-   {:style {:width            size
-            :height           size
-            :margin-left      margin-left
-            :border-radius    border-radius
-            :justify-content  :center
-            :align-items      :center
-            :background-color (get-overflow-color
-                               blur?
-                               colors/neutral-80-opa-5
-                               colors/white-opa-5
-                               colors/neutral-20
-                               colors/neutral-90
-                               theme)}}
-   (if (more-icon-for-sizes size)
-     [quo2.icons/icon :i/more
-      {:size  12
-       :color (get-overflow-color
-               blur?
-               colors/neutral-80-opa-70
-               colors/white-opa-70
-               colors/neutral-50
-               colors/neutral-40
-               theme)}]
-     [quo2.text/text
-      {:size   (if (= size 32) :paragraph-2 :label)
-       :weight :medium
-       :style  {:color       (get-overflow-color
-                              blur?
-                              colors/neutral-80-opa-70
-                              colors/white-opa-70
-                              colors/neutral-50
-                              colors/neutral-40
-                              theme)
-                :margin-left -2}}
-      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
-      (if (< label 100)
-        (str "+" label)
-        more-than-99-label)])])
-
 (defn- preview-item
   [{:keys [item type size-key]}]
   (let [size             (get-in properties/sizes [size-key :size])
@@ -70,22 +16,22 @@
                                  [size-key :border-radius (properties/border-type type)])]
     (case type
       :user                        [user-avatar/user-avatar
-                                    (merge {:ring?             false
-                                            :status-indicator? false
-                                            :size              user-avatar-size}
-                                           item)]
+                                    (assoc item
+                                           :ring?             false
+                                           :status-indicator? false
+                                           :size              user-avatar-size)]
 
       :accounts                    [account-avatar/view
-                                    (merge item {:size size})]
+                                    (assoc item :size size)]
 
       (:communities :collectibles) [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
 
       (:tokens :network :dapps)    [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
@@ -118,16 +64,16 @@
   "[preview-list opts items]
    opts
    {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
+    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
     :number        number of items in the list (optional)
     :blur?         overflow-label blur?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size number blur? theme more-than-99-label]} items]
-  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
-        number        (or number (count items))
-        margin-left   (get-in properties/sizes [size-key :margin-left])
-        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
+  [{:keys [type size number blur?]} items]
+  (let [size-key    (if (contains? properties/sizes size) size :size-24)
+        number      (or number (count items))
+        border-type (properties/border-type type)
+        margin-left (get-in properties/sizes [size-key :margin-left])]
     [rn/view {:style {:flex-direction :row}}
      (for [index (range (if (> number 4) 3 number))]
        ^{:key (str index number)}
@@ -138,13 +84,11 @@
          :item     (get (vec items) index)
          :number   number}])
      (when (> number 4)
-       [overflow-label
-        {:label              (- number 3)
-         :size               (get-in properties/sizes [size-key :size])
-         :blur?              blur?
-         :border-radius      border-radius
-         :margin-left        margin-left
-         :theme              theme
-         :more-than-99-label more-than-99-label}])]))
+       [number-tag/view
+        {:type            border-type
+         :number          (str (- number 3))
+         :size            size-key
+         :blur?           blur?
+         :container-style {:margin-left margin-left}}])]))
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/list_items/token_value/view.cljs b/src/quo2/components/list_items/token_value/view.cljs
index 64e3c0ecd4a6..84dd240d2681 100644
--- a/src/quo2/components/list_items/token_value/view.cljs
+++ b/src/quo2/components/list_items/token_value/view.cljs
@@ -12,9 +12,9 @@
     [reagent.core :as reagent]))
 
 (defn- internal-view
-  [{:keys [theme customization-color status token metrics? values on-press]}]
+  []
   (let [state (reagent/atom :default)]
-    (fn []
+    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -42,7 +42,7 @@
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (string/upper-case (clj->js token)))]]]
+            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
          [rn/view
           {:style {:align-items     :flex-end
                    :justify-content :space-between}}
diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs
index b965e15d2465..71c6e4419b29 100644
--- a/src/quo2/components/messages/system_message.cljs
+++ b/src/quo2/components/messages/system_message.cljs
@@ -21,7 +21,7 @@
   [rn/view
    {:margin-right 8}
    [icon-avatar/icon-avatar
-    {:size    :size/s-32
+    {:size    :size-32
      :icon    icon
      :color   color
      :opacity opacity}]])
diff --git a/src/quo2/components/navigation/bottom_nav_tab/view.cljs b/src/quo2/components/navigation/bottom_nav_tab/view.cljs
index a5129c802d51..b9a695237160 100644
--- a/src/quo2/components/navigation/bottom_nav_tab/view.cljs
+++ b/src/quo2/components/navigation/bottom_nav_tab/view.cljs
@@ -86,6 +86,6 @@
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 
-(defn bottom-nav-tab
+(defn view
   [opts]
   [:f> f-bottom-nav-tab opts])
diff --git a/src/quo2/components/notifications/toast/view.cljs b/src/quo2/components/notifications/toast/view.cljs
index 2b9e192c5d4f..2999f17d32e5 100644
--- a/src/quo2/components/notifications/toast/view.cljs
+++ b/src/quo2/components/notifications/toast/view.cljs
@@ -68,8 +68,7 @@
 (def ^:private toast-container (quo.theme/with-theme toast-container-internal))
 
 (defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
-           theme user]}]
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
   (let [context-theme (or theme (quo.theme/get-theme))]
     [quo.theme/provider {:theme context-theme}
      [toast-container
@@ -78,7 +77,6 @@
                                (cond-> (style/icon context-theme)
                                  icon-color
                                  (assoc :color icon-color))]
-
                               user
                               [user-avatar/user-avatar user])
        :title           title
diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs
index 5a9c80e05d79..18cdaf225295 100644
--- a/src/quo2/components/settings/data_item/view.cljs
+++ b/src/quo2/components/settings/data_item/view.cljs
@@ -88,7 +88,7 @@
      :preview [preview-list/view
                {:type   :communities
                 :number 3
-                :size   :size/s-24}
+                :size   :size-24}
                communities-list]
      :graph   [text/text "graph"]
      :none    nil
diff --git a/src/quo2/components/settings/settings_item/style.cljs b/src/quo2/components/settings/settings_item/style.cljs
index 07d02d0fa213..3c72c4ca3489 100644
--- a/src/quo2/components/settings/settings_item/style.cljs
+++ b/src/quo2/components/settings/settings_item/style.cljs
@@ -1,22 +1,18 @@
 (ns quo2.components.settings.settings-item.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn find-icon-height
-  [description tag image]
-  (let [icon-height (if (= image :icon-avatar) 32 20)
-        icon-height (if description 40 icon-height)]
-    (if tag 72 icon-height)))
-
 (defn container
-  [{:keys [in-card? tag container-style]}]
-  (merge {:padding-horizontal 12
-          :padding-top        (if in-card? 12 13)
-          :padding-bottom     (if in-card? 12 13)
-          :flex-direction     :row
-          :justify-content    :space-between
-          :height             (if tag 96 48)}
+  [{:keys [container-style]}]
+  (merge {:padding         12
+          :flex-direction  :row
+          :justify-content :space-between}
          container-style))
 
+(defn left-sub-container
+  [{:keys [tag description]}]
+  {:flex-direction :row
+   :align-items    (if (or tag description) :flex-start :center)})
+
 (def sub-container
   {:flex-direction :row
    :align-items    :center})
@@ -24,12 +20,12 @@
 (def left-container
   {:margin-left     12
    :height          "100%"
-   :justify-content :center})
+   :justify-content :flex-start})
 
 (defn image-container
-  [description tag image]
-  {:height          (find-icon-height description tag image)
-   :justify-content :flex-start})
+  [image tag description]
+  {:height     (if (= image :icon-avatar) 32 20)
+   :margin-top (if (or tag description) 1 0)})
 
 (def status-container
   {:flex-direction :row
@@ -57,3 +53,8 @@
    :height           15
    :border-radius    12
    :background-color background-color})
+
+(def status-tag-container
+  {:margin-top    7
+   :margin-bottom 2
+   :margin-left   -1})
diff --git a/src/quo2/components/settings/settings_item/view.cljs b/src/quo2/components/settings/settings_item/view.cljs
index 9b6813bca656..71a188cda60b 100644
--- a/src/quo2/components/settings/settings_item/view.cljs
+++ b/src/quo2/components/settings/settings_item/view.cljs
@@ -65,7 +65,7 @@
                 :label           (:label tag-props)
                 :no-icon?        true
                 :size            :small
-                :container-style {:margin-top 8}}]
+                :container-style style/status-tag-container}]
     :context  [context-tag/view
                (merge tag-props
                       {:type            :icon
@@ -83,7 +83,8 @@
                label-props]
      :color   [rn/view
                {:style (style/label-dot label-props)}]
-     :preview [preview-list/view {:type (:type label-props)} (:data label-props)]
+     :preview [preview-list/view {:type (:type label-props) :size :size-24}
+               (:data label-props)]
      nil)])
 
 (defn action-component
@@ -105,7 +106,7 @@
    {:style               (style/container props)
     :on-press            on-press
     :accessibility-label accessibility-label}
-   [rn/view {:style style/sub-container}
+   [rn/view {:style (style/left-sub-container props)}
     [image-component props]
     [rn/view {:style style/left-container}
      [text/text {:weight :medium} title]
diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs
index 645f821efaf4..6320bdd916cb 100644
--- a/src/quo2/components/tags/context_tag/view.cljs
+++ b/src/quo2/components/tags/context_tag/view.cljs
@@ -91,19 +91,20 @@
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
       [user-avatar/user-avatar
-       {:full-name         full-name
-        :profile-picture   profile-picture
-        :size              (if (= size 24) :xxs 28)
-        :status-indicator? false
-        :ring?             false}]]
+       {:full-name           full-name
+        :profile-picture     profile-picture
+        :size                (if (= size 24) :xxs 28)
+        :status-indicator?   false
+        :ring?               false
+        :customization-color customization-color}]]
 
      :multiuser
-     [preview-list/view {:type :user :size 20}
+     [preview-list/view {:type :user :size :size-20}
       users]
 
      :multinetwork
-     [preview-list/view {:type :network :size 20}
-      (map #(hash-map :profile-picture %) networks)]
+     [preview-list/view {:type :network :size :size-20}
+      networks]
 
      :audio
      [tag-skeleton {:theme theme :text (str duration)}
@@ -114,7 +115,7 @@
      [tag-skeleton {:theme theme :size size :text group-name}
       [group-avatar/view
        {:icon-name           :i/members
-        :size                (if (= size 24) :size/s-20 :size/s-28)
+        :size                (if (= size 24) :size-20 :size-28)
         :customization-color (colors/custom-color customization-color 50)}]]
 
      (:channel :community)
diff --git a/src/quo2/components/tags/network_tags/component_spec.cljs b/src/quo2/components/tags/network_tags/component_spec.cljs
index e249ded34259..51a3b05d04f3 100644
--- a/src/quo2/components/tags/network_tags/component_spec.cljs
+++ b/src/quo2/components/tags/network_tags/component_spec.cljs
@@ -15,5 +15,5 @@
                 :networks [{:source "network-icon1.png"}
                            {:source "network-icon2.png"}
                            {:source "network-icon3.png"}]
-                :size     :size/s-32}])
+                :size     :size-32}])
     (h/is-truthy (h/get-by-text "Multiple Networks"))))
diff --git a/src/quo2/components/tags/network_tags/view.cljs b/src/quo2/components/tags/network_tags/view.cljs
index 64620d61aa04..6e0df2032424 100644
--- a/src/quo2/components/tags/network_tags/view.cljs
+++ b/src/quo2/components/tags/network_tags/view.cljs
@@ -14,7 +14,7 @@
    [preview-list/view
     {:type   :network
      :number (count networks)
-     :size   :size/s-16} networks]
+     :size   :size-16} networks]
    [text/text
     {:weight :medium
      :size   :paragraph-2
diff --git a/src/quo2/components/tags/number_tag/component_spec.cljs b/src/quo2/components/tags/number_tag/component_spec.cljs
index 44de6e69ea16..7543d52678a2 100644
--- a/src/quo2/components/tags/number_tag/component_spec.cljs
+++ b/src/quo2/components/tags/number_tag/component_spec.cljs
@@ -8,13 +8,13 @@
     (h/render [number-tag/view
                {:type   :rounded
                 :number "3"
-                :size   :size/s-32
+                :size   :size-32
                 :blur?  false}])
     (h/is-truthy (h/get-by-text "+3")))
   (h/test "+48 render"
     (h/render [number-tag/view
                {:type   :squared
                 :number "48"
-                :size   :size/s-24
+                :size   :size-24
                 :blur?  true}])
     (h/is-truthy (h/get-by-text "+48"))))
diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs
index b8ea4303bdce..30a618b30b61 100644
--- a/src/quo2/components/tags/number_tag/style.cljs
+++ b/src/quo2/components/tags/number_tag/style.cljs
@@ -2,26 +2,26 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:size/s-32 {:size          32
-               :width-extra   40
-               :border-radius {:rounded 16 :squared 10}
-               :icon-size     20}
-   :size/s-24 {:size          24
-               :width-extra   32
-               :border-radius {:rounded 12 :squared 8}
-               :icon-size     16}
-   :size/s-20 {:size          20
-               :width-extra   24
-               :border-radius {:rounded 10 :squared 8}
-               :icon-size     12}
-   :size/s-16 {:size          16
-               :width-extra   20
-               :border-radius {:rounded 8 :squared 8}
-               :icon-size     12}
-   :size/s-14 {:size          14
-               :width-extra   16
-               :border-radius {:rounded 7 :squared 7}
-               :icon-size     12}})
+  {:size-32 {:size          32
+             :width-extra   40
+             :border-radius {:rounded 16 :squared 10}
+             :icon-size     20}
+   :size-24 {:size          24
+             :width-extra   32
+             :border-radius {:rounded 12 :squared 8}
+             :icon-size     16}
+   :size-20 {:size          20
+             :width-extra   24
+             :border-radius {:rounded 10 :squared 8}
+             :icon-size     12}
+   :size-16 {:size          16
+             :width-extra   20
+             :border-radius {:rounded 8 :squared 8}
+             :icon-size     12}
+   :size-14 {:size          14
+             :width-extra   16
+             :border-radius {:rounded 7 :squared 7}
+             :icon-size     12}})
 
 (defn get-color
   [blur? theme]
@@ -55,10 +55,11 @@
     (get-in sizes [size (if widen? :width-extra :size)])))
 
 (defn container
-  [{:keys [type number size blur? theme]}]
-  {:style {:width            (get-width size number)
-           :height           (get-in sizes [size :size])
-           :border-radius    (get-shape-value size :border-radius type)
-           :justify-content  :center
-           :align-items      :center
-           :background-color (get-bg-color blur? theme)}})
+  [{:keys [type number size blur? theme container-style]}]
+  {:style (assoc container-style
+                 :width            (get-width size number)
+                 :height           (get-in sizes [size :size])
+                 :border-radius    (get-shape-value size :border-radius type)
+                 :justify-content  :center
+                 :align-items      :center
+                 :background-color (get-bg-color blur? theme))})
diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs
index a3b06f0192fd..2098d32e8898 100644
--- a/src/quo2/components/tags/number_tag/view.cljs
+++ b/src/quo2/components/tags/number_tag/view.cljs
@@ -1,9 +1,9 @@
 (ns quo2.components.tags.number-tag.view
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [react-native.core :as rn]
             [quo2.components.tags.number-tag.style :as style]
-            [quo2.theme :as quo.theme]))
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]))
 
 (defn view-internal
   [{:keys [number size blur? theme] :as props}]
@@ -12,7 +12,7 @@
     [rn/view (style/container props)
      (if (and (> size-value 20) (< (count number) 3))
        [text/text
-        {:size   (if (= size :size/s-32)
+        {:size   (if (= size :size-32)
                    :paragraph-2
                    :label)
          :weight :medium
diff --git a/src/quo2/components/wallet/account_card/style.cljs b/src/quo2/components/wallet/account_card/style.cljs
index 54c30e62390c..90c0d6ac6ece 100644
--- a/src/quo2/components/wallet/account_card/style.cljs
+++ b/src/quo2/components/wallet/account_card/style.cljs
@@ -9,7 +9,7 @@
     colors/white))
 
 (defn card
-  [customization-color watch-only? metrics? theme]
+  [{:keys [customization-color watch-only? metrics? theme pressed?]}]
   {:width              162
    :height             (if metrics? 88 68)
    :background-color   (if watch-only?
@@ -21,7 +21,10 @@
    :border-radius      16
    :border-width       1
    :border-color       (if watch-only?
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                         (colors/theme-colors
+                          (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
+                          (if pressed? colors/white-opa-10 colors/white-opa-5)
+                          theme)
                          colors/neutral-80-opa-10)
    :padding-horizontal 12
    :padding-top        6
@@ -67,10 +70,13 @@
    :margin-horizontal 4})
 
 (defn add-account-container
-  [theme metrics?]
+  [{:keys [theme metrics? pressed?]}]
   {:width              161
    :height             (if metrics? 88 68)
-   :border-color       (colors/theme-colors colors/neutral-20 colors/white-opa-5 theme)
+   :border-color       (colors/theme-colors
+                        (if pressed? colors/neutral-40 colors/neutral-30)
+                        (if pressed? colors/neutral-70 colors/neutral-80)
+                        theme)
    :border-width       1
    :border-style       :dashed
    :align-items        :center
@@ -84,7 +90,7 @@
    :line-height 20})
 
 (defn loader-view
-  [width height watch-only? theme]
+  [{:keys [width height watch-only? theme]}]
   {:width            width
    :height           height
    :background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10)
@@ -93,3 +99,6 @@
 (def loader-container
   {:flex-direction :row
    :align-items    :center})
+
+(def metrics-icon-container
+  {:margin-left 4})
diff --git a/src/quo2/components/wallet/account_card/view.cljs b/src/quo2/components/wallet/account_card/view.cljs
index c7b6f7bb28c1..85e033a396ae 100644
--- a/src/quo2/components/wallet/account_card/view.cljs
+++ b/src/quo2/components/wallet/account_card/view.cljs
@@ -5,8 +5,9 @@
             [quo2.components.wallet.account-card.style :as style]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
-            [utils.i18n :as i18n]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]
+            [reagent.core :as reagent]
+            [quo2.foundations.customization-colors :as customization-colors]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -14,103 +15,142 @@
         empty-type? (= :empty type)]
     [rn/view
      {:accessibility-label :loading
-      :style               (style/card customization-color watch-only? metrics? theme)}
+      :style               (style/card {:customization-color customization-color
+                                        :watch-only?         watch-only?
+                                        :metrics?            metrics?
+                                        :theme               theme
+                                        :pressed?            false})}
      [rn/view {:style style/loader-container}
       [rn/view
-       {:style (assoc (style/loader-view 16
-                                         16
-                                         watch-only?
-                                         theme)
+       {:style (assoc (style/loader-view {:width       16
+                                          :height      16
+                                          :watch-only? watch-only?
+                                          :theme       theme})
                       :margin-right 8
                       :margin-top   2)}]
       [rn/view {:style style/watch-only-container}
-       [rn/view {:style (style/loader-view 57 8 watch-only? theme)}]
-       (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
+       [rn/view
+        {:style (style/loader-view {:width       57
+                                    :height      8
+                                    :watch-only? watch-only?
+                                    :theme       theme})}]
+       (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
      [rn/view
-      {:style (assoc (style/loader-view
-                      (if empty-type? 56 80)
-                      16
-                      watch-only?
-                      theme)
+      {:style (assoc (style/loader-view {:width       (if empty-type? 56 80)
+                                         :height      16
+                                         :watch-only? watch-only?
+                                         :theme       theme})
                      :margin-top
                      13)}]
      (when metrics?
        [rn/view
         {:accessibility-label :metrics
-         :style               (assoc (style/loader-view
-                                      (if empty-type? 37 96)
-                                      8
-                                      watch-only?
-                                      theme)
+         :style               (assoc (style/loader-view {:width       (if empty-type? 37 96)
+                                                         :height      8
+                                                         :watch-only? watch-only?
+                                                         :theme       theme})
                                      :margin-top
                                      10)}])]))
 
+(defn- metrics-percentage
+  [watch-only? theme account-percentage]
+  [text/text
+   {:weight              :semi-bold
+    :size                :paragraph-2
+    :accessibility-label :metrics
+    :style               (style/metrics watch-only? theme)}
+   account-percentage])
+
+(defn- metrics-info
+  [watch-only? theme account-amount]
+  [:<>
+   [rn/view (style/separator watch-only? theme)]
+   [text/text
+    {:weight :semi-bold
+     :size   :paragraph-2
+     :style  (style/metrics watch-only? theme)}
+    account-amount]
+   [rn/view {:style style/metrics-icon-container}
+    [icon/icon
+     :i/positive
+     {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
+                                  colors/white-opa-70
+                                  theme)
+      :size  16}]]])
+
 (defn- user-account
-  [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
-           theme on-press]}]
-  (let [watch-only?        (= :watch-only type)
-        empty-type?        (= :empty type)
-        account-amount     (if (= :empty state) "€0.00" amount)
-        account-name       (if (= :empty state) (i18n/label :t/Account 1) name)
-        account-percentage (if (= :empty state) "€0.00" percentage-value)]
-    (if loading?
-      [loading-view
-       {:customization-color customization-color
-        :type                type
-        :theme               theme
-        :metrics?            metrics?}]
-      [rn/pressable
-       {:style    (style/card customization-color watch-only? metrics? theme)
-        :on-press on-press}
-       [rn/view {:style style/profile-container}
-        [rn/view {:style {:padding-bottom 2 :margin-right 2}}
-         [text/text {:style style/emoji} emoji]]
-        [rn/view {:style style/watch-only-container}
-         [text/text
-          {:size   :paragraph-2
-           :weight :medium
-           :style  (style/account-name watch-only? theme)}
-          account-name]
-         (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
-       [text/text
-        {:size   :heading-2
-         :weight :semi-bold
-         :style  (style/account-value watch-only? theme)}
-        balance]
-       (when metrics?
-         [rn/view {:style style/metrics-container}
-          [text/text
-           {:weight              :semi-bold
-            :size                :paragraph-2
-            :accessibility-label :metrics
-            :style               (style/metrics watch-only? theme)}
-           account-percentage]
-          (when (not empty-type?)
-            [:<>
-             [rn/view (style/separator watch-only? theme)]
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
+                 theme on-press]}]
+      (let [watch-only? (= :watch-only type)]
+        (if loading?
+          [loading-view
+           {:customization-color customization-color
+            :type                type
+            :theme               theme
+            :metrics?            metrics?}]
+          [rn/pressable
+           {:on-press-in  on-press-in
+            :on-press-out on-press-out
+            :style        (style/card {:customization-color customization-color
+                                       :watch-only?         watch-only?
+                                       :metrics?            metrics?
+                                       :theme               theme
+                                       :pressed?            @pressed?})
+            :on-press     on-press}
+           (when (and customization-color (not watch-only?))
+             [customization-colors/overlay
+              {:customization-color customization-color
+               :border-radius       16
+               :theme               theme
+               :pressed?            @pressed?}])
+           [rn/view {:style style/profile-container}
+            [rn/view {:style {:padding-bottom 2 :margin-right 2}}
+             [text/text {:style style/emoji} emoji]]
+            [rn/view {:style style/watch-only-container}
              [text/text
-              {:weight :semi-bold
-               :size   :paragraph-2
-               :style  (style/metrics watch-only? theme)} account-amount]
-             [rn/view {:style {:margin-left 4}}
-              [icon/icon :positive
-               {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
-                                            colors/white-opa-70
-                                            theme)
-                :size  16}]]])])])))
+              {:size   :paragraph-2
+               :weight :medium
+               :style  (style/account-name watch-only? theme)}
+              name]
+             (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
+           [text/text
+            {:size   :heading-2
+             :weight :semi-bold
+             :style  (style/account-value watch-only? theme)}
+            balance]
+           (when metrics?
+             [rn/view {:style style/metrics-container}
+              [metrics-percentage watch-only? theme percentage-value]
+              (when (not= :empty type)
+                [metrics-info watch-only? theme amount])])])))))
 
 (defn- add-account-view
-  [{:keys [on-press customization-color theme metrics?]}]
-  [rn/view (style/add-account-container theme metrics?)
-   [button/button
-    {:type                :primary
-     :size                24
-     :icon                true
-     :accessibility-label :add-account
-     :on-press            on-press
-     :customization-color customization-color
-     :icon-only?          true}
-    :i/add]])
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [on-press customization-color theme metrics?]}]
+      [rn/pressable
+       {:on-press     on-press
+        :on-press-in  #(reset! pressed? true)
+        :on-press-out #(reset! pressed? false)
+        :style        (style/add-account-container {:theme    theme
+                                                    :metrics? metrics?
+                                                    :pressed? @pressed?})}
+       [button/button
+        {:type                :primary
+         :size                24
+         :icon                true
+         :accessibility-label :add-account
+         :on-press            on-press
+         :pressed?            @pressed?
+         :on-press-in         #(reset! pressed? true)
+         :on-press-out        #(reset! pressed? false)
+         :customization-color customization-color
+         :icon-only?          true}
+        :i/add]])))
 
 (defn- view-internal
   [{:keys [type] :as props}]
@@ -121,4 +161,4 @@
     :empty       [user-account props]
     nil))
 
-(def view (theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/wallet/keypair/style.cljs b/src/quo2/components/wallet/keypair/style.cljs
index b87bd76e97bf..f3a204f954cc 100644
--- a/src/quo2/components/wallet/keypair/style.cljs
+++ b/src/quo2/components/wallet/keypair/style.cljs
@@ -2,14 +2,19 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  [selected? customization-color theme]
-  {:border-radius  20
+  [{:keys [blur? customization-color theme selected?]}]
+  {:flex           1
+   :border-radius  20
    :border-width   1
    :border-color   (if selected?
-                     (colors/theme-colors (colors/custom-color customization-color 50)
-                                          (colors/custom-color customization-color 60)
-                                          theme)
-                     (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+                     (if blur?
+                       colors/white
+                       (colors/theme-colors (colors/custom-color customization-color 50)
+                                            (colors/custom-color customization-color 60)
+                                            theme))
+                     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)))
    :padding-bottom 8})
 
 (def header-container
diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs
index b62d0f0aede6..dcc27af94231 100644
--- a/src/quo2/components/wallet/keypair/view.cljs
+++ b/src/quo2/components/wallet/keypair/view.cljs
@@ -25,69 +25,79 @@
        (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
 
 (defn avatar
-  [type full-name customization-color]
-  (if (= type :default-keypair)
+  [{{:keys [full-name]} :details
+    avatar-type         :type
+    customization-color :customization-color}]
+  (if (= avatar-type :default-keypair)
     [user-avatar/user-avatar
      {:full-name           full-name
       :ring?               true
       :size                :small
       :customization-color customization-color}]
     [icon-avatar/icon-avatar
-     {:size    :size/s-32
+     {:size    :size-32
       :icon    :i/placeholder
       :border? true}]))
 
 (defn title-view
-  [full-name action selected? type customization-color on-options-press theme]
-  [rn/view
-   {:style               style/title-container
-    :accessibility-label :title}
-   [text/text {:weight :semi-bold}
-    (if (= type :default-keypair) (keypair-string full-name) full-name)]
-   (if (= action :selector)
-     [selectors/radio
-      {:checked?            selected?
-       :customization-color customization-color}]
-     [rn/pressable {:on-press on-options-press}
-      [icon/icon :i/options
-       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-        :accessibility-label :options-button}]])])
+  [{:keys [details action selected? type blur? customization-color on-options-press theme]}]
+  (let [{:keys [full-name]} details]
+    [rn/view
+     {:style               style/title-container
+      :accessibility-label :title}
+     [text/text {:weight :semi-bold}
+      (if (= type :default-keypair) (keypair-string full-name) full-name)]
+     (if (= action :selector)
+       [selectors/radio
+        {:checked?            selected?
+         :blur?               blur?
+         :customization-color customization-color}]
+       [rn/pressable {:on-press on-options-press}
+        [icon/icon :i/options
+         {:color               (if blur?
+                                 colors/white-opa-70
+                                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+          :accessibility-label :options-button}]])]))
 
 (defn details-view
-  [address stored theme]
-  [rn/view
-   {:style {:flex-direction :row
-            :align-items    :center}}
-   [text/text
-    {:size                :paragraph-2
-     :accessibility-label :details
-     :style               {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    (details-string address stored)]
-   (when (= stored :on-keycard)
-     [rn/view {:style {:margin-left 4}}
-      [icon/icon :i/keycard-card
-       {:size  16
-        :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])])
+  [{:keys [details stored blur? theme]}]
+  (let [{:keys [address]} details]
+    [rn/view
+     {:style {:flex-direction :row
+              :align-items    :center}}
+     [text/text
+      {:size                :paragraph-2
+       :accessibility-label :details
+       :style               {:color (if blur?
+                                      colors/white-opa-40
+                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
+      (details-string address stored)]
+     (when (= stored :on-keycard)
+       [rn/view {:style {:margin-left 4}}
+        [icon/icon :i/keycard-card
+         {:size  16
+          :color (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
 
 (defn- view-internal
   []
   (let [selected? (reagent/atom true)]
-    (fn [{:keys [theme accounts customization-color type details stored action on-options-press]}]
-      (let [{:keys [address full-name]} details]
-        [rn/pressable
-         {:style    (style/container @selected? customization-color theme)
-          :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
-         [rn/view {:style style/header-container}
-          [avatar type full-name customization-color]
-          [rn/view
-           {:style {:margin-left 8
-                    :flex        1}}
-           [title-view full-name action @selected? type customization-color on-options-press theme]
-           [details-view address stored theme]]]
-         [rn/flat-list
-          {:data      accounts
-           :render-fn account-list-card/view
-           :separator [rn/view {:style {:height 8}}]
-           :style     {:padding-horizontal 8}}]]))))
+    (fn [{:keys [accounts action] :as props}]
+      [rn/pressable
+       {:style    (style/container (merge props {:selected? @selected?}))
+        :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
+       [rn/view {:style style/header-container}
+        [avatar props]
+        [rn/view
+         {:style {:margin-left 8
+                  :flex        1}}
+         [title-view (assoc props :selected? @selected?)]
+         [details-view props]]]
+       [rn/flat-list
+        {:data      accounts
+         :render-fn account-list-card/view
+         :separator [rn/view {:style {:height 8}}]
+         :style     {:padding-horizontal 8}}]])))
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index fe561af2a14d..34dffaf719dd 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -77,6 +77,7 @@
     quo2.components.messages.gap
     quo2.components.messages.system-message
     quo2.components.navigation.floating-shell-button.view
+    quo2.components.navigation.bottom-nav-tab.view
     quo2.components.navigation.page-nav.view
     quo2.components.navigation.top-nav.view
     quo2.components.notifications.activity-log.view
@@ -262,6 +263,7 @@
 (def skeleton-list quo2.components.loaders.skeleton-list.view/view)
 
 ;;;; Navigation
+(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view)
 (def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav.view/page-nav)
 (def top-nav quo2.components.navigation.top-nav.view/view)
diff --git a/src/quo2/foundations/customization_colors.cljs b/src/quo2/foundations/customization_colors.cljs
index e67fd306e0e3..125d9871e9da 100644
--- a/src/quo2/foundations/customization_colors.cljs
+++ b/src/quo2/foundations/customization_colors.cljs
@@ -10,11 +10,12 @@
       (colors/alpha colors/black (if pressed? 0 0.2)))))
 
 (defn overlay
-  [{:keys [theme pressed? customization-color]}]
+  [{:keys [theme pressed? customization-color border-radius]}]
   [rn/view
    {:position         :absolute
     :top              0
     :left             0
     :right            0
     :bottom           0
+    :border-radius    border-radius
     :background-color (get-overlay-color theme pressed? customization-color)}])
diff --git a/src/status_im/async_storage/core.cljs b/src/react_native/async_storage.cljs
similarity index 54%
rename from src/status_im/async_storage/core.cljs
rename to src/react_native/async_storage.cljs
index 80312fae3bf1..d03254984965 100644
--- a/src/status_im/async_storage/core.cljs
+++ b/src/react_native/async_storage.cljs
@@ -1,30 +1,37 @@
-(ns status-im.async-storage.core
+(ns react-native.async-storage
   (:require ["@react-native-async-storage/async-storage" :default async-storage]
-            [goog.functions :as f]
-            [re-frame.core :as re-frame]
-            [status-im.async-storage.transit :refer [clj->transit transit->clj]]
-            [taoensso.timbre :as log]))
+            [cognitect.transit :as transit]
+            [taoensso.timbre :as log]
+            goog.functions))
 
 (def ^:private debounce-ms 250)
 
-(def key->string str)
+(def ^:private reader (transit/reader :json))
+(def ^:private writer (transit/writer :json))
+
+(defn clj->transit [o] (transit/write writer o))
+(defn transit->clj
+  [o]
+  (try (transit/read reader o)
+       (catch :default e
+         (log/error e))))
 
 (defn set-item!
   [k value]
   (-> ^js async-storage
-      (.setItem (key->string k)
+      (.setItem (str k)
                 (clj->transit value))
       (.catch (fn [error]
                 (log/error "[async-storage]" error)))))
 
-(defn- set-item-factory
+(defn set-item-factory
   []
   (let [tmp-storage (atom {})
-        debounced   (f/debounce (fn []
-                                  (doseq [[k v] @tmp-storage]
-                                    (swap! tmp-storage dissoc k)
-                                    (set-item! k v)))
-                                debounce-ms)]
+        debounced   (goog.functions/debounce (fn []
+                                               (doseq [[k v] @tmp-storage]
+                                                 (swap! tmp-storage dissoc k)
+                                                 (set-item! k v)))
+                                             debounce-ms)]
     (fn [items]
       (swap! tmp-storage merge items)
       (debounced))))
@@ -32,7 +39,7 @@
 (defn get-items
   [ks cb]
   (-> ^js async-storage
-      (.multiGet (to-array (map key->string ks)))
+      (.multiGet (to-array (map str ks)))
       (.then (fn [^js data]
                (cb (->> (js->clj data)
                         (map (comp transit->clj second))
@@ -44,7 +51,7 @@
 (defn get-item
   [k cb]
   (-> ^js async-storage
-      (.getItem (key->string k))
+      (.getItem (str k))
       (.then (fn [^js data]
                (-> data
                    js->clj
@@ -53,10 +60,3 @@
       (.catch (fn [error]
                 (cb nil)
                 (log/error "[async-storage]" error)))))
-
-(re-frame/reg-fx ::set! (set-item-factory))
-
-(re-frame/reg-fx
- ::get
- (fn [{ks :keys cb :cb}]
-   (get-items ks cb)))
diff --git a/src/status_im/async_storage/transit.cljs b/src/status_im/async_storage/transit.cljs
deleted file mode 100644
index 841dd94cb588..000000000000
--- a/src/status_im/async_storage/transit.cljs
+++ /dev/null
@@ -1,13 +0,0 @@
-(ns status-im.async-storage.transit
-  (:require [cognitect.transit :as transit]
-            [taoensso.timbre :as log]))
-
-(def reader (transit/reader :json))
-(def writer (transit/writer :json))
-
-(defn clj->transit [o] (transit/write writer o))
-(defn transit->clj
-  [o]
-  (try (transit/read reader o)
-       (catch :default e
-         (log/error e))))
diff --git a/src/status_im/browser/core.cljs b/src/status_im/browser/core.cljs
index 1dad3be275ec..9addb14eca77 100644
--- a/src/status_im/browser/core.cljs
+++ b/src/status_im/browser/core.cljs
@@ -20,7 +20,7 @@
     [utils.url :as url]
     [react-native.platform :as platform]
     [status-im.utils.random :as random]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.universal-links.utils :as links]
     [status-im2.navigation.events :as navigation]
     [taoensso.timbre :as log]
diff --git a/src/status_im/browser/permissions_test.cljs b/src/status_im/browser/permissions_test.cljs
index 02c03421e7b7..191e173858a4 100644
--- a/src/status_im/browser/permissions_test.cljs
+++ b/src/status_im/browser/permissions_test.cljs
@@ -3,7 +3,7 @@
             [status-im.browser.core :as browser]
             [status-im.browser.core-test :as core.tests]
             [status-im.browser.permissions :as permissions]
-            [status-im.utils.types :as types]))
+            [status-im.utils.deprecated-types :as types]))
 
 (deftest permissions-test
   (let [dapp-name  "test.com"
diff --git a/src/status_im/chat/models/message.cljs b/src/status_im/chat/models/message.cljs
index 37cb760e29e1..30551f0f2d0c 100644
--- a/src/status_im/chat/models/message.cljs
+++ b/src/status_im/chat/models/message.cljs
@@ -5,7 +5,7 @@
             [status-im.data-store.messages :as data-store.messages]
             [status-im.transport.message.protocol :as protocol]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.contexts.chat.messages.delete-message.events :as delete-message]
             [status-im2.contexts.chat.messages.list.events :as message-list]
             [status-im2.contexts.chat.messages.list.state :as view.state]
diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs
index 496c107b83ca..23a07843077d 100644
--- a/src/status_im/communities/core.cljs
+++ b/src/status_im/communities/core.cljs
@@ -5,8 +5,7 @@
             [quo.design-system.colors :as colors]
             [quo2.foundations.colors :as quo2.colors]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
-            [status-im.async-storage.core :as async-storage]
+            [status-im.utils.deprecated-types :as types]
             [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles]
             [status-im.utils.universal-links.core :as universal-links]
             [status-im.bottom-sheet.events :as bottom-sheet]
@@ -815,51 +814,6 @@
                     :on-success  #(re-frame/dispatch [:sanitize-messages-and-process-response %])
                     :on-error    #(log/error "failed to reorder community category" %)}]})
 
-(defn category-hash
-  [public-key community-id category-id]
-  (hash (str public-key community-id category-id)))
-
-(rf/defn store-category-state
-  {:events [::store-category-state]}
-  [{:keys [db]} community-id category-id state-open?]
-  (let [public-key (get-in db [:profile/profile :public-key])
-        hash       (category-hash public-key community-id category-id)]
-    {::async-storage/set! {hash state-open?}}))
-
-(rf/defn update-category-states-in-db
-  {:events [::category-states-loaded]}
-  [{:keys [db]} community-id hashes states]
-  (let [public-key     (get-in db [:profile/profile :public-key])
-        categories-old (get-in db [:communities community-id :categories])
-        categories     (reduce (fn [acc [category-id category]]
-                                 (let [hash             (get hashes category-id)
-                                       state            (get states hash)
-                                       category-updated (assoc category :state state)]
-                                   (assoc acc category-id category-updated)))
-                               {}
-                               categories-old)]
-    {:db (update-in db [:communities community-id :categories] merge categories)}))
-
-(rf/defn load-category-states
-  {:events [:communities/load-category-states]}
-  [{:keys [db]} community-id]
-  (let [public-key            (get-in db [:profile/profile :public-key])
-        categories            (get-in db [:communities community-id :categories])
-        {:keys [keys hashes]} (reduce (fn [acc category]
-                                        (let [category-id (get category 0)
-                                              hash        (category-hash
-                                                           public-key
-                                                           community-id
-                                                           category-id)]
-                                          (-> acc
-                                              (assoc-in [:hashes category-id] hash)
-                                              (update :keys #(conj % hash)))))
-                                      {}
-                                      categories)]
-    {::async-storage/get {:keys keys
-                          :cb   #(re-frame/dispatch
-                                  [::category-states-loaded community-id hashes %])}}))
-
 ;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
 ;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
 ;; release, but for e2e `pop-to-root` closes even currently opened community
diff --git a/src/status_im/contact/block.cljs b/src/status_im/contact/block.cljs
index 1eb51a27f44f..487b76e57320 100644
--- a/src/status_im/contact/block.cljs
+++ b/src/status_im/contact/block.cljs
@@ -5,7 +5,7 @@
             [status-im.data-store.chats :as chats-store]
             [status-im2.contexts.contacts.events :as contacts-store]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.contexts.shell.activity-center.events :as activity-center]
             [status-im2.navigation.events :as navigation]))
 
diff --git a/src/status_im/data_store/chats.cljs b/src/status_im/data_store/chats.cljs
index 8afa017f30a4..df78b99a4d18 100644
--- a/src/status_im/data_store/chats.cljs
+++ b/src/status_im/data_store/chats.cljs
@@ -3,7 +3,7 @@
             [status-im2.constants :as constants]
             [status-im.data-store.messages :as messages]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (defn rpc->type
diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs
index 1a8aa3860119..bfaa44f3547b 100644
--- a/src/status_im/events.cljs
+++ b/src/status_im/events.cljs
@@ -2,7 +2,6 @@
   (:require
     clojure.set
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
     status-im.backup.core
     status-im.bootnodes.core
     status-im.browser.core
@@ -193,9 +192,9 @@
   (rf/merge cofx
             (cond
               (= :chat view-id)
-              {::async-storage/set! {:chat-id (get-in cofx [:db :current-chat-id])
-                                     :key-uid (get-in cofx [:db :profile/profile :key-uid])}
-               :db                  (assoc db :screens/was-focused-once? true)}
+              {:async-storage-set {:chat-id (get-in cofx [:db :current-chat-id])
+                                   :key-uid (get-in cofx [:db :profile/profile :key-uid])}
+               :db                (assoc db :screens/was-focused-once? true)}
 
               (not (get db :screens/was-focused-once?))
               {:db (assoc db :screens/was-focused-once? true)})
diff --git a/src/status_im/keycard/common.cljs b/src/status_im/keycard/common.cljs
index 6f9d15d9958f..14ebbc62423c 100644
--- a/src/status_im/keycard/common.cljs
+++ b/src/status_im/keycard/common.cljs
@@ -11,7 +11,7 @@
             [utils.datetime :as datetime]
             [status-im.utils.keychain.core :as keychain]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
 
diff --git a/src/status_im/keycard/fx.cljs b/src/status_im/keycard/fx.cljs
index cc400ffb9760..b7527e217f58 100644
--- a/src/status_im/keycard/fx.cljs
+++ b/src/status_im/keycard/fx.cljs
@@ -4,7 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.keycard.card :as card]
             [native-module.core :as native-module]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx
diff --git a/src/status_im/keycard/login.cljs b/src/status_im/keycard/login.cljs
index 116ab0b9b3fc..d6b0831b26c6 100644
--- a/src/status_im/keycard/login.cljs
+++ b/src/status_im/keycard/login.cljs
@@ -7,7 +7,7 @@
             [status-im.keycard.recovery :as recovery]
             [status-im.signing.core :as signing.core]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
 
diff --git a/src/status_im/keycard/real_keycard.cljs b/src/status_im/keycard/real_keycard.cljs
index 37df03a4e0c9..192906bc7c52 100644
--- a/src/status_im/keycard/real_keycard.cljs
+++ b/src/status_im/keycard/real_keycard.cljs
@@ -6,7 +6,7 @@
             [status-im.keycard.keycard :as keycard]
             [native-module.core :as native-module]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (defonce event-emitter
diff --git a/src/status_im/keycard/recovery.cljs b/src/status_im/keycard/recovery.cljs
index a4ea7b50ac54..91a365750323 100644
--- a/src/status_im/keycard/recovery.cljs
+++ b/src/status_im/keycard/recovery.cljs
@@ -16,7 +16,7 @@
             [utils.datetime :as datetime]
             [status-im.utils.keychain.core :as keychain]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]
             [utils.security.core :as security]))
diff --git a/src/status_im/keycard/sign.cljs b/src/status_im/keycard/sign.cljs
index e16dff8ddb0e..de7f3d8d9fcf 100644
--- a/src/status_im/keycard/sign.cljs
+++ b/src/status_im/keycard/sign.cljs
@@ -5,7 +5,7 @@
             [status-im.keycard.common :as common]
             [utils.re-frame :as rf]
             [utils.money :as money]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (rf/defn sign
diff --git a/src/status_im/keycard/simulated_keycard.cljs b/src/status_im/keycard/simulated_keycard.cljs
index 979443afb2eb..7d09ebe49dce 100644
--- a/src/status_im/keycard/simulated_keycard.cljs
+++ b/src/status_im/keycard/simulated_keycard.cljs
@@ -9,7 +9,7 @@
             [status-im.multiaccounts.create.core :as multiaccounts.create]
             [native-module.core :as native-module]
             [status-im.node.core :as node]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.utils :as utils]
             [taoensso.timbre :as log]))
 
diff --git a/src/status_im/multiaccounts/create/core.cljs b/src/status_im/multiaccounts/create/core.cljs
index 61e8fc9a0ac6..dc635c09ef7d 100644
--- a/src/status_im/multiaccounts/create/core.cljs
+++ b/src/status_im/multiaccounts/create/core.cljs
@@ -11,7 +11,7 @@
             [status-im2.config :as config]
             [utils.re-frame :as rf]
             [status-im.utils.signing-phrase.core :as signing-phrase]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [utils.security.core :as security]))
 
 (defn normalize-derived-data-keys
diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs
index efdfb175c00a..33db20de80fe 100644
--- a/src/status_im/multiaccounts/login/core.cljs
+++ b/src/status_im/multiaccounts/login/core.cljs
@@ -6,7 +6,7 @@
     [status-im.ui.components.react :as react]
     [utils.re-frame :as rf]
     [react-native.platform :as platform]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [utils.security.core :as security]))
 
 (re-frame/reg-fx
diff --git a/src/status_im/multiaccounts/recover/core.cljs b/src/status_im/multiaccounts/recover/core.cljs
index 33a30190df14..a480d50454c9 100644
--- a/src/status_im/multiaccounts/recover/core.cljs
+++ b/src/status_im/multiaccounts/recover/core.cljs
@@ -3,7 +3,7 @@
             [status-im2.constants :as constants]
             [status-im.multiaccounts.create.core :as multiaccounts.create]
             [native-module.core :as native-module]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx
diff --git a/src/status_im/multiaccounts/reset_password/core.cljs b/src/status_im/multiaccounts/reset_password/core.cljs
index 3a8c5c99ee7c..e4c92f7cf21d 100644
--- a/src/status_im/multiaccounts/reset_password/core.cljs
+++ b/src/status_im/multiaccounts/reset_password/core.cljs
@@ -5,7 +5,7 @@
             [native-module.core :as native-module]
             [status-im.popover.core :as popover]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [utils.security.core :as security]))
 
 (rf/defn on-input-change
diff --git a/src/status_im/multiaccounts/update/core.cljs b/src/status_im/multiaccounts/update/core.cljs
index ca1d5a5bb0d3..120c4680d1ae 100644
--- a/src/status_im/multiaccounts/update/core.cljs
+++ b/src/status_im/multiaccounts/update/core.cljs
@@ -1,6 +1,6 @@
 (ns status-im.multiaccounts.update.core
   (:require [status-im.ethereum.ens :as ens]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.constants :as constants]
             [taoensso.timbre :as log]
             [utils.re-frame :as rf]))
diff --git a/src/status_im/node/core.cljs b/src/status_im/node/core.cljs
index c8d9da2159ee..d2a6a18527ef 100644
--- a/src/status_im/node/core.cljs
+++ b/src/status_im/node/core.cljs
@@ -3,7 +3,7 @@
             [native-module.core :as native-module]
             [status-im2.config :as config]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [clojure.string :as string]
             [react-native.platform :as platform]))
 
diff --git a/src/status_im/notifications/local.cljs b/src/status_im/notifications/local.cljs
index 31b49e86028f..8aa31d7d118f 100644
--- a/src/status_im/notifications/local.cljs
+++ b/src/status_im/notifications/local.cljs
@@ -4,14 +4,14 @@
             [clojure.string :as string]
             [quo.platform :as platform]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im.ethereum.decode :as decode]
             [status-im.ethereum.tokens :as tokens]
             [utils.i18n :as i18n]
             [status-im.notifications.android :as pn-android]
             [utils.re-frame :as rf]
             [utils.money :as money]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.utils :as utils]
             [react-native.core :as rn]))
 
diff --git a/src/status_im/router/core.cljs b/src/status_im/router/core.cljs
index ceadb510b46a..fa066ba42990 100644
--- a/src/status_im/router/core.cljs
+++ b/src/status_im/router/core.cljs
@@ -7,7 +7,7 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip681 :as eip681]
             [status-im.ethereum.ens :as ens]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [native-module.core :as native-module]
             [status-im.ethereum.stateofus :as stateofus]
             [utils.validators :as validators]
diff --git a/src/status_im/signing/core.cljs b/src/status_im/signing/core.cljs
index 0b892c2fc49e..908890da892d 100644
--- a/src/status_im/signing/core.cljs
+++ b/src/status_im/signing/core.cljs
@@ -16,7 +16,7 @@
     [utils.re-frame :as rf]
     [status-im.utils.hex :as utils.hex]
     [utils.money :as money]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.utils :as utils]
     [status-im.wallet.core :as wallet]
     [status-im.wallet.prices :as prices]
diff --git a/src/status_im/signing/keycard.cljs b/src/status_im/signing/keycard.cljs
index 039a78ff5b55..0d75a398a7ee 100644
--- a/src/status_im/signing/keycard.cljs
+++ b/src/status_im/signing/keycard.cljs
@@ -3,7 +3,7 @@
             [utils.i18n :as i18n]
             [native-module.core :as native-module]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx
diff --git a/src/status_im/transport/message/core.cljs b/src/status_im/transport/message/core.cljs
index e0fa66cb4c23..696f82e3bc10 100644
--- a/src/status_im/transport/message/core.cljs
+++ b/src/status_im/transport/message/core.cljs
@@ -16,7 +16,7 @@
     [status-im.multiaccounts.update.core :as update.core]
     [status-im.pairing.core :as models.pairing]
     [utils.re-frame :as rf]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.visibility-status-updates.core :as models.visibility-status-updates]
     [status-im2.contexts.shell.activity-center.events :as activity-center]
     [status-im2.contexts.chat.messages.pin.events :as messages.pin]
diff --git a/src/status_im/ui/screens/privacy_and_security_settings/events.cljs b/src/status_im/ui/screens/privacy_and_security_settings/events.cljs
index b2e8a506adbf..e58180f9da74 100644
--- a/src/status_im/ui/screens/privacy_and_security_settings/events.cljs
+++ b/src/status_im/ui/screens/privacy_and_security_settings/events.cljs
@@ -5,7 +5,7 @@
             [utils.i18n :as i18n]
             [native-module.core :as native-module]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]
             [utils.security.core :as security]))
 
diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs
index 6aae6f738020..b9d59d156f43 100644
--- a/src/status_im/ui/screens/signing/views.cljs
+++ b/src/status_im/ui/screens/signing/views.cljs
@@ -23,7 +23,7 @@
     [status-im.ui.screens.signing.styles :as styles]
     [status-im.ui.screens.wallet.components.views :as wallet.components]
     [react-native.platform :as platform]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.utils :as utils]
     [status-im.wallet.utils :as wallet.utils]
     [utils.security.core :as security]))
diff --git a/src/status_im/utils/types.cljs b/src/status_im/utils/deprecated_types.cljs
similarity index 91%
rename from src/status_im/utils/types.cljs
rename to src/status_im/utils/deprecated_types.cljs
index 658692d40adc..f3a1f4f4e30d 100644
--- a/src/status_im/utils/types.cljs
+++ b/src/status_im/utils/deprecated_types.cljs
@@ -1,4 +1,5 @@
-(ns status-im.utils.types
+(ns status-im.utils.deprecated-types
+  {:deprecated true :superseded-by "utils.transforms"}
   (:refer-clojure :exclude [js->clj])
   (:require [cljs-bean.core :as clj-bean]))
 
diff --git a/src/status_im/utils/logging/core.cljs b/src/status_im/utils/logging/core.cljs
index a8ded5c7a9d7..3ddea330e82c 100644
--- a/src/status_im/utils/logging/core.cljs
+++ b/src/status_im/utils/logging/core.cljs
@@ -12,7 +12,7 @@
             [utils.re-frame :as rf]
             [utils.datetime :as datetime]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.common.log :as log]
             [status-im2.config :as config]))
 
diff --git a/src/status_im/utils/test.cljs b/src/status_im/utils/test.cljs
index f968dc618c10..322f43049266 100644
--- a/src/status_im/utils/test.cljs
+++ b/src/status_im/utils/test.cljs
@@ -1,6 +1,6 @@
 (ns status-im.utils.test
   (:require [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]))
+            [status-im.utils.deprecated-types :as types]))
 
 (def native-status (js/require "../../modules/react-native-status/nodejs/bindings"))
 
diff --git a/src/status_im/wallet/accounts/core.cljs b/src/status_im/wallet/accounts/core.cljs
index 50b8d9ea2c3f..943e5dabcbc7 100644
--- a/src/status_im/wallet/accounts/core.cljs
+++ b/src/status_im/wallet/accounts/core.cljs
@@ -18,7 +18,7 @@
     [utils.re-frame :as rf]
     [status-im.utils.hex :as hex]
     [status-im.utils.mobile-sync :as utils.mobile-sync]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.wallet.core :as wallet]
     [status-im.wallet.prices :as prices]
     [status-im2.navigation.events :as navigation]
diff --git a/src/status_im/wallet/core.cljs b/src/status_im/wallet/core.cljs
index 92f701fb6c43..dbd745dcd3d4 100644
--- a/src/status_im/wallet/core.cljs
+++ b/src/status_im/wallet/core.cljs
@@ -3,7 +3,7 @@
     [clojure.set :as set]
     [clojure.string :as string]
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im.bottom-sheet.events :as bottom-sheet]
     [status-im.contact.db :as contact.db]
     [status-im.ethereum.core :as ethereum]
@@ -826,8 +826,8 @@
 (rf/defn get-buy-crypto-preference
   {:events [::get-buy-crypto]}
   [_]
-  {::async-storage/get {:keys [:buy-crypto-hidden]
-                        :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
+  {:async-storage-get {:keys [:buy-crypto-hidden]
+                       :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
 
 (rf/defn wallet-will-focus
   {:events [::wallet-stack]}
@@ -848,8 +848,8 @@
 (rf/defn hide-buy-crypto
   {:events [::hide-buy-crypto]}
   [{:keys [db]}]
-  {:db                  (assoc db :wallet/buy-crypto-hidden true)
-   ::async-storage/set! {:buy-crypto-hidden true}})
+  {:db                (assoc db :wallet/buy-crypto-hidden true)
+   :async-storage-set {:buy-crypto-hidden true}})
 
 (rf/defn store-buy-crypto
   {:events [::store-buy-crypto-preference]}
@@ -1025,8 +1025,8 @@
 (rf/defn switch-transactions-management-enabled
   {:events [:multiaccounts.ui/switch-transactions-management-enabled]}
   [{:keys [db]} enabled?]
-  {::async-storage/set! {:transactions-management-enabled? enabled?}
-   :db                  (assoc db :wallet/transactions-management-enabled? enabled?)})
+  {:async-storage-set {:transactions-management-enabled? enabled?}
+   :db                (assoc db :wallet/transactions-management-enabled? enabled?)})
 
 (re-frame/reg-fx
  :wallet/initialize-transactions-management-enabled
diff --git a/src/status_im/wallet_connect/core.cljs b/src/status_im/wallet_connect/core.cljs
index a73808ffee9e..ee394962d74d 100644
--- a/src/status_im/wallet_connect/core.cljs
+++ b/src/status_im/wallet_connect/core.cljs
@@ -7,7 +7,7 @@
             [status-im.signing.core :as signing]
             [status-im2.config :as config]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.wallet-connect :as wallet-connect]
             [taoensso.timbre :as log]))
 
diff --git a/src/status_im2/common/async_storage.cljs b/src/status_im2/common/async_storage.cljs
new file mode 100644
index 000000000000..303073a9af33
--- /dev/null
+++ b/src/status_im2/common/async_storage.cljs
@@ -0,0 +1,7 @@
+(ns status-im2.common.async-storage
+  (:require [re-frame.core :as re-frame]
+            react-native.async-storage))
+
+(re-frame/reg-fx :async-storage-set (react-native.async-storage/set-item-factory))
+(re-frame/reg-fx :async-storage-get
+                 (fn [{ks :keys cb :cb}] (react-native.async-storage/get-items ks cb)))
diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs
index cfbba52dc1e4..c9c4331b7e77 100644
--- a/src/status_im2/common/confirmation_drawer/view.cljs
+++ b/src/status_im2/common/confirmation_drawer/view.cljs
@@ -11,11 +11,12 @@
   (if group-chat
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-20}]
+      :size                :size-20}]
     [quo/user-avatar
      {:full-name         display-name
       :profile-picture   photo-path
       :size              :xxs
+      :ring?             false
       :status-indicator? false}]))
 
 (defn extra-action-view
diff --git a/src/status_im2/common/log.cljs b/src/status_im2/common/log.cljs
index bc2394c60da9..316626d13149 100644
--- a/src/status_im2/common/log.cljs
+++ b/src/status_im2/common/log.cljs
@@ -2,7 +2,7 @@
   (:require [clojure.string :as string]
             [native-module.core :as native-module]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [status-im2.config :as config]
             [taoensso.timbre :as log]
             [utils.re-frame :as rf]))
@@ -21,7 +21,7 @@
 (defn setup
   [level]
   (let [handle-error   (fn [res]
-                         (let [{:keys [error]} (types/json->clj res)]
+                         (let [{:keys [error]} (transforms/json->clj res)]
                            (when-not (string/blank? error)
                              (log/error "init statusgo logging failed" error))))
         logging-params {:enable?        true
diff --git a/src/status_im2/contexts/add_new_contact/events.cljs b/src/status_im2/contexts/add_new_contact/events.cljs
index 826c71467e7c..69154d096aef 100644
--- a/src/status_im2/contexts/add_new_contact/events.cljs
+++ b/src/status_im2/contexts/add_new_contact/events.cljs
@@ -1,7 +1,7 @@
 (ns status-im2.contexts.add-new-contact.events
   (:require [clojure.string :as string]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [re-frame.core :as re-frame]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.ens :as ens]
@@ -129,7 +129,7 @@
     compressed-key
     constants/deserialization-key
     (fn [resp]
-      (let [{:keys [error]} (types/json->clj resp)]
+      (let [{:keys [error]} (transforms/json->clj resp)]
         (if error
           (on-error error)
           (on-success (str "0x" (subs resp 5)))))))))
@@ -194,6 +194,5 @@
 
 (rf/defn set-new-identity-reconnected
   [{:keys [db]}]
-  (let [input     (get-in db [:contacts/new-identity :input])
-        resubmit? (and input (= :new-contact (get-in db [:view-id])))]
+  (let [input (get-in db [:contacts/new-identity :input])]
     (rf/dispatch [:contacts/set-new-identity input])))
diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs
index 62e9c79164fa..ca37d9816090 100644
--- a/src/status_im2/contexts/chat/composer/effects.cljs
+++ b/src/status_im2/contexts/chat/composer/effects.cljs
@@ -5,7 +5,7 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.keyboard :as kb]
     [status-im2.contexts.chat.composer.utils :as utils]
diff --git a/src/status_im2/contexts/chat/composer/keyboard.cljs b/src/status_im2/contexts/chat/composer/keyboard.cljs
index fa99c1a80fac..0d519b276169 100644
--- a/src/status_im2/contexts/chat/composer/keyboard.cljs
+++ b/src/status_im2/contexts/chat/composer/keyboard.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.composer.keyboard
   (:require [oops.core :as oops]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [react-native.core :as rn]
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))
diff --git a/src/status_im2/contexts/chat/events.cljs b/src/status_im2/contexts/chat/events.cljs
index b51cb4b0967c..383b25836545 100644
--- a/src/status_im2/contexts/chat/events.cljs
+++ b/src/status_im2/contexts/chat/events.cljs
@@ -14,11 +14,11 @@
             [status-im.data-store.chats :as chats-store]
             [status-im2.contexts.contacts.events :as contacts-store]
             [status-im.utils.clocks :as utils.clocks]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [status-im2.common.muting.helpers :refer [format-mute-till]]))
 
@@ -173,9 +173,9 @@
     (chat.state/reset-visible-item)
     (rf/merge cofx
               (merge
-               {:db                  (dissoc db :current-chat-id)
-                ::async-storage/set! {:chat-id nil
-                                      :key-uid nil}}
+               {:db                (dissoc db :current-chat-id)
+                :async-storage-set {:chat-id nil
+                                    :key-uid nil}}
                (let [community-id (get-in db [:chats chat-id :community-id])]
                  ;; When navigating back from community chat to community, update switcher card
                  ;; A close chat event is also called while opening any chat.
@@ -234,7 +234,7 @@
 (rf/defn handle-one-to-one-chat-created
   {:events [:chat/one-to-one-chat-created]}
   [{:keys [db]} chat-id response-js]
-  (let [chat       (chats-store/<-rpc (first (types/js->clj (.-chats ^js response-js))))
+  (let [chat       (chats-store/<-rpc (first (transforms/js->clj (.-chats ^js response-js))))
         contact-js (first (.-contacts ^js response-js))
         contact    (when contact-js (contacts-store/<-rpc-js contact-js))]
     {:db       (cond-> db
diff --git a/src/status_im2/contexts/chat/group_details/view.cljs b/src/status_im2/contexts/chat/group_details/view.cljs
index 1f4b711741ce..0105a66b35bb 100644
--- a/src/status_im2/contexts/chat/group_details/view.cljs
+++ b/src/status_im2/contexts/chat/group_details/view.cljs
@@ -169,7 +169,7 @@
                :padding-horizontal 20}}
       [quo/group-avatar
        {:customization-color color
-        :size                :size/s-32}]
+        :size                :size-32}]
       [quo/text
        {:weight :semi-bold
         :size   :heading-1
diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
index 3636da13c57c..ddefe234bb0d 100644
--- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
+++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
@@ -181,7 +181,7 @@
          (assoc :ring? false))])
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-32}]))
+      :size                :size-32}]))
 
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
diff --git a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
index c0db70c2bb58..360ed96e68e6 100644
--- a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
+++ b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
@@ -17,6 +17,7 @@
      {:full-name         display-name
       :profile-picture   profile-picture
       :status-indicator? false
+      :ring?             false
       :size              :xxxs}]]
    [quo/text
     {:weight          :semi-bold
diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs
index 053e83b63684..072defd6a601 100644
--- a/src/status_im2/contexts/communities/discover/view.cljs
+++ b/src/status_im2/contexts/communities/discover/view.cljs
@@ -23,7 +23,6 @@
         :on-press  #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
       [quo/community-list-item
        {:on-press      (fn []
-                         (rf/dispatch [:communities/load-category-states (:id item)])
                          (rf/dispatch [:dismiss-keyboard])
                          (rf/dispatch [:communities/navigate-to-community (:id item)]))
         :on-long-press #(rf/dispatch
@@ -147,7 +146,6 @@
 
              [quo/community-list-item
               {:on-press      (fn []
-                                (rf/dispatch [:communities/load-category-states (:id community)])
                                 (rf/dispatch [:dismiss-keyboard])
                                 (rf/dispatch [:communities/navigate-to-community (:id community)]))
                :on-long-press #(js/alert "TODO: to be implemented")}
diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs
index 7286fa1026a9..0b50ccca4f43 100644
--- a/src/status_im2/contexts/communities/overview/view.cljs
+++ b/src/status_im2/contexts/communities/overview/view.cljs
@@ -24,7 +24,7 @@
      [quo/preview-list
       {:type   :user
        :number (count user-list)
-       :size   :size/s-24}
+       :size   :size-24}
       user-list]
      [quo/text
       {:accessibility-label :communities-screen-title
diff --git a/src/status_im2/contexts/contacts/events.cljs b/src/status_im2/contexts/contacts/events.cljs
index ab437e10c35b..e449e8b2d5a6 100644
--- a/src/status_im2/contexts/contacts/events.cljs
+++ b/src/status_im2/contexts/contacts/events.cljs
@@ -1,7 +1,7 @@
 (ns status-im2.contexts.contacts.events
   (:require
     [oops.core :as oops]
-    [status-im.utils.types :as types]
+    [utils.transforms :as transforms]
     [status-im2.constants :as constants]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
@@ -15,7 +15,7 @@
    :secondary-name        (.-secondaryName js-contact)
    :ens-name              (.-name js-contact)
    :nickname              (.-localNickname js-contact)
-   :images                (types/js->clj (oops/oget js-contact "images"))
+   :images                (transforms/js->clj (oops/oget js-contact "images"))
    :ens-verified          (oops/oget js-contact "ensVerified")
    :contact-request-state (oops/oget js-contact "contactRequestState")
    :last-updated          (oops/oget js-contact "lastUpdated")
diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs
index 052523e91f17..54986220b219 100644
--- a/src/status_im2/contexts/onboarding/common/background/view.cljs
+++ b/src/status_im2/contexts/onboarding/common/background/view.cljs
@@ -6,7 +6,7 @@
             [oops.core :refer [oget]]
             [react-native.platform :as platform]
             [status-im2.common.resources :as resources]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as shell.state]
             [status-im2.contexts.onboarding.common.carousel.view :as carousel]
             [status-im2.contexts.onboarding.common.background.style :as style]
diff --git a/src/status_im2/contexts/onboarding/events.cljs b/src/status_im2/contexts/onboarding/events.cljs
index 603672fc7978..46bce324e11d 100644
--- a/src/status_im2/contexts/onboarding/events.cljs
+++ b/src/status_im2/contexts/onboarding/events.cljs
@@ -1,7 +1,7 @@
 (ns status-im2.contexts.onboarding.events
   (:require [native-module.core :as native-module]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [status-im2.constants :as constants]
             [taoensso.timbre :as log]
             [utils.i18n :as i18n]
@@ -17,7 +17,7 @@
    (native-module/validate-mnemonic
     (security/safe-unmask-data mnemonic)
     (fn [result]
-      (let [{:keys [error keyUID]} (types/json->clj result)]
+      (let [{:keys [error keyUID]} (transforms/json->clj result)]
         (if (seq error)
           (when on-error (on-error error))
           (on-success mnemonic keyUID)))))))
diff --git a/src/status_im2/contexts/profile/config.cljs b/src/status_im2/contexts/profile/config.cljs
index 7a4a6faefe14..ddfcbb961869 100644
--- a/src/status_im2/contexts/profile/config.cljs
+++ b/src/status_im2/contexts/profile/config.cljs
@@ -2,7 +2,7 @@
   (:require [status-im2.config :as config]
             [native-module.core :as native-module]
             [clojure.string :as string]
-            [utils.transforms :as types]
+            [utils.transforms :as transforms]
             [utils.re-frame :as rf]))
 
 (defn login
@@ -47,7 +47,7 @@
 (rf/defn get-node-config-callback
   {:events [:profile.config/get-node-config-callback]}
   [{:keys [db]} node-config-json]
-  (let [node-config (types/json->clj node-config-json)]
+  (let [node-config (transforms/json->clj node-config-json)]
     {:db (assoc-in db
           [:profile/profile :wakuv2-config]
           (get node-config :WakuV2Config))}))
diff --git a/src/status_im2/contexts/profile/profiles/view.cljs b/src/status_im2/contexts/profile/profiles/view.cljs
index ca062fcfeaa7..64275ab83c09 100644
--- a/src/status_im2/contexts/profile/profiles/view.cljs
+++ b/src/status_im2/contexts/profile/profiles/view.cljs
@@ -16,7 +16,7 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [utils.security.core :as security]
-            [utils.transforms :as types]))
+            [utils.transforms :as transforms]))
 
 (defonce push-animation-fn-atom (atom nil))
 (defonce pop-animation-fn-atom (atom nil))
@@ -77,7 +77,7 @@
                            (native-module/delete-multiaccount
                             key-uid
                             (fn [result]
-                              (let [{:keys [error]} (types/json->clj result)]
+                              (let [{:keys [error]} (transforms/json->clj result)]
                                 (rf/dispatch [:onboarding-2/on-delete-profile-success key-uid])
                                 (log/info "profile deleted: error" error)))))}])
 
diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
index 335721201d06..9f1a0b0c05a3 100644
--- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
@@ -7,15 +7,15 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key   :size/s-20
+    :options [{:key   :size-20
                :value "20"}
-              {:key   :size/s-28
+              {:key   :size-28
                :value "28"}
-              {:key   :size/s-32
+              {:key   :size-32
                :value "32"}
-              {:key   :size/s-48
+              {:key   :size-48
                :value "48"}
-              {:key   :size/s-80
+              {:key   :size-80
                :value "80"}]}
    {:label "Avatar:"
     :key   :picture?
@@ -27,7 +27,7 @@
 (defn view
   []
   (let [state (reagent/atom {:customization-color :blue
-                             :size                :size/s-20
+                             :size                :size-20
                              :picture?            false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
index e2caa1b90ea4..a39438b08aa5 100644
--- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
@@ -6,10 +6,10 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :size/s-20}
-              {:key :size/s-24}
-              {:key :size/s-32}
-              {:key :size/s-48}]}
+    :options [{:key :size-20}
+              {:key :size-24}
+              {:key :size-32}
+              {:key :size-48}]}
    {:key     :icon
     :type    :select
     :options [{:key   :i/placeholder20
@@ -20,7 +20,7 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:size  :size/s-48
+  (let [state (reagent/atom {:size  :size-48
                              :icon  :i/placeholder20
                              :color :primary})]
     (fn []
diff --git a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
index b760b5951d83..5335afd88166 100644
--- a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
+++ b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
@@ -1,55 +1,28 @@
 (ns status-im2.contexts.quo-preview.browser.browser-input
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
-            [utils.re-frame :as rf]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show Favicon"
-    :key   :favicon?
-    :type  :boolean}
-   {:label "Locked"
-    :key   :locked?
-    :type  :boolean}
-   {:label "Disabled"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key :favicon? :type :boolean}
+   {:key :locked? :type :boolean}
+   {:key :blur? :type :boolean}
+   {:key :placeholder :type :text}
+   {:key :disabled? :type :boolean}
+   (preview/customization-color-option)])
 
-(defn preview-browser-input
+(defn view
   []
-  (reagent/with-let [keyboard-shown?        (reagent/atom false)
-                     keyboard-show-listener (.addListener rn/keyboard
-                                                          "keyboardWillShow"
-                                                          #(reset! keyboard-shown? true))
-                     keyboard-hide-listener (.addListener rn/keyboard
-                                                          "keyboardWillHide"
-                                                          #(reset! keyboard-shown? false))
-                     {:keys [bottom]}       (safe-area/get-insets)
-                     state                  (reagent/atom {:blur?       false
-                                                           :disabled?   false
-                                                           :favicon?    false
-                                                           :placeholder "Search or enter dapp domain"
-                                                           :locked?     false})]
-    [preview/preview-container
-     {:state      state
-      :descriptor descriptor}
-     [quo/page-nav
-      {:type      :no-title
-       :icon-name :i/arrow-left
-       :on-press  #(rf/dispatch [:navigate-back])}]
-
-     [rn/flat-list
-      {:key-fn                       str
-       :keyboard-should-persist-taps :always
-       :style                        {:flex 1}}]
-     [rn/view
-      [quo/browser-input
-       (assoc @state
-              :customization-color :blue
-              :favicon             (when (:favicon? @state) :i/verified))]
-      [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
-    (finally
-     (.remove keyboard-show-listener)
-     (.remove keyboard-hide-listener))))
+  (let [state (reagent/atom {:blur?       false
+                             :disabled?   false
+                             :favicon?    false
+                             :placeholder "Search or enter dapp domain"
+                             :locked?     false})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/browser-input
+        (assoc @state
+               :favicon
+               (when (:favicon? @state) :i/verified))]])))
diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
index 529da6f66122..63f3e7b410e6 100644
--- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
@@ -24,15 +24,15 @@
                :value "Network"}]}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :number
     :type :text}
@@ -104,10 +104,9 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:type               :accounts
-                             :size               :size/s-32
-                             :number             4
-                             :more-than-99-label "99+"})
+  (let [state (reagent/atom {:type   :accounts
+                             :size   :size-32
+                             :number 4})
         type  (reagent/cursor state [:type])
         blur? (reagent/cursor state [:blur?])]
     (fn []
diff --git a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
index ee813d66bdb1..08317b929036 100644
--- a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
@@ -1,42 +1,23 @@
 (ns status-im2.contexts.quo-preview.list-items.token-value
   (:require
     [quo2.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Token:"
-    :key     :token
+  [{:key     :token
     :type    :select
-    :options [{:key   :eth
-               :value "ETH"}
-              {:key   :snt
-               :value "SNT"}]}
-   {:label   "State:"
-    :key     :state
+    :options [{:key :eth}
+              {:key :snt}]}
+   {:key     :status
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :pressed
-               :value "Pressed"}
-              {:key   :active
-               :value "Active"}]}
-   {:label   "Status:"
-    :key     :status
-    :type    :select
-    :options [{:key   :empty
-               :value "Empty"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :negative
-               :value "Negative"}]}
+    :options [{:key :empty}
+              {:key :positive}
+              {:key :negative}]}
    (preview/customization-color-option)
-   {:label "Metrics?:"
-    :key   :metrics?
-    :type  :boolean}])
+   {:key :metrics? :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:token               :snt
                              :state               :default
@@ -49,11 +30,9 @@
                                                    :fiat-change       "€0.00"}})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        [rn/view
-         {:style {:align-items :center
-                  :margin-top  50}}
-         [quo/token-value @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center
+                                    :margin-top  50}}
+       [quo/token-value @state]])))
 
diff --git a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
index 200d28fa4f21..f6771969a9f0 100644
--- a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
@@ -1,35 +1,19 @@
 (ns status-im2.contexts.quo-preview.list-items.user-list
-  (:require [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.components.list-items.user-list :as user-list]
+            [quo2.core :as quo]
             [utils.address :as address]))
 
 (def descriptor
-  [{:label "Primary name"
-    :key   :primary-name
+  [{:key   :primary-name
     :type  :text
     :limit 24}
-   {:label "Secondary name"
-    :key   :secondary-name
-    :type  :text}
-   {:label "Chat key"
-    :key   :chat-key
-    :type  :text}
-   {:label "Is contact?"
-    :key   :contact?
-    :type  :boolean}
-   {:label "Is verified?"
-    :key   :verified?
-    :type  :boolean}
-   {:label "Is untrustworthy?"
-    :key   :untrustworthy?
-    :type  :boolean}
-   {:label "Online?"
-    :key   :online?
-    :type  :boolean}
-   {:label   "Accessory:"
-    :key     :accessory
+   {:key :secondary-name :type :text}
+   {:key :contact? :type :boolean}
+   {:key :verified? :type :boolean}
+   {:key :untrustworthy? :type :boolean}
+   {:key :online? :type :boolean}
+   {:key     :accessory
     :type    :select
     :options [{:key   {:type :options}
                :value "Options"}
@@ -38,7 +22,7 @@
               {:key   {:type :close}
                :value "Close"}]}])
 
-(defn preview-user-list
+(defn view
   []
   (let [state (reagent/atom {:primary-name   "Alisher Yakupov"
                              :short-chat-key (address/get-shortened-compressed-key
@@ -50,11 +34,8 @@
                              :online?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical    60
-          :padding--horizontal 15
-          :justify-content     :center}
-         [user-list/user-list @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   30
+                                    :padding-horizontal 15}}
+       [quo/user-list @state]])))
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 0852e1d4773e..6a45f320e9fa 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -169,7 +169,7 @@
                        {:name      :wallet-ctas
                         :component wallet-ctas/view}]
    :browser           [{:name      :browser-input
-                        :component browser-input/preview-browser-input}]
+                        :component browser-input/view}]
    :calendar          [{:name      :calendar
                         :component calendar/view}
                        {:name      :calendar-day
@@ -275,10 +275,10 @@
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :token-value
-                        :component token-value/preview}
+                        :component token-value/view}
                        {:name      :user-list
                         :options   {:topBar {:visible true}}
-                        :component user-list/preview-user-list}]
+                        :component user-list/view}]
    :loaders           [{:name      :skeleton-list
                         :options   {:topBar {:visible true}}
                         :component skeleton-list/view}]
@@ -287,27 +287,27 @@
                        {:name      :markdown-list
                         :component markdown-list/view}]
    :messages          [{:name      :gap
-                        :component messages-gap/preview-messages-gap}
+                        :component messages-gap/view}
                        {:name      :system-messages
-                        :component system-message/preview-system-message}
+                        :component system-message/view}
                        {:name      :author
                         :component messages-author/view}]
    :navigation        [{:name      :bottom-nav-tab
-                        :component bottom-nav-tab/preview-bottom-nav-tab}
+                        :component bottom-nav-tab/view}
                        {:name      :top-nav
-                        :component top-nav/preview}
+                        :component top-nav/view}
                        {:name      :page-nav
-                        :component page-nav/preview-page-nav}
+                        :component page-nav/view}
                        {:name      :floating-shell-button
-                        :component floating-shell-button/preview-floating-shell-button}]
+                        :component floating-shell-button/view}]
    :notifications     [{:name      :activity-logs
                         :component activity-logs/preview-activity-logs}
                        {:name      :activity-logs-photos
                         :component activity-logs-photos/preview-activity-logs-photos}
                        {:name      :toast
-                        :component toast/preview-toasts}
+                        :component toast/view}
                        {:name      :notification
-                        :component notification/preview-notification}]
+                        :component notification/view}]
    :onboarding        [{:name      :small-option-card
                         :component small-option-card/preview-small-option-card}]
    :password          [{:name      :tips
diff --git a/src/status_im2/contexts/quo_preview/messages/gap.cljs b/src/status_im2/contexts/quo_preview/messages/gap.cljs
index 2210fa9dd7d3..9b64c9780ec2 100644
--- a/src/status_im2/contexts/quo_preview/messages/gap.cljs
+++ b/src/status_im2/contexts/quo_preview/messages/gap.cljs
@@ -8,7 +8,7 @@
   [{:key :timestamp-far :type :text}
    {:key :timestamp-near :type :text}])
 
-(defn preview-messages-gap
+(defn view
   []
   (let [state (reagent/atom {:timestamp-far          "Jan 8 · 09:12"
                              :timestamp-near         "Mar 8 · 22:42"
diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs
index cede99d56858..fca47b1c2aa9 100644
--- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs
+++ b/src/status_im2/contexts/quo_preview/messages/system_message.cljs
@@ -30,7 +30,7 @@
          {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
           :display-name (:pinned-by @state)}))
 
-(defn preview-system-message
+(defn view
   []
   (let [state (reagent/atom {:type      :pinned
                              :pinned-by "Steve"
diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
index 359481f43253..feaf9efb3887 100644
--- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
@@ -1,15 +1,12 @@
 (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
-  (:require [clojure.string :as string]
-            [quo2.components.navigation.bottom-nav-tab.view :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :icon
+  [{:key     :icon
     :type    :select
     :options [{:key   :i/communities
                :value "Communities"}
@@ -19,33 +16,15 @@
                :value "Wallet"}
               {:key   :i/browser
                :value "Browser"}]}
-   {:label "Selected?"
-    :key   :selected?
-    :type  :boolean}
-   {:label "Pass through?"
-    :key   :pass-through?
-    :type  :boolean}
-   {:label "New Notifications?"
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
+   {:key :selected? :type :boolean}
+   {:key :pass-through? :type :boolean}
+   {:key :new-notifications? :type :boolean}
+   {:key     :notification-indicator
     :type    :select
-    :options [{:key   :counter
-               :value :counter}
-              {:key   :unread-dot
-               :value :unread-dot}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[k _]]
-                    {:key   k
-                     :value (string/capitalize (name k))})
-                  colors/customization)}])
+    :options [{:key :counter}
+              {:key :unread-dot}]}
+   {:key :counter-label :type :text}
+   (preview/customization-color-option)])
 
 (defn get-icon-color
   [selected? pass-through?]
@@ -60,11 +39,11 @@
     (reanimated/set-shared-value
      icon-color-anim
      (get-icon-color selected? pass-through?))
-    [quo2/bottom-nav-tab
+    [quo/bottom-nav-tab
      (merge state {:icon-color-anim icon-color-anim})
      (:value state)]))
 
-(defn preview-bottom-nav-tab
+(defn view
   []
   (let [state         (reagent/atom {:icon                   :i/communities
                                      :new-notifications?     true
@@ -76,10 +55,8 @@
         pass-through? (reagent/cursor state [:pass-through?])]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [:f> f-bottom-tab @state @selected? @pass-through?]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [:f> f-bottom-tab @state @selected? @pass-through?]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
index 9c8a2ea378d3..cea718f0e60d 100644
--- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
@@ -1,29 +1,18 @@
 (ns status-im2.contexts.quo-preview.navigation.floating-shell-button
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show jump to?"
-    :key   :show-jump-to?
-    :type  :boolean}
-   {:label "Show search?"
-    :key   :show-search?
-    :type  :boolean}
-   {:label "Show mention?"
-    :key   :show-mention?
-    :type  :boolean}
-   {:label   "Scroll Type"
-    :key     :scroll-type
+  [{:key :show-jump-to? :type :boolean}
+   {:key :show-search? :type :boolean}
+   {:key :show-mention? :type :boolean}
+   {:key     :scroll-type
     :type    :select
-    :options [{:key   :notification-up
-               :value "Notification Up"}
-              {:key   :notification-down
-               :value "Notification Down"}
-              {:key   :scroll-to-bottom
-               :value "Scroll To Bottom"}]}])
+    :options [{:key :notification-up}
+              {:key :notification-down}
+              {:key :scroll-to-bottom}]}])
 
 (defn mock-data
   [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
@@ -41,16 +30,14 @@
     (= scroll-type :scroll-to-bottom)
     (assoc :scroll-to-bottom {:on-press #()})))
 
-(defn preview-floating-shell-button
+(defn view
   []
   (let [state (reagent/atom {:show-jump-to? true
                              :scroll-type   :notification-down})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/floating-shell-button (mock-data @state) nil]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [quo/floating-shell-button (mock-data @state) nil]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
index a67930ab5bf9..ca59feacd00a 100644
--- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
@@ -2,43 +2,31 @@
   (:require [clojure.string :as string]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def ^:private descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :no-title
-               :value "No Title"}
-              {:key   :title
-               :value "Title"}
-              {:key   :dropdown
-               :value "Dropdown"}
-              {:key   :token
-               :value "Token"}
-              {:key   :channel
-               :value "Channel"}
+    :options [{:key :no-title}
+              {:key :title}
+              {:key :dropdown}
+              {:key :token}
+              {:key :channel}
               {:key   :title-description
                :value "Title + Description"}
-              {:key   :wallet-networks
-               :value "Wallet Networks"}
-              {:key   :community
-               :value "Community"}
-              {:key   :network
-               :value "Network"}]}
-   {:label   "Background"
-    :key     :background
+              {:key :wallet-networks}
+              {:key :community}
+              {:key :network}]}
+   {:key     :background
     :type    :select
     :options (map (fn [bg-type]
                     {:key   bg-type
                      :value (string/capitalize (name bg-type))})
                   [:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
-   {:label   "Icon"
-    :key     :icon-name
+   {:key     :icon-name
     :type    :select
     :options [{:key   :i/placeholder
                :value "Placeholder"}
@@ -60,79 +48,55 @@
       :value "3 actions"}]))
 
 (def account-switcher
-  {:key   :account-switcher
-   :value "Account-switcher"})
+  {:key :account-switcher})
 
 (def no-title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}])
 
 (def title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-   {:label "Title"
-    :key   :title
-    :type  :text}
-   {:label   "Text Align"
-    :key     :text-align
+   {:key :title :type :text}
+   {:key     :text-align
     :type    :select
-    :options [{:key   :left
-               :value "Left"}
-              {:key   :center
-               :value "Center"}]}])
+    :options [{:key :left}
+              {:key :center}]}])
 
 (def dropdown-descriptor
-  [{:label "Dropdown Selected?"
-    :key   :dropdown-selected?
-    :type  :boolean}
-   {:label "Dropdown Text"
-    :key   :dropdown-text
-    :type  :text}])
+  [{:key :dropdown-selected? :type :boolean}
+   {:key :dropdown-text :type :text}])
 
 (def token-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-
-   {:label   "Token Logo"
-    :key     :token-logo
+   {:key     :token-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :status-logo)
                :value "Status logo"}
               {:key   (resources/get-mock-image :rarible)
                :value "Rarible"}]}
-
-   {:label "Token Name"
-    :key   :token-name
-    :type  :text}
-   {:label "Token Abbreviation"
-    :key   :token-abbreviation
-    :type  :text}])
+   {:key  :token-name
+    :type :text}
+   {:key  :token-abbreviation
+    :type :text}])
 
 (def channel-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-
-   {:label   "Channel Emoji"
-    :key     :channel-emoji
+   {:key     :channel-emoji
     :type    :select
     :options [{:key   "🍇"
                :value "🍇"}
               {:key   "🍑"
                :value "🍑"}]}
 
-   {:label "Channel Name"
-    :key   :channel-name
-    :type  :text}
-   {:label   "Channel Icon"
-    :key     :channel-icon
+   {:key :channel-name :type :text}
+   {:key     :channel-icon
     :type    :select
     :options [{:key   :i/locked
                :value "Locked"}
@@ -140,18 +104,12 @@
                :value "Unlocked"}]}])
 
 (def title-description-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (butlast right-side-options)}
-   {:label "title"
-    :key   :title
-    :type  :text}
-   {:label "description"
-    :key   :description
-    :type  :text}
-   {:label   "Picture"
-    :key     :picture
+   {:key :title :type :text}
+   {:key :description :type :text}
+   {:key     :picture
     :type    :select
     :options [{:key   nil
                :value "No picture"}
@@ -161,74 +119,49 @@
                :value "Photo 2"}]}])
 
 (def wallet-networks-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj (take 2 right-side-options) account-switcher)}])
 
 (def community-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Community Logo"
-    :key     :community-logo
+   {:key     :community-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key :community-name :type :text}])
 
 (def network-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Network Logo"
-    :key     :network-logo
+   {:key     :network-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])
 
 (defn- photo-bg
   [background]
-  (when (#{:photo :blur} background)
+  (when (#{:photo} background)
     [rn/image
      {:style  {:position :absolute
                :top      0
                :bottom   0
-               :left     0
+               :left     20
                :right    0
                :width    "100%"
                :height   200}
       :source (resources/get-mock-image :photo2)}]))
 
-(defn- blur-bg
-  [background]
-  (when (= :blur background)
-    [rn/view
-     {:style {:position :absolute
-              :top      0
-              :bottom   0
-              :left     0
-              :right    0
-              :width    "100%"
-              :height   200}}
-     [blur/view
-      {:style       {:width  "100%"
-                     :height 20}
-       :blur-type   :light
-       :blur-amount 20}]]))
-
-(defn preview-page-nav
+(defn view
   [{:keys [theme]}]
   (let [state (reagent/atom
                {:type               :title-description
@@ -257,30 +190,30 @@
                 :network-logo       (resources/get-mock-image :diamond)})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor (concat descriptor
-                            (case (:type @state)
-                              :no-title          no-title-descriptor
-                              :title             title-descriptor
-                              :dropdown          dropdown-descriptor
-                              :token             token-descriptor
-                              :channel           channel-descriptor
-                              :title-description title-description-descriptor
-                              :wallet-networks   wallet-networks-descriptor
-                              :community         community-descriptor
-                              :network           network-descriptor
-                              nil))}
-       [rn/view
-        {:style {:background-color (case (:background @state)
-                                     :white       colors/white
-                                     :neutral-5   colors/neutral-5
-                                     :neutral-90  colors/neutral-90
-                                     :neutral-95  colors/neutral-95
-                                     :neutral-100 colors/neutral-100
-                                     nil)
-                 :padding-vertical 40
-                 :height           200
-                 :width            "100%"}}
-        [photo-bg (:background @state)]
-        [blur-bg (:background @state)]
-        [quo/page-nav @state]]])))
+       {:state                     state
+        :descriptor                (concat descriptor
+                                           (case (:type @state)
+                                             :no-title          no-title-descriptor
+                                             :title             title-descriptor
+                                             :dropdown          dropdown-descriptor
+                                             :token             token-descriptor
+                                             :channel           channel-descriptor
+                                             :title-description title-description-descriptor
+                                             :wallet-networks   wallet-networks-descriptor
+                                             :community         community-descriptor
+                                             :network           network-descriptor
+                                             nil))
+        :blur?                     (= :blur (:background @state))
+        :show-blur-background?     (= :blur (:background @state))
+        :component-container-style {:background-color (case (:background @state)
+                                                        :white       colors/white
+                                                        :neutral-5   colors/neutral-5
+                                                        :neutral-90  colors/neutral-90
+                                                        :neutral-95  colors/neutral-95
+                                                        :neutral-100 colors/neutral-100
+                                                        nil)
+                                    :margin-vertical  40
+                                    :width            "100%"}}
+
+       [photo-bg (:background @state)]
+       [quo/page-nav @state]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
index 7087e52e9344..e16fe943e4e3 100644
--- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
@@ -1,11 +1,8 @@
 (ns status-im2.contexts.quo-preview.navigation.top-nav
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.core :as quo]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
-            [quo2.theme :as quo.theme]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
   [{:key     :notification
@@ -21,9 +18,9 @@
     :type :number}
    (preview/customization-color-option)])
 
-(defn preview
+(defn view
   []
-  (let [state (reagent/atom {:noticication-count  0
+  (let [state (reagent/atom {:notification-count  0
                              :customization-color :blue})]
     (fn []
       (let [blur?               (:blur? @state)
@@ -32,43 +29,25 @@
             notification        (:notification @state)
             notification-count  (:notification-count @state)]
         [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view {:padding-bottom 150}
-          [rn/view
-           {:padding-vertical   60
-            :padding-horizontal 20
-            :flex-direction     :row
-            :align-items        :center}
-           (when blur?
-             [rn/image
-              {:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background
-                                                                        :dark-blur-background))
-               :style  {:position :absolute
-                        :top      0
-                        :left     0
-                        :right    0
-                        :bottom   0}}])
-           (when jump-to?
-             [rn/image
-              {:background-color colors/neutral-100
-               :style            {:position :absolute
-                                  :top      0
-                                  :left     0
-                                  :right    0
-                                  :bottom   0}}])
-           [quo/top-nav
-            {:container-style          {:flex 1 :z-index 2}
-             :max-unread-notifications 99
-             :blur?                    blur?
-             :notification             notification
-             :customization-color      customization-color
-             :notification-count       notification-count
-             :jump-to?                 jump-to?
-             :avatar-props             {:online?   true
-                                        :full-name "Test User"}
-             :avatar-on-press          #(js/alert "avatar pressed")
-             :scan-on-press            #(js/alert "scan pressed")
-             :activity-center-on-press #(js/alert "activity-center pressed")
-             :qr-code-on-press         #(js/alert "qr pressed")}]]]]))))
+         {:state                     state
+          :descriptor                descriptor
+          :blur?                     (and blur? (not jump-to?))
+          :show-blur-background?     (and blur? (not jump-to?))
+          :component-container-style {:padding-vertical   60
+                                      :padding-horizontal 20
+                                      :background-color   (when jump-to? colors/neutral-100)}}
+         [quo/top-nav
+          {:container-style          {:flex 1 :z-index 2}
+           :max-unread-notifications 99
+           :blur?                    blur?
+           :notification             notification
+           :customization-color      customization-color
+           :notification-count       notification-count
+           :jump-to?                 jump-to?
+           :avatar-props             {:online?   true
+                                      :full-name "Test User"}
+           :avatar-on-press          #(js/alert "avatar pressed")
+           :scan-on-press            #(js/alert "scan pressed")
+           :activity-center-on-press #(js/alert "activity-center pressed")
+           :qr-code-on-press         #(js/alert "qr pressed")}]]))))
 
diff --git a/src/status_im2/contexts/quo_preview/notifications/notification.cljs b/src/status_im2/contexts/quo_preview/notifications/notification.cljs
index 62deaf635dfd..9ec0e40b986a 100644
--- a/src/status_im2/contexts/quo_preview/notifications/notification.cljs
+++ b/src/status_im2/contexts/quo_preview/notifications/notification.cljs
@@ -76,7 +76,7 @@
     :duration 3000
     :type     :notification}])
 
-(defn preview-notification
+(defn view
   []
   (fn []
     [preview/preview-container
diff --git a/src/status_im2/contexts/quo_preview/notifications/toast.cljs b/src/status_im2/contexts/quo_preview/notifications/toast.cljs
index 1ae5fd233a3d..3844a4dc05cf 100644
--- a/src/status_im2/contexts/quo_preview/notifications/toast.cljs
+++ b/src/status_im2/contexts/quo_preview/notifications/toast.cljs
@@ -86,22 +86,17 @@
                  :duration   3000}])}
             "update above toast"]])))))
 
-(defn preview-toasts
+(defn view
   []
-  (fn []
-    [preview/preview-container
-     [rn/view
-      {:background-color "#508485"
-       :flex-direction   :column
-       :justify-content  :flex-start
-       :height           300}]
-     [into
-      [rn/view
-       {:flex    1
-        :padding 16}]
-      [^{:key :basic} [toast-button-basic]
-       ^{:key :with-undo-action} [toast-button-with-undo-action]
-       ^{:key :with-multiline} [toast-button-multiline]
-       ^{:key :30s-duration} [toast-button-30s-duration]
-       ^{:key :upsert}
-       [update-toast-button]]]]))
+  [preview/preview-container
+   {:component-container-style
+    {:flex-direction  :column
+     :justify-content :flex-start}}
+   [into
+    [rn/view {:style {:flex 1 :padding 16}}
+     [toast-button-basic]
+     [toast-button-with-undo-action]
+     [toast-button-multiline]
+     [toast-button-30s-duration]
+     [update-toast-button]
+     [update-toast-button]]]])
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 e967a1170594..9c4880022940 100644
--- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.context-tags
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
@@ -69,8 +70,9 @@
       :type    :select
       :options (map (fn [idx]
                       {:key   (mapv (fn [picture idx-name]
-                                      {:profile-picture picture
-                                       :full-name       (str (inc idx-name))})
+                                      {:profile-picture     picture
+                                       :full-name           (str (inc idx-name))
+                                       :customization-color (rand-nth (keys colors/customization))})
                                     (take idx (cycle users))
                                     (range))
                        :value (str idx)})
@@ -175,12 +177,15 @@
           :customization-color :army
           :profile-picture     nil
           :full-name           "Full Name"
-          :users               [{:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "1"}
-                                {:profile-picture nil
-                                 :full-name       "3"}
-                                {:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "2"}]
+          :users               [{:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "1"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     nil
+                                 :full-name           "3"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "2"
+                                 :customization-color (rand-nth (keys colors/customization))}]
           :group-name          "Group"
           :community-logo      (resources/mock-images :coinbase)
           :community-name      "Community"
@@ -200,31 +205,34 @@
           :address             example-pk
           :icon                :i/placeholder
           :context             "Context"
-          :duration            "00:32"})]
-    (fn []
-      [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))}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:padding-vertical 60}}
-         [preview/blur-view
-          {:style                 {:flex              1
-                                   :margin-vertical   20
-                                   :margin-horizontal 40}
-           :show-blur-background? (:blur? @state)}
-          [quo/context-tag @state]]]]])))
+          :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]]])]))
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 2634c8006a09..9a881e0128cf 100644
--- a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
@@ -13,15 +13,15 @@
     :type :text}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :blur?
     :type :boolean}])
@@ -30,7 +30,7 @@
   []
   (let [state (reagent/atom {:type   :squared
                              :number "148"
-                             :size   :size/s-32
+                             :size   :size-32
                              :blur?  false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
diff --git a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
index 2a20291e9245..a13bebb8877c 100644
--- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
+++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
@@ -116,7 +116,5 @@
                    :justify-content  :center
                    :margin-left      8}}
           [icon/icon :i/check {:color colors/white :size 16}]]]
-        [rn/view {:style {:flex 1}}
-         [preview/customizer state descriptor]]
-        [rn/view {:style {:align-items :center :margin-top 40}}
+        [rn/view {:style {:align-items :center :margin-bottom 20}}
          [quo/account-card @state]]])]))
diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs
index 49b898195bba..64983fce8de5 100644
--- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs
+++ b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs
@@ -52,6 +52,10 @@
     :state         :default
     :action        :none}])
 
+(defn get-accounts
+  [blur?]
+  (map (fn [account] (assoc account :blur? blur?)) accounts))
+
 (def descriptor
   [{:label   "Stored:"
     :key     :stored
@@ -74,7 +78,9 @@
                :value "Default keypair"}
               {:key   :other
                :value "Other"}]}
-   (preview/customization-color-option)])
+   (preview/customization-color-option)
+   {:key  :blur?
+    :type :boolean}])
 
 (def default-details
   {:full-name "John Doe"
@@ -84,16 +90,20 @@
 
 (defn preview
   []
-  (let [state (reagent/atom {:accounts            accounts
-                             :customization-color :blue
+  (let [state (reagent/atom {:customization-color :blue
                              :type                :default-keypair
                              :stored              :on-device
                              :on-options-press    #(js/alert "Options pressed")
-                             :action              :selector})]
+                             :action              :selector
+                             :blur?               false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true
+        :blur-height           400}
        [rn/view
         {:style {:padding-vertical 30
                  :flex-direction   :row
@@ -101,4 +111,5 @@
         [quo/keypair
          (merge
           @state
-          {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]])))
+          {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+           :accounts (get-accounts (:blur? @state))})]]])))
diff --git a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
index 292092a00eb9..440d1552dea7 100644
--- a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
@@ -4,11 +4,11 @@
             [react-native.gesture :as gesture]
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
+            [quo2.core :as quo]
             [status-im2.contexts.shell.jump-to.utils :as utils]
             [status-im2.contexts.shell.jump-to.state :as state]
             [status-im2.contexts.shell.jump-to.animation :as animation]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
-            [quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
             [status-im2.contexts.shell.jump-to.components.bottom-tabs.style :as style]))
 
 (defn blur-overlay-params
@@ -25,7 +25,7 @@
         icon-color          (->> stack-id
                                  (get shell.constants/tabs-icon-color-keywords)
                                  (get shared-values))]
-    [bottom-nav-tab/bottom-nav-tab
+    [quo/bottom-nav-tab
      (-> notifications-data
          (get stack-id)
          (assoc :test-ID             stack-id
diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
index d67b36d4fb5c..8e4ca907dcd5 100644
--- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
@@ -66,9 +66,8 @@
 
        constants/content-type-image
        [quo/preview-list
-        {:type               :collectibles
-         :more-than-99-label (i18n/label :counter-99-plus)
-         :size               :size/s-24}
+        {:type :collectibles
+         :size :size-24}
         data]
 
        constants/content-type-sticker
@@ -125,7 +124,7 @@
     shell.constants/private-group-chat-card
     [quo/group-avatar
      {:customization-color customization-color
-      :size                :size/s-48
+      :size                :size-48
       :override-theme      :dark}]
 
     (shell.constants/community-card
diff --git a/src/status_im2/contexts/shell/jump_to/utils.cljs b/src/status_im2/contexts/shell/jump_to/utils.cljs
index 72dd630e9114..274d40040660 100644
--- a/src/status_im2/contexts/shell/jump_to/utils.cljs
+++ b/src/status_im2/contexts/shell/jump_to/utils.cljs
@@ -5,7 +5,7 @@
             [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
             [react-native.reanimated :as reanimated]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as state]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [quo2.theme :as quo.theme]))
diff --git a/src/status_im2/contexts/syncing/device/style.cljs b/src/status_im2/contexts/syncing/device/style.cljs
index 4bf774768449..4cb1de62220f 100644
--- a/src/status_im2/contexts/syncing/device/style.cljs
+++ b/src/status_im2/contexts/syncing/device/style.cljs
@@ -5,4 +5,4 @@
   {:border-color  colors/white-opa-5
    :border-radius 16
    :border-width  1
-   :margin-top    12})
+   :margin-top    11})
diff --git a/src/status_im2/contexts/syncing/device/view.cljs b/src/status_im2/contexts/syncing/device/view.cljs
index a59db907c88e..79d69a78e759 100644
--- a/src/status_im2/contexts/syncing/device/view.cljs
+++ b/src/status_im2/contexts/syncing/device/view.cljs
@@ -16,6 +16,7 @@
      (cond->
        {:container-style style/device-container
         :title           name
+        :blur?           true
         :image           :icon
         :image-props     (cond (#{:mobile :ios :android} (keyword device-type))
                                :i/mobile
diff --git a/src/status_im2/core.cljs b/src/status_im2/core.cljs
index f4da25ca9c18..7990fb0be49e 100644
--- a/src/status_im2/core.cljs
+++ b/src/status_im2/core.cljs
@@ -15,7 +15,7 @@
     [status-im2.setup.dev :as dev]
     [status-im2.setup.global-error :as global-error]
     [status-im2.common.log :as log]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [native-module.core :as native-module]
     [status-im.notifications.local :as notifications]
     [status-im.utils.universal-links.core :as utils.universal-links]
diff --git a/src/status_im2/events.cljs b/src/status_im2/events.cljs
index d808c61fa2aa..d4c6cf9920b3 100644
--- a/src/status_im2/events.cljs
+++ b/src/status_im2/events.cljs
@@ -16,6 +16,7 @@
             status-im2.contexts.shell.share.events
             status-im2.contexts.syncing.events
             status-im2.contexts.onboarding.common.overlay.events
+            status-im2.common.async-storage
             [status-im2.db :as db]
             [utils.re-frame :as rf]))
 
diff --git a/src/status_im2/subs/profile.cljs b/src/status_im2/subs/profile.cljs
index c1e8082a8647..6c81783e8bb3 100644
--- a/src/status_im2/subs/profile.cljs
+++ b/src/status_im2/subs/profile.cljs
@@ -40,7 +40,7 @@
  (fn [[multiaccounts port font-file] [_ target-key-uid]]
    (let [{:keys [images ens-name?] :as multiaccount} (get multiaccounts target-key-uid)
          image-name                                  (-> images first :type)
-         override-ring?                              (not ens-name?)]
+         override-ring?                              (when ens-name? false)]
      (when multiaccount
        {:fn
         (if image-name