diff --git a/com.twin.app.shoptime/package-lock.json b/com.twin.app.shoptime/package-lock.json
index ced9968f..5c96cb13 100644
--- a/com.twin.app.shoptime/package-lock.json
+++ b/com.twin.app.shoptime/package-lock.json
@@ -18,7 +18,7 @@
 				"axios": "^0.21.1",
 				"ilib": "^14.3.0",
 				"prop-types": "^15.6.2",
-				"qrcode.react": "^3.1.0",
+				"qrcode": "^1.5.3",
 				"react": "^16.7.0",
 				"react-dom": "^16.7.0",
 				"react-redux": "^7.2.3",
@@ -207,6 +207,28 @@
 			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
 			"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
 		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
 		"node_modules/asap": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -220,6 +242,14 @@
 				"follow-redirects": "^1.14.0"
 			}
 		},
+		"node_modules/camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/change-emitter": {
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
@@ -230,6 +260,32 @@
 			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
 			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
 		},
+		"node_modules/cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
 		"node_modules/core-js": {
 			"version": "1.2.7",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -241,6 +297,19 @@
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
+		"node_modules/decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/dijkstrajs": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+			"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+		},
 		"node_modules/direction": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
@@ -258,6 +327,16 @@
 			"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
 			"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
 		},
+		"node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/encode-utf8": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+			"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+		},
 		"node_modules/encoding": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
@@ -280,6 +359,18 @@
 				"ua-parser-js": "^0.7.30"
 			}
 		},
+		"node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/follow-redirects": {
 			"version": "1.15.5",
 			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
@@ -299,6 +390,14 @@
 				}
 			}
 		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
 		"node_modules/global": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
@@ -340,6 +439,14 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/is-function": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
@@ -367,6 +474,17 @@
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
+		"node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -413,11 +531,60 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/parse-headers": {
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
 			"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
 		},
+		"node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/pngjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+			"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/process": {
 			"version": "0.11.10",
 			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -444,12 +611,21 @@
 				"react-is": "^16.13.1"
 			}
 		},
-		"node_modules/qrcode.react": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
-			"integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
-			"peerDependencies": {
-				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+		"node_modules/qrcode": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+			"integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+			"dependencies": {
+				"dijkstrajs": "^1.0.1",
+				"encode-utf8": "^1.0.3",
+				"pngjs": "^5.0.0",
+				"yargs": "^15.3.1"
+			},
+			"bin": {
+				"qrcode": "bin/qrcode"
+			},
+			"engines": {
+				"node": ">=10.13.0"
 			}
 		},
 		"node_modules/ramda": {
@@ -561,6 +737,19 @@
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
 			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
 		},
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+		},
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -575,11 +764,40 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+		},
 		"node_modules/setimmediate": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
 			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
 		},
+		"node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/symbol-observable": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -623,6 +841,24 @@
 			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
 			"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
 		},
+		"node_modules/which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+		},
+		"node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/xhr": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz",
@@ -641,6 +877,44 @@
 			"engines": {
 				"node": ">=0.4"
 			}
+		},
+		"node_modules/y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+		},
+		"node_modules/yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"dependencies": {
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		}
 	},
 	"dependencies": {
@@ -821,6 +1095,19 @@
 			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
 			"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
 		},
+		"ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+		},
+		"ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"requires": {
+				"color-convert": "^2.0.1"
+			}
+		},
 		"asap": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -834,6 +1121,11 @@
 				"follow-redirects": "^1.14.0"
 			}
 		},
+		"camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+		},
 		"change-emitter": {
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
@@ -844,6 +1136,29 @@
 			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
 			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
 		},
+		"cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"requires": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
+		"color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"requires": {
+				"color-name": "~1.1.4"
+			}
+		},
+		"color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
 		"core-js": {
 			"version": "1.2.7",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -854,6 +1169,16 @@
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
+		"decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+		},
+		"dijkstrajs": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+			"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+		},
 		"direction": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
@@ -864,6 +1189,16 @@
 			"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
 			"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
 		},
