Add liquidity styles (#98)

* Start styles * Add liquidity styles & consistency * clean up styles * remove un-used element * New styles * fix errors

Add liquidity styles (#98)
* Start styles * Add liquidity styles & consistency * clean up styles * remove un-used element * New styles * fix errors
9a326fa0 · Callil Capuozzo · GitHub · 06d6c711 · 9a326fa0 · 9a326fa0
Commit 9a326fa0 authored May 04, 2021 by Callil Capuozzo Committed by GitHub May 04, 2021
20 changed files
--- a/src/assets/svg/logo_white.svg
+++ b/src/assets/svg/logo_white.svg
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
+<path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2968 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z" fill="white"/>
-<path d="M11.7734 2.32277C11.7935 1.97208 11.8412 1.74076 11.9375 1.52951C11.9756 1.4459 12.0112 1.37747 12.0168 1.37747C12.0222 1.37747 12.0057 1.43918 11.9799 1.51461C11.91 1.71962 11.8985 2.00003 11.9467 2.32628C12.0078 2.74023 12.0426 2.79996 12.4829 3.24711C12.6893 3.45686 12.9295 3.72138 13.0165 3.83495L13.1749 4.04145L13.0165 3.89387C12.8229 3.7134 12.3778 3.36144 12.2794 3.31112C12.2134 3.27738 12.2037 3.27797 12.163 3.31821C12.1255 3.35528 12.1176 3.41099 12.1124 3.67438C12.1043 4.08488 12.048 4.34836 11.9122 4.61181C11.8387 4.7543 11.827 4.72389 11.8935 4.56306C11.9432 4.44297 11.9482 4.39018 11.9479 3.99279C11.9471 3.19435 11.8517 3.00239 11.2925 2.67357C11.1508 2.59027 10.9173 2.47013 10.7737 2.40659C10.63 2.34304 10.5159 2.28769 10.5201 2.28355C10.5359 2.2679 11.0813 2.42612 11.3009 2.51006C11.6275 2.63491 11.6814 2.65109 11.721 2.63603C11.7477 2.62593 11.7605 2.54898 11.7734 2.32277Z" fill="white"/>
+<path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3751 8.6073C11.3761 8.60781 11.377 8.60833 11.378 8.60884L11.3751 8.6073Z" fill="white"/>
+<path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z" fill="white"/>
-<path d="M6.33049 6.16961C6.40836 6.05964 6.37429 5.9408 6.24187 5.86042C5.98967 5.70736 5.6083 5.83402 5.6083 6.07081C5.6083 6.18868 5.80718 6.31728 5.98948 6.31728C6.11081 6.31728 6.27686 6.24537 6.33049 6.16961Z" fill="white"/>
+<path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.93417 4.29766C6.9415 4.30572 6.9486 4.31353 6.95534 4.32103L6.93417 4.29766ZM6.33049 6.16961C6.40836 6.05964 6.37429 5.9408 6.24187 5.86042C5.98967 5.70736 5.6083 5.83402 5.6083 6.07081C5.6083 6.18868 5.80718 6.31728 5.98948 6.31728C6.11081 6.31728 6.27686 6.24537 6.33049 6.16961Z" fill="white"/>
+<path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91233 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27858C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0832 13.5921C11.9012 13.799 11.4266 14.2508 10.9854 14.4021C10.9763 14.4094 10.9673 14.4166 10.9582 14.4239C10.9512 14.4296 10.9439 14.4355 10.9368 14.4412C10.8758 14.4906 10.8138 14.5408 10.747 14.5858C10.662 14.6422 10.5728 14.692 10.4803 14.735C10.4766 14.7368 10.4705 14.7397 10.4668 14.7415C10.3761 14.7848 10.2813 14.8178 10.1841 14.8404C10.0787 14.8648 9.97056 14.8768 9.86174 14.8759C9.28133 14.8649 8.87112 14.4306 8.63116 13.9398C8.6216 13.9203 8.61222 13.9007 8.60298 13.881C8.55136 13.7709 8.50431 13.6583 8.45728 13.5458C8.36859 13.3336 8.27988 13.1214 8.16038 12.9254C7.88272 12.4697 7.40763 12.1029 6.85125 12.1708C6.62433 12.1994 6.4116 12.3019 6.28557 12.4999C6.15088 12.7099 6.14943 12.954 6.23587 13.1631C6.36229 13.4689 6.6767 13.6997 7.03727 13.6388C7.08889 13.6309 7.13939 13.6169 7.1878 13.5971C7.19423 13.5944 7.2006 13.5915 7.20692 13.5885C7.24314 13.5713 7.27735 13.5502 7.30899 13.5254C7.31085 13.524 7.31343 13.5219 7.31594 13.5199C7.31798 13.5183 7.31996 13.5166 7.32145 13.5154C7.32812 13.5098 7.33465 13.5041 7.34105 13.4983C7.41358 13.4321 7.46916 13.3491 7.50291 13.2565C7.50391 13.2537 7.50541 13.2495 7.50637 13.2468C7.54576 13.1388 7.55411 13.0179 7.53197 12.9051C7.50707 12.7859 7.43707 12.6811 7.3367 12.6128C7.45342 12.6677 7.54431 12.766 7.59039 12.887C7.6363 13.0099 7.65 13.1489 7.62583 13.278C7.62539 13.2805 7.62469 13.2843 7.62413 13.2873C7.60631 13.381 7.57109 13.4725 7.52133 13.5529C7.50083 13.5861 7.4778 13.6177 7.45237 13.6476C7.44892 13.6515 7.44482 13.6561 7.44129 13.6599C7.40339 13.7011 7.36107 13.738 7.31509 13.7699C7.30642 13.7759 7.29762 13.7817 7.2887 13.7874C7.22836 13.8255 7.16371 13.8563 7.09616 13.879C6.95913 13.9261 6.81332 13.9412 6.6696 13.9234C6.46781 13.8945 6.27754 13.8116 6.11869 13.6832C6.00224 13.5906 5.90428 13.4804 5.80615 13.3699C5.74616 13.3023 5.6861 13.2347 5.62172 13.1711C5.51706 13.0607 5.40227 12.9609 5.27904 12.873C5.17331 12.7975 5.06136 12.7309 4.94426 12.6737C4.76942 12.5965 4.58642 12.5395 4.39877 12.5037C4.30475 12.4841 4.2086 12.4697 4.11349 12.4577C4.10308 12.4566 4.08299 12.4531 4.05802 12.4488C3.97942 12.435 3.85196 12.4133 3.82653 12.4331C3.17898 12.8367 2.68933 12.864 1.70437 12.6717C1.67537 12.5267 1.43033 12.0678 1.19366 11.6463C1.18291 11.6272 1.17174 11.6075 1.16027 11.5873C0.860904 11.06 0.356101 10.1709 1.6054 8.6188C2.61272 7.36731 2.69706 6.53708 2.74711 6.04442C2.75964 5.92111 2.77002 5.81894 2.79219 5.73661C2.85134 5.51691 2.98102 5.35893 3.09141 5.22446C3.18765 5.10722 3.28444 4.8091 3.2918 4.70227C3.31997 4.29383 2.34081 2.75792 0.625977 0.0799255L4.47329 3.3835C4.57135 3.44892 4.70945 3.48439 4.83248 3.516C4.90176 3.53379 4.96627 3.55036 5.01615 3.57036C5.13163 3.61665 5.24737 3.66305 5.35358 3.74122C4.80189 3.13559 4.51965 2.33957 4.53893 1.60801C4.54367 1.50896 4.55506 1.41019 4.57301 1.31215C4.61876 1.31759 4.66461 1.32394 4.71038 1.33122C4.70353 1.22902 4.6986 1.13859 4.6986 1.09018C5.14035 1.04196 5.58722 1.09675 6.00447 1.25029C6.00814 1.25172 6.01677 1.25513 6.02043 1.25657C6.35797 1.39024 6.67201 1.57635 6.95126 1.80769C7.01518 1.86064 7.07727 1.91596 7.13741 1.97356C7.35089 2.17483 7.55135 2.38967 7.73742 2.61677C9.12295 2.3426 10.2466 2.58607 11.1101 3.05874L11.1298 3.06861C11.3077 3.1656 11.4783 3.27517 11.6405 3.39642C11.6663 3.49809 11.6807 3.63535 11.6853 3.8386C11.4697 3.65006 11.2342 3.48569 10.9832 3.34839L10.9585 3.33574C10.1766 2.90775 9.15447 2.67608 7.87791 2.91142C7.90491 2.94807 7.93171 2.98487 7.95831 3.02183C7.97687 3.04607 7.99532 3.07021 8.01369 3.09425L8.01495 3.0959L8.01603 3.09731C8.26289 3.42035 8.4971 3.72634 8.78633 3.99678C8.9361 4.13846 9.10305 4.26056 9.28313 4.36016C9.33144 4.38481 9.37819 4.40704 9.42236 4.42585C9.47619 4.44884 9.52 4.4672 9.56537 4.48362C9.65753 4.5196 9.76327 4.55326 9.86833 4.58336C10.2706 4.69859 10.6894 4.74199 11.1179 4.76573C11.1752 4.76875 11.2333 4.77162 11.2917 4.77451C11.4492 4.7823 11.6095 4.79023 11.766 4.80159C11.9941 4.81536 12.2205 4.85118 12.4419 4.90861C12.5034 4.92472 12.5644 4.94444 12.6232 4.9672C12.5299 4.80411 12.4169 4.63421 12.2828 4.46348L12.2653 4.44084C12.3045 4.31902 12.3314 4.19175 12.3487 4.05169C12.4072 4.11712 12.464 4.18408 12.5191 4.2525C12.786 4.59228 12.9943 4.95502 13.1208 5.26711C13.1738 5.39774 13.2145 5.52228 13.2431 5.63767C13.2757 5.76969 13.2896 5.89341 13.2904 5.99679C13.2405 5.90357 13.1836 5.81431 13.1202 5.72976C13.0446 5.6268 12.9557 5.53567 12.8565 5.4584C12.7109 5.34511 12.5432 5.2616 12.3626 5.21428C12.1603 5.16182 11.9535 5.12915 11.745 5.11669C11.5919 5.10554 11.4365 5.09785 11.2796 5.09009C11.2202 5.08716 11.1606 5.08421 11.1009 5.08106C10.6645 5.0569 10.2177 5.01195 9.78132 4.88693C9.67223 4.85567 9.56318 4.82166 9.45787 4.78055C9.40335 4.76081 9.35261 4.73944 9.29861 4.71639C9.24462 4.69339 9.18951 4.66701 9.13494 4.63906C8.92977 4.5261 8.73968 4.38735 8.56931 4.22618C8.63726 4.30294 8.78328 4.54324 8.8233 4.89162C8.91258 4.98745 9.01156 5.06885 9.11883 5.13863C9.57446 5.43503 10.1797 5.52183 10.8272 5.61468C11.5529 5.71873 12.3315 5.83039 13.0121 6.25319C14.3183 7.06405 14.4068 8.4967 14.1009 9.38678C14.0307 9.59099 13.9397 9.76665 13.8379 9.89968C13.846 9.70754 13.821 9.53395 13.7682 9.37579C13.4988 8.56857 12.5048 8.16307 11.476 7.74341C11.0768 7.58059 10.6724 7.41563 10.3031 7.22426C10.446 7.37599 10.5764 7.56706 10.6808 7.83444C10.7678 7.8946 10.8597 7.9529 10.9551 8.01019C11.1362 8.11887 11.3302 8.22389 11.5281 8.33102C12.3071 8.75267 13.1462 9.20692 13.4944 10.0448C13.9761 11.1998 13.5574 12.617 12.5598 13.3276C12.4131 13.432 12.2539 13.5212 12.0832 13.5921ZM6.77653 10.2495C6.53523 10.3485 6.30767 10.4784 6.0996 10.6361C6.57276 10.4636 7.0695 10.365 7.5724 10.3438C7.65214 10.3391 7.73233 10.3352 7.81312 10.3315L7.84775 10.3299C8.00772 10.3225 8.17015 10.315 8.33603 10.3011C8.60782 10.2825 8.87594 10.2272 9.13301 10.1366C9.40235 10.0418 9.64755 9.88823 9.85085 9.68688C10.0562 9.47907 10.2003 9.2181 10.2671 8.93291C10.3258 8.66355 10.3175 8.38377 10.243 8.11832C10.1685 7.85292 10.0301 7.61006 9.83991 7.41128C9.93167 7.64517 9.98811 7.89153 10.0074 8.14219C10.024 8.37556 9.99242 8.60987 9.91468 8.83037C9.83875 9.03935 9.71464 9.2273 9.55247 9.37875C9.38495 9.53165 9.19102 9.65241 8.98027 9.73515C8.68736 9.85378 8.35612 9.90232 8.01111 9.95287C7.85368 9.97594 7.69338 9.99943 7.53254 10.0302C7.27391 10.0778 7.02062 10.1513 6.77653 10.2495ZM5.81332 6.90097C6.18373 6.86533 6.97302 6.67173 6.62012 6.04719C6.54419 5.92014 6.4341 5.81719 6.3026 5.75012C6.1711 5.6831 6.02342 5.65474 5.87662 5.66825C5.72761 5.68432 5.58715 5.7461 5.47421 5.8452C5.36133 5.94424 5.2815 6.07584 5.24548 6.2221C5.13586 6.63062 5.25205 6.95582 5.81332 6.90097ZM6.95534 4.32103C7.00051 4.37138 7.03307 4.41215 7.05007 4.45168C7.02919 4.46607 6.99611 4.47719 6.9464 4.48042C6.8894 4.48412 6.82094 4.47672 6.74752 4.46171C6.60106 4.43176 6.45205 4.37529 6.36764 4.34159C6.08269 4.2258 5.82825 4.06639 5.61831 3.87327C5.36416 3.64193 5.1571 3.37165 4.9995 3.08188C4.7457 2.61522 4.62016 2.09802 4.63279 1.6115C4.63593 1.54657 4.64205 1.48176 4.65112 1.41719C4.67317 1.4204 4.69517 1.42382 4.71713 1.42747C5.13403 1.49663 5.53229 1.64497 5.79435 1.89311C6.08854 2.17158 6.20033 2.53692 6.29128 2.90608C6.29833 2.93335 6.30527 2.96087 6.3122 2.98859C6.3144 2.99741 6.31661 3.00627 6.31882 3.01516L6.32633 3.04541L6.32646 3.04592C6.38602 3.2859 6.44877 3.53875 6.56894 3.77549C6.6054 3.84791 6.64968 3.91447 6.69335 3.97664C6.70746 3.99673 6.72128 4.01607 6.73484 4.03503C6.76452 4.07654 6.7929 4.11623 6.82008 4.15797C6.85264 4.20809 6.89649 4.25627 6.93417 4.29766C6.9415 4.30572 6.9486 4.31353 6.95534 4.32103ZM3.5785 4.77005C3.56715 4.93281 3.47579 5.1409 3.42768 5.21397C3.38705 5.27567 3.33553 5.33833 3.2918 5.39152C3.18833 5.51812 3.08383 5.65682 3.04409 5.80443C3.0279 5.86454 3.02026 5.93907 3.00809 6.0577C3.00468 6.09093 3.00092 6.12762 2.99651 6.16842C2.97779 6.34181 2.94923 6.55712 2.88174 6.81194C2.74603 7.32433 2.45887 7.9745 1.80862 8.78237C1.18745 9.55412 1.04536 10.1206 1.06437 10.5301C1.08247 10.92 1.24494 11.2071 1.38965 11.4628C1.40026 11.4816 1.41077 11.5001 1.42112 11.5186C1.5401 11.7305 1.66252 11.9541 1.75936 12.1443C1.80502 12.234 1.84609 12.3184 1.87878 12.3918C1.9866 12.3716 2.14255 12.3321 2.39751 12.2595C2.40968 12.2561 2.42208 12.2525 2.43469 12.249C2.7127 12.17 3.09242 12.0622 3.41896 11.878C3.76049 11.6853 3.988 11.4414 4.01906 11.1121C4.05232 10.7596 3.92101 10.5581 3.73519 10.3944C3.63495 10.3061 3.5207 10.2312 3.39624 10.1506C3.28342 10.0775 3.13829 9.98351 3.03589 9.88623C2.63114 9.50171 2.39615 8.91336 2.65535 8.23603C2.74342 8.00589 2.84236 7.79903 2.92313 7.63014C2.94576 7.58282 2.96728 7.53774 2.98725 7.49481C3.08205 7.29101 3.14465 7.1305 3.168 6.95844C3.17988 6.87089 3.1907 6.73305 3.1995 6.6208C3.2093 6.49673 3.22082 6.35988 3.24124 6.22911C3.26147 6.09962 3.29239 5.96214 3.34691 5.83937C3.40168 5.71603 3.48901 5.58825 3.63243 5.50857C3.80641 5.41192 4.01524 5.37796 4.18695 5.35003C4.21604 5.3453 4.24418 5.34073 4.27078 5.33607C4.55739 5.28587 4.90537 5.04299 5.01615 4.77005C5.06406 4.65202 4.86364 4.45522 4.4358 4.08457C4.00796 3.71392 1.26229 0.905753 1.26229 0.905753C1.5767 1.31394 1.8265 1.79867 2.67878 3.08188C3.53106 4.3651 3.58986 4.60728 3.5785 4.77005ZM13.8958 8.91317C13.9322 8.69842 13.9437 8.46138 13.9177 8.2162C13.8525 7.6009 13.5542 6.9614 12.8455 6.52148C12.2228 6.13462 11.5046 6.03123 10.7631 5.92453C10.7325 5.92012 10.7018 5.9157 10.671 5.91125C10.1592 5.83725 9.60972 5.75456 9.14252 5.51589C9.20782 5.88815 9.39622 6.17513 9.66207 6.41905C10.0743 6.79724 10.6728 7.07114 11.3367 7.34515C11.4207 7.37979 11.5061 7.4146 11.5919 7.44957C12.16 7.68102 12.7573 7.92433 13.2196 8.24118C13.4896 8.42624 13.7275 8.64584 13.8958 8.91317ZM13.203 10.1664C12.9995 9.6767 12.5896 9.32338 12.0777 9.0056C11.8525 8.86572 11.6172 8.73837 11.378 8.60884L11.3751 8.6073L11.3678 8.60333C11.3393 8.58788 11.3107 8.57239 11.282 8.55685C11.1513 8.48592 11.0195 8.41365 10.8907 8.33883C10.8659 8.63364 10.9297 8.91885 11.0515 9.20951C11.2134 9.59555 11.4667 9.96811 11.7413 10.3719C11.7752 10.4217 11.8095 10.4721 11.8439 10.523C12.1458 10.9694 12.4628 11.46 12.6087 11.9913C12.6811 12.2549 12.7111 12.5267 12.6821 12.8066C13.3334 12.1342 13.5763 11.0615 13.203 10.1664ZM8.34013 12.8158C8.44564 12.9889 8.5273 13.1706 8.60103 13.3444C8.61887 13.3865 8.63614 13.4278 8.65314 13.4684C8.70809 13.5999 8.76029 13.7247 8.82026 13.8473C8.84001 13.8877 8.86077 13.9272 8.8825 13.9657C8.94428 14.0752 9.01401 14.1764 9.09131 14.2658C9.04397 14.1784 9.00674 14.0866 8.97665 13.9943C8.97407 13.9864 8.97154 13.9785 8.96907 13.9705C8.90974 13.7809 8.87599 13.5789 8.84952 13.3921C8.84159 13.3362 8.83438 13.2823 8.82742 13.2303C8.81032 13.1024 8.7947 12.9857 8.77359 12.8774C8.73494 12.6798 8.67462 12.4871 8.59385 12.3029C8.50881 12.1165 8.389 11.9484 8.24092 11.8076C8.08878 11.6721 7.91321 11.5636 7.72445 11.4878C7.53918 11.412 7.34473 11.3614 7.14624 11.3375C6.75198 11.2891 6.35163 11.3199 5.96928 11.4281C5.59256 11.5341 5.23103 11.6895 4.89458 11.8901C4.70025 12.008 4.51312 12.1373 4.33416 12.2772C4.36931 12.2833 4.40464 12.2899 4.44002 12.2973C4.64272 12.336 4.84409 12.3993 5.033 12.4827C5.30751 12.6167 5.55959 12.8005 5.7705 13.022L5.77092 13.0224L5.77218 13.0238C5.84102 13.0921 5.90661 13.1659 5.96675 13.2336C5.98501 13.2542 6.00276 13.2742 6.01995 13.2933C6.0564 13.3338 6.09163 13.3718 6.12696 13.4074C6.06525 13.3113 6.01854 13.2031 5.99175 13.0891C5.93835 12.8618 5.96414 12.6113 6.10817 12.3865C6.27698 12.1216 6.555 11.9959 6.82499 11.962C7.49667 11.8799 8.0402 12.3236 8.34013 12.8158Z" fill="white"/>
+<path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79009 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.93417 4.29766C6.9415 4.30572 6.9486 4.31353 6.95534 4.32103L6.93417 4.29766ZM6.33049 6.16961C6.40836 6.05964 6.37429 5.9408 6.24187 5.86042C5.98967 5.70736 5.6083 5.83402 5.6083 6.07081C5.6083 6.18868 5.80718 6.31728 5.98948 6.31728C6.11081 6.31728 6.27686 6.24537 6.33049 6.16961Z" fill="white"/>
+<path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7562 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87092 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z" fill="white"/>
-<path d="M1.80993 10.0606C1.97406 10.1691 2.0262 10.3911 1.92808 10.5639C1.83411 10.7292 1.65469 10.7835 1.52794 10.6849C1.44929 10.6237 1.44376 10.5336 1.51232 10.4312C1.58002 10.3301 1.57377 10.2805 1.48773 10.2366C1.43662 10.2104 1.41395 10.1808 1.41395 10.14C1.41395 10.0065 1.65486 9.95818 1.80993 10.0606Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926351 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z" fill="white"/>
-</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z" fill="white"/>
-<defs>
-<clipPath id="clip0">
-<rect width="13.6957" height="15" fill="white" transform="translate(0.625)"/>
-</clipPath>
-</defs>
 </svg>
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -4,7 +4,7 @@ import { Box } from 'rebass/styled-components'
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`
  width: ${({ width }) => width ?? '100%'};
  border-radius: 16px;
-  padding: 1.25rem;
+  padding: 1rem;
  padding: ${({ padding }) => padding};
  border: ${({ border }) => border};
  border-radius: ${({ borderRadius }) => borderRadius};

--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -22,8 +22,8 @@ import { FiatValue } from './FiatValue'
 const InputPanel = styled.div<{ hideInput?: boolean }>`
  ${({ theme }) => theme.flexColumnNoWrap}
  position: relative;
-  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
+  border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)};
  z-index: 1;
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
 `
@@ -42,13 +42,13 @@ const FixedContainer = styled.div`
 `
 const Container = styled.div<{ hideInput: boolean }>`
