diff --git a/android/gradle.properties b/android/gradle.properties
index 0546090c6788..0de47ef7d184 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -51,3 +51,7 @@ MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
 
 # Key Information
 MYAPP_UPLOAD_KEY_ALIAS=ReactNativeChat-Key-Alias
+
+# Disable Frame Processors for VisionCamera.
+# We might want to re-enable them if we need QR code scanning or other frame processing features (maybe in VisionCamera V3)
+disableFrameProcessors=true
diff --git a/assets/images/hand.svg b/assets/images/hand.svg
new file mode 100644
index 000000000000..e9a56d260ed0
--- /dev/null
+++ b/assets/images/hand.svg
@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 153 200" style="enable-background:new 0 0 153 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#99F6FF;}
+	.st1{fill:#CCF7FF;}
+	.st2{fill:none;stroke:#002140;stroke-linecap:round;stroke-linejoin:round;}
+	.st3{fill:#002140;}
+	.st4{fill:#A65E3A;}
+	.st5{fill:#FED604;}
+	.st6{fill:#50EEF7;}
+	.st7{fill:#E5FAFE;}
+	.st8{fill:#FF7101;}
+	.st9{fill:#FFFAF0;}
+	.st10{fill:#03D47C;stroke:#002140;}
+</style>
+<path class="st0" d="M139.5,52.7c0,0,2.9,4.4,0.9,8.4l5.4,1.1L139.5,52.7z"/>
+<path class="st1" d="M145.8,62.2l-5.4-1.1c0,0,1.3-6.5-0.9-8.4L87.1,38.4l-26.9,95.7l3.6-1.6l1.4,3.2l3.6-1.7l1.4,3.1l3.3-1.7l1.9,3
+	l3.6-1.6l1.5,3.3l3.6-2.1l1.5,3.6l3.3-1.9l1.8,3.2l3.3-1.9l1.9,3.2l2.9-1.7l1.9,3.3l3.6-2.1l1.5,3.3l3.4-1.8l1.8,3.3l3.3-2l1.6,3.4
+	l3.8-1.8l1.5,2.8L145.8,62.2L145.8,62.2z"/>
+<path class="st2" d="M85.7,141.5l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M80.7,140.1l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M90.8,142.9l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M95.9,144.3l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M106.1,147.1l3.4-2.1l1.6,3.6"/>
+<path class="st2" d="M101,145.7l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M111.2,148.5l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M65.3,135.9l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M70.3,137.3l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M75.4,138.7l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M139.7,53.1L86.9,38.4l-26.7,96l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M145.8,62.2l-24.6,89.1l-1.6-3.6l-3.4,2.2"/>
+<path class="st2" d="M87.3,130.6l20,5.5"/>
+<path class="st2" d="M73.3,108.4l49.8,13.8"/>
+<path class="st2" d="M106.6,109.9l-31-8.6l-0.8,3l31,8.6L106.6,109.9z"/>
+<path class="st2" d="M96.7,100.9l-19.5-5.4l-0.8,3l19.5,5.4L96.7,100.9z"/>
+<path class="st2" d="M81.3,83l27.4,7.6"/>
+<path class="st2" d="M80.2,87.1l27.4,7.6"/>
+<path class="st2" d="M82.4,79.7l11.4,3.2"/>
+<path class="st2" d="M120.9,90.3l10.2,2.8"/>
+<path class="st2" d="M118.7,98.5l10.2,2.8"/>
+<path class="st2" d="M118,100.8l10.2,2.8"/>
+<path class="st2" d="M117.2,103.8l10.2,2.8"/>
+<path class="st2" d="M101.7,71l16.9,4.7"/>
+<path class="st2" d="M94,72.5l30,8.3"/>
+<path class="st2" d="M113.6,68.8c4.5,0,8.2-3.7,8.2-8.2c0-4.5-3.7-8.2-8.2-8.2s-8.2,3.7-8.2,8.2C105.4,65.1,109.1,68.8,113.6,68.8z"
+	/>
+<path class="st3" d="M115.8,59.4c0,0,0.1,0,0.2,0c0.4,0,0.6-0.3,0.7-0.6c0.1-0.2,0.1-0.4,0.2-0.7c0.1-0.2,0.1-0.5-0.1-0.7
+	c-0.1-0.1-0.4-0.2-0.5-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.4-0.6-0.8-0.7l0.2-0.7c0,0,0.1-0.5-0.4-0.7c-0.6-0.2-0.7,0.4-0.7,0.4l-0.2,0.7
+	c0,0-2-0.3-2.5,1.6c-0.7,2.5,3.7,2.5,3.2,4c-0.1,0.2-0.4,0.9-1.8,0.5c-1.7-0.5-0.5-1.7-1.6-2c-0.6-0.2-0.9,0.2-1,0.6l-0.4,1.3
+	c0,0-0.1,0.5,0.4,0.6c0.5,0.2,0.8-0.1,0.8-0.1s0.3,0.5,0.8,0.7l-0.2,0.7c-0.1,0.5-0.4,1.1,0.3,1.3c0.5,0.2,0.7-0.3,0.9-0.7
+	c0.1-0.3,0.2-0.7,0.3-1c0,0,0.9,0,0.9,0c0.6-0.1,1.2-0.4,1.6-1c0.4-0.6,0.6-1.5,0.2-2.2c-0.3-0.5-0.8-0.8-1.2-1.1
+	c-0.5-0.3-0.9-0.4-1.4-0.7c-0.3-0.2-0.6-0.4-0.5-0.8c0.2-0.8,1.1-0.6,1.6-0.5c0.5,0.1,0.8,0.4,1,0.9
+	C115.4,59.1,115.5,59.3,115.8,59.4L115.8,59.4z"/>
+<path class="st3" d="M109.1,124.9c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0.1-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5c-0.4-0.1-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.4-0.1-0.7,0.2-0.7,0.4l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.7c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.4-0.2-0.7-0.3-1.1-0.6c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C108.8,124.7,108.9,124.9,109.1,124.9L109.1,124.9z"/>
+<path class="st3" d="M120.4,128.1c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0.1-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5c-0.4-0.1-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.5-0.1-0.7,0.2-0.7,0.4l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.7c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.3-0.2-0.7-0.3-1.1-0.6c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C120.1,127.8,120.2,128,120.4,128.1L120.4,128.1z"/>
+<path class="st3" d="M114.7,126.5c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0.1-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5s-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.4-0.1-0.7,0.2-0.7,0.4l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.7c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.3-0.2-0.7-0.3-1.1-0.6c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C114.4,126.2,114.5,126.4,114.7,126.5L114.7,126.5z"/>
+<path class="st2" d="M139.7,53.1c0,0,2.6,4.7,0.5,7.9l5.4,1.2L139.7,53.1"/>
+<path class="st4" d="M9.5,170.1c0,0,3.9-14.3,6.7-16.3c0,0-2.1-12.1,8.3-24.5c0,0,5.9-4,8.5-5c2.6-1,10.7-4.5,14.9-7.9
+	c4.2-3.4,12-7.3,18.1-0.9s-1.3,16.2-3.5,17.6c-2.2,1.4-6.3,3.7-8.1,4.1c-1.8,0.4-10.1,1.9-10.4,8.2c0,0,2.5,8,1.7,12.5L86.3,169
+	c0,0-7.1,7.6-16.2,7.4c-9.1-0.2-16.1-1.8-16.1-1.8l-2.6,5.7c0,0-15.3,1.4-27.8-3.6S9.5,170.1,9.5,170.1L9.5,170.1z"/>
+<path class="st4" d="M115.9,116l-3.9,14.4c0,0,6.4,4.5,9.9,5.1c3.5,0.7,10.4-1,11.8-8.1c1.4-7.1-5.8-9.6-8.4-10
+	C122.6,117,117.6,117.5,115.9,116L115.9,116z"/>
+<path class="st4" d="M111.9,130.4l-0.7,2.5c0,0-2.8-0.6-4.9-1.5c-2.1-0.8-6-4.2-9.8-5c-3.8-0.8-7.7,1.9-9,4.6
+	c-1.3,2.6-1,6.7-0.6,7.9c0,0-5.1,5.5-2.9,11.5c0,0-2.8,2.3-3.3,4.5s-1.4,9.6,11,13c12.4,3.4,17.8-5,19.4-11.3c0,0,6-4.7,3.2-11.8
+	c0,0,4.2-7.1,1.9-11.1L111.9,130.4L111.9,130.4z"/>
+<path class="st5" d="M104.4,143.2c0,0-0.7,9-3.8,12.1c0,0,8.4,1.9,10.6,1.3c0,0,5.9-5.3,3.2-11.8
+	C114.5,144.9,107.2,144.4,104.4,143.2L104.4,143.2z"/>
+<path class="st6" d="M45.7,157.9L95,171.4c0,0,4.9,0.3,5.7-2.9c0,0-4.5,0.3-9.9-1.1c-5.3-1.5-12.2-6.5-10.2-11.7
+	c2-5.2,3.6-5.3,3.6-5.3s-2.8-4.5,2.9-11.5c0,0-2.5-5.1,1.6-9.6c4.1-4.5,9.9-2.6,11.4-1.9c1.5,0.7,5.9,4.2,7.9,4.7
+	c2,0.5,3.4,0.8,3.4,0.8l28.7-104.6c0,0,0.9-6.5-4.1-7.9c-5.1-1.4-58.8-16.1-58.8-16.1s-6.4-1.3-8,4.8c-1.7,6.1-31,113.3-31,113.3
+	s7.2-3.9,10.1-6c2.9-2.1,9.8-6.6,15.8-3c6,3.6,5.6,10.8,3.2,13.8c-2.4,2.9-3.5,6.3-10.3,8.8c-6.8,2.4-12.3,3.5-12.7,9.4
+	C44,145.4,46.6,152.4,45.7,157.9L45.7,157.9z"/>
+<path class="st7" d="M44,118.9l24.2-88.4L120.9,45l6.3,9.5l-21,76.9l-4.4-2.8c0,0-3.4-3.1-6.8-2.2c-3.4,0.9-5.4,0.8-6.7,3.6
+	c-1.3,2.8-1.6,6.3-1.6,6.3l-0.8-0.1l-3.1,1.6l-1.9-3.1l-3.7,2l-1.5-3.5l-3.3,2.2l-1.6-3.4l-3.5,1.8l-1.5-3.4l-1.4,0.9
+	c0,0,8.2-8.9,1.7-15.7c-6.4-6.8-12.5-2-18.1,0.9L44,118.9L44,118.9z"/>
+<path class="st5" d="M10.2,170.6c-1.8-0.3-3.4,9.7-2.5,16.2c2.8,2.8,25.7,8.8,41.7,9.2c0,0,1.7-12.9,2.1-15.6c0,0-9.2,0.6-16.5-0.9
+	S12,171,10.2,170.6L10.2,170.6z"/>
+<path class="st8" d="M111.1,150.6l-1.4-3.4l-2.9,2.3l1,3.6L111.1,150.6z"/>
+<path class="st6" d="M115.3,146.8c0,0,0.2,4.5-1.5,6.9l3.8,4.3l4.7,1.3l2.3-2l2-7.3l-0.8-3.4l-4.9-1.4L115.3,146.8L115.3,146.8z"/>
+<path class="st1" d="M120.9,45c0,0,2.9,4.4,1,8.4l5.4,1.1L120.9,45z"/>
+<path class="st5" d="M29.7,126c0,0,7.9,4,10.6,8.2c2.6,4.2,3.9,10.1,3.9,10.1s2.3-4.7,4.5-5.4c2.1-0.8,9.2-2.6,9.3-3
+	c0.1-0.4,0.3-11.4-12.7-17.4c0,0-3,2.3-8.8,4.9C30.7,126,29.7,126,29.7,126L29.7,126z"/>
+<path class="st9" d="M34.6,124.4c4.7,3.6,8.8,3.4,13,1.7c1.7-0.7,3.3-1.8,5.1-2.3l-7.5-5.4C45.3,118.5,35.8,124.2,34.6,124.4
+	L34.6,124.4z"/>
+<path class="st2" d="M38.5,122.4c3.9,2.5,9.8,5,11.7,15.7"/>
+<path class="st2" d="M45.5,118.3c3.8,2.6,12.2,7,12.4,17.5"/>
+<path class="st2" d="M30.1,126.1c0,0,12.5,4.8,14,18.4"/>
+<path class="st2" d="M16.1,153.9c0,0-9.6,14.7-8.5,32.8"/>
+<path class="st2" d="M54.5,174.9c0,0-3.8,3.1-4.4,21.1"/>
+<path class="st2" d="M9.5,170.1c15.1,8,31.2,10.8,42.2,10.4"/>
+<path class="st2" d="M7.6,186.6c11.8,5.9,29.5,9.7,42.5,9.4"/>
+<path class="st2" d="M29.6,178.1c0,0,3.8,9.4-4,14.7"/>
+<path class="st2" d="M18,174.3c0,0,3.8,9.4-4,14.7"/>
+<path class="st2" d="M41.2,180.5c0,0,3.8,9.4-4,14.7"/>
+<path class="st3" d="M24.1,186.2c1.1,0,1.9-0.9,1.9-1.9c0-1.1-0.9-1.9-1.9-1.9s-1.9,0.9-1.9,1.9C22.2,185.4,23,186.2,24.1,186.2z"/>
+<path class="st3" d="M12.6,182.3c1.1,0,1.9-0.9,1.9-1.9s-0.9-1.9-1.9-1.9s-1.9,0.9-1.9,1.9S11.5,182.3,12.6,182.3z"/>
+<path class="st3" d="M35.6,188.8c1.1,0,1.9-0.9,1.9-1.9c0-1.1-0.9-1.9-1.9-1.9c-1.1,0-1.9,0.9-1.9,1.9
+	C33.7,188,34.6,188.8,35.6,188.8z"/>
+<path class="st3" d="M46.4,190.3c1.1,0,1.9-0.9,1.9-1.9c0-1.1-0.9-1.9-1.9-1.9s-1.9,0.9-1.9,1.9C44.5,189.4,45.4,190.3,46.4,190.3z"
+	/>
+<path class="st2" d="M38.1,122.4L69.2,8.7c0.9-3.4,4.4-5.4,7.8-4.5l58.4,16c3.4,0.9,5.4,4.4,4.5,7.8l-28.7,104.9"/>
+<path class="st2" d="M101,168.6c-1.5,2.2-4.2,3.3-6.9,2.5l-48.3-13.2"/>
+<path class="st2" d="M69.3,154.9c4.4,0,8-3.6,8-8s-3.6-8-8-8c-4.4,0-8,3.6-8,8S64.8,154.9,69.3,154.9z"/>
+<path class="st10" d="M69.3,152.9c3.2,0,5.9-2.6,5.9-5.9c0-3.2-2.6-5.9-5.9-5.9c-3.2,0-5.9,2.6-5.9,5.9
+	C63.4,150.2,66,152.9,69.3,152.9z"/>
+<path class="st2" d="M72.4,14l2.9,5.3"/>
+<path class="st2" d="M71.4,18.1l5.4-2.9"/>
+<path class="st3" d="M132.2,30.2l-4.2,3l2.7,0.8l-1.4,2.3l4.1-2.4l-2.7-0.7L132.2,30.2z"/>
+<path class="st2" d="M64.4,131.1l1.4-0.8l1.6,3.6"/>
+<path class="st2" d="M67.4,133.9l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M72.5,135.3l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M77.6,136.7l3.4-2.2l1.6,3.6"/>
+<path class="st2" d="M82.6,138.1l3.4-2.2l0.6,0.9"/>
+<path class="st2" d="M121.2,45.4L68.3,30.9l-24.1,87.9"/>
+<path class="st2" d="M106.2,131.2l21-76.7"/>
+<path class="st2" d="M68.9,123l20,5.5"/>
+<path class="st2" d="M54.9,100.9l49.8,13.6"/>
+<path class="st2" d="M88.1,102.3l-31-8.5l-0.8,3l31,8.5L88.1,102.3z"/>
+<path class="st2" d="M78.2,93.3L58.7,88l-0.8,3l19.5,5.3L78.2,93.3z"/>
+<path class="st2" d="M62.8,75.5L90.2,83"/>
+<path class="st2" d="M61.7,79.6l27.4,7.5"/>
+<path class="st2" d="M63.9,72.1l11.4,3.1"/>
+<path class="st2" d="M102.5,82.7l10.2,2.8"/>
+<path class="st2" d="M100.3,90.8l10.2,2.8"/>
+<path class="st2" d="M99.6,93.2l10.2,2.8"/>
+<path class="st2" d="M98.8,96.1l10.2,2.8"/>
+<path class="st2" d="M83.2,63.4l16.9,4.6"/>
+<path class="st2" d="M75.5,64.9l30,8.2"/>
+<path class="st2" d="M95.1,61.2c4.5,0,8.2-3.7,8.2-8.2s-3.7-8.2-8.2-8.2s-8.2,3.7-8.2,8.2S90.6,61.2,95.1,61.2z"/>
+<path class="st3" d="M97.3,51.8c0,0,0.1,0,0.2,0c0.4,0,0.6-0.3,0.7-0.6c0.1-0.2,0.1-0.4,0.2-0.7c0.1-0.2,0.1-0.5-0.1-0.7
+	c-0.1-0.1-0.4-0.2-0.5-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.4-0.6-0.8-0.7l0.2-0.7c0,0,0.1-0.5-0.4-0.7c-0.6-0.2-0.7,0.4-0.7,0.4L95.4,49
+	c0,0-2-0.3-2.5,1.6c-0.7,2.5,3.7,2.5,3.2,4c-0.1,0.2-0.4,0.9-1.8,0.5c-1.7-0.5-0.5-1.7-1.6-2c-0.6-0.2-0.9,0.2-1,0.6L91.4,55
+	c0,0-0.1,0.5,0.4,0.6c0.5,0.1,0.8-0.1,0.8-0.1s0.3,0.5,0.8,0.7L93.2,57c-0.1,0.5-0.4,1.1,0.3,1.3c0.5,0.1,0.7-0.3,0.9-0.7
+	c0.1-0.3,0.2-0.7,0.3-1c0,0,0.9,0,0.9,0c0.6-0.1,1.2-0.4,1.6-1c0.4-0.6,0.6-1.5,0.2-2.2c-0.3-0.5-0.8-0.8-1.2-1.1
+	c-0.5-0.3-0.9-0.4-1.4-0.7c-0.3-0.2-0.6-0.4-0.5-0.8c0.2-0.8,1.1-0.6,1.6-0.5c0.5,0.1,0.8,0.4,1,0.9C96.9,51.5,97,51.7,97.3,51.8
+	L97.3,51.8z"/>
+<path class="st3" d="M90.7,117.3c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5c-0.4-0.1-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.5-0.1-0.7,0.2-0.7,0.5l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.8c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.3-0.2-0.7-0.3-1.1-0.5c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C90.4,117.1,90.5,117.2,90.7,117.3L90.7,117.3z"/>
+<path class="st3" d="M102,120.4c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5c-0.4-0.1-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.5-0.1-0.7,0.2-0.7,0.5l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.8c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.4-0.2-0.7-0.3-1.1-0.5c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C101.7,120.1,101.8,120.3,102,120.4L102,120.4z"/>
+<path class="st3" d="M96.4,118.9c0,0,0.1,0,0.1,0c0.3,0,0.4-0.2,0.5-0.5c0-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.4-0.1-0.5
+	c-0.1-0.1-0.3-0.1-0.4-0.1c0,0-0.2,0.1-0.2,0.1c0,0-0.3-0.4-0.6-0.5l0.1-0.5c0,0,0.1-0.4-0.3-0.5c-0.4-0.1-0.6,0.3-0.6,0.3l-0.1,0.5
+	c0,0-1.5-0.2-1.9,1.2c-0.5,1.9,2.8,1.9,2.5,3.1c0,0.2-0.3,0.7-1.4,0.4c-1.3-0.4-0.4-1.3-1.2-1.5c-0.5-0.1-0.7,0.2-0.7,0.5l-0.3,1
+	c0,0-0.1,0.4,0.3,0.5c0.4,0.1,0.6-0.1,0.6-0.1s0.2,0.4,0.6,0.5l-0.2,0.6c-0.1,0.4-0.3,0.9,0.2,1c0.4,0.1,0.6-0.2,0.6-0.6
+	c0.1-0.3,0.1-0.5,0.2-0.8c0,0,0.7,0,0.7,0c0.5-0.1,0.9-0.3,1.2-0.8c0.3-0.5,0.5-1.1,0.2-1.6c-0.2-0.4-0.6-0.6-0.9-0.8
+	c-0.3-0.2-0.7-0.3-1.1-0.5c-0.2-0.1-0.5-0.3-0.4-0.6c0.2-0.6,0.8-0.5,1.3-0.4c0.4,0.1,0.6,0.3,0.7,0.7
+	C96.1,118.6,96.2,118.8,96.4,118.9L96.4,118.9z"/>
+<path class="st2" d="M114.6,144.8c-12.5,0.1-14.6-5.4-18.9-6.8c-4.4-1.3-9.6-0.4-11.7,6c-0.8,2.4-0.6,4.5,0.3,6.3"/>
+<path class="st2" d="M111.4,156.7c-12.5,0.1-14.4-5.2-20-6.6c-5.6-1.4-10.5,1.1-10.8,7c-0.2,4,3.2,7,6.4,8.7
+	C91.2,168.1,107,174.2,111.4,156.7"/>
+<path class="st2" d="M113.3,133.3c-8.7-1.1-10.8-5.4-14.6-6.5c-4.4-1.3-9.6-0.4-11.7,6c-0.8,2.4-0.6,4.5,0.3,6.3"/>
+<path class="st2" d="M111.3,156.5c0,0,6.1-3.8,3.4-11.8c0,0,5.1-7.5,1.9-11.1"/>
+<path class="st2" d="M111.3,156.5c-0.2,0-0.4,0.1-0.6,0.1"/>
+<path class="st2" d="M86.3,169.4c0,0-11.1,11.6-31.8,5.5"/>
+<path class="st2" d="M16.1,153.9c0,0-1.1-8.5,4.4-18.8c5.5-10.2,14.9-10.2,21.7-14.7c6.9-4.5,16-12.9,23.5-5.6
+	c5.5,5.4,2.7,12.7-2.3,17.3c-2.5,2.3-5.4,3.9-8.7,4.9c-3.3,1-7.3,1.6-9.3,4.7c-0.5,0.8-0.8,1.6-1.1,2.5c-0.9,2.1,5.6,9.2-1.6,21.4"
+	/>
+<path class="st2" d="M115.8,116c3.9,1.8,6.5,0.6,11.9,2.2c5.4,1.6,7.1,7,5.1,12.1c-2,5-10.8,9.1-20.6-0.1"/>
+<path class="st2" d="M104.3,143.3c0,0,0.8,4.8-3.2,11.7"/>
+<path class="st2" d="M109.9,147l-3.1,2.4l1.6,3.7l3.1-2.4L109.9,147z"/>
+<path class="st2" d="M115.3,147.2l6-1.9l4.7,1.3l1,3.3l-2.2,7.9l-2.2,1.4l-4.3-1.2l-4.1-4.4"/>
+<path class="st2" d="M121.8,145.4l-3.4,12.5"/>
+<path class="st2" d="M120.7,148.8l-5.4,1.4l3.6,4.4"/>
+<path class="st2" d="M125.6,146.8l-4.5,2.3l4.6,3.7l-6.1,1.5l2.9,4.2"/>
+<path class="st2" d="M121.2,45.4c0,0,2.6,4.7,0.6,7.9l5.4,1.2L121.2,45.4"/>
+</svg>
diff --git a/assets/images/receipt-doc.png b/assets/images/receipt-doc.png
new file mode 100644
index 000000000000..773bfaed73ad
Binary files /dev/null and b/assets/images/receipt-doc.png differ
diff --git a/assets/images/receipt-generic.png b/assets/images/receipt-generic.png
new file mode 100644
index 000000000000..1aabe854617d
Binary files /dev/null and b/assets/images/receipt-generic.png differ
diff --git a/assets/images/receipt-html.png b/assets/images/receipt-html.png
new file mode 100644
index 000000000000..5cf8d585b21f
Binary files /dev/null and b/assets/images/receipt-html.png differ
diff --git a/assets/images/receipt-svg.png b/assets/images/receipt-svg.png
new file mode 100644
index 000000000000..130c331dd8c9
Binary files /dev/null and b/assets/images/receipt-svg.png differ
diff --git a/assets/images/receipt-upload.svg b/assets/images/receipt-upload.svg
new file mode 100644
index 000000000000..813aaac51f5b
--- /dev/null
+++ b/assets/images/receipt-upload.svg
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 165 165" style="enable-background:new 0 0 165 165;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FED604;}
+	.st1{fill:#FFFAF0;}
+	.st2{fill:#FEE45E;}
+	.st3{fill:#F9B5FF;}
+	.st4{fill:#002140;stroke:#002140;stroke-miterlimit:10;}
+	.st5{fill:#0B1B34;stroke:#002140;stroke-miterlimit:10;}
+	.st6{fill:#0B1B34;}
+	.st7{fill:none;stroke:#002140;stroke-miterlimit:10;}
+	.st8{fill:#002140;}
+	.st9{fill:none;stroke:#002140;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<path class="st0" d="M77.9,129.2l-8.9,8.3c0,0-1.7,1.4-1.5,3.3c0.1,1.9,1.1,6.2,16.9,6.2s18-3.4,17.6-6c-0.4-2.5-4.5-6-4.5-6
+	l-6.2-5.7v-4.8c0,0,7.6-3.8,3.1-11.5L73,112.2c0,0-3.6,9.3,5,12.6V129.2z"/>
+<path class="st1" d="M126.1,61.1c0,0-30.9-4.3-37.4-7l-5.9-0.8c0,0-14.1-5.9-18.7-9.9l-0.1,5.5l-5.9-1.1l1,4.7l-7.5,0.4l1.1,5.1
+	l-7.5,1.1l2.8,5.6l-6.4-0.6l0.5,6l-5,2.5l9.8,0.9l-3.8,10.3c0,0,15.4,11.3,44.1,13.9c16.2,1.1,25.8-0.6,25.8-0.6l-3.1-5.9l5.9-1.5
+	l-2.4-5.9h6.7l-3.4-5.7l8.5-0.4l-5-5.5l7.3-1.1l-5.6-5.6L126.1,61.1L126.1,61.1z"/>
+<path class="st0" d="M83.3,63.1l2.1-1.9l3.2,4.2L88,24.8l-2.6-6L83.2,25L83.3,63.1z"/>
+<path class="st2" d="M37.3,73.2l5,10l0.9,0.6l3.4-10L37.3,73.2z"/>
+<path class="st1" d="M40.1,79.5L29.4,93.1l8.3,1.4L34.1,96l3.7,3.9l-7.9,3.8l11,0.5l-2.7,7.5l9.3-1.7l67.1,3.9L114,110l4.6,0.9
+	l-2.3-4.7l6-2.5l4.5,0.8l0.4-7.3l2.9,2l6-16.3c0,0-1.7-9.5-9.7-10.3l-3.2,1.9l2.2,3.2l-3.7,0.6l-1.9,3.2l0.5,2.3l-2.4,0.4l-2.7,3.2
+	l0.6,1.7l-2.2,1.5l0.4,1.9l-1.1,1.9l0.9,2.5c0,0-8,1.8-22.2,1.1c-14.1-0.6-24.2-3.4-24.2-3.4s-17.2-5.1-24.2-10.8L40.1,79.5
+	L40.1,79.5z"/>
+<path class="st0" d="M64.1,97.2c0,0,15.7,5.9,30,5.9c14.4,0,27.8-0.9,32.6,1.4l0.4-7.3c0,0-7.5-3.8-14.9-2.9l1.5,2.7
+	c0,0-10.4,1.1-15,1C94.1,97.8,64.1,97.2,64.1,97.2L64.1,97.2z"/>
+<path class="st0" d="M29.4,93.1l23.4,2.7l0.8-5.9l-9.9-5.6L40.5,80C40.5,80,30.6,91.7,29.4,93.1L29.4,93.1z"/>
+<path class="st2" d="M53.6,89.9c0,0-1.7,9.5-0.8,13.4c0,0,9-7.4,16.4-8L53.6,89.9L53.6,89.9z"/>
+<path class="st3" d="M45.9,110.5l68.8,3.6l-1.3-4.6l-39.2-3.6L45.9,110.5z"/>
+<path class="st4" d="M40.9,104.3l-2.7,7.5l35.9-5.9L40.9,104.3z"/>
+<path class="st5" d="M111.9,94.1l3.9-0.9l-2.2-3.2l-3.2,1.4L111.9,94.1z"/>
+<path class="st6" d="M113.6,84l1.3,3.7l3.2-1.1l-0.7-2.7l-4.4,0.2"/>
+<path class="st7" d="M113.6,84l1.3,3.7l3.2-1.1l-0.7-2.7l-4.4,0.2"/>
+<path class="st5" d="M116.6,78l2.5,3.5l4-0.9l-0.7-2.9L116.6,78z"/>
+<path class="st5" d="M120.5,72.3l1.5,2l5.5-0.3v-1.6l-1.3-1.2L120.5,72.3z"/>
+<path class="st4" d="M47.2,86.7l-2,3.7l7.4,2.6l1.2-3.3L47.2,86.7z"/>
+<path class="st4" d="M64.3,96.8l18.4,0.9l-13.7-2.6C69.1,95.1,64.9,95.2,64.3,96.8z"/>
+<path class="st8" d="M87.8,107.2v3.1l4.5,0.4l0.5-3.3L87.8,107.2z"/>
+<path class="st5" d="M104.7,108.4l0.3,3l4.9,0.2l-0.3-2.3L104.7,108.4z"/>
+<path class="st8" d="M77.3,112.2c0,0-3,9.3,7.4,9.5c10.3,0.2,6.5-8.8,6.5-8.8h-3.5c0,0,0,4.4-3.3,3.8c-3.3-0.6-4.3-2.7-3.1-4.2"/>
+<path class="st7" d="M77.3,112.2c0,0-3,9.3,7.4,9.5c10.3,0.2,6.5-8.8,6.5-8.8h-3.5c0,0,0,4.4-3.3,3.8c-3.3-0.6-4.3-2.7-3.1-4.2"/>
+<path class="st4" d="M78.3,132.5c-0.1-0.9-0.2-3.1-0.2-3.1l-6.9,5.7c0,0-1.8,5.7,2.7,6.3c4.5,0.6,4.5-3,4.5-3s1.3-4,5.5-4
+	c4.2,0,6.4,7.4,9.5,7.3c3.2-0.1,4.2-5.3,4-6.4c-0.2-1.1-6.3-5.8-6.3-5.8l-0.1,3.2C91.1,132.8,84.7,135.6,78.3,132.5L78.3,132.5z"/>
+<path class="st6" d="M55.2,71.9c0-0.1,0.1-0.1,0.1-0.2c0.2-0.5-0.2-0.9-0.6-1.1c-0.2-0.1-0.5-0.3-0.9-0.5c-0.3-0.2-0.7-0.3-1,0
+	c-0.2,0.2-0.3,0.5-0.3,0.7c0,0,0.1,0.4,0.1,0.3c0,0-0.9,0.3-1.2,0.9l-0.8-0.4c0,0-0.7-0.3-1,0.4c-0.4,0.7,0.3,1.1,0.3,1.1l0.8,0.4
+	c0,0-1,2.6,1.4,3.8c3.2,1.7,4.4-4.2,6.4-3.2c0.3,0.1,1.1,0.8,0.1,2.6c-1.2,2.2-2.4,0.2-3.2,1.6c-0.4,0.8,0.1,1.2,0.5,1.5l1.6,0.9
+	c0,0,0.6,0.3,1-0.4c0.4-0.7,0.1-1.1,0.1-1.1s0.8-0.2,1.1-0.9c0.3,0.2,0.6,0.3,0.9,0.5c0.6,0.3,1.4,0.9,1.9,0
+	c0.4-0.7-0.2-1.1-0.7-1.4c-0.4-0.2-0.9-0.5-1.3-0.7c0,0,0.3-1.2,0.3-1.2c0-0.9-0.2-1.8-0.9-2.4c-0.7-0.7-1.8-1.3-2.9-0.9
+	c-0.7,0.2-1.3,0.8-1.8,1.3c-0.5,0.5-0.9,1.1-1.4,1.7c-0.3,0.3-0.8,0.7-1.2,0.4c-1-0.5-0.5-1.7-0.2-2.4c0.3-0.7,0.8-1,1.5-1
+	C54.6,72.3,55,72.2,55.2,71.9L55.2,71.9z"/>
+<path class="st9" d="M83,63.5V25.2c0,0,0-0.1,0-0.1l2-6.1c0.1-0.3,0.6-0.3,0.7,0l2.4,5.7c0,0,0,0.1,0,0.1v39.8"/>
+<path class="st9" d="M78.4,67.4c1-2.2,1-4.7,0.2-7c1.7,0.7,3.1,1.7,4.4,3c0.9-0.9,1.6-1.7,2.4-2.6c1.1,1.5,2.1,3.1,3.2,4.6
+	c1-1.7,2.6-2.8,4.5-3.4c-0.3,1.1-0.7,2.2-0.7,3.4c0,1.2,0.4,2.4,1.4,3.1"/>
+<path class="st9" d="M79,63.8c-1.3,0.7-3,0.7-4.4,0.2"/>
+<path class="st9" d="M36.9,72.9l5.4,10.3c0,0,24.3,19.4,71.4,13.8c-1.3-2.1-3.6-5.9-3.6-5.9l5.9-1.4l-2.7-5.9l7.3-0.1l-3.9-5.9
+	l8.5-0.4l-5-5.3l8-1.3l-6.2-5.3l4.6-4.4c0,0-19.8-2.1-38-7.1"/>
+<path class="st9" d="M83,53.5c-5.7-1.4-15.2-6.6-19.8-10.4l0.8,5.8l-6.5-1.1l1.7,4.8h-7.8l1.3,5.5l-7.4,1l2.8,5.7l-6.4-0.8l0.6,6.2
+	l-5.2,2.5c3.1,0.3,6.3,0.6,9.5,0.7c-1.3,3.3-2.4,6.7-3.3,10.1"/>
+<path class="st9" d="M63.7,96.7c13.9,1.1,28.7,1.9,37.3,1.3"/>
+<path class="st9" d="M40.3,79.5c0,0-7.4,10.9-11.7,13.8c0,0,10.6,1.3,24.1,2.5"/>
+<path class="st9" d="M126.2,71.3c0,0,9.5,4.9,9.7,11.5l-6,16.3c0,0-8.5-6-17.7-5.2"/>
+<path class="st9" d="M39.2,94.4l-5.3,1.7l4.4,4.2l-8.5,3.2c0,0,76.2,2.9,89.1,7.4l-2.8-5.1l6-2.2"/>
+<path class="st9" d="M63.1,97c28.9,11,49,2.8,63.8,7.4v-6.9"/>
+<path class="st9" d="M41.2,104.1l-3.2,7.4c0,0,34.2-4.8,38.3-5.6"/>
+<path class="st9" d="M45,110.4l69.5,3.9l-0.8-4.6"/>
+<path class="st9" d="M73,112.1c0,0-6,13.5,11.2,13.5c17.2,0,10.3-12,10.3-12"/>
+<path class="st9" d="M78.2,125v7.4c0,0,6.9,3.2,12.9,0V125"/>
+<path class="st4" d="M84.6,143.4c1.6,0,2.9-1.3,2.9-2.9c0-1.6-1.3-2.9-2.9-2.9c-1.6,0-2.9,1.3-2.9,2.9
+	C81.6,142.1,82.9,143.4,84.6,143.4z"/>
+<path class="st9" d="M71.2,135.5c-0.9,1.8-0.6,4.2,0.9,5.5c1.5,1.3,4.2,1.1,5.3-0.6c0.5-0.8,0.7-1.7,1.1-2.6
+	c0.8-1.6,2.3-2.8,4.1-3.2c1.8-0.3,3.7,0.3,5,1.5c1.5,1.4,2.1,3.6,3.7,4.9c0.6,0.4,1.3,0.8,2,0.8c0.7,0,1.3-0.3,1.8-0.7
+	c1.7-1.3,2.6-3.5,2-5.6l-5.9-5.9l9.5,8.7c2,1.8,1.4,5.1-1.1,6.1c-2.9,1.2-7.6,2.4-15,2.4c-7.8,0-12.6-1.4-15.5-2.9
+	c-2.3-1.2-2.7-4.3-0.8-6l9.7-8.9"/>
+<path class="st9" d="M77.3,112.4c0,0-3.2,9.2,7.1,9.2c10.3,0,6.9-8.4,6.9-8.4"/>
+<path class="st9" d="M81.2,112.7c-0.5,0.7-0.4,1.7,0,2.5s1.3,1.2,2.1,1.4c1.1,0.3,2.3,0.2,3.2-0.4s1.4-1.9,1-2.9"/>
+<path class="st9" d="M97.7,90.6c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5
+	c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2
+	c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2"/>
+<path class="st9" d="M92,88.9c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5
+	c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2
+	c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2"/>
+<path class="st9" d="M86.8,86.6c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5
+	c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5s1.6-0.3,2.1-1.2s-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2
+	c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2c0.6-0.9-0.4-1.5,0.2-2.5c0.6-0.9,1.6-0.3,2.1-1.2"/>
+<path class="st9" d="M62.9,67.8c0.4-0.6,1.3,0,1.7-0.6c0.4-0.6-0.6-1.2-0.2-1.8c0.4-0.6,1.3,0,1.7-0.6c0.4-0.6-0.6-1.2-0.2-1.8
+	c0.4-0.6,1.3,0,1.7-0.6c0.4-0.6-0.6-1.2-0.2-1.8c0.4-0.6,1.3,0,1.7-0.6c0.4-0.6-0.6-1.2-0.2-1.8c0.4-0.6,1.3,0,1.7-0.6
+	c0.4-0.6-0.6-1.2-0.2-1.8c0.4-0.6,1.3,0,1.7-0.6c0.4-0.6-0.6-1.2-0.2-1.8c0.4-0.6,1.3,0,1.7-0.6"/>
+<path class="st6" d="M68.3,82l9.4,2.9l6.9-11.2l-8.8-2.9L68.3,82z"/>
+<path class="st9" d="M40.1,89.9c0.1-0.4,3.9-5.2,3.9-5.2"/>
+<path class="st9" d="M47.5,86.6l-2.2,3.8l7.5,2.3l0.8-2.8c0,0-1.8,9.4-0.7,14.2c0,0,9.5-9.2,16.6-8.9"/>
+<path class="st6" d="M127.3,78.3c0,0,3.7,1,5.6,2.5l-5.1,13.4c-1.9-1.5-5.6-2.5-5.6-2.5L127.3,78.3z"/>
+<path class="st9" d="M114.3,93.7l1.6-0.6l-2-2.7"/>
+<path class="st9" d="M115.3,87.7l3-0.8l-0.6-3"/>
+<path class="st9" d="M119.3,81.5l4.1-1l-1-2.7"/>
+<path class="st9" d="M122.5,74.4l5.3-0.1l-0.5-2.5"/>
+<path class="st9" d="M43.3,100.1l2-4.8"/>
+<path class="st9" d="M45.9,100.5l2-4.8"/>
+<path class="st9" d="M47.9,107.9l1.4-3.4"/>
+<path class="st9" d="M78.8,110.3l0.3-3.6"/>
+<path class="st9" d="M82.1,110.4l0.3-3.6"/>
+<path class="st9" d="M92.7,107.5l-0.3,3.2l-4.7-0.4l0.1-3.3"/>
+<path class="st9" d="M109.6,109.4l0.3,2.4l-4.8-0.4l-0.4-2.7"/>
+<path class="st9" d="M97.5,110.5v-2.4"/>
+<path class="st9" d="M100.9,110.9v-2.4"/>
+<path class="st9" d="M89.1,100.2v-2.2"/>
+<path class="st9" d="M92.8,100.6v-2.2"/>
+</svg>
diff --git a/assets/images/shutter.svg b/assets/images/shutter.svg
new file mode 100644
index 000000000000..e4dadcea8089
--- /dev/null
+++ b/assets/images/shutter.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#03D47C;}
+	.st1{fill:#8B9C8F;}
+</style>
+<g>
+	<circle class="st0" cx="45" cy="45" r="36"/>
+</g>
+<g>
+	<g>
+		<path class="st1" d="M45,90C20.2,90,0,69.8,0,45C0,20.2,20.2,0,45,0c24.8,0,45,20.2,45,45C90,69.8,69.8,90,45,90z M45,4
+			C22.4,4,4,22.4,4,45s18.4,41,41,41s41-18.4,41-41S67.6,4,45,4z"/>
+	</g>
+</g>
+</svg>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 72213bc9432a..fd408081faf5 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -563,6 +563,8 @@ PODS:
     - React-Core
   - react-native-netinfo (9.3.10):
     - React-Core
+  - react-native-pager-view (6.2.0):
+    - React-Core
   - react-native-pdf (6.6.2):
     - React-Core
   - react-native-performance (4.0.0):
@@ -780,6 +782,10 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - SocketRocket (0.6.1)
+  - VisionCamera (2.15.4):
+    - React
+    - React-callinvoker
+    - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -846,6 +852,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-key-command (from `../node_modules/react-native-key-command`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
   - react-native-performance (from `../node_modules/react-native-performance`)
   - react-native-plaid-link-sdk (from `../node_modules/react-native-plaid-link-sdk`)
@@ -890,6 +897,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
+  - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1007,6 +1015,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-key-command"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
   react-native-pdf:
     :path: "../node_modules/react-native-pdf"
   react-native-performance:
@@ -1095,6 +1105,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  VisionCamera:
+    :path: "../node_modules/react-native-vision-camera"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1168,6 +1180,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
   react-native-key-command: c2645ec01eb1fa664606c09480c05cb4220ef67b
   react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
+  react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-pdf: 33c622cbdf776a649929e8b9d1ce2d313347c4fa
   react-native-performance: 224bd53e6a835fda4353302cf891d088a0af7406
   react-native-plaid-link-sdk: 9eb0f71dad94b3bdde649c7a384cba93024af46c
@@ -1215,9 +1228,10 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
+  VisionCamera: d3ec8883417a6a4a0e3a6ba37d81d22db7611601
   Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: bc8161c6bfffeec6e6eaf84be18de5041ddcacf6
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.11.3
diff --git a/package-lock.json b/package-lock.json
index 140155aff25e..6cdec260411e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "@react-native-firebase/crashlytics": "^12.3.0",
         "@react-native-firebase/perf": "^12.3.0",
         "@react-native-picker/picker": "^2.4.3",
+        "@react-navigation/material-top-tabs": "^6.6.3",
         "@react-navigation/native": "6.1.6",
         "@react-navigation/stack": "6.3.16",
         "@react-ng/bounds-observer": "^0.2.1",
@@ -79,6 +80,7 @@
         "react-native-localize": "^2.2.6",
         "react-native-modal": "^13.0.0",
         "react-native-onyx": "1.0.52",
+        "react-native-pager-view": "^6.2.0",
         "react-native-pdf": "^6.6.2",
         "react-native-performance": "^4.0.0",
         "react-native-permissions": "^3.0.1",
@@ -91,7 +93,9 @@
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "3.21.0",
         "react-native-svg": "^13.9.0",
+        "react-native-tab-view": "^3.5.2",
         "react-native-view-shot": "^3.6.0",
+        "react-native-vision-camera": "^2.15.4",
         "react-native-web-lottie": "^1.4.4",
         "react-native-webview": "^11.17.2",
         "react-pdf": "^6.2.2",
@@ -8703,6 +8707,22 @@
         "react": "*"
       }
     },
+    "node_modules/@react-navigation/material-top-tabs": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.6.3.tgz",
+      "integrity": "sha512-7rbBUUvVSKD8jV/a7iV2BTSQ83G7W8grGSwBNojdeXdeZpsUa+wmmKnPtBFhdPv7DDQp7nzAYRx6RCOPtjZSCw==",
+      "dependencies": {
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-pager-view": ">= 4.0.0",
+        "react-native-tab-view": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/native": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
@@ -38093,6 +38113,15 @@
         }
       }
     },
+    "node_modules/react-native-pager-view": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz",
+      "integrity": "sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-pdf": {
       "version": "6.6.2",
       "license": "MIT",
@@ -38285,6 +38314,19 @@
         "react-native-svg": ">=12.0.0"
       }
     },
+    "node_modules/react-native-tab-view": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz",
+      "integrity": "sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw==",
+      "dependencies": {
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-pager-view": "*"
+      }
+    },
     "node_modules/react-native-view-shot": {
       "version": "3.6.0",
       "license": "MIT",
@@ -38293,6 +38335,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-vision-camera": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.15.4.tgz",
+      "integrity": "sha512-SJXSWH1pu4V3Kj4UuX/vSgOxc9d5wb5+nHqBHd+5iUtVyVLEp0F6Jbbaha7tDoU+kUBwonhlwr2o8oV6NZ7Ibg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.18.12",
       "license": "MIT",
@@ -51134,6 +51185,15 @@
         "stacktrace-parser": "^0.1.10"
       }
     },
+    "@react-navigation/material-top-tabs": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.6.3.tgz",
+      "integrity": "sha512-7rbBUUvVSKD8jV/a7iV2BTSQ83G7W8grGSwBNojdeXdeZpsUa+wmmKnPtBFhdPv7DDQp7nzAYRx6RCOPtjZSCw==",
+      "requires": {
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      }
+    },
     "@react-navigation/native": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
@@ -70948,6 +71008,12 @@
         "underscore": "^1.13.1"
       }
     },
+    "react-native-pager-view": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz",
+      "integrity": "sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g==",
+      "requires": {}
+    },
     "react-native-pdf": {
       "version": "6.6.2",
       "requires": {
@@ -71068,10 +71134,24 @@
         "path-dirname": "^1.0.2"
       }
     },
+    "react-native-tab-view": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz",
+      "integrity": "sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw==",
+      "requires": {
+        "use-latest-callback": "^0.1.5"
+      }
+    },
     "react-native-view-shot": {
       "version": "3.6.0",
       "requires": {}
     },
+    "react-native-vision-camera": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.15.4.tgz",
+      "integrity": "sha512-SJXSWH1pu4V3Kj4UuX/vSgOxc9d5wb5+nHqBHd+5iUtVyVLEp0F6Jbbaha7tDoU+kUBwonhlwr2o8oV6NZ7Ibg==",
+      "requires": {}
+    },
     "react-native-web": {
       "version": "0.18.12",
       "peer": true,
diff --git a/package.json b/package.json
index 478217483dab..f10551edfb86 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@react-native-firebase/crashlytics": "^12.3.0",
     "@react-native-firebase/perf": "^12.3.0",
     "@react-native-picker/picker": "^2.4.3",
+    "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "6.1.6",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
@@ -118,6 +119,7 @@
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
     "react-native-onyx": "1.0.52",
+    "react-native-pager-view": "^6.2.0",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",
     "react-native-permissions": "^3.0.1",
@@ -130,7 +132,9 @@
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.21.0",
     "react-native-svg": "^13.9.0",
+    "react-native-tab-view": "^3.5.2",
     "react-native-view-shot": "^3.6.0",
+    "react-native-vision-camera": "^2.15.4",
     "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
     "react-pdf": "^6.2.2",
diff --git a/patches/react-native-vision-camera+2.15.4.patch b/patches/react-native-vision-camera+2.15.4.patch
new file mode 100644
index 000000000000..0c80d6a8ce55
--- /dev/null
+++ b/patches/react-native-vision-camera+2.15.4.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm
+index 3841b20..687ea94 100644
+--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm
++++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm
+@@ -19,6 +19,8 @@
+ #import <React/RCTUIManager.h>
+ #import <ReactCommon/RCTTurboModuleManager.h>
+
++#define VISION_CAMERA_DISABLE_FRAME_PROCESSORS 1
++
+ #ifndef VISION_CAMERA_DISABLE_FRAME_PROCESSORS
+   #if __has_include(<RNReanimated/NativeReanimatedModule.h>)
+     #if __has_include(<RNReanimated/RuntimeManager.h>)
diff --git a/src/CONST.js b/src/CONST.js
index 06bc1873431f..4f304f08e320 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -479,6 +479,13 @@ const CONST = {
         REPORT: 'report',
         PERSONAL_DETAIL: 'personalDetail',
     },
+    RECEIPT: {
+        ICON_SIZE: 164,
+        PERMISSION_AUTHORIZED: 'authorized',
+        HAND_ICON_HEIGHT: 152,
+        HAND_ICON_WIDTH: 200,
+        SHUTTER_SIZE: 90,
+    },
     REPORT: {
         MAXIMUM_PARTICIPANTS: 8,
         SPLIT_REPORTID: '-2',
@@ -1054,6 +1061,12 @@ const CONST = {
             DELETE: 'delete',
         },
         AMOUNT_MAX_LENGTH: 10,
+        FILE_TYPES: {
+            HTML: 'html',
+            DOC: 'doc',
+            DOCX: 'docx',
+            SVG: 'svg',
+        },
     },
 
     GROWL: {
@@ -1106,6 +1119,10 @@ const CONST = {
     ICON_TYPE_AVATAR: 'avatar',
     ICON_TYPE_WORKSPACE: 'workspace',
 
+    ACTIVITY_INDICATOR_SIZE: {
+        LARGE: 'large',
+    },
+
     AVATAR_SIZE: {
         LARGE: 'large',
         MEDIUM: 'medium',
@@ -2542,6 +2559,11 @@ const CONST = {
     TRANSLATION_KEYS: {
         ATTACHMENT: 'common.attachment',
     },
+    TAB: {
+        RECEIPT_TAB_ID: 'ReceiptTab',
+        MANUAL: 'manual',
+        SCAN: 'scan',
+    },
 };
 
 export default CONST;
diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 276e128603d5..0d27ba64dedf 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -238,4 +238,10 @@ export default {
 
     // Experimental memory only Onyx mode flag
     IS_USING_MEMORY_ONLY_KEYS: 'isUsingMemoryOnlyKeys',
+
+    // Manual request tab selector
+    SELECTED_TAB: 'selectedTab',
+
+    // Receipt upload modal
+    RECEIPT_MODAL: 'receiptModal',
 };
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 92d11f440584..a6e21baddf59 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -85,6 +85,8 @@ export default {
     MONEY_REQUEST_CONFIRMATION: ':iouType/new/confirmation/:reportID?',
     MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?',
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
+    MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
+    MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
     IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
     IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,
     IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`,
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bb648c155840..2570de52cb30 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -136,6 +136,7 @@ function AttachmentModal(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [props.translate],
     );
+
     /**
      * Download the currently viewed attachment.
      */
@@ -176,6 +177,7 @@ function AttachmentModal(props) {
     const closeConfirmModal = useCallback(() => {
         setIsAttachmentInvalid(false);
     }, []);
+
     /**
      * @param {Object} _file
      * @returns {Boolean}
@@ -211,6 +213,7 @@ function AttachmentModal(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [props.translate],
     );
+
     /**
      * @param {Object} _file
      */
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 5bcc643c54e7..e0a590940cbc 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -2,13 +2,12 @@ import React, {useState, useCallback, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import Str from 'expensify-common/lib/str';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import OptionsSelector from './OptionsSelector';
 import ONYXKEYS from '../ONYXKEYS';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
 import CONST from '../CONST';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
@@ -21,6 +20,13 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
+import Image from './Image';
+import ReceiptHTML from '../../assets/images/receipt-html.png';
+import ReceiptDoc from '../../assets/images/receipt-doc.png';
+import ReceiptGeneric from '../../assets/images/receipt-generic.png';
+import ReceiptSVG from '../../assets/images/receipt-svg.png';
+import * as FileUtils from '../libs/fileDownload/FileUtils';
+import useLocalize from '../hooks/useLocalize';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -62,14 +68,8 @@ const propTypes = {
     /** Depending on expense report or personal IOU report, respective bank account route */
     bankAccountRoute: PropTypes.string,
 
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-
     ...withCurrentUserPersonalDetailsPropTypes,
 
-    /* Onyx Props */
-
     /** Current user session */
     session: PropTypes.shape({
         email: PropTypes.string.isRequired,
@@ -80,6 +80,12 @@ const propTypes = {
 
     /** The reportID of the request */
     reportID: PropTypes.string,
+
+    /** File path of the receipt */
+    receiptPath: PropTypes.string,
+
+    /** File source of the receipt */
+    receiptSource: PropTypes.string,
 };
 
 const defaultProps = {
@@ -97,12 +103,15 @@ const defaultProps = {
     policyID: '',
     reportID: '',
     ...withCurrentUserPersonalDetailsDefaultProps,
+    receiptPath: '',
+    receiptSource: '',
 };
 
 function MoneyRequestConfirmationList(props) {
     // Destructure functions from props to pass it as a dependecy to useCallback/useMemo hooks.
     // Prop functions pass props itself as a "this" value to the function which means they change every time props change.
-    const {translate, onSendMoney, onConfirm, onSelectParticipant} = props;
+    const {onSendMoney, onConfirm, onSelectParticipant} = props;
+    const {translate} = useLocalize();
 
     /**
      * Returns the participants with amount
@@ -120,16 +129,20 @@ function MoneyRequestConfirmationList(props) {
     const [didConfirm, setDidConfirm] = useState(false);
 
     const splitOrRequestOptions = useMemo(() => {
-        const text = translate(props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount', {
-            amount: CurrencyUtils.convertToDisplayString(props.iouAmount, props.iouCurrencyCode),
-        });
+        let text;
+        if (props.receiptPath) {
+            text = translate('iou.request');
+        } else {
+            const translationKey = props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount';
+            text = translate(translationKey, {amount: CurrencyUtils.convertToDisplayString(props.iouAmount, props.iouCurrencyCode)});
+        }
         return [
             {
                 text: text[0].toUpperCase() + text.slice(1),
                 value: props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
             },
         ];
-    }, [props.hasMultipleParticipants, props.iouAmount, props.iouCurrencyCode, translate]);
+    }, [props.hasMultipleParticipants, props.iouAmount, props.receiptPath, props.iouCurrencyCode, translate]);
 
     const selectedParticipants = useMemo(() => _.filter(props.selectedParticipants, (participant) => participant.selected), [props.selectedParticipants]);
     const payeePersonalDetails = useMemo(() => props.payeePersonalDetails || props.currentUserPersonalDetails, [props.payeePersonalDetails, props.currentUserPersonalDetails]);
@@ -287,6 +300,36 @@ function MoneyRequestConfirmationList(props) {
         );
     }, [confirm, props.selectedParticipants, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]);
 
+    /**
+     * Grab the appropriate image URI based on file type
+     *
+     * @param {String} receiptPath
+     * @param {String} receiptSource
+     * @returns {*}
+     */
+    const getImageURI = (receiptPath, receiptSource) => {
+        const {fileExtension} = FileUtils.splitExtensionFromFileName(receiptSource);
+        const isReceiptImage = Str.isImage(props.receiptSource);
+
+        if (isReceiptImage) {
+            return receiptPath;
+        }
+
+        if (fileExtension === CONST.IOU.FILE_TYPES.HTML) {
+            return ReceiptHTML;
+        }
+
+        if (fileExtension === CONST.IOU.FILE_TYPES.DOC || fileExtension === CONST.IOU.FILE_TYPES.DOCX) {
+            return ReceiptDoc;
+        }
+
+        if (fileExtension === CONST.IOU.FILE_TYPES.SVG) {
+            return ReceiptSVG;
+        }
+
+        return ReceiptGeneric;
+    };
+
     return (
         <OptionsSelector
             sections={optionSelectorSections}
@@ -304,15 +347,22 @@ function MoneyRequestConfirmationList(props) {
             optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
             footerContent={footerContent}
         >
-            <MenuItemWithTopDescription
-                shouldShowRightIcon={!props.isReadOnly}
-                title={formattedAmount}
-                description={translate('iou.amount')}
-                onPress={() => Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
-                style={[styles.moneyRequestMenuItem, styles.mt2]}
-                titleStyle={styles.moneyRequestConfirmationAmount}
-                disabled={didConfirm || props.isReadOnly}
-            />
+            {!_.isEmpty(props.receiptPath) ? (
+                <Image
+                    style={styles.moneyRequestImage}
+                    source={{uri: getImageURI(props.receiptPath, props.receiptSource)}}
+                />
+            ) : (
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon={!props.isReadOnly}
+                    title={formattedAmount}
+                    description={translate('iou.amount')}
+                    onPress={() => Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
+                    style={[styles.moneyRequestMenuItem, styles.mt2]}
+                    titleStyle={styles.moneyRequestConfirmationAmount}
+                    disabled={didConfirm || props.isReadOnly}
+                />
+            )}
             <MenuItemWithTopDescription
                 shouldShowRightIcon={!props.isReadOnly}
                 title={props.iouComment}
@@ -329,8 +379,6 @@ MoneyRequestConfirmationList.propTypes = propTypes;
 MoneyRequestConfirmationList.defaultProps = defaultProps;
 
 export default compose(
-    withLocalize,
-    withWindowDimensions,
     withCurrentUserPersonalDetails,
     withOnyx({
         session: {
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
new file mode 100644
index 000000000000..7bb2f12d1181
--- /dev/null
+++ b/src/components/TabSelector/TabSelector.js
@@ -0,0 +1,72 @@
+import {View} from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import * as Expensicons from '../Icon/Expensicons';
+import TabSelectorItem from './TabSelectorItem';
+import CONST from '../../CONST';
+import useLocalize from '../../hooks/useLocalize';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    /* Navigation state provided by React Navigation */
+    // eslint-disable-next-line react/forbid-prop-types
+    state: PropTypes.object.isRequired,
+
+    /* Navigation functions provided by React Navigation */
+    navigation: PropTypes.shape({
+        navigate: PropTypes.func.isRequired,
+        emit: PropTypes.func.isRequired,
+    }).isRequired,
+
+    /* Callback fired when tab is pressed */
+    onTabPress: PropTypes.func,
+};
+
+const defaultProps = {
+    onTabPress: () => {},
+};
+
+const getIcon = (route) => (route === CONST.TAB.MANUAL ? Expensicons.Pencil : Expensicons.Receipt);
+
+function TabSelector({state, navigation, onTabPress}) {
+    const {translate} = useLocalize();
+    return (
+        <View style={styles.tabSelector}>
+            {_.map(state.routes, (route, index) => {
+                const isFocused = state.index === index;
+
+                const onPress = () => {
+                    const event = navigation.emit({
+                        type: 'tabPress',
+                        target: route.key,
+                        canPreventDefault: true,
+                    });
+
+                    if (!isFocused && !event.defaultPrevented) {
+                        // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                        navigation.navigate({name: route.name, merge: true});
+                    }
+
+                    onTabPress(route.name);
+                };
+
+                return (
+                    <TabSelectorItem
+                        isSelected={isFocused}
+                        key={route.name}
+                        title={translate(`tabSelector.${route.name}`)}
+                        icon={getIcon(route.name)}
+                        onPress={onPress}
+                    />
+                );
+            })}
+        </View>
+    );
+}
+
+TabSelector.propTypes = propTypes;
+TabSelector.defaultProps = defaultProps;
+TabSelector.displayName = 'TabSelector';
+
+export default TabSelector;
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
new file mode 100644
index 000000000000..cea59bc2ee65
--- /dev/null
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -0,0 +1,51 @@
+import {Text} from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import themeColors from '../../styles/themes/default';
+import styles from '../../styles/styles';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+
+const propTypes = {
+    /** Function to call when onPress */
+    onPress: PropTypes.func,
+
+    /** Icon to display on tab */
+    icon: PropTypes.func,
+
+    /** True if tab is the selected item */
+    isSelected: PropTypes.bool,
+
+    /** Title of the tab */
+    title: PropTypes.string,
+};
+
+const defaultProps = {
+    onPress: () => {},
+    icon: () => {},
+    isSelected: false,
+    title: '',
+};
+
+function TabSelectorItem(props) {
+    return (
+        <PressableWithFeedback
+            accessibilityLabel={props.title}
+            style={[styles.tabSelectorButton(props.isSelected)]}
+            wrapperStyle={[styles.flex1]}
+            onPress={props.onPress}
+        >
+            <Icon
+                src={props.icon}
+                fill={props.isSelected ? themeColors.iconMenu : themeColors.icon}
+            />
+            <Text style={styles.tabText(props.isSelected)}>{props.title}</Text>
+        </PressableWithFeedback>
+    );
+}
+
+TabSelectorItem.propTypes = propTypes;
+TabSelectorItem.defaultProps = defaultProps;
+TabSelectorItem.displayName = 'TabSelectorItem';
+
+export default TabSelectorItem;
diff --git a/src/components/participantPropTypes.js b/src/components/participantPropTypes.js
index a54d82eeb0ed..75f575b1c3dd 100644
--- a/src/components/participantPropTypes.js
+++ b/src/components/participantPropTypes.js
@@ -15,4 +15,13 @@ export default PropTypes.shape({
 
     /** First Name of the participant */
     firstName: PropTypes.string,
+
+    /** True if the report is a Policy Expense chat */
+    isPolicyExpenseChat: PropTypes.bool,
+
+    /** True if the policy expense chat is owned by this user */
+    isOwnPolicyExpenseChat: PropTypes.bool,
+
+    /** Whether the participant is selected */
+    selected: PropTypes.bool,
 });
diff --git a/src/hooks/useDragAndDrop.js b/src/hooks/useDragAndDrop.js
index 98df70085a72..bc8ab517731b 100644
--- a/src/hooks/useDragAndDrop.js
+++ b/src/hooks/useDragAndDrop.js
@@ -58,6 +58,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
             }
 
             event.preventDefault();
+            event.stopPropagation();
 
             switch (event.type) {
                 case DRAG_OVER_EVENT:
diff --git a/src/languages/en.js b/src/languages/en.js
index ba4aca6b4a2a..563e1f9de0c0 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -343,10 +343,32 @@ export default {
         listOfChatMessages: 'List of chat messages',
         listOfChats: 'List of chats',
     },
+    tabSelector: {
+        manual: 'Manual',
+        scan: 'Scan',
+    },
+    receipt: {
+        upload: 'Upload receipt',
+        dragReceiptBeforeEmail: 'Drag a receipt onto this page, forward a receipt to ',
+        dragReceiptAfterEmail: ' or choose a file to upload below.',
+        chooseReceipt: 'Choose a receipt to upload or forward a receipt to ',
+        chooseFile: 'Choose File',
+        givePermission: 'Give permission',
+        takePhoto: 'Take a photo',
+        cameraAccess: 'Camera access is required to take pictures of receipts.',
+        cameraErrorTitle: 'Camera Error',
+        cameraErrorMessage: 'An error occurred while taking a photo, please try again',
+        dropTitle: 'Let it go',
+        dropMessage: 'Drop your file here',
+        flash: 'flash',
+        shutter: 'shutter',
+        gallery: 'gallery',
+    },
     iou: {
         amount: 'Amount',
         cash: 'Cash',
         split: 'Split',
+        request: 'Request',
         participants: 'Participants',
         splitBill: 'Split bill',
         requestMoney: 'Request money',
diff --git a/src/languages/es.js b/src/languages/es.js
index a3c983ac6c10..91076346a5e7 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -342,10 +342,32 @@ export default {
         listOfChatMessages: 'Lista de mensajes del chat',
         listOfChats: 'lista de chats',
     },
+    tabSelector: {
+        manual: 'Manual',
+        scan: 'Escanear',
+    },
+    receipt: {
+        upload: 'Subir recibo',
+        dragReceiptBeforeEmail: 'Arrastra un recibo a esta página, reenvíalo a ',
+        dragReceiptAfterEmail: ' o elije un archivo para subir a continuación.',
+        chooseReceipt: 'Elige un recibo para subir o reenvía un recibo a ',
+        chooseFile: 'Elegir archivo',
+        givePermission: 'Permitir',
+        takePhoto: 'Haz una foto',
+        cameraAccess: 'Se requiere acceso a la cámara para hacer fotos de los recibos.',
+        cameraErrorTitle: 'Error en la cámara',
+        cameraErrorMessage: 'Se produjo un error al hacer una foto, Por favor, inténtalo de nuevo.',
+        dropTitle: 'Suéltalo',
+        dropMessage: 'Suelta tu archivo aquí',
+        flash: 'flash',
+        shutter: 'obturador',
+        gallery: 'galería',
+    },
     iou: {
         amount: 'Importe',
         cash: 'Efectivo',
         split: 'Dividir',
+        request: 'Solicitar',
         participants: 'Participantes',
         splitBill: 'Dividir factura',
         requestMoney: 'Pedir dinero',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index fcc4b3aaaa3e..31d2057ddd5a 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -36,14 +36,14 @@ function createModalStackNavigator(screens) {
 const MoneyRequestModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
-            const MoneyRequestAmountPage = require('../../../pages/iou/steps/MoneyRequestAmountPage').default;
-            return MoneyRequestAmountPage;
+            const MoneyRequestSelectorPage = require('../../../pages/iou/MoneyRequestSelectorPage').default;
+            return MoneyRequestSelectorPage;
         },
         name: 'Money_Request',
     },
     {
         getComponent: () => {
-            const MoneyRequestEditAmountPage = require('../../../pages/iou/steps/MoneyRequestAmountPage').default;
+            const MoneyRequestEditAmountPage = require('../../../pages/iou/steps/MoneyRequestAmount').default;
             return MoneyRequestEditAmountPage;
         },
         name: 'Money_Request_Amount',
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 7d6d4cb2709c..53e2120f4c21 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -6,7 +6,7 @@ import RHPScreenOptions from '../RHPScreenOptions';
 
 const Stack = createStackNavigator();
 
-function RigthModalNavigator() {
+function RightModalNavigator() {
     return (
         <Stack.Navigator screenOptions={RHPScreenOptions}>
             <Stack.Screen
@@ -97,4 +97,4 @@ function RigthModalNavigator() {
     );
 }
 
-export default RigthModalNavigator;
+export default RightModalNavigator;
diff --git a/src/libs/Navigation/OnyxTabNavigator.js b/src/libs/Navigation/OnyxTabNavigator.js
new file mode 100644
index 000000000000..d1717cc8a481
--- /dev/null
+++ b/src/libs/Navigation/OnyxTabNavigator.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import Tab from '../actions/Tab';
+import ONYXKEYS from '../../ONYXKEYS';
+
+const propTypes = {
+    /* ID of the tab component to be saved in onyx */
+    id: PropTypes.string.isRequired,
+
+    /* Name of the selected tab */
+    selectedTab: PropTypes.string,
+
+    /* Children nodes */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    selectedTab: '',
+};
+
+// eslint-disable-next-line rulesdir/no-inline-named-export
+export const TopTab = createMaterialTopTabNavigator();
+
+// This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
+// except ID is now required, and it gets a `selectedTab` from Onyx
+function OnyxTabNavigator({id, selectedTab, children, ...rest}) {
+    return (
+        <TopTab.Navigator
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...rest}
+            id={id}
+            initialRouteName={selectedTab}
+            backBehavior="initialRoute"
+            screenListeners={{
+                state: (event) => {
+                    const state = event.data.state;
+                    const index = state.index;
+                    const routeNames = state.routeNames;
+                    Tab.setSelectedTab(id, routeNames[index]);
+                },
+                ...(rest.screenListeners || {}),
+            }}
+        >
+            {children}
+        </TopTab.Navigator>
+    );
+}
+
+OnyxTabNavigator.defaultProps = defaultProps;
+OnyxTabNavigator.propTypes = propTypes;
+OnyxTabNavigator.displayName = 'OnyxTabNavigator';
+
+export default withOnyx({
+    selectedTab: {
+        key: ({id}) => `${ONYXKEYS.SELECTED_TAB}_${id}`,
+    },
+})(OnyxTabNavigator);
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 44e040ccb102..04a72b15dd18 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -290,7 +290,20 @@ export default {
                     },
                     MoneyRequest: {
                         screens: {
-                            Money_Request: ROUTES.MONEY_REQUEST,
+                            Money_Request: {
+                                path: ROUTES.MONEY_REQUEST,
+                                exact: true,
+                                screens: {
+                                    manual: {
+                                        path: ROUTES.MONEY_REQUEST_MANUAL_TAB,
+                                        exact: true,
+                                    },
+                                    scan: {
+                                        path: ROUTES.MONEY_REQUEST_SCAN_TAB,
+                                        exact: true,
+                                    },
+                                },
+                            },
                             Money_Request_Amount: ROUTES.MONEY_REQUEST_AMOUNT,
                             Money_Request_Participants: ROUTES.MONEY_REQUEST_PARTICIPANTS,
                             Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION,
diff --git a/src/libs/ReceiptUtils.js b/src/libs/ReceiptUtils.js
new file mode 100644
index 000000000000..b8ec54c0e899
--- /dev/null
+++ b/src/libs/ReceiptUtils.js
@@ -0,0 +1,28 @@
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import * as FileUtils from './fileDownload/FileUtils';
+import CONST from '../CONST';
+import Receipt from './actions/Receipt';
+import * as Localize from './Localize';
+
+const validateReceipt = (file) => {
+    const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
+    if (_.contains(CONST.API_ATTACHMENT_VALIDATIONS.UNALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {
+        Receipt.setUploadReceiptError(true, Localize.translateLocal('attachmentPicker.wrongFileType'), Localize.translateLocal('attachmentPicker.notAllowedExtension'));
+        return false;
+    }
+
+    if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+        Receipt.setUploadReceiptError(true, Localize.translateLocal('attachmentPicker.attachmentTooLarge'), Localize.translateLocal('attachmentPicker.sizeExceeded'));
+        return false;
+    }
+
+    if (lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+        Receipt.setUploadReceiptError(true, Localize.translateLocal('attachmentPicker.attachmentTooSmall'), Localize.translateLocal('attachmentPicker.sizeNotMet'));
+        return false;
+    }
+
+    return true;
+};
+
+export default {validateReceipt};
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 5660bc31a880..9cd28bccc6c7 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -68,6 +68,8 @@ function resetMoneyRequestInfo(id = '') {
         currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD),
         comment: '',
         participants: [],
+        receiptPath: '',
+        receiptSource: '',
     });
 }
 
@@ -1478,6 +1480,50 @@ function setMoneyRequestParticipants(participants) {
     Onyx.merge(ONYXKEYS.IOU, {participants});
 }
 
+/**
+ * @param {String} receiptPath
+ * @param {String} receiptSource
+ */
+function setMoneyRequestReceipt(receiptPath, receiptSource) {
+    Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptSource});
+}
+
+/**
+ * Navigates to the next IOU page based on where the IOU request was started
+ *
+ * @param {Object} iou
+ * @param {String} iouType
+ * @param {String} reportID
+ * @param {Object} report
+ */
+function navigateToNextPage(iou, iouType, reportID, report) {
+    const moneyRequestID = `${iouType}${reportID}`;
+    const shouldReset = iou.id !== moneyRequestID;
+    // If the money request ID in Onyx does not match the ID from params, we want to start a new request
+    // with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
+    if (shouldReset) {
+        resetMoneyRequestInfo(moneyRequestID);
+    }
+
+    // If a request is initiated on a report, skip the participants selection step and navigate to the confirmation page.
+    if (report.reportID) {
+        // Reinitialize the participants when the money request ID in Onyx does not match the ID from params
+        if (_.isEmpty(iou.participants) || shouldReset) {
+            const currentUserAccountID = currentUserPersonalDetails.accountID;
+            const participants = ReportUtils.isPolicyExpenseChat(report)
+                ? [{reportID: report.reportID, isPolicyExpenseChat: true, selected: true}]
+                : _.chain(report.participantAccountIDs)
+                      .filter((accountID) => currentUserAccountID !== accountID)
+                      .map((accountID) => ({accountID, selected: true}))
+                      .value();
+            setMoneyRequestParticipants(participants);
+        }
+        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
+        return;
+    }
+    Navigation.navigate(ROUTES.getMoneyRequestParticipantsRoute(iouType));
+}
+
 export {
     deleteMoneyRequest,
     splitBill,
@@ -1494,4 +1540,6 @@ export {
     setMoneyRequestCurrency,
     setMoneyRequestDescription,
     setMoneyRequestParticipants,
+    setMoneyRequestReceipt,
+    navigateToNextPage,
 };
diff --git a/src/libs/actions/Receipt.js b/src/libs/actions/Receipt.js
new file mode 100644
index 000000000000..fbe9c22faaa2
--- /dev/null
+++ b/src/libs/actions/Receipt.js
@@ -0,0 +1,33 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+/**
+ * Sets the upload receipt error modal content when an invalid receipt is uploaded
+ *
+ * @param {Boolean} isAttachmentInvalid
+ * @param {String} attachmentInvalidReasonTitle
+ * @param {String} attachmentInvalidReason
+ */
+function setUploadReceiptError(isAttachmentInvalid, attachmentInvalidReasonTitle, attachmentInvalidReason) {
+    Onyx.merge(ONYXKEYS.RECEIPT_MODAL, {
+        isAttachmentInvalid,
+        attachmentInvalidReasonTitle,
+        attachmentInvalidReason,
+    });
+}
+
+/**
+ * Clears the receipt error modal
+ */
+function clearUploadReceiptError() {
+    Onyx.merge(ONYXKEYS.RECEIPT_MODAL, {
+        isAttachmentInvalid: false,
+        attachmentInvalidReasonTitle: '',
+        attachmentInvalidReason: '',
+    });
+}
+
+export default {
+    setUploadReceiptError,
+    clearUploadReceiptError,
+};
diff --git a/src/libs/actions/Tab.js b/src/libs/actions/Tab.js
new file mode 100644
index 000000000000..0af197361b70
--- /dev/null
+++ b/src/libs/actions/Tab.js
@@ -0,0 +1,16 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+/**
+ * Sets the selected tab for a given tab ID
+ *
+ * @param {String} id
+ * @param {String} index
+ */
+function setSelectedTab(id, index) {
+    Onyx.merge(`${ONYXKEYS.SELECTED_TAB}_${id}`, index);
+}
+
+export default {
+    setSelectedTab,
+};
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 5857c1b0e2d9..07e4b295f85f 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -57,7 +57,7 @@ class MoneyRequestDescriptionPage extends Component {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(this.props.iou.participants) || this.props.iou.amount === 0 || shouldReset) {
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
         }
     }
@@ -65,7 +65,7 @@ class MoneyRequestDescriptionPage extends Component {
     // eslint-disable-next-line rulesdir/prefer-early-return
     componentDidUpdate(prevProps) {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (_.isEmpty(this.props.iou.participants) || this.props.iou.amount === 0 || prevProps.iou.id !== this.props.iou.id) {
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
             // The ID is cleared on completing a request. In that case, we will do nothing.
             if (this.props.iou.id) {
                 Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
new file mode 100644
index 000000000000..3d59721e404a
--- /dev/null
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -0,0 +1,129 @@
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import React from 'react';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import ONYXKEYS from '../../ONYXKEYS';
+import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import TabSelector from '../../components/TabSelector/TabSelector';
+import CONST from '../../CONST';
+import useLocalize from '../../hooks/useLocalize';
+import * as IOUUtils from '../../libs/IOUUtils';
+import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
+import MoneyRequestAmount from './steps/MoneyRequestAmount';
+import ReceiptSelector from './ReceiptSelector';
+import * as IOU from '../../libs/actions/IOU';
+import DragAndDropProvider from '../../components/DragAndDrop/Provider';
+import usePermissions from '../../hooks/usePermissions';
+import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
+import participantPropTypes from '../../components/participantPropTypes';
+
+const propTypes = {
+    /** React Navigation route */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            iouType: PropTypes.string,
+            reportID: PropTypes.string,
+        }),
+    }),
+
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        currency: PropTypes.string,
+        participants: PropTypes.arrayOf(participantPropTypes),
+    }),
+
+    /** Which tab has been selected */
+    selectedTab: PropTypes.string,
+};
+
+const defaultProps = {
+    route: {
+        params: {
+            iouType: '',
+            reportID: '',
+        },
+    },
+    iou: {
+        id: '',
+        amount: 0,
+        currency: CONST.CURRENCY.USD,
+        participants: [],
+    },
+    selectedTab: CONST.TAB.MANUAL,
+};
+
+function MoneyRequestSelectorPage(props) {
+    const iouType = lodashGet(props.route, 'params.iouType', '');
+    const reportID = lodashGet(props.route, 'params.reportID', '');
+    const {translate} = useLocalize();
+    const {canUseScanReceipts} = usePermissions();
+
+    const title = {
+        [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST]: translate('iou.requestMoney'),
+        [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'),
+        [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'),
+    };
+
+    const resetMoneyRequestInfo = () => {
+        const moneyRequestID = `${iouType}${reportID}`;
+        IOU.resetMoneyRequestInfo(moneyRequestID);
+    };
+
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({safeAreaPaddingBottomStyle}) => (
+                <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
+                    <DragAndDropProvider isDisabled={props.selectedTab === CONST.TAB.MANUAL}>
+                        <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
+                            <HeaderWithBackButton
+                                title={title[iouType]}
+                                onBackButtonPress={Navigation.dismissModal}
+                            />
+                            {canUseScanReceipts && iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? (
+                                <OnyxTabNavigator
+                                    id={CONST.TAB.RECEIPT_TAB_ID}
+                                    tabBar={({state, navigation}) => (
+                                        <TabSelector
+                                            state={state}
+                                            navigation={navigation}
+                                            onTabPress={resetMoneyRequestInfo}
+                                        />
+                                    )}
+                                >
+                                    <TopTab.Screen
+                                        name={CONST.TAB.MANUAL}
+                                        component={MoneyRequestAmount}
+                                        initialParams={{reportID, iouType}}
+                                    />
+                                    <TopTab.Screen
+                                        name={CONST.TAB.SCAN}
+                                        component={ReceiptSelector}
+                                        initialParams={{reportID, iouType}}
+                                    />
+                                </OnyxTabNavigator>
+                            ) : (
+                                <MoneyRequestAmount route={props.route} />
+                            )}
+                        </View>
+                    </DragAndDropProvider>
+                </FullPageNotFoundView>
+            )}
+        </ScreenWrapper>
+    );
+}
+
+MoneyRequestSelectorPage.propTypes = propTypes;
+MoneyRequestSelectorPage.defaultProps = defaultProps;
+MoneyRequestSelectorPage.displayName = 'MoneyRequestSelectorPage';
+
+export default withOnyx({
+    selectedTab: {
+        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+    },
+})(MoneyRequestSelectorPage);
diff --git a/src/pages/iou/ReceiptDropUI.js b/src/pages/iou/ReceiptDropUI.js
new file mode 100644
index 000000000000..e38e88b4490a
--- /dev/null
+++ b/src/pages/iou/ReceiptDropUI.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import PropTypes from 'prop-types';
+import CONST from '../../CONST';
+import styles from '../../styles/styles';
+import ReceiptUpload from '../../../assets/images/receipt-upload.svg';
+import useLocalize from '../../hooks/useLocalize';
+import DragAndDropConsumer from '../../components/DragAndDrop/Consumer';
+
+const propTypes = {
+    /** Callback to execute when a file is dropped. */
+    onDrop: PropTypes.func.isRequired,
+
+    /** Pixels the receipt image should be shifted down to match the non-drag view UI */
+    receiptImageTopPosition: PropTypes.number,
+};
+
+const defaultProps = {
+    receiptImageTopPosition: 0,
+};
+
+function ReceiptDropUI({onDrop, receiptImageTopPosition}) {
+    const {translate} = useLocalize();
+    return (
+        <DragAndDropConsumer onDrop={onDrop}>
+            <View style={[styles.receiptDropOverlay, styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                <View style={styles.receiptImageWrapper(receiptImageTopPosition)}>
+                    <ReceiptUpload
+                        width={CONST.RECEIPT.ICON_SIZE}
+                        height={CONST.RECEIPT.ICON_SIZE}
+                    />
+                    <Text style={[styles.textReceiptUpload]}>{translate('receipt.dropTitle')}</Text>
+                    <Text style={[styles.subTextReceiptUpload]}>{translate('receipt.dropMessage')}</Text>
+                </View>
+            </View>
+        </DragAndDropConsumer>
+    );
+}
+
+ReceiptDropUI.displayName = 'ReceiptDropUI';
+ReceiptDropUI.propTypes = propTypes;
+ReceiptDropUI.defaultProps = defaultProps;
+
+export default ReceiptDropUI;
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
new file mode 100644
index 000000000000..c674878c2c73
--- /dev/null
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -0,0 +1,184 @@
+import {View, Text, PixelRatio} from 'react-native';
+import React, {useContext, useState} from 'react';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import * as IOU from '../../../libs/actions/IOU';
+import reportPropTypes from '../../reportPropTypes';
+import CONST from '../../../CONST';
+import ReceiptUpload from '../../../../assets/images/receipt-upload.svg';
+import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
+import Button from '../../../components/Button';
+import styles from '../../../styles/styles';
+import CopyTextToClipboard from '../../../components/CopyTextToClipboard';
+import ReceiptDropUI from '../ReceiptDropUI';
+import AttachmentPicker from '../../../components/AttachmentPicker';
+import ConfirmModal from '../../../components/ConfirmModal';
+import ONYXKEYS from '../../../ONYXKEYS';
+import Receipt from '../../../libs/actions/Receipt';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import useLocalize from '../../../hooks/useLocalize';
+import {DragAndDropContext} from '../../../components/DragAndDrop/Provider';
+import ReceiptUtils from '../../../libs/ReceiptUtils';
+
+const propTypes = {
+    /** Information shown to the user when a receipt is not valid */
+    receiptModal: PropTypes.shape({
+        isAttachmentInvalid: PropTypes.bool,
+        attachmentInvalidReasonTitle: PropTypes.string,
+        attachmentInvalidReason: PropTypes.string,
+    }),
+
+    /** The report on which the request is initiated on */
+    report: reportPropTypes,
+
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            iouType: PropTypes.string,
+            reportID: PropTypes.string,
+        }),
+    }),
+
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        currency: PropTypes.string,
+        participants: PropTypes.arrayOf(
+            PropTypes.shape({
+                accountID: PropTypes.number,
+                login: PropTypes.string,
+                isPolicyExpenseChat: PropTypes.bool,
+                isOwnPolicyExpenseChat: PropTypes.bool,
+                selected: PropTypes.bool,
+            }),
+        ),
+    }),
+};
+
+const defaultProps = {
+    receiptModal: {
+        isAttachmentInvalid: false,
+        attachmentInvalidReasonTitle: '',
+        attachmentInvalidReason: '',
+    },
+    report: {},
+    route: {
+        params: {
+            iouType: '',
+            reportID: '',
+        },
+    },
+    iou: {
+        id: '',
+        amount: 0,
+        currency: CONST.CURRENCY.USD,
+        participants: [],
+    },
+};
+
+function ReceiptSelector(props) {
+    const reportID = lodashGet(props.route, 'params.reportID', '');
+    const iouType = lodashGet(props.route, 'params.iouType', '');
+    const isAttachmentInvalid = lodashGet(props.receiptModal, 'isAttachmentInvalid', false);
+    const attachmentInvalidReasonTitle = lodashGet(props.receiptModal, 'attachmentInvalidReasonTitle', '');
+    const attachmentInvalidReason = lodashGet(props.receiptModal, 'attachmentInvalidReason', '');
+    const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
+    const {isDraggingOver} = useContext(DragAndDropContext);
+
+    /**
+     * Sets the Receipt objects and navigates the user to the next page
+     * @param {Object} file
+     * @param {Object} iou
+     * @param {Object} report
+     */
+    const setReceiptAndNavigate = (file, iou, report) => {
+        if (!ReceiptUtils.validateReceipt(file)) {
+            return;
+        }
+
+        const filePath = URL.createObjectURL(file);
+        IOU.setMoneyRequestReceipt(filePath, file.name);
+        IOU.navigateToNextPage(iou, iouType, reportID, report);
+    };
+
+    return (
+        <View style={[styles.uploadReceiptView(isSmallScreenWidth)]}>
+            {!isDraggingOver ? (
+                <>
+                    <View
+                        onLayout={({nativeEvent}) => {
+                            setReceiptImageTopPosition(PixelRatio.roundToNearestPixel(nativeEvent.layout.top));
+                        }}
+                    >
+                        <ReceiptUpload
+                            width={CONST.RECEIPT.ICON_SIZE}
+                            height={CONST.RECEIPT.ICON_SIZE}
+                        />
+                    </View>
+                    <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
+                    <Text style={[styles.subTextReceiptUpload]}>
+                        {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                        <CopyTextToClipboard
+                            text={CONST.EMAIL.RECEIPTS}
+                            textStyles={[styles.textBlue]}
+                        />
+                        {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                    </Text>
+                    <AttachmentPicker>
+                        {({openPicker}) => (
+                            <PressableWithFeedback
+                                accessibilityLabel={translate('receipt.chooseFile')}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                            >
+                                <Button
+                                    medium
+                                    success
+                                    text={translate('receipt.chooseFile')}
+                                    style={[styles.p9]}
+                                    onPress={() => {
+                                        openPicker({
+                                            onPicked: (file) => {
+                                                setReceiptAndNavigate(file, props.iou, props.report);
+                                            },
+                                        });
+                                    }}
+                                />
+                            </PressableWithFeedback>
+                        )}
+                    </AttachmentPicker>
+                </>
+            ) : null}
+            <ReceiptDropUI
+                onDrop={(e) => {
+                    const file = lodashGet(e, ['dataTransfer', 'files', 0]);
+                    setReceiptAndNavigate(file, props.iou, props.report);
+                }}
+                receiptImageTopPosition={receiptImageTopPosition}
+            />
+            <ConfirmModal
+                title={attachmentInvalidReasonTitle}
+                onConfirm={Receipt.clearUploadReceiptError}
+                onCancel={Receipt.clearUploadReceiptError}
+                isVisible={isAttachmentInvalid}
+                prompt={attachmentInvalidReason}
+                confirmText={translate('common.close')}
+                shouldShowCancelButton={false}
+            />
+        </View>
+    );
+}
+
+ReceiptSelector.defaultProps = defaultProps;
+ReceiptSelector.propTypes = propTypes;
+ReceiptSelector.displayName = 'ReceiptSelector';
+
+export default withOnyx({
+    iou: {key: ONYXKEYS.IOU},
+    receiptModal: {key: ONYXKEYS.RECEIPT_MODAL},
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+    },
+})(ReceiptSelector);
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
new file mode 100644
index 000000000000..7eeab6e493bd
--- /dev/null
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -0,0 +1,324 @@
+import {ActivityIndicator, Alert, AppState, Linking, Text, View} from 'react-native';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {Camera, useCameraDevices} from 'react-native-vision-camera';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import {launchImageLibrary} from 'react-native-image-picker';
+import {withOnyx} from 'react-native-onyx';
+import {useIsFocused} from '@react-navigation/native';
+import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import styles from '../../../styles/styles';
+import Shutter from '../../../../assets/images/shutter.svg';
+import Hand from '../../../../assets/images/hand.svg';
+import * as IOU from '../../../libs/actions/IOU';
+import themeColors from '../../../styles/themes/default';
+import reportPropTypes from '../../reportPropTypes';
+import CONST from '../../../CONST';
+import Button from '../../../components/Button';
+import useLocalize from '../../../hooks/useLocalize';
+import ONYXKEYS from '../../../ONYXKEYS';
+import Log from '../../../libs/Log';
+import participantPropTypes from '../../../components/participantPropTypes';
+
+const propTypes = {
+    /** Route params */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            iouType: PropTypes.string,
+            reportID: PropTypes.string,
+        }),
+    }),
+
+    /** The report on which the request is initiated on */
+    report: reportPropTypes,
+
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        currency: PropTypes.string,
+        participants: PropTypes.arrayOf(participantPropTypes),
+    }),
+};
+
+const defaultProps = {
+    route: {
+        params: {
+            iouType: '',
+            reportID: '',
+        },
+    },
+    report: {},
+    iou: {
+        id: '',
+        amount: 0,
+        currency: CONST.CURRENCY.USD,
+        participants: [],
+    },
+};
+
+/**
+ * See https://github.com/react-native-image-picker/react-native-image-picker/#options
+ * for ImagePicker configuration options
+ */
+const imagePickerOptions = {
+    includeBase64: false,
+    saveToPhotos: false,
+    selectionLimit: 1,
+    includeExtra: false,
+};
+
+/**
+ * Return imagePickerOptions based on the type
+ * @param {String} type
+ * @returns {Object}
+ */
+function getImagePickerOptions(type) {
+    // mediaType property is one of the ImagePicker configuration to restrict types'
+    const mediaType = type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE ? 'photo' : 'mixed';
+    return {
+        mediaType,
+        ...imagePickerOptions,
+    };
+}
+
+function ReceiptSelector(props) {
+    const devices = useCameraDevices();
+    const device = devices.back;
+
+    const camera = useRef(null);
+    const [flash, setFlash] = useState(false);
+    const [permissions, setPermissions] = useState('authorized');
+    const appState = useRef(AppState.currentState);
+
+    const iouType = lodashGet(props.route, 'params.iouType', '');
+    const reportID = lodashGet(props.route, 'params.reportID', '');
+
+    const {translate} = useLocalize();
+    // Keep track of whether the camera is visible, when we navigate elsewhere, turn off the camera
+    const isFocused = useIsFocused();
+
+    // We want to listen to if the app has come back from background and refresh the permissions status to show camera when permissions were granted
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', (nextAppState) => {
+            if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+                Camera.getCameraPermissionStatus().then((permissionStatus) => {
+                    setPermissions(permissionStatus);
+                });
+            }
+
+            appState.current = nextAppState;
+        });
+
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
+    /**
+     * Inform the users when they need to grant camera access and guide them to settings
+     */
+    const showPermissionsAlert = () => {
+        Alert.alert(
+            translate('attachmentPicker.cameraPermissionRequired'),
+            translate('attachmentPicker.expensifyDoesntHaveAccessToCamera'),
+            [
+                {
+                    text: translate('common.cancel'),
+                    style: 'cancel',
+                },
+                {
+                    text: translate('common.settings'),
+                    onPress: () => Linking.openSettings(),
+                },
+            ],
+            {cancelable: false},
+        );
+    };
+
+    /**
+     * A generic handling when we don't know the exact reason for an error
+     *
+     */
+    const showGeneralAlert = () => {
+        Alert.alert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingAttachment'));
+    };
+
+    const askForPermissions = () => {
+        if (permissions === 'not-determined') {
+            Camera.requestCameraPermission().then((permissionStatus) => {
+                setPermissions(permissionStatus);
+            });
+        } else {
+            Linking.openSettings();
+        }
+    };
+
+    /**
+     * Common image picker handling
+     *
+     * @param {function} imagePickerFunc - RNImagePicker.launchCamera or RNImagePicker.launchImageLibrary
+     * @returns {Promise}
+     */
+    const showImagePicker = (imagePickerFunc) =>
+        new Promise((resolve, reject) => {
+            imagePickerFunc(getImagePickerOptions(CONST.ATTACHMENT_PICKER_TYPE.IMAGE), (response) => {
+                if (response.didCancel) {
+                    // When the user cancelled resolve with no attachment
+                    return resolve();
+                }
+                if (response.errorCode) {
+                    switch (response.errorCode) {
+                        case 'permission':
+                            showPermissionsAlert();
+                            return resolve();
+                        default:
+                            showGeneralAlert();
+                            break;
+                    }
+
+                    return reject(new Error(`Error during attachment selection: ${response.errorMessage}`));
+                }
+
+                return resolve(response.assets);
+            });
+        });
+
+    const takePhoto = useCallback(() => {
+        const showCameraAlert = () => {
+            Alert.alert(translate('receipt.cameraErrorTitle'), translate('receipt.cameraErrorMessage'));
+        };
+
+        if (!camera.current) {
+            showCameraAlert();
+            return;
+        }
+
+        camera.current
+            .takePhoto({
+                qualityPrioritization: 'speed',
+                flash: flash ? 'on' : 'off',
+            })
+            .then((photo) => {
+                IOU.setMoneyRequestReceipt(`file://${photo.path}`, photo.path);
+                IOU.navigateToNextPage(props.iou, iouType, reportID, props.report);
+            })
+            .catch(() => {
+                showCameraAlert();
+            });
+    }, [flash, iouType, props.iou, props.report, reportID, translate]);
+
+    Camera.getCameraPermissionStatus().then((permissionStatus) => {
+        setPermissions(permissionStatus);
+    });
+
+    return (
+        <View style={styles.flex1}>
+            {permissions !== CONST.RECEIPT.PERMISSION_AUTHORIZED && (
+                <View style={[styles.cameraView, styles.permissionView]}>
+                    <Hand
+                        width={CONST.RECEIPT.HAND_ICON_WIDTH}
+                        height={CONST.RECEIPT.HAND_ICON_HEIGHT}
+                        style={[styles.pb5]}
+                    />
+                    <Text style={[styles.textReceiptUpload]}>{translate('receipt.takePhoto')}</Text>
+                    <Text style={[styles.subTextReceiptUpload]}>{translate('receipt.cameraAccess')}</Text>
+                    <PressableWithFeedback
+                        accessibilityLabel={translate('receipt.givePermission')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    >
+                        <Button
+                            medium
+                            success
+                            text={translate('receipt.givePermission')}
+                            style={[styles.p9, styles.pt5]}
+                            onPress={askForPermissions}
+                        />
+                    </PressableWithFeedback>
+                </View>
+            )}
+            {permissions === CONST.RECEIPT.PERMISSION_AUTHORIZED && device == null && (
+                <View style={[styles.cameraView]}>
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        style={[styles.flex1]}
+                        color={themeColors.textSupporting}
+                    />
+                </View>
+            )}
+            {permissions === CONST.RECEIPT.PERMISSION_AUTHORIZED && device != null && (
+                <Camera
+                    ref={camera}
+                    device={device}
+                    style={[styles.cameraView]}
+                    zoom={device.neutralZoom}
+                    isActive={isFocused}
+                    photo
+                />
+            )}
+            <View style={[styles.flexRow, styles.justifyContentAround, styles.alignItemsCenter, styles.pv3]}>
+                <PressableWithFeedback
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    accessibilityLabel={translate('receipt.gallery')}
+                    style={[styles.alignItemsStart]}
+                    onPress={() => {
+                        showImagePicker(launchImageLibrary)
+                            .then((receiptImage) => {
+                                IOU.setMoneyRequestReceipt(receiptImage[0].uri, receiptImage[0].fileName);
+                                IOU.navigateToNextPage(props.iou, iouType, reportID, props.report);
+                            })
+                            .catch(() => {
+                                Log.info('User did not select an image from gallery');
+                            });
+                    }}
+                >
+                    <Icon
+                        height={32}
+                        width={32}
+                        src={Expensicons.Gallery}
+                        fill={themeColors.textSupporting}
+                    />
+                </PressableWithFeedback>
+                <PressableWithFeedback
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    accessibilityLabel={translate('receipt.shutter')}
+                    style={[styles.alignItemsCenter]}
+                    onPress={takePhoto}
+                >
+                    <Shutter
+                        width={CONST.RECEIPT.SHUTTER_SIZE}
+                        height={CONST.RECEIPT.SHUTTER_SIZE}
+                    />
+                </PressableWithFeedback>
+                <PressableWithFeedback
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    accessibilityLabel={translate('receipt.flash')}
+                    style={[styles.alignItemsEnd]}
+                    onPress={() => setFlash((prevFlash) => !prevFlash)}
+                >
+                    <Icon
+                        height={32}
+                        width={32}
+                        src={Expensicons.Bolt}
+                        fill={flash ? themeColors.iconHovered : themeColors.textSupporting}
+                    />
+                </PressableWithFeedback>
+            </View>
+        </View>
+    );
+}
+
+ReceiptSelector.defaultProps = defaultProps;
+ReceiptSelector.propTypes = propTypes;
+ReceiptSelector.displayName = 'ReceiptSelector';
+
+export default withOnyx({
+    iou: {
+        key: ONYXKEYS.IOU,
+    },
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+    },
+})(ReceiptSelector);
diff --git a/src/pages/iou/steps/MoneyRequestAmountPage.js b/src/pages/iou/steps/MoneyRequestAmount.js
similarity index 97%
rename from src/pages/iou/steps/MoneyRequestAmountPage.js
rename to src/pages/iou/steps/MoneyRequestAmount.js
index fc27a7779041..c455cbc84c88 100755
--- a/src/pages/iou/steps/MoneyRequestAmountPage.js
+++ b/src/pages/iou/steps/MoneyRequestAmount.js
@@ -12,28 +12,21 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import compose from '../../../libs/compose';
 import * as ReportUtils from '../../../libs/ReportUtils';
-import * as IOUUtils from '../../../libs/IOUUtils';
 import * as CurrencyUtils from '../../../libs/CurrencyUtils';
 import Button from '../../../components/Button';
 import CONST from '../../../CONST';
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurrencySymbol';
-import ScreenWrapper from '../../../components/ScreenWrapper';
-import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
-import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import reportPropTypes from '../../reportPropTypes';
 import * as IOU from '../../../libs/actions/IOU';
 import useLocalize from '../../../hooks/useLocalize';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails';
+import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
+import * as IOUUtils from '../../../libs/IOUUtils';
 
 const propTypes = {
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            iouType: PropTypes.string,
-            reportID: PropTypes.string,
-        }),
-    }),
-
     /** The report on which the request is initiated on */
     report: reportPropTypes,
 
@@ -53,16 +46,17 @@ const propTypes = {
         ),
     }),
 
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            iouType: PropTypes.string,
+            reportID: PropTypes.string,
+        }),
+    }),
+
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
-    route: {
-        params: {
-            iouType: '',
-            reportID: '',
-        },
-    },
     report: {},
     iou: {
         id: '',
@@ -70,6 +64,12 @@ const defaultProps = {
         currency: CONST.CURRENCY.USD,
         participants: [],
     },
+    route: {
+        params: {
+            iouType: '',
+            reportID: '',
+        },
+    },
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -167,7 +167,7 @@ const replaceAllDigits = (text, convertFn) =>
         .join('')
         .value();
 
-function MoneyRequestAmountPage(props) {
+function MoneyRequestAmount(props) {
     const {translate, toLocaleDigit, fromLocaleDigit, numberFormat} = useLocalize();
     const selectedAmountAsString = props.iou.amount ? CurrencyUtils.convertToWholeUnit(props.iou.currency, props.iou.amount).toString() : '';
 
@@ -427,10 +427,12 @@ function MoneyRequestAmountPage(props) {
             >
                 {({safeAreaPaddingBottomStyle}) => (
                     <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
-                        <HeaderWithBackButton
-                            title={titleForStep}
-                            onBackButtonPress={navigateBack}
-                        />
+                        {isEditing.current && (
+                            <HeaderWithBackButton
+                                title={titleForStep}
+                                onBackButtonPress={navigateBack}
+                            />
+                        )}
                         <View
                             nativeID={amountViewID}
                             onMouseDown={(event) => onMouseDown(event, [amountViewID])}
@@ -483,9 +485,9 @@ function MoneyRequestAmountPage(props) {
     );
 }
 
-MoneyRequestAmountPage.propTypes = propTypes;
-MoneyRequestAmountPage.defaultProps = defaultProps;
-MoneyRequestAmountPage.displayName = 'MoneyRequestAmountPage';
+MoneyRequestAmount.propTypes = propTypes;
+MoneyRequestAmount.defaultProps = defaultProps;
+MoneyRequestAmount.displayName = 'MoneyRequestAmount';
 
 export default compose(
     withCurrentUserPersonalDetails,
@@ -495,4 +497,4 @@ export default compose(
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
         },
     }),
-)(MoneyRequestAmountPage);
+)(MoneyRequestAmount);
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 4816a395780a..3703a342d00e 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -28,6 +28,7 @@ const propTypes = {
     iou: PropTypes.shape({
         id: PropTypes.string,
         amount: PropTypes.number,
+        receiptPath: PropTypes.string,
         currency: PropTypes.string,
         comment: PropTypes.string,
         participants: PropTypes.arrayOf(
@@ -89,14 +90,14 @@ function MoneyRequestConfirmPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(props.iou.participants) || props.iou.amount === 0 || shouldReset) {
+        if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);
         }
 
         return () => {
             prevMoneyRequestId.current = props.iou.id;
         };
-    }, [props.iou.participants, props.iou.amount, props.iou.id]);
+    }, [props.iou.participants, props.iou.amount, props.iou.id, props.iou.receiptPath]);
 
     const navigateBack = () => {
         let fallback;
@@ -206,6 +207,8 @@ function MoneyRequestConfirmPage(props) {
                             });
                             IOU.setMoneyRequestParticipants(newParticipants);
                         }}
