diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 9e86b3c70..54a8b4042 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -248,7 +248,9 @@ $size-ribbon: 6px;
  * @presenter Spacing
  */
 
+$size-width-filter-sidebar: 85px;
 $size-width-paginate: 100px;
+$size-max-width-filter-menu: 1026px;
 
 /**
  * @tokens Size Avatar
diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js
index bfa01d2aa..d33d2a6e6 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.spec.js
+++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js
@@ -49,7 +49,7 @@ describe('CategoriesFilter.vue', () => {
   describe('mount', () => {
     it('starts with all categories button active', () => {
       const allCategoriesButton = wrapper.find(
-        '.categories-filter > .labeled-button > .base-button',
+        '.categories-filter .sidebar .base-button',
       )
       expect(allCategoriesButton.attributes().class).toContain('--filled')
     })
@@ -58,7 +58,7 @@ describe('CategoriesFilter.vue', () => {
       getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       wrapper = await Wrapper()
       democracyAndPoliticsButton = wrapper
-        .findAll('.menu-item > .labeled-button > .base-button')
+        .findAll('.categories-filter .item .base-button')
         .at(2)
       expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
     })
@@ -66,7 +66,7 @@ describe('CategoriesFilter.vue', () => {
     describe('click on an "catetories-buttons" button', () => {
       it('calls TOGGLE_CATEGORY when clicked', () => {
         environmentAndNatureButton = wrapper
-          .findAll('.menu-item > .labeled-button > .base-button')
+          .findAll('.categories-filter .item .base-button')
           .at(0)
         environmentAndNatureButton.trigger('click')
         expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
@@ -78,7 +78,7 @@ describe('CategoriesFilter.vue', () => {
         getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
         wrapper = await Wrapper()
         const allCategoriesButton = wrapper.find(
-          '.categories-filter > .labeled-button > .base-button',
+          '.categories-filter .sidebar .base-button',
         )
         allCategoriesButton.trigger('click')
         expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1)
diff --git a/webapp/components/FilterMenu/EmotionsFilter.spec.js b/webapp/components/FilterMenu/EmotionsFilter.spec.js
index c7aa452d9..3695ab70b 100644
--- a/webapp/components/FilterMenu/EmotionsFilter.spec.js
+++ b/webapp/components/FilterMenu/EmotionsFilter.spec.js
@@ -30,7 +30,7 @@ describe('EmotionsFilter', () => {
 
   describe('mount', () => {
     it('starts with all emotions button active', () => {
-      const allEmotionsButton = wrapper.find('.emotions-filter > .labeled-button > .base-button')
+      const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
       expect(allEmotionsButton.attributes().class).toContain('--filled')
     })
 
@@ -55,7 +55,7 @@ describe('EmotionsFilter', () => {
       it('when all button is clicked', async () => {
         getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
         wrapper = await Wrapper()
-        const allEmotionsButton = wrapper.find('.emotions-filter > .labeled-button > .base-button')
+        const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
         allEmotionsButton.trigger('click')
         expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1)
       })
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index d400a75d8..f46f89607 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -52,7 +52,7 @@ export default {
 
 <style lang="scss">
 .filter-menu-options {
-  max-width: 1026px;
+  max-width: $size-max-width-filter-menu;
   padding: $space-small $space-x-small;
 
   > .title {
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index 9dae305b8..9100867ab 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -39,7 +39,7 @@ export default {
 
   > .sidebar {
     flex-basis: 12%;
-    max-width: 85px;
+    max-width: $size-width-filter-sidebar;
   }
 
   > .divider {
diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js
index 1547e1d86..b5d5c91e3 100644
--- a/webapp/components/FilterMenu/FollowingFilter.spec.js
+++ b/webapp/components/FilterMenu/FollowingFilter.spec.js
@@ -36,13 +36,13 @@ describe('FollowingFilter', () => {
       getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
       const wrapper = Wrapper()
       expect(
-        wrapper.find('.following-filter > .labeled-button > .base-button').classes('--filled'),
+        wrapper.find('.following-filter .sidebar .base-button').classes('--filled'),
       ).toBe(true)
     })
 
     describe('click "filter-by-followed" button', () => {
       it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
-        wrapper.find('.following-filter > .labeled-button > .base-button').trigger('click')
+        wrapper.find('.following-filter .sidebar .base-button').trigger('click')
         expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
       })
     })
diff --git a/webapp/components/FilterMenu/LanguagesFilter.spec.js b/webapp/components/FilterMenu/LanguagesFilter.spec.js
index 89bf47b2e..a525b67b3 100644
--- a/webapp/components/FilterMenu/LanguagesFilter.spec.js
+++ b/webapp/components/FilterMenu/LanguagesFilter.spec.js
@@ -33,7 +33,7 @@ describe('LanguagesFilter.vue', () => {
 
   describe('mount', () => {
     it('starts with all categories button active', () => {
-      const allLanguagesButton = wrapper.find('.languages-filter > .labeled-button > .base-button')
+      const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
       expect(allLanguagesButton.attributes().class).toContain('--filled')
     })
 
@@ -41,7 +41,7 @@ describe('LanguagesFilter.vue', () => {
       getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
       const wrapper = Wrapper()
       spanishButton = wrapper
-        .findAll('.languages-filter > .languages-list .base-button')
+        .findAll('.languages-filter .item .base-button')
         .at(languages.findIndex(l => l.code === 'es'))
       expect(spanishButton.attributes().class).toContain('--filled')
     })
@@ -50,7 +50,7 @@ describe('LanguagesFilter.vue', () => {
       it('calls TOGGLE_LANGUAGE when clicked', () => {
         const wrapper = Wrapper()
         englishButton = wrapper
-          .findAll('.languages-filter > .languages-list .base-button')
+          .findAll('.languages-filter .item .base-button')
           .at(languages.findIndex(l => l.code === 'en'))
         englishButton.trigger('click')
         expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
@@ -62,7 +62,7 @@ describe('LanguagesFilter.vue', () => {
         getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en'])
         wrapper = await Wrapper()
         const allLanguagesButton = wrapper.find(
-          '.languages-filter > .labeled-button > .base-button',
+          '.languages-filter .sidebar .base-button',
         )
         allLanguagesButton.trigger('click')
         expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1)