diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
index 942ff35fc..36b8b3042 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
@@ -8,9 +8,6 @@ describe('GddSend', () => {
 
   const mocks = {
     $t: jest.fn((t) => t),
-    $moment: jest.fn((m) => ({
-      format: () => m,
-    })),
     $i18n: {
       locale: jest.fn(() => 'en'),
     },
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
index 753543019..aa29d36e8 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
@@ -3,13 +3,17 @@ import GddTransactionList from './GddTransactionList'
 
 const localVue = global.localVue
 
+const errorHandler = jest.fn()
+
+localVue.config.errorHandler = errorHandler
+
 describe('GddTransactionList', () => {
   let wrapper
 
   const mocks = {
     $n: jest.fn((n) => n),
     $t: jest.fn((t) => t),
-    $moment: jest.fn((m) => m),
+    $d: jest.fn((d) => d),
   }
 
   const Wrapper = () => {
@@ -38,7 +42,7 @@ describe('GddTransactionList', () => {
       })
     })
 
-    describe('with transacrions', () => {
+    describe('with transactions', () => {
       beforeEach(async () => {
         await wrapper.setProps({
           transactions: [
@@ -76,8 +80,164 @@ describe('GddTransactionList', () => {
       })
 
       it('renders 4 transactions', () => {
-        console.log(wrapper.html())
-        expect(true).toBeThruthy()
+        expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(4)
+      })
+
+      describe('send transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(0)
+        })
+
+        it('has a bi-arrow-left-circle icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-arrow-left-circle')
+        })
+
+        it('has text-danger color', () => {
+          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('div').at(2).text()).toContain('-')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Bob der Baumeister')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain(
+            'Tue May 25 2021 19:38:13 GMT+0200',
+          )
+        })
+      })
+
+      describe('creation transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(1)
+        })
+
+        it('has a bi-gift icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-gift')
+        })
+
+        it('has gradido-global-color-accent color', () => {
+          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('div').at(2).text()).toContain('+')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Gradido Akademie')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain(
+            'Thu Apr 29 2021 17:34:49 GMT+0200',
+          )
+        })
+      })
+
+      describe('receive transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(2)
+        })
+
+        it('has a bi-arrow-right-circle icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-arrow-right-circle')
+        })
+
+        it('has gradido-global-color-accent color', () => {
+          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
+        })
+
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('314.98')
+        })
+
+        it('has a plus operator', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Jan Ulrich')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain(
+            'Thu Apr 29 2021 19:26:40 GMT+0200',
+          )
+        })
+      })
+
+      describe('decay transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(3)
+        })
+
+        it('has a bi-droplet-half icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-droplet-half')
+        })
+
+        it('has gradido-global-color-gray color', () => {
+          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('div').at(2).text()).toContain('-')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toBe('decay')
+        })
+      })
+
+      describe('max property set to 2', () => {
+        beforeEach(async () => {
+          await wrapper.setProps({ max: 2 })
+        })
+
+        it('shows only 2 transactions', () => {
+          expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(2)
+        })
+      })
+    })
+
+    describe('with invalid transaction type', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions: [
+            {
+              balance: '19.93',
+              date: '2021-05-25T17:38:13+00:00',
+              memo: 'Alles Gute zum Geburtstag',
+              name: 'Bob der Baumeister',
+              transaction_id: 29,
+              type: 'invalid',
+            },
+          ],
+        })
+      })
+
+      it('throws an error', () => {
+        expect(errorHandler).toHaveBeenCalled()
       })
     })
   })
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index ae21f6d5a..d2a81cdbf 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -6,17 +6,16 @@
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
-        <div class="d-flex" v-b-toggle="'a' + item.date + ''">
+        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''">
           <div style="width: 8%">
-            <b-icon :icon="getIcon(item)" :class="getClass(item)" />
+            <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
           </div>
           <div class="font1_2em pr-2 text-right" style="width: 32%">
-            <span>{{ getOperator(item) }}</span>
+            <span>{{ getProperties(item).operator }}</span>
             {{ $n(item.balance, 'decimal') }}
           </div>
           <div class="font1_2em text-left pl-2" style="width: 55%">
-            {{ item.name }}
-            <small>{{ item.name ? '' : $t('decay') }}</small>
+            {{ item.name ? item.name : $t('decay') }}
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
           </div>
           <div class="text-right" style="width: 5%">
@@ -100,21 +99,16 @@ export default {
     updateTransactions() {
       this.$emit('update-transactions')
     },
-    getIcon(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.icon
+    getProperties(item) {
+      const type = iconsByType[item.type]
+      if (type)
+        return {
+          icon: type.icon,
+          class: type.classes + ' m-mb-1 font2em',
+          operator: type.operator,
+        }
       this.throwError('no icon to given type')
     },
-    getClass(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.classes + ' m-mb-1 font2em'
-      this.throwError('no class to given type')
-    },
-    getOperator(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.operator
-      this.throwError('no operator to given type')
-    },
     throwError(msg) {
       throw new Error(msg)
     },
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 457c13f45..1fb5cd195 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -17,6 +17,8 @@ import VueQrcode from 'vue-qrcode'
 import BaseHeader from '@/components/BaseHeader'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 
+import VueMoment from 'vue-moment'
+
 import clickOutside from '@/directives/click-ouside.js'
 
 global.localVue = createLocalVue()
@@ -37,6 +39,7 @@ global.localVue.use(Notifications)
 global.localVue.use(SideBar)
 global.localVue.use(VueRouter)
 global.localVue.use(VueQrcode)
+global.localVue.use(VueMoment)
 global.localVue.component(BaseInput.name, BaseInput)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)