diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.spec.js b/frontend/src/components/Contributions/OpenCreationsAmount.spec.js
new file mode 100644
index 000000000..f2a16e6a6
--- /dev/null
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.spec.js
@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils'
+import OpenCreationsAmount from './OpenCreationsAmount.vue'
+
+const localVue = global.localVue
+
+describe('OpenCreationsAmount', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $d: jest.fn((date, formatter = null) => {
+      return { date, formatter }
+    }),
+  }
+
+  const thisMonth = new Date()
+  const lastMonth = new Date(thisMonth.getFullYear(), thisMonth.getMonth() - 1)
+
+  const propsData = {
+    minimalDate: lastMonth,
+    maxGddLastMonth: 400,
+    maxGddThisMonth: 600,
+  }
+
+  const Wrapper = () => {
+    return mount(OpenCreationsAmount, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.appBoxShadow').exists()).toBe(true)
+    })
+
+    it('renders two dates', () => {
+      expect(mocks.$d).toBeCalledTimes(2)
+    })
+
+    it('renders the date of last month', () => {
+      expect(mocks.$d).toBeCalledWith(lastMonth, 'monthAndYear')
+    })
+
+    it('renders the date of this month', () => {
+      expect(mocks.$d).toBeCalledWith(expect.any(Date), 'monthAndYear')
+    })
+
+    describe('open creations for both months', () => {
+      it('renders submitted contributions text', () => {
+        expect(mocks.$t).toBeCalledWith('contribution.submit')
+      })
+
+      it('does not render max reached text', () => {
+        expect(mocks.$t).not.toBeCalledWith('maxReached')
+      })
+
+      it('renders submitted hours last month', () => {
+        expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(2).text()).toBe('30 h')
+      })
+
+      it('renders available hours last month', () => {
+        expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(3).text()).toBe('20 h')
+      })
+
+      it('renders submitted hours this month', () => {
+        expect(wrapper.findAll('div.row').at(2).findAll('div.col').at(2).text()).toBe('20 h')
+      })
+
+      it('renders available hours this month', () => {
+        expect(wrapper.findAll('div.row').at(2).findAll('div.col').at(3).text()).toBe('30 h')
+      })
+    })
+
+    describe('no creations available for last month', () => {
+      beforeEach(() => {
+        wrapper.setProps({ maxGddLastMonth: 0 })
+      })
+
+      it('renders submitted contributions text', () => {
+        expect(mocks.$t).toBeCalledWith('contribution.submit')
+      })
+
+      it('renders max reached text', () => {
+        expect(mocks.$t).toBeCalledWith('maxReached')
+      })
+
+      it('renders submitted hours last month', () => {
+        expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(2).text()).toBe('50 h')
+      })
+
+      it('renders available hours last month', () => {
+        expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(3).text()).toBe('0 h')
+      })
+    })
+  })
+})
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 62c240afd..5f49f5474 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -14,9 +14,9 @@
           {{ maxGddLastMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
         </b-col>
         <b-col class="d-none d-md-inline text-197 text-center">
-          {{ (1000 - maxGddLastMonth) / 20 }} {{ $t('h') }}
+          {{ hoursSubmittedLastMonth }} {{ $t('h') }}
         </b-col>
-        <b-col class="text-4 text-center">{{ maxGddLastMonth / 20 }} {{ $t('h') }}</b-col>
+        <b-col class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</b-col>
       </b-row>
 
       <b-row class="font-weight-bold">
@@ -25,9 +25,9 @@
           {{ maxGddThisMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
         </b-col>
         <b-col class="d-none d-md-inline text-197 text-center">
-          {{ (1000 - maxGddThisMonth) / 20 }} {{ $t('h') }}
+          {{ hoursSubmittedThisMonth }} {{ $t('h') }}
         </b-col>
-        <b-col class="text-4 text-center">{{ maxGddThisMonth / 20 }} {{ $t('h') }}</b-col>
+        <b-col class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</b-col>
       </b-row>
     </div>
   </div>
@@ -40,5 +40,19 @@ export default {
     maxGddLastMonth: { type: Number, required: true },
     maxGddThisMonth: { type: Number, required: true },
   },
+  computed: {
+    hoursSubmittedThisMonth() {
+      return (1000 - this.maxGddThisMonth) / 20
+    },
+    hoursSubmittedLastMonth() {
+      return (1000 - this.maxGddLastMonth) / 20
+    },
+    hoursAvailableThisMonth() {
+      return this.maxGddThisMonth / 20
+    },
+    hoursAvailableLastMonth() {
+      return this.maxGddLastMonth / 20
+    },
+  },
 }
 </script>