diff --git a/froide_govplan/templates/froide_govplan/base.html b/froide_govplan/templates/froide_govplan/base.html
index 69f5179..3b4fff1 100644
--- a/froide_govplan/templates/froide_govplan/base.html
+++ b/froide_govplan/templates/froide_govplan/base.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-  <nav class="bg-gray-100" aria-label="breadcrumb">
+  <nav class="bg-body-secondary" aria-label="breadcrumb">
     <div class="container">
       <ol class="breadcrumb">
         <li class="breadcrumb-item">
diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index 3e98e22..e565d54 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -26,7 +26,7 @@
 
 {% block app_body %}
 <div class="container mb-3">
-  <div class="box-card border-yellow md:shadow-yellow bg-white mb-5">
+  <div class="box-card border-yellow md:shadow-yellow bg-body mb-5">
     <div>
       <div class="flex-grow-1 tight-margin p-3 p-md-4 p-lg-5">
         <h1 class="mt-0 h3">
@@ -42,7 +42,7 @@
             </li>
             {% for cat in object.categories.all %}
             <li>
-              <a href="{{ section.get_absolute_url }}" class="badge text-bg-light me-2">
+              <a href="{{ section.get_absolute_url }}" class="badge text-bg-light-subtle me-2">
                 {{ cat.name }}
               </a>
             </li>
@@ -164,7 +164,7 @@
     <div class="col col-12 col-lg-6 d-flex mb-4">
       <div class="box-card border-gray shadow-gray">
         <div>
-          <div class="box-card-header bg-gray-300 d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
+          <div class="box-card-header text-bg-body-tertiary d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
             <h3 class="h4">Neue Entwicklung melden</h3>
           </div>
           <div class="p-3 p-md-4">
diff --git a/froide_govplan/templates/froide_govplan/plugins/card_cols.html b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
index 80c3476..115abfa 100644
--- a/froide_govplan/templates/froide_govplan/plugins/card_cols.html
+++ b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
@@ -11,8 +11,8 @@
   {% for object in object_list %}
     <div class="col col-12 col-md-6 col-lg-4 d-flex mb-3">
       <a href="{{ object.get_absolute_url }}" class="d-flex w-100 text-body text-decoration-none">
-        <div class="box-card border-blue w-100 bg-white shadow-blue">
-          <div class="box-card-header p-3 bg-blue-20">
+        <div class="box-card border-blue w-100 bg-body shadow-blue">
+          <div class="box-card-header p-3 text-bg-callout">
             <h3 class="h6 m-0">
               {{ object.title }}
             </h3>
@@ -39,4 +39,4 @@
     </div>
   {% endfor %}
 </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/froide_govplan/templates/froide_govplan/plugins/progress.html b/froide_govplan/templates/froide_govplan/plugins/progress.html
index 2606664..5d085f4 100644
--- a/froide_govplan/templates/froide_govplan/plugins/progress.html
+++ b/froide_govplan/templates/froide_govplan/plugins/progress.html
@@ -3,7 +3,7 @@
 {% get_plan_progress object_list as progress %}
 
 <div class="d-flex align-items-center">
-  <span class="text-gray-700{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
+  <span class="text-body-secondary{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
   <div class="flex-grow-1 ms-2">
     <div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}>
       {% for section in progress.sections %}
diff --git a/froide_govplan/templates/froide_govplan/plugins/progress_row.html b/froide_govplan/templates/froide_govplan/plugins/progress_row.html
index 52210ac..d175be1 100644
--- a/froide_govplan/templates/froide_govplan/plugins/progress_row.html
+++ b/froide_govplan/templates/froide_govplan/plugins/progress_row.html
@@ -4,7 +4,7 @@
 
 <div class="row">
   <div class="col-sm-3">
-    <span class="text-gray-700{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
+    <span class="text-body-secondary{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
   </div>
   <div class="col-sm-9">
     <div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}>
