diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss
index e32b9f074..3454ab690 100644
--- a/frontend/src/assets/sass/tokens.module.scss
+++ b/frontend/src/assets/sass/tokens.module.scss
@@ -28,14 +28,6 @@ $color-yellow: rgb(245, 196, 0);
 $color-yellow-active: rgb(255, 206, 10);
 $color-yellow-inverse: rgb(255, 252, 240);
 
-/**
- * @tokens Theme
- * @presenter Color
- */
-
-// main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
-$theme-color: $color-primary;
-
 /**
  * @tokens Color Neutral
  * @presenter Color
diff --git a/webapp/constants/manifest.js b/webapp/constants/manifest.js
index 8662c509d..653f9f6fc 100644
--- a/webapp/constants/manifest.js
+++ b/webapp/constants/manifest.js
@@ -1,9 +1,10 @@
 import metadata from './metadata.js'
-const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION } = metadata
+const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION, THEME_COLOR } = metadata
+
 export default {
   name: APPLICATION_NAME,
   short_name: APPLICATION_SHORT_NAME,
   description: APPLICATION_DESCRIPTION,
-  theme_color: '$theme-color',
+  theme_color: THEME_COLOR,
   lang: 'en',
 }
diff --git a/webapp/constants/metadata.js b/webapp/constants/metadata.js
index 5e1088019..0737fa358 100644
--- a/webapp/constants/metadata.js
+++ b/webapp/constants/metadata.js
@@ -6,4 +6,5 @@ export default {
   COOKIE_NAME: 'reformer-network-token',
   ORGANIZATION_NAME: 'Stichting Rudulin',
   ORGANIZATION_JURISDICTION: 'Amsterdam',
+  THEME_COLOR: 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
 }
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index b3a63281a..c8843105a 100644
--- a/webapp/pages/notifications/index.vue
+++ b/webapp/pages/notifications/index.vue
@@ -26,14 +26,14 @@
         />
       </ds-flex-item>
       <ds-flex-item class="notifications-footer-button" :width="{ base: 'auto' }" centered>
-        <ds-button
+        <base-button
           primary
           :disabled="unreadNotificationsCount === 0"
           @click="markAllAsRead"
           data-test="markAllAsRead-button"
         >
           {{ $t('notifications.markAllAsRead') }}
-        </ds-button>
+        </base-button>
       </ds-flex-item>
     </ds-flex>
   </base-card>