+                        receiptPath={props.iou.receiptPath}
+                        receiptSource={props.iou.receiptSource}
                         iouType={iouType.current}
                         reportID={reportID.current}
                         // The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button.
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index ce26079761eb..d6d069dc0329 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -74,14 +74,14 @@ function MoneyRequestParticipantsPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (props.iou.amount === 0 || shouldReset) {
+        if ((props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
             navigateBack(true);
         }
 
         return () => {
             prevMoneyRequestId.current = props.iou.id;
         };
-    }, [props.iou.amount, props.iou.id]);
+    }, [props.iou.amount, props.iou.id, props.iou.receiptPath]);
 
     return (
         <ScreenWrapper
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index d056e50c1aa4..62e62183a156 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -121,7 +121,7 @@ function ContactMethodsPage(props) {
                     <Text>
                         {props.translate('contacts.helpTextBeforeEmail')}
                         <CopyTextToClipboard
-                            text="receipts@expensify.com"
+                            text={CONST.EMAIL.RECEIPTS}
                             textStyles={[styles.textBlue]}
                         />
                         <Text>{props.translate('contacts.helpTextAfterEmail')}</Text>
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index ef5896cb0afd..5e7f367a3123 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -145,7 +145,7 @@ function WorkspaceReimburseView(props) {
                     <Text>
                         {translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
                         <CopyTextToClipboard
-                            text="receipts@expensify.com"
+                            text={CONST.EMAIL.RECEIPTS}
                             textStyles={[styles.textBlue]}
                         />
                         <Text>{translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</Text>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b490baef72f2..b0d3ef380de0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -26,6 +26,7 @@ import * as Browser from '../libs/Browser';
 import cursor from './utilities/cursor';
 import userSelect from './utilities/userSelect';
 import textUnderline from './utilities/textUnderline';
+import Colors from './colors';
 
 // touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target
 const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {};
@@ -772,6 +773,39 @@ const styles = {
         borderColor: themeColors.danger,
     },
 
+    uploadReceiptView: (isSmallScreenWidth) => ({
+        borderRadius: variables.componentBorderRadiusLarge,
+        borderWidth: isSmallScreenWidth ? 0 : 2,
+        borderColor: themeColors.borderFocus,
+        borderStyle: 'dotted',
+        marginBottom: 20,
+        marginLeft: 20,
+        marginRight: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 40,
+        gap: 4,
+        flex: 1,
+    }),
+
+    cameraView: {
+        flex: 1,
+        overflow: 'hidden',
+        padding: 10,
+        borderRadius: 28,
+        borderStyle: 'solid',
+        borderWidth: 8,
+        backgroundColor: Colors.greenHighlightBackground,
+        borderColor: Colors.greenAppBackground,
+    },
+
+    permissionView: {
+        paddingVertical: 108,
+        paddingHorizontal: 61,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+
     headerAnonymousFooter: {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
@@ -1075,6 +1109,20 @@ const styles = {
         color: themeColors.textSupporting,
     },
 
+    textReceiptUpload: {
+        ...headlineFont,
+        fontSize: variables.fontSizeXLarge,
+        color: themeColors.textLight,
+        textAlign: 'center',
+    },
+
+    subTextReceiptUpload: {
+        fontFamily: fontFamily.EXP_NEUE,
+        lineHeight: variables.lineHeightLarge,
+        textAlign: 'center',
+        color: themeColors.textLight,
+    },
+
     furtherDetailsText: {
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
@@ -3174,6 +3222,16 @@ const styles = {
         zIndex: 2,
     },
 
+    receiptDropOverlay: {
+        backgroundColor: themeColors.receiptDropUIBG,
+        zIndex: 2,
+    },
+
+    receiptImageWrapper: (receiptImageTopPosition) => ({
+        position: 'absolute',
+        top: receiptImageTopPosition,
+    }),
+
     cardSection: {
         backgroundColor: themeColors.cardBG,
         borderRadius: variables.componentBorderRadiusCard,
@@ -3533,6 +3591,29 @@ const styles = {
         textAlign: 'center',
     },
 
+    tabSelectorButton: (isSelected) => ({
+        height: 40,
+        padding: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: variables.buttonBorderRadius,
+        backgroundColor: isSelected ? themeColors.midtone : themeColors.appBG,
+    }),
+
+    tabSelector: {
+        flexDirection: 'row',
+        paddingHorizontal: 20,
+        paddingBottom: 12,
+    },
+
+    tabText: (isSelected) => ({
+        marginHorizontal: 8,
+        fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE,
+        fontWeight: isSelected ? fontWeightBold : 400,
+        color: isSelected ? themeColors.textLight : themeColors.textSupporting,
+    }),
+
     /**
      * @param {String} backgroundColor
      * @param {Number} height
@@ -3551,6 +3632,12 @@ const styles = {
     willChangeTransform: {
         willChange: 'transform',
     },
+
+    moneyRequestImage: {
+        height: 200,
+        borderRadius: 16,
+        margin: 20,
+    },
 };
 
 export default styles;
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 0cd32e170a7e..bc794f93dfab 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -65,6 +65,7 @@ const darkTheme = {
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.greenHighlightBackground,
     dropUIBG: 'rgba(6,27,9,0.92)',
+    receiptDropUIBG: 'rgba(3, 212, 124, 0.84)',
     checkBox: colors.green,
     pickerOptionsTextColor: colors.white,
     imageCropBackgroundColor: colors.greenIcons,
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index f70c8fbf419f..71c5afb6a65e 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -262,6 +262,11 @@ export default {
     p5: {
         padding: 20,
     },
+
+    p9: {
+        padding: 36,
+    },
+
     p10: {
         padding: 40,
     },