diff --git a/R/app_ui.R b/R/app_ui.R
index 02905db..f9aa4cd 100644
--- a/R/app_ui.R
+++ b/R/app_ui.R
@@ -144,20 +144,6 @@ app_ui <- function(request) {
       ),
       dashboardBody(
         disconnectMessage(), #Adds generic error message for any error if not already accounted for
-        tags$style(
-          HTML(
-            ".main-footer {
-            background-color: white;
-            color: grey;
-            height: 65px;
-            padding-top: 5px;
-            padding-bottom: 5px;
-          }
-          .main-footer a {
-            color: grey;
-          }"
-          )
-        ),
         tabItems(
           tabItem(
             tabName = "welcome", mod_Home_ui("Home_1")
@@ -268,8 +254,27 @@ golem_add_external_resources <- function() {
     bundle_resources(
       path = app_sys("app/www"),
       app_title = "Breedverse"
-    )
+    ),
     # Add here other external resources
     # for example, you can add shinyalert::useShinyalert()
+    tags$style(HTML("
+      /* Ensure box collapse/expand buttons are always on top */
+      .card-tools { position: relative; z-index: 10; }
+      /* Make collapse/expand icons visible on white box headers */
+      .card-tools .btn-tool { color: #495057 !important; }
+      .card-tools .btn-tool:hover { color: #212529 !important; }
+    ")),
+    tags$script(HTML("
+      $(document).ready(function() {
+        // On page load: mirror active class from <li> onto <a> for CSS targeting
+        $('#cnv_1-sample_select_tabs li.active > a').addClass('active');
+
+        // After each tab switch (content already swapped): sync active on <a> only
+        $(document).on('shown.bs.tab', '#cnv_1-sample_select_tabs a[data-toggle=\"tab\"]', function(e) {
+          $('#cnv_1-sample_select_tabs a[data-toggle=\"tab\"]').removeClass('active');
+          $(e.target).addClass('active');
+        });
+      });
+    "))
   )
 }
diff --git a/inst/app/www/custom.css b/inst/app/www/custom.css
new file mode 100644
index 0000000..ea177d5
--- /dev/null
+++ b/inst/app/www/custom.css
@@ -0,0 +1,51 @@
+/* ── Select Samples tabsetPanel (By Sample / By Family) */
+
+/* inactive tab - grey background */
+#cnv_1-sample_select_tabs > li > a:not(.active) {
+  padding: 7px 22px !important;
+  margin-right: 6px !important;
+  background-color: #e9ecef !important;
+  border: 1px solid #dee2e6 !important;
+  border-bottom: none !important;
+  border-radius: 4px 4px 0 0 !important;
+  font-weight: 500 !important;
+  color: #495057 !important;
+}
+
+/* active tab */
+#cnv_1-sample_select_tabs > li > a.active {
+  padding: 7px 22px !important;
+  margin-right: 6px !important;
+  background-color: #ffffff !important;
+  border: 1px solid #dee2e6 !important;
+  border-bottom: 1px solid #ffffff !important;
+  border-radius: 4px 4px 0 0 !important;
+  font-weight: 600 !important;
+  color: #007bff !important;
+}
+
+/* hover on inactive tab */
+#cnv_1-sample_select_tabs > li > a:not(.active):hover {
+  background-color: #d6d8db !important;
+  color: #343a40 !important;
+}
+
+/* ── Ensure box collapse/expand buttons are always visible ── */
+.card-tools {
+  position: relative;
+  z-index: 10;
+  color: black;
+}
+
+/* ── Dashboard footer ── */
+.main-footer {
+  background-color: white;
+  color: grey;
+  height: 65px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.main-footer a {
+  color: grey;
+}