diff --git a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
index e3059f0e92..b308942d6b 100644
--- a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
@@ -147,7 +147,6 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 75%;
 }
 
 .c9 {
@@ -231,21 +230,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   justify-content: center;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,28 +245,22 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   padding: 12px;
 }
 
-.c19 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-top: 6px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 25%;
   padding-right: 12px;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -317,7 +296,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   width: 12px;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -332,7 +311,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   cursor: pointer;
 }
 
-.c24:hover {
+.c23:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -340,8 +319,11 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 .c8 {
   display: grid;
   box-sizing: border-box;
-  grid-template-columns: repeat( auto-fit,minmax(min(96px,100%),1fr) );
+  grid-template-columns: repeat( 2,minmax(max-content,1fr) );
   grid-gap: 0px 0px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .c4 {
@@ -357,37 +339,40 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   font-weight: bold;
 }
 
-.c17 {
+.c16 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c20 {
+.c19 {
+  margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
+  text-align: right;
   font-weight: bold;
 }
 
-.c21 {
+.c20 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c22 {
+.c21 {
   font-size: 14px;
   line-height: 20px;
+  text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c25 {
+.c24 {
   font-size: 14px;
   line-height: 20px;
 }
 
-.c16 {
+.c15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -405,6 +390,10 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 @media only screen and (max-width:768px) {
@@ -462,19 +451,13 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c17 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c19 {
-    margin-top: 3px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c19 {
+  .c18 {
     padding-right: 6px;
   }
 }
@@ -573,10 +556,10 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
                 account.transaction.unrecognizedTransaction.destination
               </span>
               <div
-                class="c15 c16"
+                class="c7 c15"
               >
                 <span
-                  class="c17"
+                  class="c16"
                   style="overflow-wrap: anywhere;"
                 >
                   source
@@ -617,7 +600,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
                 common.hash
               </span>
               <span
-                class="c17"
+                class="c16"
               >
                 ff1234
               </span>
@@ -628,7 +611,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
           class="c9"
         >
           <div
-            class="c18"
+            class="c17"
           >
             <div
               class="c11"
@@ -669,20 +652,20 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
       </div>
     </div>
     <div
-      class="c19"
+      class="c18"
     >
       <span
-        class="c20"
+        class="c19"
       >
         <span>
           <div
-            class="c15"
+            class="c7"
             style="display: inline-flex; white-space: nowrap;"
           >
             0.001
           </div>
           <span
-            class="c21"
+            class="c20"
           >
             <span
               class="notranslate"
@@ -694,7 +677,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
         </span>
       </span>
       <span
-        class="c22"
+        class="c21"
       >
         <span>
           account.transaction.successful
@@ -703,17 +686,17 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
     </div>
   </div>
   <footer
-    class="c23"
+    class="c22"
   >
     <a
-      class="c24"
+      class="c23"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c25"
+        class="c24"
       >
         account.transaction.explorerLink
       </span>
@@ -881,7 +864,6 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 75%;
 }
 
 .c9 {
@@ -965,21 +947,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   justify-content: center;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -994,28 +962,22 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   padding: 12px;
 }
 
-.c19 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-top: 6px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 25%;
   padding-right: 12px;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1051,7 +1013,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   width: 12px;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1066,7 +1028,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c24:hover {
+.c23:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1074,8 +1036,11 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 .c8 {
   display: grid;
   box-sizing: border-box;
-  grid-template-columns: repeat( auto-fit,minmax(min(96px,100%),1fr) );
+  grid-template-columns: repeat( 2,minmax(max-content,1fr) );
   grid-gap: 0px 0px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .c4 {
@@ -1091,37 +1056,40 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c17 {
+.c16 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c20 {
+.c19 {
+  margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
+  text-align: right;
   font-weight: bold;
 }
 
-.c21 {
+.c20 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c22 {
+.c21 {
   font-size: 14px;
   line-height: 20px;
+  text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c25 {
+.c24 {
   font-size: 14px;
   line-height: 20px;
 }
 
-.c16 {
+.c15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1139,6 +1107,10 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 @media only screen and (max-width:768px) {
@@ -1196,19 +1168,13 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c17 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c19 {
-    margin-top: 3px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c19 {
+  .c18 {
     padding-right: 6px;
   }
 }
@@ -1307,10 +1273,10 @@ exports[`<Transaction  /> should match snapshot 1`] = `
                 common.from
               </span>
               <div
-                class="c15 c16"
+                class="c7 c15"
               >
                 <span
-                  class="c17"
+                  class="c16"
                   style="overflow-wrap: anywhere;"
                 >
                   source
@@ -1351,7 +1317,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
                 common.hash
               </span>
               <span
-                class="c17"
+                class="c16"
               >
                 ff1234
               </span>
@@ -1362,7 +1328,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
           class="c9"
         >
           <div
-            class="c18"
+            class="c17"
           >
             <div
               class="c11"
@@ -1403,20 +1369,20 @@ exports[`<Transaction  /> should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c19"
+      class="c18"
     >
       <span
-        class="c20"
+        class="c19"
       >
         <span>
           <div
-            class="c15"
+            class="c7"
             style="display: inline-flex; white-space: nowrap;"
           >
             0.001
           </div>
           <span
-            class="c21"
+            class="c20"
           >
             <span
               class="notranslate"
@@ -1428,7 +1394,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
         </span>
       </span>
       <span
-        class="c22"
+        class="c21"
       >
         <span>
           account.transaction.successful
@@ -1437,17 +1403,17 @@ exports[`<Transaction  /> should match snapshot 1`] = `
     </div>
   </div>
   <footer
-    class="c23"
+    class="c22"
   >
     <a
-      class="c24"
+      class="c23"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c25"
+        class="c24"
       >
         account.transaction.explorerLink
       </span>