diff --git a/packages/create-invoice-form/src/lib/create-invoice-form.svelte b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
index d2eb5879..906aa629 100644
--- a/packages/create-invoice-form/src/lib/create-invoice-form.svelte
+++ b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
@@ -23,7 +23,7 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
-  import { EncryptionTypes, CipherProviderTypes } from '@requestnetwork/types';
+  import { EncryptionTypes, CipherProviderTypes } from "@requestnetwork/types";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
@@ -115,7 +115,7 @@
     totalAmount: 0,
   };
 
-  $: cipherProvider = requestNetwork?.getCipherProvider();
+  $: cipherProvider = undefined;
 
   $: {
     if (wagmiConfig) {
@@ -188,7 +188,7 @@
       try {
         addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
         let request;
-        if(cipherProvider && formData.isEncrypted) {
+        if (cipherProvider && formData.isEncrypted) {
           const payeeEncryptionParams = {
             key: requestCreateParameters.requestInfo.payee?.value!,
             method: EncryptionTypes.METHOD.KMS,
@@ -205,7 +205,7 @@
               paymentNetwork: requestCreateParameters.paymentNetwork,
               contentData: requestCreateParameters.contentData,
             },
-            [payeeEncryptionParams, payerEncryptionParams],
+            [payeeEncryptionParams, payerEncryptionParams]
           );
         } else {
           request = await requestNetwork.createRequest({
diff --git a/packages/create-invoice-form/src/lib/invoice/form-view.svelte b/packages/create-invoice-form/src/lib/invoice/form-view.svelte
index b69e052b..0f9f0903 100644
--- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form-view.svelte
@@ -194,7 +194,7 @@
       </span>
     </p>
     <p class="invoice-section-title">
-      <span>Settlement Currency</span>
+      <span>Payment Currency</span>
       <span class="invoice-section-title-content">
         {currency ? `${currency.symbol} (${currency.network})` : ""}
       </span>
diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 3fb33977..998271d1 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -5,6 +5,7 @@
   import Input from "@requestnetwork/shared-components/input.svelte";
   import Labels from "@requestnetwork/shared-components/labels.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
+  import SearchableDropdown from "@requestnetwork/shared-components/searchable-dropdown.svelte";
 
   // Icons
   import Trash from "@requestnetwork/shared-icons/trash.svelte";
@@ -410,77 +411,65 @@
             </div>
           </Accordion>
         </div>
-        <Dropdown
-          {config}
-          placeholder="Payment chain"
-          selectedValue={network}
-          options={networks
-            .filter((networkItem) => networkItem)
-            .map((networkItem) => ({
-              value: networkItem,
-              label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
-            }))}
-          onchange={handleNetworkChange}
-        />
-        <Dropdown
-          {config}
-          selectedValue={invoiceCurrency
-            ? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
-            : undefined}
-          placeholder="Invoice currency (labeling)"
-          options={defaultCurrencies
-            ?.filter((curr) => {
-              if (!curr) return false;
-              return (
-                curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
-                (curr.network && curr.network === network)
-              );
-            })
-            .map((currency) => ({
+
+        <div class="searchable-dropdown-container">
+          <SearchableDropdown
+            getValue={(currency) => currency.value.symbol}
+            getDisplayValue={(currency) =>
+              `${currency.value.symbol} ${currency.value.network ? `(${currency.value.network})` : ""}`}
+            placeholder="Invoice currency"
+            items={defaultCurrencies
+              ?.filter((curr) => {
+                if (!curr) return false;
+                return (
+                  curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+                  (curr.network && curr.network === network)
+                );
+              })
+              .map((currency) => ({
+                value: currency,
+                label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
+                type: "invoiceCurrency",
+              })) ?? []}
+            onSelect={handleInvoiceCurrencyChange}
+          />
+          <SearchableDropdown
+            items={networks
+              .filter((networkItem) => networkItem)
+              .map((networkItem) => {
+                return {
+                  value: networkItem,
+                  label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
+                  type: "network",
+                };
+              })}
+            placeholder="Payment chain"
+            getValue={(network) => network.value}
+            getDisplayValue={(network) => network.label}
+            onSelect={handleNetworkChange}
+          />
+          <SearchableDropdown
+            items={filteredSettlementCurrencies.map((currency) => ({
               value: currency,
-              label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
-            })) ?? []}
-          onchange={handleInvoiceCurrencyChange}
-        />
-        <Dropdown
-          {config}
-          placeholder="Settlement currency"
-          selectedValue={currency
-            ? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
-            : undefined}
-          options={filteredSettlementCurrencies.map((currency) => ({
-            value: currency,
-            label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
-          }))}
-          onchange={handleCurrencyChange}
-        />
-        {#if cipherProvider}
-          <Input
-            type="checkbox"
-            id="isEncrypted"
-            label="Encrypt invoice"
-            bind:checked={formData.isEncrypted}
+              type: "settlementCurrency",
+            }))}
+            placeholder="Payment currency"
+            getValue={(currency) => currency.value.symbol}
+            getDisplayValue={(currency) =>
+              `${currency.value.symbol} (${currency.value.network})`}
+            onSelect={handleCurrencyChange}
+          />
+          {#if cipherProvider}
+            <Input
+              type="checkbox"
+              id="isEncrypted"
+              label="Encrypt invoice"
+              bind:checked={formData.isEncrypted}
             />
-        {/if}
+          {/if}
+        </div>
       </div>
     </div>
-    <div class="invoice-form-dates">
-      <Input
-        id="issuedOn"
-        type="date"
-        value={inputDateFormat(new Date())}
-        label="Issued Date"
-        {handleInput}
-      />
-      <Input
-        id="dueDate"
-        type="date"
-        min={inputDateFormat(formData.issuedOn)}
-        value={new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000}
-        label="Due Date"
-        {handleInput}
-      />
-    </div>
   </div>
   <div class="invoice-form-table-section">
     <div class="invoice-form-table-wrapper">
@@ -592,6 +581,26 @@
         </div>
       </Button>
     </div>
+    <div class="invoice-form-dates">
+      <Input
+        id="issuedOn"
+        type="date"
+        value={inputDateFormat(new Date())}
+        label="Issued Date"
+        {handleInput}
+      />
+      <Input
+        id="dueDate"
+        type="date"
+        min={inputDateFormat(formData.issuedOn)}
+        value={inputDateFormat(
+          new Date(new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000)
+        )}
+        label="Due Date"
+        {handleInput}
+      />
+    </div>
+
     <div class="invoice-form-label-wrapper">
       <Input
         max={200}
@@ -635,7 +644,7 @@
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
     gap: 20px;
     box-sizing: border-box;
-    min-width: 700px;
+    min-width: 760px;
   }
 
   .invoice-form-container {
@@ -658,15 +667,17 @@
 
   .invoice-form-dates {
     display: flex;
-    flex-direction: column;
-    gap: 9px;
-    margin-left: auto;
-    width: 260px;
+    gap: 16px;
+    width: 100%;
+  }
+
+  :global(.invoice-form-dates .input-wrapper) {
+    width: 100%;
   }
 
   @media only screen and (max-width: 1300px) {
     .invoice-form-dates {
-      margin-left: 0;
+      flex-direction: column;
     }
 
     .invoice-form-container {
@@ -781,7 +792,7 @@
   }
 
   .invoice-form-table-body-quantity {
-    width: 80px !important;
+    width: 180px !important;
   }
 
   .invoice-form-table-body-amount {
@@ -868,4 +879,20 @@
   :global(.invoice-form-close-recipient-button div) {
     padding: 4px !important;
   }
+
+  .searchable-dropdown-container {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 30px;
+  }
+
+  @media only screen and (max-width: 1300px) {
+    .searchable-dropdown-container {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  :global(.danger) {
+    color: #ff0000;
+  }
 </style>
diff --git a/shared/components/searchable-dropdown.svelte b/shared/components/searchable-dropdown.svelte
new file mode 100644
index 00000000..0259baaf
--- /dev/null
+++ b/shared/components/searchable-dropdown.svelte
@@ -0,0 +1,219 @@
+<script lang="ts">
+  import Network from "@requestnetwork/shared-icons/network/network-icon.svelte";
+
+  export let items: any[] = [];
+  export let placeholder = "Search...";
+  export let onSelect: (item: any) => void;
+  export let getValue: (item: any) => string;
+  export let getDisplayValue: (item: any) => string;
+  export let disabled = false;
+
+  let searchTerm = "";
+  let isOpen = false;
+  let filteredItems: any[] = [];
+  let selectedIndex = -1;
+  let dropdownElement: HTMLDivElement;
+
+  $: filteredItems = searchTerm
+    ? items.filter((item) => {
+        const value = getValue(item)?.toString() || "";
+        const secondaryValue = getDisplayValue?.(item)?.toString() || "";
+        const search = searchTerm.toLowerCase();
+
+        return (
+          value.toLowerCase().includes(search) ||
+          secondaryValue.toLowerCase().includes(search)
+        );
+      })
+    : items;
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
+        scrollSelectedIntoView();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, -1);
+        scrollSelectedIntoView();
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (selectedIndex >= 0 && selectedIndex < filteredItems.length) {
+          selectItem(filteredItems[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        isOpen = false;
+        selectedIndex = -1;
+        break;
+    }
+  }
+
+  function scrollSelectedIntoView() {
+    if (dropdownElement && selectedIndex >= 0) {
+      const selectedElement = dropdownElement.children[
+        selectedIndex
+      ] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }
+
+  function selectItem(item: any) {
+    onSelect(item.value);
+    searchTerm = getValue(item);
+    isOpen = false;
+    selectedIndex = -1;
+  }
+
+  $: if (!isOpen) selectedIndex = -1;
+</script>
+
+{#if isOpen && !disabled}
+  <div class="dropdown-overlay" on:click={() => (isOpen = false)} />
+{/if}
+
+<div class="searchable-dropdown" class:disabled>
+  <div class="input-wrapper">
+    <input
+      type="text"
+      {placeholder}
+      bind:value={searchTerm}
+      on:focus={() => !disabled && (isOpen = true)}
+      on:keydown={handleKeydown}
+      {disabled}
+    />
+    <svg
+      class="search-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
+  {#if isOpen && !disabled}
+    <div class="dropdown-list" bind:this={dropdownElement}>
+      {#each filteredItems as item, index}
+        <div
+          class="dropdown-item"
+          class:selected={index === selectedIndex}
+          on:click={() => selectItem(item)}
+          on:mouseenter={() => (selectedIndex = index)}
+        >
+          {#if item.type === "network"}
+            <Network network={item.value} showLabel={false} />
+          {/if}
+          <span>{getDisplayValue ? getDisplayValue(item) : getValue(item)}</span
+          >
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .searchable-dropdown {
+    position: relative;
+    width: 100%;
+  }
+
+  .searchable-dropdown input {
+    position: relative;
+    padding: 8px 12px 8px 36px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 75%;
+  }
+
+  .searchable-dropdown input:focus {
+    outline: none;
+    border-color: #58e1a5;
+    box-shadow: 0 0 0 1px #58e1a5;
+  }
+
+  .dropdown-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1200;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .dropdown-item:hover {
+    background-color: #f5f5f5;
+  }
+
+  .secondary-value {
+    color: #666;
+    font-size: 0.9em;
+  }
+
+  .dropdown-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+  }
+
+  .disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .disabled input {
+    cursor: not-allowed;
+    background-color: #f5f5f5;
+  }
+
+  .input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: #666;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .dropdown-item.selected {
+    background-color: #f0f0f0;
+  }
+</style>
diff --git a/shared/icons/network/arbitrum.svelte b/shared/icons/network/arbitrum.svelte
index e221d59f..1fa9b2ea 100644
--- a/shared/icons/network/arbitrum.svelte
+++ b/shared/icons/network/arbitrum.svelte
@@ -13,42 +13,42 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0a {
       fill: none;
     }
-    .st1 {
+    .st1a {
       fill: #213147;
     }
-    .st2 {
+    .st2a {
       fill: #12aaff;
     }
-    .st3 {
+    .st3a {
       fill: #9dcced;
     }
-    .st4 {
+    .st4a {
       fill: #ffffff;
     }
   </style>
   <g id="Layer_x0020_1">
     <g id="_2405588477232">
-      <rect class="st0" width="2500" height="2500" />
+      <rect class="st0a" width="2500" height="2500" />
       <g>
         <g>
           <path
-            class="st1"
+            class="st1a"
             d="M226,760v980c0,63,33,120,88,152l849,490c54,31,121,31,175,0l849-490c54-31,88-89,88-152V760      c0-63-33-120-88-152l-849-490c-54-31-121-31-175,0L314,608c-54,31-87,89-87,152H226z"
           />
           <g>
             <g>
               <g>
                 <path
-                  class="st2"
+                  class="st2a"
                   d="M1435,1440l-121,332c-3,9-3,19,0,29l208,571l241-139l-289-793C1467,1422,1442,1422,1435,1440z"
                 />
               </g>
               <g>
                 <path
-                  class="st2"
+                  class="st2a"
                   d="M1678,882c-7-18-32-18-39,0l-121,332c-3,9-3,19,0,29l341,935l241-139L1678,883V882z"
                 />
               </g>
@@ -56,21 +56,21 @@
           </g>
           <g>
             <path
-              class="st3"
+              class="st3a"
               d="M1250,155c6,0,12,2,17,5l918,530c11,6,17,18,17,30v1060c0,12-7,24-17,30l-918,530c-5,3-11,5-17,5       s-12-2-17-5l-918-530c-11-6-17-18-17-30V719c0-12,7-24,17-30l918-530c5-3,11-5,17-5l0,0V155z M1250,0c-33,0-65,8-95,25L237,555       c-59,34-95,96-95,164v1060c0,68,36,130,95,164l918,530c29,17,62,25,95,25s65-8,95-25l918-530c59-34,95-96,95-164V719       c0-68-36-130-95-164L1344,25c-29-17-62-25-95-25l0,0H1250z"
             />
           </g>
           <polygon
-            class="st1"
+            class="st1a"
             points="642,2179 727,1947 897,2088 738,2234     "
           />
           <g>
             <path
-              class="st4"
+              class="st4a"
               d="M1172,644H939c-17,0-33,11-39,27L401,2039l241,139l550-1507c5-14-5-28-19-28L1172,644z"
             />
             <path
-              class="st4"
+              class="st4a"
               d="M1580,644h-233c-17,0-33,11-39,27L738,2233l241,139l620-1701c5-14-5-28-19-28V644z"
             />
           </g>
diff --git a/shared/icons/network/celo.svelte b/shared/icons/network/celo.svelte
index 19673ca8..82bda629 100644
--- a/shared/icons/network/celo.svelte
+++ b/shared/icons/network/celo.svelte
@@ -13,21 +13,21 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0c {
       fill-rule: evenodd;
       clip-rule: evenodd;
       fill: #fcff52;
     }
-    .st1 {
+    .st1c {
       fill-rule: evenodd;
       clip-rule: evenodd;
     }
   </style>
   <g id="Layer_x0020_1">
     <g id="_1942792544736">
-      <circle class="st0" cx="1250" cy="1250" r="1250" />
+      <circle class="st0c" cx="1250" cy="1250" r="1250" />
       <path
-        class="st1"
+        class="st1c"
         d="M1949.3,546.2H550.7v1407.7h1398.7v-491.4h-232.1c-80,179.3-260.1,304.1-466.2,304.1    c-284.1,0-514.2-233.6-514.2-517.5c0-284,230.1-515.6,514.2-515.6c210.1,0,390.2,128.9,470.2,312.1h228.1V546.2z"
       />
     </g>
diff --git a/shared/icons/network/mantle.svelte b/shared/icons/network/mantle.svelte
index 7cc37f7e..9ba69b2f 100644
--- a/shared/icons/network/mantle.svelte
+++ b/shared/icons/network/mantle.svelte
@@ -12,17 +12,17 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0m {
       fill: #000;
     }
   </style>
-  <rect width="0" height="311"  />
+  <rect width="0" height="311" />
   <path
-    class="st0"
+    class="st0m"
     d="M155.5,289.1l0-45.7c-4.6,0-9.3-0.4-13.9-1.1l-7.2,45.1C141.4,288.6,148.5,289.1,155.5,289.1L155.5,289.1z   M176.5,287.5c7-1.1,13.9-2.7,20.6-4.9L183,239.1c-4.4,1.4-9,2.5-13.6,3.2L176.5,287.5z M113.9,282.6l14.1-43.4  c-4.4-1.4-8.7-3.2-12.9-5.3l-20.8,40.7C100.6,277.7,107.2,280.4,113.9,282.6z M216.6,274.6c6.3-3.2,12.3-6.9,18-11l-27-36.9  c-3.7,2.7-7.7,5.2-11.9,7.2L216.6,274.6z M76.3,263.5l27-36.9c-3.7-2.7-7.3-5.7-10.6-9l-32.4,32.3l0,0  C65.3,254.8,70.7,259.4,76.3,263.5z M250.5,250.1l0.3-0.3c5-4.9,9.6-10.3,13.7-15.9l-37-26.9c-2.7,3.7-5.8,7.3-9,10.5l-0.5,0.5  l15.6,14.7L250.5,250.1z M46.6,233.8l37-26.9c-2.7-3.7-5.2-7.7-7.3-11.8l-40.8,20.7C38.7,222.1,42.4,228.1,46.6,233.8L46.6,233.8z   M275.5,215.9c3.2-6.2,5.9-12.8,8.1-19.5L240,182.4c-1.4,4.4-3.2,8.7-5.3,12.8L275.5,215.9z M27.4,196.4L71,182.3  c-1.4-4.4-2.5-8.9-3.2-13.5l-45.3,7.1C23.6,182.8,25.3,189.7,27.4,196.4L27.4,196.4z M288.5,176c1.1-6.9,1.7-14,1.7-21l-45.8,0  c0,4.6-0.4,9.3-1.1,13.9L288.5,176z M66.7,154.9c0-4.6,0.4-9.3,1.1-13.9l-45.3-7.1c-1.1,6.9-1.6,14-1.7,21L66.7,154.9L66.7,154.9z   M243.3,141.1l45.3-7.1c-1.1-6.9-2.7-13.8-4.9-20.5l-43.6,14C241.5,132,242.6,136.5,243.3,141.1L243.3,141.1z M71,127.5  c1.4-4.4,3.2-8.7,5.3-12.8L35.5,94c-3.2,6.2-5.9,12.8-8.1,19.5L71,127.5L71,127.5z M234.8,114.8l40.9-20.7  c-3.2-6.3-6.9-12.3-11.1-18L227.5,103C230.2,106.7,232.7,110.7,234.8,114.8L234.8,114.8z M83.6,102.9c2.7-3.7,5.8-7.3,9.1-10.6  l0.1-0.1L60.4,59.9L60.3,60c-5,5-9.6,10.3-13.7,16L83.6,102.9z M218.5,92.5l9.8-9.9l22.5-22.4l-0.1-0.1c-5-4.9-10.3-9.5-15.9-13.6  l-27,36.9c3.7,2.7,7.3,5.7,10.5,9L218.5,92.5z M103.4,83.2c3.7-2.7,7.7-5.1,11.9-7.2L94.5,35.3c-6.3,3.2-12.3,6.9-18,11L103.4,83.2z   M196,76.1l20.9-40.7c-6.3-3.2-12.8-5.9-19.5-8.1l-14.2,43.4C187.5,72.2,191.8,74,196,76.1L196,76.1z M128.2,70.7  c4.4-1.4,9-2.5,13.6-3.2l-7.1-45.1c-6.9,1.1-13.9,2.7-20.6,4.9L128.2,70.7z M169.5,67.5l7.2-45.1c-6.9-1.1-14-1.7-21-1.7l0,45.7  C160.3,66.4,165,66.8,169.5,67.5z"
   />
   <path
-    class="st0"
+    class="st0m"
     d="M155.5,245.5v-45.9c-3.9,0-7.7-0.5-11.5-1.5l-12,44.3C139.7,244.4,147.6,245.5,155.5,245.5z M179,242.4  c7.7-2,15-5,21.9-9l-23.2-39.7c-3.3,1.9-6.9,3.4-10.6,4.4L179,242.4z M110.2,233.4l23.2-39.7c-3.3-1.9-6.4-4.3-9.2-7l-0.4-0.4  l-14.6,15.3l-18,17.3l0.3,0.3C97.1,224.7,103.4,229.5,110.2,233.4L110.2,233.4z M219.6,219.2L219.6,219.2  c5.6-5.6,10.5-11.8,14.4-18.6l-40.1-23c-1.9,3.3-4.3,6.3-7.1,9.1L219.6,219.2z M77,200.5l40.1-22.9c-1.9-3.3-3.4-6.8-4.4-10.5  L68,178.9C70,186.4,73.1,193.7,77,200.5z M243.1,179c2-7.6,3.1-15.4,3.1-23.2l-46.3,0c0,3.8-0.5,7.7-1.5,11.4L243.1,179z   M111.3,155.7c0-3.8,0.5-7.7,1.5-11.4L68,132.5c-2,7.6-3.1,15.4-3.1,23.2L111.3,155.7L111.3,155.7z M198.3,144.4l44.8-11.8  c-2-7.6-5.1-14.9-9-21.7l-40.1,22.9C195.8,137.2,197.3,140.7,198.3,144.4z M117.2,133.8c1.9-3.2,4.2-6.3,7-9l0.1-0.1l-16.6-16.4  L91.8,92l-0.3,0.3c-5.6,5.5-10.4,11.8-14.4,18.5L117.2,133.8z M107.7,108.3l0.2,0.2L107.7,108.3z M186.8,124.8l16.4-16.3L220,92.7  l-0.4-0.4C214,86.7,207.7,82,200.9,78l-23.2,39.7c3.3,1.9,6.3,4.2,9.1,6.9L186.8,124.8z M133.4,117.7c3.3-1.9,6.9-3.4,10.6-4.4  L132.2,69c-7.7,2-15,5-21.9,9L133.4,117.7z M167,113.4l12-44.3c-7.6-2-15.5-3.1-23.4-3.1l0,45.9C159.4,111.9,163.3,112.4,167,113.4  L167,113.4z"
   />
 </svg>
diff --git a/shared/icons/network/matic.svelte b/shared/icons/network/matic.svelte
index de48daf7..1dd61951 100644
--- a/shared/icons/network/matic.svelte
+++ b/shared/icons/network/matic.svelte
@@ -11,13 +11,9 @@
   width="24"
   height="24"
 >
-  <style type="text/css">
-    .st0 {
-      fill: #6c00f6;
-    }
-  </style>
   <path
-    class="st0"
+    fill="#6c00f6"
+    class="st01ma"
     d="M66.8,54.7l-16.7-9.7L0,74.1v58l50.1,29l50.1-29V41.9L128,25.8l27.8,16.1v32.2L128,90.2l-16.7-9.7v25.8  l16.7,9.7l50.1-29V29L128,0L77.9,29v90.2l-27.8,16.1l-27.8-16.1V86.9l27.8-16.1l16.7,9.7V54.7z"
   />
 </svg>
diff --git a/shared/icons/network/network-icon.svelte b/shared/icons/network/network-icon.svelte
index a2eaab02..7435ee02 100644
--- a/shared/icons/network/network-icon.svelte
+++ b/shared/icons/network/network-icon.svelte
@@ -3,6 +3,7 @@
   import { getNetworkIcon } from "../../utils/getNetworkIcon";
 
   export let network = "mainnet";
+  export let showLabel = true;
 
   $: icon = getNetworkIcon(network);
 </script>
@@ -10,7 +11,9 @@
 {#if icon}
   <div class="network-icon" aria-label={`Network: ${capitalize(network)}`}>
     <svelte:component this={icon} />
-    <span>{capitalize(network)}</span>
+    {#if showLabel}
+      <span>{capitalize(network)}</span>
+    {/if}
   </div>
 {/if}
 
diff --git a/shared/icons/network/optimism.svelte b/shared/icons/network/optimism.svelte
index 30298569..5a777403 100644
--- a/shared/icons/network/optimism.svelte
+++ b/shared/icons/network/optimism.svelte
@@ -12,20 +12,20 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0o {
       fill: #ff0420;
     }
-    .st1 {
+    .st1o {
       fill: #ffffff;
     }
   </style>
-  <circle class="st0" cx="250" cy="250" r="250" />
+  <circle class="st0o" cx="250" cy="250" r="250" />
   <path
-    class="st1"
+    class="st1o"
     d="M177.1,316.4c-14.9,0-27.1-3.5-36.6-10.5c-9.4-7.1-14.1-17.3-14.1-30.4c0-2.8,0.3-6.1,0.9-10.1  c1.6-9,3.9-19.8,6.9-32.5c8.5-34.4,30.5-51.6,65.9-51.6c9.6,0,18.3,1.6,25.9,4.9c7.6,3.1,13.6,7.9,18,14.3  c4.4,6.3,6.6,13.8,6.6,22.5c0,2.6-0.3,5.9-0.9,9.9c-1.9,11.1-4.1,22-6.8,32.5c-4.4,17.1-11.9,30-22.7,38.5  C209.5,312.3,195.1,316.4,177.1,316.4z M179.8,289.4c7,0,12.9-2.1,17.8-6.2c5-4.1,8.6-10.4,10.7-19c2.9-11.8,5.1-22,6.6-30.8  c0.5-2.6,0.8-5.3,0.8-8.1c0-11.4-5.9-17.1-17.8-17.1c-7,0-13,2.1-18,6.2c-4.9,4.1-8.4,10.4-10.5,19c-2.3,8.4-4.5,18.6-6.8,30.8  c-0.5,2.5-0.8,5.1-0.8,7.9C161.7,283.7,167.8,289.4,179.8,289.4z"
   />
   <path
-    class="st1"
+    class="st1o"
     d="M259.3,314.6c-1.4,0-2.4-0.4-3.2-1.3c-0.6-1-0.8-2.1-0.6-3.4l25.9-122c0.2-1.4,0.9-2.5,2.1-3.4  c1.1-0.9,2.3-1.3,3.6-1.3H337c13.9,0,25,2.9,33.4,8.6c8.5,5.8,12.8,14.1,12.8,25c0,3.1-0.4,6.4-1.1,9.8c-3.1,14.4-9.4,25-19,31.9  c-9.4,6.9-22.3,10.3-38.7,10.3h-25.3l-8.6,41.1c-0.3,1.4-0.9,2.5-2.1,3.4c-1.1,0.9-2.3,1.3-3.6,1.3H259.3z M325.7,242.9  c5.3,0,9.8-1.4,13.7-4.3c4-2.9,6.6-7,7.9-12.4c0.4-2.1,0.6-4,0.6-5.6c0-3.6-1.1-6.4-3.2-8.3c-2.1-2-5.8-3-10.9-3h-22.5l-7.1,33.6  H325.7z"
   />
 </svg>
diff --git a/shared/icons/network/ronin.svelte b/shared/icons/network/ronin.svelte
index e68a0030..6b930f2e 100644
--- a/shared/icons/network/ronin.svelte
+++ b/shared/icons/network/ronin.svelte
@@ -12,17 +12,17 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0r {
       fill-rule: evenodd;
       clip-rule: evenodd;
       fill: #004de5;
     }
-    .st1 {
+    .st1r {
       fill: url(#SVGID_1_);
     }
   </style>
   <path
-    class="st0"
+    class="st0r"
     d="M0,2.4v19c0,0.4,0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.7,0.8l9,7.2c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l9-7.2  c0.3-0.2,0.5-0.5,0.7-0.8c0.2-0.3,0.2-0.7,0.2-1v-19c0-0.6-0.3-1.2-0.7-1.7C20.9,0.2,20.3,0,19.6,0H2.4C1.7,0,1.1,0.2,0.7,0.7  C0.3,1.1,0,1.7,0,2.4z"
   />
   <linearGradient
@@ -39,7 +39,7 @@
     <stop offset="1" style="stop-color:#FFFFFF" />
   </linearGradient>
   <path
-    class="st1"
+    class="st1r"
     d="M17.4,11V6.8c0-0.5-0.2-1.1-0.6-1.5c-0.4-0.4-0.9-0.6-1.5-0.6H6.6C6.1,4.8,5.6,5,5.2,5.4  C4.8,5.8,4.6,6.3,4.6,6.8v12c0,0.3,0.1,0.6,0.2,0.9c0.1,0.3,0.3,0.5,0.6,0.7L8.5,23c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0  c0,0,0.1-0.1,0.1-0.1c0,0,0-0.1,0-0.1v-8.5c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1h2.3c0.4,0,0.8,0.2,1.1,0.5  c0.3,0.3,0.5,0.7,0.5,1.1v7.2c0,0,0,0.1,0,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1-0.1l3.2-2.6  c0.2-0.2,0.4-0.4,0.6-0.7c0.1-0.3,0.2-0.6,0.2-0.9v-3.7c0-0.5-0.2-1.1-0.6-1.5c-0.4-0.4-0.9-0.6-1.5-0.6c0.5,0,1.1-0.2,1.4-0.6  C17.2,12.1,17.4,11.5,17.4,11z M11.5,12H9.2c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2V7.1C8.9,7,9,7,9,6.9c0,0,0.1-0.1,0.2-0.1h3.6  c0.1,0,0.1,0,0.2,0.1c0,0,0.1,0.1,0.1,0.2v3.4c0,0.4-0.2,0.8-0.5,1.1C12.3,11.9,11.9,12,11.5,12z"
   />
 </svg>
diff --git a/shared/icons/network/zk-sync.svelte b/shared/icons/network/zk-sync.svelte
index 7ccdf87b..ea74994f 100644
--- a/shared/icons/network/zk-sync.svelte
+++ b/shared/icons/network/zk-sync.svelte
@@ -12,23 +12,23 @@
   height="24"
 >
   <style type="text/css">
-    .st0 {
+    .st0z {
       fill-rule: evenodd;
       clip-rule: evenodd;
       fill: #ffffff;
     }
-    .st1 {
+    .st1z {
       fill-rule: evenodd;
       clip-rule: evenodd;
     }
   </style>
   <g>
     <path
-      class="st1"
+      class="st1z"
       d="M316,199l-66.7-66.4v48.6l-66.2,48.7l66.2,0v35.5L316,199z"
     />
     <path
-      class="st1"
+      class="st1z"
       d="M81,199l66.7,66.4v-48.3l66.2-49.1l-66.2,0v-35.5L81,199z"
     />
   </g>