diff --git a/froide_govplan/templates/froide_govplan/plugins/sections.html b/froide_govplan/templates/froide_govplan/plugins/sections.html
index fef2b5c..4896647 100644
--- a/froide_govplan/templates/froide_govplan/plugins/sections.html
+++ b/froide_govplan/templates/froide_govplan/plugins/sections.html
@@ -17,11 +17,11 @@
     <a href="{{ section.get_absolute_url }}" class="d-flex w-100 text-body text-decoration-none">
       <div class="box-card border-blue mb-4">
         <div>
-          <div class="box-card-header tight-margin d-flex align-items-center has-background p-3 p-md-4 bg-blue-20" id="govsection-{{ section.pk }}">
+          <div class="box-card-header tight-margin d-flex align-items-center has-background p-3 p-md-4 text-bg-callout" id="govsection-{{ section.pk }}">
             <h3 class="h5 m-0">{{ section.title }}</h3> 
             {% if section.icon %}
             <div class="ms-auto">
-              <div class="box-card-icon position-static bg-white">
+              <div class="box-card-icon position-static text-bg-body">
                 <i class="fa fa-{{ section.icon }}"></i>
               </div>
             </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/time_used.html b/froide_govplan/templates/froide_govplan/plugins/time_used.html
index 605316a..aa87f76 100644
--- a/froide_govplan/templates/froide_govplan/plugins/time_used.html
+++ b/froide_govplan/templates/froide_govplan/plugins/time_used.html
@@ -5,7 +5,7 @@
 <div class="row">
   {% with gov=instance.government %}
     <div class="col-sm-3">
-      <span class="text-gray-700">
+      <span class="text-body-secondary">
         {% blocktranslate count days=gov.days_left %}One day left{% plural %}{{ days }} days left{% endblocktranslate %}
       </span>
     </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/updates.html b/froide_govplan/templates/froide_govplan/plugins/updates.html
index c703c6e..e170afb 100644
--- a/froide_govplan/templates/froide_govplan/plugins/updates.html
+++ b/froide_govplan/templates/froide_govplan/plugins/updates.html
@@ -2,9 +2,9 @@
 
 {% for update in updates %}
 {% if wrapper_classes %}<div class="{{ wrapper_classes }}">{% endif %}
-<div class="box-card border-blue shadow-blue bg-white" id="update-{{ update.pk }}">
+<div class="box-card border-blue shadow-blue bg-body" id="update-{{ update.pk }}">
   <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
-    <div class="box-card-header bg-blue-20 d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
+    <div class="box-card-header text-bg-callout d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
       <div>
         {% if show_context %}
           <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0">
diff --git a/froide_govplan/templates/froide_govplan/section.html b/froide_govplan/templates/froide_govplan/section.html
index 3364e1e..84e084a 100644
--- a/froide_govplan/templates/froide_govplan/section.html
+++ b/froide_govplan/templates/froide_govplan/section.html
@@ -22,7 +22,7 @@
 <div class="container">
   <div class="row justify-content-center mb-5">  
     <div class="col col-lg-12">
-      <div class="box-card border-yellow md:shadow-yellow bg-white p-3 p-md-4 p-lg-5 tight-margin">
+      <div class="box-card border-yellow md:shadow-yellow bg-body p-3 p-md-4 p-lg-5 tight-margin">
         <div class="row mx-0">
           <div class="col col-12 col-md-12 ps-0 tight-margin">
             <h1 class="mt-0 h2">
@@ -39,7 +39,7 @@
 
         <div class="mt-5">
           {% include "froide_govplan/plugins/progress_row.html" with object_list=plans %}
-          <p class="small text-gray-700 mt-3 no-hyphens">
+          <p class="small text-body-secondary mt-3 no-hyphens">
             <span class="text-nowrap me-1"><i class="fa fa-circle text-light"></i>&nbsp;nicht begonnen</span>
             <span class="text-nowrap me-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span>
             <span class="text-nowrap me-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span>