diff --git a/app/callbacks.py b/app/callbacks.py
index 91899f1..52338cd 100644
--- a/app/callbacks.py
+++ b/app/callbacks.py
@@ -110,19 +110,21 @@ def process_bgc_class(bgc_class: tuple[str, ...] | None) -> list[str]:
 
         for gcf in gcfs:
             gcf_bgc_classes = [cls for bgc in gcf.bgcs for cls in bgc_to_class[bgc.id]]
-            bgc_ids = [bgc.id for bgc in gcf.bgcs]
-            bgc_smiles = [
-                bgc.smiles[0] if bgc.smiles and bgc.smiles[0] is not None else "N/A"
+            bgc_data = [
+                (bgc.id, bgc.smiles[0] if bgc.smiles and bgc.smiles[0] is not None else "N/A")
                 for bgc in gcf.bgcs
             ]
-            strains = [str(gcf.strains)]
+            bgc_data.sort(key=lambda x: x[0])
+            bgc_ids, bgc_smiles = zip(*bgc_data)
+            strains = [s.id for s in gcf.strains._strains]
+            strains.sort()
             processed_data["gcf_data"].append(
                 {
                     "GCF ID": gcf.id,
                     "# BGCs": len(gcf.bgcs),
                     "BGC Classes": list(set(gcf_bgc_classes)),  # Using set to get unique classes
-                    "BGC IDs": bgc_ids,
-                    "BGC smiles": bgc_smiles,
+                    "BGC IDs": list(bgc_ids),
+                    "BGC smiles": list(bgc_smiles),
                     "strains": strains,
                 }
             )
diff --git a/app/layouts.py b/app/layouts.py
index 0ae4cb9..394cee9 100644
--- a/app/layouts.py
+++ b/app/layouts.py
@@ -179,7 +179,16 @@
                     css=[
                         {
                             "selector": ".dash-table-tooltip",
-                            "rule": "background-color: white; font-family: monospace; max-width: none !important; white-space: pre-wrap; padding: 5px;",
+                            "rule": """
+                                background-color: #ffd8cc;
+                                font-family: monospace;
+                                font-size: 12px;
+                                max-width: none !important;
+                                white-space: pre-wrap;
+                                padding: 8px;
+                                border: 1px solid #FF6E42;
+                                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+                            """,
                         }
                     ],
                     tooltip={"type": "markdown"},