diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
index ece54cfb6..5af115546 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
@@ -106,28 +106,40 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('text-danger')
         })
 
-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('19.93')
+        it('has a minus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
         })
 
-        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '19.93',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Bob der Baumeister')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Bob der Baumeister',
+          )
         })
 
         it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(6).text()).toContain('Alles Gute zum Geburtstag')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Alles Gute zum Geburtstag',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('Tue May 25 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Tue May 25 2021',
+          )
         })
 
         it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(10).text()).toContain('-0.5')
+          expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-0.5',
+          )
         })
       })
 
@@ -145,20 +157,28 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
         })
 
-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1000')
+        it('has a plus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
         })
 
-        it('has a plus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1000',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(5).text()).toContain('Gradido Akademie')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Gradido Akademie',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(7).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
         })
       })
 
@@ -176,24 +196,40 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
         })
 
+        it('has a plus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
+        })
+
         it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+ 314.98')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '314.98',
+          )
         })
 
         it('shows the name of the recipient', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Jan Ulrich')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Jan Ulrich',
+          )
         })
 
         it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(8).text()).toContain('Für das Fahrrad!')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Für das Fahrrad!',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
         })
 
         it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(10).text()).toContain('-1.5')
+          expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-1.5',
+          )
         })
       })
 
@@ -211,16 +247,22 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-gray')
         })
 
-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1.07')
+        it('has a minus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
         })
 
-        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1.07',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(4).text()).toBe('decay.decay_since_last_transaction')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toBe(
+            'decay.decay_since_last_transaction',
+          )
         })
       })
     })
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 4058d6446..7fcedb571 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -4,68 +4,72 @@
       <div
         v-for="{ decay, transaction_id, type, date, balance, name, memo } in transactions"
         :key="transaction_id"
-        class="list-group-item gdd-transaction-list-item"
-        v-b-toggle="'a' + date + ''"
         :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
-        <!-- Collaps Button  -->
-        <div v-if="type != 'decay'" class="text-right" style="width: 95%; position: absolute">
-          <b-button class="btn-sm">
-            <b>i</b>
-          </b-button>
+        <div class="list-group-item gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
+          <!-- Collaps Button  -->
+          <div v-if="type != 'decay'" class="text-right" style="width: 95%; position: absolute">
+            <b-button class="btn-sm">
+              <b>i</b>
+            </b-button>
+          </div>
+
+          <b-row>
+            <!-- ICON  -->
+            <div class="col-1 gdd-transaction-list-item-icon">
+              <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
+            </div>
+
+            <div class="col col-11">
+              <!-- Betrag / Name Email -->
+              <b-row>
+                <div class="col-5 text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ getProperties(type).operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">{{ $n(balance, 'decimal') }}</span>
+                </div>
+                <div class="col-7 gdd-transaction-list-item-name">
+                  {{ type !== 'decay' ? name : $t('decay.decay_since_last_transaction') }}
+                </div>
+              </b-row>
+
+              <!-- Nachricht -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.memo') }}</div>
+                <div class="col-7 gdd-transaction-list-message">{{ memo }}</div>
+              </b-row>
+
+              <!-- Datum -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.date') }}</div>
+                <div class="col-7 gdd-transaction-list-item-date">
+                  {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </div>
+              </b-row>
+
+              <!-- Decay -->
+              <b-row v-if="decay">
+                <div class="col-5 text-right">
+                  <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
+                </div>
+                <div class="col-7 gdd-transaction-list-item-decay">
+                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                </div>
+              </b-row>
+            </div>
+          </b-row>
+
+          <!-- Collaps Start -->
+
+          <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
+            <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
+              <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+            </div>
+          </b-collapse>
+
+          <!-- Collaps End -->
         </div>
-
-        <b-row>
-          <!-- ICON  -->
-          <div class="col-1">
-            <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
-          </div>
-
-          <!-- Erklärung Links -->
-          <div class="col col-11">
-            <!-- Betrag / Name Email -->
-            <b-row>
-              <div class="col-5 text-right">{{ $n(balance, 'decimal') }}</div>
-              <div class="col-7">
-                {{ type !== 'decay' ? name : $t('decay.decay_since_last_transaction') }}
-              </div>
-            </b-row>
-
-            <!-- Nachricht -->
-            <b-row v-if="type !== 'decay' && type !== 'creation'">
-              <div class="col-5 text-right">{{ $t('form.memo') }}</div>
-              <div class="col-7">{{ memo }}</div>
-            </b-row>
-
-            <!-- Datum -->
-            <b-row v-if="type !== 'decay' && type !== 'creation'">
-              <div class="col-5 text-right">{{ $t('form.date') }}</div>
-              <div class="col-7">
-                {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-              </div>
-            </b-row>
-
-            <!-- Decay -->
-            <b-row v-if="decay">
-              <div class="col-5 text-right">
-                <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
-              </div>
-              <div class="col-7">
-                <decay-information v-if="decay" decaytyp="short" :decay="decay" />
-              </div>
-            </b-row>
-          </div>
-        </b-row>
-
-        <!-- Collaps Start -->
-
-        <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
-          <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-            <decay-information v-if="decay" decaytyp="new" :decay="decay" />
-          </div>
-        </b-collapse>
-
-        <!-- Collaps End -->
       </div>
       <pagination-buttons
         v-if="showPagination && transactionCount > pageSize"