diff --git a/package.json b/package.json
index 14cb4beac..11ba8d0f2 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@soramitsu/soramitsu-js-ui": "^0.5.3",
+    "@soramitsu/soramitsu-js-ui": "^0.5.4",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "lodash": "^4.17.15",
diff --git a/src/assets/img/ksm.svg b/src/assets/img/ksm.svg
new file mode 100644
index 000000000..c6607f8cf
--- /dev/null
+++ b/src/assets/img/ksm.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.833659" y="0.833659" width="38.3333" height="38.3333" rx="19.1667" fill="url(#pattern0)" stroke="white" stroke-width="1.66667"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.0015625)"/>
+</pattern>
+<image id="image0" width="640" height="640" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAICAgICAQICAgIDAgIDAwYEAwMDAwcFBQQGCAcJCAgHCAgJCg0LCQoMCggICw8LDA0ODg8OCQsQERAOEQ0ODg7/2wBDAQIDAwMDAwcEBAcOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAKAAoADASIAAhEBAxEB/8QAHgABAAICAgMBAAAAAAAAAAAAAAkKBwgBBgMEBQL/xABGEAEAAQMDAgQDBAYIBAMJAAAAAQIDBAUGBwgRCRIhMRNBURQVImEWMkJSYnEXIyQzU3KBkUNzg7ElkpM0NVRjZKGjs8L/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Ar/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5imap7RHcHDmImZ9I7pEOnTwzuoznzGwdeztIo4r2HkRFyjXN0Wa7d3Itz6+bHxI7XbveJiYqq8lE/KtNVw94S/S3xzh4uVvPT9S5h3Bbjvcv7gyZs4UV/WjEsTTT5fyuVXP5gqjRRVV27R3n6R6y8lyxdtVRFy3Vbmfbz0zT/3Xrdq8OcT7H0u1hbN402ttbFt0xTTb0rb+Njx6fWaaImf5zLsup7O2preDVi6ztrSdWxqo7VWs3TbN6iY+kxVTMAoUdp+no4XL+SfD86RuUMXJnWeGNE0HULvrGo7XtzpGRRV+9/Z5poqn/PRVH5IoeoDwZNz6Ng5uu9O++P0vx7cTXTtjc828bOmP3bWXTEWblX5XKbX+aQQXDtu99h7y425H1HaG/NtajtLc2DX5crTdUxarF639J7Ve9M+8VR3pmPWJmHUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiO8paehjwz9z8806XyfzDRnbM4eqqpvYOFTE2dR3FT7xNvvHezjT870x5q4/u49fiQGknTv0q8y9TvIv3Hxhtm5lafYu006ruDO72NM0yJ+d692n8Xb1i3RFVyflT29VlHpU8NbhHp2x9N3Jr+Ja5U5SsxTc+/tYxKZxcC5/8AR4s96bfafa5XNVz5xNPfyt79jbD2dxpxjpWzNh7cwNq7X021FrC03TrEWrVqPnPaPWqqZ9aq6pmqqe8zMzPd24HEREezkAAAAAa8dQvS9xB1NcVVbZ5P25bzMmzbqjStcxIi1qWlVz+1YvdpmI7+s26vNbq7fipn0VZur3ob5U6UN+VXtWs1br4xy8iaNH3hg4802a5n9Wzk0d5+z3+37MzNNXrNFVXaYi5A+Buna23t67A1bau7NGw9w7c1PHqx9Q03UMem9YybVXvTXRV6TH/ae0x2mO4KEQmC67PDI1/hn715V4KxM3dPE9PnyNT0SPNfz9u0e81R71X8amP2/Wu3H6/miJuIfZjtPaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHktWq716m3bpmuuqYiKaY7zMz7REPc0rStR1vcOFpGkYORqmq5l+jHw8PEsVXb2Rdrny0W6KKYmaqqpmIiIiZmZWV/D98NTTeJcfR+ZOedMx9W5U7U5OibdvRTextuT703LvvTdy4/wBaLU/q96481IYU8P8A8MCK6dH5o6mNA9PwZW3dhZ9v3/aoyNRon/Sacafym5/hp+7Nm3Yx6bVqim3bppimmmmmIiIiO0RER7R2eSIiI9HIAAAAAAAAAAPxXRFdE01RE0z7xMe6DLrx8LfF3Pd1nmDpo0izp+5KvPk65sTGppt2M+f1q72BHpTbuz6zNj0or/Y8tX4a50D3jtIKB2dgZmmatk4GoYt3Czsa9VZyMbItTbuWblM+WqiumrtNNUTExMTHeJj1eotgdc/h07O6ktG1DkDj6nE2bzfaszV9rmn4eHuDyx+G1l9o/Dc7R2pyIiZj0iuKqe001bt+bB3hxjytrOx9+bfzNr7r0rImxn6dnWvJctVR6xP0qpqiYqprpmaaqZiYmYnuDqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPs6Ft7Xd0bow9D23o2dr+t5dcUYmn6biV5GRfqn5UW6Imqqf5QD4zunH/Hm9OU+V9I2Px/tzN3VurU70WsLT8G15665+dUz7UUUx61V1TFNMRMzMQlD6ePCI5v5Fv4OucyZtrhvadztXVg3aacrW79H0ixTPw7HePndq80fO3Kfjp86VOFemXYV3RuLdrUYOdlW4o1TXs6qMjU9S7esfGvzET5e/rFuiKbcT6xTE+oNWOhbw8dodMu3cPfe+IxN384ZNj8efTT8TE0GmuPxWcPzR619pmmu/MRVVHeKYppmfNJp7R2j0gAAAAAAAAAAAAa1c/dW/BPTVtyMnlHeljB1i7a+Jhbd0+PtWq5kfKaMeme9NM/v3Joo/iBsrM9o7yxdydzVxVwxs6de5T35o2x9NmmZtVapm00Xcjt7xatR3uXZ/KimqVeHqD8YTmPfFebofCGi4/Em3K+9FGq5Hkzdau0+3fzVRNmx3j5UU11R8q0S26t4bq3zvXL3JvLcep7q3BlVebJ1LVs65lZF2fzuVzNXb19u/YFg3nPxoNnaROZpHAOwMjd+bT3ot7g3RNWHgxPyqoxqJ+Ndj2/XqtfyQi8/dSPK/Uvylh7t5X1rG1bUMKxVj6daw9Ns4lnDsVVeb4VEUUxVVTE+seeqqfWfX1lggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkPjTifkfmLknH2hxls3VN6bhvdp+yaZjTc+FTM9vPdr9KLVEfOuuqmmPqDHjIfG3E3JHMHIFra3GWytX3tr1faZxdKw6rvwqZ/bu1/qWqP465ppj6pzOmvwa8HFpwdy9TO5vvC/2pufobtrJmizT8/Jk5kRFVX0mmzFMenpclNlx7xjx/xRx5jbT442fpWzNu2IjyYWlYdNmmqe3bzVzH4rlc/OuuZqn5yCCDp88GTWs6MPXuo7e1Oh4/eK6tq7Uu03smfn5b2ZVE26J+Uxapr/ACrhNdw706cLcB7UjSeJ+PdJ2lTNuKMjNsWPiZ2V2+d7JuTVdufyqq7R8ohmwAiIiPT0AAAAAAAAAAAAPkI2vEb6zqemLputbX2bl0f0y7txrlGi9u1U6Ri+tFzUKqfrE96LUT6Tc7z6xbqiQxJ4g/iQYnB06jw7wnmYuqcvVW5t6zrM003sfbUVR+pFM96bmX2nv5Z702/Saomr8Cs9uLcmvbu3pqW49z6xm7g1/UL9V/O1HUcmq/kZNyr3qrrqmZqn+b5+fnZep6vk5+fk3s3Oyb1V7Jyci7Ny7euVTNVVddU+tVUzMzMz6zMzL1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIjvPoA+romh6zuTdWBoe39KzNb1rOvRZwsDAxq7+RkXJ9qLduiJqqqn6REt5+lPw8ub+prKwtfpwp4+4trqibm69ZxqojJo7+v2Ox6VZM+/wCLvTb9J719/RZT6a+jTg/pd2nRa4/27GZuu7ZijUd2atFN/VMv0/FTFztEWbc/4dqKafSO/mn1BDd0t+D/ALs3RRp+8OpTVL2yNCq8t23tDS7tNWqZFPvEZF6O9GNE/Oinz3O3eJ+HKfTi3h7jPhXjKxs/i7ZmmbN0C32mqxp9jy136ojt8S9cnvXer/juVVVfmyV8gAAAAAAAAAAAAAAAAHU997129xzw7ubfe686nTdt6Bpl7UdRyKu34LVqia6u0fOqe3aI+czEfNSd6iubtzdQ/V5vHlfdFdVGTq+ZP2DCmvzUafh0fhx8aj5dqKO0TMe9U1VT61SnR8ZbqBubc4L2d0+aDmza1LdN3743JTar7TGn2K+1i1V6+12/E1/yx/zVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5bNm5fv0WrVFVy5XVFNFFNMzNUzPaIiI95/JLt0leFDyTyxOm705zuZvFXHtzy3bOkzainXNTtz6x2t1RMYlEx+1dia/pb7TFQI1eJeF+Tec+V8bZXFu0M/d2v3e0128S32tYtEz2+Lfu1dqLNuP365iPl6z6LFPSb4TnHHFkabvPne5h8p7/t+W9Z0aLc1aHptfvHeiqInLrj965EW/pbntFSTDiPhbjHgvijG2VxbtDB2loNrtVcoxbfe7lXIjt8W/dq713rk/v1zM/KO0ejKQPDj49rGxLdixbptWbdEUW7dFMU00UxHaIiI9IiI+UPMAAAAAAAAAAAAAAAAADxXr1uxj13btym1bppmquuuqIimI9ZmZn5RHq8rRLxHObv6EfCv37nYGbGJunc9uNtaHMVxFcXcqmqL1yn596Mem/VE/KYpBWR6yubLnUB4jXJfI1nJnI0G9qdWDt+O/wCGjT8b+px5iPl56aZuT/FcqavOZnvV3cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+xoOga3ujd2n7f25pOZruu596LODp+n4td/Iybk+1Fu3RE1VT+UQD47Zfp26TOaep3f/3Rxntmu7pFi9FGqbk1CKrGl6bE/wCJe7T5qu3r8OiKq5/d7eqVPpI8ITNzo03fPVJfr07Eny3sfYWm5Pa/dj3iM7Ion+rj62rM+b19a6Z70p7tpbP2vsPYGm7V2boGBtjben2YtYOmaZi04+PYpj5U0UxEevvM+8z6zMyDRjpN8OfhbposYG5c7Go5I5Xt0xVVubVsWmLeFX8/sWPMzTY/5kzVdn1/FET5UhcR2j0AAAAAAAAAAAAAAAAAAAAAD2hWP8Y7m/8ATLrd23w7pWZ8XRth6b8XUaLdfemrUsymm5VE9veaLEWI/Ka64WPuQ976JxrwZu7f+5L0WNB27pGRqedXNURM27Nua5pjv86u0UxHzmYUa+SN963ydz3vHkPcd2b2ubj1jI1PNnzTMU13rk1+SP4aYmKYj5RTAOkgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAER3ntDvHHnGu++WOUdP2XxztbUd4bozau2Pp+m483K5j511T+rRRHf8VdcxTTHrMwsK9JHhH7R2T92746k7mJvzdVHlvWNoY1Xn0jCq94jIr9Jy64+dPpa794mLkeoIlulXoH5s6o9XxdV0jT/0M4z+N5cveGsY9cY9cRPaqnFt+lWVXHr+rMURMdqq6VmTpl6MOE+lnaFNrYmhfeW779mLep7t1amm7qWX+9TTX27WbUz/AMK3ER7ebzT6tqcHAw9M0nGwNPxbOFg49qm1j4+Pai3bs0Ux2popppiIppiPSIiIiHtge0AAAAAAAAAAAAAAAAAAAAAAA/FyuLdE1TMRTEd5mZ7RH5gh18YvnX9DOizbnDGk5nwtc35qHxtTot1/ip0zEqprqie3tFy/NmmPrFuuFZD3nu3K69Oe56hvEr33u3AzJyto6Xe+49sdqu9E4WLVVTFyn19rtybt7/qR9GmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMy8K8A8r9QfK1rZ/FO0cvc2pfhqy8iin4eJp9uZ7fFyL9X4LVHv8ArT3nt2piqfQGG4iZntCTjpI8Mjl3qCnTt376pyOKeKL0U3aNQzsX/wAS1S37/wBkx6+3amY9r1ztR6xNMXPZLj0keFxxTwXOm7y5R+ycsco2vLdtVZGNM6RpVz3/ALPYr/va6Z9rt2PlE00USlRiIiO0AwXwX038Q9OXFtO1eKdp4+hWLlNP3hqNyIvahqVcft5GRMea5PvMU+lFPefLTTHozqAAAAAAAAAAAAAAAAAAAAAAAAACOnxL+pS3wJ4eer6PoufGLyHvum7omhU0V9ruPZqo7ZmVHzj4dqryRMe1d2j6N9N27r29sbjbXN37r1bH0Lbej4VzN1LUMqvy28ezbpmqquZ/lHtHrM9oj1lTV6y+pnWeqbrV1zf9+m9g7Txafu7ael3av/Y8C3VM0TVHftF25Mzcrn96ry95imAaoTPerv7OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+YDz4+Neysu1j49qu/fuVxRat26Jqqrqme0UxEeszM+0Q2T6c+kjmnqe3/Olcbbbrq0THvRRqu5dRiqzpenRPv8S92nzV9vWLVuKq5+nbvMWYuk3w8eF+mLEwdw1Y0chcrUW4m7urVsantiV9vWMKxMzTjx/H3quz6964ifKCJTpH8JrfvJX3ZvjqCrzeNNjXPLesbdt0xRreo0e8RciqJjDon+OJuzHf8ABT6VLE3GHE3HXDPFGDsnjLaWn7P21ix3oxMGz5ZuV9u03Ltc967tye3rXXNVU/VkX2AAAAAAAAAAAAAAAAAAAAAAAAAAAHq5ubiadpeRnZ2RaxMOxaqu379+5FFu1RTHmqrqqn0ppiImZmfSIjvL4+692bb2Nx7q27N363hbc23peNVkahqWoZFNmxj2496qqp9I+kR7zMxEd5nsrGde3iR631AV6lxVxDey9t8L03Jt5+bVFVnN3N5Z97ke9rG7+tNn9ar0m58qKQ8/iSdfX9Pm7L3DnE2pXKeGtJy/NqOpWqpo/SXKt1fhr+v2W3Md7dM/r1R8SY9KIiJE957yAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB826/Sx0I82dU2uY+ft7TP0U45pveTN3lrFiqnEjtP4qMej0qyrkev4aPwxPpVXQDT7Q9C1ncu69P0Lb+lZmua3nX6bGFp+n41V/IyblXtRbt0RNVVU/SITo9I3hDZ2oTpm+uqW9XpmDPlvY2wtOye1+7HvEZ2RRP9XH1tWp83r610zE0pWemHop4U6WNp2/0J0X733tes+TUt36vRTd1HJ7x+Kmie3lsWp/w7faJjt5prmO7bz5A65tPaG2Ni7A0zauztAwNs7b06zFnB03TMWixj2KI+VNFMREfWZ95n1nvLsYAAAAAAAAAAAAAAAAAAAAAAAAAA6xvDeu0uP8Aj/Ud1723Hp21Nt4Fua8zUtVy6MexZj866piO8+0Ux6zPpETIOztWepfrA4Z6WuPatS5B12MncmRYqr0jaum103dT1CflMW+/a3b7+k3bkxRHr2809qZin6rvGDiadS2X0t6fPefNau791jF9vl5sLFrj/a7fj/p+1SCLdW7Ny7337qe6d367n7l3HqN6b2dqWp5VeRkZFc/OuuqZmfpHyiPSO0A2p6r+tvlzqu355tz5Ubb2BiX5uaPs/Tb9X2PGn2pu3qp7TkXu0/3lcdo7z5KaImYnTUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZG4u3ltzYfKmLuTcnHWj8oY2LHmsaJuDIv0YNdyJiYqu0Wa6artMdv1Jq8s/tRMeiVPSvGf5h0bQ8XTNO4W49wNNxbNNnExMKnMsWbFumO1NFFFN3y00xHaIiIiI7IZnktWq716m3bpmuuqqKaaYjvMzPtER85BNZb8bTmaJn4/Duyq/p5MzNp/8A7l9LA8a3l/Lz7eLb4P2rm5N6um3Ys4+pZvnrqme0UxH4pqmfTtEerXHpp8Lnn/nGcDcG8MSeHOPr3luRqOvYlU6hl25+ePhd4r9Yn0quzbp7T3jzeywL05dDPT90z4GLmbL2pRrO9aKIi9u3X4py9Sqnt6/DqmIox4n92zTT6e81e4OrdNvLvWLzDGnbj5N4M2vwxsa7MV9tU1TLq1jJtz7TbxPLHw+/716aJ+cU1Q3scRER7OQAAAAAAAAAAAAAAAAAAAAAehqeqadouhZeqatn4+maZi2pu5WXl36bNmxREd5rrrqmKaaY+czMQD33zNY1rSNvbazdZ13U8TRtHw7U3czOzsmixYx6I96q7lcxTTEfWZhE31J+Ljw1xnOftvhfCjmTeNuJo+8bd6bOhY1f1m9H48ntPytRFM/4kIC+eurPnbqS3LVl8pb3ytR0mi758Pb2D/ZdKw/p5MamfLMx7eevz1/WqQTu9Svi98Vcf0522+BtNo5Z3Xb7251u/NdjQ8av601elzK7T8qPJRPyuSgG5v6k+Zeonfv3/wAr71zdxVWq5qwdNpq+Dp+BE/Kxj0dqKPT083aap7fiqlgr5gHzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABzETM+gOHMRM+0d293TZ4eHUN1H3MHWdP0D9A+Pb3aqd07ltV2LN6j641nt8XI/KaYij5TXCwZ02eG/089O/2DXKtF/pL5Dsdq/0k3Nj0Xfs9yP2sXG9bVjtPtV+O5H74IFOmrw1OoXqCnT9dz9J/os47yPLX+kG5Meui7k25+eNiely73j1iqryW5/fWC+m3w/enrpstYWraJtyN5b/ALMRNW69x26MjKt1/XHt9vh40d+/aaI8/b0mupvBEREz2cg4iIiPRyAAAAAAAAAAAAAAAAAAAAADxXr9rHx67t6um1aopmquuuqKaaaYjvMzM+0R9WsPUv1ecO9LPHNOq8h61N/cGXaqr0bbGmzTd1LUpj0700TMRbt9/SbtcxRHtEzP4ZrM9U/iEc59TWfnaLk6lOweMblcxZ2loeRVTbv0d/T7Xe9K8mr27xPlt+npRHuCbjqb8Vfg/hqrUNs8Zzb5m3/Zmq1VTpmVFOj4dyPSfi5cRMXZif2LMVd+0xNdMq+3UH1i89dS+vXLnJO8787di758TbGld8XScX17x2sRP9ZVHyruzXX+bV6ZmZ9XAHeZn1kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADt3n0AcxEzPo2x6d+irn7qX1ixc4/2hcxNpzd8mTuvWvNiaVZ9e09rsxM3qo/cs011fXt7rAfTV4VnA3DM6fuLkO1TzRv2z5bkXtZxYp0rEuR2n+pw+8019p/avTXPpExTSCBnpv6DuoTqXysTUdqbXnbmxblcfE3buKK8XAmn5zZ9JryJ/K1TVHf0mqn3WCOmrwxOn3gj7Br+48COXuQrHlrjV9w4tE4eLc+uNh95t0dpjvFdz4lcTHeJj2SP4+PZxcS1YsW6LNi3RFFu3bpimmimI7RTER6RER8oeYH4oopt0RTTEU0xHaIiPaPo/YAAAAAAAAAB8n4quU0W5qmYimI7zVM+kR/MH7GDd79THT9xxRdje3M2zdu5FuZirFytw485HePl8Kmqa5n8opanbu8V7o02xeu2sDe+r71v249aNA25kV01T+Vd+LVE/z7gkjEJG4/G24nxLl2Np8L7s1ymJmKKtU1LEwIq/PtR8aYYS1bxvt4Xb1z7j4B0XCt9/6v7fui/fqj+fks0AsSCtfX42XNHxo+Hw/sim36fhqys6qf9/iR/wBnZ9C8bve9nMtzuTgXQtRxpr/rPu3ceRi1dvy+JauR3BYpGh3S314bY6ns+xgaXxFyFtHKuUzM6jl6DXl6LExHt9vtR5KZ+nnpo7/JviAAAAA0C68+tfRukzgrGxtHs42ucu7hs1xtrSb8zNrGoifLVm5MR2n4VE+lNHeJuV/hiYiK6o31y8qxhabfy8q9Tj41m3VcvXa6u1NFFMd6qpn6RETKkr1W84ap1D9eHIHJ2dk3LunZ2o14+hWK5nti6dZqmjFt0x8vwRFc9veuuqfmDE+/+Qd5co8r6xvjf+4czdO69UvzeztRzrvmuXJ+URHtRRTHpTRTEU0xEREREOmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8wD5s/cG9MPNvUXvL7p4p2Pm6/j27kU5mr3I+BpuF/zsmvtRTPb18kTNc/KmU+XTX4QvFHH04G5ed9Sp5b3Xb7XI0WzTXY0PGr+k0T2uZXafnc8tE/O3IIJeAekbnfqV3JTjcYbKyMzRqLvkzNx6h3xdKxPX18+RVHaqqP3LcV1/wp/OmnwluFeK5wNycv36eZt62vLcjEy7E2tDxa49fw40z5sjt7d70zTP+HCVfSNG0rb+3MPR9D0zE0bSMO1FrEwcHGosWMeiPami3REU0xH0iIh9MHp4On4WmaTj4GnYlnBwce3FrHxse1Tbt2aIjtFNNNMRFMRHtER2e4AAAAAAHeI+YAxpyHzJxXxNoNWpclchbf2Pi+TzUffOq2seu7H8FuqfPXP5U0zKOLlTxh+mrZleRh8faZuHlrUqJmLd3CxPu7AqmPreyIi52/Om1MAloerl5uJg6dezM3JtYmJaomu7fvXIot0Ux85qntER/OVXjlLxiepXeH2nE4+0nbnFGnVxMW7uJifeWfTE/W9kd7ff86bMI7eRuduZOXNSuZPJfJu5N6zVPeLGq6vdu49v/JZ7xboj8qaYgFuDkzr56SuKasnH3HzRoepapZ9J07btyrVsjzfuzGNFdNM/5qqUfvJPjYce6d9oxuKeINb3RdifLbztx6ha02z/AJot2ou11R+UzRKuT3n6+n0cAlB5D8XLq33lOVY25qm3uM8G7+GiNA0Sm7fpp+nxsqbs9/zpin8uzSLfnULzjyfkXq9/8tbt3ZbuR2qx9Q16/XjxH0izFUW6Y/KKYYbAc+ae/fv2n6xDj3n19QAABstw3pXSfVONl87by5KtVeaJvaXs3bOFNHv7TlX8mav9rMflKWDhrn3wi+LKsXJ0LjfVo1e16xq28Np3dYyor/fia67tFE/8uilASAt56H4nfQ7lYtrGscuxo9qiiKbdnJ2xqNiiiI9ojtYmmP8ARkbT+v7o41SafsvUFtS13/8AjMi7jf8A7bdKmP3mPaXPmq7dvNPb+YLx2z+pHgDkHdODoWyeaNlbp13MmYxNN03cuNeyr8xTNUxRaivz1T2iZ7RHtEs2KQPSvv8As8XeIvwtvzKri1p+k7vwq86uZ7eXGruxavz/AOncrXfKZiaI7esdvSfqD9AA1e61d4ZOxPCl573LhXJs5lnZ2XjY92J9bdzJpjGpqj84m93Upqv15j6ei4t4kuJfzPBO53t401fEo0zEu1eX38lGoY1VX+naJ7qdFXpXMfmDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+bKfFHCnKfOHI1ranFeydT3lrNUx8WjBsd7WLTM9orv3qu1uzR/FcqphOx00+DltrR4wNzdSu4Y3VqMeW7G0NAyK7WBbn38uRlR2uXvzptfDp7x+tVAIPOGunvmDn/f8AG3eJtj6ju3KoriMvKs2/h4eFE/tX8ivtbtR/mqiZ+USnl6afB52BtL7BufqJ12nkbX6O1z9GdKruWNIsVek+W7d/Ddye0/T4dHymKoTDbO2TtHj7YGBtXY+2tM2ntzCoinF03ScKjGsW/T3iiiIjvPb1qnvMz6zMu0g+FtvbG3dn7NwNu7V0PA25oGDbi3h6dpmJRjY9imPlRboiKaf9IfdAAAAHEzEA5GDeWOpTgvg7Tq7/ACnydoW0r8UeanAyMyLmddjt3/Bi2/Neq/0o7IreYvGm2DpFWTp3CPGuo7yy6fw29Y3Ne+78OJ/epsUea9cp/Kqq1IJw5mIYJ5X6m+BeEMK7c5Q5T2/tXKojv93Xc6L2fX6d/wAOLa816r/yKrvL/iLdWPMdOXh6pyZk7O0C/wB4nR9n0fddjyz701XKJ+PXE/Su5MNJMnKyMvNu5OTeuZGTdrmu7du1zVXXVM95map9Zn85BY75c8abjTRYydP4Z421ffGXT+G3qm4L0aZhd/3qbVPnvVx+VXw5/ki/5a8Tbq55V+04tHIX9HWiXvNH3dsvG+7+0T6dvtHerIn09P7yI/JH4A+nq2s6truvZGqa1qWXq+p36vNfzM7Jrv3rk/WquuZqmf5y+YAAAAAAAAAAAAAAAOY7RV6+y5n0Gc62OfvDP493Vfy6cndGlYlOhblp83eunNxaabc11ev/ABbfwr3/AFPyUy0lPho9Wtnpx6xatt7x1H7JxTveqzhaxdu1z8PTMumrtjZs/KKYmqbdyf3K/NP6kAtpjxWb1F+zTct1RXRVETTVTV3iYn2mJeUGHOoTYFfKnQ7yzx3Zt/Ey9wbTzsHEiI/49dir4M/+pFCjbkWLuNmXLF+iq1et1TTcorp7VUVRPaYmPrE94X9JjvTMKhXiVdPORwP4k+5czTsGbGxt8XLm4dv3KKe1uiq7X3ysaPlE2r01dqflRct/UEfIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADI/GGu8bbc5Is6tyfsLUeSNBsdqqdDwdxfdFGRV39r16mzdr8nb9mjyVT+9DHDOHA3Tvyn1Ic1WNj8W7duavmx5a9Qz73e3g6ZZme3xsm92mLdPv2j1qqmO1NNU+gJYOJvFh0jZ+haHxrw30W6fpGNdvUY+m6FtzctXxMq9VPamIoowprvXKp/anzVTPvMp2eH9x8m7s4YwNwcrbAwOMdy5v9ZG3MPXJ1O5h25j8MX73wrdMXffvRR5op9I80z37ax9HvQXxZ0p7UsavZt2958s5ON5NS3bmY8RVZ80fis4due/2e18pnvNdf7VXbtTG9/wAgA79n4t3KLlMzRVFURMx3ie/rE9pgH7HytZ13Rtu7dydY1/VsLRNIxqJryM7UMqjHsWafrXcrmKaY/nKN3mvxXel7iyMvTtp6rmcx7ktd6Yx9sURGDTV9K8252tzHp72ouAk3mYiPWezG3I/MHGPEW06tb5M35oex9N8s1UXNY1GixVe7fK3RM+e5P5UUzKsxzT4tvU1yTOXp2xbuncM7eu96aaNCt/aNRmmflVl3omYn87VFuUaW5N1bl3huvJ17dev6jubXMie9/UNVzrmVkXZ/iuXJmqf9wWR+aPGV4X2rGXpvDm0NW5S1SjvTb1PO76Vpnf2iqPPTN+5Hz7fDo7/VEtzN4l3VhzFTl4NW/Z4627f81P3Vsu3OnxNM/KrI81WRV6ek/wBZET9GgQD2szOzNQ1O/m52VdzMy/XNd7Iv3JuXLlU+81VT61T+cy9UAAAAAAAAAAAAAAAAAAAAACJ7SAJ9fDY8RnC07SNA6eOfNcow8SxTRh7M3dn3u1u3R+rbwMu5V+rEelNq9VPaI7UVTERTKwLTVFVPePWJ9lAaJmJ7wlb6NfFB5C4GxtJ4+5Xt5nJfE9mabONcm95tW0W17RFi5XPa/apj2s3J9I7RRXTEeWQtQNUesPpd211W9JGobE1S9a0nc+HXOdtbXKrXmnT82Ke0ebt6zauR+C5TH7MxVH4qaWZeKuXOO+bOHdO35xlujD3VtnMjtRkYtf47NyI71Wr1ue1dq5T3jvRXEVR9O0xLJIKHPI3Hm7uKeadw8fb70a9oG6tEy6sbPwr8etFUesVUz7V0VUzFVNcelVNUTHpLpK3J18dCuh9VPEtO5NrRjaJzZoWJVTo2o3O1u1qlmO9X2HJq/dmZmbdyf7uqZ/ZqqhU83XtTcWx+RNY2lu3Rsvb+5dKy68XUdOzrM272NdontVTVTP8A39piYmO8TEg68AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADIPF+ncd6pzXouJyruPVtq7Dqu99V1DQ9Mpzs2miI7+S1bqqpjzVe3nnvFPv5au3lmzV0/dZ3hucQ8Fafsbi7f+HsPRcaIqvWNR2/qFrKyrvaIqv5F6bE/Gu1dvWqap+URERERFVRzEzHtMwC43qHiQdFOm4dd6/zzpN+KY7+TE03OyKp/lFFiWu+/fGM6X9uaddjZul7t5F1D/gxi6VTp+NV/muZFVNcR/K3P8lWzzVfWf93AJU+e/Fp6iOVMLM0PYFrE4V2xfiaKp0S9Vf1W5RPyqzK4iaP52aLc/wAT9bP8VHlPivoN2Hw9xntPTcXcGjYF21qO79fv16hfyL1zIu3qrlqx+GiJ/rI/Fdm53nvPZFUAy/yrz5zHzfuSdU5V5F1vet+K/PasZ+ZP2XHn/wCVj09rVqPX9iiGIZmZ95cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANhOnXqa5U6Y+b7G8+Ntbqx7dyaaNX0XKqqr0/V7MT/AHd+1Ex37evlrp7V0TPemY9Ym2f0pdWnG/VdwPG6dm3p0zcWDTRb3JtnKuxVlaTeqie0TMdviWqu1U27sR2qiJiYpqiqmKVjNnT7zzvrpy6nNA5N2FmTb1DBuRRm4FdyYx9Uxapj4uJeiPeiuI9/emqKao7TTALyCOvrm6Bdn9Vey53Rt+vF2jzVp2N8PTtcqt9rGp26Yny4ubFMd5p+VF2Imu33/ap70tzeIuT9tcz9NezOUdoXqr239x6ZbzcaK/17Mz6V2a/47dcV26v4qZZHBRC5N4u35w7zHq2weSNt5e1d1adX5cjCy6O3emf1bluqO9Ny3V703KJmmqPaXQF3DqJ6WeH+p7i39G+Ttv05OZj0VfdOvYXazqWl11e9Vm92n8Mz6zbriq3V86ZmImK3nUv4YHUDwdqOoazs/S73MXHlqaq7eqbfw5qz8a37/wBpwoma6ZiPeq18Sj07zNPsCNIefIxr+Ll3cfItV2ci3VNNy1cpmmuiYntMTE+sT+UvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmImZ7QnN6IfCntb32ZofK3UpGZp2g51ujL0fY+Pcqx8nLs1R5qLubcjtXZpqjtMWaO1cxMTVVR+qhL25rVe3N+6Jr9rBxNTuabn2cyjDz7U3MfIm1ciuLd2mJiaqKpp7VREx3iZjvDcjkXxGusHkm7kW87mDUtrabd7xGBtS1b0q3bif2YrtRF2Y/zXJBbb0DROOeHeIdM21oGFonHuy9MtTbwsK1NrCxbFPeaqpjzTEd5mZqqqme8zMzMzMzLG24erfpi2rkVWdd5+2DhZFPfzWY3Ti3a6fymm3XVMKVmvbs3PurVqs/c+4dT3HnVT3qyNU1C7lXJn6zVcqmXX+89+/t/IFzW54gXRvbyfhVdQO1pq79u9F69VT/vFvt/93Y9I61+kvXci1awOobYnxLnpTTk7gtY0/8A5Zp7KVHnr/en/dxNUz7z3/mC6jvLiPpI6ndNvfpBt7YHKGRfp/8Aemm5WNdzoiY96crGri9H/mRKdT3g6ZGlaHqW7umbcWVrXwqKrtWydwXqftNcR6zTiZf4Yrn6W70RM/4kz2iYIcXMysLNt5OHkXMXItz3t3bNc266Z+sVU9pbI8f9ZPVDxhXZjZ3OG7MLFtTE0YObqlWfiR+XwMn4lHb/AEBrtq+kanoO5s/RdawMjStXwcivHzcLMsVWr2Pdoqmmu3XRVETTVExMTEx3iYfOZg5u5r3Xz9zTVyHvrA0azvDIwrWPqmfo+nRh/edduJim/fopmaJu+Xy0TVTFMTFFPp3jvOHwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"/>
+</defs>
+</svg>
diff --git a/src/assets/img/token-logo-default.svg b/src/assets/img/token-logo-default.svg
new file mode 100644
index 000000000..1f1439c70
--- /dev/null
+++ b/src/assets/img/token-logo-default.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.09473" y="0.166992" width="13.3333" height="13.3333" rx="2" transform="rotate(45 9.09473 0.166992)" fill="#53565A"/>
+</svg>
diff --git a/src/assets/img/xor.svg b/src/assets/img/xor.svg
new file mode 100644
index 000000000..a666dda19
--- /dev/null
+++ b/src/assets/img/xor.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.8553 33.7763C34.3907 30.4388 37.3337 25.0634 37.3337 19.0005C37.3337 8.87534 29.1256 0.666992 19.0002 0.666992C8.875 0.666992 0.666992 8.87534 0.666992 19.0005C0.666992 25.0635 3.61008 30.439 8.14557 33.7764L17.5138 18.9628H7.92807V15.805H17.5138V12.555H7.92807V9.39716H30.0727V12.555H20.4888V15.805H30.0727V18.9628H20.4888L29.8553 33.7763Z" fill="#E3232C"/>
+<path d="M27.2777 35.3631L19.0002 22.268L10.7228 35.3631C13.2093 36.6234 16.0218 37.3337 19.0002 37.3337C21.9787 37.3337 24.7912 36.6234 27.2777 35.3631Z" fill="#E3232C"/>
+</svg>
diff --git a/src/components/ConfirmSwap.vue b/src/components/ConfirmSwap.vue
new file mode 100644
index 000000000..eb8fe4133
--- /dev/null
+++ b/src/components/ConfirmSwap.vue
@@ -0,0 +1,197 @@
+<template>
+  <s-dialog
+    :visible.sync="visible"
+    :title="t('swap.confirmSwap')"
+    class="el-dialog--swap-confirm"
+    width="496px"
+  >
+    <div class="tokens">
+      <div class="tokens-info-container">
+        <span class="token-value">{{ formattedFromValue }}</span>
+        <s-icon name="arrow-bottom-rounded" />
+        <span class="token-value">{{ formattedToValue }}</span>
+      </div>
+      <div class="tokens-info-container">
+        <div v-if="tokenFrom" class="token">
+          <span :class="getTokenClasses(tokenFrom)" />
+          {{ tokenFrom ? tokenFrom.symbol : '' }}
+        </div>
+        <div v-if="tokenTo" class="token">
+          <span :class="getTokenClasses(tokenTo)" />
+          {{ tokenTo ? tokenTo.symbol : '' }}
+        </div>
+      </div>
+    </div>
+    <p class="transaction-message" v-html="t('swap.swapOutputMessage', { transactionValue : `<span class='transaction-number'>${toValue}</span>` })"/>
+    <s-divider />
+    <swap-info :showPrice="true" />
+    <swap-info />
+    <template #footer>
+      <s-button type="primary" size="medium" @click="handleConfirmSwap">{{ t('swap.confirmSwap') }}</s-button>
+    </template>
+  </s-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Getter, Action } from 'vuex-class'
+import TranslationMixin from '@/components/mixins/TranslationMixin'
+import { formatNumber } from '@/utils'
+import SwapInfo from '@/components/SwapInfo.vue'
+
+@Component({
+  components: { SwapInfo }
+})
+export default class ConfirmSwap extends Mixins(TranslationMixin) {
+  @Getter tokenFrom!: any
+  @Getter tokenTo!: any
+  @Getter fromValue!: number
+  @Getter toValue!: number
+  @Action setSwapConfirm
+
+  @Prop({ default: false, type: Boolean }) readonly visible!: boolean
+
+  get formattedFromValue (): string {
+    return formatNumber(this.fromValue, 4)
+  }
+
+  get formattedToValue (): string {
+    return formatNumber(this.toValue, 4)
+  }
+
+  getTokenClasses (token): string {
+    let classes = 'token-logo'
+    if (token && token.symbol) {
+      classes += ' token-logo--' + token.symbol.toLowerCase()
+    }
+    return classes
+  }
+
+  handleConfirmSwap (): void {
+    // TODO: Make Swap here
+    this.setSwapConfirm(true)
+    this.$emit('close')
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/layout';
+@import '../styles/typography';
+@import '../styles/soramitsu-variables';
+
+$el-dialog-class: '.el-dialog';
+$el-dialog-button-size: 40px;
+
+#{$el-dialog-class} {
+  &__wrapper #{$el-dialog-class} {
+    border-radius: $border-radius-medium;
+    &__header,
+    &__footer {
+      padding: $inner-spacing-big;
+    }
+    &__body {
+      padding: $inner-spacing-mini $inner-spacing-big;
+    }
+  }
+  #{$el-dialog-class}__header {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    #{$el-dialog-class}__title {
+      font-size: $s-font-size-big;
+      font-weight: normal;
+    }
+  }
+  .transaction-number {
+    color: $s-color-base-content-primary;
+    font-weight: bold;
+  }
+  #{$el-dialog-class}__headerbtn {
+    position: static;
+    margin-left: auto;
+    height: $el-dialog-button-size;
+    width: $el-dialog-button-size;
+    background-color: $s-color-base-background;
+    border-color: $s-color-base-background;
+    border-radius: $inner-spacing-small;
+    #{$el-dialog-class}__close {
+      color: $s-color-base-content-primary;
+      font-weight: bold;
+      font-size: $el-dialog-button-size / 2;
+    }
+    color: $s-color-base-content-primary;
+    &:hover, &:active, &:focus {
+      background-color: $s-color-base-background-hover;
+      border-color: $s-color-base-background-hover;
+      #{$el-dialog-class}__close {
+        color: $s-color-base-content-primary;
+      }
+    }
+  }
+  #{$el-dialog-class}__footer {
+    .el-button {
+      padding: $inner-spacing-mini;
+      border-radius: $border-radius-small;
+      width: 100%;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+@import '../styles/layout';
+@import '../styles/typography';
+@import '../styles/soramitsu-variables';
+
+.el-dialog--swap-confirm {
+  .el-dialog {
+    &__header {
+      padding: $inner-spacing-big;
+    }
+    &__body {
+      padding: $inner-spacing-mini $inner-spacing-big;
+    }
+    &__footer {
+      padding: $inner-spacing-big;
+    }
+  }
+  .tokens {
+    display: flex;
+    justify-content: space-between;
+    font-size: 30px;
+    &-info-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+  .token {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    &-logo {
+      display: block;
+      margin-right: $inner-spacing-medium;
+      flex-shrink: 0;
+      @include token-logo-styles;
+    }
+  }
+  .s-icon-arrow-bottom-rounded {
+    margin-top: $inner-spacing-mini;
+    margin-bottom: $inner-spacing-mini;
+    display: block;
+    font-size: $s-font-size-medium;
+  }
+  .transaction-message {
+    margin-top: $inner-spacing-big;
+    color: $s-color-base-content-tertiary;
+    line-height: 1.8;
+  }
+  .el-divider {
+    margin-top: $inner-spacing-mini;
+    margin-bottom: $inner-spacing-big;
+  }
+}
+</style>
diff --git a/src/components/Swap.vue b/src/components/Swap.vue
index 3c2222a7d..f8848b006 100644
--- a/src/components/Swap.vue
+++ b/src/components/Swap.vue
@@ -1,6 +1,6 @@
 <template>
   <s-form
-    v-model="swapForm"
+    v-model="formModel"
     class="el-form--swap"
     :show-message="false"
   >
@@ -9,26 +9,27 @@
         <div class="input-title">{{ t('exchange.from') }}</div>
         <div v-if="isWalletConnected && tokenFrom" class="token-balance">
           <span class="token-balance-title">{{ t('exchange.balance') }}</span>
-          <span class="token-balance-value">{{ formatNumber(tokenFrom.balance, 2) }}</span>
+          <span class="token-balance-value">{{ getTokenBalance(tokenFrom) }}</span>
         </div>
       </div>
       <div class="input-line">
         <s-form-item>
           <s-input
-            v-model="swapForm.tokenFromValue"
-            v-float="swapForm.tokenFromValue"
-            :placeholder="formatNumber(0, 2)"
-            :disabled="!tokensSelected"
-            @change="handleChangeFromValue"
-            @blur="handleBlurFromValue"
+            v-model="formModel.from"
+            v-float="formModel.from"
+            :placeholder="inputPlaceholder"
+            :disabled="!areTokensSelected"
+            @change="handleChangeFieldFrom"
+            @blur="handleBlurFieldFrom"
           />
         </s-form-item>
         <div v-if="tokenFrom" class="token">
-          <s-button v-if="isWalletConnected" class="el-button--max" type="tertiary" size="small" @click="handleMaxValue">
+          <!-- TODO: Fix secondary сolors in UI Library and project -->
+          <s-button v-if="isWalletConnected && areTokensSelected" class="el-button--max" type="tertiary" size="small" @click="handleMaxFromValue">
             {{ t('exchange.max') }}
           </s-button>
           <s-button type="tertiary" size="small" icon="chevron-bottom-rounded" class="el-button--choose-token" @click="handleChooseToken(true)">
-            <span class="logo">{{ tokenFrom.logo }}</span>
+            <span :class="getTokenClasses(tokenFrom)" />
             {{ tokenFrom.symbol }}
           </s-button>
         </div>
@@ -37,7 +38,7 @@
         </s-button>
       </div>
     </div>
-    <s-button class="el-button--switch-tokens" type="action" size="medium" icon="change-positions" @click="handleSwitchTokens"></s-button>
+    <s-button class="el-button--switch-tokens" type="action" size="medium" icon="change-positions" @click="handleSwitchTokens" />
     <div class="input-container">
       <div class="input-line">
         <div class="input-title">
@@ -46,269 +47,226 @@
         </div>
         <div v-if="isWalletConnected && tokenTo" class="token-balance">
           <span class="token-balance-title">{{ t('exchange.balance') }}</span>
-          <span class="token-balance-value">{{ formatNumber(tokenTo.balance, 2) }}</span>
+          <span class="token-balance-value">{{ getTokenBalance(tokenTo) }}</span>
         </div>
       </div>
       <div class="input-line">
         <s-form-item>
           <s-input
-            v-model="swapForm.tokenToValue"
-            v-float="swapForm.tokenToValue"
-            :placeholder="formatNumber(0, 2)"
-            :disabled="!tokensSelected"
-            @change="handleChangeToValue"
-            @blur="handleBlurToValue"
+            v-model="formModel.to"
+            v-float="formModel.to"
+            :placeholder="inputPlaceholder"
+            :disabled="!areTokensSelected"
+            @change="handleChangeFieldTo"
+            @blur="handleBlurFieldTo"
           />
         </s-form-item>
         <div v-if="tokenTo" class="token">
           <s-button type="tertiary" size="small" icon="chevron-bottom-rounded" class="el-button--choose-token" @click="handleChooseToken">
-            <span class="logo">{{ tokenTo.logo }}</span>
+            <span :class="getTokenClasses(tokenTo)" />
             {{ tokenTo.symbol }}
           </s-button>
         </div>
         <s-button v-else type="tertiary" size="small" icon="chevron-bottom-rounded" class="el-button--empty-token" @click="handleChooseToken">
-          {{t('swap.chooseToken')}}
+          {{ t('swap.chooseToken') }}
         </s-button>
       </div>
     </div>
-    <template v-if="tokensSelected">
-      <div class="swap-info">
-        <span>{{ t('exchange.price') }}</span>
-        <span class="swap-info-value">{{ priceValue }}</span>
-        <s-button class="el-button--switch-price" type="action" size="small" icon="swap" @click="handleSwitchPrice"></s-button>
-      </div>
-      <div class="swap-info swap-info--slippage-tolerance">
-        <span>{{ t('swap.slippageTolerance') }}</span>
-        <span class="swap-info-value">{{ slippageToleranceValue }}%</span>
-      </div>
-    </template>
+    <swap-info v-if="areTokensSelected" :showPrice="true" :showSlippageTolerance="true" />
     <s-button v-if="!isWalletConnected" type="primary" size="medium" @click="handleConnectWallet">
       {{ t('swap.connectWallet') }}
     </s-button>
-    <s-button v-else type="primary" size="medium" :disabled="!tokensSelected || isEmptyBalance || isInsufficientBalance" @click="handleSwap">
-      <template v-if="!tokensSelected">
+    <s-button v-else type="primary" size="medium" :disabled="!areTokensSelected || isEmptyBalance || isInsufficientBalance" @click="handleConfirmSwap">
+      <template v-if="!areTokensSelected">
         {{ t('swap.chooseTokens') }}
       </template>
       <template v-else-if="isEmptyBalance">
         {{ t('swap.enterAmount') }}
       </template>
       <template v-else-if="isInsufficientBalance">
-        {{ t('swap.insufficientBalance') }}
+        {{ t('swap.insufficientBalance', { tokenSymbol: tokenFrom.symbol }) }}
       </template>
       <template v-else>
         {{ t('exchange.swap') }}
       </template>
     </s-button>
-    <template v-if="tokensSelected">
-      <div class="swap-info">
-        <s-tooltip class="swap-info-icon" :content="t('swap.minReceivedTooltip')" theme="light" placement="right-start" :show-arrow="false">
-          <s-icon name="info" size="16"/>
-        </s-tooltip>
-        <span>{{ t('swap.minReceived') }}</span>
-        <span class="swap-info-value">{{ minReceived }}</span>
-      </div>
-      <div class="swap-info">
-        <s-tooltip class="swap-info-icon" :content="t('swap.priceImpactTooltip')" theme="light" placement="right-start" :show-arrow="false">
-          <s-icon name="info" size="16"/>
-        </s-tooltip>
-        <span>{{ t('swap.priceImpact') }}</span>
-        <span :class="'swap-info-value ' + priceImpactClass">{{ priceImpact }}%</span>
-      </div>
-      <div class="swap-info">
-        <s-tooltip class="swap-info-icon" :content="t('swap.liquidityProviderFeeTooltip')" theme="light" placement="right-start" :show-arrow="false">
-          <s-icon name="info" size="16"/>
-        </s-tooltip>
-        <span>{{ t('swap.liquidityProviderFee') }}</span>
-        <span class="swap-info-value">{{ liquidityProviderFee }}</span>
-      </div>
-    </template>
+    <swap-info v-if="areTokensSelected" />
+    <select-token :visible="showSelectTokenDialog" @select="handleSelectToken" @close="closeSelectToken"/>
+    <confirm-swap :visible="showConfirmSwapDialog && !isSwapConfirmed" @close="closeConfirmSwapDialog" />
+    <transaction-submit :visible="isSwapConfirmed" @close="closeTransactionSubmitDialog" />
   </s-form>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import { Action, Getter } from 'vuex-class'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
+import { formatNumber } from '@/utils'
+import SwapInfo from '@/components/SwapInfo.vue'
+import SelectToken from '@/components/SelectToken.vue'
+import ConfirmSwap from '@/components/ConfirmSwap.vue'
+import TransactionSubmit from '@/components/TransactionSubmit.vue'
 
-@Component
+@Component({
+  components: { SwapInfo, SelectToken, ConfirmSwap, TransactionSubmit }
+})
 export default class Swap extends Mixins(TranslationMixin) {
-  // ------------------ Mock data start ------------------
-  // TODO: Add icon field to tokens
-  tokens: any = {
-    XOR: {
-      name: 'Sora',
-      logo: '',
-      symbol: 'XOR',
-      address: '1f9840a85d5af5bf1d1762f925bdaddc4201f984',
-      balance: 10000,
-      price: 0.0025
-    },
-    KSM: {
-      name: 'Kusama',
-      logo: '',
-      symbol: 'KSM',
-      address: '34916349d43f65bccca11ff53a8e0382a1a594a7',
-      balance: 0,
-      price: 0.0055
-    },
-    ETH: {
-      name: 'Ether',
-      logo: '',
-      symbol: 'ETH',
-      address: '8adaca8ea8192656a15c88797e04c8771c4576b3',
-      balance: 20000.45,
-      price: 0.0099
-    }
-  };
-
-  // TODO: Add Slippage Tolerance value for appropriate place
-  slippageToleranceValue = 0.5;
-  // ------------------ Mock data end ------------------
+  @Getter isWalletConnected!: any
+  @Getter tokenFrom!: any
+  @Getter tokenTo!: any
+  @Getter fromValue!: number
+  @Getter toValue!: number
+  @Getter isSwapConfirmed!: boolean
+  @Action connectWallet
+  @Action setTokenFrom
+  @Action setTokenTo
+  @Action setFromValue
+  @Action setToValue
+  @Action setTokenFromPrice
 
-  tokenFrom: any = null;
-  tokenTo: any = null;
-  swapForm: any = {
-    tokenFromValue: this.formatNumber(0, 1),
-    tokenToValue: this.formatNumber(0, 1)
-  };
+  inputPlaceholder: string = formatNumber(0, 2);
+  isFieldFromFocused = false;
+  isFieldToFocused = false;
+  isTokenFromSelected = false;
+  showSelectTokenDialog = false;
+  showConfirmSwapDialog = false;
+  showTransactionSubmitDialog = false;
 
-  isTokenFromFocused = false;
-  isTokenToFocused = false;
-  isSwitchTokensClicked = false;
-  isTokenFromPrice = true;
-
-  get isWalletConnected (): boolean {
-    return localStorage.getItem('walletAddress') !== null
+  formModel = {
+    from: formatNumber(0, 1),
+    to: formatNumber(0, 1)
   }
 
-  get tokensSelected (): boolean {
+  get areTokensSelected (): boolean {
     return this.tokenFrom && this.tokenTo
   }
 
-  get priceValue (): string {
-    if (this.isTokenFromPrice) {
-      return this.formatNumber(this.tokenFrom.price / this.tokenTo.price, 4) + ` ${this.tokenFrom.symbol + ' / ' + this.tokenTo.symbol}`
-    }
-    return this.formatNumber(this.tokenTo.price / this.tokenFrom.price, 4) + ` ${this.tokenTo.symbol + ' / ' + this.tokenFrom.symbol}`
-  }
-
   get isEmptyBalance (): boolean {
-    return +this.swapForm.tokenFromValue === 0 || +this.swapForm.tokenToValue === 0
+    return +this.formModel.from === 0 || +this.formModel.to === 0
   }
 
   get isInsufficientBalance (): boolean {
-    if (this.tokensSelected) {
-      return +this.swapForm.tokenFromValue > this.tokenFrom.balance
+    if (this.areTokensSelected) {
+      return +this.formModel.from > this.tokenFrom.balance
     }
     return true
   }
 
-  get minReceived (): string {
-    // TODO: Generate min received value
-    return this.tokenFrom ? `${this.formatNumber(24351.25123, 4)} ${this.tokenFrom.symbol}` : ''
-  }
-
-  get priceImpact (): string {
-    // TODO: Generate price impact value, is could be positive or negative, use appropriate class to show it in layout
-    return this.formatNumber(0.0222, 2)
-  }
-
-  get priceImpactClass (): string {
-    if (+this.priceImpact > 0) {
-      return 'price-impact-positive'
-    }
-    if (+this.priceImpact < 0) {
-      return 'price-impact-negative'
+  getTokenBalance (token: any): string {
+    if (token) {
+      return formatNumber(token.balance, 2)
     }
     return ''
   }
 
-  get liquidityProviderFee (): string {
-    // TODO: Generate liquidity provider fee
-    return this.tokenFrom ? `${this.formatNumber(0.0006777, 4)} ${this.tokenFrom.symbol}` : ''
+  getTokenClasses (token): string {
+    let classes = 'token-logo'
+    if (token && token.symbol) {
+      classes += ' token-logo--' + token.symbol.toLowerCase()
+    }
+    return classes
   }
 
-  handleChangeFromValue (): void {
-    if (this.tokensSelected && +this.swapForm.tokenFromValue !== 0 && !this.isTokenToFocused) {
-      this.isTokenFromFocused = true
-      this.swapForm.tokenToValue = this.formatNumber(+this.swapForm.tokenFromValue * this.tokenFrom.price / this.tokenTo.price, 4)
+  handleChangeFieldFrom (): void {
+    if (this.areTokensSelected && !this.isFieldToFocused) {
+      this.isFieldFromFocused = true
+      if (+this.formModel.from === 0) {
+        this.formModel.to = formatNumber(0, 4)
+      } else {
+        this.formModel.to = formatNumber(+this.formModel.from * this.tokenFrom.price / this.tokenTo.price, 4)
+      }
+      this.setToValue(this.formModel.to)
     }
+    this.setFromValue(this.formModel.from)
   }
 
-  handleChangeToValue (): void {
-    if (this.tokensSelected && +this.swapForm.tokenToValue !== 0 && !this.isTokenFromFocused) {
-      this.isTokenToFocused = true
-      this.swapForm.tokenFromValue = this.formatNumber(+this.swapForm.tokenToValue * this.tokenTo.price / this.tokenFrom.price, 4)
-    }
-    if (this.isSwitchTokensClicked) {
-      this.handleBlurFromValue()
-      this.handleBlurToValue()
-      this.isSwitchTokensClicked = false
+  handleChangeFieldTo (): void {
+    if (this.areTokensSelected && !this.isFieldFromFocused) {
+      this.isFieldToFocused = true
+      if (+this.formModel.to === 0) {
+        this.formModel.from = formatNumber(0, 4)
+      } else {
+        this.formModel.from = formatNumber(+this.formModel.to * this.tokenTo.price / this.tokenFrom.price, 4)
+      }
+      this.setFromValue(this.formModel.from)
     }
+    this.setToValue(this.formModel.to)
   }
 
-  handleBlurFromValue (): void {
-    this.isTokenFromFocused = false
+  handleBlurFieldFrom (): void {
+    this.isFieldFromFocused = false
   }
 
-  handleBlurToValue (): void {
-    this.isTokenToFocused = false
+  handleBlurFieldTo (): void {
+    this.isFieldToFocused = false
   }
 
   handleSwitchTokens (): void {
     const currentTokenFrom = this.tokenFrom
-    const currentTokenFromValue = this.swapForm.tokenFromValue
-    this.isTokenFromFocused = true
-    this.isTokenToFocused = true
-    this.tokenFrom = this.tokenTo
-    this.tokenTo = currentTokenFrom
-    this.swapForm.tokenFromValue = this.swapForm.tokenToValue
-    this.swapForm.tokenToValue = currentTokenFromValue
-    this.isSwitchTokensClicked = true
-    this.isTokenFromPrice = true
+    const currentFieldFromValue = this.formModel.from
+    this.isFieldFromFocused = true
+    this.isFieldToFocused = true
+    this.setTokenFrom(this.tokenTo)
+    this.setTokenTo(currentTokenFrom)
+    this.formModel.from = this.formModel.to
+    this.formModel.to = currentFieldFromValue
+    this.isFieldFromFocused = false
+    this.isFieldToFocused = false
+    this.setTokenFromPrice(true)
+  }
+
+  handleMaxFromValue (): void {
+    this.formModel.from = this.tokenFrom.balance
   }
 
-  handleMaxValue (): void {
-    this.swapForm.tokenFromValue = this.tokenFrom.balance
+  handleConnectWallet (): void {
+    // TODO: Add Connect Wallet functionality, right now updated the value only on page reloading
+    this.connectWallet('43f65bccca11ff53840a85d5af5bf1d1762f92a8e03')
+    location.reload()
+  }
+
+  handleConfirmSwap (): void {
+    this.showConfirmSwapDialog = true
   }
 
   handleChooseToken (isTokenFrom: boolean): void {
-    // TODO: Add Select Token functionality here, default token for tokenFrom is XOR
     if (isTokenFrom) {
-      this.tokenFrom = this.tokenTo !== this.tokens.XOR ? this.tokens.XOR : this.tokens.ETH
-      this.$alert(`Token ${this.tokenFrom.symbol} is successfully selected!`, 'Success')
-    } else {
-      this.tokenTo = this.tokenFrom !== this.tokens.ETH ? this.tokens.ETH : this.tokens.XOR
-      this.$alert(`Token ${this.tokenTo.symbol} is successfully selected!`, 'Success')
+      this.isTokenFromSelected = true
     }
+    this.showSelectTokenDialog = true
   }
 
-  handleSwitchPrice (): void {
-    this.isTokenFromPrice = !this.isTokenFromPrice
+  handleSelectToken (token: any): void {
+    if (token) {
+      if (this.isTokenFromSelected) {
+        this.setTokenFrom(token)
+        this.isTokenFromSelected = false
+      } else {
+        this.setTokenTo(token)
+      }
+    }
   }
 
-  handleConnectWallet (): void {
-    // TODO: Add Connect Wallet functionality, right now updated the value only on page reloading
-    localStorage.setItem('walletAddress', '43f65bccca11ff53840a85d5af5bf1d1762f92a8e03')
-    this.$alert('The wallet is successfully connected!', 'Success')
+  closeSelectToken () {
+    this.showSelectTokenDialog = false
   }
 
-  handleSwap (): void {
-    // TODO: Add Swap functionality and show confirmation windows
-    this.$alert(`Output is estimated. You will receive at least ${this.swapForm.tokenToValue} or the transaction will revert.`, 'Confirm Swap')
-    this.tokenFrom.balance -= +this.swapForm.tokenFromValue
-    this.tokenTo.balance += +this.swapForm.tokenToValue
+  closeConfirmSwapDialog () {
+    this.showConfirmSwapDialog = false
+    if (this.isSwapConfirmed) {
+      this.showTransactionSubmitDialog = true
+    }
   }
 
-  // TODO: move to utils or another appropriate place, check for BigInt values
-  formatNumber (value: string | number, decimalLendth: number): string {
-    const valueNumber = +value
-    return valueNumber.toFixed(decimalLendth || 4)
+  closeTransactionSubmitDialog () {
+    this.showTransactionSubmitDialog = false
   }
 }
 </script>
 
 <style lang="scss">
 @import '../styles/layout';
+@import '../styles/typography';
 @import '../styles/soramitsu-variables';
 
 $swap-input-class: ".el-input";
@@ -370,9 +328,20 @@ $swap-input-class: ".el-input";
     }
   }
 }
+
+.el-tooltip__popper.is-light {
+  padding: $inner-spacing-mini;
+  max-width: 320px;
+  border: none !important;
+  border-radius: $border-radius-mini;
+  box-shadow: $s-shadow-tooltip;
+  font-size: $s-font-size-small;
+  line-height: 1.785;
+}
 </style>
 
 <style lang="scss" scoped>
+@import '../styles/mixins';
 @import '../styles/layout';
 @import '../styles/soramitsu-variables';
 
@@ -424,15 +393,10 @@ $swap-input-class: ".el-input";
         font-size: $s-font-size-small;
       }
     }
-    .logo {
+    .token-logo {
       margin-right: $inner-spacing-mini;
       order: 1;
-      height: 23px;
-      width: 23px;
-      background-color: $s-color-utility-surface;
-      border: 1px solid $s-color-utility-surface;
-      border-radius: $border-radius-small;
-      box-shadow: $s-shadow-tooltip;
+      @include token-logo-styles(23px);
     }
   }
   .s-input {
@@ -469,54 +433,6 @@ $swap-input-class: ".el-input";
       border-color: $s-color-button-tertiary-background-focused;
     }
   }
-  .swap-info {
-    display: flex;
-    align-items: center;
-    margin-top: $inner-spacing-mini;
-    width: 100%;
-    padding-right: $border-radius-mini;
-    padding-left: $border-radius-mini;
-    color: $s-color-base-content-secondary;
-    &--slippage-tolerance {
-      margin-top: $inner-spacing-small;
-    }
-    &-value {
-      margin-left: auto;
-    }
-    .price-impact {
-      &-positive {
-        color: $s-color-status-success;
-      }
-      &-negative {
-        color: $s-color-status-error;
-      }
-    }
-    .el-tooltip {
-      margin-right: $inner-spacing-small;
-    }
-    &-icon {
-      position: relative;
-      height: $inner-spacing-big;
-      width: $inner-spacing-big;
-      background-color: $s-color-base-background;
-      border-radius: $border-radius-small;
-      &:hover {
-        background-color: $s-color-base-background-hover;
-        cursor: pointer;
-      }
-      &:before {
-        position: absolute;
-        display: block;
-        height: 14px;
-        width: 14px;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-      }
-    }
-  }
   .el-button {
     &--switch-tokens {
       &,
@@ -553,10 +469,6 @@ $swap-input-class: ".el-input";
         color: $s-color-base-content-primary;
       }
     }
-    &.el-button--switch-price {
-      margin-right: 0;
-      margin-left: $inner-spacing-mini;
-    }
   }
   .s-primary {
     margin-top: $inner-spacing-medium;
diff --git a/src/components/SwapInfo.vue b/src/components/SwapInfo.vue
new file mode 100644
index 000000000..753855108
--- /dev/null
+++ b/src/components/SwapInfo.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="swap-info-container">
+    <template v-if="showPrice || showSlippageTolerance">
+      <div v-if="showPrice" class="swap-info">
+        <span>{{ t('exchange.price') }}</span>
+        <span class="swap-info-value">{{ price }}</span>
+        <s-button class="el-button--switch-price" type="action" size="small" icon="swap" @click="handleSwitchPrice"></s-button>
+      </div>
+      <div v-if="showSlippageTolerance" class="swap-info swap-info--slippage-tolerance">
+        <span>{{ t('swap.slippageTolerance') }}</span>
+        <span class="swap-info-value">{{ slippageTolerance }}%</span>
+      </div>
+    </template>
+    <template v-else>
+      <div class="swap-info">
+        <s-tooltip class="swap-info-icon" :content="t('swap.minReceivedTooltip')" theme="light" placement="right-start" :show-arrow="false">
+          <s-icon name="info" size="16"/>
+        </s-tooltip>
+        <span>{{ t('swap.minReceived') }}</span>
+        <span class="swap-info-value">{{ minReceived }}</span>
+      </div>
+      <div class="swap-info">
+        <s-tooltip class="swap-info-icon" :content="t('swap.priceImpactTooltip')" theme="light" placement="right-start" :show-arrow="false">
+          <s-icon name="info" size="16"/>
+        </s-tooltip>
+        <span>{{ t('swap.priceImpact') }}</span>
+        <span :class="'swap-info-value ' + priceImpactClass">{{ priceImpact }}%</span>
+      </div>
+      <div class="swap-info">
+        <s-tooltip class="swap-info-icon" :content="t('swap.liquidityProviderFeeTooltip', { liquidityProviderFee })" theme="light" placement="right-start" :show-arrow="false">
+          <s-icon name="info" size="16"/>
+        </s-tooltip>
+        <span>{{ t('swap.liquidityProviderFee') }}</span>
+        <span class="swap-info-value">{{ liquidityProviderFeeValue }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Action, Getter } from 'vuex-class'
+import TranslationMixin from '@/components/mixins/TranslationMixin'
+import { formatNumber } from '@/utils'
+
+@Component
+export default class SwapInfo extends Mixins(TranslationMixin) {
+  @Getter tokenFrom!: any
+  @Getter tokenTo!: any
+  @Getter toValue!: number
+  @Getter isTokenFromPrice!: boolean
+  @Getter slippageTolerance!: number
+  @Getter liquidityProviderFee!: number
+  @Action setTokenFromPrice
+
+  @Prop({ default: false, type: Boolean }) readonly showPrice!: boolean
+  @Prop({ default: false, type: Boolean }) readonly showSlippageTolerance!: boolean
+
+  get price (): string {
+    if (this.isTokenFromPrice) {
+      return formatNumber(this.tokenFrom.price / this.tokenTo.price, 4) + ` ${this.tokenFrom.symbol + ' / ' + this.tokenTo.symbol}`
+    }
+    return formatNumber(this.tokenTo.price / this.tokenFrom.price, 4) + ` ${this.tokenTo.symbol + ' / ' + this.tokenFrom.symbol}`
+  }
+
+  get minReceived (): string {
+    // TODO: Generate value from tokenFromValue
+    return this.tokenFrom ? `${formatNumber(this.toValue, 4)} ${this.tokenTo.symbol}` : ''
+  }
+
+  get priceImpact (): string {
+    // TODO: Generate price impact value, is could be positive or negative, use appropriate class to show it in layout
+    return formatNumber(0.0222, 2)
+  }
+
+  get priceImpactClass (): string {
+    if (+this.priceImpact > 0) {
+      return 'price-impact-positive'
+    }
+    if (+this.priceImpact < 0) {
+      return 'price-impact-negative'
+    }
+    return ''
+  }
+
+  get liquidityProviderFeeValue (): string {
+    // TODO: Generate liquidity provider fee
+    return this.tokenFrom ? `${formatNumber(0.0006245, 4)} ${this.tokenTo.symbol}` : ''
+  }
+
+  handleSwitchPrice (): void {
+    this.setTokenFromPrice(!this.isTokenFromPrice)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/layout';
+@import '../styles/soramitsu-variables';
+
+.swap-info {
+  display: flex;
+  align-items: center;
+  margin-top: $inner-spacing-mini;
+  width: 100%;
+  padding-right: $border-radius-mini;
+  padding-left: $border-radius-mini;
+  color: $s-color-base-content-secondary;
+  &-container {
+    width: 100%;
+  }
+  &--slippage-tolerance {
+    margin-top: $inner-spacing-small;
+  }
+  &-value {
+    margin-left: auto;
+  }
+  .price-impact {
+    &-positive {
+      color: $s-color-status-success;
+    }
+    &-negative {
+      color: $s-color-status-error;
+    }
+  }
+  .el-tooltip {
+    margin-right: $inner-spacing-small;
+  }
+  &-icon {
+    position: relative;
+    height: $inner-spacing-big;
+    width: $inner-spacing-big;
+    background-color: $s-color-base-background;
+    border-radius: $border-radius-small;
+    &:hover {
+      background-color: $s-color-base-background-hover;
+      cursor: pointer;
+    }
+    &:before {
+      position: absolute;
+      display: block;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+  .el-button--switch-price {
+    margin-right: 0;
+    margin-left: $inner-spacing-mini;
+  }
+}
+</style>
diff --git a/src/components/TransactionSubmit.vue b/src/components/TransactionSubmit.vue
new file mode 100644
index 000000000..7acff30cf
--- /dev/null
+++ b/src/components/TransactionSubmit.vue
@@ -0,0 +1,96 @@
+<template>
+  <s-dialog
+    :visible.sync="visible"
+    :title="t('exchange.transactionSubmitted')"
+    class="el-dialog--transaction-submit"
+    width="496px"
+  >
+    <s-icon name="arrow-top-right-rounded" />
+    <s-divider />
+    <div class="transaction">
+      <div class="transaction-type">{{ t('exchange.swap') }}</div>
+      <div class="transaction-info">{{ transactionInfo }}</div>
+      <!-- TODO: Add correct icons and add functionality -->
+      <s-icon name="external-link" @click="handleTransactionInfo" />
+      <!-- <s-icon name="arrow-bottom-rounded" /> -->
+    </div>
+    <s-divider />
+    <template #footer>
+      <s-button type="primary" size="medium" @click="handleClose">{{ t('exchange.ok') }}</s-button>
+    </template>
+  </s-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Getter, Action } from 'vuex-class'
+import TranslationMixin from '@/components/mixins/TranslationMixin'
+
+@Component
+export default class TransactionSubmit extends Mixins(TranslationMixin) {
+  @Getter tokenFrom!: any
+  @Getter tokenTo!: any
+  @Getter fromValue!: number
+  @Getter toValue!: number
+  @Action setSwapConfirm
+
+  @Prop({ default: false, type: Boolean }) readonly visible!: boolean
+
+  get transactionInfo (): string {
+    return this.t('swap.transactionMessage', { tokenFromValue: this.getSwapValue(this.tokenFrom, this.fromValue), tokenToValue: this.getSwapValue(this.tokenTo, this.toValue) })
+  }
+
+  getSwapValue (token: any, tokenValue: number): string {
+    return token ? `${tokenValue} ${token.symbol}` : ''
+  }
+
+  handleTransactionInfo (): void {
+    // TODO: Go to Transaction Info
+  }
+
+  handleClose (): void {
+    this.setSwapConfirm(false)
+    this.$emit('close')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/layout';
+@import '../styles/soramitsu-variables';
+
+$transactionIconSize: 68px;
+
+.el-dialog--transaction-submit {
+  .s-icon-arrow-top-right-rounded {
+    font-size: $transactionIconSize;
+    color: $s-color-theme-accent;
+  }
+  .transaction {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    &-type,
+    .s-icon-external-link {
+      color: $s-color-base-content-secondary;
+    }
+    &-type {
+      display: block;
+      padding: $inner-spacing-mini / 2 $inner-spacing-mini;
+      margin-right: $inner-spacing-mini / 2;
+      text-transform: uppercase;
+      font-size: 10px;
+      font-weight: bold;
+      background-color: $s-color-base-background;
+      border-radius: $border-radius-mini;
+    }
+    &-info {
+      margin-right: $inner-spacing-mini;
+      font-weight: bold;
+    }
+    .s-icon-external-link {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/lang/en/index.ts b/src/lang/en/index.ts
index d6f3631eb..1df96da6a 100644
--- a/src/lang/en/index.ts
+++ b/src/lang/en/index.ts
@@ -38,7 +38,9 @@ export default {
     to: 'To',
     balance: 'Balance',
     max: 'MAX',
-    price: 'Price'
+    price: 'Price',
+    transactionSubmitted: 'Transaction submitted',
+    ok: 'OK'
   },
   swap: {
     chooseToken: 'Choose token',
@@ -51,9 +53,12 @@ export default {
     priceImpact: 'Price Impact',
     priceImpactTooltip: 'The difference between the market price and estimated price due to trade size.',
     liquidityProviderFee: 'Liquidity Provider Fee',
-    liquidityProviderFeeTooltip: 'A portion of each trade (0.3%) goes to liquidity providers as a protocol incentive.',
+    liquidityProviderFeeTooltip: 'A portion of each trade ({liquidityProviderFee}%) goes to liquidity providers as a protocol incentive.',
     enterAmount: 'Enter an amount',
-    insufficientBalance: 'Insufficient XOR balance'
+    insufficientBalance: 'Insufficient {tokenSymbol} balance',
+    confirmSwap: 'Confirm Swap',
+    swapOutputMessage: 'Output is estimated. You will receive at least {transactionValue} or the transaction will revert.',
+    transactionMessage: '{tokenFromValue} for {tokenToValue}'
   },
   selectToken: {
     title: 'Select a token',
diff --git a/src/mocks/swap.ts b/src/mocks/swap.ts
new file mode 100644
index 000000000..73e27ea7c
--- /dev/null
+++ b/src/mocks/swap.ts
@@ -0,0 +1,2 @@
+export const slippageTolerance = 0.5
+export const liquidityProviderFee = 0.3
diff --git a/src/store/swap.ts b/src/store/swap.ts
new file mode 100644
index 000000000..7afac61a7
--- /dev/null
+++ b/src/store/swap.ts
@@ -0,0 +1,125 @@
+import map from 'lodash/fp/map'
+import flatMap from 'lodash/fp/flatMap'
+import fromPairs from 'lodash/fp/fromPairs'
+import flow from 'lodash/fp/flow'
+import concat from 'lodash/fp/concat'
+
+import * as storage from '@/utils/storage'
+
+const types = flow(
+  flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
+  concat([
+    'GET_WALLET_CONNECTED',
+    'GET_TOKEN_FROM',
+    'GET_TOKEN_TO',
+    'GET_FROM_VALUE',
+    'GET_TO_VALUE',
+    'GET_TOKEN_FROM_PRICE',
+    'GET_SWAP_CONFIRM'
+  ]),
+  map(x => [x, x]),
+  fromPairs
+)([])
+
+function initialState () {
+  return {
+    isWalletConnected: false,
+    tokenFrom: null,
+    tokenTo: null,
+    fromValue: 0,
+    toValue: 0,
+    isTokenFromPrice: true,
+    slippageTolerance: 0.5,
+    liquidityProviderFee: 0.3,
+    isSwapConfirmed: false
+  }
+}
+
+const state = initialState()
+
+const getters = {
+  isWalletConnected (state) {
+    // TODO: Add Connect Wallet functionality
+    return !!storage.getItem('address')
+  },
+  tokenFrom (state) {
+    return state.tokenFrom
+  },
+  tokenTo (state) {
+    return state.tokenTo
+  },
+  fromValue (state) {
+    return state.fromValue
+  },
+  toValue (state) {
+    return state.toValue
+  },
+  isTokenFromPrice (state) {
+    return state.isTokenFromPrice
+  },
+  slippageTolerance (state) {
+    return state.slippageTolerance
+  },
+  liquidityProviderFee (state) {
+    return state.liquidityProviderFee
+  },
+  isSwapConfirmed (state) {
+    return state.isSwapConfirmed
+  }
+}
+
+const mutations = {
+  [types.GET_WALLET_CONNECTED] (state, isWalletConnected: boolean) {
+    state.isWalletConnected = isWalletConnected
+  },
+  [types.GET_TOKEN_FROM] (state, tokenFrom: any) {
+    state.tokenFrom = tokenFrom
+  },
+  [types.GET_TOKEN_TO] (state, tokenTo: any) {
+    state.tokenTo = tokenTo
+  },
+  [types.GET_FROM_VALUE] (state, fromValue: string | number) {
+    state.fromValue = fromValue
+  },
+  [types.GET_TO_VALUE] (state, toValue: string | number) {
+    state.toValue = toValue
+  },
+  [types.GET_TOKEN_FROM_PRICE] (state, isTokenFromPrice: boolean) {
+    state.isTokenFromPrice = isTokenFromPrice
+  },
+  [types.GET_SWAP_CONFIRM] (state, isSwapConfirmed: boolean) {
+    state.isSwapConfirmed = isSwapConfirmed
+  }
+}
+
+const actions = {
+  connectWallet ({ commit }, address: string) {
+    storage.setItem('address', address)
+    commit(types.GET_WALLET_CONNECTED, true)
+  },
+  setTokenFrom ({ commit }, token: any) {
+    commit(types.GET_TOKEN_FROM, token)
+  },
+  setTokenTo ({ commit }, token: any) {
+    commit(types.GET_TOKEN_TO, token)
+  },
+  setFromValue ({ commit }, fromValue: string | number) {
+    commit(types.GET_FROM_VALUE, fromValue)
+  },
+  setToValue ({ commit }, toValue: string | number) {
+    commit(types.GET_TO_VALUE, toValue)
+  },
+  setTokenFromPrice ({ commit }, isTokenFromPrice: boolean) {
+    commit(types.GET_TOKEN_FROM_PRICE, isTokenFromPrice)
+  },
+  setSwapConfirm ({ commit }, isSwapConfirmed: boolean) {
+    commit(types.GET_SWAP_CONFIRM, isSwapConfirmed)
+  }
+}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index a56338e48..7995e4a1e 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,7 +1,7 @@
 $basic-spacing: 10px;
 
 $inner-window-width: 448px;
-$inner-window-height: 352px;
+$inner-window-height: 298px;
 
 $inner-spacing-mini: 8px;
 $inner-spacing-small: $inner-spacing-mini * 1.5;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 000000000..8f5c93e40
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,26 @@
+// This file includes mixins for usage in different components
+
+@mixin token-logo-styles($size: 40px) {
+  height: $size;
+  width: $size;
+  background-color: $s-color-base-border-secondary;
+  background-image: url("~@/assets/img/token-logo-default.svg");
+  background-size: 60%;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  border: 1px solid $s-color-base-border-secondary;
+  border-radius: 50%;
+  box-shadow: $s-shadow-tooltip;
+
+  &--ksm,
+  &--xor {
+    background-size: 100%;
+  }
+
+  &--ksm {
+    background-image: url("~@/assets/img/ksm.svg");
+  }
+  &--xor {
+    background-image: url("~@/assets/img/xor.svg");
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 000000000..0873fd5ac
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,4 @@
+export const formatNumber = (value: string | number, decimalLendth: number): string => {
+  const valueNumber = +value
+  return valueNumber.toFixed(decimalLendth || 4)
+}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 000000000..25625976a
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,15 @@
+export const getItem = (key) => {
+  return localStorage.getItem(key)
+}
+
+export const setItem = (key, value) => {
+  localStorage.setItem(key, value)
+}
+
+export const removeItem = (key) => {
+  localStorage.removeItem(key)
+}
+
+export const clear = () => {
+  localStorage.clear()
+}
diff --git a/tests/unit/views/ConfirmSwap.spec.ts b/tests/unit/views/ConfirmSwap.spec.ts
new file mode 100644
index 000000000..30eaf1b30
--- /dev/null
+++ b/tests/unit/views/ConfirmSwap.spec.ts
@@ -0,0 +1,41 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
+import ConfirmSwap from '@/components/ConfirmSwap.vue'
+import { tokens } from '@/mocks/tokens'
+import { TranslationMock } from '../../utils'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(SoramitsuElements)
+
+describe('ConfirmSwap.vue', () => {
+  let actions
+  let getters
+  let store
+
+  beforeEach(() => {
+    TranslationMock(ConfirmSwap)
+
+    actions = {
+      setSwapConfirm: jest.fn()
+    }
+
+    getters = {
+      tokenFrom: () => tokens[0],
+      tokenTo: () => tokens[1],
+      fromValue: () => 150.123654,
+      toValue: () => 0
+    }
+
+    store = new Vuex.Store({
+      actions,
+      getters
+    })
+  })
+
+  it('should renders correctly', () => {
+    const wrapper = shallowMount(ConfirmSwap, { localVue, store })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/tests/unit/views/Exchange.spec.ts b/tests/unit/views/Exchange.spec.ts
index a5ea78a58..9fbc75742 100644
--- a/tests/unit/views/Exchange.spec.ts
+++ b/tests/unit/views/Exchange.spec.ts
@@ -1,9 +1,11 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
 import Exchange from '@/views/Exchange.vue'
 import { TranslationMock } from '../../utils'
 
 const localVue = createLocalVue()
+localVue.use(SoramitsuElements)
 
 describe('Exchange.vue', () => {
   beforeEach(() => {
diff --git a/tests/unit/views/Swap.spec.ts b/tests/unit/views/Swap.spec.ts
index f967601d1..9062ddabc 100644
--- a/tests/unit/views/Swap.spec.ts
+++ b/tests/unit/views/Swap.spec.ts
@@ -1,17 +1,48 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
-
+import Vuex from 'vuex'
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 import Swap from '@/components/Swap.vue'
+import { tokens } from '@/mocks/tokens'
 import { TranslationMock } from '../../utils'
 
 const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(SoramitsuElements)
 
 describe('Swap.vue', () => {
+  let actions
+  let getters
+  let store
+
   beforeEach(() => {
     TranslationMock(Swap)
+
+    actions = {
+      connectWallet: jest.fn(),
+      setTokenFrom: jest.fn(),
+      setTokenTo: jest.fn(),
+      setFromValue: jest.fn(),
+      setToValue: jest.fn(),
+      setTokenFromPrice: jest.fn()
+    }
+
+    getters = {
+      isWalletConnected: () => false,
+      tokenFrom: () => tokens[0],
+      tokenTo: () => tokens[1],
+      fromValue: () => 100,
+      toValue: () => 45.4545,
+      isSwapConfirmed: () => false
+    }
+
+    store = new Vuex.Store({
+      actions,
+      getters
+    })
   })
 
   it('should renders correctly', () => {
-    const wrapper = shallowMount(Swap, { localVue })
+    const wrapper = shallowMount(Swap, { localVue, store })
     expect(wrapper.element).toMatchSnapshot()
   })
 })
diff --git a/tests/unit/views/SwapInfo.spec.ts b/tests/unit/views/SwapInfo.spec.ts
new file mode 100644
index 000000000..cb5374939
--- /dev/null
+++ b/tests/unit/views/SwapInfo.spec.ts
@@ -0,0 +1,38 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
+import SwapInfo from '@/components/SwapInfo.vue'
+import { slippageTolerance, liquidityProviderFee } from '@/mocks/swap'
+import { tokens } from '@/mocks/tokens'
+import { TranslationMock } from '../../utils'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(SoramitsuElements)
+
+describe('SwapInfo.vue', () => {
+  let getters
+  let store
+
+  beforeEach(() => {
+    TranslationMock(SwapInfo)
+
+    getters = {
+      tokenFrom: () => tokens[0],
+      tokenTo: () => tokens[1],
+      toValue: () => 100,
+      isTokenFromPrice: () => true,
+      slippageTolerance: () => slippageTolerance,
+      liquidityProviderFee: () => liquidityProviderFee
+    }
+
+    store = new Vuex.Store({
+      getters
+    })
+  })
+
+  it('should renders correctly', () => {
+    const wrapper = shallowMount(SwapInfo, { localVue, store })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/tests/unit/views/TransactionSubmit.spec.ts b/tests/unit/views/TransactionSubmit.spec.ts
new file mode 100644
index 000000000..084d2ebd6
--- /dev/null
+++ b/tests/unit/views/TransactionSubmit.spec.ts
@@ -0,0 +1,35 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
+import TransactionSubmit from '@/components/TransactionSubmit.vue'
+import { tokens } from '@/mocks/tokens'
+import { TranslationMock } from '../../utils'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(SoramitsuElements)
+
+describe('TransactionSubmit.vue', () => {
+  let getters
+  let store
+
+  beforeEach(() => {
+    TranslationMock(TransactionSubmit)
+
+    getters = {
+      tokenFrom: () => tokens[0],
+      tokenTo: () => tokens[1],
+      fromValue: () => 100,
+      toValue: () => 45.4545
+    }
+
+    store = new Vuex.Store({
+      getters
+    })
+  })
+
+  it('should renders correctly', () => {
+    const wrapper = shallowMount(TransactionSubmit, { localVue, store })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/tests/unit/views/__snapshots__/ConfirmSwap.spec.ts.snap b/tests/unit/views/__snapshots__/ConfirmSwap.spec.ts.snap
new file mode 100644
index 000000000..9c5117765
--- /dev/null
+++ b/tests/unit/views/__snapshots__/ConfirmSwap.spec.ts.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmSwap.vue should renders correctly 1`] = `
+<s-dialog-stub
+  class="el-dialog--swap-confirm"
+  closeonclickmodal="true"
+  closeonesc="true"
+  customclass=""
+  lockscroll="true"
+  modal="true"
+  modalappendtobody="true"
+  showclose="true"
+  title=""
+  top="auto"
+  width="496px"
+>
+  <div
+    class="tokens"
+  >
+    <div
+      class="tokens-info-container"
+    >
+      <span
+        class="token-value"
+      >
+        150.1237
+      </span>
+       
+      <s-icon-stub
+        name="arrow-bottom-rounded"
+      />
+       
+      <span
+        class="token-value"
+      >
+        0.0000
+      </span>
+    </div>
+     
+    <div
+      class="tokens-info-container"
+    >
+      <div
+        class="token"
+      >
+        <span
+          class="token-logo token-logo--xor"
+        />
+        
+        XOR
+      
+      </div>
+       
+      <div
+        class="token"
+      >
+        <span
+          class="token-logo token-logo--ksm"
+        />
+        
+        KSM
+      
+      </div>
+    </div>
+  </div>
+   
+  <p
+    class="transaction-message"
+  />
+   
+  <s-divider-stub
+    contentposition="center"
+    direction="horizontal"
+    type="secondary"
+  />
+   
+  <swap-info-stub
+    showprice="true"
+  />
+   
+  <swap-info-stub />
+</s-dialog-stub>
+`;
diff --git a/tests/unit/views/__snapshots__/Exchange.spec.ts.snap b/tests/unit/views/__snapshots__/Exchange.spec.ts.snap
index 413cd77e5..6c9ea5ae8 100644
--- a/tests/unit/views/__snapshots__/Exchange.spec.ts.snap
+++ b/tests/unit/views/__snapshots__/Exchange.spec.ts.snap
@@ -4,20 +4,22 @@ exports[`Exchange.vue should renders correctly 1`] = `
 <div
   class="exchange-container"
 >
-  <s-tabs
+  <s-tabs-stub
+    position="top"
     type="rounded"
+    value="swap"
   >
-    <s-tab
+    <s-tab-stub
       name="swap"
     >
       <swap-stub />
-    </s-tab>
+    </s-tab-stub>
      
-    <s-tab
+    <s-tab-stub
       name="pool"
     >
       <pool-stub />
-    </s-tab>
-  </s-tabs>
+    </s-tab-stub>
+  </s-tabs-stub>
 </div>
 `;
diff --git a/tests/unit/views/__snapshots__/Swap.spec.ts.snap b/tests/unit/views/__snapshots__/Swap.spec.ts.snap
index 17423e5f2..5044cc672 100644
--- a/tests/unit/views/__snapshots__/Swap.spec.ts.snap
+++ b/tests/unit/views/__snapshots__/Swap.spec.ts.snap
@@ -1,8 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Swap.vue should renders correctly 1`] = `
-<s-form
+<s-form-stub
   class="el-form--swap"
+  labelposition="right"
+  validateonrulechange="true"
+  value="[object Object]"
 >
   <div
     class="input-container"
@@ -22,30 +25,57 @@ exports[`Swap.vue should renders correctly 1`] = `
     <div
       class="input-line"
     >
-      <s-form-item>
-        <s-input
-          disabled="true"
+      <s-form-item-stub
+        prop=""
+        showmessage="true"
+      >
+        <s-input-stub
+          accept=""
+          autocomplete="off"
+          form=""
+          label=""
+          name=""
           placeholder="0.00"
+          tabindex=""
+          type="text"
+          value="0.0"
         />
-      </s-form-item>
+      </s-form-item-stub>
        
-      <s-button
-        class="el-button--empty-token"
-        icon="chevron-bottom-rounded"
-        size="small"
-        type="tertiary"
+      <div
+        class="token"
       >
+        <!---->
+         
+        <s-button-stub
+          class="el-button--choose-token"
+          icon="chevron-bottom-rounded"
+          nativetype="button"
+          size="small"
+          tabindex="0"
+          tooltip=""
+          tooltipplacement="top"
+          type="tertiary"
+        >
+          <span
+            class="token-logo token-logo--xor"
+          />
+          
+          XOR
         
-        
-      
-      </s-button>
+        </s-button-stub>
+      </div>
     </div>
   </div>
    
-  <s-button
+  <s-button-stub
     class="el-button--switch-tokens"
     icon="change-positions"
+    nativetype="button"
     size="medium"
+    tabindex="0"
+    tooltip=""
+    tooltipplacement="top"
     type="action"
   />
    
@@ -62,7 +92,11 @@ exports[`Swap.vue should renders correctly 1`] = `
           
         </span>
          
-        <!---->
+        <span
+          class="input-title-estimated"
+        >
+          ()
+        </span>
       </div>
        
       <!---->
@@ -71,37 +105,72 @@ exports[`Swap.vue should renders correctly 1`] = `
     <div
       class="input-line"
     >
-      <s-form-item>
-        <s-input
-          disabled="true"
+      <s-form-item-stub
+        prop=""
+        showmessage="true"
+      >
+        <s-input-stub
+          accept=""
+          autocomplete="off"
+          form=""
+          label=""
+          name=""
           placeholder="0.00"
+          tabindex=""
+          type="text"
+          value="0.0"
         />
-      </s-form-item>
+      </s-form-item-stub>
        
-      <s-button
-        class="el-button--empty-token"
-        icon="chevron-bottom-rounded"
-        size="small"
-        type="tertiary"
+      <div
+        class="token"
       >
+        <s-button-stub
+          class="el-button--choose-token"
+          icon="chevron-bottom-rounded"
+          nativetype="button"
+          size="small"
+          tabindex="0"
+          tooltip=""
+          tooltipplacement="top"
+          type="tertiary"
+        >
+          <span
+            class="token-logo token-logo--ksm"
+          />
+          
+          KSM
         
-        
-      
-      </s-button>
+        </s-button-stub>
+      </div>
     </div>
   </div>
    
-  <!---->
+  <swap-info-stub
+    showprice="true"
+    showslippagetolerance="true"
+  />
    
-  <s-button
+  <s-button-stub
+    icon=""
+    nativetype="button"
     size="medium"
+    tabindex="0"
+    tooltip=""
+    tooltipplacement="top"
     type="primary"
   >
     
     
   
-  </s-button>
+  </s-button-stub>
+   
+  <swap-info-stub />
+   
+  <select-token-stub />
+   
+  <confirm-swap-stub />
    
-  <!---->
-</s-form>
+  <transaction-submit-stub />
+</s-form-stub>
 `;
diff --git a/tests/unit/views/__snapshots__/SwapInfo.spec.ts.snap b/tests/unit/views/__snapshots__/SwapInfo.spec.ts.snap
new file mode 100644
index 000000000..b8fa03074
--- /dev/null
+++ b/tests/unit/views/__snapshots__/SwapInfo.spec.ts.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwapInfo.vue should renders correctly 1`] = `
+<div
+  class="swap-info-container"
+>
+  <div
+    class="swap-info"
+  >
+    <s-tooltip-stub
+      animation="el-fade-in-linear"
+      class="swap-info-icon"
+      closedelay="0"
+      content=""
+      offset="0"
+      opendelay="0"
+      placement="right-start"
+      tabindex="0"
+      theme="light"
+    >
+      <s-icon-stub
+        name="info"
+        size="16"
+      />
+    </s-tooltip-stub>
+     
+    <span>
+      
+    </span>
+     
+    <span
+      class="swap-info-value"
+    >
+      100.0000 KSM
+    </span>
+  </div>
+   
+  <div
+    class="swap-info"
+  >
+    <s-tooltip-stub
+      animation="el-fade-in-linear"
+      class="swap-info-icon"
+      closedelay="0"
+      content=""
+      offset="0"
+      opendelay="0"
+      placement="right-start"
+      tabindex="0"
+      theme="light"
+    >
+      <s-icon-stub
+        name="info"
+        size="16"
+      />
+    </s-tooltip-stub>
+     
+    <span>
+      
+    </span>
+     
+    <span
+      class="swap-info-value price-impact-positive"
+    >
+      0.02%
+    </span>
+  </div>
+   
+  <div
+    class="swap-info"
+  >
+    <s-tooltip-stub
+      animation="el-fade-in-linear"
+      class="swap-info-icon"
+      closedelay="0"
+      content=""
+      offset="0"
+      opendelay="0"
+      placement="right-start"
+      tabindex="0"
+      theme="light"
+    >
+      <s-icon-stub
+        name="info"
+        size="16"
+      />
+    </s-tooltip-stub>
+     
+    <span>
+      
+    </span>
+     
+    <span
+      class="swap-info-value"
+    >
+      0.0006 KSM
+    </span>
+  </div>
+</div>
+`;
diff --git a/tests/unit/views/__snapshots__/TransactionSubmit.spec.ts.snap b/tests/unit/views/__snapshots__/TransactionSubmit.spec.ts.snap
new file mode 100644
index 000000000..6076ffcf9
--- /dev/null
+++ b/tests/unit/views/__snapshots__/TransactionSubmit.spec.ts.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransactionSubmit.vue should renders correctly 1`] = `
+<s-dialog-stub
+  class="el-dialog--transaction-submit"
+  closeonclickmodal="true"
+  closeonesc="true"
+  customclass=""
+  lockscroll="true"
+  modal="true"
+  modalappendtobody="true"
+  showclose="true"
+  title=""
+  top="auto"
+  width="496px"
+>
+  <s-icon-stub
+    name="arrow-top-right-rounded"
+  />
+   
+  <s-divider-stub
+    contentposition="center"
+    direction="horizontal"
+    type="secondary"
+  />
+   
+  <div
+    class="transaction"
+  >
+    <div
+      class="transaction-type"
+    >
+      
+    </div>
+     
+    <div
+      class="transaction-info"
+    >
+      
+    </div>
+     
+    <s-icon-stub
+      name="external-link"
+    />
+  </div>
+   
+  <s-divider-stub
+    contentposition="center"
+    direction="horizontal"
+    type="secondary"
+  />
+</s-dialog-stub>
+`;
diff --git a/yarn.lock b/yarn.lock
index cef14e633..7a30db5f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1141,10 +1141,10 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
-"@soramitsu/soramitsu-js-ui@^0.5.3":
-  version "0.5.3"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soramitsu-js-ui/-/soramitsu-js-ui-0.5.3.tgz#34cea9f502321c1d7174a3a7a57221c62c3c9078"
-  integrity sha512-5sswp4HD17h2shmglSXecHRceKn9aSHAGRp3Ik7brXL/FaZ+HtdK9C1HMb1q3tAYLU6sAX1Xz4znQXuqRob/ug==
+"@soramitsu/soramitsu-js-ui@^0.5.4":
+  version "0.5.4"
+  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soramitsu-js-ui/-/soramitsu-js-ui-0.5.4.tgz#172192bc54410aa7b649ee8bbfed514a5dbc6030"
+  integrity sha512-gKhKOnpAg53opdo+9DOIwKdsEKQuslF2Oel0phwLad02UhRpTuS9MA6isE6s9JnxARNgV5hY74WEl2NQBdScvw==
   dependencies:
     core-js "^3.6.4"
     element-ui "^2.13.2"