diff --git a/src/app/insights/transaction-info/transaction-info.component.html b/src/app/insights/transaction-info/transaction-info.component.html
index ae09551..92cd0e1 100644
--- a/src/app/insights/transaction-info/transaction-info.component.html
+++ b/src/app/insights/transaction-info/transaction-info.component.html
@@ -115,16 +115,15 @@ <h2 class="font-bold text-white fade-col">Bitcoin</h2>
             <i class="fas fa-coins mr-1 text-base text-orange-400"></i>
             Amount
           </p>
-          <ng-container>
-            <p>
-              {{ totalAmount }} BTC •
-              <span class="text-green-400 break-all">
-                {{ totalAmount * btcPrice | number : "1.2-2" }} USD</span
-              >
-            </p>
+          <div class="flex flex-col sm:flex-row items-start">
+            <span class="block sm:inline"> {{ totalAmount }} BTC </span>
 
-            <p></p>
-          </ng-container>
+            <span class="text-gray-400 mx-2 hidden sm:inline">•</span>
+
+            <span class="text-green-400 break-all block sm:inline">
+              {{ totalAmount * btcPrice | number : "1.2-2" }} USD
+            </span>
+          </div>
         </div>
 
         <div class="p-4 border-b border-gray-700">
@@ -134,15 +133,17 @@ <h2 class="font-bold text-white fade-col">Bitcoin</h2>
             ></i>
             Fee
           </p>
-          <ng-container>
-            <p *ngIf="fee > 0">
-              {{ fee }} BTC •
-              <span class="text-green-400 break-all">
-                {{ fee * btcPrice | number : "1.2-2" }} USD</span
-              >
-            </p>
-            <p *ngIf="fee == 0">No fee</p>
-          </ng-container>
+
+          <p *ngIf="fee > 0" class="flex flex-col sm:flex-row items-start">
+            <span class="block sm:inline">{{ fee }} BTC</span>
+
+            <span class="text-gray-400 mx-2 hidden sm:inline">•</span>
+
+            <span class="text-green-400 break-all block sm:inline">
+              {{ fee * btcPrice | number : "1.2-2" }} USD
+            </span>
+          </p>
+          <p *ngIf="fee == 0">No fee</p>
         </div>
 
         <div class="p-4 border-b border-gray-700">
@@ -239,11 +240,16 @@ <h3 class="text-gray-400 text-lg font-medium mb-2 ml-4">Inputs</h3>
                   ></i>
                   Amount
                 </p>
-                <p class="text-white break-all">
-                  {{ input.amount }} BTC •
-                  <span class="text-green-400">
-                    {{ input.amount * btcPrice | number : "1.2-2" }} USD</span
-                  >
+                <p
+                  class="text-white flex flex-col lg:flex-row items-start break-all"
+                >
+                  <span class="block sm:inline">{{ input.amount }} BTC</span>
+
+                  <span class="text-gray-400 mx-2 hidden lg:inline">•</span>
+
+                  <span class="text-green-400 break-all block sm:inline">
+                    {{ input.amount * btcPrice | number : "1.2-2" }} USD
+                  </span>
                 </p>
               </div>
             </div>
@@ -305,11 +311,16 @@ <h3 class="text-gray-400 text-lg font-medium mb-2 ml-4">Outputs</h3>
                   ></i>
                   Amount
                 </p>
-                <p class="text-white break-all">
-                  {{ output.value }} BTC •
-                  <span class="text-green-400">
-                    {{ output.value * btcPrice | number : "1.2-2" }} USD</span
-                  >
+                <p
+                  class="text-white flex flex-col lg:flex-row items-start break-all"
+                >
+                  <span class="block sm:inline">{{ output.value }} BTC</span>
+
+                  <span class="text-gray-400 mx-2 hidden lg:inline">•</span>
+
+                  <span class="text-green-400 break-all block lg:inline">
+                    {{ output.value * btcPrice | number : "1.2-2" }} USD
+                  </span>
                 </p>
               </div>
             </div>