-  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
+  border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg2)};
  background-color: ${({ theme }) => theme.bg1};
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  :focus,
  :hover {
-    border: 1px solid ${({ theme }) => theme.bg3};
+    border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg3)};
  }
 `
@@ -65,11 +65,11 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
  cursor: pointer;
  user-select: none;
  border: none;
-  height: ${({ hideInput }) => (hideInput ? '2.4rem' : '2.4rem')};
+  height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  padding: 0 8px;
  justify-content: space-between;
-  margin-right: 12px;
+  margin-right: ${({ hideInput }) => (hideInput ? '0' : '12px')};
  :focus,
  :hover {
    background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
@@ -103,6 +103,7 @@ const Aligner = styled.span`
  display: flex;
  align-items: center;
  justify-content: space-between;
+  width: 100%;
 `
 const StyledDropDown = styled(DropDown)<{ selected: boolean }>`

--- a/src/components/FeeSelector/index.tsx
+++ b/src/components/FeeSelector/index.tsx
@@ -29,6 +29,9 @@ export default function FeeSelector({
    <AutoColumn gap="16px">
      <DynamicSection gap="md" disabled={disabled}>
        <TYPE.label>{t('selectPool')}</TYPE.label>
+        <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
+          Select a pool type based on your preferred liquidity provider fee.
+        </TYPE.main>
        <RowBetween>
          <ButtonRadioChecked
            width="32%"

--- a/src/components/InputStepCounter/InputStepCounter.tsx
+++ b/src/components/InputStepCounter/InputStepCounter.tsx
 import React, { useState, useCallback, useEffect } from 'react'
-import { OutlineCard } from 'components/Card'
+import { LightCard } from 'components/Card'
 import { RowBetween } from 'components/Row'
 import { Input as NumericalInput } from '../NumericalInput'
 import styled, { keyframes } from 'styled-components'
 import { TYPE } from 'theme'
 import { AutoColumn } from 'components/Column'
-import { ButtonSecondary } from 'components/Button'
+import { ButtonPrimary } from 'components/Button'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { formattedFeeAmount } from 'utils'
@@ -23,28 +23,31 @@ const pulse = (color: string) => keyframes`
  }
 `
-const SmallButton = styled(ButtonSecondary)`
+const SmallButton = styled(ButtonPrimary)`
-  background-color: ${({ theme }) => theme.bg2};
+  /* background-color: ${({ theme }) => theme.bg2}; */
  border-radius: 8px;
-  padding: 4px;
+  padding: 4px 6px;
  width: 48%;
 `
-const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
+const FocusedOutlineCard = styled(LightCard)<{ active?: boolean; pulsing?: boolean }>`
  border-color: ${({ active, theme }) => active && theme.blue1};
  padding: 12px;
  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear;
 `
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
-  background-color: transparent;
+  /* background-color: ${({ theme }) => theme.bg0}; */
-  text-align: left;
+  text-align: center;
-  margin-right: 2px;
+  margin-right: 12px;
+  width: 100%;
+  font-weight: 500;
 `
-const ContentWrapper = styled(RowBetween)`
+const InputTitle = styled(TYPE.small)`
-  width: 92%;
+  color: ${({ theme }) => theme.text2};
+  font-size: 12px;
+  font-weight: 500;
 `
 interface StepCounterProps {
@@ -56,6 +59,9 @@ interface StepCounterProps {
  label?: string
  width?: string
  locked?: boolean // disable input
+  title: string
+  tokenA: string | undefined
+  tokenB: string | undefined
 }
 const StepCounter = ({
@@ -63,10 +69,12 @@ const StepCounter = ({
  decrement,
  increment,
  feeAmount,
-  label,
  width,
  locked,
  onUserInput,
+  title,
+  tokenA,
+  tokenB,
 }: StepCounterProps) => {
  //  for focus state, styled components doesnt let you select input parent container
  const [active, setActive] = useState(false)
@@ -117,30 +125,33 @@ const StepCounter = ({
  return (
    <FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur} width={width}>
-      <AutoColumn gap="md">
+      <AutoColumn gap="6px" style={{ marginBottom: '12px' }}>
-        <ContentWrapper>
+        <InputTitle fontSize={12} textAlign="center">
+          {title}
+        </InputTitle>
        <StyledInput
          className="rate-input-0"
          value={localValue}
-            fontSize="18px"
+          fontSize="20px"
          disabled={locked}
          onUserInput={(val) => {
            setLocalValue(val)
          }}
        />
-        </ContentWrapper>
+        <InputTitle fontSize={12} textAlign="center">
-        {label && <TYPE.label fontSize="12px">{label}</TYPE.label>}
+          {tokenB + ' / ' + tokenA}
+        </InputTitle>
+      </AutoColumn>
      {!locked ? (
        <RowBetween>
          <SmallButton onClick={handleDecrement}>
-              <TYPE.main fontSize="12px">-{feeAmountFormatted}%</TYPE.main>
+            <TYPE.black fontSize="12px">-{feeAmountFormatted}%</TYPE.black>
          </SmallButton>
          <SmallButton onClick={handleIncrement}>
-              <TYPE.main fontSize="12px">+{feeAmountFormatted}%</TYPE.main>
+            <TYPE.black fontSize="12px">+{feeAmountFormatted}%</TYPE.black>
          </SmallButton>
        </RowBetween>
      ) : null}
-      </AutoColumn>
    </FocusedOutlineCard>
  )
 }

--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -35,7 +35,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
-    background-color: ${({ theme }) => theme.bg1};
+    background-color: ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;

--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@@ -101,11 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating:
            adding && dispatch(resetMintState())
          }}
        >
-          <StyledArrowLeft stroke={theme.text2} opacity="0.6" />
+          <StyledArrowLeft stroke={theme.text2} />
        </HistoryLink>
-        <TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
+        <TYPE.mediumHeader fontWeight={500} fontSize={20}>
          {creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
-        </TYPE.black>
+        </TYPE.mediumHeader>
        <Settings />
      </RowBetween>
    </Tabs>

--- a/src/components/PositionListItem/index.tsx
+++ b/src/components/PositionListItem/index.tsx
@@ -95,7 +95,7 @@ const DoubleArrow = styled.span`
 `
 const RangeText = styled.span`
-  background-color: ${({ theme }) => theme.bg2};
+  /* background-color: ${({ theme }) => theme.bg2}; */
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
 `

--- a/src/components/PositionPreview/index.tsx
+++ b/src/components/PositionPreview/index.tsx
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useContext } from 'react'
 import { Position } from '@uniswap/v3-sdk'
-import { DarkCard, DarkGreyCard } from 'components/Card'
+import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import { TYPE } from 'theme'
 import { RowBetween, RowFixed } from 'components/Row'
@@ -10,18 +10,25 @@ import { Break } from 'components/earn/styled'
 import { useTranslation } from 'react-i18next'
 import { Currency } from '@uniswap/sdk-core'
 import RateToggle from 'components/RateToggle'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import RangeBadge from 'components/Badge/RangeBadge'
+import { ThemeContext } from 'styled-components'
 export const PositionPreview = ({
  position,
  title,
+  inRange,
  baseCurrencyDefault,
 }: {
  position: Position
  title?: string
+  inRange: boolean
  baseCurrencyDefault?: Currency | undefined
 }) => {
  const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
  const currency0 = unwrappedToken(position.pool.token0)
  const currency1 = unwrappedToken(position.pool.token1)
@@ -48,16 +55,24 @@ export const PositionPreview = ({
  }, [quoteCurrency])
  return (
-    <DarkGreyCard>
+    <AutoColumn gap="md" style={{ marginTop: '0.5rem' }}>
-      <AutoColumn gap="md">
+      <RowBetween style={{ marginBottom: '0.5rem' }}>
-        <RowBetween>
+        <RowFixed>
-          {title ? <TYPE.main>{title}</TYPE.main> : <div />}
+          <DoubleCurrencyLogo
-          <RateToggle
+            currency0={currency0 ?? undefined}
-            currencyA={sorted ? currency0 : currency1}
+            currency1={currency1 ?? undefined}
-            currencyB={sorted ? currency1 : currency0}
+            size={24}
-            handleRateToggle={handleRateChange}
+            margin={true}
          />
+          <TYPE.label ml="10px" fontSize="24px">
+            {currency0?.symbol} / {currency1?.symbol}
+          </TYPE.label>
+        </RowFixed>
+        <RangeBadge inRange={inRange} />
      </RowBetween>
+      <LightCard>
+        <AutoColumn gap="md">
          <RowBetween>
            <RowFixed>
              <CurrencyLogo currency={currency0} />
@@ -81,36 +96,60 @@ export const PositionPreview = ({
            <TYPE.label>{t('feeTier')}</TYPE.label>
            <TYPE.label>{position?.pool?.fee / 10000}%</TYPE.label>
          </RowBetween>
+        </AutoColumn>
+      </LightCard>
+      <AutoColumn gap="md">
        <RowBetween>
-          <TYPE.label>Current {baseCurrency?.symbol} Price</TYPE.label>
+          {title ? <TYPE.main>{title}</TYPE.main> : <div />}
-          <TYPE.label>{`${price.toSignificant(6)} ${quoteCurrency?.symbol}`}</TYPE.label>
+          <RateToggle
+            currencyA={sorted ? currency0 : currency1}
+            currencyB={sorted ? currency1 : currency0}
+            handleRateToggle={handleRateChange}
+          />
        </RowBetween>
        <RowBetween>
-          <DarkCard width="46%" padding="8px">
+          <LightCard width="48%" padding="8px">
            <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Lower</TYPE.main>
+              <TYPE.main fontSize="12px">Min price</TYPE.main>
-              <TYPE.label textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.label>
+              <TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.mediumHeader>
              <TYPE.main
                textAlign="center"
                fontSize="12px"
              >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+              <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+                {'Position will be'} <CurrencyLogo currency={baseCurrency} size="10px" /> {' 100% at this price.'}
+              </TYPE.small>
            </AutoColumn>
-          </DarkCard>
+          </LightCard>
-          <TYPE.main ml="4px" mr="4px">
-            ⟷
+          <LightCard width="48%" padding="8px">
-          </TYPE.main>
-          <DarkCard width="46%" padding="8px">
            <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Upper</TYPE.main>
+              <TYPE.main fontSize="12px">Max price</TYPE.main>
-              <TYPE.label textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.label>
+              <TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.mediumHeader>
              <TYPE.main
                textAlign="center"
                fontSize="12px"
              >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+              <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+                {' Position will be 100% '}
+                {quoteCurrency?.symbol} {' at this price.'}
+              </TYPE.small>
            </AutoColumn>
-          </DarkCard>
+          </LightCard>
        </RowBetween>
+        <LightCard padding="12px ">
+          <AutoColumn gap="4px" justify="center">
+            <TYPE.main fontSize="12px">Current price</TYPE.main>
+            <TYPE.mediumHeader>{`${price.toSignificant(6)} `}</TYPE.mediumHeader>
+            <TYPE.main
+              textAlign="center"
+              fontSize="12px"
+            >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+          </AutoColumn>
+        </LightCard>
+      </AutoColumn>
    </AutoColumn>
-    </DarkGreyCard>
  )
 }
--- a/src/components/RangeSelector/index.tsx
+++ b/src/components/RangeSelector/index.tsx
@@ -48,7 +48,10 @@ export default function RangeSelector({
        decrement={isSorted ? getDecrementLower : getIncrementUpper}
        increment={isSorted ? getIncrementLower : getDecrementUpper}
        feeAmount={feeAmount}
-        label={leftPrice ? `${leftPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'}
+        label={leftPrice ? `${currencyB?.symbol}` : '-'}
+        title={'Min price'}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
      />
      <StepCounter
        value={rightPrice?.toSignificant(5) ?? ''}
@@ -57,7 +60,10 @@ export default function RangeSelector({
        decrement={isSorted ? getDecrementUpper : getIncrementLower}
        increment={isSorted ? getIncrementUpper : getDecrementLower}
        feeAmount={feeAmount}
-        label={rightPrice ? `${rightPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'}
+        label={rightPrice ? `${currencyB?.symbol}` : '-'}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
+        title={'Max price'}
      />
    </RowBetween>
  )

--- a/src/components/RateToggle/index.tsx
+++ b/src/components/RateToggle/index.tsx
@@ -3,15 +3,6 @@ import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
 import { useActiveWeb3React } from 'hooks'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
-import Switch from '../../assets/svg/switch.svg'
-import { useDarkModeManager } from '../../state/user/hooks'
-import styled from 'styled-components'
-const StyledSwitchIcon = styled.img<{ darkMode: boolean }>`
-  margin: 0 4px;
-  opacity: 0.4;
-  filter: ${({ darkMode }) => (darkMode ? 'invert(0)' : 'invert(1)')};
-`
 // the order of displayed base currencies from left to right is always in sort order
 // currencyA is treated as the preferred base currency
@@ -31,19 +22,14 @@ export default function RateToggle({
  const isSorted = tokenA && tokenB && tokenA.sortsBefore(tokenB)
-  const [darkMode] = useDarkModeManager()
  return tokenA && tokenB ? (
    <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
      <ToggleWrapper width="fit-content">
        <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyA.symbol : currencyB.symbol} {' price'}
+          {isSorted ? currencyB.symbol + ' / ' + currencyA.symbol : currencyA.symbol + ' / ' + currencyB.symbol}{' '}
        </ToggleElement>
-        <StyledSwitchIcon onClick={handleRateToggle} width={'16px'} src={Switch} alt="logo" darkMode={darkMode} />
        <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyB.symbol : currencyA.symbol}
+          {isSorted ? currencyA.symbol + ' / ' + currencyB.symbol : currencyB.symbol + ' / ' + currencyA.symbol}
-          {' price'}
        </ToggleElement>
      </ToggleWrapper>
    </div>

--- a/src/components/Toggle/MultiToggle.tsx
+++ b/src/components/Toggle/MultiToggle.tsx
@@ -5,10 +5,10 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
  display: flex;
  align-items: center;
  width: ${({ width }) => width ?? '100%'};
-  padding: 2px;
+  padding: 1px;
  background: ${({ theme }) => theme.bg1};
  border-radius: 8px;
-  border: ${({ theme }) => '1px solid ' + theme.bg1};
+  border: ${({ theme }) => '1px solid ' + theme.bg2};
  cursor: pointer;
  outline: none;
 `

--- a/src/pages/AddLiquidity/Review.tsx
+++ b/src/pages/AddLiquidity/Review.tsx
 import React from 'react'
-import { RowBetween, RowFixed } from '../../components/Row'
 import { Field } from '../../state/mint/actions'
-import { TYPE } from '../../theme'
 import { AutoColumn } from 'components/Column'
 import Card from 'components/Card'
 import styled from 'styled-components'
-import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
+import { CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { PositionPreview } from 'components/PositionPreview'
-import { RangeBadge } from './styled'
 const Wrapper = styled.div`
-  padding-top: 20px;
+  padding-top: 12px;
 `
 export const Badge = styled(Card)<{ inRange?: boolean }>`
@@ -26,37 +22,19 @@ export const Badge = styled(Card)<{ inRange?: boolean }>`
 export function Review({
  position,
-  currencies,
  outOfRange,
-  baseCurrency,
 }: {
  position?: Position
  existingPosition?: Position
-  currencies: { [field in Field]?: Currency }
  parsedAmounts: { [field in Field]?: CurrencyAmount }
  priceLower?: Price
  priceUpper?: Price
  outOfRange: boolean
-  baseCurrency?: Currency
 }) {
-  const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
-  const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
  return (
    <Wrapper>
      <AutoColumn gap="lg">
-        <RowBetween>
+        {position ? <PositionPreview position={position} inRange={!outOfRange} title={'Selected Range'} /> : null}
-          <RowFixed>
-            <DoubleCurrencyLogo currency0={currencyA} currency1={currencyB} size={24} margin={true} />
-            <TYPE.label ml="10px" fontSize="24px">
-              {currencyA?.symbol} / {currencyB?.symbol}
-            </TYPE.label>
-          </RowFixed>
-          <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
-        </RowBetween>
-        {position ? (
-          <PositionPreview position={position} title={'Tokens To Add'} baseCurrencyDefault={baseCurrency} />
-        ) : null}
      </AutoColumn>
    </Wrapper>
  )

--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@@ -2,18 +2,18 @@ import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, TokenAmount, ETHER, currencyEquals } from '@uniswap/sdk-core'
 import { WETH9 } from '@uniswap/sdk-core'
-import { Link2, AlertTriangle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
-import { YellowCard, OutlineCard, BlueCard } from '../../components/Card'
+import { YellowCard, OutlineCard, BlueCard, LightCard } from '../../components/Card'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
+import { AutoColumn } from '../../components/Column'
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { RowBetween, RowFixed } from '../../components/Row'
+import { RowBetween } from '../../components/Row'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import Review from './Review'
 import { useActiveWeb3React } from '../../hooks'
@@ -25,13 +25,13 @@ import { Field, Bound } from '../../state/mint/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { useIsExpertMode, useUserSlippageTolerance } from '../../state/user/hooks'
-import { TYPE } from '../../theme'
+import { TYPE, ExternalLink } from '../../theme'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import AppBody from '../AppBody'
 import { Dots } from '../Pool/styleds'
 import { currencyId } from '../../utils/currencyId'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, RangeBadge, ScrollablePage } from './styled'
+import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, ScrollablePage } from './styled'
 import { useTranslation } from 'react-i18next'
 import { useMintState, useMintActionHandlers, useDerivedMintInfo, useRangeHopCallbacks } from 'state/mint/hooks'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
@@ -39,7 +39,6 @@ import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from 'constants/v3'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { useDerivedPositionInfo } from 'hooks/useDerivedPositionInfo'
 import { PositionPreview } from 'components/PositionPreview'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
 import FeeSelector from 'components/FeeSelector'
 import RangeSelector from 'components/RangeSelector'
 import RateToggle from 'components/RateToggle'
@@ -352,18 +351,16 @@ export default function AddLiquidity({
            onDismiss={handleDismissConfirmation}
            topContent={() => (
              <Review
-                currencies={currencies}
                parsedAmounts={parsedAmounts}
                position={position}
                existingPosition={existingPosition}
                priceLower={priceLower}
                priceUpper={priceUpper}
                outOfRange={outOfRange}
-                baseCurrency={baseCurrency ?? undefined}
              />
            )}
            bottomContent={() => (
-              <ButtonPrimary onClick={onAdd} mt="16px">
+              <ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
                <Text fontWeight={500} fontSize={20}>
                  Add
                </Text>
@@ -376,8 +373,8 @@ export default function AddLiquidity({
      <AppBody>
        <AddRemoveTabs creating={false} adding={true} />
        <Wrapper>
-          <AutoColumn gap="lg">
+          <AutoColumn gap="32px">
-            {!hasExistingPosition ? (
+            {!hasExistingPosition && (
              <>
                <AutoColumn gap="md">
                  <RowBetween paddingBottom="20px">
@@ -401,6 +398,7 @@ export default function AddLiquidity({
                      id="add-liquidity-input-tokena"
                      showCommonBases
                    />
+                    <div style={{ width: '12px' }}></div>
                    <CurrencyDropdown
                      value={formattedAmounts[Field.CURRENCY_B]}
@@ -418,25 +416,10 @@ export default function AddLiquidity({
                  </RowBetween>
                </AutoColumn>{' '}
              </>
-            ) : (
-              <RowBetween>
-                <RowFixed>
-                  <DoubleCurrencyLogo
-                    currency0={currencyA ?? undefined}
-                    currency1={currencyB ?? undefined}
-                    size={24}
-                    margin={true}
-                  />
-                  <TYPE.label ml="10px" fontSize="24px">
-                    {currencyA?.symbol} / {currencyB?.symbol}
-                  </TYPE.label>
-                </RowFixed>
-                <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
-              </RowBetween>
            )}
            {hasExistingPosition && existingPosition ? (
-              <PositionPreview position={existingPosition} title={'Current Position'} />
+              <PositionPreview position={existingPosition} title={'Selected Range'} inRange={!outOfRange} />
            ) : (
              <>
                <FeeSelector
@@ -493,6 +476,7 @@ export default function AddLiquidity({
                <DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
                  <RowBetween>
                    <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
                    {baseCurrency && quoteCurrency ? (
                      <RateToggle
                        currencyA={baseCurrency}
@@ -505,16 +489,13 @@ export default function AddLiquidity({
                      />
                    ) : null}
                  </RowBetween>
+                  <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
-                  {price && baseCurrency && quoteCurrency && !noLiquidity && (
+                    Your liquidity will only be active and earning fees when the price of the pool is within this price
-                    <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
+                    range.{' '}
-                      <TYPE.main>Current Price</TYPE.main>
+                    <ExternalLink href={''} style={{ fontSize: '14px' }}>
-                      <TYPE.main>
+                      Need help picking a range?
-                        {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)} {quoteCurrency?.symbol}{' '}
+                    </ExternalLink>
-                        = 1 {baseCurrency.symbol}
                  </TYPE.main>
-                    </RowBetween>
-                  )}
                  <RangeSelector
                    priceLower={priceLower}
@@ -530,6 +511,23 @@ export default function AddLiquidity({
                    feeAmount={feeAmount}
                  />
+                  {price && baseCurrency && quoteCurrency && !noLiquidity && (
+                    <LightCard style={{ padding: '12px' }}>
+                      <AutoColumn gap="4px">
+                        <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
+                          Current Price
+                        </TYPE.main>
+                        <TYPE.body fontWeight={500} textAlign="center" fontSize={20}>
+                          {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
+                        </TYPE.body>
+                        <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
+                          {quoteCurrency?.symbol} {' / '}
+                          {baseCurrency.symbol}
+                        </TYPE.main>
+                      </AutoColumn>
+                    </LightCard>
+                  )}
                  {outOfRange ? (
                    <YellowCard padding="8px 12px" borderRadius="12px">
                      <RowBetween>
@@ -575,10 +573,6 @@ export default function AddLiquidity({
                  locked={depositADisabled}
                />
-                <ColumnCenter>
-                  <Link2 stroke={theme.text2} size={'24px'} />
-                </ColumnCenter>
                <CurrencyInputPanel
                  value={formattedAmounts[Field.CURRENCY_B]}
                  onUserInput={onFieldBInput}
@@ -662,7 +656,6 @@ export default function AddLiquidity({
          </AutoColumn>
        </Wrapper>
      </AppBody>
-      {/* )} */}
      {addIsUnsupported && (
        <UnsupportedCurrencyFooter
          show={addIsUnsupported}

--- a/src/pages/AddLiquidity/styled.tsx
+++ b/src/pages/AddLiquidity/styled.tsx
@@ -7,7 +7,7 @@ import Input from 'components/NumericalInput'
 export const Wrapper = styled.div`
  position: relative;
  padding: 20px;
-  min-width: 460px;
+  min-width: 480px;
  ${({ theme }) => theme.mediaWidth.upToSmall`
    min-width: 400px;
@@ -45,7 +45,7 @@ export const FixedPreview = styled.div`
    0px 24px 32px rgba(0, 0, 0, 0.01);
  border-radius: 12px;
  position: sticky;
-  top: 90px;
+  top: 64px;
 `
 export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`

--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const BodyWrapper = styled.div<{ margin?: string }>`
  position: relative;
  margin-top: ${({ margin }) => margin ?? '0px'};
-  max-width: 460px;
+  max-width: 480px;
  width: 100%;
  background: ${({ theme }) => theme.bg0};
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),

--- a/src/pages/Pool/PositionPage.tsx
+++ b/src/pages/Pool/PositionPage.tsx
@@ -16,7 +16,7 @@ import { HideExtraSmall, TYPE } from 'theme'
 import Badge from 'components/Badge'
 import { calculateGasMargin } from 'utils'
 import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
-import { DarkCard, LightCard } from 'components/Card'
+import { DarkCard, DarkGreyCard, LightCard } from 'components/Card'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useTranslation } from 'react-i18next'
 import { currencyId } from 'utils/currencyId'
@@ -33,7 +33,6 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { Dots } from 'components/swap/styleds'
 import { getPriceOrderingFromPositionForUI } from '../../components/PositionListItem'
 import useTheme from '../../hooks/useTheme'
-import { MinusCircle, PlusCircle } from 'react-feather'
 import RateToggle from '../../components/RateToggle'
 import { useSingleCallResult } from 'state/multicall/hooks'
 import RangeBadge from '../../components/Badge/RangeBadge'
@@ -88,10 +87,11 @@ export const DarkBadge = styled.div`
 `
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.text2};
  font-size: 14px;
  text-align: center;
  margin-right: 4px;
+  font-weight: 500;
 `
 const HoverText = styled(TYPE.main)`
@@ -139,6 +139,8 @@ function CurrentPriceCard({
  currencyBase?: Currency
  ratio?: number
 }) {
+  const theme = useTheme()
  const { t } = useTranslation()
  if (!pool || !currencyQuote || !currencyBase) {
    return null
@@ -146,18 +148,19 @@ function CurrentPriceCard({
  return (
    <LightCard padding="12px ">
-      <AutoColumn gap="md" justify="center">
+      <AutoColumn gap="8px" justify="center">
        <ExtentsText>{t('Current price')}</ExtentsText>
-        <TYPE.label textAlign="center">
+        <TYPE.mediumHeader textAlign="center">
-          {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol}
+          {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)}{' '}
-        </TYPE.label>
+        </TYPE.mediumHeader>
+        <ExtentsText>{currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+      </AutoColumn>
      {typeof ratio === 'number' && (
-          <TYPE.label textAlign="center">
+        <TYPE.small color={theme.text3} textAlign="center" style={{ marginTop: '8px' }}>
-            Your position is <CurrencyLogo currency={currencyBase} size="12px" /> {ratio}% {currencyBase?.symbol} and{' '}
+          Your position is currently {ratio}% {currencyBase?.symbol} and {100 - ratio}% {currencyQuote?.symbol}
-            <CurrencyLogo currency={currencyQuote} size="12px" /> {100 - ratio}% {currencyQuote?.symbol}
+        </TYPE.small>
-          </TYPE.label>
      )}
-      </AutoColumn>
    </LightCard>
  )
 }
@@ -418,8 +421,7 @@ export function PositionPage({
                    borderRadius="12px"
                    style={{ marginRight: '8px' }}
                  >
-                    <PlusCircle size={16} style={{ marginRight: '8px' }} />{' '}
+                    {t('Add Liquidity')}
-                    <TYPE.body color={theme.text1}>{t('Add Liquidity')}</TYPE.body>
                  </ButtonGray>
                ) : null}
                {tokenId && (
@@ -430,7 +432,7 @@ export function PositionPage({
                    padding="6px 8px"
                    borderRadius="12px"
                  >
-                    <MinusCircle size={16} style={{ marginRight: '8px' }} /> {t('Remove Liquidity')}
+                    {t('Remove Liquidity')}
                  </ResponsiveButtonPrimary>
                )}
              </RowFixed>
@@ -471,11 +473,15 @@ export function PositionPage({
            <DarkCard>
              <AutoColumn gap="md" style={{ width: '100%' }}>
                <AutoColumn gap="md">
-                  <Label>Position liquidity</Label>
+                  <Label>Liquidity</Label>
-                  {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) && (
+                  {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? (
                    <TYPE.largeHeader fontSize="36px" fontWeight={500}>
                      ${fiatValueOfLiquidity.toFixed(2)}
                    </TYPE.largeHeader>
+                  ) : (
+                    <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                      $-
+                    </TYPE.largeHeader>
                  )}
                </AutoColumn>
                <LightCard padding="12px 16px">
@@ -483,20 +489,38 @@ export function PositionPage({
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
-                          {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
+                          {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} (
+                        </TYPE.main>
+                        {typeof ratio === 'number' && (
+                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
+                            <TYPE.main color={theme.text2} fontSize={11}>
+                              {100 - ratio}%
                            </TYPE.main>
+                          </DarkGreyCard>
+                        )}
                      </RowFixed>
-                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
                    </RowBetween>
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
-                          {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
+                          {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} (
                        </TYPE.main>
+                        {typeof ratio === 'number' && (
+                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
+                            <TYPE.main color={theme.text2} fontSize={11}>
+                              {ratio}%
+                            </TYPE.main>
+                          </DarkGreyCard>
+                        )}
                      </RowFixed>
-                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
                    </RowBetween>
                  </AutoColumn>
                </LightCard>
@@ -508,10 +532,14 @@ export function PositionPage({
                  <RowBetween style={{ alignItems: 'flex-start' }}>
                    <AutoColumn gap="md">
                      <Label>Fees Earned</Label>
-                      {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) && (
+                      {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
                        <TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
                          ${fiatValueOfFees.toFixed(2)}
                        </TYPE.largeHeader>
+                      ) : (
+                        <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                          $-
+                        </TYPE.largeHeader>
                      )}
                    </AutoColumn>
                    {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? (
@@ -544,6 +572,9 @@ export function PositionPage({
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
                          {inverted
                            ? feeValue0
@@ -554,11 +585,13 @@ export function PositionPage({
                            : '-'}
                        </TYPE.main>
                      </RowFixed>
-                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
                    </RowBetween>
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
                          {inverted
                            ? feeValue0
@@ -569,7 +602,6 @@ export function PositionPage({
                            : '-'}
                        </TYPE.main>
                      </RowFixed>
-                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
                    </RowBetween>
                  </AutoColumn>
                </LightCard>
@@ -604,47 +636,27 @@ export function PositionPage({
            <RowBetween>
              <LightCard padding="12px" width="100%">
-                <AutoColumn gap="12px" justify="center">
+                <AutoColumn gap="8px" justify="center">
-                  <ExtentsText>Min</ExtentsText>
+                  <ExtentsText>Min price</ExtentsText>
-                  <RowFixed>
+                  <TYPE.mediumHeader textAlign="center">{priceLower?.toSignificant(4)}</TYPE.mediumHeader>
-                    <TYPE.label textAlign="center">
+                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
-                      {priceLower?.toSignificant(4)} {currencyQuote?.symbol}
+                  <TYPE.small color={theme.text3}>
-                    </TYPE.label>
+                    {' Your position is will be 100% '}
-                  </RowFixed>
+                    {currencyBase?.symbol} {' at this price.'}
-                  {(inverted ? below : above) ? (
+                  </TYPE.small>
-                    <TYPE.subHeader color={theme.text3} textAlign="center">
-                      Your position will be <CurrencyLogo currency={inverted ? currency1 : currency0} size="12px" />{' '}
-                      100% {inverted ? currency1?.symbol : currency0?.symbol} at this price
-                    </TYPE.subHeader>
-                  ) : (
-                    <TYPE.label textAlign="center">
-                      Your position is <CurrencyLogo currency={inverted ? currency1 : currency0} size="12px" /> 100%{' '}
-                      {inverted ? currency1?.symbol : currency0?.symbol}
-                    </TYPE.label>
-                  )}
                </AutoColumn>
              </LightCard>
              <DoubleArrow>⟷</DoubleArrow>
              <LightCard padding="12px" width="100%">
-                <AutoColumn gap="12px" justify="center">
+                <AutoColumn gap="8px" justify="center">
-                  <ExtentsText>Max</ExtentsText>
+                  <ExtentsText>Max price</ExtentsText>
-                  <RowFixed>
+                  <TYPE.mediumHeader textAlign="center">{priceUpper?.toSignificant(4)}</TYPE.mediumHeader>
-                    <TYPE.label textAlign="center">
+                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
-                      {priceUpper?.toSignificant(4)} {currencyQuote?.symbol}
+                  <TYPE.small color={theme.text3}>
-                    </TYPE.label>
+                    {' Your position is will be 100% '}
-                  </RowFixed>
+                    {currencyQuote?.symbol} {' at this price.'}
-                  {(inverted ? above : below) ? (
+                  </TYPE.small>
-                    <TYPE.subHeader color={theme.text3} textAlign="center">
-                      Your position will be <CurrencyLogo currency={inverted ? currency0 : currency1} size="12px" />{' '}
-                      100% {inverted ? currency0?.symbol : currency1?.symbol} at this price
-                    </TYPE.subHeader>
-                  ) : (
-                    <TYPE.label textAlign="center">
-                      Your position is <CurrencyLogo currency={inverted ? currency0 : currency1} size="12px" /> 100%{' '}
-                      {inverted ? currency0?.symbol : currency1?.symbol}
-                    </TYPE.label>
-                  )}
                </AutoColumn>
              </LightCard>
            </RowBetween>

--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@@ -115,7 +115,17 @@ export default function Pool() {
      content: (
        <MenuItem>
          <Download size={16} style={{ marginRight: '8px' }} />
-          {t('Migrate V2 Liquidity')}
+          {t('Migrate')}
+        </MenuItem>
+      ),
+      link: '/migrate/v2',
+      external: false,
+    },
+    {
+      content: (
+        <MenuItem>
+          <Download size={16} style={{ marginRight: '8px' }} />
+          {t('V2 liquidity')}
        </MenuItem>
      ),
      link: '/migrate/v2',
@@ -209,7 +219,7 @@ export default function Pool() {
            <RowFixed justify="center" style={{ width: '100%' }}>
              <ButtonGray
                as={Link}
-                to="/migrate/v2"
+                to="/pool/v2"
                id="import-pool-link"
                style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
              >

--- a/src/pages/Pool/v2.tsx
+++ b/src/pages/Pool/v2.tsx
@@ -155,7 +155,7 @@ export default function Pool() {
            <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
              <HideSmall>
                <TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
-                  Your liquidity
+                  Your V2 liquidity
                </TYPE.mediumHeader>
              </HideSmall>
              <ButtonRow>

--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -143,7 +143,7 @@ export const TYPE = {
    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
  },
  label(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
  },
  black(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
@@ -221,7 +221,7 @@ html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  font-feature-settings: 'ss01' on,  'cv01' on, 'cv03' on;
+  font-feature-settings: 'ss01' on, 'ss02' on,  'cv01' on, 'cv03' on;
 }
 `