diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss
index 0bd9d02b4d25c82627480742a3f79fd47f6ffbe0..d413c45ad407ca242187f70fa66dde2cb65b128a 100644
--- a/macao/assets/_custom.scss
+++ b/macao/assets/_custom.scss
@@ -1,19 +1,24 @@
 body {
-  --accent-quiz: #2aa198;
-  // Defined but not used for now
   --quizz-backgourd-color: #00000;
   --feedback-sucess-color: lightgreen;
   --feedback-error-color: #ef5d5d;
+  --secondary-background-color: white;
+  --macao-primary-color: #2aa198;
+  --macao-secondary-color: #268bd2;
 
   // To edit HUGO theme colors see macao/themes/macao-hugo-theme/assets/themes/_tetras.scss
+  // To edit SurveyJs colors see TODO create custom theme for SurveyJs
 }
 
 // ***********************************
-// Gloabl
+// Global
 // ***********************************
-
-#sv-nav-complete {
-  display: none;
+.btn-play{
+  cursor: pointer;
+  background-color: var(--macao-primary-color);
+  border-radius: 5px;
+  border: none;
+  padding: 5px 10px;
 }
 
 p#gapfill-container {
@@ -41,7 +46,6 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
 }
 
 #correct-indic {
-  //border: 2px solid var(--accent-quiz);
   border-radius: 8px;
   padding: 16px;
 
@@ -77,8 +81,17 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
 // ***********************************
 // General look and feel
 // ***********************************
+.book-page > article{
+  background-color: var(--secondary-background-color);
+  border-radius: 15px;
+}
 .book-page > article {
-  background-color: white;
   padding: 16px;
-  border-radius: 20px;
+  margin-top: 16px;
+}
+
+.book-search {
+  border-radius: 10px;
+  padding: 0px 5px;
+  background-color: var(--secondary-background-color);
 }
diff --git a/macao/assets/custom.js b/macao/assets/custom.js
index 476925ac52c915f24a30fc9773bed257a288e639..2e7e51fe9f7d2c99889a21fedc7624718aa0549a 100644
--- a/macao/assets/custom.js
+++ b/macao/assets/custom.js
@@ -2,7 +2,7 @@ console.log('Custom JS loaded');
 $(document).ready(function() {
     console.log('Custom JS executed');
     // Add specific classes to play buttons
-    $('button:contains("Play")').html('<i class="fa-solid fa-play"></i>');
+    $('button:contains("Play")').html('<i class="fa-solid fa-play"></i> Écouter').addClass('btn-play').prop('title','Écouter');
 
     // Add Title on top of the page
     $('.book-header').show();
diff --git a/macao/themes/macao-hugo-theme b/macao/themes/macao-hugo-theme
index b4bd21625c8a5d0a1d3a2c1aaafb10102b262578..37c5cd01ed787d99267a8b09eb1f942649df09b8 160000
--- a/macao/themes/macao-hugo-theme
+++ b/macao/themes/macao-hugo-theme
@@ -1 +1 @@
-Subproject commit b4bd21625c8a5d0a1d3a2c1aaafb10102b262578
+Subproject commit 37c5cd01ed787d99267a8b09eb1f942649df09b8