diff --git a/package.json b/package.json
index 6bbda2221a5..22126369f40 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "functional-red-black-tree": "^1.0.1",
     "i18n-js": "^3.3.0",
     "node-libs-react-native": "^1.2.1",
-    "qrcode": "^1.4.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.10",
diff --git a/resources/images/icons2/20x20/opensea@2x.png b/resources/images/icons2/20x20/opensea@2x.png
new file mode 100644
index 00000000000..87897b37927
Binary files /dev/null and b/resources/images/icons2/20x20/opensea@2x.png differ
diff --git a/resources/images/icons2/20x20/opensea@3x.png b/resources/images/icons2/20x20/opensea@3x.png
new file mode 100644
index 00000000000..c8d07efd446
Binary files /dev/null and b/resources/images/icons2/20x20/opensea@3x.png differ
diff --git a/resources/images/mock2/collectible-monkey.png b/resources/images/mock2/collectible-monkey.png
new file mode 100644
index 00000000000..d268d50a468
Binary files /dev/null and b/resources/images/mock2/collectible-monkey.png differ
diff --git a/resources/images/mock2/collectible1.png b/resources/images/mock2/collectible1.png
new file mode 100644
index 00000000000..e93214e3aca
Binary files /dev/null and b/resources/images/mock2/collectible1.png differ
diff --git a/resources/images/mock2/collectible2.png b/resources/images/mock2/collectible2.png
new file mode 100644
index 00000000000..b7b78109e56
Binary files /dev/null and b/resources/images/mock2/collectible2.png differ
diff --git a/resources/images/mock2/collectible3.png b/resources/images/mock2/collectible3.png
new file mode 100644
index 00000000000..f2afd8b2626
Binary files /dev/null and b/resources/images/mock2/collectible3.png differ
diff --git a/resources/images/mock2/collectible4.png b/resources/images/mock2/collectible4.png
new file mode 100644
index 00000000000..5c7f274c135
Binary files /dev/null and b/resources/images/mock2/collectible4.png differ
diff --git a/resources/images/mock2/collectible5.png b/resources/images/mock2/collectible5.png
new file mode 100644
index 00000000000..129ac2b1256
Binary files /dev/null and b/resources/images/mock2/collectible5.png differ
diff --git a/resources/images/mock2/collectible6.png b/resources/images/mock2/collectible6.png
new file mode 100644
index 00000000000..1aa7041031a
Binary files /dev/null and b/resources/images/mock2/collectible6.png differ
diff --git a/resources/images/ui2/generate-keys@2x.png b/resources/images/ui2/generate-keys@2x.png
new file mode 100644
index 00000000000..6d06e1cb5a4
Binary files /dev/null and b/resources/images/ui2/generate-keys@2x.png differ
diff --git a/resources/images/ui2/generate-keys@3x.png b/resources/images/ui2/generate-keys@3x.png
index 803ec43f7f3..a499691efd6 100644
Binary files a/resources/images/ui2/generate-keys@3x.png and b/resources/images/ui2/generate-keys@3x.png differ
diff --git a/src/quo2/components/avatars/user_avatar/view.cljs b/src/quo2/components/avatars/user_avatar/view.cljs
index 286c4b05700..37b98322d07 100644
--- a/src/quo2/components/avatars/user_avatar/view.cljs
+++ b/src/quo2/components/avatars/user_avatar/view.cljs
@@ -35,7 +35,7 @@
    :indicator-size   status indicator outer radius, set to nil or 0 when no indicator
    :indicator-border `indicator-size`-`indicator-border` is the inner radius
    :indicator-color  color for status indicator
-   :theme   :light or :dark
+   :theme            :light or :dark
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius
diff --git a/src/quo2/components/avatars/wallet_user_avatar.cljs b/src/quo2/components/avatars/wallet_user_avatar.cljs
index b989334e5f7..722d597365e 100644
--- a/src/quo2/components/avatars/wallet_user_avatar.cljs
+++ b/src/quo2/components/avatars/wallet_user_avatar.cljs
@@ -28,11 +28,11 @@
 (defn wallet-user-avatar
   "params, first name, last name, color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name color size]
-    :or   {f-name "John"
-           l-name "Doe"
-           color  :red
-           size   :x-large}}]
+  [{:keys [f-name l-name customization-color size]
+    :or   {f-name              "John"
+           l-name              "Doe"
+           customization-color :red
+           size                :x-large}}]
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
@@ -41,8 +41,8 @@
         l-name-initial (-> l-name
                            string/upper-case
                            (subs 0 1))
-        circle-color   (colors/custom-color color 50 20)
-        text-color     (colors/custom-color-by-theme color 50 60)]
+        circle-color   (colors/custom-color customization-color 50 20)
+        text-color     (colors/custom-color-by-theme customization-color 50 60)]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size
diff --git a/src/quo2/components/navigation/page_nav/style.cljs b/src/quo2/components/navigation/page_nav/style.cljs
index c33a601865a..e1818ff16aa 100644
--- a/src/quo2/components/navigation/page_nav/style.cljs
+++ b/src/quo2/components/navigation/page_nav/style.cljs
@@ -12,12 +12,13 @@
    :align-items        :center})
 
 (defn center-content-container
-  [centered?]
+  [centered? center-opacity]
   {:flex              1
    :margin-horizontal 12
    :flex-direction    :row
    :align-items       :center
-   :justify-content   (if centered? :center :flex-start)})
+   :justify-content   (if centered? :center :flex-start)
+   :opacity           center-opacity})
 
 (def right-actions-container
   {:flex-direction :row})