+		"emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"encode-utf8": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+			"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+		},
 		"encoding": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
@@ -886,11 +1221,25 @@
 				"ua-parser-js": "^0.7.30"
 			}
 		},
+		"find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"requires": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			}
+		},
 		"follow-redirects": {
 			"version": "1.15.5",
 			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
 			"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
 		},
+		"get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+		},
 		"global": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
@@ -929,6 +1278,11 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
+		"is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+		},
 		"is-function": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
@@ -953,6 +1307,14 @@
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
+		"locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"requires": {
+				"p-locate": "^4.1.0"
+			}
+		},
 		"lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -993,11 +1355,42 @@
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
 		},
+		"p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"requires": {
+				"p-try": "^2.0.0"
+			}
+		},
+		"p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"requires": {
+				"p-limit": "^2.2.0"
+			}
+		},
+		"p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+		},
 		"parse-headers": {
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
 			"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
 		},
+		"path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+		},
+		"pngjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+			"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+		},
 		"process": {
 			"version": "0.11.10",
 			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -1021,11 +1414,16 @@
 				"react-is": "^16.13.1"
 			}
 		},
-		"qrcode.react": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
-			"integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
-			"requires": {}
+		"qrcode": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+			"integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+			"requires": {
+				"dijkstrajs": "^1.0.1",
+				"encode-utf8": "^1.0.3",
+				"pngjs": "^5.0.0",
+				"yargs": "^15.3.1"
+			}
 		},
 		"ramda": {
 			"version": "0.24.1",
@@ -1118,6 +1516,16 @@
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
 			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
 		},
+		"require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+		},
+		"require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+		},
 		"safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -1132,11 +1540,34 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+		},
 		"setimmediate": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
 			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
 		},
+		"string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"requires": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			}
+		},
+		"strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"requires": {
+				"ansi-regex": "^5.0.1"
+			}
+		},
 		"symbol-observable": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -1160,6 +1591,21 @@
 			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
 			"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
 		},
+		"which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+		},
+		"wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"requires": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			}
+		},
 		"xhr": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz",
@@ -1175,6 +1621,38 @@
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
 			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+		},
+		"y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+		},
+		"yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"requires": {
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			}
+		},
+		"yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"requires": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			}
 		}
 	}
 }
diff --git a/com.twin.app.shoptime/package.json b/com.twin.app.shoptime/package.json
index 2de6b4c0..da612206 100644
--- a/com.twin.app.shoptime/package.json
+++ b/com.twin.app.shoptime/package.json
@@ -42,6 +42,7 @@
 		"axios": "^0.21.1",
 		"ilib": "^14.3.0",
 		"prop-types": "^15.6.2",
+		"qrcode": "^1.5.3",
 		"react": "^16.7.0",
 		"react-dom": "^16.7.0",
 		"react-redux": "^7.2.3",
