diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 49923b6a..48bddf36 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -43,6 +43,7 @@
   let validationErrors = {
     payeeAddress: false,
     clientAddress: false,
+    sameAddress: false,
     sellerInfo: {
       email: false,
     },
@@ -58,12 +59,21 @@
     validationErrors[`${type}`].email = !isEmail(email);
   };
 
+  const checkSameAddress = () => {
+    return (
+      formData.payerAddress?.toLowerCase() ===
+      formData.payeeAddress?.toLowerCase()
+    );
+  };
+
   const checkPayeeAddress = () => {
     validationErrors.payeeAddress = !checkAddress(formData.payeeAddress);
+    validationErrors.sameAddress = checkSameAddress();
   };
 
   const checkClientAddress = () => {
     validationErrors.clientAddress = !checkAddress(formData.payerAddress);
+    validationErrors.sameAddress = checkSameAddress();
   };
 
   const calculateInputWidth = (value: string) => {
@@ -338,7 +348,9 @@
             onBlur={checkClientAddress}
             error={validationErrors.clientAddress
               ? "Please enter a valid Ethereum address"
-              : ""}
+              : validationErrors.sameAddress
+                ? "Payer address cannot be the same as Payee address"
+                : ""}
           />
           <Accordion title="Add Client Info">
             <div class="invoice-form-info">
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index e829683a..1eb9aeb3 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -717,6 +717,7 @@
                 <td>
                   <TxType
                     type={signer === request.payer?.value ? "OUT" : "IN"}
+                    showBoth={request.payer?.value === request.payee?.value}
                   />
                 </td>
                 <td><StatusLabel status={checkStatus(request)} /></td>
diff --git a/shared/components/tx-type.svelte b/shared/components/tx-type.svelte
index 97765ccf..1440d4a8 100644
--- a/shared/components/tx-type.svelte
+++ b/shared/components/tx-type.svelte
@@ -1,22 +1,56 @@
 <script lang="ts">
   export let type: "IN" | "OUT";
+  export let showBoth: boolean = false;
 
   $: isOut = type === "OUT";
 </script>
 
-<div class="tx" class:out={isOut} class:in={!isOut}>
-  {type}
-</div>
+{#if showBoth}
+  <div class="tx-group">
+    <div class="tx in overlap">IN</div>
+    <div class="tx out overlap">OUT</div>
+  </div>
+{:else}
+  <div class="tx" class:out={isOut} class:in={!isOut}>
+    {type}
+  </div>
+{/if}
 
 <style>
+  .tx-group {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+
   .tx {
-    padding: 8px 0px;
+    padding: 6px 0px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     max-width: 40px;
     width: 100%;
     text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tx::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    background: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgba(255, 255, 255, 0.1) 5px,
+      rgba(255, 255, 255, 0.1) 10px
+    );
+    z-index: 1;
   }
 
   .out {
@@ -28,4 +62,19 @@
     background-color: rgba(11, 180, 137, 0.25);
     color: #01503a;
   }
+
+  .overlap {
+    width: 120px;
+    position: absolute;
+  }
+
+  .overlap.in {
+    left: -14px;
+    background-color: rgba(11, 180, 137, 0.35);
+  }
+
+  .overlap.out {
+    left: 14px;
+    background-color: rgba(255, 197, 49, 0.35);
+  }
 </style>