diff --git a/src/tailwind.config.js b/src/tailwind.config.js
index 0594481d..19e648df 100644
--- a/src/tailwind.config.js
+++ b/src/tailwind.config.js
@@ -5,4 +5,14 @@
 module.exports = {
   darkMode: 'media',
   content: ['./www/**/*.{html,js}'],
+  theme: {
+    screens: {
+      'xs': '576px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    }
+  }
 };
diff --git a/src/www/css/app.css b/src/www/css/app.css
index 4f4e21dd..cbb94d2e 100644
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -548,6 +548,12 @@ video {
   width: 100%;
 }
 
+@media (min-width: 576px) {
+  .container {
+    max-width: 576px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -676,6 +682,10 @@ video {
   margin-bottom: 4rem;
 }
 
+.-ml-4 {
+  margin-left: -1rem;
+}
+
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -700,8 +710,16 @@ video {
   margin-right: 0.5rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
 }
 
 .mt-10 {
@@ -720,6 +738,10 @@ video {
   margin-top: 1.25rem;
 }
 
+.mt-px {
+  margin-top: 1px;
+}
+
 .block {
   display: block;
 }
@@ -840,6 +862,10 @@ video {
   width: 100%;
 }
 
+.min-w-24 {
+  min-width: 6rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -925,6 +951,18 @@ video {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1421,6 +1459,12 @@ video {
   opacity: 1;
 }
 
+@media (min-width: 576px) {
+  .xs\:flex-row {
+    flex-direction: row;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:mx-0 {
     margin-left: 0px;
@@ -1488,10 +1532,18 @@ video {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-row-reverse {
     flex-direction: row-reverse;
   }
 
+  .sm\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
   .sm\:items-start {
     align-items: flex-start;
   }
@@ -1528,6 +1580,10 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:ml-0 {
+    margin-left: 0px;
+  }
+
   .md\:inline-block {
     display: inline-block;
   }
diff --git a/src/www/index.html b/src/www/index.html
index 2edf3c70..412d26a0 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -89,11 +89,16 @@
                   style="transform: scaleY(-1);">
                 </apexchart>
               </div>
-              <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
-                <div class="flex items-center pb-2 md:pb-0">
-                  <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
-                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20" fill="currentColor">
+
+              <div class="relative p-5 z-10 flex flex-col xs:flex-row justify-between gap-3">
+                <div class="flex gap-2 w-full items-center ">
+                  <!-- flex-wrap sm:flex-nowrap flex-col sm:flex-row pb-2 md:pb-0-->
+                  <!-- <div class="flex flex-grow items-center"> -->
+
+                  <!-- Avatar -->
+                  <div class="h-10 w-10 mr-4 mt-2 self-start rounded-full bg-gray-50 relative">
+                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
                       <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                         clip-rule="evenodd" />
                     </svg>
@@ -108,52 +113,26 @@
                     </div>
                   </div>
 
-                  <div class="flex-grow">
+                  <!-- Name & Info -->
+                  <div class="flex flex-col md:flex-row w-full gap-2">
 
                     <!-- Name -->
-                    <div class="text-gray-700 dark:text-neutral-200 group"
-                      :title="$t('createdOn') + dateTime(new Date(client.createdAt))">
-
-                      <!-- Show -->
-                      <input v-show="clientEditNameId === client.id" v-model="clientEditName"
-                        v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
-                        v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
-                        :ref="'client-' + client.id + '-name'"
-                        class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
-                      <span v-show="clientEditNameId !== client.id"
-                        class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
-
-                      <!-- Edit -->
-                      <span v-show="clientEditNameId !== client.id"
-                        @click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
-                        class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
-                          viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                        </svg>
-                      </span>
-                    </div>
-
-                    <!-- Info -->
-                    <div class="text-gray-400 dark:text-neutral-400 text-xs">
-
-                      <!-- Address -->
-                      <span class="group block md:inline-block pb-1 md:pb-0">
+                    <div class="flex flex-col flex-grow gap-1">
+                      <div class="text-gray-700 dark:text-neutral-200 group"
+                        :title="$t('createdOn') + dateTime(new Date(client.createdAt))">
 
                         <!-- Show -->
-                        <input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
-                          v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
-                          v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
-                          :ref="'client-' + client.id + '-address'"
-                          class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
-                        <span v-show="clientEditAddressId !== client.id"
-                          class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span>
+                        <input v-show="clientEditNameId === client.id" v-model="clientEditName"
+                          v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
+                          v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
+                          :ref="'client-' + client.id + '-name'"
+                          class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
+                        <span v-show="clientEditNameId !== client.id"
+                          class="border-t-2 border-b-2 border-transparent">{{client.name}}</span>
 
                         <!-- Edit -->
-                        <span v-show="clientEditAddressId !== client.id"
-                          @click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
+                        <span v-show="clientEditNameId !== client.id"
+                          @click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
                           class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
                           <svg xmlns="http://www.w3.org/2000/svg"
                             class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
@@ -162,39 +141,84 @@
                               d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                           </svg>
                         </span>
-                      </span>
+                      </div>
+                      <!-- Address -->
+                      <div class=" block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs">
+                        <span class="group">
+                          <!-- Show -->
+                          <input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
+                            v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
+                            v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
+                            :ref="'client-' + client.id + '-address'"
+                            class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
+                          <span v-show="clientEditAddressId !== client.id"
+                            class="inline-block ">{{client.address}}</span>
+
+                          <!-- Edit -->
+                          <span v-show="clientEditAddressId !== client.id"
+                            @click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
+                            class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                              class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
+                              viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                            </svg>
+                          </span>
+                        </span>
+                        <!-- Last seen -->
+                        <span class="text-gray-400 dark:text-neutral-500" v-if=" client.latestHandshakeAt"
+                          :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
+                          {{new Date(client.latestHandshakeAt) | timeago}}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- Info -->
+                    <div
+                      class="flex gap-2 items-center text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 md:ml-0">
 
                       <!-- Transfer TX -->
-                      <span v-if="client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
-                        ·
-                        <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                          fill="currentColor">
-                          <path fill-rule="evenodd"
-                            d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd" />
-                        </svg>
-                        {{client.transferTxCurrent | bytes}}/s
-                      </span>
+                      <div class="min-w-24" v-if="client.transferTx">
+                        <span class="flex gap-1" :title="$t('totalDownload') + bytes(client.transferTx)">
+                          <svg class="align-middle h-3 inline mt-0.5" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd"
+                              d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+                              clip-rule="evenodd" />
+                          </svg>
+                          <div>
+                            <span class="text-gray-700 dark:text-neutral-200">{{client.transferTxCurrent |
+                              bytes}}/s</span>
+                            <!-- Total TX -->
+                            <br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferTx)}}</span>
+                          </div>
+                        </span>
+
+                      </div>
 
                       <!-- Transfer RX -->
-                      <span v-if="client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
-                        ·
-                        <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                          fill="currentColor">
-                          <path fill-rule="evenodd"
-                            d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-                            clip-rule="evenodd" />
-                        </svg>
-                        {{client.transferRxCurrent | bytes}}/s
-                      </span>
-
-                      <!-- Last seen -->
-                      <span v-if="client.latestHandshakeAt"
-                        :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
-                        · {{new Date(client.latestHandshakeAt) | timeago}}
-                      </span>
+                      <div class="min-w-24" v-if="client.transferRx">
+                        <span class="flex gap-1" :title="$t('totalUpload') + bytes(client.transferRx)">
+
+                          <svg class="align-middle h-3 inline mt-0.5" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd"
+                              d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+                              clip-rule="evenodd" />
+                          </svg>
+                          <div>
+                            <span class="text-gray-700 dark:text-neutral-200">{{client.transferRxCurrent |
+                              bytes}}/s</span>
+                            <!-- Total RX -->
+                            <br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferRx)}}</span>
+                          </div>
+                        </span>
+                      </div>
+
                     </div>
                   </div>
+                  <!-- </div> --> <!-- <div class="flex flex-grow items-center"> -->
                 </div>
 
                 <div class="flex items-center justify-end">
@@ -509,4 +533,4 @@
   <script src="./js/app.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file