@@ -79,6 +80,7 @@
      :text-align-vertical :center}))
 
 (def community-network-logo
-  {:width        24
-   :height       24
-   :margin-right 6})
+  {:width         24
+   :height        24
+   :border-radius 12
+   :margin-right  6})
diff --git a/src/quo2/components/navigation/page_nav/view.cljs b/src/quo2/components/navigation/page_nav/view.cljs
index cffcc4ab064..7d52ea3d280 100644
--- a/src/quo2/components/navigation/page_nav/view.cljs
+++ b/src/quo2/components/navigation/page_nav/view.cljs
@@ -86,8 +86,8 @@
      nil)])
 
 (defn- title-center
-  [{:keys [centered? title]}]
-  [rn/view {:style (style/center-content-container centered?)}
+  [{:keys [centered? title center-opacity]}]
+  [rn/view {:style (style/center-content-container centered? center-opacity)}
    [text/text
     {:weight          :medium
      :size            :paragraph-1
@@ -95,13 +95,13 @@
     title]])
 
 (defn- dropdown-center
-  [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text]}]
+  [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}]
   (let [dropdown-type  (cond
                          (= background :photo)                      :grey
                          (and (= theme :dark) (= background :blur)) :grey
                          :else                                      :ghost)
         dropdown-state (if dropdown-selected? :active :default)]
-    [rn/view {:style (style/center-content-container true)}
+    [rn/view {:style (style/center-content-container true center-opacity)}
      [dropdown/view
       {:type       dropdown-type
        :state      dropdown-state
@@ -111,8 +111,8 @@
       dropdown-text]]))
 
 (defn- token-center
-  [{:keys [theme background token-logo token-name token-abbreviation]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [theme background token-logo token-name token-abbreviation center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    [rn/image {:style style/token-logo :source token-logo}]
    [text/text
     {:style           style/token-name
@@ -128,8 +128,8 @@
     token-abbreviation]])
 
 (defn- channel-center
-  [{:keys [theme background channel-emoji channel-name channel-icon]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    [rn/text {:style style/channel-emoji}
     channel-emoji]
    [text/text
@@ -141,11 +141,11 @@
    [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])
 
 (defn- title-description-center
-  [{:keys [background theme picture title description]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [background theme picture title description center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    (when picture
      [rn/view {:style style/group-avatar-picture}
-      [group-avatar/view {:picture picture :size 28}]])
+      [group-avatar/view {:picture picture :size :size-28}]])
    [rn/view {:style style/title-description-container}
     [text/text
      {:style           style/title-description-title
@@ -161,11 +161,11 @@
      description]]])
 
 (defn- community-network-center
-  [{:keys [type community-logo network-logo community-name network-name]}]
+  [{:keys [type community-logo network-logo community-name network-name center-opacity]}]
   (let [community? (= type :community)
         shown-logo (if community? community-logo network-logo)
         shown-name (if community? community-name network-name)]
-    [rn/view {:style (style/center-content-container false)}
+    [rn/view {:style (style/center-content-container false center-opacity)}
      [rn/image
       {:style  style/community-network-logo
        :source shown-logo}]
@@ -176,8 +176,8 @@
       shown-name]]))
 
 (defn- wallet-networks-center
-  [{:keys [networks networks-on-press background]}]
-  [rn/view {:style (style/center-content-container true)}
+  [{:keys [networks networks-on-press background center-opacity]}]
+  [rn/view {:style (style/center-content-container true center-opacity)}
    [network-dropdown/view
     {:state    :default
      :on-press networks-on-press
diff --git a/src/quo2/components/onboarding/small_option_card/style.cljs b/src/quo2/components/onboarding/small_option_card/style.cljs
index 57a6d13a883..5b10521fdff 100644
--- a/src/quo2/components/onboarding/small_option_card/style.cljs
+++ b/src/quo2/components/onboarding/small_option_card/style.cljs
@@ -6,10 +6,14 @@
 
 (def text-container {:flex 1})
 
-(def title
+(def icon-title
   {:color  colors/white
    :height 22})
 
+(def main-title
+  {:color  colors/white
+   :height 26})
+
 (def subtitle
   {:color  colors/white-opa-70
    :height 18})
@@ -33,21 +37,23 @@
    :height 32})
 
 (def main-variant
-  {:flex          1
-   :margin-bottom -8})
+  {:flex 1})
 
 (def main-variant-text-container
   {:height             62
    :padding-top        10
-   :padding-bottom     12
    :padding-horizontal 12})
 
-(def touchable-overlay {:border-radius 16})
+(defn main-variant-image
+  [max-height]
+  {:flex       1
+   :max-height max-height})
+
+(def main-button
+  {:padding-horizontal 12 :margin-bottom 12 :margin-top 8})
 
 (defn card
   [height]
   {:background-color colors/white-opa-5
    :border-radius    16
    :height           height})
-
-(def main-variant-extra-space {:height 8})
diff --git a/src/quo2/components/onboarding/small_option_card/view.cljs b/src/quo2/components/onboarding/small_option_card/view.cljs
index 09cd9c90b62..7769591bf50 100644
--- a/src/quo2/components/onboarding/small_option_card/view.cljs
+++ b/src/quo2/components/onboarding/small_option_card/view.cljs
@@ -1,55 +1,71 @@
 (ns quo2.components.onboarding.small-option-card.view
   (:require [quo2.components.markdown.text :as text]
             [quo2.components.onboarding.small-option-card.style :as style]
+            [quo2.components.buttons.button.view :as button]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]))
 
-(defn- texts
-  [{:keys [title subtitle]}]
-  [rn/view {:style style/text-container}
-   [text/text
-    {:style           style/title
-     :size            :paragraph-1
-     :weight          :semi-bold
-     :number-of-lines 1}
-    title]
-   [text/text
-    {:style           style/subtitle
-     :size            :paragraph-2
-     :weight          :regular
-     :number-of-lines 1}
-    subtitle]])
-
 (defn- icon-variant
-  [{:keys [title subtitle image]}]
-  [rn/view {:style style/icon-variant}
+  [{:keys [title subtitle image accessibility-label on-press]}]
+  [rn/pressable
+   {:accessibility-label accessibility-label
+    :style               style/icon-variant
+    :underlay-color      colors/white-opa-5
+    :on-press            on-press}
    [rn/view {:style style/icon-variant-image-container}
     [fast-image/fast-image
      {:accessibility-label :small-option-card-icon-image
       :style               style/icon-variant-image
       :resize-mode         :contain
       :source              image}]]
-   [texts
-    {:title    title
-     :subtitle subtitle}]])
+   [rn/view {:style style/text-container}
+    [text/text
+     {:style           style/icon-title
+      :size            :paragraph-1
+      :weight          :semi-bold
+      :number-of-lines 1}
+     title]
+    [text/text
+     {:style           style/subtitle
+      :size            :paragraph-2
+      :weight          :regular
+      :number-of-lines 1}
+     subtitle]]])
 
 (defn- main-variant
-  [{:keys [title subtitle image max-height]}]
+  [{:keys [title subtitle button-label image max-height accessibility-label on-press]}]
   [rn/view {:style style/main-variant}
    [rn/view {:style style/main-variant-text-container}
-    [texts
-     {:title    title
-      :subtitle subtitle}]]
+    [text/text
+     {:style           style/main-title
+      :size            :heading-2
+      :weight          :semi-bold
+      :number-of-lines 1}
+     title]
+    [text/text
+     {:style           style/subtitle
+      :size            :paragraph-2
+      :weight          :regular
+      :number-of-lines 1}
+     subtitle]]
    [fast-image/fast-image
     {:accessibility-label :small-option-card-main-image
-     :style               {:flex 1 :max-height max-height}
+     :style               (style/main-variant-image max-height)
      :resize-mode         :contain
-     :source              image}]])
+     :source              image}]
+   [button/button
+    {:on-press            on-press
+     :accessibility-label accessibility-label
+     :type                :grey
+     :size                40
+     :container-style     style/main-button
+     :theme               :dark
+     :background          :blur}
+    button-label]])
 
 (defn small-option-card
-  "Variants: `:main` or `:icon`"
-  [{:keys [variant title subtitle image max-height on-press accessibility-label]
+  [{:keys [variant title subtitle button-label image max-height on-press accessibility-label]
     :or   {variant :main accessibility-label :small-option-card}}]
   (let [main-variant?  (= variant :main)
         card-component (if main-variant? main-variant icon-variant)
@@ -57,18 +73,12 @@
                          (not main-variant?) style/icon-variant-height
                          max-height          (min max-height style/main-variant-height)
                          :else               style/main-variant-height)]
-    [rn/view
-     [rn/touchable-highlight
-      {:accessibility-label accessibility-label
-       :style               style/touchable-overlay
-       :active-opacity      1
-       :underlay-color      colors/white-opa-5
-       :on-press            on-press}
-      [rn/view {:style (style/card card-height)}
-       [card-component
-        {:title      title
-         :subtitle   subtitle
-         :image      image
-         :max-height max-height}]]]
-     (when main-variant?
-       [rn/view {:style style/main-variant-extra-space}])]))
+    [rn/view {:style (style/card card-height)}
+     [card-component
+      {:title               title
+       :subtitle            subtitle
+       :button-label        button-label
+       :on-press            on-press
+       :accessibility-label accessibility-label
+       :image               image
+       :max-height          max-height}]]))
diff --git a/src/quo2/components/reactions/reaction.cljs b/src/quo2/components/reactions/reaction.cljs
deleted file mode 100644
index e6647beffc7..00000000000
--- a/src/quo2/components/reactions/reaction.cljs
+++ /dev/null
@@ -1,43 +0,0 @@
-(ns quo2.components.reactions.reaction
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.reactions.resource :as resource]
-            [quo2.components.reactions.style :as style]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(defn- add-reaction-internal
-  [{:keys [on-press theme]}]
-  [rn/touchable-opacity
-   {:on-press            on-press
-    :accessibility-label :emoji-reaction-add
-    :style               (style/add-reaction theme)}
-   [icons/icon :i/add-reaction
-    {:size  20
-     :color (colors/theme-colors colors/neutral-50
-                                 colors/neutral-40
-                                 theme)}]])
-
-(def add-reaction (theme/with-theme add-reaction-internal))
-
-(defn reaction-internal
-  "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}]
-  (let [numeric-value (int clicks)]
-    [rn/touchable-opacity
-     {:on-press            on-press
-      :on-long-press       on-long-press
-      :accessibility-label accessibility-label
-      :style               (style/reaction neutral? theme)}
-     [rn/image
-      {:style               {:width 16 :height 16}
-       :accessibility-label :emoji
-       :source              (resource/get-reaction emoji)}]
-     [text/text
-      {:size   :paragraph-2
-       :weight :semi-bold
-       :style  style/reaction-count}
-      (str (if (pos? numeric-value) numeric-value 1))]]))
-
-(def reaction (theme/with-theme reaction-internal))
diff --git a/src/quo2/components/reactions/style.cljs b/src/quo2/components/reactions/style.cljs
deleted file mode 100644
index bbed750235b..00000000000
--- a/src/quo2/components/reactions/style.cljs
+++ /dev/null
@@ -1,33 +0,0 @@
-(ns quo2.components.reactions.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def reaction-styling
-  {:flex-direction     :row
-   :justify-content    :center
-   :align-items        :center
-   :padding-horizontal 8
-   :border-radius      8
-   :height             24})
-
-(defn add-reaction
-  [theme]
-  (merge reaction-styling
-         {:padding-horizontal 8
-          :border-width       1
-          :border-color       (colors/theme-colors colors/neutral-20
-                                                   colors/neutral-70
-                                                   theme)}))
-
-(defn reaction
-  [neutral? theme]
-  (merge reaction-styling
-         {:border-color     (colors/theme-colors colors/neutral-20
-                                                 colors/neutral-80
-                                                 theme)
-          :border-width     1
-          :background-color (if neutral?
-                              (colors/theme-colors colors/neutral-10
-                                                   colors/neutral-80-opa-40)
-                              :transparent)}))
-
-(def reaction-count {:margin-left 4})
diff --git a/src/quo2/components/selectors/react/style.cljs b/src/quo2/components/selectors/react/style.cljs
new file mode 100644
index 00000000000..b500e48dba6
--- /dev/null
+++ b/src/quo2/components/selectors/react/style.cljs
@@ -0,0 +1,12 @@
+(ns quo2.components.selectors.react.style)
+
+(def container
+  {:flex-direction  :row
+   :justify-content :flex-start
+   :flex            1
+   :flex-wrap       :wrap
+   :margin-bottom   -6})
+
+(def reaction-container
+  {:margin-bottom 6
+   :margin-right  6})
diff --git a/src/quo2/components/selectors/react/view.cljs b/src/quo2/components/selectors/react/view.cljs
new file mode 100644
index 00000000000..263bba0d29c
--- /dev/null
+++ b/src/quo2/components/selectors/react/view.cljs
@@ -0,0 +1,26 @@
+(ns quo2.components.selectors.react.view
+  (:require [quo2.components.selectors.react-selector.view :as react-selector]
+            [quo2.components.selectors.react.style :as style]
+            [react-native.core :as rn]))
+
+(defn view
+  [{:keys [reactions on-press on-long-press add-reaction? on-press-add use-case container-style]}]
+  [rn/view {:style (merge style/container container-style)}
+   (for [emoji-reaction reactions
+         :let           [{:keys [emoji emoji-id emoji-reaction-id quantity own]} emoji-reaction]]
+     [react-selector/view
+      {:key                 emoji-reaction-id
+       :emoji               emoji
+       :state               (if own :pressed :not-pressed)
+       :use-case            use-case
+       :container-style     style/reaction-container
+       :clicks              quantity
+       :on-press            #(on-press emoji-reaction)
+       :on-long-press       #(on-long-press emoji-reaction)
+       :accessibility-label (str "emoji-reaction-" emoji-id)}])
+   (when add-reaction?
+     [react-selector/view
+      {:on-press            on-press-add
+       :state               :add-reaction
+       :use-case            use-case
+       :accessibility-label (str "emoji-add-reaction")}])])
diff --git a/src/quo2/components/selectors/react_selector/style.cljs b/src/quo2/components/selectors/react_selector/style.cljs
new file mode 100644
index 00000000000..c56ff8286dd
--- /dev/null
+++ b/src/quo2/components/selectors/react_selector/style.cljs
@@ -0,0 +1,44 @@
+(ns quo2.components.selectors.react-selector.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn add-reaction
+  [pinned? theme]
+  (let [border-color (if pinned?
+                       (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                       (colors/theme-colors colors/neutral-20 colors/neutral-70 theme))]
+    (cond-> {:justify-content    :center
+             :align-items        :center
+             :padding-horizontal 7
+             :border-radius      8
+             :border-width       1
+             :height             24
+             :border-color       border-color})))
+
+(defn reaction
+  [pressed? pinned? theme]
+  (let [background-color (cond
+                           (not pressed?) :transparent
+                           pinned?        (colors/theme-colors colors/neutral-80-opa-5
+                                                               colors/white-opa-5
+                                                               theme)
+                           :else          (colors/theme-colors colors/neutral-10
+                                                               colors/neutral-80-opa-40
+                                                               theme))
+        border-color     (if pinned?
+                           (colors/theme-colors colors/neutral-80-opa-5
+                                                colors/white-opa-5
+                                                theme)
+                           (colors/theme-colors colors/neutral-20
+                                                colors/neutral-80
+                                                theme))]
+    {:flex-direction     :row
+     :justify-content    :center
+     :align-items        :center
+     :padding-horizontal 8
+     :border-radius      8
+     :height             24
+     :border-width       1
+     :background-color   background-color
+     :border-color       border-color}))
+
+(def reaction-count {:margin-left 4})
diff --git a/src/quo2/components/selectors/react_selector/view.cljs b/src/quo2/components/selectors/react_selector/view.cljs
new file mode 100644
index 00000000000..a8c22ef85a0
--- /dev/null
+++ b/src/quo2/components/selectors/react_selector/view.cljs
@@ -0,0 +1,46 @@
+(ns quo2.components.selectors.react-selector.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.selectors.reaction-resource :as reaction.resource]
+            [quo2.components.selectors.react-selector.style :as style]
+            [quo2.theme :as quo.theme]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]
+            [react-native.core :as rn]))
+
+(defn- view-internal
+  [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style
+           theme]}]
+  (let [numeric-value (int clicks)
+        icon-color    (if (= :pinned use-case)
+                        (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
+                        (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
+    (if (= :add-reaction state)
+      [rn/touchable-opacity
+       {:on-press            on-press
+        :accessibility-label :emoji-reaction-add
+        :style               (style/add-reaction
+                              (= :pinned use-case)
+                              theme)}
+       [icons/icon :i/add-reaction
+        {:size  20
+         :color icon-color}]]
+
+      [rn/touchable-opacity
+       {:on-press            on-press
+        :on-long-press       on-long-press
+        :accessibility-label accessibility-label
+        :style               (merge (style/reaction (= :pressed state)
+                                                    (= :pinned use-case)
+                                                    theme)
+                                    container-style)}
+       [rn/image
+        {:style               {:width 15 :height 15}
+         :accessibility-label :emoji
+         :source              (reaction.resource/get-reaction emoji)}]
+       [text/text
+        {:size   :paragraph-2
+         :weight :semi-bold
+         :style  style/reaction-count}
+        (str (if (pos? numeric-value) numeric-value 1))]])))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/reactions/resource.clj b/src/quo2/components/selectors/reaction_resource.clj
similarity index 94%
rename from src/quo2/components/reactions/resource.clj
rename to src/quo2/components/selectors/reaction_resource.clj
index 06303e30e95..52dcc54484f 100644
--- a/src/quo2/components/reactions/resource.clj
+++ b/src/quo2/components/selectors/reaction_resource.clj
@@ -1,4 +1,4 @@
-(ns quo2.components.reactions.resource
+(ns quo2.components.selectors.reaction-resource
   (:require [clojure.java.io :as io]
             [clojure.string :as string]))
 
diff --git a/src/quo2/components/reactions/resource.cljs b/src/quo2/components/selectors/reaction_resource.cljs
similarity index 66%
rename from src/quo2/components/reactions/resource.cljs
rename to src/quo2/components/selectors/reaction_resource.cljs
index a9d394d438d..8f05bb90e1e 100644
--- a/src/quo2/components/reactions/resource.cljs
+++ b/src/quo2/components/selectors/reaction_resource.cljs
@@ -1,5 +1,5 @@
-(ns quo2.components.reactions.resource
-  (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]]))
+(ns quo2.components.selectors.reaction-resource
+  (:require-macros [quo2.components.selectors.reaction-resource :refer [resolve-all-reactions]]))
 
 (def ^:private reactions
   (resolve-all-reactions))
diff --git a/src/quo2/components/selectors/reactions/view.cljs b/src/quo2/components/selectors/reactions/view.cljs
deleted file mode 100644
index 3a4c1fb170a..00000000000
--- a/src/quo2/components/selectors/reactions/view.cljs
+++ /dev/null
@@ -1,25 +0,0 @@
-(ns quo2.components.selectors.reactions.view
-  (:require [quo2.components.reactions.resource :as reactions.resource]
-            [quo2.components.selectors.reactions.style :as style]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]))
-
-(defn view
-  [_ {:keys [start-pressed?]}]
-  (let [pressed? (reagent/atom start-pressed?)]
-    (fn [emoji
-         {:keys [container-style on-press
-                 accessibility-label]
-          :or   {accessibility-label :reaction}}]
-      [rn/touchable-without-feedback
-       {:accessibility-label accessibility-label
-        :on-press            (fn [e]
-                               (swap! pressed? not)
-                               (when on-press
-                                 (on-press e)))}
-       [rn/view
-        {:style (merge (style/container @pressed?)
-                       container-style)}
-        [rn/image
-         {:source (reactions.resource/get-reaction emoji)
-          :style  {:width 20 :height 20}}]]])))
diff --git a/src/quo2/components/selectors/reactions/component_spec.cljs b/src/quo2/components/selectors/reactions_selector/component_spec.cljs
similarity index 57%
rename from src/quo2/components/selectors/reactions/component_spec.cljs
rename to src/quo2/components/selectors/reactions_selector/component_spec.cljs
index 34dbf7cbf8b..af8cd0adfec 100644
--- a/src/quo2/components/selectors/reactions/component_spec.cljs
+++ b/src/quo2/components/selectors/reactions_selector/component_spec.cljs
@@ -1,23 +1,26 @@
-(ns quo2.components.selectors.reactions.component-spec
-  (:require [quo2.components.selectors.reactions.view :as view]
+(ns quo2.components.selectors.reactions-selector.component-spec
+  (:require [quo2.components.selectors.reactions-selector.view :as view]
             [test-helpers.component :as h]))
 
 (h/describe "Selectors > Reactions"
   (h/test "renders component"
-    (h/render [view/view :reaction/sad])
+    (h/render [view/view {:emoji :reaction/sad}])
     (h/is-truthy (h/get-by-label-text :reaction)))
 
   (h/describe "on-press event"
     (h/test "starts with released state"
       (let [on-press (h/mock-fn)]
-        (h/render [view/view :reaction/love {:on-press on-press}])
+        (h/render [view/view
+                   {:emoji    :reaction/love
+                    :on-press on-press}])
         (h/fire-event :press (h/get-by-label-text :reaction))
         (h/was-called on-press)))
 
     (h/test "starts with pressed state"
       (let [on-press (h/mock-fn)]
-        (h/render [view/view :reaction/love
-                   {:on-press       on-press
+        (h/render [view/view
+                   {:emoji          :reaction/love
+                    :on-press       on-press
                     :start-pressed? true}])
         (h/fire-event :press (h/get-by-label-text :reaction))
         (h/was-called on-press)))))
diff --git a/src/quo2/components/selectors/reactions/style.cljs b/src/quo2/components/selectors/reactions_selector/style.cljs
similarity index 86%
rename from src/quo2/components/selectors/reactions/style.cljs
rename to src/quo2/components/selectors/reactions_selector/style.cljs
index 913c809fc8e..d5d4ed21e2b 100644
--- a/src/quo2/components/selectors/reactions/style.cljs
+++ b/src/quo2/components/selectors/reactions_selector/style.cljs
@@ -1,4 +1,4 @@
-(ns quo2.components.selectors.reactions.style
+(ns quo2.components.selectors.reactions-selector.style
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
diff --git a/src/quo2/components/selectors/reactions_selector/view.cljs b/src/quo2/components/selectors/reactions_selector/view.cljs
new file mode 100644
index 00000000000..d8aa75b6e21
--- /dev/null
+++ b/src/quo2/components/selectors/reactions_selector/view.cljs
@@ -0,0 +1,23 @@
+(ns quo2.components.selectors.reactions-selector.view
+  (:require [quo2.components.selectors.reaction-resource :as reactions.resource]
+            [quo2.components.selectors.reactions-selector.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [{:keys [start-pressed?]}]
+  (let [pressed? (reagent/atom start-pressed?)]
+    (fn [{:keys [emoji container-style on-press
+                 accessibility-label]
+          :or   {accessibility-label :reaction}}]
+      [rn/pressable
+       {:accessibility-label accessibility-label
+        :style               (merge (style/container @pressed?)
+                                    container-style)
+        :on-press            (fn [e]
+                               (swap! pressed? not)
+                               (when on-press
+                                 (on-press e)))}
+       [rn/image
+        {:source (reactions.resource/get-reaction emoji)
+         :style  {:width 20 :height 20}}]])))
diff --git a/src/quo2/components/settings/data_item/style.cljs b/src/quo2/components/settings/data_item/style.cljs
index 31d689ea349..cd87c72578b 100644
--- a/src/quo2/components/settings/data_item/style.cljs
+++ b/src/quo2/components/settings/data_item/style.cljs
@@ -3,8 +3,7 @@
 
 (defn container
   [size card? blur? theme]
-  {:flex               1
-   :flex-direction     :row
+  {:flex-direction     :row
    :justify-content    :space-between
    :padding-vertical   (when (= size :default) 8)
    :padding-horizontal (when (= size :default) 12)
diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs
index 18cdaf22529..cd772a6e2dd 100644
--- a/src/quo2/components/settings/data_item/view.cljs
+++ b/src/quo2/components/settings/data_item/view.cljs
@@ -57,8 +57,11 @@
       (i18n/label :t/days)])])
 
 (defn- left-side
-  [{:keys [theme title status size blur? description icon subtitle label icon-color customization-color
-           emoji]}]
+  "The description can either be given as a string `description` or a component `custom-subtitle`"
+  [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
+           customization-color
+           emoji]
+    :as   props}]
   [rn/view {:style style/left-side}
    [left-title
     {:title title
@@ -70,19 +73,21 @@
       {:size  size
        :blur? blur?
        :theme theme}]
-     [left-subtitle
-      {:theme               theme
-       :size                size
-       :description         description
-       :icon                icon
-       :icon-color          icon-color
-       :blur?               blur?
-       :subtitle            subtitle
-       :customization-color customization-color
-       :emoji               emoji}])])
+     (if custom-subtitle
+       [custom-subtitle props]
+       [left-subtitle
+        {:theme               theme
+         :size                size
+         :description         description
+         :icon                icon
+         :icon-color          icon-color
+         :blur?               blur?
+         :subtitle            subtitle
+         :customization-color customization-color
+         :emoji               emoji}]))])
 
 (defn- right-side
-  [{:keys [label icon-right? icon-color communities-list]}]
+  [{:keys [label icon-right? icon icon-color communities-list]}]
   [rn/view {:style style/right-container}
    (case label
      :preview [preview-list/view
@@ -95,16 +100,15 @@
      nil)
    (when icon-right?
      [rn/view {:style (style/right-icon label)}
-      [icons/icon
-       (if (= :none label)
-         :i/copy
-         :i/chevron-right)
+      [icons/icon icon
        {:accessibility-label :icon-right
         :color               icon-color
         :size                20}]])])
 
 (def view-internal
-  (fn [{:keys [blur? card? icon-right? label status size theme on-press communities-list] :as props}]
+  (fn [{:keys [blur? card? icon-right? icon label status size theme on-press communities-list
+               container-style]
+        :as   props}]
     (let [icon-color (if (or blur? (= :dark theme))
                        colors/neutral-40
                        colors/neutral-50)]
@@ -114,12 +118,13 @@
          {:accessibility-label :data-item
           :disabled            (not icon-right?)
           :on-press            on-press
-          :style               (style/container size card? blur? theme)}
+          :style               (merge (style/container size card? blur? theme) container-style)}
          [left-side props]
          (when (and (= :default status) (not= :small size))
            [right-side
             {:label            label
              :icon-right?      icon-right?
+             :icon             icon
              :icon-color       icon-color
              :communities-list communities-list}])]))))
 
diff --git a/src/quo2/components/share/qr_code/style.cljs b/src/quo2/components/share/qr_code/style.cljs
index 590956cc82a..27ddf4e3edb 100644
--- a/src/quo2/components/share/qr_code/style.cljs
+++ b/src/quo2/components/share/qr_code/style.cljs
@@ -1,14 +1,44 @@
 (ns quo2.components.share.qr-code.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def container
-  {:flex-direction  :row
-   :justify-content :center})
-
-(defn image
-  [width height]
-  {:width            width
-   :height           height
+(defn container
+  [size]
+  (if size
+    {:width  size
+     :height size}
+    {:flex 1}))
+
+(def avatar-overlay
+  {:position        :absolute
+   :top             0
+   :right           0
+   :left            0
+   :bottom          0
+   :justify-content :center
+   :align-items     :center})
+
+(defn qr-image
+  [size]
+  {:width            (or size "100%")
+   :height           (or size "100%")
    :background-color colors/white-opa-70
    :border-radius    12
    :aspect-ratio     1})
+
+(def ^:private avatar-container-common
+  {:width            68
+   :height           68
+   :justify-content  :center
+   :align-items      :center
+   :background-color colors/white})
+
+(def avatar-container-circular
+  (assoc avatar-container-common :border-radius 33))
+
+(def avatar-container-rounded
+  (assoc avatar-container-common :border-radius 16))
+
+(def community-logo-image
+  {:width         64
+   :height        64
+   :border-radius 32})
diff --git a/src/quo2/components/share/qr_code/view.cljs b/src/quo2/components/share/qr_code/view.cljs
index 804ea4702cf..d9f0719f4ba 100644
--- a/src/quo2/components/share/qr_code/view.cljs
+++ b/src/quo2/components/share/qr_code/view.cljs
@@ -1,12 +1,76 @@
 (ns quo2.components.share.qr-code.view
-  (:require [quo2.components.share.qr-code.style :as style]
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.channel-avatar.view :as channel-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.avatars.wallet-user-avatar :as wallet-avatar]
+            [quo2.components.share.qr-code.style :as style]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]))
 
-(defn qr-code
-  [{:keys [source width height]}]
-  [rn/view
-   {:style style/container}
+(defn- avatar-image
+  [{avatar-type :avatar
+    :as         props}]
+  [rn/view {:style style/avatar-overlay}
+   [rn/view
+    {:style (if (= avatar-type :wallet-account)
+              style/avatar-container-rounded
+              style/avatar-container-circular)}
+    (case avatar-type
+      :profile
+      [user-avatar/user-avatar
+       (assoc props
+              :size              :size-64
+              :status-indicator? false
+              :online?           false
+              :ring?             false)]
+
+      :wallet-account
+      [account-avatar/view (assoc props :size :size-64 :type :default)]
+
+      :community
+      [rn/image
+       {:style  style/community-logo-image
+        :source (:picture props)}]
+
+      :channel
+      [channel-avatar/view (assoc props :locked? nil :size :size-64)]
+
+      :saved-address
+      [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)]
+
+      nil)]])
+
+(defn view
+  "Receives a URL to show a QR code with an avatar (optional) over it.
+   Parameters:
+     - qr-image-uri: A valid uri representing the QR code to display using `fast-image`
+     - size: if not provided, the QR code image will grow according to its parent
+     - avatar: Type of the avatar, defaults to `:none` and it can be:
+         `:profile`, `:wallet-account`, `:community`, `:channel` or `:saved-address`
+
+   Depending on the type selected, different properties are accepted:
+   `:profile`:
+     - profile-picture
+     - full-name
+     - customization-color
+   `:wallet-account`
+     - emoji
+     - customization-color
+   `:community`
+     - picture
+   `:channel`
+      - emoji
+      - customization-color
+   `:saved-address`
+      - f-name
+      - l-name
+      - customization-color"
+  [{:keys [avatar size qr-image-uri]
+    :or   {avatar :none}
+    :as   props}]
+  [rn/view {:style (style/container size)}
    [fast-image/fast-image
-    {:source source
-     :style  (style/image width height)}]])
+    {:style  (style/qr-image size)
+     :source {:uri qr-image-uri}}]
+   (when-not (= avatar :none)
+     [avatar-image props])])
diff --git a/src/quo2/components/share/share_qr_code/view.cljs b/src/quo2/components/share/share_qr_code/view.cljs
index 73b9ca1df6f..621e759b7a0 100644
--- a/src/quo2/components/share/share_qr_code/view.cljs
+++ b/src/quo2/components/share/share_qr_code/view.cljs
@@ -8,15 +8,11 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [source link-title
-           url-on-press url-on-long-press qr-url share-on-press]}]
+  [{:keys [qr-image-uri link-title url-on-press url-on-long-press qr-url share-on-press]}]
   [blur/ios-view
    {:style     style/qr-code-container
     :blur-type :light}
-   [qr-code/qr-code
-    {:source source
-     :width  "100%"
-     :height 311}]
+   [qr-code/view {:qr-image-uri qr-image-uri}]
    [rn/view {:style style/profile-address-container}
     [rn/view {:style style/profile-address-column}
      [text/text
diff --git a/src/quo2/components/wallet/wallet_overview/style.cljs b/src/quo2/components/wallet/wallet_overview/style.cljs
index 2e735a6b5fc..f80dd52b153 100644
--- a/src/quo2/components/wallet/wallet_overview/style.cljs
+++ b/src/quo2/components/wallet/wallet_overview/style.cljs
@@ -4,8 +4,8 @@
 (def container-info
   {:padding-horizontal 20
    :padding-top        12
-   :flex-grow          1
    :padding-bottom     32
+   :flex-grow          1
    :max-height         98})
 
 (def container-info-top
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index 24d497bf06d..c6c5378af90 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -99,12 +99,13 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.profile.showcase-nav.view
-    quo2.components.reactions.reaction
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
     quo2.components.selectors.filter.view
-    quo2.components.selectors.reactions.view
+    quo2.components.selectors.reactions-selector.view
+    quo2.components.selectors.react.view
+    quo2.components.selectors.react-selector.view
     quo2.components.selectors.selectors.view
     quo2.components.settings.accounts.view
     quo2.components.settings.data-item.view
@@ -307,10 +308,6 @@
 (def select-profile quo2.components.profile.select-profile.view/view)
 (def showcase-nav quo2.components.profile.showcase-nav.view/view)
 
-;;;; Reactions
-(def reaction quo2.components.reactions.reaction/reaction)
-(def add-reaction quo2.components.reactions.reaction/add-reaction)
-
 ;;;; Record Audio
 (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
 (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)
@@ -319,7 +316,9 @@
 (def author quo2.components.messages.author.view/author)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def filter quo2.components.selectors.filter.view/view)
-(def reactions quo2.components.selectors.reactions.view/view)
+(def reactions-selector quo2.components.selectors.reactions-selector.view/view)
+(def react quo2.components.selectors.react.view/view)
+(def react-selector quo2.components.selectors.react-selector.view/view)
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def toggle quo2.components.selectors.selectors.view/toggle)
 (def radio quo2.components.selectors.selectors.view/radio)
@@ -335,7 +334,7 @@
 (def settings-item quo2.components.settings.settings-item.view/view)
 
 ;;;; Share
-(def qr-code quo2.components.share.qr-code.view/qr-code)
+(def qr-code quo2.components.share.qr-code.view/view)
 (def share-qr-code quo2.components.share.share-qr-code.view/view)
 
 ;;;; SWITCHER
diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs
index 884e43d5a24..53d9f20c851 100644
--- a/src/quo2/core_spec.cljs
+++ b/src/quo2/core_spec.cljs
@@ -59,7 +59,7 @@
     [quo2.components.record-audio.soundtrack.component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
-    [quo2.components.selectors.reactions.component-spec]
+    [quo2.components.selectors.reactions-selector.component-spec]
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.settings.reorder-item.component-spec]
     [quo2.components.settings.settings-item.component-spec]
diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs
index 45c06d1832b..74b12dd4d9f 100644
--- a/src/status_im/ui/screens/profile/user/views.cljs
+++ b/src/status_im/ui/screens/profile/user/views.cljs
@@ -19,7 +19,7 @@
             [status-im.utils.gfycat.core :as gfy]
             [status-im.utils.universal-links.utils :as universal-links]
             [status-im.utils.utils :as utils]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [status-im2.common.qr-codes.view :as qr-codes]
             [status-im2.config :as config]
             [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :as views]))
@@ -32,7 +32,9 @@
       [react/view {:on-layout #(reset! width (-> ^js % .-nativeEvent .-layout .-width))}
        [react/view {:style {:padding-top 16 :padding-horizontal 16}}
         (when @width
-          [qr-code-viewer/qr-code-view (- @width 32) address])
+          [qr-codes/qr-code
+           {:url  address
+            :size (- @width 32)}])
         (when ens-name
           [react/view
            [copyable-text/copyable-text-view
diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs
index 77e3efa1765..e1df979d854 100644
--- a/src/status_im/ui/screens/wallet/request/views.cljs
+++ b/src/status_im/ui/screens/wallet/request/views.cljs
@@ -4,10 +4,10 @@
             [reagent.core :as reagent]
             [utils.ethereum.eip.eip55 :as eip55]
             [status-im.ethereum.eip681 :as eip681]
-            [utils.i18n :as i18n]
             [status-im.ui.components.copyable-text :as copyable-text]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
-            [status-im.ui.components.react :as react])
+            [status-im.ui.components.react :as react]
+            [status-im2.common.qr-codes.view :as qr-codes]
+            [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview share-address
@@ -18,9 +18,9 @@
     [react/view {:on-layout #(reset! width (-> ^js % .-nativeEvent .-layout .-width))}
      [react/view {:style {:padding-top 16 :padding-horizontal 16}}
       (when @width
-        [qr-code-viewer/qr-code-view
-         (- @width 32)
-         (eip681/generate-uri address {:chain-id chain-id})])
+        [qr-codes/qr-code
+         {:url  (eip681/generate-uri address {:chain-id chain-id})
+          :size (- @width 32)}])
       [copyable-text/copyable-text-view
        {:label           :t/ethereum-address
         :container-style {:margin-top 12 :margin-bottom 4}
diff --git a/src/status_im2/common/qr_code_viewer/style.cljs b/src/status_im2/common/qr_code_viewer/style.cljs
index 072b8c7498d..e69de29bb2d 100644
--- a/src/status_im2/common/qr_code_viewer/style.cljs
+++ b/src/status_im2/common/qr_code_viewer/style.cljs
@@ -1,15 +0,0 @@
-(ns status-im2.common.qr-code-viewer.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def qr-code-padding 16)
-
-(defn qr-code-container
-  [width]
-  {:align-self         :center
-   :width              width
-   :height             width
-   :padding-horizontal 16
-   :background-color   colors/white
-   :align-items        :center
-   :justify-content    :center
-   :border-radius      8})
diff --git a/src/status_im2/common/qr_code_viewer/view.cljs b/src/status_im2/common/qr_code_viewer/view.cljs
deleted file mode 100644
index 9d22398ed73..00000000000
--- a/src/status_im2/common/qr_code_viewer/view.cljs
+++ /dev/null
@@ -1,31 +0,0 @@
-(ns status-im2.common.qr-code-viewer.view
-  (:require ["qrcode" :as qr-code-js]
-            [cljs-bean.core :as bean]
-            [reagent.core :as reagent]
-            [status-im2.common.qr-code-viewer.style :as style]
-            [react-native.core :as rn]
-            [react-native.svg :as svg]))
-
-(defn qr-code
-  [{:keys [size value]}]
-  (let [uri (reagent/atom nil)]
-    (.toString
-     qr-code-js
-     value
-     (bean/->js {:margin 0 :width size})
-     #(reset! uri %2))
-    (fn []
-      (when @uri
-        [svg/svgxml {:xml @uri :width size :height size}]))))
-
-(defn qr-code-view
-  "Qr Code view including the frame.
-  Note: `size` includes frame with `style/qr-code-padding.`"
-  [size value]
-  (when (and size value)
-    [rn/view
-     {:style               (style/qr-code-container size)
-      :accessibility-label :qr-code-image}
-     [qr-code
-      {:value value
-       :size  (- size (* style/qr-code-padding 2))}]]))
diff --git a/src/status_im2/common/qr_codes/view.cljs b/src/status_im2/common/qr_codes/view.cljs
new file mode 100644
index 00000000000..90b31300da3
--- /dev/null
+++ b/src/status_im2/common/qr_codes/view.cljs
@@ -0,0 +1,37 @@
+(ns status-im2.common.qr-codes.view
+  (:require [quo2.core :as quo]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]))
+
+(defn qr-code
+  "Receives a URL to show a QR code with an avatar (optional) over it.
+   Parameters:
+     - url: String to transform to QR
+     - size: if not provided, the QR code image will grow according to its parent
+     - avatar: Type of the avatar, defaults to `:none` and it can be:
+         `:profile`, `:wallet-account`, `:community`, `:channel` or `:saved-address`
+
+   Depending on the type selected, different properties are accepted:
+   `:profile`:
+     - profile-picture
+     - full-name
+     - customization-color
+   `:wallet-account`
+     - emoji
+     - customization-color
+   `:community`
+     - picture
+   `:channel`
+      - emoji
+      - customization-color
+   `:saved-address`
+      - f-name
+      - l-name
+      - customization-color"
+  [{:keys [url size] :as props}]
+  (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
+                             {:url         url
+                              :port        (rf/sub [:mediaserver/port])
+                              :qr-size     (or 400 (int size))
+                              :error-level :highest})]
+    [quo/qr-code (assoc props :qr-image-uri qr-media-server-uri)]))
diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs
index 13390a40c41..f5aee0a35ad 100644
--- a/src/status_im2/common/resources.cljs
+++ b/src/status_im2/common/resources.cljs
@@ -81,10 +81,16 @@
     :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
 
 (def mock-images
-  {:diamond               (js/require "../resources/images/mock2/diamond.png")
-   :bored-ape             (js/require "../resources/images/mock2/bored-ape.png")
+  {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")
    :coinbase              (js/require "../resources/images/mock2/coinbase.png")
    :collectible           (js/require "../resources/images/mock2/collectible.png")
+   :collectible-monkey    (js/require "../resources/images/mock2/collectible-monkey.png")
+   :collectible1          (js/require "../resources/images/mock2/collectible1.png")
+   :collectible2          (js/require "../resources/images/mock2/collectible2.png")
+   :collectible3          (js/require "../resources/images/mock2/collectible3.png")
+   :collectible4          (js/require "../resources/images/mock2/collectible4.png")
+   :collectible5          (js/require "../resources/images/mock2/collectible5.png")
+   :collectible6          (js/require "../resources/images/mock2/collectible6.png")
    :contact               (js/require "../resources/images/mock2/contact.png")
    :community-banner      (js/require "../resources/images/mock2/community-banner.png")
    :community-logo        (js/require "../resources/images/mock2/community-logo.png")
@@ -92,6 +98,7 @@
    :dark-blur-bg          (js/require "../resources/images/mock2/dark_blur_bg.png")
    :dark-blur-background  (js/require "../resources/images/mock2/dark-blur-background.png")
    :decentraland          (js/require "../resources/images/mock2/decentraland.png")
+   :diamond               (js/require "../resources/images/mock2/diamond.png")
    :gif                   (js/require "../resources/images/mock2/gif.png")
    :monkey                (js/require "../resources/images/mock2/monkey.png")
    :light-blur-background (js/require "../resources/images/mock2/light-blur-background.png")
diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs
index db87f3f0984..4b781934771 100644
--- a/src/status_im2/common/scroll_page/view.cljs
+++ b/src/status_im2/common/scroll_page/view.cljs
@@ -23,8 +23,8 @@
   (if collapsed? 50 170))
 
 (defn f-scroll-page-header
-  [scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back?
-   collapsed? overlay-shown?]
+  [{:keys [scroll-height height page-nav-right-section-buttons sticky-header
+           top-nav title-colum navigate-back? collapsed? page-nav-props overlay-shown?]}]
   (let [input-range         [0 10]
         output-range        [-208 -45]
         y                   (reanimated/use-shared-value scroll-height)
@@ -54,17 +54,6 @@
                :top      0
                :left     0
                :right    0}}
-      (when logo
-        [reanimated/view
-         {:style (style/sticky-header-title opacity-animation)}
-         [rn/image
-          {:source logo
-           :style  style/sticky-header-image}]
-         [quo/text
-          {:size   :paragraph-1
-           :weight :semi-bold
-           :style  {:line-height 21}}
-          name]])
       (if top-nav
         [rn/view {:style {:margin-top 0}}
          top-nav]
@@ -74,10 +63,12 @@
                   :background     (if (= 1 (reanimated/get-shared-value opacity-animation))
                                     :blur
                                     :photo)
-                  :right-side     page-nav-right-side
+                  :right-side     page-nav-right-section-buttons
+                  :center-opacity (reanimated/get-shared-value opacity-animation)
                   :overlay-shown? overlay-shown?}
            navigate-back? (assoc :icon-name :i/close
-                                 :on-press  #(rf/dispatch [:navigate-back])))])
+                                 :on-press  #(rf/dispatch [:navigate-back]))
+           page-nav-props (merge page-nav-props))])
       (when title-colum
         title-colum)
       sticky-header]]))
@@ -105,14 +96,21 @@
 (defn scroll-page
   [_ _ _]
   (let [scroll-height (reagent/atom negative-scroll-position-0)]
-    (fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll
-                 collapsed?
-                 height top-nav title-colum background-color navigate-back? overlay-shown?]}
-         sticky-header
+    (fn [{:keys [theme cover-image logo on-scroll
+                 collapsed? height top-nav title-colum background-color navigate-back? page-nav-props
+                 overlay-shown? sticky-header]}
          children]
       [:<>
-       [:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons
-        logo sticky-header top-nav title-colum navigate-back? collapsed? overlay-shown?]
+       [:f> f-scroll-page-header
+        {:scroll-height  @scroll-height
+         :height         height
+         :sticky-header  sticky-header
+         :top-nav        top-nav
+         :title-colum    title-colum
+         :navigate-back? navigate-back?
+         :collapsed?     collapsed?
+         :page-nav-props page-nav-props
+         :overlay-shown? overlay-shown?}]
        [rn/scroll-view
         {:content-container-style           {:flex-grow 1}
          :content-inset-adjustment-behavior :never
diff --git a/src/status_im2/constants.cljs b/src/status_im2/constants.cljs
index 93f437019e5..4fbb2461e58 100644
--- a/src/status_im2/constants.cljs
+++ b/src/status_im2/constants.cljs
@@ -23,7 +23,6 @@
 (def ^:const content-type-link 101)
 (def ^:const content-type-album 102)
 
-
 (def ^:const contact-request-state-none 0)
 (def ^:const contact-request-state-mutual 1)
 (def ^:const contact-request-state-sent 2)
diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs
index ac49ed179cb..4dc9e6a15fc 100644
--- a/src/status_im2/contexts/chat/composer/handlers.cljs
+++ b/src/status_im2/contexts/chat/composer/handlers.cljs
@@ -18,7 +18,8 @@
    {:keys [text-value focused? lock-selection? saved-cursor-position]}
    {:keys [height saved-height last-height opacity background-y container-opacity]
     :as   animations}
-   {:keys [max-height] :as dimensions}]
+   {:keys [max-height] :as dimensions}
+   show-floating-scroll-down-button?]
   (reset! focused? true)
   (rf/dispatch [:chat.ui/set-input-focused true])
   (reanimated/animate height (reanimated/get-shared-value last-height))
@@ -31,7 +32,8 @@
   (when (and (not-empty @text-value) @input-ref)
     (.setNativeProps ^js @input-ref
                      (clj->js {:selection {:start @saved-cursor-position :end @saved-cursor-position}})))
-  (kb/handle-refocus-emoji-kb-ios props animations dimensions))
+  (kb/handle-refocus-emoji-kb-ios props animations dimensions)
+  (reset! show-floating-scroll-down-button? false))
 
 (defn blur
   [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
diff --git a/src/status_im2/contexts/chat/composer/sub_view.cljs b/src/status_im2/contexts/chat/composer/sub_view.cljs
index 8230ca3d173..bdd32139b08 100644
--- a/src/status_im2/contexts/chat/composer/sub_view.cljs
+++ b/src/status_im2/contexts/chat/composer/sub_view.cljs
@@ -47,7 +47,8 @@
          :label               (i18n/label :t/jump-to)
          :style               {:align-self :center}}}
        {}]]
-     (when @show-floating-scroll-down-button?
+     (when (and (not @focused?)
+                @show-floating-scroll-down-button?)
        [quo/floating-shell-button
         {:scroll-to-bottom {:on-press scroll-to-bottom-fn}}
         style/scroll-to-bottom-button])]))
diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs
index c1bb60e7e90..89798454838 100644
--- a/src/status_im2/contexts/chat/composer/view.cljs
+++ b/src/status_im2/contexts/chat/composer/view.cljs
@@ -105,34 +105,35 @@
            :menu-items @(:menu-items state)
            :style      (style/input-view state)}
           [rn/text-input
-           {:ref                      #(reset! (:input-ref props) %)
-            :default-value            @(:text-value state)
-            :on-focus                 #(handler/focus props state animations dimensions)
-            :on-blur                  #(handler/blur state animations dimensions subscriptions)
-            :on-content-size-change   #(handler/content-size-change %
-                                                                    state
-                                                                    animations
-                                                                    subscriptions
-                                                                    dimensions
-                                                                    (or keyboard-shown
-                                                                        (:edit subscriptions)))
-            :on-scroll                #(handler/scroll % props state animations dimensions)
-            :on-change-text           #(handler/change-text % props state)
-            :on-selection-change      #(handler/selection-change % props state)
-            :on-selection             #(selection/on-selection % props state)
-            :keyboard-appearance      (quo.theme/theme-value :light :dark)
-            :max-height               max-height
+           {:ref #(reset! (:input-ref props) %)
+            :default-value @(:text-value state)
+            :on-focus
+            #(handler/focus props state animations dimensions show-floating-scroll-down-button?)
+            :on-blur #(handler/blur state animations dimensions subscriptions)
+            :on-content-size-change #(handler/content-size-change %
+                                                                  state
+                                                                  animations
+                                                                  subscriptions
+                                                                  dimensions
+                                                                  (or keyboard-shown
+                                                                      (:edit subscriptions)))
+            :on-scroll #(handler/scroll % props state animations dimensions)
+            :on-change-text #(handler/change-text % props state)
+            :on-selection-change #(handler/selection-change % props state)
+            :on-selection #(selection/on-selection % props state)
+            :keyboard-appearance (quo.theme/theme-value :light :dark)
+            :max-height max-height
             :max-font-size-multiplier 1
-            :multiline                true
-            :placeholder              (i18n/label :t/type-something)
-            :placeholder-text-color   (colors/theme-colors colors/neutral-30 colors/neutral-50)
-            :style                    (style/input-text props
-                                                        state
-                                                        subscriptions
-                                                        {:max-height max-height
-                                                         :theme      theme})
-            :max-length               constants/max-text-size
-            :accessibility-label      :chat-message-input}]]
+            :multiline true
+            :placeholder (i18n/label :t/type-something)
+            :placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50)
+            :style (style/input-text props
+                                     state
+                                     subscriptions
+                                     {:max-height max-height
+                                      :theme      theme})
+            :max-length constants/max-text-size
+            :accessibility-label :chat-message-input}]]
          (when chat-screen-loaded?
            [:<>
             [gradients/view props state animations show-bottom-gradient?]
diff --git a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
index f520ccfe4d3..4b6cbf9f8b8 100644
--- a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
+++ b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
@@ -1,13 +1,12 @@
 (ns status-im2.contexts.chat.messages.content.reactions.view
-  (:require [status-im2.constants :as constants]
-            [quo2.core :as quo]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
+            [status-im2.constants :as constants]
             [utils.re-frame :as rf]
             [status-im2.contexts.chat.messages.drawers.view :as drawers]
             [quo2.theme :as quo.theme]))
 
 (defn- on-press
-  [own message-id emoji-id emoji-reaction-id]
+  [{:keys [own message-id emoji-id emoji-reaction-id]}]
   (if own
     (rf/dispatch [:models.reactions/send-emoji-reaction-retraction
                   {:message-id        message-id
@@ -18,7 +17,7 @@
                    :emoji-id   emoji-id}])))
 
 (defn- on-long-press
-  [{:keys [message-id emoji-id user-message-content reactions theme]}]
+  [{:keys [message-id emoji-id user-message-content reactions-order theme]}]
   (rf/dispatch
    [:chat.ui/emoji-reactions-by-message-id
     {:message-id message-id
@@ -33,48 +32,47 @@
                                                [:chat/clear-emoji-reaction-author-details]))
                                   :content (fn []
                                              [drawers/reaction-authors
-                                              {:reactions-order reactions
+                                              {:reactions-order reactions-order
                                                :theme           theme}])
                                   :selected-item (fn []
                                                    user-message-content)
                                   :padding-bottom-override 0}]))}]))
 
