diff --git a/gui/preload-chat.js b/gui/preload-chat.js
index 5359dd8a..c57e8508 100644
--- a/gui/preload-chat.js
+++ b/gui/preload-chat.js
@@ -1400,14 +1400,13 @@ update_chat = function (obj) {
              <div class="d-flex align-items-center" style="margin-left: auto;"> <!-- max-width: 75%;  -->
 
                     <div class="mt-3 rounded-3 mb-0" style="max-width: 75%;" id="msg-${obj._id}">
-                    <!--<p class="font-monospace text-small mb-0 text-muted text-break">${timestamp}</p>-->
-                    <div class="card border-light bg-light" id="msg-${obj._id}">
+                    <div class="card border-light bg-body-tertiary" id="msg-${obj._id}">
                       ${fileheader}
 
                       <div class="card-body rounded-3 p-0">
                         <p class="card-text p-2 mb-0 text-break text-wrap">${message_html}</p>
                         <p class="text-right mb-0 p-1 text-white" style="text-align: left; font-size : 0.9rem">
-                            <span class="badge bg-light text-muted">${timestamp}</span>
+                            <span class="badge bg-body-tertiary text-muted">${timestamp}</span>
 
                         </p>
 
@@ -1435,11 +1434,11 @@ update_chat = function (obj) {
              <div class="d-flex align-items-center" style="margin-left: auto;"> <!-- max-width: 75%;  -->
                     <div class="mt-3 rounded-3 mb-0" style="max-width: 75%;" id="msg-${obj._id}">
                     <!--<p class="font-monospace text-small mb-0 text-muted text-break">${timestamp}</p>-->
-                    <div class="card border-light bg-light" id="msg-${obj._id}">
+                    <div class="card border-light bg-body-tertiary" id="msg-${obj._id}">
                       <div class="card-body rounded-3 p-0">
                         <p class="card-text p-2 mb-0 text-break text-wrap">${message_html}</p>
                         <p class="text-right mb-0 p-1 text-white" style="text-align: left; font-size : 0.9rem">
-                            <span class="badge bg-light text-muted">${timestamp}</span>
+                            <span class="badge bg-body-tertiary text-muted">${timestamp}</span>
 
                         </p>
 
diff --git a/gui/src/index.html b/gui/src/index.html
index 6b597849..580e35b7 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -40,8 +40,8 @@
 
 <div class="container-fluid">
     <div class="row ">
-        <div class="col-sm-auto bg-light border-end">
-            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
+        <div class="col-sm-auto bg-body-tertiary border-end">
+            <div class="d-flex flex-sm-column flex-row flex-nowrap align-items-center sticky-top">
 
                   <div class="list-group" id="list-tab" role="tablist" style="margin-top: 100px">
                     <a class="list-group-item list-group-item-action active" id="list-tnc-list" data-bs-toggle="list" href="#list-tnc" role="tab" aria-controls="list-tnc"><i class="bi bi-house-door-fill h3"></i></a>
@@ -2167,7 +2167,7 @@
       </div>
       <div class="tab-pane fade" id="list-logger" role="tabpanel" aria-labelledby="list-logger-list">
         <div class="container">
-              <nav class="navbar fixed-top bg-light border-bottom" style="margin-left: 87px">
+              <nav class="navbar fixed-top bg-body-tertiary border-bottom" style="margin-left: 87px">
       <div class="container-fluid">
         <input
           type="checkbox"