diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs
index ab1b2cd0c7..645f821efa 100644
--- a/src/quo2/components/tags/context_tag/view.cljs
+++ b/src/quo2/components/tags/context_tag/view.cljs
@@ -79,13 +79,14 @@
            state               :default}
     :as   props}]
   [rn/view
-   {:style (merge (style/container {:theme               theme
-                                    :type                type
-                                    :size                size
-                                    :state               state
-                                    :blur?               blur?
-                                    :customization-color customization-color})
-                  container-style)}
+   {:style               (merge (style/container {:theme               theme
+                                                  :type                type
+                                                  :size                size
+                                                  :state               state
+                                                  :blur?               blur?
+                                                  :customization-color customization-color})
+                                container-style)
+    :accessibility-label :context-tag}
    (case type
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
diff --git a/src/quo2/components/wallet/transaction_summary/component_spec.cljs b/src/quo2/components/wallet/transaction_summary/component_spec.cljs
new file mode 100644
index 0000000000..2e4875a4eb
--- /dev/null
+++ b/src/quo2/components/wallet/transaction_summary/component_spec.cljs
@@ -0,0 +1,32 @@
+(ns quo2.components.wallet.transaction-summary.component-spec
+  (:require [quo2.components.wallet.transaction-summary.view :as transaction-summary]
+            [test-helpers.component :as h]))
+
+(h/describe "Transaction summary"
+  (h/test "default render"
+    (h/render [transaction-summary/view {}])
+    (h/is-truthy (h/query-by-label-text :transaction-summary)))
+
+  (h/test "incorrect setting doesn't crash render"
+    (h/render [transaction-summary/view {:transaction :unknown}])
+    (h/is-truthy (h/query-by-label-text :transaction-summary)))
+
+  (h/test "icon displayed"
+    (h/render [transaction-summary/view {:transaction :send}])
+    (h/is-truthy (h/query-by-label-text :header-icon)))
+
+  (h/test "Context tag rendered"
+    (h/render [transaction-summary/view
+               {:transaction :send
+                :first-tag   {:size       24
+                              :type       :token
+                              :token-name "SNT"
+                              :amount     1500}}])
+    (h/is-truthy (h/query-by-label-text :context-tag))))
+
+
+
+
+
+
+
diff --git a/src/quo2/components/wallet/transaction_summary/style.cljs b/src/quo2/components/wallet/transaction_summary/style.cljs
new file mode 100644
index 0000000000..b3319f2f90
--- /dev/null
+++ b/src/quo2/components/wallet/transaction_summary/style.cljs
@@ -0,0 +1,70 @@
+(ns quo2.components.wallet.transaction-summary.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [theme]
+  {:border-radius  16
+   :padding-top    9
+   :padding-bottom 8
+   :border-color   (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
+   :border-width   1})
+
+(def transaction-header-container
+  {:flex-direction     :row
+   :align-items        :center
+   :margin-bottom      9
+   :padding-horizontal 12})
+
+(defn transaction-header
+  [theme]
+  {:color       (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-left 4})
+
+(defn prop-text
+  [theme]
+  {:margin-right 4
+   :color        (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(def prop-tag
+  {:margin-right 4})
+
+(def icon-container
+  {:width           20
+   :height          20
+   :align-items     :center
+   :justify-content :center})
+
+(def content
+  {:margin-bottom      8
+   :padding-horizontal 12})
+
+(def content-line
+  {:flex-direction :row
+   :margin-top     4
+   :align-items    :center})
+
+(defn icon-color
+  [theme]
+  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+
+(defn divider
+  [theme]
+  {:height           1
+   :margin-vertical  4
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+
+(defn extra-info-header
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
+(defn extra-info-content
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(def extra-info-container
+  {:margin-horizontal 12})
+
+(def extras-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-top      4})
diff --git a/src/quo2/components/wallet/transaction_summary/view.cljs b/src/quo2/components/wallet/transaction_summary/view.cljs
new file mode 100644
index 0000000000..8ee15156f7
--- /dev/null
+++ b/src/quo2/components/wallet/transaction_summary/view.cljs
@@ -0,0 +1,123 @@
+(ns quo2.components.wallet.transaction-summary.view
+  (:require [quo2.theme :as quo.theme]
+            [quo2.components.wallet.transaction-summary.style :as style]
+            [react-native.core :as rn]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icon]
+            [quo2.components.tags.context-tag.view :as context-tag]
+            [utils.i18n :as i18n]))
+
+(def transaction-translation
+  {:send   (i18n/label :t/send)
+   :swap   (i18n/label :t/swap)
+   :bridge (i18n/label :t/bridge)})
+
+(def transaction-icon
+  {:send   :i/send
+   :swap   :i/swap
+   :bridge :i/bridge})
+
+(defn transaction-header
+  [{:keys [transaction
+           theme]
+    :or   {transaction :send}}]
+  (let [icon        (transaction-icon transaction)
+        translation (transaction transaction-translation)]
+    [rn/view
+     {:style style/transaction-header-container}
+     [rn/view {:style style/icon-container}
+      (when icon
+        [icon/icon icon
+         {:color               (style/icon-color theme)
+          :accessibility-label :header-icon}])]
+     (when translation
+       [text/text
+        {:weight :semi-bold
+         :size   :paragraph-1
+         :style  (style/transaction-header theme)}
+        translation])]))
+
+(defn prop-text
+  [label theme]
+  [text/text
+   {:weight :regular
+    :size   :paragraph-2
+    :style  (style/prop-text theme)}
+   (i18n/label label)])
+
+(defn prop-tag
+  [props]
+  [rn/view {:style style/prop-tag}
+   [context-tag/view (assoc props :size 24)]])
+
+(defn extra-info
+  [{:keys [header content theme]}]
+  [rn/view {:style style/extra-info-container}
+   [text/text
+    {:weight :regular
+     :size   :paragraph-2
+     :style  (style/extra-info-header theme)}
+    header]
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  (style/extra-info-content theme)}
+    content]])
+
+(defn- view-internal
+  [{:keys [theme first-tag second-tag third-tag fourth-tag second-tag-prefix
+           third-tag-prefix fourth-tag-prefix fifth-tag max-fees
+           nonce input-data]
+    :as   props}]
+  [rn/view
+   {:style               (style/container theme)
+    :accessibility-label :transaction-summary}
+   [transaction-header props]
+   [rn/view {:style style/content}
+    [rn/view {:style style/content-line}
+     (when first-tag [prop-tag first-tag])
+     (when second-tag-prefix [prop-text second-tag-prefix theme])
+     (when second-tag [prop-tag second-tag])]
+    [rn/view {:style style/content-line}
+     (when third-tag-prefix [prop-text third-tag-prefix theme])
+     (when third-tag [prop-tag third-tag])
+     (when fourth-tag-prefix [prop-text fourth-tag-prefix theme])
+     (when fourth-tag [prop-tag fourth-tag])
+     (when fifth-tag [prop-tag fifth-tag])]]
+   [rn/view {:style (style/divider theme)}]
+   [rn/view {:style style/extras-container}
+    [extra-info
+     {:header  (i18n/label :t/max-fees)
+      :content max-fees
+      :theme   theme}]
+    [extra-info
+     {:header  (i18n/label :t/nonce)
+      :content nonce
+      :theme   theme}]
+    [extra-info
+     {:header  (i18n/label :t/input-data)
+      :content input-data
+      :theme   theme}]]])
+
+(def view
+  "Properties:
+        - :transaction - type of transaction`. Possible values:
+          - :send
+          - :swap
+          - :bridge
+             
+        - :first-tag - props for context tag component that will be first on the first line
+        - :second-tag - props for context tag component that will be second on the first line
+        - :third-tag - props for context tag component that will be first on the second line
+        - :fourth-tag - props for context tag component that will be second on the second line
+        - :fifth-tag - props for context tag component that will be second on the second line
+     
+        - :second-tag-prefix - translation keyword to be used with label before second context tag
+        - :third-tag-prefix - translation keyword to be used with label before third context tag
+        - :fourth-tag-prefix - translation keyword to be used with label before fourth context tag
+   
+        - :max-fees - string
+        - :nonce - digit
+        - :input data - string
+    "
+  (quo.theme/with-theme view-internal))
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index d9d6493d3f..a7656ebc2a 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -127,6 +127,7 @@
     quo2.components.wallet.progress-bar.view
     quo2.components.wallet.summary-info.view
     quo2.components.wallet.token-input.view
+    quo2.components.wallet.transaction-summary.view
     quo2.components.wallet.wallet-activity.view
     quo2.components.wallet.wallet-overview.view
     [quo2.components.graph.interactive-graph.view :as interactive-graph]))
@@ -345,3 +346,4 @@
 (def token-input quo2.components.wallet.token-input.view/view)
 (def wallet-overview quo2.components.wallet.wallet-overview.view/view)
 (def wallet-activity quo2.components.wallet.wallet-activity.view/view)
+(def transaction-summary quo2.components.wallet.transaction-summary.view/view)
diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs
index 13629b6d2e..992858440a 100644
--- a/src/quo2/core_spec.cljs
+++ b/src/quo2/core_spec.cljs
@@ -72,5 +72,6 @@
     [quo2.components.wallet.progress-bar.component-spec]
     [quo2.components.wallet.summary-info.component-spec]
     [quo2.components.wallet.token-input.component-spec]
+    [quo2.components.wallet.transaction-summary.component-spec]
     [quo2.components.wallet.wallet-overview.component-spec]
     [quo2.components.wallet.wallet-activity.component-spec]))
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 0a71a23152..23b91d6b1d 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -130,6 +130,7 @@
     [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
     [status-im2.contexts.quo-preview.wallet.wallet-activity :as wallet-activity]
+    [status-im2.contexts.quo-preview.wallet.transaction-summary :as transaction-summary]
     [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
     [utils.re-frame :as rf]))
 
@@ -390,6 +391,8 @@
                         :component token-input/preview}
                        {:name      :wallet-activity
                         :component wallet-activity/view}
+                       {:name      :transaction-summary
+                        :component transaction-summary/view}
                        {:name      :wallet-overview
                         :component wallet-overview/preview-wallet-overview}]
    :keycard           [{:name      :keycard-component
diff --git a/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs b/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs
new file mode 100644
index 0000000000..2b4b4886f7
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs
@@ -0,0 +1,201 @@
+(ns status-im2.contexts.quo-preview.wallet.transaction-summary
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.foundations.resources :as quo.resources]))
+
+(def asset-snt
+  {:size       24
+   :type       :token
+   :token-name "SNT"
+   :amount     1500
+   :token-logo (quo.resources/get-token :snt)})
+
+(def asset-dai
+  {:size       24
+   :type       :token
+   :token-name "DAI"
+   :amount     2400
+   :token-logo (quo.resources/get-token :dai)})
+
+(def asset-collectible
+  {:size               24
+   :type               :collectible
+   :collectible        (resources/mock-images :collectible)
+   :collectible-name   "Collectible"
+   :collectible-number "123"})
+
+(def trip-to-vegas
+  {:size         24
+   :type         :account
+   :account-name "Trip to Vegas"
+   :emoji        "🤑"})
+
+(def piggy-bank
+  {:size         24
+   :type         :account
+   :account-name "Piggy bank"
+   :emoji        "🐷"})
+
+(def aretha-gosling
+  {:size            24
+   :type            :default
+   :full-name       "Aretha Gosling"
+   :profile-picture (resources/mock-images :user-picture-female2)})
+
+(def james-bond
+  {:size            24
+   :type            :default
+   :full-name       "James Bond"
+   :profile-picture (resources/mock-images :user-picture-male4)})
+
+(def mainnet
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Mainnet"})
+
+(def optimism
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :optimism)
+   :network-name "Optimism"})
+
+(def arbitrum
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :arbitrum)
+   :network-name "Arbitrum"})
+
+(def multinetwork
+  {:size     24
+   :type     :multinetwork
+   :networks [(quo.resources/get-network :ethereum)
+              (quo.resources/get-network :arbitrum)
+              (quo.resources/get-network :optimism)]})
+
+(def moonpay
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Moonpay"})
+
+(def binance
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Binance"})
+
+(def context-tags
+  [{:key   asset-snt
+    :value "SNT"}
+   {:key   asset-dai
+    :value "UNK"}
+   {:key   asset-collectible
+    :value "Collectible"}
+   {:key   trip-to-vegas
+    :value "Account: Trip to Vegas"}
+   {:key   piggy-bank
+    :value "Account: Piggy bank"}
+   {:key   aretha-gosling
+    :value "Person: Aretha Gosling"}
+   {:key   james-bond
+    :value "Person: James Bond"}
+   {:key   mainnet
+    :value "Network: Mainnet"}
+   {:key   optimism
+    :value "Network: Optimism"}
+   {:key   arbitrum
+    :value "Network: Arbitrum"}
+   {:key   multinetwork
+    :value "Network: Multinetwork"}
+   {:key   moonpay
+    :value "Market: Moonpay"}
+   {:key   binance
+    :value "Market: Binance"}])
+
+(def prefixes
+  [{:key   :t/to
+    :value "To"}
+   {:key   :t/in
+    :value "In"}
+   {:key   :t/via
+    :value "Via"}
+   {:key   :t/from
+    :value "From"}
+   {:key   :t/on
+    :value "On"}
+   {:key   :t/at
+    :value "At"}])
+
+(def descriptor
+
+  (concat
+   [{:key     :transaction
+     :type    :select
+     :options [{:key :send}
+               {:key :swap}
+               {:key :bridge}]}
+    {:label   "Slot 1"
+     :key     :first-tag
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 2 prefix"
+     :key     :second-tag-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 2"
+     :key     :second-tag
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 3 prefix"
+     :key     :third-tag-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 3"
+     :key     :third-tag
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 4 prefix"
+     :key     :fourth-tag-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 4"
+     :key     :fourth-tag
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 5"
+     :key     :fifth-tag
+     :type    :select
+     :options context-tags}
+    {:key  :max-fees
+     :type :text}
+    {:key  :nonce
+     :type :number}
+    {:key  :input-data
+     :type :text}]))
+
+(defn view
+  []
+  (let [component-state (reagent/atom {:transaction       :send
+                                       :first-tag         asset-snt
+                                       :second-tag-prefix :t/from
+                                       :second-tag        piggy-bank
+                                       :third-tag-prefix  nil
+                                       :third-tag         aretha-gosling
+                                       :fourth-tag-prefix :t/via
+                                       :fourth-tag        mainnet
+                                       :fifth-tag         optimism
+                                       :max-fees          "€55.57"
+                                       :nonce             26
+                                       :input-data        "Hello from Porto"})]
+    (fn []
+      [preview/preview-container
+       {:state                     component-state
+        :descriptor                descriptor
+        :show-blur-background?     true
+        :component-container-style {:align-self :center}}
+       [quo/transaction-summary
+        (merge {:on-press #(js/alert "Dropdown pressed")}
+               @component-state)]])))
diff --git a/translations/en.json b/translations/en.json
index 3f9763323c..0981289b69 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -697,6 +697,7 @@
         "Sorry the code was incorrect, please enter it again"
     ],
     "initialization": "Initialization",
+    "input-data": "Input data",
     "install": "↓ Install",
     "intro-message1": "Welcome to Status!\nTap this message to set your password and get started.",
     "intro-privacy-policy-note1": "Status does not collect or profit from your personal data. By continuing, you agree with the ",
@@ -1831,6 +1832,7 @@
     "pinned-by": "Pinned by",
     "pin-limit-reached": "Pin limit reached. Unpin a previous message first.",
     "max-fee": "Max fee",
+    "max-fees": "Max fees",
     "max-priority-fee": "Max priority fee",
     "miners-higher-fee": "Miners will likely inlcude your transaction earlier if you pay a higher fee.",
     "gas-amount-limit": "Gas amount limit",