+(defn- on-press-add
+  [{:keys [chat-id message-id user-message-content]}]
+  (rf/dispatch [:dismiss-keyboard])
+  (rf/dispatch
+   [:show-bottom-sheet
+    {:content       (fn [] [drawers/reactions
+                            {:chat-id    chat-id
+                             :message-id message-id}])
+     :selected-item (fn []
+                      user-message-content)}]))
+
+(defn- add-emoji-key
+  [reaction]
+  (assoc reaction
+         :emoji
+         (get constants/reactions (:emoji-id reaction))))
+
 (defn- view-internal
-  [{:keys [message-id chat-id theme]} user-message-content]
+  [{:keys [message-id chat-id pinned-by theme]} user-message-content]
   (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])]
     [:<>
      (when (seq reactions)
-       [rn/scroll-view
-        {:shows-horizontal-scroll-indicator false
-         :horizontal                        true
-         :style                             {:margin-left    44
-                                             :margin-top     8
-                                             :flex-direction :row}}
-        (for [{:keys [own emoji-id quantity emoji-reaction-id]
-               :as   emoji-reaction} reactions]
-          ^{:key emoji-reaction}
-          [rn/view {:style {:margin-right 6}}
-           [quo/reaction
-            {:emoji               (get constants/reactions emoji-id)
-             :neutral?            own
-             :clicks              quantity
-             :on-press            #(on-press own message-id emoji-id emoji-reaction-id)
-             :on-long-press       #(on-long-press
-                                    {:message-id           message-id
-                                     :emoji-id             emoji-id
-                                     :user-message-content user-message-content
-                                     :reactions            (map :emoji-id reactions)
-                                     :theme                theme})
-             :accessibility-label (str "emoji-reaction-" emoji-id)}]])
-        [quo/add-reaction
-         {:on-press (fn []
-                      (rf/dispatch [:dismiss-keyboard])
-                      (rf/dispatch
-                       [:show-bottom-sheet
-                        {:content       (fn [] [drawers/reactions
-                                                {:chat-id    chat-id
-                                                 :message-id message-id}])
-                         :selected-item (fn []
-                                          user-message-content)}]))}]])]))
+       [quo/react
+        {:container-style {:margin-left 44
+                           :margin-top  8}
+         :reactions       (map add-emoji-key reactions)
+         :add-reaction?   true
+         :use-case        (when pinned-by :pinned)
+         :on-press        #(on-press (assoc % :message-id message-id))
+         :on-long-press   #(on-long-press (assoc %
+                                                 :message-id      message-id
+                                                 :theme           theme
+                                                 :reactions-order (map :emoji-id reactions)))
+         :on-press-add    #(on-press-add {:chat-id              chat-id
+                                          :message-id           message-id
+                                          :user-message-content user-message-content})}])]))
 
 (def message-reactions-row (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs
index 7a88f312ff5..661609a6cab 100644
--- a/src/status_im2/contexts/chat/messages/drawers/view.cljs
+++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs
@@ -10,7 +10,7 @@
             [status-im2.common.contact-list-item.view :as contact-list-item]
             [status-im2.contexts.chat.messages.drawers.style :as style]
             [react-native.gesture :as gesture]
-            [quo2.components.reactions.resource :as reactions.resource]))
+            [quo2.components.selectors.reaction-resource :as reactions.resource]))
 
 (defn contact-list-item-fn
   [{:keys [from compressed-key]}]
@@ -185,8 +185,9 @@
      (for [[id reaction-name] constants/reactions
            :let               [emoji-reaction-id (get own-reactions id)]]
        ^{:key id}
-       [quo/reactions reaction-name
-        {:start-pressed? (boolean emoji-reaction-id)
+       [quo/reactions-selector
+        {:emoji reaction-name
+         :start-pressed? (boolean emoji-reaction-id)
          :accessibility-label (str "reaction-" (name reaction-name))
          :on-press
          (fn []
diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs
index 072defd6a60..ec132dbce82 100644
--- a/src/status_im2/contexts/communities/discover/view.cljs
+++ b/src/status_im2/contexts/communities/discover/view.cljs
@@ -206,19 +206,16 @@
         featured-communities-count (count featured-communities)]
     (fn []
       [scroll-page/scroll-page
-       {:name             (i18n/label :t/discover-communities)
-        :theme            theme
-        :on-scroll        #(reset! scroll-height %)
-        :background-color (colors/theme-colors
-                           colors/white
-                           colors/neutral-95)
-        :navigate-back?   :true
-        :height           (if (> @scroll-height 360)
-                            208
-                            148)}
-       [render-sticky-header
-        {:selected-tab  selected-tab
-         :scroll-height scroll-height}]
+       {:theme          theme
+        :on-scroll      #(reset! scroll-height %)
+        :navigate-back? :true
+        :height         (if (> @scroll-height 360)
+                          208
+                          148)
+        :sticky-header  [render-sticky-header
+                         {:selected-tab  selected-tab
+                          :scroll-height scroll-height}]}
+
        [render-communities
         selected-tab
         featured-communities-count
diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs
index 1303ac85524..3a62fc4dc4e 100644
--- a/src/status_im2/contexts/communities/overview/view.cljs
+++ b/src/status_im2/contexts/communities/overview/view.cljs
@@ -1,7 +1,6 @@
 (ns status-im2.contexts.communities.overview.view
   (:require [oops.core :as oops]
             [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
@@ -317,22 +316,24 @@
             collapsed?     (and initial-joined? (:joined community))
             overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
         [scroll-page/scroll-page
-         {:cover-image                    cover
-          :collapsed?                     collapsed?
-          :logo                           logo
-          :page-nav-right-section-buttons (page-nav-right-section-buttons id)
-          :name                           name
-          :on-scroll                      #(reset! scroll-height %)
-          :navigate-back?                 true
-          :background-color               (colors/theme-colors colors/white colors/neutral-95)
-          :height                         148
-          :overlay-shown?                 overlay-shown?}
-         [sticky-category-header
-          {:enabled (> @scroll-height @first-channel-height)
-           :label   (pick-first-category-by-height
-                     @scroll-height
-                     @first-channel-height
-                     @categories-heights)}]
+         {:cover-image    cover
+          :collapsed?     collapsed?
+          :logo           logo
+          :name           name
+          :on-scroll      #(reset! scroll-height %)
+          :navigate-back? true
+          :height         148
+          :overlay-shown? overlay-shown?
+          :page-nav-props {:type           :community
+                           :right-side     (page-nav-right-section-buttons id)
+                           :community-name name
+                           :community-logo logo}
+          :sticky-header  [sticky-category-header
+                           {:enabled (> @scroll-height @first-channel-height)
+                            :label   (pick-first-category-by-height
+                                      @scroll-height
+                                      @first-channel-height
+                                      @categories-heights)}]}
          [community-content
           community
           pending?
diff --git a/src/status_im2/contexts/onboarding/new_to_status/style.cljs b/src/status_im2/contexts/onboarding/new_to_status/style.cljs
index 2cdbc94c2e6..d679802852d 100644
--- a/src/status_im2/contexts/onboarding/new_to_status/style.cljs
+++ b/src/status_im2/contexts/onboarding/new_to_status/style.cljs
@@ -21,7 +21,7 @@
    :color         colors/white-opa-70})
 
 (def subtitle-container
-  {:margin-top 16})
+  {:margin-top 24})
 
 (def doc-main-content
   {:color         colors/white
diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs
index 85009be5605..93282a3e125 100644
--- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs
+++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs
@@ -21,15 +21,16 @@
        :weight :semi-bold}
       (i18n/label :t/new-to-status)]
      [quo/small-option-card
-      {:variant    :main
-       :title      (i18n/label :t/generate-keys)
-       :subtitle   (i18n/label :t/generate-keys-subtitle)
-       :image      (resources/get-image :generate-keys)
-       :max-height (- (:height window)
-                      (* 2 56) ;; two other list items
-                      (* 2 16) ;; spacing between items
-                      220)     ;; extra spacing (top bar)
-       :on-press   #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
+      {:variant      :main
+       :title        (i18n/label :t/generate-keys)
+       :subtitle     (i18n/label :t/generate-keys-subtitle)
+       :button-label (i18n/label :t/lets-go)
+       :image        (resources/get-image :generate-keys)
+       :max-height   (- (:height window)
+                        (* 2 56) ;; two other list items
+                        (* 2 16) ;; spacing between items
+                        220)     ;; extra spacing (top bar)
+       :on-press     #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
      [rn/view {:style style/subtitle-container}
       [quo/text
        {:style  style/subtitle
diff --git a/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs b/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs
index f086a9ced34..8a5833df64a 100644
--- a/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs
+++ b/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs
@@ -3,6 +3,7 @@
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [re-frame.core :as rf]
     [react-native.fast-image :as fast-image]
     [react-native.reanimated :as reanimated]
     [quo2.components.animated-header-flatlist.view :as animated-header-list]))
@@ -78,7 +79,7 @@
    :header-comp header-comp
    :title-comp title-comp
    :main-comp main-comp
-   :back-button-on-press #()})
+   :back-button-on-press #(rf/dispatch [:navigate-back])})
 
 (defn mock-screen
   []
diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
index 6ad247b64f4..fe28433d5e6 100644
--- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
@@ -18,14 +18,14 @@
               {:key :size-64}
               {:key   :x-large
                :value "X Large"}]}
-   (preview/customization-color-option {:key :color})])
+   (preview/customization-color-option {:key :customization-color})])
 
 (defn view
   []
-  (let [state (reagent/atom {:first-name "empty"
-                             :last-name  "name"
-                             :size       :x-large
-                             :color      :indigo})]
+  (let [state (reagent/atom {:first-name          "empty"
+                             :last-name           "name"
+                             :size                :x-large
+                             :customization-color :indigo})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
        [quo/wallet-user-avatar @state]])))
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index ac42c95881b..72e95a832e6 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -14,7 +14,6 @@
     [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar]
     [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar]
     [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar]
-    [status-im2.contexts.quo-preview.selectors.reactions :as selector-reactions]
     [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as
      wallet-user-avatar]
     [status-im2.contexts.quo-preview.banners.banner :as banner]
@@ -119,11 +118,13 @@
     [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
     [status-im2.contexts.quo-preview.profile.select-profile :as select-profile]
     [status-im2.contexts.quo-preview.profile.showcase-nav :as showcase-nav]
-    [status-im2.contexts.quo-preview.reactions.react :as react]
     [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio]
     [status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer]
     [status-im2.contexts.quo-preview.selectors.filter :as filter]
     [status-im2.contexts.quo-preview.selectors.selectors :as selectors]
+    [status-im2.contexts.quo-preview.selectors.reactions-selector :as reactions-selector]
+    [status-im2.contexts.quo-preview.selectors.react-selector :as react-selector]
+    [status-im2.contexts.quo-preview.selectors.react :as react]
     [status-im2.contexts.quo-preview.settings.accounts :as accounts]
     [status-im2.contexts.quo-preview.settings.data-item :as data-item]
     [status-im2.contexts.quo-preview.settings.settings-item :as settings-item]
@@ -365,8 +366,6 @@
                         :component select-profile/view}
                        {:name      :showcase-nav
                         :component showcase-nav/view}]
-   :reactions         [{:name      :react
-                        :component react/view}]
    :record-audio      [{:name      :record-audio
                         :component record-audio/view}]
    :selectors         [{:name      :disclaimer
@@ -375,8 +374,12 @@
                         :component filter/view}
                        {:name      :selectors
                         :component selectors/view}
-                       {:name      :select-reactions
-                        :component selector-reactions/view}]
+                       {:name      :reactions-selector
+                        :component reactions-selector/preview}
+                       {:name      :react-selector
+                        :component (react-selector/preview-react-selector)}
+                       {:name      :react
+                        :component react/preview-react}]
    :settings          [{:name      :privacy-option
                         :component privacy-option/preview-options}
                        {:name      :accounts
@@ -392,7 +395,7 @@
                        {:name      :section-label
                         :component section-label/preview}]
    :share             [{:name      :qr-code
-                        :component qr-code/preview-qr-code}
+                        :component qr-code/preview}
                        {:name      :share-qr-code
                         :component share-qr-code/preview-share-qr-code}]
    :switchers         [{:name      :group-messaging-card
diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
index a99f2fff8af..b14a7917e7f 100644
--- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
+++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
@@ -18,15 +18,17 @@
               {:key   (resources/get-mock-image :small-opt-card-icon)
                :value "Image 2"}]}
    {:key :title :type :text}
-   {:key :subtitle :type :text}])
+   {:key :subtitle :type :text}
+   {:key :button-label :type :text}])
 
 (defn view
   []
-  (let [state (reagent/atom {:variant  :main
-                             :image    (-> descriptor second :options first :key)
-                             :title    "Generate keys "
-                             :subtitle "Your new self-sovereign identity in Status"
-                             :on-press #(js/alert "Small option card pressed!")})]
+  (let [state (reagent/atom {:variant      :main
+                             :image        (-> descriptor second :options first :key)
+                             :title        "Generate keys "
+                             :subtitle     "Your new self-sovereign identity in Status"
+                             :button-label "Let's go!"
+                             :on-press     #(js/alert "Small option card pressed!")})]
     (fn []
       [preview/preview-container
        {:state                     state
diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs
index d81b6dc1b8d..39562e2ab1b 100644
--- a/src/status_im2/contexts/quo_preview/preview.cljs
+++ b/src/status_im2/contexts/quo_preview/preview.cljs
@@ -170,6 +170,86 @@
             :field-value field-value}]
           [customizer-select-button {:open open :selected-option selected-option}]]]))))
 
+(defn- customizer-multi-select-modal
+  [{:keys [open-atom options selected-keys-atom]}]
+  [rn/modal
+   {:visible                @open-atom
+    :on-request-close       #(reset! open-atom false)
+    :status-bar-translucent true
+    :transparent            true
+    :animation              :slide}
+   [rn/view {:style (style/modal-overlay)}
+    [rn/view {:style (style/modal-container)}
+     [rn/scroll-view {:shows-vertical-scroll-indicator false}
+      (doall
+       (for [{k :key v :value} options
+             :let              [v (or v (humanize k))]]
+         ^{:key k}
+
+         (let [checked?   (boolean (some #(= k %) @selected-keys-atom))
+               remove-key (fn [v] (filterv #(not= % k) v))
+               on-press   (fn []
+                            (swap! selected-keys-atom
+                              (if checked? remove-key conj)
+                              k))]
+           [rn/pressable
+            {:style    (style/multi-select-option)
+             :on-press on-press}
+            [rn/text {:style (style/field-text false)} v]
+            [quo/checkbox
+             {:checked?  checked?
+              :on-change on-press}]])))]
+     [rn/view {:style (style/footer)}
+      [rn/pressable
+       {:style    (style/select-button)
+        :on-press (fn []
+                    (reset! selected-keys-atom nil)
+                    (reset! open-atom false))}
+       [rn/text {:style (style/field-text false)}
+        "Clear"]]
+      [rn/view {:style {:width 16}}]
+      [rn/touchable-opacity
+       {:style    (style/select-button)
+        :on-press #(reset! open-atom false)}
+       [rn/text {:style (style/field-text false)}
+        "Close"]]]]]])
+
+(defn filter-by-keys
+  [items ks]
+  (filter (fn [item]
+            (some #(= (:key item) %) ks))
+          items))
+
+(defn- customizer-multi-select-button
+  [{:keys [open selected-options]}]
+  [rn/pressable
+   {:style    (style/select-container)
+    :on-press #(reset! open true)}
+   [rn/text
+    {:style           (style/field-select)
+     :number-of-lines 1}
+    (if (seq selected-options)
+      (string/join ", " (map :value selected-options))
+      "Select options")]
+   [rn/view
+    [quo/icon :i/chevron-right]]])
+
+(defn- customizer-multi-select
+  []
+  (let [open (reagent/atom nil)]
+    (fn [{:keys [label state options] :as args}]
+      (let [label            (or label (key->text-label (:key args)))
+            selected-keys    (reagent/cursor state [(:key args)])
+            selected-options (filter-by-keys options @selected-keys)]
+        [rn/view {:style style/field-row}
+         [label-view state label]
+         [rn/view {:style style/field-column}
+          [customizer-multi-select-modal
+           {:open-atom          open
+            :selected-keys-atom selected-keys
+            :options            options}]
+          [customizer-multi-select-button {:open open :selected-options selected-options}]]]))))
+
 (defn customizer
   [state descriptors]
   [rn/view
@@ -181,10 +261,11 @@
       ^{:key (:key desc)}
       [:<>
        (case (:type desc)
-         :boolean [customizer-boolean descriptor]
-         :text    [customizer-text descriptor]
-         :number  [customizer-number descriptor]
-         :select  [customizer-select descriptor]
+         :boolean      [customizer-boolean descriptor]
+         :text         [customizer-text descriptor]
+         :number       [customizer-number descriptor]
+         :select       [customizer-select descriptor]
+         :multi-select [customizer-multi-select descriptor]
          nil)]))])
 
 (defn customization-color-option
diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs
deleted file mode 100644
index 5071bbb4c75..00000000000
--- a/src/status_im2/contexts/quo_preview/reactions/react.cljs
+++ /dev/null
@@ -1,31 +0,0 @@
-(ns status-im2.contexts.quo-preview.reactions.react
-  (:require [clojure.string :as string]
-            [quo2.core :as quo]
-            [reagent.core :as reagent]
-            [status-im2.constants :as constants]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label "Count"
-    :key   :clicks
-    :type  :text}
-   {:key     :emoji
-    :type    :select
-    :options (for [reaction (vals constants/reactions)]
-               {:key   reaction
-                :value (string/capitalize (name reaction))})}
-   {:key :neutral? :type :boolean}])
-
-(defn view
-  []
-  (let [state (reagent/atom {:emoji :reaction/love})]
-    (fn []
-      [preview/preview-container
-       {:state                     state
-        :descriptor                descriptor
-        :component-container-style {:padding-bottom  50
-                                    :flex-direction  :row
-                                    :align-items     :center
-                                    :justify-content :center}}
-       [quo/reaction @state]
-       [quo/add-reaction]])))
diff --git a/src/status_im2/contexts/quo_preview/selectors/react.cljs b/src/status_im2/contexts/quo_preview/selectors/react.cljs
new file mode 100644
index 00000000000..dfbe06a2e99
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/selectors/react.cljs
@@ -0,0 +1,75 @@
+(ns status-im2.contexts.quo-preview.selectors.react
+  (:require [clojure.string :as string]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [status-im2.constants :as constants]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defn- gen-quantity
+  [max-count _]
+  (rand-int max-count))
+
+(def ^:private memo-gen-quantity (memoize gen-quantity))
+
+(def ^:private descriptor
+  [{:key  :add-reaction?
+    :type :boolean}
+   {:label   "Reactions"
+    :key     :reaction-ids
+    :type    :multi-select
+    :options (for [[reaction-id reaction] constants/reactions]
+               {:key   reaction-id
+                :value (string/capitalize
+                        (last
+                         (string/split (name reaction) #"/")))})}
+   {:label "Max rand. reactions (helper)"
+    :key   :max-count
+    :type  :number}
+   {:key     :use-case
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :pinned
+               :value "Pinned"}]}])
+
+(defn preview-react
+  []
+  (let [state             (reagent/atom {:add-reaction? true
+                                         :max-count     1000
+                                         :reaction-ids  [1 2 3]
+                                         :use-case      :default})
+        pressed-reactions (reagent/atom #{1})]
+
+    (fn []
+      (let [reactions (mapv (fn [reaction-id]
+                              {:emoji-reaction-id reaction-id
+                               :emoji-id          reaction-id
+                               :emoji             (get constants/reactions reaction-id)
+                               :quantity          (memo-gen-quantity (:max-count @state) reaction-id)
+                               :own               (contains? @pressed-reactions reaction-id)})
+                            (:reaction-ids @state))]
+        [preview/preview-container
+         {:state      state
+          :descriptor descriptor}
+         [rn/view
+          {:padding-bottom     150
+           :padding-vertical   60
+           :padding-horizontal 20
+           :border-radius      16
+           :background-color   (when (= :pinned (:use-case @state))
+                                 (colors/custom-color :blue 50 10))
+           :align-items        :flex-start}
+          [quo/react
+           {:reactions     reactions
+            :add-reaction? (:add-reaction? @state)
+            :use-case      (:use-case @state)
+            :on-press      (fn [reaction]
+                             (let [reaction-id    (:emoji-id reaction)
+                                   change-pressed (partial swap! pressed-reactions)]
+                               (if (contains? @pressed-reactions reaction-id)
+                                 (change-pressed disj reaction-id)
+                                 (change-pressed conj reaction-id))))
+            :on-long-press identity
+            :on-press-new  identity}]]]))))
diff --git a/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs b/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs
new file mode 100644
index 00000000000..0851802c09e
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs
@@ -0,0 +1,58 @@
+(ns status-im2.contexts.quo-preview.selectors.react-selector
+  (:require [clojure.string :as string]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.constants :as constants]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.foundations.colors :as colors]))
+
+(def descriptor
+  [{:key  :clicks
+    :type :text}
+   {:key     :emoji
+    :type    :select
+    :options (for [reaction (vals constants/reactions)]
+               {:key   reaction
+                :value (string/capitalize (name reaction))})}
+   {:key     :state
+    :type    :select
+    :options [{:key   :not-pressed
+               :value "Not pressed by me"}
+              {:key   :pressed
+               :value "Pressed by me"}
+              {:key   :add-reaction
+               :value "Add reaction"}]}
+   {:key     :use-case
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :pinned
+               :value "Pinned"}]}])
+
+(defn preview-react-selector
+  []
+  (let [state (reagent/atom {:emoji    :reaction/love
+                             :state    :not-pressed
+                             :use-case :default})]
+    (fn []
+      (println @state)
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [rn/view
+        {:padding-bottom 150
+         :align-items    :center}
+        [rn/view
+         {:width            100
+          :padding-vertical 60
+          :border-radius    16
+          :background-color (when (= :pinned (:use-case @state))
+                              (colors/custom-color
+                               :blue
+                               50
+                               10))
+          :justify-content  :space-evenly
+          :flex-direction   :row
+          :align-items      :center}
+         [quo/react-selector @state]]]])))
diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions.cljs
deleted file mode 100644
index 241b4b98661..00000000000
--- a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs
+++ /dev/null
@@ -1,18 +0,0 @@
-(ns status-im2.contexts.quo-preview.selectors.reactions
-  (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.constants :as constants]))
-
-(defn view
-  []
-  [preview/preview-container
-   {:component-container-style {:flex            1
-                                :padding-top     20
-                                :flex-direction  :row
-                                :justify-content :center
-                                :align-items     :center}}
-   [rn/view {:flex-direction :row}
-    (for [emoji (vals constants/reactions)]
-      ^{:key emoji}
-      [quo/reactions emoji {:container-style {:margin-right 5}}])]])
diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs
new file mode 100644
index 00000000000..10c39f0ddd2
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs
@@ -0,0 +1,27 @@
+(ns status-im2.contexts.quo-preview.selectors.reactions-selector
+  (:require [quo2.core :as quo]
+            [clojure.string :as string]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [reagent.core :as r]
+            [react-native.core :as rn]
+            [status-im2.constants :as constants]))
+
+(def descriptor
+  [{:key     :emoji
+    :type    :select
+    :options (for [reaction (vals constants/reactions)]
+               {:key   reaction
+                :value (string/capitalize (name reaction))})}])
+
+(defn preview
+  []
+  (let [state (r/atom {:emoji :reaction/love})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [rn/view
+        {:style {:margin-top  40
+                 :align-items :center}}
+        [quo/reactions-selector {:emoji (:emoji @state)}]]])))
+
diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs
index 92b47c56390..db961a0c4b4 100644
--- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs
+++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs
@@ -1,11 +1,8 @@
 (ns status-im2.contexts.quo-preview.settings.data-item
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
-            [react-native.blur :as blur]))
+            [status-im2.common.resources :as resources]))
 
 (def descriptor
   [{:label "Blur:"
@@ -72,25 +69,12 @@
                              :icon                :i/placeholder
                              :emoji               "🎮"
                              :customization-color :yellow
-                             :communities-list    communities-list})
-        blur? (reagent/cursor state [:blur?])]
+                             :communities-list    communities-list})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:style {:flex 1}}
-        [preview/customizer state descriptor]]
-       (when @blur?
-         [blur/view
-          {:style         {:position         :absolute
-                           :left             0
-                           :right            0
-                           :bottom           0
-                           :height           75
-                           :background-color colors/neutral-80-opa-70}
-           :overlay-color :transparent}])
-       [rn/view
-        {:style {:align-items       :center
-                 :padding-vertical  10
-                 :margin-horizontal 20}}
-        [quo/data-item @state]]])))
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true}
+       [quo/data-item @state]])))
diff --git a/src/status_im2/contexts/quo_preview/share/qr_code.cljs b/src/status_im2/contexts/quo_preview/share/qr_code.cljs
index 7ea17ee78a8..e12843c458a 100644
--- a/src/status_im2/contexts/quo_preview/share/qr_code.cljs
+++ b/src/status_im2/contexts/quo_preview/share/qr_code.cljs
@@ -1,55 +1,104 @@
 (ns status-im2.contexts.quo-preview.share.qr-code
-  (:require [react-native.core :as rn]
-            [quo2.core :as quo]
-            [utils.image-server :as image-server]
-            [utils.re-frame :as rf]
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]))
 
 (def descriptor
-  [{:label "URL For QR"
-    :key   :text
-    :type  :text}
-   {:label   "Error Correction Level:"
-    :key     :error-correction-level
+  [{:key  :url
+    :type :text}
+   {:key     :avatar
+    :type    :select
+    :options [{:key :none}
+              {:key :profile}
+              {:key :wallet-account}
+              {:key :community}
+              {:key :channel}
+              {:key :saved-address}]}
+   {:key     :size
+    :type    :select
+    :options [{:key 250} {:key 311} {:key 350}]}])
+
+(def profile-descriptor
+  [{:key     :profile-picture
+    :type    :select
+    :options [{:key   (resources/get-mock-image :user-picture-male5)
+               :value "User"}
+              {:key   nil
+               :value "None"}]}
+   (preview/customization-color-option)
+   {:key  :full-name
+    :type :text}])
+
+(def wallet-account-descriptor
+  [{:key     :emoji
     :type    :select
-    :options [{:key   :low
-               :value "Low"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :quart
-               :value "Quart"}
-              {:key   :highest
-               :value "Highest"}]}])
-
-(defn preview-qr-code
+    :options [{:key "🍒"}
+              {:key "🐧"}
+              {:key "🍨"}]}
+   (preview/customization-color-option)])
+
+(def channel-descriptor
+  [{:key     :emoji
+    :type    :select
+    :options [{:key "🍒"}
+              {:key "🐧"}
+              {:key "🍨"}]}
+   (preview/customization-color-option)])
+
+(def saved-address-descriptor
+  [{:key  :f-name
+    :type :text}
+   {:key  :l-name
+    :type :text}
+   (preview/customization-color-option)])
+
+(defn preview
   []
-  (let [state                  (reagent/atom {:text                   "https://status.im"
-                                              :error-correction-level :highest})
-        text                   (reagent/cursor state [:text])
-        error-correction-level (reagent/cursor state [:error-correction-level])
-        media-server-uri       (reagent/atom "")]
+  (let [media-server-port (rf/sub [:mediaserver/port])
+        state             (reagent/atom
+                           {:url                 "https://join.status.im/status"
+                            :size                250
+                            :avatar              :none
+                            :profile-picture     (resources/get-mock-image :user-picture-male5)
+                            :customization-color :army
+                            :full-name           "Full Name"
+                            :emoji               "🍒"
+                            :picture             (resources/get-mock-image :community-logo)
+                            :f-name              "First Name"
+                            :l-name              "Last Name"})]
     (fn []
-      (reset! media-server-uri (image-server/get-qr-image-uri-for-any-url
-                                {:url         @text
-                                 :port        (rf/sub [:mediaserver/port])
-                                 :error-level @error-correction-level
-                                 :qr-size     250}))
-      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:flex 1}}]
-        [rn/view
-         {:style {:padding-vertical 60
-                  :flex-direction   :row
-                  :justify-content  :center}}
-         [rn/view
-          [quo/qr-code
-           {:source {:uri @media-server-uri}
-            :height 250
-            :width  250}]
-
-          [rn/view
-           [rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
-            @media-server-uri]]]]]])))
+      (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
+                                 {:url         (:url @state)
+                                  :qr-size     (:size @state)
+                                  :port        media-server-port
+                                  :error-level :highest})]
+        [preview/preview-container
+         {:component-container-style {:flex            1
+                                      :justify-content :center
+                                      :align-items     :center
+                                      :margin-vertical 12}
+          :state                     state
+          :descriptor                (concat descriptor
+                                             (case (:avatar @state)
+                                               :profile        profile-descriptor
+                                               :wallet-account wallet-account-descriptor
+                                               :channel        channel-descriptor
+                                               :saved-address  saved-address-descriptor
+                                               nil))}
+         [quo/qr-code
+          (cond-> @state
+            :always
+            (assoc :qr-image-uri qr-media-server-uri)
+
+            ;; `:channel` variant receives colors as hex strings instead of keywords
+            (= (:avatar @state) :channel)
+            (update :customization-color colors/custom-color 60))]
+
+         [rn/view {:style {:margin 12}}
+          [quo/text "URL:"]
+          [quo/text (:url @state)]]]))))
diff --git a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs
index ea77b16544b..7a63b50eb42 100644
--- a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs
+++ b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs
@@ -1,10 +1,10 @@
 (ns status-im2.contexts.quo-preview.share.share-qr-code
-  (:require [react-native.core :as rn]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
-            [reagent.core :as reagent]))
-
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]))
 
 (def descriptor
   [{:label "URL"
@@ -20,23 +20,28 @@
                              :link-title   "Link to profile"
                              :url          "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})]
     (fn []
-      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:flex 1}}]
-        [rn/view
-         {:style {:padding-vertical 60
-                  :justify-content  :center}}
-         [preview/blur-view
-          {:show-blur-background? true
-           :height                600
-           :blur-view-props       {:padding-top        20
-                                   :padding-horizontal 20}}
-          [quo/share-qr-code
-           {:source            (resources/get-mock-image :qr-code)
-            :link-title        (:link-title @state)
-            :url-on-press      #(js/alert "url pressed")
-            :url-on-long-press #(js/alert "url long pressed")
-            :share-on-press    #(js/alert "share pressed")
-            :qr-url            (:url @state)}]]]]])))
+      (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
+                                 {:url         (:url @state)
+                                  :port        (rf/sub [:mediaserver/port])
+                                  :qr-size     300
+                                  :error-level :highest})]
+        [preview/preview-container
+         {:state      state
+          :descriptor descriptor}
+         [rn/view {:style {:padding-bottom 150}}
+          [rn/view {:style {:flex 1}}]
+          [rn/view
+           {:style {:padding-vertical 60
+                    :justify-content  :center}}
+           [preview/blur-view
+            {:show-blur-background? true
+             :height                600
+             :blur-view-props       {:padding-top        20
+                                     :padding-horizontal 20}}
+            [quo/share-qr-code
+             {:qr-image-uri      qr-media-server-uri
+              :link-title        (:link-title @state)
+              :url-on-press      #(js/alert "url pressed")
+              :url-on-long-press #(js/alert "url long pressed")
+              :share-on-press    #(js/alert "share pressed")
+              :qr-url            (:url @state)}]]]]]))))
diff --git a/src/status_im2/contexts/quo_preview/style.cljs b/src/status_im2/contexts/quo_preview/style.cljs
index 2507217feca..47ef1555d60 100644
--- a/src/status_im2/contexts/quo_preview/style.cljs
+++ b/src/status_im2/contexts/quo_preview/style.cljs
@@ -55,6 +55,16 @@
   {:flex-shrink 1
    :padding-top 12})
 
