diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 25f4c6e35..4bfc3c240 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -44,7 +44,7 @@ Given('I am logged in with a {string} role', role => {
 
 When('I click on "Report Post" from the content menu of the post', () => {
   cy.contains('.ds-card', davidIrvingPostTitle)
-    .find('.content-menu-trigger')
+    .find('.content-menu .base-button')
     .click({force: true})
 
   cy.get('.popover .ds-menu-item-link')
@@ -54,7 +54,7 @@ When('I click on "Report Post" from the content menu of the post', () => {
 
 When('I click on "Report User" from the content menu in the user info box', () => {
   cy.contains('.ds-card', davidIrvingPostTitle)
-    .get('.user-content-menu .content-menu-trigger')
+    .get('.user-content-menu .base-button')
     .click({ force: true })
 
   cy.get('.popover .ds-menu-item-link')
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index 563d6a733..e8e968a5e 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -119,7 +119,7 @@ Then('they should be able to see my social media links', () => {
 })
 
 When('I delete a social media link', () => {
-  cy.get("a[name='delete']")
+  cy.get(".base-button[title='Delete']")
     .click()
 })
 
@@ -129,7 +129,7 @@ Then('it gets deleted successfully', () => {
 })
 
 When('I start editing a social media link', () => {
-  cy.get("a[name='edit']")
+  cy.get(".base-button[title='Edit']")
     .click()
 })
 
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index c51c863d1..8e08be2cf 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -243,7 +243,7 @@ When("I type in the following text:", text => {
 });
 
 Then("I select a category", () => {
-  cy.get("span")
+  cy.get(".base-button")
     .contains("Just for Fun")
     .click();
 });
@@ -449,7 +449,7 @@ When("I ", name => {
 When(
   "I click on {string} from the content menu in the user info box",
   button => {
-    cy.get(".user-content-menu .content-menu-trigger").click();
+    cy.get(".user-content-menu .base-button").click();
     cy.get(".popover .ds-menu-item-link")
       .contains(button)
       .click({
diff --git a/webapp/assets/_new/styles/mixins/buttonStates.scss b/webapp/assets/_new/styles/mixins/buttonStates.scss
new file mode 100644
index 000000000..b8e1509a6
--- /dev/null
+++ b/webapp/assets/_new/styles/mixins/buttonStates.scss
@@ -0,0 +1,65 @@
+@mixin buttonStates($color-scheme: primary, $filled: false) {
+  $main-color: $color-primary;
+  $active-color: $color-primary-dark;
+  $hover-color: $color-primary-light;
+
+  @if $color-scheme == danger {
+    $main-color: $color-danger;
+    $active-color: $color-danger-dark;
+    $hover-color: $color-danger-light;
+  }
+
+  color: $main-color;
+  border-color: $main-color;
+  background-color: transparent;
+  transition: background-color $duration-short;
+
+  &:focus {
+    outline: $border-size-base dashed $main-color;
+  }
+
+  &:enabled {
+    &:hover {
+      color: $color-neutral-100;
+      border-color: $main-color;
+      background-color: $main-color;
+    }
+
+    &:active {
+      color: $color-neutral-100;
+      border-color: $active-color;
+      background-color: $active-color;
+    }
+  }
+
+  &:disabled {
+    color: $color-neutral-60;
+    border-color: $color-neutral-60;
+    cursor: default;
+  }
+
+  @if $filled {
+    color: $color-neutral-100;
+    border-color: $main-color;
+    background-color: $main-color;
+
+    &:enabled {
+      &:hover {
+        border-color: $hover-color;
+        background-color: $hover-color;
+      }
+
+      &:active {
+        color: $color-neutral-100;
+        border-color: $active-color;
+        background-color: $active-color;
+      }
+    }
+
+    &:disabled {
+      color: $color-neutral-100;
+      background-color: $color-neutral-60;
+      border-color: $color-neutral-60;
+    }
+  }
+}
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 30a859980..36c6d8d5b 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -250,6 +250,21 @@ $size-avatar-base: 44px;
 $size-avatar-large: 64px;
 $size-avatar-x-large: 114px;
 
+/**
+ * @tokens Size Buttons
+ * @presenter Spacing
+ */
+
+ $size-button-base: 36px;
+ $size-button-small: 26px;
+
+/**
+ * @tokens Size Buttons
+ * @presenter Spacing
+ */
+
+ $size-icon-base: 16px;
+
 /**
  * @tokens Shadow
  * @presenter Shadow
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 9ec8688c4..3e240e435 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -6,7 +6,7 @@
           <base-button
             :data-test="categoryButtonsId(category.id)"
             @click="toggleCategory(category.id)"
-            :primary="isActive(category.id)"
+            :filled="isActive(category.id)"
             :disabled="isDisabled(category.id)"
             :icon="category.icon"
             size="small"
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 47bc01982..5dde84008 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -74,7 +74,7 @@ describe('CommentForm.vue', () => {
 
       it('calls `clear` method when the cancel button is clicked', async () => {
         wrapper.vm.updateEditorContent('ok')
-        await wrapper.find('.cancelBtn').trigger('submit')
+        await wrapper.find('[data-test="cancel-button"]').trigger('submit')
         expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
       })
 
@@ -162,13 +162,13 @@ describe('CommentForm.vue', () => {
       describe('cancel button is clicked', () => {
         it('calls `closeEditWindow` method', async () => {
           wrapper.vm.updateEditorContent('ok')
-          await wrapper.find('.cancelBtn').trigger('submit')
+          await wrapper.find('[data-test="cancel-button"]').trigger('submit')
           expect(closeMethodSpy).toHaveBeenCalledTimes(1)
         })
 
         it('emits `showEditCommentMenu` event', async () => {
           wrapper.vm.updateEditorContent('ok')
-          await wrapper.find('.cancelBtn').trigger('submit')
+          await wrapper.find('[data-test="cancel-button"]').trigger('submit')
           expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
         })
       })
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 88253065f..063a3d599 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -5,10 +5,15 @@
         <!-- with client-only the content is not shown -->
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
-          <base-button :disabled="disabled && !update" @click="handleCancel">
+          <base-button
+            :disabled="disabled && !update"
+            @click="handleCancel"
+            data-test="cancel-button"
+            danger
+          >
             {{ $t('actions.cancel') }}
           </base-button>
-          <base-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
+          <base-button type="submit" :loading="loading" :disabled="disabled || errors" filled>
             {{ $t('post.comment.submit') }}
           </base-button>
         </div>
@@ -67,7 +72,6 @@ export default {
       this.$emit('showEditCommentMenu', false)
     },
     handleCancel() {
-      console.log('handle cancel')
       if (!this.update) {
         this.clear()
       } else {
diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js
index 0c037d2ff..064b8f136 100644
--- a/webapp/components/CommentList/CommentList.spec.js
+++ b/webapp/components/CommentList/CommentList.spec.js
@@ -63,12 +63,7 @@ describe('CommentList.vue', () => {
 
     it('displays a comments counter', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('span.ds-tag').text()).toEqual('1')
-    })
-
-    it('displays a comments counter', () => {
-      wrapper = Wrapper()
-      expect(wrapper.find('span.ds-tag').text()).toEqual('1')
+      expect(wrapper.find('.count').text()).toEqual('1')
     })
 
     describe('scrollToAnchor mixin', () => {
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index d67af69d9..97fc46e0d 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -82,14 +82,10 @@
         </ds-text>
         <ds-space />
         <div slot="footer" style="text-align: right">
-          <base-button
-            data-test="cancel-button"
-            :disabled="loading"
-            @click="$router.back()"
-          >
+          <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
             {{ $t('actions.cancel') }}
           </base-button>
-          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" primary>
+          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
             {{ $t('actions.save') }}
           </base-button>
         </div>
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index 61ac8acfa..66a31205a 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -61,6 +61,7 @@
               <base-button
                 icon="trash"
                 danger
+                filled
                 :disabled="!deleteEnabled"
                 data-test="delete-button"
                 @click="handleSubmit"
diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index 1bf331b10..e138bef97 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -2,7 +2,7 @@
   <div class="donation-info">
     <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
     <a target="_blank" href="https://human-connection.org/spenden/">
-      <base-button primary>{{ $t('donations.donate-now') }}</base-button>
+      <base-button filled>{{ $t('donations.donate-now') }}</base-button>
     </a>
   </div>
 </template>
diff --git a/webapp/components/EnterNonce/EnterNonce.vue b/webapp/components/EnterNonce/EnterNonce.vue
index d936544ad..eb44c3235 100644
--- a/webapp/components/EnterNonce/EnterNonce.vue
+++ b/webapp/components/EnterNonce/EnterNonce.vue
@@ -1,30 +1,27 @@
 <template>
-  <ds-space margin-top="large" margin-bottom="xxx-small">
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @submit="handleSubmitVerify"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-    >
-      <ds-input
-        :placeholder="$t('components.enter-nonce.form.nonce')"
-        model="nonce"
-        name="nonce"
-        id="nonce"
-        icon="question-circle"
-      />
-      <ds-space margin-botton="large">
-        <ds-text>
-          {{ $t('components.enter-nonce.form.description') }}
-        </ds-text>
-      </ds-space>
-      <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
-        {{ $t('components.enter-nonce.form.next') }}
-      </ds-button>
-    </ds-form>
+  <ds-form
+    class="enter-nonce"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="handleSubmitVerify"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <ds-input
+      :placeholder="$t('components.enter-nonce.form.nonce')"
+      model="nonce"
+      name="nonce"
+      id="nonce"
+      icon="question-circle"
+    />
+    <ds-text>
+      {{ $t('components.enter-nonce.form.description') }}
+    </ds-text>
+    <base-button :disabled="disabled" filled name="submit" type="submit">
+      {{ $t('components.enter-nonce.form.next') }}
+    </base-button>
     <slot></slot>
-  </ds-space>
+  </ds-form>
 </template>
 
 <script>
@@ -64,3 +61,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.enter-nonce {
+  display: flex;
+  flex-direction: column;
+  margin: $space-large 0 $space-xxx-small 0;
+}
+</style>
diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js
index 079ef5487..d70af323f 100644
--- a/webapp/components/FilterMenu/FilterMenu.spec.js
+++ b/webapp/components/FilterMenu/FilterMenu.spec.js
@@ -39,7 +39,7 @@ describe('FilterMenu.vue', () => {
 
       describe('click "clear-search-button" button', () => {
         it('emits clearSearch', () => {
-          wrapper.find({ name: 'clear-search-button' }).trigger('click')
+          wrapper.find('[name="clear-search-button"]').trigger('click')
           expect(wrapper.emitted().clearSearch).toHaveLength(1)
         })
       })
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index e4c689263..e56925e56 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -6,15 +6,16 @@
       </ds-flex-item>
       <ds-flex-item>
         <div class="filter-menu-buttons">
-          <ds-button
+          <base-button
+            name="clear-search-button"
+            icon="close"
+            circle
+            @click="clearSearch"
             v-tooltip="{
               content: this.$t('filter-menu.clearSearch'),
               placement: 'left',
               delay: { show: 500 },
             }"
-            name="clear-search-button"
-            icon="close"
-            @click="clearSearch"
           />
         </div>
       </ds-flex-item>
diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 72835a660..9189f417d 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -12,10 +12,11 @@
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
-            <ds-button
+            <base-button
+              circle
               icon="check"
-              @click.stop.prevent="resetCategories"
-              :primary="!filteredCategoryIds.length"
+              @click="resetCategories"
+              :filled="!filteredCategoryIds.length"
             />
             <ds-flex-item>
               <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
@@ -37,10 +38,11 @@
         <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
           <ds-flex class="categories-menu">
             <ds-flex-item width="100%" class="categories-menu-item">
-              <ds-button
+              <base-button
+                circle
                 :icon="category.icon"
-                :primary="filteredCategoryIds.includes(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
+                :filled="filteredCategoryIds.includes(category.id)"
+                @click="toggleCategory(category.id)"
               />
               <ds-space margin-bottom="small" />
             </ds-flex-item>
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index f27074b7b..c05a3d85f 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => {
     it('starts with all categories button active', () => {
       const wrapper = openFilterPosts()
       allCategoriesButton = wrapper.findAll('button').at(1)
-      expect(allCategoriesButton.attributes().class).toContain('ds-button-primary')
+      expect(allCategoriesButton.attributes().class).toContain('--filled')
     })
 
     it('calls TOGGLE_CATEGORY when clicked', () => {
@@ -111,27 +111,27 @@ describe('FilterPosts.vue', () => {
       expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
     })
 
-    it('sets category button attribute `primary` when corresponding category is filtered', () => {
+    it('sets category button attribute `filled` when corresponding category is filtered', () => {
       getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       const wrapper = openFilterPosts()
       democracyAndPoliticsButton = wrapper.findAll('button').at(4)
-      expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary')
+      expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
     })
 
-    it('sets language button attribute `primary` when corresponding language is filtered', () => {
+    it('sets language button attribute `filled` when corresponding language is filtered', () => {
       getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
       const wrapper = openFilterPosts()
       spanishButton = wrapper
         .findAll('button.language-buttons')
         .at(languages.findIndex(l => l.code === 'es'))
-      expect(spanishButton.attributes().class).toContain('ds-button-primary')
+      expect(spanishButton.attributes().class).toContain('--filled')
     })
 
-    it('sets "filter-by-followed-authors-only" button attribute `primary`', () => {
+    it('sets "filter-by-followed-authors-only" button attribute `filled`', () => {
       getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
       const wrapper = openFilterPosts()
       expect(
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'),
+        wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--filled'),
       ).toBe(true)
     })
 
@@ -139,7 +139,7 @@ describe('FilterPosts.vue', () => {
       let wrapper
       beforeEach(() => {
         wrapper = openFilterPosts()
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+        wrapper.find('.base-button[name="filter-by-followed-authors-only"]').trigger('click')
       })
 
       it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index b83e99fd8..787751004 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,15 +1,15 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
-    <ds-button
+    <base-button
       slot="default"
       icon="filter"
-      :primary="filterActive"
+      :filled="filterActive"
       :ghost="!filterActive"
       slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
       <base-icon class="dropdown-arrow" name="angle-down" />
-    </ds-button>
+    </base-button>
     <template slot="popover">
       <ds-container>
         <categories-filter-menu-items :chunk="chunk" />
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 96b050713..cf0b4c667 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -13,17 +13,18 @@
           <ds-flex-item width="10%" />
           <ds-space margin-bottom="xx-small" />
           <ds-flex-item width="100%">
-            <div class="follow-button">
-              <ds-button
+            <div class="follow-filter-button">
+              <base-button
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                circle
+                :filled="filteredByUsersFollowed"
+                @click="toggleFilteredByFollowed(user.id)"
                 v-tooltip="{
                   content: this.$t('contribution.filterFollow'),
                   placement: 'left',
                   delay: { show: 500 },
                 }"
-                name="filter-by-followed-authors-only"
-                icon="user-plus"
-                :primary="filteredByUsersFollowed"
-                @click="toggleFilteredByFollowed(user.id)"
               />
               <ds-space margin-bottom="x-small" />
               <ds-flex-item>
@@ -36,14 +37,9 @@
       </ds-flex-item>
       <div v-for="emotion in emotionsArray" :key="emotion">
         <ds-flex-item :width="{ lg: '100%' }">
-          <ds-button
-            size="large"
-            ghost
-            @click="toogleFilteredByEmotions(emotion)"
-            class="emotions-buttons"
-          >
+          <base-button @click="toogleFilteredByEmotions(emotion)" class="emotions-buttons" circle>
             <img :src="iconPath(emotion)" width="40" />
-          </ds-button>
+          </base-button>
           <ds-space margin-bottom="x-small" />
           <ds-flex-item class="emotions-mobile-space text-center">
             <label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
@@ -99,7 +95,7 @@ export default {
   #filter-posts-header {
     text-align: center;
   }
-  .follow-button {
+  .follow-filter-button {
     float: left;
   }
 }
diff --git a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue b/webapp/components/FilterPosts/LanguageFilterMenuItems.vue
index 258b3acdc..3427cf176 100644
--- a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/LanguageFilterMenuItems.vue
@@ -12,10 +12,11 @@
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
-            <ds-button
+            <base-button
               icon="check"
-              @click.stop.prevent="resetLanguages"
-              :primary="!filteredLanguageCodes.length"
+              circle
+              :filled="!filteredLanguageCodes.length"
+              @click="resetLanguages"
             />
             <ds-flex-item>
               <label class="language-labels">{{ $t('filter-posts.language.all') }}</label>
@@ -32,13 +33,14 @@
       <ds-flex v-for="language in locales" :key="language.code" class="languages-menu">
         <ds-flex class="languages-menu">
           <ds-flex-item width="100%" class="language-menu-item">
-            <ds-button
+            <base-button
               class="language-buttons"
-              :primary="filteredLanguageCodes.includes(language.code)"
-              @click.stop.prevent="toggleLanguage(language.code)"
+              circle
+              :filled="filteredLanguageCodes.includes(language.code)"
+              @click="toggleLanguage(language.code)"
             >
               {{ language.code.toUpperCase() }}
-            </ds-button>
+            </base-button>
             <ds-space margin-bottom="small" />
           </ds-flex-item>
           <ds-flex>
diff --git a/webapp/components/FollowButton.vue b/webapp/components/FollowButton.vue
index 22046e047..31856e6b4 100644
--- a/webapp/components/FollowButton.vue
+++ b/webapp/components/FollowButton.vue
@@ -1,17 +1,17 @@
 <template>
-  <ds-button
+  <base-button
+    class="follow-button"
     :disabled="disabled || !followId"
     :loading="loading"
     :icon="icon"
-    :primary="isFollowed && !hovered"
+    :filled="isFollowed && !hovered"
     :danger="isFollowed && hovered"
-    fullwidth
     @mouseenter.native="onHover"
     @mouseleave.native="hovered = false"
     @click.prevent="toggle"
   >
     {{ label }}
-  </ds-button>
+  </base-button>
 </template>
 
 <script>
@@ -83,3 +83,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.follow-button {
+  display: block;
+  width: 100%;
+}
+</style>
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index d61a5675a..c140edb47 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -50,16 +50,9 @@
             <ds-space margin-bottom="large">
               <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
             </ds-space>
-            <ds-button
-              :loading="pending"
-              primary
-              fullwidth
-              name="submit"
-              type="submit"
-              icon="sign-in"
-            >
+            <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
               {{ $t('login.login') }}
-            </ds-button>
+            </base-button>
             <ds-space margin-top="large" margin-bottom="x-small">
               {{ $t('login.no-account') }}
               <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
@@ -113,6 +106,11 @@ export default {
 }
 .login-card {
   position: relative;
+
+  .base-button {
+    display: block;
+    width: 100%;
+  }
 }
 .login-locale-switch {
   position: absolute;
diff --git a/webapp/components/Modal/ConfirmModal.vue b/webapp/components/Modal/ConfirmModal.vue
index 8297e6d0f..9eb81b5ea 100644
--- a/webapp/components/Modal/ConfirmModal.vue
+++ b/webapp/components/Modal/ConfirmModal.vue
@@ -10,11 +10,16 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
+      <base-button
+        class="cancel"
+        :danger="!modalData.buttons.confirm.danger"
+        :icon="modalData.buttons.cancel.icon"
+        @click="cancel"
+      >
         {{ $t(modalData.buttons.cancel.textIdent) }}
-      </ds-button>
+      </base-button>
 
-      <ds-button
+      <base-button
         :danger="modalData.buttons.confirm.danger"
         class="confirm"
         :icon="modalData.buttons.confirm.icon"
@@ -22,7 +27,7 @@
         @click="confirm"
       >
         {{ $t(modalData.buttons.confirm.textIdent) }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index d80ec0f55..19ef64332 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -4,11 +4,10 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</ds-button>
-
-      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
+      <base-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</base-button>
+      <base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('disable.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>
diff --git a/webapp/components/Modal/ReportModal.vue b/webapp/components/Modal/ReportModal.vue
index 00fed2646..f6aca5f86 100644
--- a/webapp/components/Modal/ReportModal.vue
+++ b/webapp/components/Modal/ReportModal.vue
@@ -29,12 +29,13 @@
     </small>
     <ds-space />
     <template #footer>
-      <ds-button class="cancel" icon="close" @click="cancel">
+      <base-button class="cancel" icon="close" @click="cancel">
         {{ $t('report.cancel') }}
-      </ds-button>
+      </base-button>
 
-      <ds-button
+      <base-button
         danger
+        filled
         class="confirm"
         icon="exclamation-circle"
         :disabled="!form.reasonCategory"
@@ -42,7 +43,7 @@
         @click="confirm"
       >
         {{ $t('report.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>
@@ -161,7 +162,7 @@ export default {
 .ds-modal {
   max-width: 600px !important;
 }
-.ds-radio-option:not(.ds-button) {
+.ds-radio-option {
   width: 100% !important;
 }
 .ds-radio-option-label {
diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js
index 01c972d05..8020c8bb4 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js
@@ -1,11 +1,11 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import NotificationMenu from './NotificationMenu'
 
 const localVue = global.localVue
 
 localVue.filter('truncate', string => string)
 
-config.stubs.dropdown = '<span class="dropdown"><slot /></span>'
+config.stubs.dropdown = '<span class="dropdown"><slot :toggleMenu="() => null" /></span>'
 
 describe('NotificationMenu.vue', () => {
   let wrapper
@@ -22,9 +22,9 @@ describe('NotificationMenu.vue', () => {
     }
   })
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     const Wrapper = () => {
-      return shallowMount(NotificationMenu, {
+      return mount(NotificationMenu, {
         data,
         mocks,
         localVue,
@@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
 
     it('counter displays 0', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+      expect(wrapper.find('.count').text()).toEqual('0')
     })
 
     it('no dropdown is rendered', () => {
@@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
 
       it('counter displays 0', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+        expect(wrapper.find('.count').text()).toEqual('0')
       })
 
-      it('button is not primary', () => {
+      it('counter is not colored', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').props('primary')).toBe(false)
+        expect(wrapper.find('.count').classes()).toContain('--inactive')
       })
     })
 
@@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => {
 
       it('displays the number of unread notifications', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').text()).toEqual('2')
+        expect(wrapper.find('.count').text()).toEqual('2')
       })
 
-      it('renders primary button', () => {
+      it('renders the counter in red', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').props('primary')).toBe(true)
+        expect(wrapper.find('.count').classes()).toContain('--danger')
       })
     })
   })
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 413102915..a3b085db9 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -1,12 +1,12 @@
 <template>
-  <ds-button v-if="!notifications.length" class="notifications-menu" disabled icon="bell">
-    {{ unreadNotificationsCount }}
-  </ds-button>
+  <base-button v-if="!notifications.length" class="notifications-menu" disabled ghost circle>
+    <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
+  </base-button>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
-        {{ unreadNotificationsCount }}
-      </ds-button>
+      <base-button @click="toggleMenu" ghost circle>
+        <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
+      </base-button>
     </template>
     <template slot="popover">
       <div class="notifications-menu-popover">
@@ -22,17 +22,20 @@
 </template>
 
 <script>
-import Dropdown from '~/components/Dropdown'
 import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
-import NotificationList from '../NotificationList/NotificationList'
 import unionBy from 'lodash/unionBy'
 
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import Dropdown from '~/components/Dropdown'
+import NotificationList from '../NotificationList/NotificationList'
+
 export default {
   name: 'NotificationMenu',
   components: {
-    NotificationList,
+    CounterIcon,
     Dropdown,
+    NotificationList,
   },
   data() {
     return {
@@ -90,8 +93,13 @@ export default {
 
 <style lang="scss">
 .notifications-menu {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
+
+  .base-button {
+    overflow: visible;
+  }
 }
 
 .notifications-menu-popover {
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index dabc53d6f..547aab6a1 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -24,9 +24,9 @@
       />
       <password-strength :password="formData.password" />
       <ds-space margin-top="base">
-        <ds-button :loading="loading" :disabled="errors" primary>
+        <base-button :loading="loading" :disabled="errors" filled type="submit">
           {{ $t('settings.security.change-password.button') }}
-        </ds-button>
+        </base-button>
       </ds-space>
     </template>
   </ds-form>
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index e45612171..ab3334c6d 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -24,9 +24,9 @@
         />
         <password-strength :password="formData.password" />
         <ds-space margin-top="base" margin-bottom="xxx-small">
-          <ds-button :loading="$apollo.loading" :disabled="errors" primary>
+          <base-button :loading="$apollo.loading" :disabled="errors" filled type="submit">
             {{ $t('settings.security.change-password.button') }}
-          </ds-button>
+          </base-button>
         </ds-space>
       </template>
     </ds-form>
diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index 30b86e8c2..5f4baf357 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -20,17 +20,16 @@
     <ds-space margin-botton="large">
       <ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
     </ds-space>
-    <ds-button
+    <base-button
       :disabled="disabled"
       :loading="$apollo.loading"
-      primary
-      fullwidth
+      filled
       name="submit"
       type="submit"
       icon="envelope"
     >
       {{ $t('components.password-reset.request.form.submit') }}
-    </ds-button>
+    </base-button>
     <slot></slot>
   </ds-form>
   <div v-else>
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index d5afe90e1..5b9a792a9 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -176,6 +176,8 @@ export default {
   }
 
   .content-menu {
+    position: relative;
+    z-index: 99;
     display: inline-block;
     margin-left: $space-xx-small;
     margin-right: -$space-x-small;
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index 695d5cac9..50967d240 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -102,10 +102,11 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
-        <ds-button
+        <base-button
           style="float: right;"
           icon="check"
           type="submit"
+          filled
           :loading="$apollo.loading"
           :disabled="
             errors ||
@@ -115,10 +116,9 @@
               !noCommercial ||
               !noPolitical
           "
-          primary
         >
           {{ $t('actions.save') }}
-        </ds-button>
+        </base-button>
       </template>
     </ds-form>
   </div>
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index a6dd63d7b..8a9447a69 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -30,17 +30,16 @@
         name="email"
         icon="envelope"
       />
-      <ds-button
+      <base-button
         :disabled="disabled"
         :loading="$apollo.loading"
-        primary
-        fullwidth
+        filled
         name="submit"
         type="submit"
         icon="envelope"
       >
         {{ $t('components.registration.signup.form.submit') }}
-      </ds-button>
+      </base-button>
       <slot></slot>
     </ds-form>
   </ds-space>
diff --git a/webapp/components/ReleaseModal/ReleaseModal.vue b/webapp/components/ReleaseModal/ReleaseModal.vue
index 82f800ddb..fef0d79d0 100644
--- a/webapp/components/ReleaseModal/ReleaseModal.vue
+++ b/webapp/components/ReleaseModal/ReleaseModal.vue
@@ -4,11 +4,10 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</ds-button>
-
-      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
+      <base-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</base-button>
+      <base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('release.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>
diff --git a/webapp/components/ShoutButton.vue b/webapp/components/ShoutButton.vue
index 94d76005b..3e5ecec38 100644
--- a/webapp/components/ShoutButton.vue
+++ b/webapp/components/ShoutButton.vue
@@ -1,12 +1,11 @@
 <template>
   <ds-space margin="xx-small" class="text-align-center">
-    <ds-button
+    <base-button
       :loading="loading"
       :disabled="disabled"
-      :ghost="!shouted"
-      :primary="shouted"
-      size="x-large"
+      :filled="shouted"
       icon="bullhorn"
+      circle
       @click="toggle"
     />
     <ds-space margin-bottom="xx-small" />
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 95d94d70f..94938361d 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -9,10 +9,18 @@
     @vdropzone-thumbnail="transformImage"
   >
     <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
-      <ds-button @click.stop.prevent="cropImage" class="crop-confirm" primary>
+      <base-button @click="cropImage" class="crop-confirm" filled>
         {{ $t('contribution.teaserImage.cropperConfirm') }}
-      </ds-button>
-      <ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
+      </base-button>
+      <base-button
+        class="crop-cancel"
+        icon="close"
+        size="small"
+        circle
+        danger
+        filled
+        @click="cancelCrop"
+      />
     </div>
     <div
       :class="{
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
index 900c7b9a2..14674d99e 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
@@ -40,27 +40,6 @@ storiesOf('Generic/BaseButton', module)
     `,
   }))
 
-  .add('small', () => ({
-    components: { BaseButton },
-    template: `
-      <div>
-        <base-button size="small">Small</base-button>
-        <base-button size="small" circle>S</base-button>
-      </div>
-    `
-  }))
-
-  .add('primary', () => ({
-    components: { BaseButton },
-    template: `
-      <div>
-        <base-button primary>Primary</base-button>
-        <base-button primary disabled>Disabled</base-button>
-        <base-button primary loading>Loading</base-button>
-      </div>
-    `,
-  }))
-
   .add('danger', () => ({
     components: { BaseButton },
     template: `
@@ -72,6 +51,28 @@ storiesOf('Generic/BaseButton', module)
     `,
   }))
 
+  .add('filled', () => ({
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button filled>Filled</base-button>
+        <base-button filled danger>Filled Danger</base-button>
+        <base-button filled disabled>Disabled</base-button>
+        <base-button filled loading>Loading</base-button>
+      </div>
+    `,
+  }))
+
+  .add('small', () => ({
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button size="small">Small</base-button>
+        <base-button size="small" circle>S</base-button>
+      </div>
+    `,
+  }))
+
   .add('ghost', () => ({
     // TODO: add documentation --> ghost button should only be used for very special occasions
     // e.g. for the ContentMenu + for the EditorMenuBarButtons
@@ -80,5 +81,5 @@ storiesOf('Generic/BaseButton', module)
       <div>
         <base-button size="small" icon="ellipsis-v" circle ghost />
       </div>
-    `
+    `,
   }))
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 1044a30c7..b616995c5 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -1,12 +1,12 @@
 <template>
   <button
-    :type="type"
     :class="buttonClass"
     :disabled="loading"
-    @click.capture="(event) => $emit('click', event)"
+    :type="type"
+    @click.capture="event => $emit('click', event)"
   >
-    <loading-spinner v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
+    <loading-spinner v-if="loading" />
     <slot />
   </button>
 </template>
@@ -23,20 +23,20 @@ export default {
       type: Boolean,
       default: false,
     },
-    icon: {
-      type: String,
+    danger: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
     },
     ghost: {
       type: Boolean,
       default: false,
     },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    danger: {
-      type: Boolean,
-      default: false,
+    icon: {
+      type: String,
     },
     loading: {
       type: Boolean,
@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular|large)/)
+        return value.match(/(small|regular)/)
       },
     },
     type: {
@@ -63,116 +63,50 @@ export default {
 
       if (this.$slots.default == null) buttonClass += ' --icon-only'
       if (this.circle) buttonClass += ' --circle'
-      if (this.ghost) buttonClass += ' --ghost'
+      if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
-
-      if (this.primary) buttonClass += ' --primary'
-      else if (this.danger) buttonClass += ' --danger'
-
       if (this.size === 'small') buttonClass += ' --small'
-      else if (this.size === 'large') buttonClass += ' --large'
+
+      if (this.filled) buttonClass += ' --filled'
+      else if (this.ghost) buttonClass += ' --ghost'
 
       return buttonClass
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
+@import '~/assets/_new/styles/mixins/buttonStates.scss';
+
 .base-button {
+  @include buttonStates;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
-  padding: 0 12px;
+  height: $size-button-base;
+  padding: 0 $space-x-small;
   vertical-align: bottom;
-  color: $color-primary;
-  background-color: transparent;
-  border: 1px solid $color-primary;
-  border-radius: 6px;
+  border: $border-size-base solid;
+  border-radius: $border-radius-x-large;
   overflow: hidden;
   font-weight: $font-weight-bold;
   cursor: pointer;
-  transition: background-color .1s;
-
-  &:focus {
-    outline: 1px dashed $color-primary;
-  }
-
-  &:hover {
-    color: $color-neutral-100;
-    background-color: $color-primary;
-  }
-
-  &:active {
-    color: $color-neutral-100;
-    border-color: $color-primary-dark;
-    background-color: $color-primary-dark;
-  }
-
-  &:disabled {
-    color: $color-neutral-60;
-    border-color: $color-neutral-60;
-    background-color: transparent;
-    cursor: default;
-  }
-
-  &.--primary {
-    color: $color-neutral-100;
-    background-color: $color-primary;
-
-    &:hover {
-      background-color: $color-primary-light;
-      border-color: $color-primary-light;
-    }
-
-    &:active {
-      background-color: $color-primary-dark;
-      border-color: $color-primary-dark;
-    }
-
-    &:disabled {
-      background-color: $color-neutral-60;
-      border-color: $color-neutral-60;
-    }
-  }
 
   &.--danger {
-    color: $color-neutral-100;
-    background-color: $color-danger;
-    border-color: $color-danger;
-
-    &:hover {
-      background-color: $color-danger-light;
-      border-color: $color-danger-light;
-    }
-
-    &:active {
-      background-color: $color-danger-dark;
-      border-color: $color-danger-dark;
-    }
-
-    &:disabled {
-      background-color: $color-neutral-60;
-      border-color: $color-neutral-60;
-    }
+    @include buttonStates($color-scheme: danger);
   }
 
-  &.--small {
-    height: 26px;
-    font-size: $font-size-small;
-
-    &.--circle {
-      width: 26px;
-    }
+  &.--filled {
+    @include buttonStates($filled: true);
   }
 
-  &.--large {
-
+  &.--danger.--filled {
+    @include buttonStates($color-scheme: danger, $filled: true);
   }
 
   &.--circle {
-    width: 36px;
+    width: $size-button-base;
     border-radius: 50%;
   }
 
@@ -180,23 +114,31 @@ export default {
     border: none;
   }
 
+  &.--small {
+    height: $size-button-small;
+    font-size: $font-size-small;
+
+    &.--circle {
+      width: $size-button-small;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
-    margin-right: 6px;
+    margin-right: $space-xx-small;
+  }
+
+  &:disabled.--loading {
+    color: $color-neutral-80;
   }
 
   > .loading-spinner {
     position: absolute;
-    height: 26px;
+    height: $size-button-small;
     color: $color-neutral-60;
   }
 
-  &.--loading {
-    color: $color-neutral-80;
-
-    &.--primary > .loading-spinner,
-    &.--danger > .loading-spinner {
-      color: $color-neutral-100;
-    }
+  &.--filled > .loading-spinner {
+    color: $color-neutral-100;
   }
 }
 </style>
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js
index 01d753c9d..49be22bde 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js
@@ -5,33 +5,41 @@ import BaseIcon from '../BaseIcon/BaseIcon'
 const localVue = global.localVue
 
 describe('CounterIcon.vue', () => {
-  let propsData, wrapper, tag
+  let propsData, wrapper, count
 
   const Wrapper = () => {
     return mount(CounterIcon, { propsData, localVue })
   }
 
-  describe('given a valid icon name and count', () => {
+  describe('given a valid icon name and count below 100', () => {
     beforeEach(() => {
-      propsData = { icon: 'comments', count: 1 }
+      propsData = { icon: 'comments', count: 42 }
       wrapper = Wrapper()
-      tag = wrapper.find('.ds-tag')
+      count = wrapper.find('.count')
     })
 
-    it('renders BaseIcon', () => {
+    it('renders the icon', () => {
       expect(wrapper.find(BaseIcon).exists()).toBe(true)
     })
 
     it('renders the count', () => {
-      expect(tag.text()).toEqual('1')
+      expect(count.text()).toEqual('42')
+    })
+  })
+
+  describe('given a valid icon name and count above 100', () => {
+    beforeEach(() => {
+      propsData = { icon: 'comments', count: 750 }
+      wrapper = Wrapper()
+      count = wrapper.find('.count')
     })
 
-    it('uses a round tag', () => {
-      expect(tag.classes()).toContain('ds-tag-round')
+    it('renders the icon', () => {
+      expect(wrapper.find(BaseIcon).exists()).toBe(true)
     })
 
-    it('uses a primary button', () => {
-      expect(tag.classes()).toContain('ds-tag-primary')
+    it('renders the capped count with a plus', () => {
+      expect(count.text()).toEqual('99+')
     })
   })
 })
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
index 9d7debbc6..85b49f631 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
 import helpers from '~/storybook/helpers'
 import CounterIcon from './CounterIcon.vue'
 
-storiesOf('CounterIcon', module)
+storiesOf('Generic/CounterIcon', module)
   .addDecorator(helpers.layout)
 
   .add('default', () => ({
@@ -15,6 +15,20 @@ storiesOf('CounterIcon', module)
   .add('high count', () => ({
     components: { CounterIcon },
     template: `
-      <counter-icon icon="bell" :count="150" />
+      <counter-icon icon="comments" :count="150" />
+    `,
+  }))
+
+  .add('danger', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="42" danger />
+    `,
+  }))
+
+  .add('count is 0', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="0" />
     `,
   }))
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
index 87d90a9b1..00b4b9c53 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="counter-icon">
     <base-icon :name="icon" />
-    <span class="count">{{ cappedCount }}</span>
+    <span :class="counterClass">{{ cappedCount }}</span>
   </span>
 </template>
 
@@ -10,12 +10,20 @@ export default {
   props: {
     icon: { type: String, required: true },
     count: { type: Number, required: true },
+    danger: { type: Boolean, default: false },
   },
   computed: {
     cappedCount() {
       return this.count <= 99 ? this.count : '99+'
-    }
-  }
+    },
+    counterClass() {
+      let counterClass = 'count'
+      if (this.danger) counterClass += ' --danger'
+      if (this.count === 0) counterClass += ' --inactive'
+
+      return counterClass
+    },
+  },
 }
 </script>
 
@@ -25,23 +33,31 @@ export default {
 
   > .count {
     position: absolute;
-    top: -4px;
+    top: -$space-xx-small;
     right: 0;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 16px;
-    min-width: 16px;
-    padding: 3px;
+    height: $size-icon-base;
+    min-width: $size-icon-base;
+    padding: 3px; // magic number to center count
     border-radius: 50%;
     transform: translateX(50%);
 
-    color:$color-neutral-100;
+    color: $color-neutral-100;
     background-color: $color-primary;
-    font-size: 10px;
+    font-size: 10px; // magic number to center count
     line-height: 1;
     text-align: center;
+
+    &.--danger {
+      background-color: $color-danger;
+    }
+
+    &.--inactive {
+      background-color: $color-neutral-60;
+    }
   }
 }
 </style>
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
index 98e7dc200..529a029d9 100644
--- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
+++ b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
@@ -1,14 +1,6 @@
 <template>
-  <svg
-    viewBox="0 0 50 50"
-    class="loading-spinner"
-  >
-    <circle
-      cx="25"
-      cy="25"
-      r="20"
-      class="circle"
-    />
+  <svg viewBox="0 0 50 50" class="loading-spinner">
+    <circle cx="25" cy="25" r="20" class="circle" />
   </svg>
 </template>
 
@@ -20,7 +12,7 @@ export default {
 
 <style lang="scss">
 .loading-spinner {
-  height: 36px;
+  height: $size-button-base;
   overflow: hidden;
   stroke: currentColor;
   animation: rotate 16s linear infinite;
diff --git a/webapp/components/features/ReportRow/ReportRow.spec.js b/webapp/components/features/ReportRow/ReportRow.spec.js
index 352011a28..68e0144bd 100644
--- a/webapp/components/features/ReportRow/ReportRow.spec.js
+++ b/webapp/components/features/ReportRow/ReportRow.spec.js
@@ -40,7 +40,7 @@ describe('ReportRow', () => {
       beforeEach(() => {
         propsData = { ...propsData, report: reports[1] }
         wrapper = Wrapper()
-        confirmButton = wrapper.find('.ds-button-danger')
+        confirmButton = wrapper.find('.base-button.--danger')
       })
 
       it('renders a confirm button', () => {
diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue
index bf0cce7a7..af9a317cd 100644
--- a/webapp/components/features/ReportRow/ReportRow.vue
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@@ -11,9 +11,9 @@
         <span class="user-count">
           {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
         </span>
-        <ds-button size="small" @click="showFiledReports = !showFiledReports">
+        <base-button size="small" @click="showFiledReports = !showFiledReports">
           {{ $t('moderation.reports.moreDetails') }}
-        </ds-button>
+        </base-button>
       </td>
 
       <!-- Content Column -->
@@ -61,16 +61,17 @@
         <span v-if="report.closed" class="title">
           {{ $t('moderation.reports.decided') }}
         </span>
-        <ds-button
+        <base-button
           v-else
           danger
+          filled
           data-test="confirm"
           size="small"
           :icon="statusIconName"
           @click="$emit('confirm-report')"
         >
           {{ $t('moderation.reports.decideButton') }}
-        </ds-button>
+        </base-button>
       </td>
     </tr>
 
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index f467b78e3..1e368f01a 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -94,10 +94,7 @@ export default {
   /*
    ** Global CSS
    */
-  css: [
-    '~assets/_new/styles/resets.scss',
-    '~assets/styles/main.scss',
-  ],
+  css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
 
   /*
    ** Global processed styles
diff --git a/webapp/pages/admin/donations.vue b/webapp/pages/admin/donations.vue
index 7f0205be5..f40cb4c7d 100644
--- a/webapp/pages/admin/donations.vue
+++ b/webapp/pages/admin/donations.vue
@@ -8,9 +8,9 @@
         placeholder="1200"
         icon="money"
       />
-      <ds-button primary type="submit" :disabled="!formData.goal || !formData.progress">
+      <base-button filled type="submit" :disabled="!formData.goal || !formData.progress">
         {{ $t('actions.save') }}
-      </ds-button>
+      </base-button>
     </ds-form>
   </ds-card>
 </template>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 6a7bf8adb..e56be70ab 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -12,7 +12,7 @@
               />
             </ds-flex-item>
             <ds-flex-item width="30px">
-              <ds-button primary type="submit" icon="search" :loading="$apollo.loading" />
+              <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" />
             </ds-flex-item>
           </ds-flex>
         </ds-form>
@@ -50,14 +50,7 @@
           {{ scope.row.createdAt | dateTime }}
         </template>
       </ds-table>
-      <ds-flex direction="row-reverse">
-        <ds-flex-item width="50px">
-          <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
-        </ds-flex-item>
-        <ds-flex-item width="50px">
-          <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
-        </ds-flex-item>
-      </ds-flex>
+      <hc-paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </ds-card>
     <ds-card v-else>
       <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
@@ -69,8 +62,12 @@
 import gql from 'graphql-tag'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
+import HcPaginate from '~/components/Paginate/Paginate'
 
 export default {
+  components: {
+    HcPaginate,
+  },
   data() {
     const pageSize = 15
     return {
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 6178198a8..efc8d3db4 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -8,7 +8,7 @@
         <!--<donation-info /> -->
         <div>
           <a target="_blank" href="https://human-connection.org/spenden/">
-            <ds-button primary>{{ $t('donations.donate-now') }}</ds-button>
+            <base-button filled>{{ $t('donations.donate-now') }}</base-button>
           </a>
         </div>
         <div class="sorting-dropdown">
@@ -40,14 +40,19 @@
       </template>
     </masonry-grid>
     <client-only>
-      <ds-button
-        v-tooltip="{ content: $t('contribution.newPost'), placement: 'left', delay: { show: 500 } }"
-        :path="{ name: 'post-create' }"
-        class="post-add-button"
-        icon="plus"
-        size="x-large"
-        primary
-      />
+      <nuxt-link :to="{ name: 'post-create' }">
+        <base-button
+          v-tooltip="{
+            content: $t('contribution.newPost'),
+            placement: 'left',
+            delay: { show: 500 },
+          }"
+          class="post-add-button"
+          icon="plus"
+          filled
+          circle
+        />
+      </nuxt-link>
     </client-only>
     <client-only>
       <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
@@ -231,7 +236,10 @@ export default {
   }
 }
 
-.post-add-button {
+.base-button.--circle.post-add-button {
+  height: 54px;
+  width: 54px;
+  font-size: 26px;
   z-index: 100;
   position: fixed;
   bottom: -5px;
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index a692f19ea..3f47b002a 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -73,9 +73,9 @@
                 @optimistic="optimisticFollow"
                 @update="updateFollow"
               />
-              <ds-button v-else fullwidth @click="unblock(user)">
+              <base-button v-else @click="unblock(user)" class="unblock-user-button">
                 {{ $t('settings.blocked-users.unblock') }}
-              </ds-button>
+              </base-button>
             </template>
           </ds-space>
           <template v-if="user.about">
@@ -215,19 +215,21 @@
 
           <ds-grid-item :row-span="2" column-span="fullWidth">
             <ds-space centered>
-              <ds-button
-                v-if="myProfile"
-                v-tooltip="{
-                  content: $t('contribution.newPost'),
-                  placement: 'left',
-                  delay: { show: 500 },
-                }"
-                :path="{ name: 'post-create' }"
-                class="profile-post-add-button"
-                icon="plus"
-                size="large"
-                primary
-              />
+              <nuxt-link :to="{ name: 'post-create' }">
+                <base-button
+                  v-if="myProfile"
+                  v-tooltip="{
+                    content: $t('contribution.newPost'),
+                    placement: 'left',
+                    delay: { show: 500 },
+                  }"
+                  :path="{ name: 'post-create' }"
+                  class="profile-post-add-button"
+                  icon="plus"
+                  circle
+                  filled
+                />
+              </nuxt-link>
             </ds-space>
           </ds-grid-item>
 
@@ -546,4 +548,8 @@ export default {
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large;
 }
+.unblock-user-button {
+  display: block;
+  width: 100%;
+}
 </style>
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index acbd253aa..a62e850dc 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -58,7 +58,7 @@
         </template>
 
         <template slot="unblock" slot-scope="scope">
-          <ds-button size="small" @click="unblock(scope)"><ds-icon name="user-plus" /></ds-button>
+          <base-button circle size="small" @click="unblock(scope)" icon="user-plus" />
         </template>
       </ds-table>
     </ds-card>
diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue
index d842dbef0..22050c636 100644
--- a/webapp/pages/settings/embeds.vue
+++ b/webapp/pages/settings/embeds.vue
@@ -16,12 +16,12 @@
       <ds-text>
         {{ $t('settings.embeds.status.change.question') }}
       </ds-text>
-      <ds-button @click="submit" :primary="!disabled" :disabled="!disabled">
+      <base-button @click="submit" :filled="!disabled" :disabled="!disabled">
         {{ $t('settings.embeds.status.change.deny') }}
-      </ds-button>
-      <ds-button @click="submit" :primary="disabled" :disabled="disabled">
+      </base-button>
+      <base-button @click="submit" :filled="disabled" :disabled="disabled">
         {{ $t('settings.embeds.status.change.allow') }}
-      </ds-button>
+      </base-button>
 
       <p>{{ $t('settings.embeds.info-description') }}</p>
       <ul>
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index c37c27a1d..20034d5af 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -31,9 +31,9 @@
           :placeholder="$t('settings.data.labelBio')"
         />
         <template slot="footer">
-          <ds-button icon="check" :disabled="errors" type="submit" :loading="loadingData" primary>
+          <base-button icon="check" :disabled="errors" type="submit" :loading="loadingData" filled>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index 85755953a..91b2e269f 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -17,9 +17,9 @@
         />
 
         <template slot="footer">
-          <ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
+          <base-button class="submit-button" icon="check" :disabled="errors" type="submit" filled>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 8b3889b0d..4e01bbb44 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -19,9 +19,9 @@
           <ds-space class="backendErrors" v-if="backendErrors">
             <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
           </ds-space>
-          <ds-button icon="check" :disabled="errors" type="submit" primary>
+          <base-button icon="check" :disabled="errors" type="submit" filled>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>
diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js
index b1c9e0649..cf994e397 100644
--- a/webapp/pages/settings/my-social-media.spec.js
+++ b/webapp/pages/settings/my-social-media.spec.js
@@ -119,11 +119,11 @@ describe('my-social-media.vue', () => {
         })
 
         it('displays the edit button', () => {
-          expect(wrapper.find('a[name="edit"]').exists()).toBe(true)
+          expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
         })
 
         it('displays the delete button', () => {
-          expect(wrapper.find('a[name="delete"]').exists()).toBe(true)
+          expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
         })
       })
 
@@ -138,7 +138,7 @@ describe('my-social-media.vue', () => {
 
       describe('editing social media link', () => {
         beforeEach(() => {
-          const editButton = wrapper.find('a[name="edit"]')
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
           editButton.trigger('click')
           input = wrapper.find('input#editSocialMedia')
         })
@@ -169,7 +169,7 @@ describe('my-social-media.vue', () => {
 
       describe('deleting social media link', () => {
         beforeEach(() => {
-          const deleteButton = wrapper.find('a[name="delete"]')
+          const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
           deleteButton.trigger('click')
         })
 
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index 677c4423d..6ed2f1bc6 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -24,22 +24,22 @@
                 {{ link.url }}
               </a>
               <span class="divider">|</span>
-              <a name="edit" @click="handleEditSocialMedia(link)">
-                <base-icon
-                  :aria-label="$t('actions.edit')"
-                  class="icon-button"
-                  name="edit"
-                  :title="$t('actions.edit')"
-                />
-              </a>
-              <a name="delete" @click="handleDeleteSocialMedia(link)">
-                <base-icon
-                  :aria-label="$t('actions.delete')"
-                  class="icon-button"
-                  name="trash"
-                  :title="$t('actions.delete')"
-                />
-              </a>
+              <base-button
+                icon="edit"
+                circle
+                ghost
+                @click="handleEditSocialMedia(link)"
+                :title="$t('actions.edit')"
+                data-test="edit-button"
+              />
+              <base-button
+                icon="trash"
+                circle
+                ghost
+                @click="handleDeleteSocialMedia(link)"
+                :title="$t('actions.delete')"
+                data-test="delete-button"
+              />
             </template>
           </ds-list-item>
         </ds-list>
@@ -54,12 +54,12 @@
           :placeholder="$t('settings.social-media.placeholder')"
         />
         <ds-space margin-top="base">
-          <ds-button primary :disabled="disabled">
+          <base-button filled :disabled="disabled" type="submit">
             {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }}
-          </ds-button>
-          <ds-button v-if="editingLink.id" id="cancel" ghost @click="handleCancel()">
+          </base-button>
+          <base-button v-if="editingLink.id" id="cancel" danger @click="handleCancel()">
             {{ $t('actions.cancel') }}
-          </ds-button>
+          </base-button>
         </ds-space>
       </ds-space>
     </ds-card>
@@ -226,5 +226,10 @@ export default {
   .ds-list-item-prefix {
     align-self: center;
   }
+
+  .ds-list-item-content {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>
diff --git a/webapp/pages/settings/privacy.vue b/webapp/pages/settings/privacy.vue
index 3decdefbe..f759926b7 100644
--- a/webapp/pages/settings/privacy.vue
+++ b/webapp/pages/settings/privacy.vue
@@ -4,7 +4,7 @@
       <input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
       <label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
     </ds-space>
-    <ds-button primary @click="submit" :disabled="disabled">{{ $t('actions.save') }}</ds-button>
+    <base-button filled @click="submit" :disabled="disabled">{{ $t('actions.save') }}</base-button>
   </ds-card>
 </template>
 
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index 24af8a23d..0716048b5 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -2,11 +2,11 @@
   <ds-container width="medium">
     <ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
       <p>
-        <ds-button>
-          <nuxt-link class="post-link" :to="{ name: 'terms-and-conditions' }" target="_blank">
+        <nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
+          <base-button>
             {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
-          </nuxt-link>
-        </ds-button>
+          </base-button>
+        </nuxt-link>
       </p>
       <ds-text>
         <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
@@ -17,7 +17,9 @@
       </ds-text>
 
       <template slot="footer">
-        <ds-button primary @click="submit" :disabled="!checked">{{ $t(`actions.save`) }}</ds-button>
+        <base-button filled @click="submit" :disabled="!checked">
+          {{ $t(`actions.save`) }}
+        </base-button>
       </template>
     </ds-card>
   </ds-container>
diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js
index 60b61d787..576136f92 100644
--- a/webapp/storybook/config.js
+++ b/webapp/storybook/config.js
@@ -2,6 +2,7 @@ import { addParameters, configure } from '@storybook/vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { action } from '@storybook/addon-actions'
+// eslint-disable-next-line import/no-webpack-loader-syntax
 import '!style-loader!css-loader!sass-loader!../assets/_new/styles/resets.scss'
 
 Vue.use(Vuex)
@@ -60,7 +61,7 @@ addParameters({
   options: {
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
-  }
+  },
 })
 
 configure(loadStories, module)