diff --git a/packages/yoroi-extension/app/actions/profile-actions.js b/packages/yoroi-extension/app/actions/profile-actions.js
index 74d43dd115..656ef6b3fd 100644
--- a/packages/yoroi-extension/app/actions/profile-actions.js
+++ b/packages/yoroi-extension/app/actions/profile-actions.js
@@ -9,5 +9,8 @@ export default class ProfileActions extends BaseProfileActions {
   acceptTermsOfUse: AsyncAction<void> = new AsyncAction();
   acceptUriScheme: AsyncAction<void> = new AsyncAction();
   toggleSidebar: AsyncAction<void> = new AsyncAction();
+  updateSortedWalletList: AsyncAction<{|
+    sortedWallets: Array<number>,
+  |}> = new AsyncAction();
   setSelectedNetwork: Action<void | $ReadOnly<NetworkRow>> = new Action();
 }
diff --git a/packages/yoroi-extension/app/api/localStorage/index.js b/packages/yoroi-extension/app/api/localStorage/index.js
index cd1f1170ed..d41f524ab4 100644
--- a/packages/yoroi-extension/app/api/localStorage/index.js
+++ b/packages/yoroi-extension/app/api/localStorage/index.js
@@ -30,6 +30,7 @@ const storageKeys = {
   COIN_PRICE_PUB_KEY_DATA: networkForLocalStorage + '-COIN-PRICE-PUB-KEY-DATA',
   EXTERNAL_STORAGE: networkForLocalStorage + '-EXTERNAL-STORAGE',
   TOGGLE_SIDEBAR: networkForLocalStorage + '-TOGGLE-SIDEBAR',
+  SORTED_WALLETS: networkForLocalStorage + '-SORTED-WALLET',
   // ========== CONNECTOR   ========== //
   ERGO_CONNECTOR_WHITELIST: 'connector_whitelist',
 };
@@ -277,6 +278,17 @@ export default class LocalStorageApi {
     }
   }
 
+
+  // ========== Sort wallets - Revamp ========== //
+  getSortedWallets: void => Promise<?Array<number>> = async () => {
+    const result = await getLocalItem(storageKeys.SORTED_WALLETS);
+    if (result === undefined || result === null) return undefined;
+    return JSON.parse(result);
+  };
+
+  setSortedWallets: (Array<number>) => Promise<void> = value =>
+    setLocalItem(storageKeys.SORTED_WALLETS, JSON.stringify(value ?? []));
+
   async reset(): Promise<void> {
     await this.unsetUserLocale();
     await this.unsetTermsOfUseAcceptance();
diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/drag.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/drag.inline.svg
new file mode 100644
index 0000000000..87945494eb
--- /dev/null
+++ b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/drag.inline.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h20v20H0z"/>
+    <path d="M7 14c.82842712 0 1.5.6715729 1.5 1.5S7.82842712 17 7 17s-1.5-.6715729-1.5-1.5S6.17157288 14 7 14zm6 0c.8284271 0 1.5.6715729 1.5 1.5S13.8284271 17 13 17s-1.5-.6715729-1.5-1.5.6715729-1.5 1.5-1.5zM7 8c.82842712 0 1.5.67157288 1.5 1.5 0 .8284271-.67157288 1.5-1.5 1.5s-1.5-.6715729-1.5-1.5C5.5 8.67157288 6.17157288 8 7 8zm6 0c.8284271 0 1.5.67157288 1.5 1.5 0 .8284271-.6715729 1.5-1.5 1.5s-1.5-.6715729-1.5-1.5c0-.82842712.6715729-1.5 1.5-1.5zM7 2c.82842712 0 1.5.67157288 1.5 1.5S7.82842712 5 7 5s-1.5-.67157288-1.5-1.5S6.17157288 2 7 2zm6 0c.8284271 0 1.5.67157288 1.5 1.5S13.8284271 5 13 5s-1.5-.67157288-1.5-1.5S12.1715729 2 13 2z" fill="#6B7384"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/star.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/star.inline.svg
new file mode 100644
index 0000000000..56462429f6
--- /dev/null
+++ b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/star.inline.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h24v24H0z"/>
+    <path stroke="#6B7384" stroke-width="1.5" stroke-linejoin="round" d="M12 17l-5.87785252 3.0901699 1.12256994-6.5450849-4.75528258-4.63525494 6.5716389-.95491503L12 2l2.9389263 5.95491503 6.5716389.95491503-4.7552826 4.63525494 1.1225699 6.5450849z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/stared.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/stared.inline.svg
new file mode 100644
index 0000000000..43a43becfb
--- /dev/null
+++ b/packages/yoroi-extension/app/assets/images/add-wallet/wallet-list/stared.inline.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h24v24H0z"/>
+    <path stroke="#6B7384" stroke-width="1.5" fill="#6B7384" stroke-linejoin="round" d="M12 17l-5.87785252 3.0901699 1.12256994-6.5450849-4.75528258-4.63525494 6.5716389-.95491503L12 2l2.9389263 5.95491503 6.5716389.95491503-4.7552826 4.63525494 1.1225699 6.5450849z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
index 9bed8fd10d..def61e9f72 100644
--- a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
+++ b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
@@ -6,12 +6,10 @@ import classnames from 'classnames';
 import { intlShape } from 'react-intl';
 import { splitAmount, truncateToken } from '../../utils/formatters';
 
-// import globalMessages from '../../i18n/global-messages';
 import styles from './NavWalletDetailsRevamp.scss';
 import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
 import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-// import WalletCurrency from '../wallet/my-wallets/WalletCurrency';
 import { hiddenAmount } from '../../utils/strings';
 import { MultiToken } from '../../api/common/lib/MultiToken';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
@@ -111,14 +109,12 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
               })}
             </div>
             <div className={styles.fixedAmount}>
