diff --git a/components/overlays/NoteDetailsOverlay.vue b/components/overlays/NoteDetailsOverlay.vue
index 80af45a..ae8946b 100644
--- a/components/overlays/NoteDetailsOverlay.vue
+++ b/components/overlays/NoteDetailsOverlay.vue
@@ -1,26 +1,96 @@
 <template>
   <OverlayDialog :show="show" :close="close" title="Call Details">
-    <div class="mt-2">
-      <p class="text-sm text-gray-400">
-        <b>{{ note.category }}</b> @ {{ formatDate(note.timestamp) }}
-      </p>
-      <div v-if="note.direction === NoteDirection.Incoming">
-        <p class="text-sm wrap-text text-gray-400">from {{ note.account }}</p>
-      </div>
-      <div v-if="note.direction === NoteDirection.Outgoing">
-        <p class="text-sm wrap-text text-gray-400">to {{ note.account }}</p>
-      </div>
-      <div v-if="note.amount" class="text-sm font-medium text-white">
-        {{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
-        {{ divideBigIntToFloat(note.amount, 10 ** accountStore.getDecimals) }}
-        TEER
-      </div>
-      <div
-        v-if="note.note?.length > 0"
-        class="text-sm wrap-text font-medium text-gray-400"
-      >
-        <p>note:</p>
-        <p>{{ note.note }}</p>
+    <div class="mx-auto mt-5">
+      <div class="grid grid-cols-1 md:grid-cols-1 gap-6 items-start">
+        <div>
+          <div
+            class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-3"
+          >
+            <dl class="flex flex-wrap">
+              <!-- Kategorie und Zeit -->
+              <div class="w-full flex justify-between px-6 pt-3">
+                <div class="flex-auto text-left mb-4 md:mb-0">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Category
+                  </dt>
+                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
+                    {{ note.category }}
+                  </dd>
+                </div>
+
+                <div class="flex-auto text-right">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Timestamp
+                  </dt>
+                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
+                    {{ formatDate(note.timestamp) }}
+                  </dd>
+                </div>
+              </div>
+
+              <!-- Richtung und Konto -->
+              <div
+                class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
+              >
+                <div class="flex-auto text-left">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    {{
+                      note.direction === NoteDirection.Incoming ? "From" : "To"
+                    }}
+                  </dt>
+                  <dd
+                    class="mt-1 text-base font-semibold leading-6 text-white wallet-address"
+                  >
+                    {{ note.account }}
+                  </dd>
+                </div>
+              </div>
+
+              <!-- Betrag -->
+              <div
+                class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
+              >
+                <div class="flex-auto text-left">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Amount
+                  </dt>
+                  <dd
+                    class="mt-1 text-base font-semibold leading-6 text-white"
+                    :class="{
+                      'text-green-400':
+                        note.direction === NoteDirection.Incoming,
+                      'text-red-400': note.direction === NoteDirection.Outgoing,
+                    }"
+                  >
+                    {{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
+                    {{
+                      divideBigIntToFloat(
+                        note.amount,
+                        10 ** accountStore.getDecimals,
+                      )
+                    }}
+                    TEER
+                  </dd>
+                </div>
+              </div>
+
+              <!-- Notiz -->
+              <div
+                v-if="note.note?.length > 0"
+                class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
+              >
+                <div class="flex-auto text-left">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Note
+                  </dt>
+                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
+                    {{ note.note }}
+                  </dd>
+                </div>
+              </div>
+            </dl>
+          </div>
+        </div>
       </div>
     </div>
   </OverlayDialog>
@@ -59,4 +129,24 @@ const props = defineProps({
   white-space: normal;
   word-wrap: break-word;
 }
+
+.wallet-address {
+  display: block;
+  white-space: nowrap;
+  /* Verhindert Zeilenumbruch */
+  overflow: hidden;
+  /* Versteckt überlaufenden Text */
+  text-overflow: ellipsis;
+  /* Zeigt '...' bei zu langem Text an */
+  max-width: 10ch;
+  /* Maximale Länge: 10 Zeichen */
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: 15ch;
+    /* Begrenze auch hier auf 10 Zeichen */
+  }
+}
 </style>
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index f3ebff1..d2aaeea 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -4,109 +4,112 @@
       History
     </div>
   </div>
-  <div v-if="show" class="mb-10">
-    <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
-    <div v-if="show" class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
-      <table class="w-full whitespace-nowrap text-left">
-        <tbody class="divide-y divide-white/10">
-          <tr
-            v-for="(note, index) in noteStore.getFinancialNotes"
-            :key="index"
-            class="flex justify-between"
-          >
-            <!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
-            <td
-              class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
-            >
-              <!-- Pfeil-SVG für Incoming Transfer -->
-              <div v-if="note.direction === NoteDirection.Incoming">
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  class="size-5 text-gray-400"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div v-else>
-                <svg
-                  class="h-6 w-5 flex-none text-gray-400 sm:block"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  data-slot="icon"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div class="flex flex-col">
-                <div class="flex items-start gap-x-3">
-                  <div class="text-sm font-medium text-white">
-                    {{ note.category }}
-                  </div>
-                  <!-- "New" Badge für Desktop und grüner Punkt für Mobile -->
-                  <!--
-                <div
-                  class="hidden sm:block rounded-md bg-green-700 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset ring-green-600/20"
-                >
-                  New
-                </div>
-                <div
-                  class="sm:hidden rounded-full bg-green-500 w-2 h-2"
-                ></div>
-                -->
-                  <!-- Grüner Punkt für mobile Ansicht -->
-                </div>
-                <div
-                  class="wallet-address mt-1 text-xs text-gray-500 whitespace-nowrap"
-                >
-                  {{ displayAccount(note.account) }}
-                </div>
-              </div>
-            </td>
 
-            <!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
-            <td
-              class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
-            >
-              <div v-if="note.amount" class="text-sm font-medium text-white">
-                {{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
-                {{
-                  divideBigIntToFloat(
-                    note.amount,
-                    10 ** accountStore.getDecimals,
-                  )
-                }}
-                {{accountStore.getSymbol }}
-              </div>
-              <time class="mt-1 text-xs text-gray-500">{{
-                formatDate(note.timestamp)
-              }}</time>
-            </td>
-            <td
-              class="hidden py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
-            >
-              <div v-if="note.note?.length > 0">
-                <button
-                  @click="openViewMore(note)"
-                  type="button"
-                  class="hidden sm:inline btn btn_gradient rounded sm:px-2 sm:py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                >
-                  Note
-                </button>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+  <div class="mb-10">
+    <div v-if="show" class="mt-6 overflow-hidden bg-gray-900 rounded-md">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
+          <table class="w-full text-left">
+            <tbody>
+              <tr
+                v-for="(note, index) in noteStore.getFinancialNotes"
+                :key="index"
+              >
+                <td class="relative py-5 pr-6">
+                  <div class="flex gap-x-6">
+                    <div v-if="note.direction === NoteDirection.Incoming">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-5 text-gray-400"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </div>
+                    <div v-else>
+                      <svg
+                        class="h-6 w-5 flex-none text-gray-400 sm:block"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        data-slot="icon"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </div>
+                    <div class="flex-auto">
+                      <div class="flex items-start gap-x-3">
+                        <div class="text-sm/6 font-medium text-white">
+                          {{ note.category }}
+                        </div>
+                      </div>
+                      <div
+                        class="mt-1 text-xs/5 text-gray-500 wallet-address whitespace-nowrap"
+                      >
+                        {{ displayAccount(note.account) }}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="absolute right-full bottom-0 h-px w-screen bg-gray-50/20"
+                  ></div>
+                  <div
+                    class="absolute bottom-0 left-0 h-px w-screen bg-gray-50/20"
+                  ></div>
+                </td>
+                <td class="py-5 pr-6 sm:table-cell">
+                  <div
+                    v-if="note.amount"
+                    class="text-sm/6 font-medium text-white"
+                  >
+                    {{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
+                    {{
+                      divideBigIntToFloat(
+                        note.amount,
+                        10 ** accountStore.getDecimals,
+                      )
+                    }}
+                    TEER
+                  </div>
+                  <time class="mt-1 text-xs/5 text-gray-500">{{
+                    formatDate(note.timestamp)
+                  }}</time>
+                </td>
+                <td class="py-5 text-right">
+                  <div v-if="note.note?.length > 0" class="flex justify-end">
+                    <svg
+                      @click="openViewMore(note)"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      class="size-5 cursor-pointer"
+                    >
+                      <path
+                        d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
+                      />
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
+                        clip-rule="evenodd"
+                      />
+                      <path
+                        d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
+                      />
+                    </svg>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
     <div class="mt-5 flex justify-center text-gray-500">
       <button @click="fetchOlderBucket">