diff --git a/com.twin.app.shoptime/src/components/QRCode/QRCodeComponent.jsx b/com.twin.app.shoptime/src/components/QRCode/QRCodeComponent.jsx
new file mode 100644
index 00000000..d6d56e57
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/QRCode/QRCodeComponent.jsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from "react";
+
+import QRCode from "qrcode";
+
+export default function QRCodeComponent({
+  text,
+  width = "160",
+  height = "160",
+  level = "H",
+}) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      console.log("##################cavasRef QRCODE");
+      QRCode.toCanvas(
+        canvasRef.current,
+        text,
+        {
+          width: width,
+          height: height,
+          errorCorrectionLevel: level,
+        },
+        (error) => {
+          if (error) console.error(error);
+        }
+      );
+    }
+  }, [text, width, height, level]);
+  return <canvas ref={canvasRef} />;
+}
diff --git a/com.twin.app.shoptime/src/components/QRCode/QRCodeComponent.module.less b/com.twin.app.shoptime/src/components/QRCode/QRCodeComponent.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/reducers/panelReducer.js b/com.twin.app.shoptime/src/reducers/panelReducer.js
index eb23f66b..a7c6a4a2 100644
--- a/com.twin.app.shoptime/src/reducers/panelReducer.js
+++ b/com.twin.app.shoptime/src/reducers/panelReducer.js
@@ -2,7 +2,7 @@ import { types } from "../actions/actionTypes";
 import { panel_names } from "../utils/Config";
 
 const initialState = {
-  panels: [],
+  panels: [{ name: panel_names.CHECKOUT_PANEL }],
   isModalOpen: false,
 };
 
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
new file mode 100644
index 00000000..9194373e
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { useDispatch } from "react-redux";
+
+import { popPanel } from "../../actions/panelActions";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import TScroller from "../../components/TScroller/TScroller";
+import css from "./CheckOutPanel.module.less";
+import InformationContainer from "./container/InformationContainer";
+import SummaryContainer from "./container/SummaryCotainer";
+
+export default function CheckOutPanel() {
+  const dispatch = useDispatch();
+
+  const onBackClick = () => {
+    dispatch(popPanel());
+  };
+  return (
+    <TPanel isTabActivated={false}>
+      <THeader
+        className={css.theader}
+        title="CHECKOUT"
+        onBackButton
+        onClick={onBackClick}
+      />
+      <TBody className={css.tbody}>
+        <div className={css.Wrap}>
+          <SummaryContainer />
+          <InformationContainer />
+        </div>
+      </TBody>
+    </TPanel>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.module.less b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.module.less
new file mode 100644
index 00000000..f4c5201c
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.module.less
@@ -0,0 +1,14 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.theader {
+  padding-left: 60px;
+}
+.tbody {
+  .size(@w: 1920px, @h: 100%);
+
+  .Wrap {
+    height: 2050px;
+    display: flex;
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.jsx
new file mode 100644
index 00000000..47d634e0
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import css from "./Subject.module.less";
+
+export default function Subject({ title }) {
+  return (
+    <div className={css.Wrap}>
+      <div className={css.subject}>{title}</div>
+    </div>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.module.less b/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.module.less
new file mode 100644
index 00000000..2209cfec
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/Subject.module.less
@@ -0,0 +1,19 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.Wrap {
+  width: 1320px;
+  background-color: #ffffff;
+
+  .subject {
+    margin-top: 60px;
+    padding: 28px 0 28px 60px;
+    .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+    color: #333333;
+    border-top: solid 1px #dadada;
+    border-bottom: solid 1px #dadada;
+
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
new file mode 100644
index 00000000..f8e5efb3
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import { getMyInfoBillingSearch } from "../../../actions/billingActions";
+import { getMyInfoCardSearch } from "../../../actions/cardActions";
+import { getMyInfoShippingSearch } from "../../../actions/shippingActions";
+import BillingAddressTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab";
+import PaymentTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab";
+import ShippingAddressTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab";
+import Subject from "../components/Subject";
+import css from "./InformationContainer.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+export default function InformationContainer() {
+  const { userInfo } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (userInfo) {
+      dispatch(getMyInfoCardSearch({ mbrNo: userInfo }));
+      dispatch(getMyInfoBillingSearch({ mbrNo: userInfo }));
+      dispatch(getMyInfoShippingSearch({ mbrNo: userInfo }));
+      // dispatch(getProductCouponInfo({ mbrNo: userInfo }));
+    }
+  }, [userInfo, dispatch]);
+
+  return (
+    <Container className={css.container}>
+      <Subject title="ORDER ITEMS" />
+      <div>
+        <Subject title="SHIPPING ADDRESS" />
+        <ShippingAddressTab />
+      </div>
+      <div>
+        <Subject title="BILLING ADDRESS" />
+        <BillingAddressTab />
+      </div>
+      <div>
+        <Subject title="PATMENT METHOD" />
+        <PaymentTab />
+      </div>
+    </Container>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.module.less b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.module.less
new file mode 100644
index 00000000..9cf68031
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.module.less
@@ -0,0 +1,16 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  background-color: #f8f8f8f8;
+  width: 1320px;
+
+  .address {
+    height: 383px;
+    background-color: #f2f2f2;
+  }
+
+  .temp {
+    margin-top: 60px;
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainer.module.less b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainer.module.less
new file mode 100644
index 00000000..eaf9b46d
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainer.module.less
@@ -0,0 +1,73 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  .size(@w: 600px , @h: 100%);
+  background-color: #2c343f;
+}
+
+.order {
+  display: flex;
+  flex-direction: column;
+  padding: 69px 60px 40px 60px;
+
+  > h3 {
+    .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+    padding-bottom: 29px;
+  }
+
+  .line {
+    .size(@w: 480px , @h: 1px);
+    background-color: #ffffff;
+    opacity: 0.1;
+    margin-bottom: 20px;
+  }
+  .itemWrap {
+    .font(@fontFamily: @baseFont,  @fontSize: 24px);
+    color: #cccccc;
+  }
+  .item {
+    margin-bottom: 21px;
+  }
+}
+
+.total {
+  .size(@w: 600px , @h: 100px);
+  background-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  padding: 31px 59px 0 61px;
+  margin-bottom: 147px;
+  > div {
+    .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+    color: #ffffff;
+  }
+  .price {
+    .font(@fontFamily: @baseFontBold,  @fontSize: 42px);
+  }
+}
+
+.bottom {
+  padding: 69px 60px 40px 60px;
+
+  .checkboxWrap {
+    display: flex;
+  }
+  .checkbox {
+    .size(@w: 40px, @h: 40px);
+    background-image: url("../../../../assets/images/btn/btn-check-nor.svg");
+    background-position: center;
+    background-size: cover;
+    margin: 0 12px 20px 0;
+  }
+
+  .contents {
+    .font(@fontFamily: @baseFont,  @fontSize: 24px);
+    color: #009cff;
+    text-decoration: underline;
+  }
+
+  .tButton {
+    width: 480px;
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
new file mode 100644
index 00000000..f916825c
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import TButton from "../../../components/TButton/TButton";
+import css from "./SummaryContainer.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const itmes = [
+  { name: "items" },
+  { name: "Options Total" },
+  { name: "Shipping & Handling" },
+  { name: "TOTAL (before Tax)" },
+  { name: "Estimated Sales Tax" },
+  { name: "Your Coupon Savings" },
+];
+
+const terms = [
+  { content: "Agree to the Terms of Purchase" },
+  { content: "Agree to the Privacy Policy" },
+];
+export default function SummaryContainer() {
+  return (
+    <Container className={css.container}>
+      <div className={css.order}>
+        <h3>ORDER SUMMARY</h3>
+        <span className={css.line} />
+        <div className={css.itemWrap}>
+          {itmes.map((item) => (
+            <div className={css.item}>{item.name}</div>
+          ))}
+        </div>
+      </div>
+      <div className={css.total}>
+        <div>Estimated Total</div>
+        <div className={css.price}>$ 61.60</div>
+      </div>
+      <div className={css.bottom}>
+        {terms.map((item) => (
+          <div className={css.checkboxWrap}>
+            <div className={css.checkbox} />
+            <div className={css.contents}>{item.content}</div>
+          </div>
+        ))}
+        <TButton className={css.tButton}>{"PLACE ORDER"}</TButton>
+      </div>
+    </Container>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
index 88fa2432..f5d683ab 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
@@ -63,11 +63,7 @@
     border: solid 1px #fff;
     background-image: linear-gradient(to top, #f5f5f5, #fff);
     margin: 10px 0 0 6px;
-
-    > canvas {
-      .size(@w: 160px, @h: 160px);
-      margin: 16px 16px 16px 16px;
-    }
+    padding: 16px 16px 0 16px;
   }
 }