+(defn multi-select-option
+  []
+  (merge (field-container false)
+         {:justify-content  :space-between
+          :align-items      :space-between
+          :flex             1
+          :flex-direction   :row
+          :margin-vertical  4
+          :background-color (field-default-bg-color)}))
+
 (defn select-container
   []
   (merge (field-container false)
diff --git a/src/status_im2/contexts/shell/share/view.cljs b/src/status_im2/contexts/shell/share/view.cljs
index 79607c49002..f8dfa640647 100644
--- a/src/status_im2/contexts/shell/share/view.cljs
+++ b/src/status_im2/contexts/shell/share/view.cljs
@@ -1,17 +1,19 @@
 (ns status-im2.contexts.shell.share.view
-  (:require [utils.i18n :as i18n]
+  (:require [clojure.string :as string]
             [quo2.core :as quo]
-            [react-native.core :as rn]
-            [status-im2.contexts.shell.share.style :as style]
-            [utils.re-frame :as rf]
-            [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
-            [status-im.ui.components.list-selection :as list-selection]
-            [utils.image-server :as image-server]
+            [react-native.core :as rn]
             [react-native.navigation :as navigation]
-            [clojure.string :as string]
+            [reagent.core :as reagent]
+            [status-im.multiaccounts.core :as multiaccounts]
+            [status-im.ui.components.list-selection :as list-selection]
+            [status-im2.common.qr-codes.view :as qr-codes]
+            [status-im2.contexts.shell.share.style :as style]
             [utils.address :as address]
+            [utils.i18n :as i18n]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]
             [react-native.platform :as platform]))
 
 (defn header
@@ -43,27 +45,24 @@
 
 (defn profile-tab
   [window-width]
-  (let [{:keys [emoji-hash
-                compressed-key
-                key-uid]} (rf/sub [:profile/profile])
-        port              (rf/sub [:mediaserver/port])
-        emoji-hash-string (string/join emoji-hash)
+  (let [{:keys [emoji-hash compressed-key customization-color display-name]
+         :as   profile}   (rf/sub [:profile/profile])
         qr-size           (int (- window-width 64))
+        profile-url       (str image-server/status-profile-base-url compressed-key)
+        profile-photo-uri (:uri (multiaccounts/displayed-photo profile))
         abbreviated-url   (address/get-abbreviated-profile-url
                            image-server/status-profile-base-url-without-https
                            compressed-key)
-        profile-url       (str image-server/status-profile-base-url compressed-key)
-        source-uri        (image-server/get-account-qr-image-uri
-                           {:key-uid    key-uid
-                            :public-key compressed-key
-                            :port       port
-                            :qr-size    qr-size})]
+        emoji-hash-string (string/join emoji-hash)]
     [:<>
      [rn/view {:style style/qr-code-container}
-      [quo/qr-code
-       {:source {:uri source-uri}
-        :width  qr-size
-        :height qr-size}]
+      [qr-codes/qr-code
+       {:url                 profile-url
+        :size                qr-size
+        :avatar              :profile
+        :full-name           display-name
+        :customization-color customization-color
+        :profile-picture     profile-photo-uri}]
       [rn/view {:style style/profile-address-container}
        [rn/view {:style style/profile-address-column}
         [quo/text
diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
index 277645a65b0..183e40d4081 100644
--- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs
+++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
@@ -3,11 +3,11 @@
             [quo2.foundations.colors :as colors]
             [react-native.clipboard :as clipboard]
             [react-native.core :as rn]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [react-native.hooks :as hooks]
             [reagent.core :as reagent]
+            [status-im2.common.qr-codes.view :as qr-codes]
             [status-im2.common.resources :as resources]
             [status-im2.common.standard-authentication.standard-auth.view :as standard-auth]
-            [react-native.hooks :as hooks]
             [status-im2.contexts.syncing.setup-syncing.style :as style]
             [status-im2.contexts.syncing.utils :as sync-utils]
             [utils.datetime :as datetime]
@@ -76,12 +76,14 @@
            (i18n/label :t/setup-syncing)]]
          [rn/view {:style style/qr-container}
           (if (sync-utils/valid-connection-string? @code)
-            [rn/view {:style {:margin-horizontal 12}}
-             [qr-code-viewer/qr-code-view 311 @code]]
-            [quo/qr-code
-             {:source (resources/get-image :qr-code)
-              :height 220
-              :width  "100%"}])
+            [qr-codes/qr-code {:url @code}]
+            [rn/view {:style {:flex-direction :row}}
+             [rn/image
+              {:source (resources/get-image :qr-code)
+               :style  {:width            "100%"
+                        :background-color colors/white-opa-70
+                        :border-radius    12
+                        :aspect-ratio     1}}]])
           (when (sync-utils/valid-connection-string? @code)
             [rn/view
              {:style style/valid-cs-container}
diff --git a/src/status_im2/contexts/wallet/account/style.cljs b/src/status_im2/contexts/wallet/account/style.cljs
index 3faa6a5186c..bf878cbcd71 100644
--- a/src/status_im2/contexts/wallet/account/style.cljs
+++ b/src/status_im2/contexts/wallet/account/style.cljs
@@ -3,13 +3,3 @@
 (def tabs
   {:padding-left     20
    :padding-vertical 12})
-
-(def wip
-  {:justify-content :center
-   :align-items     :center
-   :flex            1})
-
-(def empty-container-style
-  {:justify-content :center
-   :flex            1
-   :margin-bottom   44})
diff --git a/src/status_im2/contexts/wallet/account/tabs/about/style.cljs b/src/status_im2/contexts/wallet/account/tabs/about/style.cljs
new file mode 100644
index 00000000000..a87bb228049
--- /dev/null
+++ b/src/status_im2/contexts/wallet/account/tabs/about/style.cljs
@@ -0,0 +1,6 @@
+(ns status-im2.contexts.wallet.account.tabs.about.style)
+
+(def about-tab
+  {:flex               1
+   :padding-horizontal 20
+   :padding-vertical   8})
diff --git a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs
new file mode 100644
index 00000000000..d91c52ebb91
--- /dev/null
+++ b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs
@@ -0,0 +1,60 @@
+(ns status-im2.contexts.wallet.account.tabs.about.view
+  (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [status-im2.contexts.wallet.account.tabs.about.style :as style]))
+
+(defn description
+  [{:keys [address]}]
+  [quo/text {:size :paragraph-2}
+   (map (fn [network]
+          ^{:key (str network)}
+          [quo/text
+           {:size   :paragraph-2
+            :weight :medium
+            :style  {:color (colors/custom-color network)}}
+           (str (subs (name network) 0 3) (when (= network :arbitrum) "1") ":")])
+        temp/network-names)
+   [quo/text
+    {:size   :paragraph-2
+     :weight :monospace}
+    address]])
+
+(defn about-options
+  []
+  [quo/action-drawer
+   [[{:icon                :i/link
+      :accessibility-label :view-on-eth
+      :label               (i18n/label :t/view-on-eth)
+      :right-icon          :i/external}
+     {:icon                :i/link
+      :accessibility-label :view-on-opt
+      :label               (i18n/label :t/view-on-opt)
+      :right-icon          :i/external}
+     {:icon                :i/link
+      :accessibility-label :view-on-arb
+      :label               (i18n/label :t/view-on-arb)
+      :right-icon          :i/external}
+     {:icon                :i/copy
+      :accessibility-label :copy-address
+      :label               (i18n/label :t/copy-address)}
+     {:icon                :i/qr-code
+      :accessibility-label :show-address-qr
+      :label               (i18n/label :t/show-address-qr)}
+     {:icon                :i/share
+      :accessibility-label :share-address
+      :label               (i18n/label :t/share-address)}]]])
+
+(defn view
+  []
+  [rn/view {:style style/about-tab}
+   [quo/data-item
+    (merge temp/data-item-state
+           {:custom-subtitle (fn [] [description {:address temp/address}])
+            :container-style {:margin-bottom 12}
+            :on-press        #(rf/dispatch [:show-bottom-sheet {:content about-options}])})]
+   [quo/account-origin temp/account-origin-state]])
diff --git a/src/status_im2/contexts/wallet/account/tabs/style.cljs b/src/status_im2/contexts/wallet/account/tabs/style.cljs
new file mode 100644
index 00000000000..de78eb90944
--- /dev/null
+++ b/src/status_im2/contexts/wallet/account/tabs/style.cljs
@@ -0,0 +1,6 @@
+(ns status-im2.contexts.wallet.account.tabs.style)
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1
+   :margin-bottom   44})
diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs
index 98cb760267f..45c14a534a1 100644
--- a/src/status_im2/contexts/wallet/account/tabs/view.cljs
+++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs
@@ -2,12 +2,13 @@
   (:require
     [quo2.core :as quo]
     [react-native.core :as rn]
-    [status-im2.contexts.wallet.account.style :as style]
+    [status-im2.contexts.wallet.account.tabs.style :as style]
     [status-im2.contexts.wallet.common.temp :as temp]
-    [utils.i18n :as i18n]))
+    [utils.i18n :as i18n]
+    [status-im2.contexts.wallet.account.tabs.about.view :as about]))
 
 (defn view
-  [selected-tab]
+  [{:keys [selected-tab]}]
   (case selected-tab
     :assets       [rn/flat-list
                    {:render-fn               quo/token-value
@@ -33,5 +34,4 @@
                     :description     (i18n/label :t/no-collectibles-description)
                     :placeholder?    true
                     :container-style style/empty-container-style}]
-    [rn/view {:style style/wip}
-     [quo/text "[WIP]"]]))
+    [about/view]))
diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs
index 906bd70b81a..bd71e060625 100644
--- a/src/status_im2/contexts/wallet/account/view.cljs
+++ b/src/status_im2/contexts/wallet/account/view.cljs
@@ -53,4 +53,4 @@
          :data           tabs-data
          :on-change      #(reset! selected-tab %)
          :scrollable?    true}]
-       [tabs/view @selected-tab]])))
+       [tabs/view {:selected-tab @selected-tab}]])))
diff --git a/src/status_im2/contexts/wallet/collectible/style.cljs b/src/status_im2/contexts/wallet/collectible/style.cljs
new file mode 100644
index 00000000000..c19c02b92eb
--- /dev/null
+++ b/src/status_im2/contexts/wallet/collectible/style.cljs
@@ -0,0 +1,63 @@
+(ns status-im2.contexts.wallet.collectible.style)
+
+(def container
+  {:margin-top    100
+   :margin-bottom 34})
+
+(def preview
+  {:margin-horizontal 8
+   :margin-top        12})
+
+(def header
+  {:margin-horizontal 20
+   :margin-top        16
+   :margin-bottom     12})
+
+(def collection-container
+  {:flex-direction :row
+   :margin-top     6})
+
+(def buttons-container
+  {:flex-direction    :row
+   :align-items       :stretch
+   :margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     20})
+
+(def tabs
+  {:margin-horizontal 20
+   :margin-vertical   12})
+
+(def send-button
+  {:flex         1
+   :margin-right 6})
+
+(def opensea-button
+  {:flex        1
+   :margin-left 6})
+
+(def info-container
+  {:flex-direction    :row
+   :margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     12})
+
+(def account
+  {:margin-right 6
+   :flex         1})
+
+(def network
+  {:margin-left 6
+   :flex        1})
+
+(def traits-section
+  {:margin-horizontal 20
+   :margin-top        8})
+
+(def traits-item
+  {:margin-horizontal 6
+   :flex              1})
+
+(def traits-container
+  {:margin-horizontal 14
+   :margin-vertical   12})
diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs
index c75e9657a71..1b03596efed 100644
--- a/src/status_im2/contexts/wallet/collectible/view.cljs
+++ b/src/status_im2/contexts/wallet/collectible/view.cljs
@@ -1,16 +1,123 @@
 (ns status-im2.contexts.wallet.collectible.view
   (:require [react-native.core :as rn]
             [quo2.core :as quo]
-            [re-frame.core :as rf]))
+            [utils.i18n :as i18n]
+            [status-im2.common.scroll-page.view :as scroll-page]
+            [status-im2.contexts.wallet.collectible.style :as style]
+            [status-im2.contexts.wallet.common.temp :as temp]))
 