-              <p>
-                {/* TODO: fix value to USD */}
-                {this.renderAmountDisplay({
-                  shouldHideBalance,
-                  amount: totalAmount,
-                })}{' '}
-                USD
-              </p>
+              {/* TODO: fix value to USD */}
+              {this.renderAmountDisplay({
+                shouldHideBalance,
+                amount: totalAmount,
+              })}{' '}
+              USD
             </div>
           </div>
           {totalAmount != null && showEyeIconSafe && (
diff --git a/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js b/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js
index 9213f22b88..53e967cfb4 100644
--- a/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js
+++ b/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import styles from './NoWalletsAccessList.scss';
+import StarIcon from '../../assets/images/add-wallet/wallet-list/stared.inline.svg';
 
 const messages = defineMessages({
   quickAccess: {
@@ -32,11 +33,10 @@ export default class NoWalletsAccessList extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
 
-    // ;
-
     return (
       <div className={styles.wrapper}>
         <div className={styles.header}>
+          <StarIcon />
           <h3>{intl.formatMessage(messages.quickAccess)}</h3>
         </div>
         <div className={styles.content}>
diff --git a/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.scss b/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.scss
index 2637cc2ec4..dc338b5c95 100644
--- a/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.scss
+++ b/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.scss
@@ -5,11 +5,16 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 40px;
+  padding: 40px 36px;
   text-align: center;
   font-family: var(--font-regular);
 }
 .header {
+  display: flex;
+  align-items: center;
+  svg {
+    margin-right: 8px;
+  }
   h3 {
     font-size: 24px;
     color: var(--theme-wallet-dropdown-main-text-color);
diff --git a/packages/yoroi-extension/app/components/topbar/WalletCard.js b/packages/yoroi-extension/app/components/topbar/WalletCard.js
index 6cff728bc9..54efbd7ef4 100644
--- a/packages/yoroi-extension/app/components/topbar/WalletCard.js
+++ b/packages/yoroi-extension/app/components/topbar/WalletCard.js
@@ -25,7 +25,9 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../utils/strings';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
-import RandomIcon from '../../assets/images/sidebar/revamp/wallet.inline.svg';
+import DragIcon from '../../assets/images/add-wallet/wallet-list/drag.inline.svg';
+import StarIcon from '../../assets/images/add-wallet/wallet-list/star.inline.svg';
+import { Draggable } from 'react-beautiful-dnd';
 
 const messages = defineMessages({
   tokenTypes: {
@@ -62,6 +64,8 @@ type Props = {|
   +getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
   +isCurrentWallet?: boolean,
   +onSelect?: void => void,
+  +walletId: string,
+  +idx: number,
 |};
 
 type State = {| +isActionsShow: boolean |};
@@ -140,7 +144,7 @@ export default class WalletCard extends Component<Props, State> {
 
   render(): Node {
     const { intl } = this.context;
-    const { shouldHideBalance } = this.props;
+    const { shouldHideBalance, walletId, idx } = this.props;
     const { isActionsShow } = this.state;
 
     const [, iconComponent] = this.props.plate
@@ -153,70 +157,75 @@ export default class WalletCard extends Component<Props, State> {
       .join(' - ');
     const totalAmount = this.getTotalAmount();
 
-    const wrapperClassname = classnames(
-      styles.cardWrapper,
-      this.props.isCurrentWallet !== null &&
-        this.props.isCurrentWallet === true &&
-        styles.currentCardWrapper
-    );
-
     return (
-      <button
-        className={wrapperClassname}
-        type="button"
-        onClick={this.props.onSelect}
-        onMouseEnter={this.showActions}
-        onMouseLeave={this.hideActions}
-      >
-        <div className={styles.main}>
-          <div className={styles.header}>
-            <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
-            {' ·  '}
-            <div className={styles.type}>{typeText}</div>
-          </div>
-          <div className={styles.body}>
-            <div>{iconComponent}</div>
-            <div className={styles.content}>
-              <div className={styles.amount}>
-                {this.renderAmountDisplay({
-                  shouldHideBalance,
-                  amount: totalAmount,
-                })}
+      <Draggable draggableId={walletId.toString()} index={idx}>
+        {(provided, snapshot) => (
+          <div
+            tabIndex="0"
+            role="button"
+            className={classnames(
+              styles.cardWrapper,
+              this.props.isCurrentWallet === true && styles.currentCardWrapper,
+              snapshot.isDragging === true && styles.isDragging
+            )}
+            onClick={this.props.onSelect}
+            onKeyDown={this.props.onSelect}
+            onMouseEnter={this.showActions}
+            onMouseLeave={this.hideActions}
+            {...provided.draggableProps}
+            ref={provided.innerRef}
+          >
+            <div className={styles.main}>
+              <div className={styles.header}>
+                <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
+                {' ·  '}
+                <div className={styles.type}>{typeText}</div>
               </div>
-              <div className={styles.fixedAmount}>
-                <p>
-                  {/* TODO: fix value to USD */}
-                  {this.renderAmountDisplay({
-                    shouldHideBalance,
-                    amount: totalAmount,
-                  })}{' '}
-                  USD
-                </p>
+              <div className={styles.body}>
+                <div>{iconComponent}</div>
+                <div className={styles.content}>
+                  <div className={styles.amount}>
+                    {this.renderAmountDisplay({
+                      shouldHideBalance,
+                      amount: totalAmount,
+                    })}
+                  </div>
+                  <div className={styles.fixedAmount}>
+                    {/* TODO: fix value to USD */}
+                    {this.renderAmountDisplay({
+                      shouldHideBalance,
+                      amount: totalAmount,
+                    })}{' '}
+                    USD
+                  </div>
+                </div>
+                <div className={styles.extraInfo}>
+                  <p className={styles.label}>
+                    {intl.formatMessage(messages.tokenTypes)}{' '}
+                    <span className={styles.value}>20</span>
+                  </p>
+                  <p className={styles.label}>
+                    NFTs <span className={styles.value}>2</span>
+                  </p>
+                </div>
               </div>
             </div>
-            <div className={styles.extraInfo}>
-              <p className={styles.label}>
-                {intl.formatMessage(messages.tokenTypes)} <span className={styles.value}>20</span>
-              </p>
-              <p className={styles.label}>
-                NFTs <span className={styles.value}>2</span>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className={styles.actions}>
-          {isActionsShow ? (
-            <>
-              <button type="button" onClick={() => {}}>
-                <RandomIcon />
-              </button>
+            <div
+              className={classnames(
+                styles.actions,
+                (isActionsShow === true || snapshot.isDragging === true) && styles.showActions
+              )}
+            >
+              <div {...provided.dragHandleProps}>
+                <DragIcon />
+              </div>
               <button type="button" onClick={() => {}}>
-                <RandomIcon />
+                <StarIcon />
               </button>
-            </>
-          ) : null}
-        </div>
-      </button>
+            </div>
+          </div>
+        )}
+      </Draggable>
     );
   }
 
diff --git a/packages/yoroi-extension/app/components/topbar/WalletCard.scss b/packages/yoroi-extension/app/components/topbar/WalletCard.scss
index 9e59b83721..29b693bf40 100644
--- a/packages/yoroi-extension/app/components/topbar/WalletCard.scss
+++ b/packages/yoroi-extension/app/components/topbar/WalletCard.scss
@@ -79,21 +79,28 @@
 }
 .actions {
   min-width: 80px;
+  opacity: 0;
+  transition: opacity 0.3s;
   svg {
     max-width: 24px;
     max-height: 24px;
     color: #6b7384;
   }
-  button {
+  & > * {
     width: 40px;
     height: 40px;
     border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     &:hover {
       background: #eaedf2;
     }
   }
 }
-
+.showActions {
+  opacity: 1;
+}
 .cardWrapper {
   padding: 16px;
   display: flex;
@@ -113,6 +120,10 @@
   }
 }
 
+.isDragging {
+  border: 1px solid #eaedf2;
+}
+
 .currentCardWrapper {
   border: 1px solid #3154cb;
 
diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
index 13b65d5bd8..5a889e3211 100644
--- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
+++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
@@ -16,6 +16,8 @@ import { hiddenAmount } from '../../utils/strings';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
 import { MultiToken } from '../../api/common/lib/MultiToken';
+import WalletCard from './WalletCard';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 const messages = defineMessages({
   allWalletsLabel: {
@@ -33,21 +35,62 @@ const messages = defineMessages({
 });
 
 type Props = {|
-  +walletsComponent: Node,
   +close: void => void,
-  +walletsCount: number,
   +shouldHideBalance: boolean,
   +onUpdateHideBalance: void => Promise<void>,
   +getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
   +walletAmount: MultiToken | null,
   +onAddWallet: void => void,
+  +wallets: Array<Object>,
+  +currentSortedWallets: Array<number> | void,
+  +updateSortedWalletList: ({| sortedWallets: Array<number> |}) => Promise<void>,
+|};
+type State = {|
+  walletListIdx: Array<any>,
 |};
 
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
 @observer
-export default class WalletListDialog extends Component<Props> {
+export default class WalletListDialog extends Component<Props, State> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
+  state: State = {
+    walletListIdx: [],
+  };
+
+  async componentDidMount(): Promise<void> {
+    const sortedWalletListIdx = this.props.currentSortedWallets;
+    const currentWalletIdx = this.props.wallets.map(wallet => wallet.walletId);
+
+    let generatedWalletIds;
+    if (sortedWalletListIdx !== undefined && sortedWalletListIdx.length > 0) {
+      const newWalletIds = currentWalletIdx.filter(id => {
+        const index = sortedWalletListIdx.indexOf(id);
+        if (index === -1) {
+          return true;
+        }
+        return false;
+      });
+      generatedWalletIds = [...sortedWalletListIdx, ...newWalletIds];
+    } else {
+      generatedWalletIds = currentWalletIdx;
+    }
+
+    this.setState(
+      {
+        walletListIdx: generatedWalletIds,
+      },
+      async () => {
+        await this.props.updateSortedWalletList({ sortedWallets: generatedWalletIds });
+      }
+    );
+  }
 
   renderAmountDisplay: ({|
     shouldHideBalance: boolean,
@@ -84,21 +127,46 @@ export default class WalletListDialog extends Component<Props> {
       </>
     );
   };
+
+  onDragEnd: Object => any = async result => {
+    const { destination, source } = result;
+    if (!destination || destination.index === source.index) {
+      return;
+    }
+
+    this.setState(
+      prev => {
+        const walletListIdx = reorder(
+          prev.walletListIdx,
+          result.source.index,
+          result.destination.index
+        );
+        return {
+          walletListIdx,
+        };
+      },
+      async function () {
+        await this.props.updateSortedWalletList({ sortedWallets: this.state.walletListIdx });
+      }
+    );
+  };
+
   render(): Node {
     const { intl } = this.context;
+    const { walletListIdx } = this.state;
+
     const {
-      walletsCount,
       shouldHideBalance,
       onAddWallet,
       walletAmount,
       onUpdateHideBalance,
-      walletsComponent,
+      wallets,
     } = this.props;
 
     return (
       <Dialog
         className={styles.component}
-        title={`${intl.formatMessage(messages.allWalletsLabel)} (${walletsCount})`}
+        title={`${intl.formatMessage(messages.allWalletsLabel)} (${wallets.length})`}
         closeOnOverlayClick
         closeButton={<DialogCloseButton />}
         onClose={this.props.close}
@@ -120,7 +188,20 @@ export default class WalletListDialog extends Component<Props> {
             </button>
           </div>
         </div>
-        <div className={styles.list}>{walletsComponent}</div>
+        <DragDropContext onDragEnd={this.onDragEnd}>
+          <Droppable droppableId="wallet-list-droppable">
+            {provided => (
+              <div className={styles.list} {...provided.droppableProps} ref={provided.innerRef}>
+                {walletListIdx.length > 0 &&
+                  walletListIdx.map((walletId, idx) => {
+                    const wallet = this.props.wallets.find(w => w.walletId === walletId);
+                    return <WalletCard key={walletId} idx={idx} {...wallet} />;
+                  })}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
         <div className={styles.footer}>
           <button type="button" className={styles.toggleButton} onClick={onAddWallet}>
             {intl.formatMessage(messages.addWallet)}
diff --git a/packages/yoroi-extension/app/components/wallet/add/MainCards.scss b/packages/yoroi-extension/app/components/wallet/add/MainCards.scss
index ef344b6329..c1042a90c0 100644
--- a/packages/yoroi-extension/app/components/wallet/add/MainCards.scss
+++ b/packages/yoroi-extension/app/components/wallet/add/MainCards.scss
@@ -31,6 +31,22 @@
   }
 }
 
+:global(.YoroiRevamp) {
+  .heroCardsItemBg {
+    &.bgConnectHW {
+      background-image: url(../../../assets/images/add-wallet/connect-hw-modern.inline.svg);
+    }
+
+    &.bgCreateWallet {
+      background-image: url(../../../assets/images/add-wallet/create-wallet-modern.inline.svg);
+    }
+
+    &.bgRestoreWallet {
+      background-image: url(../../../assets/images/add-wallet/restore-wallet-modern.inline.svg);
+    }
+  }
+}
+
 :global(.YoroiModern) {
   .heroCardsItemBg {
     &.bgConnectHW {
diff --git a/packages/yoroi-extension/app/components/widgets/options/OptionBlock.scss b/packages/yoroi-extension/app/components/widgets/options/OptionBlock.scss
index 3c7c22678e..fa3266f2b4 100644
--- a/packages/yoroi-extension/app/components/widgets/options/OptionBlock.scss
+++ b/packages/yoroi-extension/app/components/widgets/options/OptionBlock.scss
@@ -12,7 +12,7 @@
   .optionBlockWrapper {
     font-family: var(--font-regular);
     letter-spacing: 0;
-  
+
     // TITLE BLOCK
     .optionSubmitButton {
       font-family: var(--font-regular);
@@ -24,7 +24,7 @@
       cursor: pointer;
       transition: 100ms;
       border-radius: 8px;
-  
+
       .optionTitle {
         font-size: 18px;
         line-height: 22px;
@@ -34,7 +34,7 @@
         font-weight: var(--font-semibold);
         transition: 100ms;
       }
-  
+
       .optionImage {
         width: 70px;
         flex: 0 0 70px;
@@ -69,7 +69,7 @@
         .learnMoreText {
           font-size: 14px;
           line-height: 22px;
-        }        
+        }
       }
 
       &.showlearnMore {
@@ -95,15 +95,15 @@
       justify-content: center;
       font-family: var(--font-regular);
       transition: 100ms;
-    
+
       &:hover {
         box-shadow: 0 8px 10px 0px rgba(24,26,30, .06);
       }
-    
+
       svg {
         transition: 300ms;
       }
-    
+
       &.arrowUp {
         svg {
           transform: rotate(180deg);
@@ -114,7 +114,7 @@
         margin-left: 5px;
         margin-top: 3px;
         line-height: normal;
-      }      
+      }
     }
   }
 }
@@ -125,10 +125,10 @@
       .optionSubmitButton {
         &:hover {
           .optionTitle {
-            color: var(--theme-default-main-color); 
+            color: var(--theme-default-main-color);
           }
         }
-        
+
         .optionImage {
           &.cardano {
             background-image: url(../../../assets/images/my-wallets/symbol_ada.inline.svg);
@@ -194,7 +194,7 @@
       .optionSubmitButton {
         &:hover {
           .optionTitle {
-            color: var(--theme-default-color-blue); 
+            color: var(--theme-default-color-blue);
           }
         }
 
@@ -223,7 +223,7 @@
           &.connectLedger {
             background-image: url(../../../assets/images/add-wallet/option-dialog/connect-ledger-modern.inline.svg);
           }
-      
+
           &.connectTrezor {
             background-image: url(../../../assets/images/add-wallet/option-dialog/connect-trezor-modern.inline.svg);
           }
@@ -232,7 +232,73 @@
           &.createWallet {
             background-image: url(../../../assets/images/add-wallet/create-wallet-modern.inline.svg);
           }
-        
+
+          // RESTORE WALLET
+          &.restoreNormalWallet {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/restore-normal-wallet-modern.inline.svg);
+          }
+          &.normal24WordWallet {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/restore-normal-wallet-modern.inline.svg);
+          }
+          &.restorePaperWallet {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/restore-paper-wallet-modern.inline.svg);
+          }
+          &.bgByronMainnet {
+            background-image: url(../../../assets/images/claim/byron-mainnet.inline.svg);
+            background-position: center 20px !important;
+          }
+          &.bgShelleyMainnet {
+            background-image: url(../../../assets/images/claim/shelley-mainnet.inline.svg);
+            background-position: center 20px !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+:global(.YoroiRevamp) {
+  .optionBlockListItem {
+    .optionBlockWrapper {
+      .optionSubmitButton {
+        &:hover {
+          .optionTitle {
+            color: var(--theme-default-color-blue);
+          }
+        }
+
+        .optionImage {
+          &.cardano {
+            background-image: url(../../../assets/images/my-wallets/symbol_ada.inline.svg);
+          }
+          &.cardanoTestnet {
+            background-image: url(../../../assets/images/my-wallets/symbol_adaTestnet.inline.svg);
+          }
+          &.ergo {
+            background-image: url(../../../assets/images/my-wallets/symbol_ergo.inline.svg);
+          }
+          &.legacyDaedalus {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/daedalus-modern.inline.svg);
+          }
+          &.masterKey {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/Master_key.inline.svg);
+            background-position: center 15px !important;
+            background-size: 50px;
+          }
+          // CONNECT HARDWARE WALLET
+          &.connectLedger {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/connect-ledger-modern.inline.svg);
+          }
+
+          &.connectTrezor {
+            background-image: url(../../../assets/images/add-wallet/option-dialog/connect-trezor-modern.inline.svg);
+          }
+
+          // CREATE WALLET
+          &.createWallet {
+            background-image: url(../../../assets/images/add-wallet/create-wallet-modern.inline.svg);
+          }
+
           // RESTORE WALLET
           &.restoreNormalWallet {
             background-image: url(../../../assets/images/add-wallet/option-dialog/restore-normal-wallet-modern.inline.svg);
diff --git a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
index 2403a3e96a..a14b200c49 100644
--- a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
+++ b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
@@ -28,7 +28,6 @@ import WalletListDialog from '../components/topbar/WalletListDialog';
 import { networks } from '../api/ada/lib/storage/database/prepackaged/networks';
 import { addressToDisplayString } from '../api/ada/lib/storage/bridge/utils';
 import { getReceiveAddress } from '../stores/stateless/addressStores';
-import WalletCard from '../components/topbar/WalletCard';
 
 export type GeneratedData = typeof NavBarContainerRevamp.prototype.generated;
 
@@ -61,59 +60,57 @@ export default class NavBarContainerRevamp extends Component<Props> {
   };
 
   render(): Node {
-    // const { intl } = this.context;
     const { stores } = this.generated;
     const { profile } = stores;
 
     const walletsStore = stores.wallets;
-
     const wallets = this.generated.stores.wallets.publicDerivers;
 
-    const dropdownComponent = (() => {
-      const getDropdownHead = () => {
-        const publicDeriver = walletsStore.selected;
-        if (publicDeriver == null) {
-          // TODO: Remove style since for now, we don't have a selected wallet by default
-          return (
-            <div style={{ marginRight: '100px' }}>
-              <NoWalletsDropdown />
-            </div>
-          );
-        }
-        const parent = publicDeriver.getParent();
-
-        const settingsCache = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
-          parent
+    const DropdownHead = () => {
+      const publicDeriver = walletsStore.selected;
+      if (publicDeriver == null) {
+        // TODO: Remove style since for now, we don't have a selected wallet by default
+        return (
+          <div style={{ marginRight: '100px' }}>
+            <NoWalletsDropdown />
+          </div>
         );
+      }
+      const parent = publicDeriver.getParent();
 
-        const withPubKey = asGetPublicKey(publicDeriver);
-        const plate =
-          withPubKey == null
-            ? null
-            : this.generated.stores.wallets.getPublicKeyCache(withPubKey).plate;
+      const settingsCache = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
+        parent
+      );
 
-        const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
-        const balance = txRequests.requests.getBalanceRequest.result || null;
+      const withPubKey = asGetPublicKey(publicDeriver);
+      const plate =
+        withPubKey == null
+          ? null
+          : this.generated.stores.wallets.getPublicKeyCache(withPubKey).plate;
 
-        return (
-          <NavWalletDetailsRevamp
-            plate={plate}
-            wallet={settingsCache}
-            onUpdateHideBalance={this.updateHideBalance}
-            shouldHideBalance={profile.shouldHideBalance}
-            rewards={this.getRewardBalance(publicDeriver)}
-            walletAmount={balance}
-            getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
-            defaultToken={this.generated.stores.tokenInfoStore.getDefaultTokenInfo(
-              publicDeriver.getParent().getNetworkInfo().NetworkId
-            )}
-          />
-        );
-      };
+      const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
+      const balance = txRequests.requests.getBalanceRequest.result || null;
+
+      return (
+        <NavWalletDetailsRevamp
+          plate={plate}
+          wallet={settingsCache}
+          onUpdateHideBalance={this.updateHideBalance}
+          shouldHideBalance={profile.shouldHideBalance}
+          rewards={this.getRewardBalance(publicDeriver)}
+          walletAmount={balance}
+          getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
+          defaultToken={this.generated.stores.tokenInfoStore.getDefaultTokenInfo(
+            publicDeriver.getParent().getNetworkInfo().NetworkId
+          )}
+        />
+      );
+    };
 
+    const DropdownComponent = () => {
       return (
         <NavDropdownRevamp
-          headerComponent={getDropdownHead()}
+          headerComponent={<DropdownHead />}
           contentComponents={<NoWalletsAccessList />}
           walletsCount={wallets.length}
           openWalletInfoDialog={() => {
@@ -124,7 +121,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
           }}
         />
       );
-    })();
+    };
 
     return (
       <>
@@ -132,7 +129,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
         <NavBarRevamp
           title={this.props.title}
           menu={this.props.menu}
-          walletDetails={dropdownComponent}
+          walletDetails={<DropdownComponent />}
           goToNotifications={() =>
             this.generated.actions.router.goToRoute.trigger({
               route: ROUTES.NOTICE_BOARD.ROOT,
@@ -164,7 +161,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
     const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
     const balance = txRequests.requests.getBalanceRequest.result || null;
 
-    const walletComponents = wallets.map(wallet => {
+    const walletsMap = wallets.map(wallet => {
       const parent = wallet.getParent();
       const settingsCache = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
         parent
@@ -176,26 +173,23 @@ export default class NavBarContainerRevamp extends Component<Props> {
           ? null
           : this.generated.stores.wallets.getPublicKeyCache(withPubKey).plate;
 
-      return (
-        <WalletCard
-          key={wallet.getPublicDeriverId()}
-          rewards={this.getRewardBalance(publicDeriver)}
-          walletAmount={balance}
-          getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
-          plate={plate}
-          wallet={settingsCache}
-          shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
-          onSelect={() => this.switchToNewWallet(wallet)}
-          isCurrentWallet={wallet === this.generated.stores.wallets.selected}
-        />
-      );
+      return {
+        walletId: wallet.getPublicDeriverId(),
+        rewards: this.getRewardBalance(publicDeriver),
+        walletAmount: balance,
+        getTokenInfo: genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo),
+        plate,
+        wallet: settingsCache,
+        shouldHideBalance: this.generated.stores.profile.shouldHideBalance,
+        onSelect: () => this.switchToNewWallet(wallet),
+        isCurrentWallet: wallet === this.generated.stores.wallets.selected,
+      };
     });
 
     if (this.generated.stores.uiDialogs.isOpen(WalletListDialog)) {
       return (
         <WalletListDialog
-          walletsComponent={walletComponents}
-          walletsCount={wallets.length}
+          wallets={walletsMap}
           close={this.generated.actions.dialogs.closeActiveDialog.trigger}
           shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
           onUpdateHideBalance={this.updateHideBalance}
@@ -204,6 +198,8 @@ export default class NavBarContainerRevamp extends Component<Props> {
           onAddWallet={() =>
             this.generated.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })
           }
+          updateSortedWalletList={this.generated.actions.profile.updateSortedWalletList.trigger}
+          currentSortedWallets={this.generated.stores.profile.currentSortedWallets ?? []}
         />
       );
     }
@@ -225,8 +221,8 @@ export default class NavBarContainerRevamp extends Component<Props> {
   ) => {
     const infoWallets = wallets.map(async (wallet: PublicDeriver<>) => {
       const parent: ConceptualWallet = wallet.getParent();
-      const settingsCache: ConceptualWalletSettingsCache
-        = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
+      const settingsCache: ConceptualWalletSettingsCache =
+        this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
           parent
         );
 
@@ -293,6 +289,9 @@ export default class NavBarContainerRevamp extends Component<Props> {
         updateHideBalance: {|
           trigger: (params: void) => Promise<void>,
         |},
+        updateSortedWalletList: {|
+          trigger: ({| sortedWallets: Array<number> |}) => Promise<void>,
+        |},
       |},
       router: {|
         goToRoute: {|
@@ -319,6 +318,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
       |},
       profile: {|
         shouldHideBalance: boolean,
+        currentSortedWallets: ?Array<number>,
       |},
       tokenInfoStore: {|
         tokenInfo: TokenInfoMap,
@@ -368,6 +368,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
         },
         profile: {
           shouldHideBalance: stores.profile.shouldHideBalance,
+          currentSortedWallets: stores.profile.currentSortedWallets,
         },
         delegation: {
           getDelegationRequests: stores.delegation.getDelegationRequests,
@@ -382,6 +383,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
         },
         profile: {
           updateHideBalance: { trigger: actions.profile.updateHideBalance.trigger },
+          updateSortedWalletList: { trigger: actions.profile.updateSortedWalletList.trigger },
         },
         router: {
           goToRoute: { trigger: actions.router.goToRoute.trigger },
diff --git a/packages/yoroi-extension/app/containers/settings/categories/RemoveWalletDialogContainer.js b/packages/yoroi-extension/app/containers/settings/categories/RemoveWalletDialogContainer.js
index 9d94894f3e..11cc839316 100644
--- a/packages/yoroi-extension/app/containers/settings/categories/RemoveWalletDialogContainer.js
+++ b/packages/yoroi-extension/app/containers/settings/categories/RemoveWalletDialogContainer.js
@@ -1,5 +1,5 @@
 // @flow
-import type { Node } from 'react';
+import type { Node, ComponentType } from 'react';
 import React, { Component } from 'react';
 import { computed, action, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -13,6 +13,8 @@ import type { InjectedOrGenerated } from '../../../types/injectedPropsType';
 
 import DangerousActionDialog from '../../../components/widgets/DangerousActionDialog';
 import LocalizableError from '../../../i18n/LocalizableError';
+import { withLayout } from '../../../themes/context/layout';
+import type { LayoutComponentMap } from '../../../themes/context/layout';
 
 export type GeneratedData = typeof RemoveWalletDialogContainer.prototype.generated;
 
@@ -20,11 +22,16 @@ type Props = {|
   ...InjectedOrGenerated<GeneratedData>,
   publicDeriver: void | PublicDeriver<>,
 |};
+type InjectedProps = {|
+  +renderLayoutComponent: LayoutComponentMap => Node,
+|};
+type AllProps = {| ...Props, ...InjectedProps |};
 
 const dialogMessages = defineMessages({
   warning2: {
     id: 'wallet.settings.delete.warning2',
-    defaultMessage: '!!!Please double-check you still have the means to restore access to this wallet. If you cannot, removing the wallet may result in irreversible loss of funds.',
+    defaultMessage:
+      '!!!Please double-check you still have the means to restore access to this wallet. If you cannot, removing the wallet may result in irreversible loss of funds.',
   },
   accept: {
     id: 'wallet.settings.delete.accept',
@@ -33,8 +40,8 @@ const dialogMessages = defineMessages({
 });
 
 @observer
-export default class RemoveWalletDialogContainer extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+class RemoveWalletDialogContainer extends Component<AllProps> {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -48,14 +55,60 @@ export default class RemoveWalletDialogContainer extends Component<Props> {
   toggleCheck: void => void = () => {
     if (this.generated.stores.walletSettings.removeWalletRequest.isExecuting) return;
     this.isChecked = !this.isChecked;
-  }
+  };
+
+  removeWalletRevamp: void => Promise<void> = async () => {
+    const settingsActions = this.generated.actions.walletSettings;
+
+    const selectedWalletId = this.props.publicDeriver?.getPublicDeriverId();
+    const walletIdList = this.generated.stores.profile.currentSortedWallets;
+
+    const newSortedWalletIds =
+      walletIdList !== null &&
+      walletIdList !== undefined &&
+      walletIdList.filter(walletId => walletId !== selectedWalletId);
+
+    await this.generated.actions.profile.updateSortedWalletList.trigger({
+      sortedWallets: newSortedWalletIds || [],
+    });
+
+    this.props.publicDeriver &&
+      settingsActions.removeWallet.trigger({
+        publicDeriver: this.props.publicDeriver,
+      });
+  };
 
   render(): Node {
     const { intl } = this.context;
     const settingsStore = this.generated.stores.walletSettings;
     const settingsActions = this.generated.actions.walletSettings;
 
-    return (
+    const DangerousActionDialogClassic = (
+      <DangerousActionDialog
+        title={intl.formatMessage(messages.titleLabel)}
+        checkboxAcknowledge={intl.formatMessage(dialogMessages.accept)}
+        isChecked={this.isChecked}
+        toggleCheck={this.toggleCheck}
+        isSubmitting={settingsStore.removeWalletRequest.isExecuting}
+        error={settingsStore.removeWalletRequest.error}
+        onCancel={this.generated.actions.dialogs.closeActiveDialog.trigger}
+        primaryButton={{
+          label: intl.formatMessage(globalMessages.remove),
+          onClick: () =>
+            this.props.publicDeriver &&
+            settingsActions.removeWallet.trigger({
+              publicDeriver: this.props.publicDeriver,
+            }),
+        }}
+        secondaryButton={{
+          onClick: this.generated.actions.dialogs.closeActiveDialog.trigger,
+        }}
+      >
+        <p>{intl.formatMessage(messages.removeExplanation)}</p>
+        <p>{intl.formatMessage(dialogMessages.warning2)}</p>
+      </DangerousActionDialog>
+    );
+    const DangerousActionDialogRevamp = (
       <DangerousActionDialog
         title={intl.formatMessage(messages.titleLabel)}
         checkboxAcknowledge={intl.formatMessage(dialogMessages.accept)}
@@ -66,45 +119,59 @@ export default class RemoveWalletDialogContainer extends Component<Props> {
         onCancel={this.generated.actions.dialogs.closeActiveDialog.trigger}
         primaryButton={{
           label: intl.formatMessage(globalMessages.remove),
-          onClick: () => this.props.publicDeriver && settingsActions.removeWallet.trigger({
-            publicDeriver: this.props.publicDeriver,
-          })
+          onClick: this.removeWalletRevamp,
         }}
         secondaryButton={{
-          onClick: this.generated.actions.dialogs.closeActiveDialog.trigger
+          onClick: this.generated.actions.dialogs.closeActiveDialog.trigger,
         }}
       >
         <p>{intl.formatMessage(messages.removeExplanation)}</p>
         <p>{intl.formatMessage(dialogMessages.warning2)}</p>
       </DangerousActionDialog>
     );
+
+    return this.props.renderLayoutComponent({
+      CLASSIC: DangerousActionDialogClassic,
+      REVAMP: DangerousActionDialogRevamp,
+    });
   }
 
   @computed get generated(): {|
     actions: {|
+      profile: {|
+        updateSortedWalletList: {|
+          trigger: ({| sortedWallets: Array<number> |}) => Promise<void>,
+        |},
+      |},
       dialogs: {|
         closeActiveDialog: {|
-          trigger: (params: void) => void
-        |}
+          trigger: (params: void) => void,
+        |},
       |},
       walletSettings: {|
         removeWallet: {|
           trigger: (params: {|
-            publicDeriver: PublicDeriver<>
-          |}) => Promise<void>
-        |}
-      |}
+            publicDeriver: PublicDeriver<>,
+          |}) => Promise<void>,
+        |},
+      |},
     |},
     stores: {|
+      profile: {|
+        currentSortedWallets: ?Array<number>,
+      |},
       walletSettings: {|
         removeWalletRequest: {|
           error: ?LocalizableError,
           isExecuting: boolean,
-          reset: () => void
-        |}
-      |}
-    |}
-    |} {
+          reset: () => void,
+        |},
+      |},
+      wallets: {|
+        publicDerivers: Array<PublicDeriver<>>,
+      |},
+    |},
+  |} {
     if (this.props.generated !== undefined) {
       return this.props.generated;
     }
@@ -116,6 +183,12 @@ export default class RemoveWalletDialogContainer extends Component<Props> {
     const settingStore = stores.walletSettings;
     return Object.freeze({
       stores: {
+        wallets: {
+          publicDerivers: stores.wallets.publicDerivers,
+        },
+        profile: {
+          currentSortedWallets: stores.profile.currentSortedWallets,
+        },
         walletSettings: {
           removeWalletRequest: {
             reset: settingStore.removeWalletRequest.reset,
@@ -125,6 +198,9 @@ export default class RemoveWalletDialogContainer extends Component<Props> {
         },
       },
       actions: {
+        profile: {
+          updateSortedWalletList: { trigger: actions.profile.updateSortedWalletList.trigger },
+        },
         walletSettings: {
           removeWallet: { trigger: settingActions.removeWallet.trigger },
         },
@@ -135,3 +211,4 @@ export default class RemoveWalletDialogContainer extends Component<Props> {
     });
   }
 }
+export default (withLayout(RemoveWalletDialogContainer): ComponentType<Props>);
diff --git a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js
index 76517500a0..444649e2a1 100644
--- a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js
+++ b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js
@@ -426,6 +426,7 @@ export const RemoveWallet = (): Node => {
         getConceptualWalletSettingsCache: lookup.getConceptualWalletSettingsCache,
         getSigningKeyCache: lookup.getSigningKeyCache,
       });
+      // $FlowFixMe[prop-missing]: Some props are quite different for revamp components
       return (
         <WalletSettingsPage
           generated={{
@@ -439,6 +440,7 @@ export const RemoveWallet = (): Node => {
             },
             ChangeWalletPasswordDialogContainerProps: (null: any),
             ExportWalletDialogContainerProps: (null: any),
+            // $FlowFixMe[incompatible-type]: Revamp has different logic
             RemoveWalletDialogContainerProps: {
               generated: {
                 stores: {
diff --git a/packages/yoroi-extension/app/stores/toplevel/ProfileStore.js b/packages/yoroi-extension/app/stores/toplevel/ProfileStore.js
index 7342e8714a..ef3ebf17e3 100644
--- a/packages/yoroi-extension/app/stores/toplevel/ProfileStore.js
+++ b/packages/yoroi-extension/app/stores/toplevel/ProfileStore.js
@@ -133,6 +133,16 @@ export default class ProfileStore extends BaseProfileStore<StoresMap, ActionsMap
     (boolean) => Promise<void>
   >(this.api.localStorage.setToggleSidebar);
 
+  @observable getSortedWalletsRequest: Request<(void) => Promise<?Array<number>>> = new Request<
+    (void) => Promise<?Array<number>>
+  >(this.api.localStorage.getSortedWallets);
+
+  @observable setSortedWalletsRequest: Request<
+    ({| sortedWallets: Array<number> |}) => Promise<void>
+  > = new Request<({| sortedWallets: Array<number> |}) => Promise<void>>(
+    ({ sortedWallets }) => this.api.localStorage.setSortedWallets(sortedWallets)
+  );
+
   setup(): void {
     super.setup();
     this.actions.profile.acceptTermsOfUse.listen(this._acceptTermsOfUse);
@@ -142,8 +152,10 @@ export default class ProfileStore extends BaseProfileStore<StoresMap, ActionsMap
     this.registerReactions([
       this._checkSetupSteps,
     ]);
+    this.actions.profile.updateSortedWalletList.listen(this._updateSortedWalletList);
     this._getTermsOfUseAcceptance(); // eagerly cache
     this._getUriSchemeAcceptance(); // eagerly cache
+    this._getSortedWalletList()
   }
 
   teardown(): void {
@@ -232,6 +244,24 @@ export default class ProfileStore extends BaseProfileStore<StoresMap, ActionsMap
       }
     }
   };
+
+  // ========== Sort wallets - Revamp ========== //
+  @computed get currentSortedWallets(): (Array<number> | void) {
+    let { result } = this.getSortedWalletsRequest;
+    if (result == null) {
+      result = this.getSortedWalletsRequest.execute().result;
+    }
+    return result ?? [];
+  }
+  _getSortedWalletList: void => Promise<void> = async () => {
+    await this.getSortedWalletsRequest.execute();
+  };
+  _updateSortedWalletList: ({| sortedWallets: Array<number> |}) => Promise<void> = async ({
+    sortedWallets,
+  }) => {
+    await this.setSortedWalletsRequest.execute({ sortedWallets });
+    await this.getSortedWalletsRequest.execute();
+  };
 }
 
 export function getPaperWalletIntro(currentLocale: string, defaultLocale: string): string {
diff --git a/packages/yoroi-extension/app/themes/prebuilt/YoroiRevamp.js b/packages/yoroi-extension/app/themes/prebuilt/YoroiRevamp.js
index 24c72fa580..9390d7e277 100644
--- a/packages/yoroi-extension/app/themes/prebuilt/YoroiRevamp.js
+++ b/packages/yoroi-extension/app/themes/prebuilt/YoroiRevamp.js
@@ -1,5 +1,5 @@
 // @flow
-//  ==== Theme: Yoroi Modern === //
+//  ==== Theme: Yoroi YoroiRevamp === //
 import common from './Common';
 
 // FONTS
@@ -193,7 +193,7 @@ const modalMargin = {
   left: 40,
 };
 
-const YoroiModern = {
+const YoroiRevamp = {
   // COMMON-THEME-INDEPENDENT
   ...common,
 
@@ -538,7 +538,7 @@ const YoroiModern = {
 };
 
 // *************************************************************
-// Here we are overriding YoroiModern theme for Shelley Testnet
+// Here we are overriding YoroiRevamp theme for Shelley Testnet
 // Creating a new theme is costly because not only color
 // changes but layout is different in different theme.
 // e.g for new theme we need to override :global(.NewTheme)
@@ -575,10 +575,10 @@ const ShelleyTestnetOverrides = {
 export const getThemeVars: ('shelley' | void) => { ... } = env => {
   if (env === 'shelley') {
     const mergedTheme = {
-      ...YoroiModern,
+      ...YoroiRevamp,
       ...ShelleyTestnetOverrides,
     };
     return mergedTheme;
   }
-  return YoroiModern;
+  return YoroiRevamp;
 };
diff --git a/packages/yoroi-extension/package-lock.json b/packages/yoroi-extension/package-lock.json
index d65544a47d..4f552282a2 100644
--- a/packages/yoroi-extension/package-lock.json
+++ b/packages/yoroi-extension/package-lock.json
@@ -11463,6 +11463,15 @@
         "@types/unist": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -11655,8 +11664,7 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/puppeteer": {
       "version": "1.20.3",
@@ -11691,13 +11699,23 @@
       "version": "17.0.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
       "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-redux": {
+      "version": "7.1.18",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz",
+      "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "@types/react-syntax-highlighter": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz",
@@ -11734,8 +11752,7 @@
     "@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
-      "dev": true
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
     },
     "@types/schema-utils": {
       "version": "1.0.0",
@@ -16290,6 +16307,21 @@
         "type-fest": "^0.8.1"
       }
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      },
+      "dependencies": {
+        "tiny-invariant": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+          "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+        }
+      }
+    },
     "css-line-break": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
@@ -16524,8 +16556,7 @@
     "csstype": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
-      "dev": true
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
     },
     "cucumber": {
       "version": "git+https://github.com/SebastienGllmt/cucumber-js.git#965b44ed683ac8d8facbd3e242072d37f48426d6",
@@ -25472,8 +25503,7 @@
     "memoize-one": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==",
-      "dev": true
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
     },
     "memoizerific": {
       "version": "1.11.3",
@@ -28603,6 +28633,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "ramda": {
       "version": "0.27.1",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
@@ -28744,6 +28779,20 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
     "react-blockies": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/react-blockies/-/react-blockies-1.4.1.tgz",
@@ -29293,6 +29342,34 @@
         "react-popper": "^2.2.4"
       }
     },
+    "react-redux": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
+      "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/react-redux": "^7.1.16",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@@ -29658,6 +29735,14 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "redux": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.1.tgz",
+      "integrity": "sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "refractor": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.3.1.tgz",
@@ -34119,6 +34204,11 @@
         "use-isomorphic-layout-effect": "^1.0.0"
       }
     },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
diff --git a/packages/yoroi-extension/package.json b/packages/yoroi-extension/package.json
index 0de34f760e..0b61f4ea3e 100644
--- a/packages/yoroi-extension/package.json
+++ b/packages/yoroi-extension/package.json
@@ -198,6 +198,7 @@
     "qr-image": "3.2.0",
     "qrcode.react": "1.0.1",
     "react": "16.13.1",
+    "react-beautiful-dnd": "^13.1.0",
     "react-blockies": "1.4.1",
     "react-copy-to-clipboard": "5.0.3",
     "react-dom": "16.13.1",