diff --git a/search-app/resources/templates/collection-base.html b/search-app/resources/templates/collection-base.html
index 065889f100..1e42392340 100644
--- a/search-app/resources/templates/collection-base.html
+++ b/search-app/resources/templates/collection-base.html
@@ -11,6 +11,27 @@
 <div id="metadata-preview">
   <p>Fetching Collection...</p>
 </div>
+<!-- TODO we need to update a new version of EUI compliant with bootstrap-5 fix styling in the meantime -->
+<style>
+  .btn-sm  {
+    color: #fff !important;
+  }
+
+  h5 { 
+    font-weight: bold;
+    font-size: 1rem;
+  }
+
+  h4 { 
+    font-weight: bold;
+    font-size: 1.25rem;
+    color: inherit;
+  }
+
+  table, td, th {
+    border-color: #dee2e6 !important;
+  }
+</style>
 {% endblock %}
 
 {% block body-end %}
diff --git a/search-app/resources/templates/service-base.html b/search-app/resources/templates/service-base.html
index 6837e03e49..7e59e4dc71 100644
--- a/search-app/resources/templates/service-base.html
+++ b/search-app/resources/templates/service-base.html
@@ -11,6 +11,22 @@
 <div id="metadata-preview">
   <p>Fetching Service...</p>
 </div>
+  <!-- TODO we need to update a new version of EUI compliant with bootstrap-5 fix styling in the meantime -->
+  <style>
+   h5 { 
+      font-weight: bold;
+      font-size: 1rem;
+    }
+  
+    h4 { 
+      font-weight: bold;
+      font-size: 1.25rem;
+      color: inherit;
+    }
+    table, td, th {
+      border-color: #dee2e6 !important;
+    }
+  </style>
 {% endblock %}
 
 {% block body-end %}
diff --git a/search-app/resources/templates/tool-base.html b/search-app/resources/templates/tool-base.html
index 79a46ab7e5..8990676444 100644
--- a/search-app/resources/templates/tool-base.html
+++ b/search-app/resources/templates/tool-base.html
@@ -11,6 +11,19 @@
 <div id="metadata-preview">
   <p>Fetching Tool...</p>
 </div>
+<!-- TODO we need to update a new version of EUI compliant with bootstrap-5 fix styling in the meantime -->
+<style>
+  h5 { 
+     font-weight: bold;
+     font-size: 1rem;
+   }
+ 
+   h4 { 
+     font-weight: bold;
+     font-size: 1.25rem;
+     color: inherit;
+   }
+ </style>
 {% endblock %}
 
 {% block body-end %}
diff --git a/search-app/resources/templates/variable-base.html b/search-app/resources/templates/variable-base.html
index 95bf90921b..0b2556ce44 100644
--- a/search-app/resources/templates/variable-base.html
+++ b/search-app/resources/templates/variable-base.html
@@ -11,6 +11,23 @@
 <div id="metadata-preview">
   <p>Fetching Variable...</p>
 </div>
+<!-- TODO we need to update a new version of EUI compliant with bootstrap-5 fix styling in the meantime -->
+<style>
+  h5 { 
+      font-weight: bold;
+      font-size: 1rem;
+  }
+
+  h4 { 
+    font-weight: bold;
+    font-size: 1.25rem;
+    color: inherit;
+  }
+
+  table, td, th {
+      border-color: #dee2e6 !important;
+  }
+</style>
 {% endblock %}
 
 {% block body-end %}