-(defn view
+(defn header
+  [{:keys [name description collection-image]}]
+  [rn/view {:style style/header}
+   [quo/text
+    {:weight :semi-bold
+     :size   :heading-1} name]
+   [rn/view style/collection-container
+    [quo/collection-avatar {:image collection-image}]
+    [quo/text
+     {:weight :semi-bold
+      :size   :paragraph-1}
+     description]]])
+
+(defn cta-buttons
+  []
+  [rn/view {:style style/buttons-container}
+   [quo/button
+    {:container-style style/send-button
+     :type            :outline
+     :size            40
+     :icon-left       :i/send}
+    (i18n/label :t/send)]
+   [quo/button
+    {:container-style style/opensea-button
+     :type            :outline
+     :size            40
+     :icon-left       :i/opensea}
+    (i18n/label :t/opensea)]])
+
+(defn tabs
+  []
+  [quo/tabs
+   {:size        32
+    :style       style/tabs
+    :scrollable? true
+    :data        [{:id                  :overview
+                   :label               (i18n/label :t/overview)
+                   :accessibility-label :overview-tab}
+                  {:id                  :activity
+                   :label               (i18n/label :t/activity)
+                   :accessibility-label :activity-tab}
+                  {:id                  :permissions
+                   :label               (i18n/label :t/permissions)
+                   :accessibility-label :permissions-tab}
+                  {:id                  :about
+                   :label               (i18n/label :t/about)
+                   :accessibility-label :about-tab}]}])
+
+(defn traits-section
+  [traits]
+  [rn/view {:style style/traits-section}
+   [quo/section-label
+    {:section (i18n/label :t/traits)}]]
+
+  [rn/flat-list
+   {:render-fn               (fn [{:keys [title subtitle]}]
+                               [rn/view {:style style/traits-item}
+                                [quo/data-item
+                                 {:description :default
+                                  :card?       true
+                                  :status      :default
+                                  :size        :default
+                                  :title       title
+                                  :subtitle    subtitle}]])
+    :data                    traits
+    :key                     :collectibles-list
+    :key-fn                  :id
+    :num-columns             2
+    :content-container-style style/traits-container}])
+
+(defn info
   []
   [rn/view
-   {:style {:flex            1
-            :align-items     :center
-            :justify-content :center}}
-
-   [quo/text {} "COLLECTIBLES PAGE"]
-   [quo/divider-label]
-   [quo/button {:on-press #(rf/dispatch [:navigate-back])}
-    "NAVIGATE BACK"]])
+   {:style style/info-container}
+   [rn/view {:style style/account}
+    [quo/data-item
+     {:description         :account
+      :card?               true
+      :status              :default
+      :size                :default
+      :title               (i18n/label :t/account-title)
+      :subtitle            "Collectibles vault"
+      :emoji               "🎮"
+      :customization-color :yellow}]]
+
+   [rn/view {:style style/network}
+    [quo/data-item
+     {:description :network
+      :card?       true
+      :status      :default
+      :size        :default
+      :title       (i18n/label :t/network)
+      :subtitle    (i18n/label :t/mainnet)}]]])
+
+(defn view
+  []
+  (let [{:keys [name description image traits] :as props} temp/collectible-details]
+    [scroll-page/scroll-page
+     {:navigate-back? true
+      :height         148
+      :page-nav-props {:type        :title-description
+                       :title       name
+                       :description description
+                       :right-side  [{:icon-name :i/options
+                                      :on-press  #(js/alert "pressed")}]
+                       :picture     image}}
+     [rn/view {:style style/container}
+      [rn/image
+       {:source image
+        :style  style/preview}]
+      [header props]
+      [cta-buttons]
+      [tabs]
+      [info]
+      [traits-section traits]]]))
diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs
index 812bc031046..88bb343a6a3 100644
--- a/src/status_im2/contexts/wallet/common/temp.cljs
+++ b/src/status_im2/contexts/wallet/common/temp.cljs
@@ -4,9 +4,11 @@
     [quo2.core :as quo]
     [quo2.foundations.resources :as quo.resources]
     [react-native.core :as rn]
+    [status-im2.common.resources :as resources]
     [status-im2.constants :as constants]
     [status-im2.contexts.wallet.common.utils :as utils]
     [utils.i18n :as i18n]
+    [status-im2.common.resources :as status.resources]
     [utils.re-frame :as rf]))
 
 (def networks
@@ -26,9 +28,7 @@
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
     "Create Account"]
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
-    "Saved Addresses"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
-    "Collectibles"]])
+    "Saved Addresses"]])
 
 (def wallet-overview-state
   {:state             :default
@@ -68,6 +68,45 @@
                           :percentage-change "0.00"
                           :fiat-change       "€0.00"}}])
 
+(def collectibles
+  [{:image (status.resources/get-mock-image :collectible1)
+    :id    1}
+   {:image (status.resources/get-mock-image :collectible2)
+    :id    2}
+   {:image (status.resources/get-mock-image :collectible3)
+    :id    3}
+   {:image (status.resources/get-mock-image :collectible4)
+    :id    4}
+   {:image (status.resources/get-mock-image :collectible5)
+    :id    5}
+   {:image (status.resources/get-mock-image :collectible6)
+    :id    6}])
+
+(def collectible-details
+  nil
+  #_{:name             "#5946"
+     :description      "Bored Ape Yacht Club"
+     :image            (status.resources/get-mock-image :collectible-monkey)
+     :collection-image (status.resources/get-mock-image :bored-ape)
+     :traits           [{:title    "Background"
+                         :subtitle "Blue"
+                         :id       1}
+                        {:title    "Clothes"
+                         :subtitle "Bayc T Black"
+                         :id       2}
+                        {:title    "Eyes"
+                         :subtitle "Sleepy"
+                         :id       3}
+                        {:title    "Fur"
+                         :subtitle "Black"
+                         :id       4}
+                        {:title    "Hat"
+                         :subtitle "Beanie"
+                         :id       5}
+                        {:title    "Mouth"
+                         :subtitle "Bored Pipe"
+                         :id       6}]})
+
 (def account-overview-state
   {:current-value       "€0.00"
    :account-name        "Account 1"
@@ -102,3 +141,26 @@
                         :alignment   :flex-start}
     :description       :text
     :description-props {:text (string/replace constants/path-default-wallet #"/" " / ")}}])
+
+(def network-names [:ethereum :optimism :arbitrum])
+
+(def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4")
+
+(def data-item-state
+  {:description         :default
+   :icon-right?         true
+   :icon                :i/options
+   :card?               true
+   :label               :none
+   :status              :default
+   :size                :default
+   :title               "Address"
+   :customization-color :yellow})
+
+(def account-origin-state
+  {:type            :default-keypair
+   :stored          :on-keycard
+   :profile-picture (resources/get-mock-image :user-picture-male5)
+   :derivation-path (string/replace constants/path-default-wallet #"/" " / ")
+   :user-name       "Alisher Yakupov"
+   :on-press        #(js/alert "pressed")})
diff --git a/src/status_im2/contexts/wallet/home/style.cljs b/src/status_im2/contexts/wallet/home/style.cljs
index 1b622aadfe8..eefd32f03cd 100644
--- a/src/status_im2/contexts/wallet/home/style.cljs
+++ b/src/status_im2/contexts/wallet/home/style.cljs
@@ -5,6 +5,12 @@
    :padding-top        8
    :padding-bottom     12})
 
+(def accounts-container
+  {:height 112})
+
+(def overview-container
+  {:height 86})
+
 (def accounts-list
   {:padding-horizontal 20
    :padding-top        32
diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs
index 130b47cb052..8c7e84102ed 100644
--- a/src/status_im2/contexts/wallet/home/view.cljs
+++ b/src/status_im2/contexts/wallet/home/view.cljs
@@ -52,16 +52,18 @@
        {:style {:margin-top top
                 :flex       1}}
        [common.top-nav/view]
-       [quo/wallet-overview temp/wallet-overview-state]
+       [rn/view {:style style/overview-container}
+        [quo/wallet-overview temp/wallet-overview-state]]
        [rn/pressable
         {:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])}
         [quo/wallet-graph {:time-frame :empty}]]
-       [rn/flat-list
-        {:style      style/accounts-list
-         :data       account-cards
-         :horizontal true
-         :separator  [rn/view {:style {:width 12}}]
-         :render-fn  quo/account-card}]
+       [rn/view {:style style/accounts-container}
+        [rn/flat-list
+         {:style      style/accounts-list
+          :data       account-cards
+          :horizontal true
+          :separator  [rn/view {:style {:width 12}}]
+          :render-fn  quo/account-card}]]
        [quo/tabs
         {:style          style/tabs
          :size           32
@@ -72,12 +74,25 @@
          :assets       [rn/flat-list
                         {:render-fn               quo/token-value
                          :data                    temp/tokens
+                         :key                     :assets-list
                          :content-container-style {:padding-horizontal 8}}]
-         :collectibles [quo/empty-state
-                        {:title           (i18n/label :t/no-collectibles)
-                         :description     (i18n/label :t/no-collectibles-description)
-                         :placeholder?    true
-                         :container-style style/empty-container-style}]
+         :collectibles (if temp/collectible-details
+                         [rn/flat-list
+                          {:render-fn               (fn [item]
+                                                      [quo/collectible
+                                                       {:images   [(:image item)]
+                                                        :on-press #(rf/dispatch [:navigate-to
+                                                                                 :wallet-collectible])}])
+                           :data                    temp/collectibles
+                           :key                     :collectibles-list
+                           :key-fn                  :id
+                           :num-columns             2
+                           :content-container-style {:padding-horizontal 8}}]
+                         [quo/empty-state
+                          {:title           (i18n/label :t/no-collectibles)
+                           :description     (i18n/label :t/no-collectibles-description)
+                           :placeholder?    true
+                           :container-style style/empty-container-style}])
          [quo/empty-state
           {:title           (i18n/label :t/no-activity)
            :description     (i18n/label :t/empty-tab-description)
diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs
index 6ea8bd8941f..9d2709fedad 100644
--- a/src/status_im2/navigation/screens.cljs
+++ b/src/status_im2/navigation/screens.cljs
@@ -38,7 +38,7 @@
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
     [status-im2.contexts.wallet.account.view :as wallet-accounts]
     [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch]
-    [status-im2.contexts.wallet.collectible.view :as wallet-collectibles]
+    [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
     [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
@@ -245,8 +245,8 @@
     {:name      :wallet-address-watch
      :component wallet-address-watch/view}
 
-    {:name      :wallet-collectibles
-     :component wallet-collectibles/view}
+    {:name      :wallet-collectible
+     :component wallet-collectible/view}
 
     {:name      :wallet-create-account
      :component wallet-create-account/view}
diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py
index b28eeb4f63a..515b4a9c03c 100644
--- a/test/appium/views/sign_in_view.py
+++ b/test/appium/views/sign_in_view.py
@@ -187,7 +187,7 @@ def __init__(self, driver):
         self.cancel_custom_seed_phrase_button = Button(self.driver, accessibility_id="cancel-custom-seed-phrase")
 
         # New onboarding
-        self.generate_keys_button = Button(self.driver, translation_id="create-multiaccount")
+        self.generate_keys_button = Button(self.driver, translation_id="lets-go")
         self.profile_your_name_edit_box = EditBox(self.driver, accessibility_id="profile-title-input")
         self.profile_continue_button = Button(self.driver, accessibility_id="submit-create-profile-button")
         self.profile_password_edit_box = EditBox(self.driver, translation_id="password-creation-placeholder-1")
diff --git a/translations/en.json b/translations/en.json
index 1f8c36b1012..e2dd00f9e97 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -861,7 +861,7 @@
     "joined": "Joined",
     "leave-group": "Leave group",
     "left": "left",
-    "lets-go": "Let's go",
+    "lets-go": "Let's go!",
     "les-ulc": "LES/ULC",
     "linked-on": "Linked on {{date}}",
     "load-messages-before": "before {{date}}",
@@ -971,7 +971,7 @@
     "getting-started-generate-keys-on-keycard": "Generate keys on a Keycard",
     "getting-started-generate-keys-on-keycard-description": "A Keycard is a physical card (similar to a credit card) that securely stores your Status keys. Using a Keycard adds an extra layer of security to your digital assets and identity. This option creates a new Ethereum address.",
     "generate-keys": "Generate keys",
-    "generate-keys-subtitle": "Your new self-sovereign identity in Status",
+    "generate-keys-subtitle": "Create your new self-sovereign identity",
     "experienced-web3": "Experienced in Web3?",
     "use-recovery-phrase": "Use recovery phrase",
     "use-recovery-phrase-subtitle": "If you already have an Ethereum address",
@@ -2333,5 +2333,14 @@
     "enter-eth": "Enter any ETH address or ENS name.",
     "eth-or-ens": "ETH address or ENS name.",
     "type-pairing-code": "Type or paste pairing code",
-    "scan-sync-code-placeholder": "cs2:4FH..."
+    "overview": "Overview",
+    "traits": "Traits",
+    "opensea": "OpenSea",
+    "mainnet": "Mainnet",
+    "scan-sync-code-placeholder": "cs2:4FH...",
+    "view-on-eth": "View on Etherscan",
+    "view-on-opt": "View on Optimism Explorer",
+    "view-on-arb": "View on Arbiscan",
+    "copy-address": "Copy address",
+    "show-address-qr": "Show address QR"
 }
diff --git a/yarn.lock b/yarn.lock
index 16842e1988f..9aca5af4e01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3580,25 +3580,7 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-alloc-unsafe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
-  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
-
-buffer-alloc@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
-  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
-  dependencies:
-    buffer-alloc-unsafe "^1.1.0"
-    buffer-fill "^1.0.0"
-
-buffer-fill@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
-  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
-
-buffer-from@^1.0.0, buffer-from@^1.1.1:
+buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
@@ -3617,14 +3599,6 @@ buffer@^4.3.0, buffer@^4.9.1:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.4.3:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -4527,11 +4501,6 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-dijkstrajs@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
-  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
-
 dom-serializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
@@ -5984,11 +5953,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -8485,7 +8449,7 @@ plist@^3.0.2:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
-pngjs@^3.3.0, pngjs@^3.4.0:
+pngjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
@@ -8701,19 +8665,6 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-qrcode@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
-  integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
-  dependencies:
-    buffer "^5.4.3"
-    buffer-alloc "^1.2.0"
-    buffer-from "^1.1.1"
-    dijkstrajs "^1.0.1"
-    isarray "^2.0.1"
-    pngjs "^3.3.0"
-    yargs "^13.2.4"
-
 query-string@^6.13.5:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -11075,7 +11026,7 @@ yargs-parser@^21.1.1:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs@^13.2.2, yargs@^13.2.4:
+yargs@^13.2.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==