diff --git a/ecosystem-explorer/DESIGN.md b/ecosystem-explorer/DESIGN.md
index 4a942c4..0ffabfc 100644
--- a/ecosystem-explorer/DESIGN.md
+++ b/ecosystem-explorer/DESIGN.md
@@ -68,6 +68,7 @@ All colors are defined using HSL values in `src/themes.ts`. They are applied via
 --color-foreground: 210 45% 99%; /* Bright white with blue hint */
 --color-card: 232 35% 19%; /* Card background */
 --color-card-secondary: 232 32% 23%; /* Card hover state */
+--color-muted: 232 30% 17%; /* Darker background for code/badges */
 --color-muted-foreground: 220 22% 65%; /* Muted text */
 --color-border: 232 28% 26%; /* Borders */
 ```
@@ -93,6 +94,7 @@ All colors are defined using HSL values in `src/themes.ts`. They are applied via
 * `background` - Page base
 * `card` - Elevated surfaces (cards, panels)
 * `card-secondary` - Hover states and nested cards
+* `muted` - Darker backgrounds for inline code, type badges, and subtle UI elements
 * `border` - Dividers and outlines
 
 #### Text Hierarchy
@@ -120,8 +122,8 @@ Shadows establish elevation and focus:
 Glows create ambient lighting and highlight interactive elements:
 
 ```css
---glow-primary: 0 0 40px hsl(var(--color-primary) / 0.15);
---glow-secondary: 0 0 40px hsl(var(--color-secondary) / 0.15);
+--glow-primary: 0 0 40px hsl(var(--primary-hsl) / 0.15);
+--glow-secondary: 0 0 40px hsl(var(--secondary-hsl) / 0.15);
 ```
 
 **Usage patterns:**
@@ -170,7 +172,7 @@ Standard card pattern for elevated content:
 **Hover states:**
 
 * Transition to `bg-card-secondary`
-* Add `shadow-[0_0_20px_hsl(var(--color-primary)/0.1)]`
+* Add `shadow-[0_0_20px_hsl(var(--primary-hsl)/0.1)]`
 * Slight scale animation: `hover:scale-[1.02]`
 
 ### Buttons
@@ -202,6 +204,110 @@ Three button variants:
 </button>
 ```
 
+### Type Badges
+
+Small badges used to display types, categories, or status indicators:
+
+```tsx
+<span className="inline-block w-fit rounded bg-muted/50 px-2 py-1 text-xs font-bold text-foreground/70">
+  {type}
+</span>
+```
+
+**Usage:**
+* Attribute types in tables (string, int, boolean, etc.)
+* Metric types
+* Span kinds
+* Other categorical indicators
+
+**Styling:**
+* `bg-muted/50` - Semi-transparent dark background for subtle contrast
+* `text-foreground/70` - Slightly dimmed text for readability on dark background
+* `text-xs font-bold` - Small, bold text for compact display
+* `rounded px-2 py-1` - Consistent padding and border radius
+
+**Color variants:**
+For semantic meaning with glowing effects, use GlowBadge component:
+* `variant="success"` - Green for metrics
+* `variant="info"` - Blue for spans
+* `variant="warning"` - Yellow for warnings
+* `variant="error"` - Red for errors
+
+### Inline Code Elements
+
+Code snippets and technical values displayed inline:
+
+```tsx
+<code className="rounded bg-muted px-2 py-1 text-sm text-foreground/80">
+  {value}
+</code>
+```
+
+**Usage:**
+* Unit values (ms, bytes, etc.)
+* Configuration keys
+* API endpoints
+* Version numbers
+* Short code snippets
+
+**Styling:**
+* `bg-muted` - Full opacity dark background for strong contrast
+* `text-foreground/80` - Slightly dimmed bright text for comfortable reading
+* `text-sm` - Readable size for technical content
+* `rounded px-2 py-1` - Consistent padding matching type badges
+
+**Guidelines:**
+* Add `font-mono` class for actual code readability when needed
+* Use `break-all` for long technical strings that need to wrap
+* Maintain consistent padding (`px-2 py-1`) across all inline code elements
+
+### Striped Tables
+
+Alternating row backgrounds for improved readability in data tables:
+
+```tsx
+<table className="w-full border-collapse">
+  <tbody>
+    {items.map((item, index) => (
+      <tr
+        key={item.id}
+        className={index % 2 === 1 ? "bg-muted/40" : ""}
+      >
+        <td>{item.content}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+```
+
+**Pattern:**
+* Apply `bg-muted/40` to odd rows (index % 2 === 1)
+* Keep even rows with default transparent background
+* Use 40% opacity for visible striping that improves readability
+* Combine with borders for clear table structure
+
+**Complete table example:**
+```tsx
+<div className="overflow-hidden rounded-lg border border-border/30">
+  <table className="w-full border-collapse">
+    <thead>
+      <tr className="bg-white/5">
+        <th className="p-3 text-left text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+          Column
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {items.map((item, index) => (
+        <tr key={item.id} className={index % 2 === 1 ? "bg-muted/40" : ""}>
+          <td className="p-4">{item.content}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
+```
+
 ### Sections
 
 Page sections with consistent spacing:
@@ -324,8 +430,8 @@ Decorative grid patterns for visual texture:
 
 ```css
 background-image:
-  linear-gradient(hsl(var(--color-border)) 1px, transparent 1px),
-  linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px);
+  linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px),
+  linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px);
 background-size: 20px 20px;
 ```
 
@@ -333,8 +439,8 @@ background-size: 20px 20px;
 
 ```css
 background-image:
-  linear-gradient(hsl(var(--color-border)) 1px, transparent 1px),
-  linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px);
+  linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px),
+  linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px);
 background-size: 40px 40px;
 ```
 
diff --git a/ecosystem-explorer/src/components/icons/compass.tsx b/ecosystem-explorer/src/components/icons/compass.tsx
index f1d2137..6ba358a 100644
--- a/ecosystem-explorer/src/components/icons/compass.tsx
+++ b/ecosystem-explorer/src/components/icons/compass.tsx
@@ -86,7 +86,7 @@ export function Compass({ className }: { className?: string }) {
         className="w-full h-full"
         style={{
           filter:
-            "drop-shadow(0 0 8px hsl(var(--color-primary) / 0.4)) drop-shadow(0 0 16px hsl(var(--color-primary) / 0.2))",
+            "drop-shadow(0 0 8px hsl(var(--primary-hsl) / 0.4)) drop-shadow(0 0 16px hsl(var(--primary-hsl) / 0.2))",
         }}
       >
         {/* Outer ring */}
@@ -95,7 +95,7 @@ export function Compass({ className }: { className?: string }) {
           cy="100"
           r="95"
           fill="none"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="1.5"
           opacity="0.4"
         />
@@ -104,7 +104,7 @@ export function Compass({ className }: { className?: string }) {
           cy="100"
           r="90"
           fill="none"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="0.5"
           opacity="0.2"
         />
@@ -122,7 +122,7 @@ export function Compass({ className }: { className?: string }) {
               y1={100 - innerR * Math.cos(angle)}
               x2={100 + outerR * Math.sin(angle)}
               y2={100 - outerR * Math.cos(angle)}
-              stroke="hsl(var(--color-primary))"
+              stroke="hsl(var(--primary-hsl))"
               strokeWidth={isMajor ? 1.5 : 0.5}
               opacity={isMajor ? 0.7 : 0.3}
             />
@@ -140,7 +140,7 @@ export function Compass({ className }: { className?: string }) {
               y={100 - r * Math.cos(angle)}
               textAnchor="middle"
               dominantBaseline="middle"
-              fill="hsl(var(--color-primary))"
+              fill="hsl(var(--primary-hsl))"
               className="font-mono text-sm font-bold"
             >
               {dir}
@@ -151,18 +151,18 @@ export function Compass({ className }: { className?: string }) {
         {/* Rotating needle group */}
         <g ref={needleGroupRef}>
           {/* North needle */}
-          <polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--color-primary))" />
+          <polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--primary-hsl))" />
           {/* South needle */}
           <polygon
             points="100,175 95,100 100,110 105,100"
-            fill="hsl(var(--color-primary))"
+            fill="hsl(var(--primary-hsl))"
             opacity="0.4"
           />
         </g>
 
         {/* Center circle */}
-        <circle cx="100" cy="100" r="8" fill="hsl(var(--color-secondary))" opacity="0.6" />
-        <circle cx="100" cy="100" r="4" fill="hsl(var(--color-primary))" />
+        <circle cx="100" cy="100" r="8" fill="hsl(var(--secondary-hsl))" opacity="0.6" />
+        <circle cx="100" cy="100" r="4" fill="hsl(var(--primary-hsl))" />
 
         {/* Inner decorative circles */}
         <circle
@@ -170,7 +170,7 @@ export function Compass({ className }: { className?: string }) {
           cy="100"
           r="50"
           fill="none"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="0.5"
           opacity="0.2"
           strokeDasharray="4 4"
diff --git a/ecosystem-explorer/src/components/icons/configuration-icon.tsx b/ecosystem-explorer/src/components/icons/configuration-icon.tsx
index 6cce62f..e389b20 100644
--- a/ecosystem-explorer/src/components/icons/configuration-icon.tsx
+++ b/ecosystem-explorer/src/components/icons/configuration-icon.tsx
@@ -28,7 +28,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
         width="120"
         height="120"
         rx="8"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary-hsl))"
         opacity="0.08"
       />
       <rect
@@ -38,7 +38,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
         height="120"
         rx="8"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
 
@@ -50,7 +50,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="70"
           x2="135"
           y2="70"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.3"
         />
@@ -60,12 +60,12 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="70"
           x2="95"
           y2="70"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.8"
         />
         {/* Knob */}
-        <circle cx="95" cy="70" r="8" fill="hsl(var(--color-primary))" />
+        <circle cx="95" cy="70" r="8" fill="hsl(var(--primary-hsl))" />
         <circle cx="95" cy="70" r="5" fill="white" opacity="0.3" />
       </g>
 
@@ -76,7 +76,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="100"
           x2="135"
           y2="100"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.3"
         />
@@ -85,11 +85,11 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="100"
           x2="120"
           y2="100"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.8"
         />
-        <circle cx="120" cy="100" r="8" fill="hsl(var(--color-primary))" />
+        <circle cx="120" cy="100" r="8" fill="hsl(var(--primary-hsl))" />
         <circle cx="120" cy="100" r="5" fill="white" opacity="0.3" />
       </g>
 
@@ -100,7 +100,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="130"
           x2="135"
           y2="130"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.3"
         />
@@ -109,30 +109,23 @@ export function ConfigurationIcon({ className }: { className?: string }) {
           y1="130"
           x2="80"
           y2="130"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="3"
           opacity="0.8"
         />
-        <circle cx="80" cy="130" r="8" fill="hsl(var(--color-primary))" />
+        <circle cx="80" cy="130" r="8" fill="hsl(var(--primary-hsl))" />
         <circle cx="80" cy="130" r="5" fill="white" opacity="0.3" />
       </g>
 
       {/* Gear icon accent in top-right */}
       <g transform="translate(145, 55)">
-        <circle
-          cx="0"
-          cy="0"
-          r="10"
-          fill="none"
-          stroke="hsl(var(--color-primary))"
-          strokeWidth="2"
-        />
-        <circle cx="0" cy="0" r="4" fill="hsl(var(--color-primary))" opacity="0.6" />
+        <circle cx="0" cy="0" r="10" fill="none" stroke="hsl(var(--primary-hsl))" strokeWidth="2" />
+        <circle cx="0" cy="0" r="4" fill="hsl(var(--primary-hsl))" opacity="0.6" />
         {/* Gear teeth */}
-        <rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--color-primary))" />
-        <rect x="-2" y="8" width="4" height="4" fill="hsl(var(--color-primary))" />
-        <rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--color-primary))" />
-        <rect x="8" y="-2" width="4" height="4" fill="hsl(var(--color-primary))" />
+        <rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--primary-hsl))" />
+        <rect x="-2" y="8" width="4" height="4" fill="hsl(var(--primary-hsl))" />
+        <rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
+        <rect x="8" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
       </g>
     </svg>
   );
diff --git a/ecosystem-explorer/src/components/icons/java-icon.tsx b/ecosystem-explorer/src/components/icons/java-icon.tsx
index b1b2470..dc2d2ad 100644
--- a/ecosystem-explorer/src/components/icons/java-icon.tsx
+++ b/ecosystem-explorer/src/components/icons/java-icon.tsx
@@ -25,7 +25,7 @@ export function JavaIcon({ className }: { className?: string }) {
       <path
         d="M 60 80 L 50 160 Q 50 170 60 170 L 140 170 Q 150 170 150 160 L 140 80 Z"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="4"
       />
 
@@ -39,7 +39,7 @@ export function JavaIcon({ className }: { className?: string }) {
       {/* faint liquid tint behind the bars */}
       <path
         d="M 65 90 L 57 155 Q 57 162 63 162 L 137 162 Q 143 162 143 155 L 135 90 Z"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary-hsl))"
         opacity="0.10"
       />
 
@@ -51,7 +51,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y1="158"
           x2="138"
           y2="158"
-          stroke="hsl(var(--color-primary))"
+          stroke="hsl(var(--primary-hsl))"
           strokeWidth="2"
           opacity="0.25"
         />
@@ -67,7 +67,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y="132"
           width="10"
           height="26"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary-hsl))"
           opacity="0.35"
           rx="2"
         />
@@ -76,7 +76,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y="120"
           width="10"
           height="38"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary-hsl))"
           opacity="0.45"
           rx="2"
         />
@@ -85,7 +85,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y="140"
           width="10"
           height="18"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary-hsl))"
           opacity="0.30"
           rx="2"
         />
@@ -94,7 +94,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y="112"
           width="10"
           height="46"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary-hsl))"
           opacity="0.55"
           rx="2"
         />
@@ -103,7 +103,7 @@ export function JavaIcon({ className }: { className?: string }) {
           y="126"
           width="10"
           height="32"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary-hsl))"
           opacity="0.40"
           rx="2"
         />
@@ -116,7 +116,7 @@ export function JavaIcon({ className }: { className?: string }) {
       <path
         d="M 150 100 Q 170 100 170 120 Q 170 140 150 140"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="4"
       />
 
@@ -124,7 +124,7 @@ export function JavaIcon({ className }: { className?: string }) {
       <path
         d="M 70 70 Q 65 50 70 30"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="4"
         strokeLinecap="round"
         opacity="0.7"
@@ -132,7 +132,7 @@ export function JavaIcon({ className }: { className?: string }) {
       <path
         d="M 100 75 Q 95 55 100 35"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="4"
         strokeLinecap="round"
         opacity="0.7"
@@ -140,7 +140,7 @@ export function JavaIcon({ className }: { className?: string }) {
       <path
         d="M 130 70 Q 125 50 130 30"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="4"
         strokeLinecap="round"
         opacity="0.7"
diff --git a/ecosystem-explorer/src/components/icons/java-instrumentation-icon.tsx b/ecosystem-explorer/src/components/icons/java-instrumentation-icon.tsx
index 0d6cb56..4a80b19 100644
--- a/ecosystem-explorer/src/components/icons/java-instrumentation-icon.tsx
+++ b/ecosystem-explorer/src/components/icons/java-instrumentation-icon.tsx
@@ -22,16 +22,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
       className={className}
     >
       {/* Central hub node */}
-      <circle cx="100" cy="100" r="20" fill="hsl(var(--color-primary))" opacity="0.2" />
+      <circle cx="100" cy="100" r="20" fill="hsl(var(--primary-hsl))" opacity="0.2" />
       <circle
         cx="100"
         cy="100"
         r="20"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="100" cy="100" r="8" fill="hsl(var(--color-primary))" opacity="0.8" />
+      <circle cx="100" cy="100" r="8" fill="hsl(var(--primary-hsl))" opacity="0.8" />
 
       {/* Top node */}
       <circle
@@ -39,16 +39,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="40"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="100" cy="40" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="100" cy="40" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="100"
         y1="55"
         x2="100"
         y2="80"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -59,16 +59,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="65"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="152" cy="65" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="152" cy="65" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="142"
         y1="75"
         x2="115"
         y2="92"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -79,16 +79,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="100"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="160" cy="100" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="160" cy="100" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="145"
         y1="100"
         x2="120"
         y2="100"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -99,16 +99,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="135"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="152" cy="135" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="152" cy="135" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="142"
         y1="125"
         x2="115"
         y2="108"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -119,16 +119,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="160"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="100" cy="160" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="100" cy="160" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="100"
         y1="145"
         x2="100"
         y2="120"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -139,16 +139,16 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="135"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="48" cy="135" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="48" cy="135" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="58"
         y1="125"
         x2="85"
         y2="108"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
@@ -159,36 +159,29 @@ export function JavaInstrumentationIcon({ className }: { className?: string }) {
         cy="100"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="40" cy="100" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="40" cy="100" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="55"
         y1="100"
         x2="80"
         y2="100"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
 
       {/* Top-left node */}
-      <circle
-        cx="48"
-        cy="65"
-        r="15"
-        fill="none"
-        stroke="hsl(var(--color-primary))"
-        strokeWidth="3"
-      />
-      <circle cx="48" cy="65" r="6" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="48" cy="65" r="15" fill="none" stroke="hsl(var(--primary-hsl))" strokeWidth="3" />
+      <circle cx="48" cy="65" r="6" fill="hsl(var(--primary-hsl))" opacity="0.6" />
       <line
         x1="58"
         y1="75"
         x2="85"
         y2="92"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="2.5"
         strokeDasharray="4 3"
       />
diff --git a/ecosystem-explorer/src/components/icons/otel-logo.tsx b/ecosystem-explorer/src/components/icons/otel-logo.tsx
index 3385ba1..c7a51c9 100644
--- a/ecosystem-explorer/src/components/icons/otel-logo.tsx
+++ b/ecosystem-explorer/src/components/icons/otel-logo.tsx
@@ -24,35 +24,35 @@ export function OtelLogo({ className }: { className?: string }) {
     >
       {/* Top-right circle with inner circle */}
       <path
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary-hsl))"
         d="M67.648 69.797c-5.246 5.25-5.246 13.758 0 19.008 5.25 5.246 13.758 5.246 19.004 0 5.25-5.25 5.25-13.758 0-19.008-5.246-5.246-13.754-5.246-19.004 0Zm14.207 14.219a6.649 6.649 0 0 1-9.41 0 6.65 6.65 0 0 1 0-9.407 6.649 6.649 0 0 1 9.41 0c2.598 2.586 2.598 6.809 0 9.407Z"
         opacity="0.9"
       />
 
       {/* Top-right diagonal section */}
       <path
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary-hsl))"
         d="M86.43 3.672l-8.235 8.234a4.17 4.17 0 0 0 0 5.875l32.149 32.149a4.17 4.17 0 0 0 5.875 0l8.234-8.235c1.61-1.61 1.61-4.261 0-5.87L92.29 3.671a4.159 4.159 0 0 0-5.86 0Z"
         opacity="0.9"
       />
 
       {/* Bottom-left small element */}
       <path
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary-hsl))"
         d="M28.738 108.895a3.763 3.763 0 0 0 0-5.31l-4.183-4.187a3.768 3.768 0 0 0-5.313 0l-8.644 8.649-.016.012-2.371-2.375c-1.313-1.313-3.45-1.313-4.75 0-1.313 1.312-1.313 3.449 0 4.75l14.246 14.242a3.353 3.353 0 0 0 4.746 0c1.3-1.313 1.313-3.45 0-4.746l-2.375-2.375.016-.012Z"
         opacity="0.9"
       />
 
       {/* Top-left angular shape */}
       <path
-        fill="hsl(var(--color-secondary))"
+        fill="hsl(var(--secondary-hsl))"
         d="M72.297 27.313 54.004 45.605c-1.625 1.625-1.625 4.301 0 5.926L65.3 62.824c7.984-5.746 19.18-5.035 26.363 2.153l9.148-9.149c1.622-1.625 1.622-4.297 0-5.922L78.22 27.313a4.185 4.185 0 0 0-5.922 0Z"
         opacity="0.8"
       />
 
       {/* Bottom angular shape */}
       <path
-        fill="hsl(var(--color-secondary))"
+        fill="hsl(var(--secondary-hsl))"
         d="M60.55 67.585l-6.672-6.672c-1.563-1.562-4.125-1.562-5.684 0l-23.53 23.54a4.036 4.036 0 0 0 0 5.687l13.331 13.332a4.036 4.036 0 0 0 5.688 0l15.132-15.157c-3.199-6.609-2.625-14.593 1.735-20.73Z"
         opacity="0.8"
       />
diff --git a/ecosystem-explorer/src/components/icons/pipeline-icon.tsx b/ecosystem-explorer/src/components/icons/pipeline-icon.tsx
index 7f45dba..5ba9427 100644
--- a/ecosystem-explorer/src/components/icons/pipeline-icon.tsx
+++ b/ecosystem-explorer/src/components/icons/pipeline-icon.tsx
@@ -22,38 +22,31 @@ export function PipelineIcon({ className }: { className?: string }) {
         cy="100"
         r="15"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="30" cy="100" r="8" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <circle cx="30" cy="100" r="8" fill="hsl(var(--primary-hsl))" opacity="0.6" />
 
       {/* Pipeline from input to processor */}
-      <line x1="45" y1="100" x2="70" y2="100" stroke="hsl(var(--color-primary))" strokeWidth="3" />
+      <line x1="45" y1="100" x2="70" y2="100" stroke="hsl(var(--primary-hsl))" strokeWidth="3" />
 
       {/* Arrow 1 */}
-      <polygon points="70,100 65,95 65,105" fill="hsl(var(--color-primary))" />
+      <polygon points="70,100 65,95 65,105" fill="hsl(var(--primary-hsl))" />
 
       {/* Processor node (hexagon) */}
       <polygon
         points="85,85 115,85 125,100 115,115 85,115 75,100"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <circle cx="100" cy="100" r="5" fill="hsl(var(--color-primary))" opacity="0.8" />
+      <circle cx="100" cy="100" r="5" fill="hsl(var(--primary-hsl))" opacity="0.8" />
 
       {/* Pipeline from processor to output */}
-      <line
-        x1="125"
-        y1="100"
-        x2="150"
-        y2="100"
-        stroke="hsl(var(--color-primary))"
-        strokeWidth="3"
-      />
+      <line x1="125" y1="100" x2="150" y2="100" stroke="hsl(var(--primary-hsl))" strokeWidth="3" />
 
       {/* Arrow 2 */}
-      <polygon points="150,100 145,95 145,105" fill="hsl(var(--color-primary))" />
+      <polygon points="150,100 145,95 145,105" fill="hsl(var(--primary-hsl))" />
 
       {/* Output node (square) */}
       <rect
@@ -62,10 +55,10 @@ export function PipelineIcon({ className }: { className?: string }) {
         width="30"
         height="30"
         fill="none"
-        stroke="hsl(var(--color-primary))"
+        stroke="hsl(var(--primary-hsl))"
         strokeWidth="3"
       />
-      <rect x="162" y="92" width="16" height="16" fill="hsl(var(--color-primary))" opacity="0.6" />
+      <rect x="162" y="92" width="16" height="16" fill="hsl(var(--primary-hsl))" opacity="0.6" />
     </svg>
   );
 }
diff --git a/ecosystem-explorer/src/components/ui/detail-card.tsx b/ecosystem-explorer/src/components/ui/detail-card.tsx
index 964855b..b82ecce 100644
--- a/ecosystem-explorer/src/components/ui/detail-card.tsx
+++ b/ecosystem-explorer/src/components/ui/detail-card.tsx
@@ -66,7 +66,7 @@ export function DetailCard({
           <svg viewBox="0 0 64 64" className="h-full w-full">
             <path
               d="M64 64 L64 32 L48 32 L48 48 L32 48 L32 64 Z"
-              style={{ fill: "hsl(var(--color-secondary) / 0.5)" }}
+              style={{ fill: "hsl(var(--secondary-hsl) / 0.5)" }}
             />
           </svg>
         </div>
diff --git a/ecosystem-explorer/src/components/ui/navigation-card.tsx b/ecosystem-explorer/src/components/ui/navigation-card.tsx
index 30aff19..ca2ee22 100644
--- a/ecosystem-explorer/src/components/ui/navigation-card.tsx
+++ b/ecosystem-explorer/src/components/ui/navigation-card.tsx
@@ -60,7 +60,7 @@ export function NavigationCard({ title, description, href, icon }: NavigationCar
           {/* Content on the right */}
           <div className="flex-1 min-w-0">
             <div className="mb-2 flex items-center justify-between gap-2">
-              <h3 className="text-2xl font-semibold text-[hsl(var(--color-secondary))] transition-colors group-hover:text-primary">
+              <h3 className="text-2xl font-semibold text-[hsl(var(--secondary-hsl))] transition-colors group-hover:text-primary">
                 {title}
               </h3>
               <ArrowRight className="h-5 w-5 flex-shrink-0 text-muted-foreground transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary" />
@@ -74,7 +74,7 @@ export function NavigationCard({ title, description, href, icon }: NavigationCar
           <svg viewBox="0 0 64 64" className="h-full w-full">
             <path
               d="M64 64 L64 32 L48 32 L48 48 L32 48 L32 64 Z"
-              style={{ fill: "hsl(var(--color-secondary) / 0.5)" }}
+              style={{ fill: "hsl(var(--secondary-hsl) / 0.5)" }}
             />
           </svg>
         </div>
diff --git a/ecosystem-explorer/src/components/ui/section-divider.tsx b/ecosystem-explorer/src/components/ui/section-divider.tsx
new file mode 100644
index 0000000..9e77d14
--- /dev/null
+++ b/ecosystem-explorer/src/components/ui/section-divider.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { ReactNode } from "react";
+
+interface SectionDividerProps {
+  children: ReactNode;
+}
+
+export function SectionDivider({ children }: SectionDividerProps) {
+  return (
+    <div className="my-12 flex items-center">
+      <div className="flex-1 border-b-2 border-border/30" />
+      <span className="px-8 text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground">
+        {children}
+      </span>
+      <div className="flex-1 border-b-2 border-border/30" />
+    </div>
+  );
+}
diff --git a/ecosystem-explorer/src/components/ui/section-header.tsx b/ecosystem-explorer/src/components/ui/section-header.tsx
index adcbd21..eb13188 100644
--- a/ecosystem-explorer/src/components/ui/section-header.tsx
+++ b/ecosystem-explorer/src/components/ui/section-header.tsx
@@ -26,7 +26,7 @@ export function SectionHeader({ children, className = "" }: SectionHeaderProps)
       <div
         className="h-px w-16"
         style={{
-          background: "linear-gradient(to right, transparent, hsl(var(--color-border)))",
+          background: "linear-gradient(to right, transparent, hsl(var(--border-hsl)))",
         }}
       />
       <h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
@@ -35,7 +35,7 @@ export function SectionHeader({ children, className = "" }: SectionHeaderProps)
       <div
         className="h-px w-16"
         style={{
-          background: "linear-gradient(to left, transparent, hsl(var(--color-border)))",
+          background: "linear-gradient(to left, transparent, hsl(var(--border-hsl)))",
         }}
       />
     </div>
diff --git a/ecosystem-explorer/src/components/ui/tabs.tsx b/ecosystem-explorer/src/components/ui/tabs.tsx
index 33bc795..0d1d466 100644
--- a/ecosystem-explorer/src/components/ui/tabs.tsx
+++ b/ecosystem-explorer/src/components/ui/tabs.tsx
@@ -25,7 +25,7 @@ const TabsList = forwardRef<
 >(({ className = "", ...props }, ref) => (
   <RadixTabs.List
     ref={ref}
-    className={`inline-flex h-12 items-center justify-center rounded-lg border border-border/50 bg-card/80 p-1 backdrop-blur-sm ${className}`}
+    className={`inline-flex h-12 items-center justify-center rounded-lg border border-border/50 bg-card/80 p-1 ${className}`}
     {...props}
   />
 ));
@@ -37,7 +37,7 @@ const TabsTrigger = forwardRef<
 >(({ className = "", ...props }, ref) => (
   <RadixTabs.Trigger
     ref={ref}
-    className={`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border-t-2 [border-top-color:transparent] px-4 py-2 text-sm font-medium text-muted-foreground ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:shadow-sm data-[state=active]:shadow-primary/20 data-[state=active]:font-semibold data-[state=active]:[border-top-color:hsl(var(--color-primary))] ${className}`}
+    className={`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-t-md border-t border-transparent px-6 py-3 text-sm font-medium text-muted-foreground ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-card-secondary/60 data-[state=active]:border-primary data-[state=active]:bg-card-secondary data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[0_2px_12px_-2px_hsl(var(--primary-hsl)/0.4)] ${className}`}
     {...props}
   />
 ));
diff --git a/ecosystem-explorer/src/features/home/components/explore-section.tsx b/ecosystem-explorer/src/features/home/components/explore-section.tsx
index bbe1580..eef4ad9 100644
--- a/ecosystem-explorer/src/features/home/components/explore-section.tsx
+++ b/ecosystem-explorer/src/features/home/components/explore-section.tsx
@@ -25,7 +25,7 @@ export function ExploreSection() {
         className="pointer-events-none absolute left-1/2 top-0 h-64 w-full max-w-3xl -translate-x-1/2 -translate-y-16"
         style={{
           background:
-            "radial-gradient(ellipse at center, hsl(var(--color-primary) / 0.04) 0%, transparent 80%)",
+            "radial-gradient(ellipse at center, hsl(var(--primary-hsl) / 0.04) 0%, transparent 80%)",
         }}
       />
 
diff --git a/ecosystem-explorer/src/features/home/components/hero-section.tsx b/ecosystem-explorer/src/features/home/components/hero-section.tsx
index e9a8bda..088e33e 100644
--- a/ecosystem-explorer/src/features/home/components/hero-section.tsx
+++ b/ecosystem-explorer/src/features/home/components/hero-section.tsx
@@ -23,7 +23,7 @@ export function HeroSection() {
         className="absolute inset-0"
         style={{
           background:
-            "radial-gradient(circle at center, hsl(var(--color-primary) / 0.08) 0%, hsl(var(--color-secondary) / 0.04) 30%, transparent 70%)",
+            "radial-gradient(circle at center, hsl(var(--primary-hsl) / 0.08) 0%, hsl(var(--secondary-hsl) / 0.04) 30%, transparent 70%)",
         }}
       />
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           className="h-full w-full"
           style={{
             backgroundImage:
-              "linear-gradient(hsl(var(--color-border)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px)",
+              "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
             backgroundSize: "40px 40px",
           }}
         />
@@ -45,7 +45,7 @@ export function HeroSection() {
         <div
           className="inline-flex rounded-full p-4"
           style={{
-            boxShadow: "0 0 60px hsl(var(--color-primary) / 0.2)",
+            boxShadow: "0 0 60px hsl(var(--primary-hsl) / 0.2)",
           }}
         >
           <Compass className="h-24 w-24 text-foreground md:h-32 md:w-32" />
@@ -55,7 +55,7 @@ export function HeroSection() {
           <h1 className="text-balance text-3xl font-bold leading-tight tracking-tight md:text-4xl">
             <span className="text-foreground">OpenTelemetry</span>
             <br />
-            <span className="bg-gradient-to-r from-[hsl(var(--color-secondary))] to-[hsl(var(--color-primary))] bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[hsl(var(--secondary-hsl))] to-[hsl(var(--primary-hsl))] bg-clip-text text-transparent">
               Ecosystem Explorer
             </span>
           </h1>
@@ -71,7 +71,7 @@ export function HeroSection() {
         className="pointer-events-none absolute bottom-0 left-0 right-0 h-64"
         style={{
           background:
-            "linear-gradient(to top, hsl(var(--color-background)) 0%, hsl(var(--color-background) / 0.6) 30%, transparent 100%)",
+            "linear-gradient(to top, hsl(var(--background-hsl)) 0%, hsl(var(--background-hsl) / 0.6) 30%, transparent 100%)",
         }}
       />
     </section>
diff --git a/ecosystem-explorer/src/features/java-agent/components/agent-explore-landing.tsx b/ecosystem-explorer/src/features/java-agent/components/agent-explore-landing.tsx
index ecdba0d..72ee072 100644
--- a/ecosystem-explorer/src/features/java-agent/components/agent-explore-landing.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/agent-explore-landing.tsx
@@ -20,9 +20,6 @@ import { NavigationCard } from "@/components/ui/navigation-card";
 export function AgentExploreLanding() {
   return (
     <section className="relative py-8 px-6 bg-background">
-      {/* Section divider */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-12 bg-gradient-to-b from-transparent via-primary/30 to-transparent" />
-
       <div className="max-w-6xl mx-auto">
         <div className="grid md:grid-cols-2 gap-4">
           <NavigationCard
diff --git a/ecosystem-explorer/src/features/java-agent/components/attribute-table.test.tsx b/ecosystem-explorer/src/features/java-agent/components/attribute-table.test.tsx
new file mode 100644
index 0000000..c206fb2
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/attribute-table.test.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AttributeTable } from "./attribute-table";
+import type { Attribute } from "@/types/javaagent";
+
+describe("AttributeTable", () => {
+  const mockAttributes: Attribute[] = [
+    { name: "http.method", type: "STRING" },
+    { name: "http.status_code", type: "LONG" },
+    { name: "http.response_time", type: "DOUBLE" },
+  ];
+
+  it("renders attribute table with correct structure", () => {
+    render(<AttributeTable attributes={mockAttributes} />);
+
+    const table = screen.getByRole("table", { name: "Attributes" });
+    expect(table).toBeInTheDocument();
+  });
+
+  it("renders table headers correctly", () => {
+    render(<AttributeTable attributes={mockAttributes} />);
+
+    expect(screen.getByRole("columnheader", { name: "Key" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Type" })).toBeInTheDocument();
+  });
+
+  it("renders all attributes with correct names and types", () => {
+    render(<AttributeTable attributes={mockAttributes} />);
+
+    const rows = screen.getAllByRole("row");
+    // Should have header row + 3 data rows
+    expect(rows).toHaveLength(4);
+
+    expect(screen.getByText("http.method")).toBeInTheDocument();
+    expect(screen.getByText("STRING")).toBeInTheDocument();
+
+    expect(screen.getByText("http.status_code")).toBeInTheDocument();
+    expect(screen.getByText("LONG")).toBeInTheDocument();
+
+    expect(screen.getByText("http.response_time")).toBeInTheDocument();
+    expect(screen.getByText("DOUBLE")).toBeInTheDocument();
+  });
+
+  it("returns null when attributes array is empty", () => {
+    const { container } = render(<AttributeTable attributes={[]} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders single attribute correctly", () => {
+    const singleAttribute: Attribute[] = [{ name: "db.system", type: "STRING" }];
+
+    render(<AttributeTable attributes={singleAttribute} />);
+
+    expect(screen.getByText("db.system")).toBeInTheDocument();
+    expect(screen.getByText("STRING")).toBeInTheDocument();
+  });
+
+  it("renders all attribute types correctly", () => {
+    const allTypes: Attribute[] = [
+      { name: "attr.string", type: "STRING" },
+      { name: "attr.long", type: "LONG" },
+      { name: "attr.double", type: "DOUBLE" },
+      { name: "attr.boolean", type: "BOOLEAN" },
+      { name: "attr.string_array", type: "STRING_ARRAY" },
+      { name: "attr.long_array", type: "LONG_ARRAY" },
+      { name: "attr.double_array", type: "DOUBLE_ARRAY" },
+      { name: "attr.boolean_array", type: "BOOLEAN_ARRAY" },
+    ];
+
+    render(<AttributeTable attributes={allTypes} />);
+
+    expect(screen.getByText("STRING")).toBeInTheDocument();
+    expect(screen.getByText("LONG")).toBeInTheDocument();
+    expect(screen.getByText("DOUBLE")).toBeInTheDocument();
+    expect(screen.getByText("BOOLEAN")).toBeInTheDocument();
+    expect(screen.getByText("STRING_ARRAY")).toBeInTheDocument();
+    expect(screen.getByText("LONG_ARRAY")).toBeInTheDocument();
+    expect(screen.getByText("DOUBLE_ARRAY")).toBeInTheDocument();
+    expect(screen.getByText("BOOLEAN_ARRAY")).toBeInTheDocument();
+  });
+});
diff --git a/ecosystem-explorer/src/features/java-agent/components/attribute-table.tsx b/ecosystem-explorer/src/features/java-agent/components/attribute-table.tsx
new file mode 100644
index 0000000..db08a9d
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/attribute-table.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Attribute } from "@/types/javaagent";
+
+interface AttributeTableProps {
+  attributes: Attribute[];
+}
+
+export function AttributeTable({ attributes }: AttributeTableProps) {
+  if (attributes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border/30">
+      <table aria-label="Attributes" className="w-full border-collapse">
+        <thead>
+          <tr className="bg-white/5">
+            <th
+              scope="col"
+              className="p-3 text-left text-[10px] font-bold uppercase tracking-widest text-muted-foreground"
+            >
+              Key
+            </th>
+            <th
+              scope="col"
+              className="p-3 text-left text-[10px] font-bold uppercase tracking-widest text-muted-foreground"
+            >
+              Type
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {attributes.map((attr, index) => (
+            <tr
+              key={attr.name}
+              className={`attribute-row ${index % 2 === 1 ? "bg-white/[0.03]" : ""}`}
+            >
+              <td className="p-4 font-mono text-sm md:text-[12px]">{attr.name}</td>
+              <td className="p-4">
+                <span className="inline-block w-fit rounded border border-border/30 bg-card/80 px-2 py-1 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                  {attr.type}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.test.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.test.tsx
new file mode 100644
index 0000000..ae92d8c
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.test.tsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ConfigurationSelector } from "./configuration-selector";
+import type { Telemetry } from "@/types/javaagent";
+
+describe("ConfigurationSelector", () => {
+  const mockTelemetry: Telemetry[] = [
+    {
+      when: "default",
+      metrics: [
+        {
+          name: "test.metric",
+          description: "Test metric",
+          type: "COUNTER",
+          unit: "1",
+        },
+      ],
+    },
+    {
+      when: "otel.instrumentation.http.enabled=true",
+      metrics: [
+        {
+          name: "http.metric",
+          description: "HTTP metric",
+          type: "GAUGE",
+          unit: "ms",
+        },
+      ],
+    },
+    {
+      when: "otel.instrumentation.http.enabled=false",
+      spans: [{ span_kind: "CLIENT" }],
+    },
+  ];
+
+  it("renders info banner", () => {
+    const onWhenChange = vi.fn();
+
+    render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    expect(screen.getByText("Telemetry varies by configuration")).toBeInTheDocument();
+  });
+
+  it("renders select element with label", () => {
+    const onWhenChange = vi.fn();
+
+    render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    expect(screen.getByLabelText(/configuration/i)).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+  });
+
+  it("renders all telemetry configuration options", () => {
+    const onWhenChange = vi.fn();
+
+    render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    const options = within(select).getAllByRole("option");
+
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveTextContent("Default");
+    expect(options[1]).toHaveTextContent("otel.instrumentation.http.enabled=true");
+    expect(options[2]).toHaveTextContent("otel.instrumentation.http.enabled=false");
+  });
+
+  it("displays correct selected value", () => {
+    const onWhenChange = vi.fn();
+
+    render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("default");
+  });
+
+  it("calls onWhenChange when selection changes", async () => {
+    const user = userEvent.setup();
+    const onWhenChange = vi.fn();
+
+    render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    await user.selectOptions(select, "otel.instrumentation.http.enabled=true");
+
+    expect(onWhenChange).toHaveBeenCalledTimes(1);
+    expect(onWhenChange).toHaveBeenCalledWith("otel.instrumentation.http.enabled=true");
+  });
+
+  it("renders with single configuration option", () => {
+    const onWhenChange = vi.fn();
+    const singleTelemetry: Telemetry[] = [
+      {
+        when: "always",
+        metrics: [],
+      },
+    ];
+
+    render(
+      <ConfigurationSelector
+        telemetry={singleTelemetry}
+        selectedWhen="always"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    const options = within(select).getAllByRole("option");
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent("always");
+  });
+
+  it("updates selected value when selectedWhen prop changes", () => {
+    const onWhenChange = vi.fn();
+    const { rerender } = render(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="default"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    let select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("default");
+
+    rerender(
+      <ConfigurationSelector
+        telemetry={mockTelemetry}
+        selectedWhen="otel.instrumentation.http.enabled=true"
+        onWhenChange={onWhenChange}
+      />
+    );
+
+    select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("otel.instrumentation.http.enabled=true");
+  });
+});
diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
new file mode 100644
index 0000000..8358af4
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Info } from "lucide-react";
+import type { Telemetry } from "@/types/javaagent";
+
+interface ConfigurationSelectorProps {
+  telemetry: Telemetry[];
+  selectedWhen: string;
+  onWhenChange: (when: string) => void;
+}
+
+function getConfigLabel(when: string): string {
+  if (when === "default") return "Default";
+  return when;
+}
+
+export function ConfigurationSelector({
+  telemetry,
+  selectedWhen,
+  onWhenChange,
+}: ConfigurationSelectorProps) {
+  return (
+    <div className="mx-auto max-w-3xl">
+      <div className="flex flex-col gap-4 rounded-xl border border-border/30 bg-card/40 backdrop-blur-sm p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        {/* Left: Info banner */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 rounded-lg bg-secondary/10 px-3 py-2 border border-secondary/20">
+            <Info className="h-4 w-4 text-secondary" aria-hidden="true" />
+            <span className="text-xs font-medium text-foreground/90">
+              Telemetry varies by configuration
+            </span>
+          </div>
+        </div>
+
+        {/* Right: Label + Select */}
+        <div className="flex items-center gap-3">
+          <label
+            htmlFor="config-select"
+            className="rounded-md bg-muted/50 px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-foreground/70"
+          >
+            Configuration
+          </label>
+          <select
+            id="config-select"
+            value={selectedWhen}
+            onChange={(e) => onWhenChange(e.target.value)}
+            className="min-w-[200px] cursor-pointer rounded-lg border-2 border-primary/20 bg-primary/5 px-4 py-2.5 text-sm font-medium text-foreground shadow-sm transition-all duration-200 hover:border-primary/40 hover:bg-primary/10 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50"
+          >
+            {telemetry.map((t) => (
+              <option key={t.when} value={t.when}>
+                {getConfigLabel(t.when)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx b/ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx
index cffef11..2dc4926 100644
--- a/ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx
@@ -38,7 +38,7 @@ export function InstrumentationCard({
   return (
     <Link
       to={detailUrl}
-      className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card p-6 transition-all duration-300 hover:scale-[1.02] hover:border-primary/40 hover:bg-card-secondary hover:shadow-[0_0_30px_hsl(var(--color-primary)/0.12)]"
+      className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card p-6 transition-all duration-300 hover:scale-[1.02] hover:border-primary/40 hover:bg-card-secondary hover:shadow-[0_0_30px_hsl(var(--primary-hsl)/0.12)]"
       aria-label={`View details for ${displayName}`}
     >
       {/* Grid pattern background */}
@@ -47,7 +47,7 @@ export function InstrumentationCard({
           className="h-full w-full"
           style={{
             backgroundImage:
-              "linear-gradient(hsl(var(--color-border)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px)",
+              "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
             backgroundSize: "20px 20px",
           }}
         />
@@ -72,9 +72,6 @@ export function InstrumentationCard({
           <TelemetryBadges badges={badgeInfo} activeFilters={activeFilters} />
         </div>
       </div>
-
-      {/* Corner accent */}
-      <div className="pointer-events-none absolute right-0 top-0 h-16 w-16 bg-gradient-to-br from-primary/10 to-transparent transition-all duration-300 group-hover:from-primary/20" />
     </Link>
   );
 }
diff --git a/ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx b/ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx
index deb8211..b2f2569 100644
--- a/ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx
@@ -57,7 +57,7 @@ export function InstrumentationFilterBar({
         className="absolute inset-0"
         style={{
           background:
-            "radial-gradient(circle at top left, hsl(var(--color-secondary) / 0.08) 0%, hsl(var(--color-primary) / 0.04) 40%, transparent 70%)",
+            "radial-gradient(circle at top left, hsl(var(--secondary-hsl) / 0.08) 0%, hsl(var(--primary-hsl) / 0.04) 40%, transparent 70%)",
         }}
       />
 
@@ -67,7 +67,7 @@ export function InstrumentationFilterBar({
           className="h-full w-full"
           style={{
             backgroundImage:
-              "linear-gradient(hsl(var(--color-border)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px)",
+              "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
             backgroundSize: "24px 24px",
           }}
         />
@@ -151,7 +151,7 @@ export function InstrumentationFilterBar({
         <svg viewBox="0 0 64 64" className="h-full w-full">
           <path
             d="M64 64 L64 40 L52 40 L52 52 L40 52 L40 64 Z"
-            style={{ fill: "hsl(var(--color-primary) / 0.4)" }}
+            style={{ fill: "hsl(var(--primary-hsl) / 0.4)" }}
           />
         </svg>
       </div>
diff --git a/ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx b/ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx
index d46c078..808a2ea 100644
--- a/ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx
@@ -43,14 +43,14 @@ export function MultiInstrumentationGroupCard({
   const description = group.instrumentations.find((i) => i.description)?.description;
 
   return (
-    <div className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card transition-all duration-300 hover:border-primary/40 hover:shadow-[0_0_30px_hsl(var(--color-primary)/0.12)]">
+    <div className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card transition-all duration-300 hover:border-primary/40 hover:shadow-[0_0_30px_hsl(var(--primary-hsl)/0.12)]">
       {/* Grid pattern background */}
       <div className="absolute inset-0 opacity-[0.15]">
         <div
           className="h-full w-full"
           style={{
             backgroundImage:
-              "linear-gradient(hsl(var(--color-border)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px)",
+              "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
             backgroundSize: "20px 20px",
           }}
         />
@@ -114,9 +114,6 @@ export function MultiInstrumentationGroupCard({
           )}
         </div>
       </div>
-
-      {/* Corner accent */}
-      <div className="pointer-events-none absolute right-0 top-0 h-16 w-16 bg-gradient-to-br from-primary/10 to-transparent transition-all duration-300 group-hover:from-primary/20" />
     </div>
   );
 }
diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-section.test.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-section.test.tsx
new file mode 100644
index 0000000..b935661
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-section.test.tsx
@@ -0,0 +1,420 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TelemetrySection } from "./telemetry-section";
+import type { Telemetry, Metric, Span, Attribute } from "@/types/javaagent";
+import type { ReactNode } from "react";
+
+vi.mock("./configuration-selector", () => ({
+  ConfigurationSelector: ({
+    telemetry,
+    selectedWhen,
+    onWhenChange,
+  }: {
+    telemetry: Telemetry[];
+    selectedWhen: string;
+    onWhenChange: (when: string) => void;
+  }) => (
+    <div data-testid="config-selector">
+      <select
+        data-testid="config-select"
+        value={selectedWhen}
+        onChange={(e) => onWhenChange(e.target.value)}
+      >
+        {telemetry.map((t) => (
+          <option key={t.when} value={t.when}>
+            {t.when}
+          </option>
+        ))}
+      </select>
+    </div>
+  ),
+}));
+
+vi.mock("./attribute-table", () => ({
+  AttributeTable: ({ attributes }: { attributes: Attribute[] }) => (
+    <div data-testid="attribute-table">
+      {attributes.map((attr) => (
+        <div key={attr.name}>
+          {attr.name}: {attr.type}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/ui/section-divider", () => ({
+  SectionDivider: ({ children }: { children: ReactNode }) => (
+    <div data-testid="section-divider">{children}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/glow-badge", () => ({
+  GlowBadge: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+}));
+
+describe("TelemetrySection", () => {
+  const mockMetric: Metric = {
+    name: "http.server.duration",
+    description: "Duration of HTTP server requests",
+    type: "HISTOGRAM",
+    unit: "ms",
+    attributes: [
+      { name: "http.method", type: "STRING" },
+      { name: "http.status_code", type: "LONG" },
+    ],
+  };
+
+  const mockSpan: Span = {
+    span_kind: "CLIENT",
+    attributes: [
+      { name: "http.url", type: "STRING" },
+      { name: "http.target", type: "STRING" },
+    ],
+  };
+
+  describe("Configuration Selector", () => {
+    it("does not render configuration selector when single configuration", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.queryByTestId("config-selector")).not.toBeInTheDocument();
+    });
+
+    it("renders configuration selector when multiple configurations", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+        {
+          when: "otel.instrumentation.http.enabled=true",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("config-selector")).toBeInTheDocument();
+    });
+
+    it("initializes with first configuration selected", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+        {
+          when: "custom",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      const select = screen.getByTestId("config-select") as HTMLSelectElement;
+      expect(select.value).toBe("default");
+    });
+
+    it("switches between configurations when selection changes", async () => {
+      const user = userEvent.setup();
+      const defaultMetric: Metric = {
+        name: "default.metric",
+        description: "Default metric",
+        type: "COUNTER",
+        unit: "1",
+      };
+
+      const customMetric: Metric = {
+        name: "custom.metric",
+        description: "Custom metric",
+        type: "GAUGE",
+        unit: "ms",
+      };
+
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [defaultMetric],
+        },
+        {
+          when: "custom",
+          metrics: [customMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      // Initially should show default metric
+      expect(screen.getByText("default.metric")).toBeInTheDocument();
+      expect(screen.queryByText("custom.metric")).not.toBeInTheDocument();
+
+      // Switch to custom configuration
+      const select = screen.getByTestId("config-select");
+      await user.selectOptions(select, "custom");
+
+      // Now should show custom metric
+      expect(screen.queryByText("default.metric")).not.toBeInTheDocument();
+      expect(screen.getByText("custom.metric")).toBeInTheDocument();
+    });
+  });
+
+  describe("Metrics Rendering", () => {
+    it("renders metrics section when metrics exist", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("section-divider")).toHaveTextContent("Metrics");
+      expect(screen.getByText("http.server.duration")).toBeInTheDocument();
+    });
+
+    it("renders metric attributes when present", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+      expect(screen.getByText(/http\.method/)).toBeInTheDocument();
+      expect(screen.getByText(/http\.status_code/)).toBeInTheDocument();
+    });
+
+    it("does not render attributes section when metric has no attributes", () => {
+      const metricWithoutAttrs: Metric = {
+        name: "simple.metric",
+        description: "Simple metric",
+        type: "COUNTER",
+        unit: "1",
+      };
+
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [metricWithoutAttrs],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.queryByTestId("attribute-table")).not.toBeInTheDocument();
+    });
+
+    it("does not render metrics section when no metrics", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      const dividers = screen.getAllByTestId("section-divider");
+      const metricsSection = dividers.find((div) => div.textContent === "Metrics");
+
+      expect(metricsSection).toBeUndefined();
+    });
+  });
+
+  describe("Spans Rendering", () => {
+    it("renders spans section when spans exist", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("section-divider")).toHaveTextContent("Spans");
+    });
+
+    it("renders span kind", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByText("CLIENT Span")).toBeInTheDocument();
+    });
+
+    it("renders span attributes when present", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+      expect(screen.getByText(/http\.url/)).toBeInTheDocument();
+      expect(screen.getByText(/http\.target/)).toBeInTheDocument();
+    });
+
+    it("does not render attributes section when span has no attributes", () => {
+      const spanWithoutAttrs: Span = {
+        span_kind: "INTERNAL",
+      };
+
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [spanWithoutAttrs],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.queryByTestId("attribute-table")).not.toBeInTheDocument();
+    });
+
+    it("does not render spans section when no spans", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      const dividers = screen.getAllByTestId("section-divider");
+      const spansSection = dividers.find((div) => div.textContent === "Spans");
+
+      expect(spansSection).toBeUndefined();
+    });
+  });
+
+  describe("Both Metrics and Spans", () => {
+    it("renders both metrics and spans sections when both exist", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      const dividers = screen.getAllByTestId("section-divider");
+      expect(dividers).toHaveLength(2);
+
+      expect(dividers[0]).toHaveTextContent("Metrics");
+      expect(dividers[1]).toHaveTextContent("Spans");
+
+      expect(screen.getByText("http.server.duration")).toBeInTheDocument();
+      expect(screen.getByText("CLIENT Span")).toBeInTheDocument();
+    });
+  });
+
+  describe("Empty State", () => {
+    it("shows empty state when no metrics and no spans", () => {
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(
+        screen.getByText("No metrics or spans defined for this configuration.")
+      ).toBeInTheDocument();
+    });
+
+    it("does not show empty state when telemetry exists", () => {
+      const withMetrics: Telemetry[] = [{ when: "default", metrics: [mockMetric] }];
+      const { unmount } = render(<TelemetrySection telemetry={withMetrics} />);
+      expect(
+        screen.queryByText("No metrics or spans defined for this configuration.")
+      ).not.toBeInTheDocument();
+      unmount();
+
+      const withSpans: Telemetry[] = [{ when: "default", spans: [mockSpan] }];
+      render(<TelemetrySection telemetry={withSpans} />);
+      expect(
+        screen.queryByText("No metrics or spans defined for this configuration.")
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows empty state for selected configuration with no telemetry", async () => {
+      const user = userEvent.setup();
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+        {
+          when: "empty",
+          metrics: [],
+          spans: [],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      // Initially shows default metric
+      expect(screen.queryByText("No metrics or spans defined")).not.toBeInTheDocument();
+
+      // Switch to empty configuration
+      const select = screen.getByTestId("config-select");
+      await user.selectOptions(select, "empty");
+
+      // Now shows empty state
+      expect(
+        screen.getByText("No metrics or spans defined for this configuration.")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("handles empty telemetry array gracefully", () => {
+      const telemetry: Telemetry[] = [];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(
+        screen.getByText("No metrics or spans defined for this configuration.")
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-section.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-section.tsx
new file mode 100644
index 0000000..8ab2ffe
--- /dev/null
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-section.tsx
@@ -0,0 +1,156 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from "react";
+import { SectionDivider } from "@/components/ui/section-divider";
+import { GlowBadge } from "@/components/ui/glow-badge";
+import { AttributeTable } from "./attribute-table";
+import { ConfigurationSelector } from "./configuration-selector";
+import type { Telemetry } from "@/types/javaagent";
+
+interface TelemetrySectionProps {
+  telemetry: Telemetry[];
+}
+
+export function TelemetrySection({ telemetry }: TelemetrySectionProps) {
+  const [selectedWhen, setSelectedWhen] = useState(telemetry[0]?.when ?? "default");
+
+  // Validate selected value and fall back to first option if invalid
+  const isCurrentSelectionValid = telemetry.some((t) => t.when === selectedWhen);
+  const effectiveSelectedWhen = isCurrentSelectionValid
+    ? selectedWhen
+    : (telemetry[0]?.when ?? "default");
+
+  const currentTelemetry = telemetry.find((t) => t.when === effectiveSelectedWhen) ?? telemetry[0];
+
+  const hasMetrics = currentTelemetry?.metrics && currentTelemetry.metrics.length > 0;
+  const hasSpans = currentTelemetry?.spans && currentTelemetry.spans.length > 0;
+  const hasBothMetricsAndSpans = hasMetrics && hasSpans;
+
+  return (
+    <div className="space-y-8">
+      {/* Configuration Selector - only show if multiple conditions exist */}
+      {telemetry.length > 1 && (
+        <ConfigurationSelector
+          telemetry={telemetry}
+          selectedWhen={effectiveSelectedWhen}
+          onWhenChange={setSelectedWhen}
+        />
+      )}
+
+      <div className={hasBothMetricsAndSpans ? "grid grid-cols-1 lg:grid-cols-2 gap-8" : ""}>
+        {/* Metrics Section */}
+        {hasMetrics && (
+          <div>
+            <SectionDivider>Metrics</SectionDivider>
+            <div className={hasBothMetricsAndSpans ? "space-y-8" : "mx-auto max-w-3xl space-y-8"}>
+              {currentTelemetry.metrics &&
+                currentTelemetry.metrics.map((metric) => (
+                  <div
+                    key={metric.name}
+                    className="rounded-2xl border border-border/30 bg-card/30 p-6 md:p-10"
+                  >
+                    <div className="space-y-6">
+                      {/* Metric name and type badge */}
+                      <div className="flex items-start justify-between gap-4">
+                        <code className="flex-1 break-all font-mono text-lg font-semibold text-foreground">
+                          {metric.name}
+                        </code>
+                        <GlowBadge variant="success" withGlow className="text-[10px]">
+                          {metric.type}
+                        </GlowBadge>
+                      </div>
+
+                      {/* Description */}
+                      <p className="text-base leading-relaxed text-foreground/80 md:text-base">
+                        {metric.description}
+                      </p>
+
+                      {/* Unit section with border */}
+                      <div className="flex items-center gap-3 border-b border-border/30 pb-6">
+                        <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                          Unit
+                        </span>
+                        <code className="rounded border border-border/30 bg-white/[0.03] px-2 py-1 text-sm text-foreground/80 ">
+                          {metric.unit}
+                        </code>
+                      </div>
+
+                      {/* Attributes section */}
+                      {metric.attributes && metric.attributes.length > 0 && (
+                        <div className="space-y-4">
+                          <h4 className="text-xs font-black uppercase tracking-[0.2em] text-muted-foreground">
+                            Attributes
+                          </h4>
+                          <AttributeTable attributes={metric.attributes} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+
+        {/* Spans Section */}
+        {hasSpans && (
+          <div>
+            <SectionDivider>Spans</SectionDivider>
+            <div className={hasBothMetricsAndSpans ? "space-y-8" : "mx-auto max-w-3xl space-y-8"}>
+              {currentTelemetry.spans &&
+                currentTelemetry.spans.map((span, index) => (
+                  <div
+                    key={`${span.span_kind}-${index}`}
+                    className="rounded-2xl border border-border/30 bg-card/30 p-6 md:p-10"
+                  >
+                    <div className="space-y-6">
+                      {/* Span kind badge */}
+                      <div className="flex items-center justify-between">
+                        <h3 className="text-lg font-bold text-foreground md:text-xl">
+                          {span.span_kind} Span
+                        </h3>
+                        <GlowBadge variant="info" withGlow className="text-xs">
+                          {span.span_kind}
+                        </GlowBadge>
+                      </div>
+
+                      {/* Attributes section */}
+                      {span.attributes && span.attributes.length > 0 && (
+                        <div className="space-y-4">
+                          <h4 className="text-xs font-black uppercase tracking-[0.2em] text-muted-foreground">
+                            Attributes
+                          </h4>
+                          <AttributeTable attributes={span.attributes} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Empty state */}
+      {!hasMetrics && !hasSpans && (
+        <div className="flex min-h-[200px] items-center justify-center">
+          <p className="text-sm text-muted-foreground">
+            No metrics or spans defined for this configuration.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx b/ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx
index b7d6355..a4a52f5 100644
--- a/ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx
+++ b/ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx
@@ -32,6 +32,7 @@ import { DetailCard } from "@/components/ui/detail-card";
 import { SectionHeader } from "@/components/ui/section-header";
 import { useVersions, useInstrumentation } from "@/hooks/use-javaagent-data";
 import { getInstrumentationDisplayName } from "./utils/format";
+import { TelemetrySection } from "./components/telemetry-section";
 
 function buildSourceUrl(sourcePath: string): string {
   try {
@@ -79,7 +80,7 @@ export function InstrumentationDetailPage() {
             <div
               className="inline-flex rounded-full p-4 animate-pulse"
               style={{
-                boxShadow: "0 0 60px hsl(var(--color-primary) / 0.2)",
+                boxShadow: "0 0 60px hsl(var(--primary-hsl) / 0.2)",
               }}
             >
               <Loader2 className="h-12 w-12 animate-spin text-primary" aria-hidden="true" />
@@ -135,7 +136,7 @@ export function InstrumentationDetailPage() {
             className="absolute inset-0"
             style={{
               background:
-                "radial-gradient(circle at top right, hsl(var(--color-primary) / 0.06) 0%, hsl(var(--color-secondary) / 0.03) 40%, transparent 70%)",
+                "radial-gradient(circle at top right, hsl(var(--primary-hsl) / 0.06) 0%, hsl(var(--secondary-hsl) / 0.03) 40%, transparent 70%)",
             }}
           />
 
@@ -145,7 +146,7 @@ export function InstrumentationDetailPage() {
               className="h-full w-full"
               style={{
                 backgroundImage:
-                  "linear-gradient(hsl(var(--color-border)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px)",
+                  "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
                 backgroundSize: "32px 32px",
               }}
             />
@@ -156,7 +157,7 @@ export function InstrumentationDetailPage() {
             <div className="flex items-start justify-between gap-4">
               <div className="flex-1 space-y-3">
                 <h1 className="text-3xl font-bold leading-tight md:text-4xl">
-                  <span className="bg-gradient-to-r from-[hsl(var(--color-secondary))] to-[hsl(var(--color-primary))] bg-clip-text text-transparent">
+                  <span className="bg-gradient-to-r from-[hsl(var(--secondary-hsl))] to-[hsl(var(--primary-hsl))] bg-clip-text text-transparent">
                     {displayName}
                   </span>
                 </h1>
@@ -196,386 +197,285 @@ export function InstrumentationDetailPage() {
             <svg viewBox="0 0 64 64" className="h-full w-full">
               <path
                 d="M64 64 L64 32 L48 32 L48 48 L32 48 L32 64 Z"
-                style={{ fill: "hsl(var(--color-secondary) / 0.5)" }}
+                style={{ fill: "hsl(var(--secondary-hsl) / 0.5)" }}
               />
             </svg>
           </div>
         </header>
 
-        <Tabs defaultValue="details" className="w-full">
-          <TabsList>
-            <TabsTrigger value="details">
-              <Info className="h-4 w-4" aria-hidden="true" />
-              Details
-            </TabsTrigger>
-            <TabsTrigger value="telemetry">
-              <Activity className="h-4 w-4" aria-hidden="true" />
-              Telemetry
-            </TabsTrigger>
-            <TabsTrigger value="configuration">
-              <Settings className="h-4 w-4" aria-hidden="true" />
-              Configuration
-            </TabsTrigger>
-          </TabsList>
+        <div className="relative overflow-hidden rounded-lg border border-border/60 bg-card/80">
+          {/* Grid pattern background */}
+          <div className="absolute inset-0 opacity-5">
+            <div
+              className="h-full w-full"
+              style={{
+                backgroundImage:
+                  "linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px)",
+                backgroundSize: "32px 32px",
+              }}
+            />
+          </div>
 
-          <TabsContent value="details">
-            <div className="space-y-8">
-              {/* Links & Resources Section */}
-              {(instrumentation.library_link || instrumentation.source_path) && (
-                <div>
-                  <SectionHeader>Links & Resources</SectionHeader>
-                  <div className="grid gap-4 md:grid-cols-2">
-                    {instrumentation.library_link && (
-                      <DetailCard withHoverEffect>
-                        <div className="flex items-start gap-3">
-                          <ExternalLink
-                            className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
-                            aria-hidden="true"
-                          />
-                          <div className="flex-1 space-y-1">
-                            <h3 className="text-sm font-medium text-muted-foreground">
-                              Library Link
-                            </h3>
-                            <a
-                              href={instrumentation.library_link}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="break-all text-sm text-primary hover:underline"
-                            >
-                              {instrumentation.library_link}
-                            </a>
+          <Tabs defaultValue="details" className="relative z-10">
+            <div className="bg-card/60 px-6 pt-4 border-b border-border/30">
+              <TabsList className="bg-transparent border-0 h-auto p-0 -mb-px">
+                <TabsTrigger value="details">
+                  <Info className="h-4 w-4" aria-hidden="true" />
+                  Details
+                </TabsTrigger>
+                <TabsTrigger value="telemetry">
+                  <Activity className="h-4 w-4" aria-hidden="true" />
+                  Telemetry
+                </TabsTrigger>
+                <TabsTrigger value="configuration">
+                  <Settings className="h-4 w-4" aria-hidden="true" />
+                  Configuration
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="details" className="p-6">
+              <div className="space-y-8">
+                {/* Links & Resources Section */}
+                {(instrumentation.library_link || instrumentation.source_path) && (
+                  <div>
+                    <SectionHeader>Links & Resources</SectionHeader>
+                    <div className="grid gap-4 md:grid-cols-2">
+                      {instrumentation.library_link && (
+                        <DetailCard withHoverEffect>
+                          <div className="flex items-start gap-3">
+                            <ExternalLink
+                              className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
+                              aria-hidden="true"
+                            />
+                            <div className="flex-1 space-y-1">
+                              <h3 className="text-sm font-medium text-muted-foreground">
+                                Library Link
+                              </h3>
+                              <a
+                                href={instrumentation.library_link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="break-all text-sm text-primary hover:underline"
+                              >
+                                {instrumentation.library_link}
+                              </a>
+                            </div>
                           </div>
-                        </div>
-                      </DetailCard>
-                    )}
+                        </DetailCard>
+                      )}
 
-                    {instrumentation.source_path && (
-                      <DetailCard withHoverEffect>
-                        <div className="flex items-start gap-3">
-                          <Code
-                            className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
-                            aria-hidden="true"
-                          />
-                          <div className="flex-1 space-y-1">
-                            <h3 className="text-sm font-medium text-muted-foreground">
-                              Source Path
-                            </h3>
-                            <a
-                              href={buildSourceUrl(instrumentation.source_path)}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="break-all text-sm text-primary hover:underline"
-                            >
-                              {instrumentation.source_path}
-                            </a>
+                      {instrumentation.source_path && (
+                        <DetailCard withHoverEffect>
+                          <div className="flex items-start gap-3">
+                            <Code
+                              className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
+                              aria-hidden="true"
+                            />
+                            <div className="flex-1 space-y-1">
+                              <h3 className="text-sm font-medium text-muted-foreground">
+                                Source Path
+                              </h3>
+                              <a
+                                href={buildSourceUrl(instrumentation.source_path)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="break-all text-sm text-primary hover:underline"
+                              >
+                                {instrumentation.source_path}
+                              </a>
+                            </div>
                           </div>
-                        </div>
-                      </DetailCard>
-                    )}
+                        </DetailCard>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
-
-              {/* Requirements Section */}
-              {(instrumentation.minimum_java_version ||
-                (instrumentation.javaagent_target_versions &&
-                  instrumentation.javaagent_target_versions.length > 0)) && (
-                <div>
-                  <SectionHeader>Requirements</SectionHeader>
-                  <div className="space-y-4">
-                    {instrumentation.minimum_java_version && (
-                      <DetailCard withGrid withHoverEffect>
-                        <div className="space-y-2">
-                          <h3 className="text-sm font-medium text-muted-foreground">
-                            Minimum Java Version
-                          </h3>
-                          <p className="text-lg font-semibold text-foreground">
-                            {instrumentation.minimum_java_version}
-                          </p>
-                        </div>
-                      </DetailCard>
-                    )}
+                )}
 
-                    {instrumentation.javaagent_target_versions &&
-                      instrumentation.javaagent_target_versions.length > 0 && (
-                        <DetailCard>
-                          <div className="space-y-3">
+                {/* Requirements Section */}
+                {(instrumentation.minimum_java_version ||
+                  (instrumentation.javaagent_target_versions &&
+                    instrumentation.javaagent_target_versions.length > 0)) && (
+                  <div>
+                    <SectionHeader>Requirements</SectionHeader>
+                    <div className="space-y-4">
+                      {instrumentation.minimum_java_version && (
+                        <DetailCard withGrid withHoverEffect>
+                          <div className="space-y-2">
                             <h3 className="text-sm font-medium text-muted-foreground">
-                              Target Versions
+                              Minimum Java Version
                             </h3>
-                            <div className="flex flex-wrap gap-2">
-                              {instrumentation.javaagent_target_versions.map((targetVersion) => (
-                                <GlowBadge key={targetVersion} variant="muted">
-                                  {targetVersion}
-                                </GlowBadge>
-                              ))}
-                            </div>
+                            <p className="text-lg font-semibold text-foreground">
+                              {instrumentation.minimum_java_version}
+                            </p>
                           </div>
                         </DetailCard>
                       )}
-                  </div>
-                </div>
-              )}
 
-              {/* Instrumentation Scope Section */}
-              {instrumentation.scope && (
-                <div>
-                  <SectionHeader>Instrumentation Scope</SectionHeader>
-                  <DetailCard withGrid>
-                    <div className="space-y-3">
-                      <div>
-                        <h3 className="text-sm font-medium text-muted-foreground">Scope Name</h3>
-                        <p className="mt-1 text-sm font-medium text-foreground">
-                          {instrumentation.scope.name}
-                        </p>
-                      </div>
-                      {instrumentation.scope.schema_url && (
-                        <div>
-                          <h3 className="text-sm font-medium text-muted-foreground">Schema URL</h3>
-                          <code className="mt-1 block break-all rounded bg-muted px-2 py-1 text-xs">
-                            {instrumentation.scope.schema_url}
-                          </code>
-                        </div>
-                      )}
+                      {instrumentation.javaagent_target_versions &&
+                        instrumentation.javaagent_target_versions.length > 0 && (
+                          <DetailCard>
+                            <div className="space-y-3">
+                              <h3 className="text-sm font-medium text-muted-foreground">
+                                Target Versions
+                              </h3>
+                              <div className="flex flex-wrap gap-2">
+                                {instrumentation.javaagent_target_versions.map((targetVersion) => (
+                                  <GlowBadge key={targetVersion} variant="muted">
+                                    {targetVersion}
+                                  </GlowBadge>
+                                ))}
+                              </div>
+                            </div>
+                          </DetailCard>
+                        )}
                     </div>
-                  </DetailCard>
-                </div>
-              )}
+                  </div>
+                )}
 
-              {/* Capabilities Section */}
-              {((instrumentation.features && instrumentation.features.length > 0) ||
-                (instrumentation.semantic_conventions &&
-                  instrumentation.semantic_conventions.length > 0)) && (
-                <div>
-                  <SectionHeader>Capabilities</SectionHeader>
-                  <div className="space-y-4">
-                    {instrumentation.features && instrumentation.features.length > 0 && (
-                      <DetailCard>
-                        <div className="space-y-3">
-                          <h3 className="text-sm font-medium text-muted-foreground">Features</h3>
-                          <ul className="space-y-2">
-                            {instrumentation.features.map((feature, index) => (
-                              <li key={index} className="flex items-start gap-2 text-sm">
-                                <Check
-                                  className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary"
-                                  aria-hidden="true"
-                                />
-                                <span>{feature}</span>
-                              </li>
-                            ))}
-                          </ul>
+                {/* Instrumentation Scope Section */}
+                {instrumentation.scope && (
+                  <div>
+                    <SectionHeader>Instrumentation Scope</SectionHeader>
+                    <DetailCard withGrid>
+                      <div className="space-y-3">
+                        <div>
+                          <h3 className="text-sm font-medium text-muted-foreground">Scope Name</h3>
+                          <p className="mt-1 text-sm font-medium text-foreground">
+                            {instrumentation.scope.name}
+                          </p>
                         </div>
-                      </DetailCard>
-                    )}
+                        {instrumentation.scope.schema_url && (
+                          <div>
+                            <h3 className="text-sm font-medium text-muted-foreground">
+                              Schema URL
+                            </h3>
+                            <code className="mt-1 block break-all rounded bg-muted px-2 py-1 text-xs">
+                              {instrumentation.scope.schema_url}
+                            </code>
+                          </div>
+                        )}
+                      </div>
+                    </DetailCard>
+                  </div>
+                )}
 
-                    {instrumentation.semantic_conventions &&
-                      instrumentation.semantic_conventions.length > 0 && (
+                {/* Capabilities Section */}
+                {((instrumentation.features && instrumentation.features.length > 0) ||
+                  (instrumentation.semantic_conventions &&
+                    instrumentation.semantic_conventions.length > 0)) && (
+                  <div>
+                    <SectionHeader>Capabilities</SectionHeader>
+                    <div className="space-y-4">
+                      {instrumentation.features && instrumentation.features.length > 0 && (
                         <DetailCard>
                           <div className="space-y-3">
-                            <h3 className="text-sm font-medium text-muted-foreground">
-                              Semantic Conventions
-                            </h3>
-                            <div className="flex flex-wrap gap-2">
-                              {instrumentation.semantic_conventions.map((convention) => (
-                                <GlowBadge key={convention} variant="muted">
-                                  {convention}
-                                </GlowBadge>
+                            <h3 className="text-sm font-medium text-muted-foreground">Features</h3>
+                            <ul className="space-y-2">
+                              {instrumentation.features.map((feature, index) => (
+                                <li key={index} className="flex items-start gap-2 text-sm">
+                                  <Check
+                                    className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary"
+                                    aria-hidden="true"
+                                  />
+                                  <span>{feature}</span>
+                                </li>
                               ))}
-                            </div>
+                            </ul>
                           </div>
                         </DetailCard>
                       )}
-                  </div>
-                </div>
-              )}
-            </div>
-          </TabsContent>
 
-          <TabsContent value="telemetry">
-            {instrumentation.telemetry && instrumentation.telemetry.length > 0 ? (
-              <div className="space-y-8">
-                {instrumentation.telemetry.map((telemetry, index) => (
-                  <div key={index} className="space-y-6">
-                    {/* When indicator */}
-                    <div className="relative rounded-lg border-l-4 border-l-primary bg-card/50 p-4">
-                      <div
-                        className="absolute inset-y-0 left-0 w-1"
-                        style={{
-                          background:
-                            "linear-gradient(to bottom, hsl(var(--color-primary)), hsl(var(--color-secondary)))",
-                        }}
-                      />
-                      <div className="pl-2">
-                        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                          When
-                        </h3>
-                        <p className="mt-1 text-sm font-medium text-foreground">{telemetry.when}</p>
-                      </div>
-                    </div>
-
-                    {/* Metrics */}
-                    {telemetry.metrics && telemetry.metrics.length > 0 && (
-                      <div>
-                        <SectionHeader>Metrics</SectionHeader>
-                        <div className="grid gap-4 md:grid-cols-2">
-                          {telemetry.metrics.map((metric, metricIndex) => (
-                            <DetailCard key={metricIndex} withHoverEffect>
-                              <div className="space-y-3">
-                                <div className="flex items-start justify-between gap-3">
-                                  <code className="flex-1 break-all text-sm font-mono text-primary">
-                                    {metric.name}
-                                  </code>
-                                  <GlowBadge variant="success" withGlow>
-                                    {metric.type}
+                      {instrumentation.semantic_conventions &&
+                        instrumentation.semantic_conventions.length > 0 && (
+                          <DetailCard>
+                            <div className="space-y-3">
+                              <h3 className="text-sm font-medium text-muted-foreground">
+                                Semantic Conventions
+                              </h3>
+                              <div className="flex flex-wrap gap-2">
+                                {instrumentation.semantic_conventions.map((convention) => (
+                                  <GlowBadge key={convention} variant="muted">
+                                    {convention}
                                   </GlowBadge>
-                                </div>
-
-                                <p className="text-sm leading-relaxed text-muted-foreground">
-                                  {metric.description}
-                                </p>
-
-                                <div className="flex items-center gap-2 text-xs">
-                                  <span className="font-medium text-muted-foreground">Unit:</span>
-                                  <code className="rounded bg-muted px-1.5 py-0.5">
-                                    {metric.unit}
-                                  </code>
-                                </div>
-
-                                {metric.attributes && metric.attributes.length > 0 && (
-                                  <div className="space-y-2 border-t border-border/30 pt-3">
-                                    <h4 className="text-xs font-medium text-muted-foreground">
-                                      Attributes
-                                    </h4>
-                                    <div className="flex flex-wrap gap-2">
-                                      {metric.attributes.map((attr, attrIndex) => (
-                                        <div
-                                          key={attrIndex}
-                                          className="inline-flex items-center gap-1.5 text-xs"
-                                        >
-                                          <code className="rounded bg-muted px-1.5 py-0.5">
-                                            {attr.name}
-                                          </code>
-                                          <span className="text-muted-foreground">
-                                            ({attr.type})
-                                          </span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            </DetailCard>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Spans */}
-                    {telemetry.spans && telemetry.spans.length > 0 && (
-                      <div>
-                        <SectionHeader>Spans</SectionHeader>
-                        <div className="grid gap-4 md:grid-cols-2">
-                          {telemetry.spans.map((span, spanIndex) => (
-                            <DetailCard key={spanIndex} withHoverEffect>
-                              <div className="space-y-3">
-                                <div>
-                                  <GlowBadge variant="info" withGlow>
-                                    {span.span_kind}
-                                  </GlowBadge>
-                                </div>
-
-                                {span.attributes && span.attributes.length > 0 && (
-                                  <div className="space-y-2">
-                                    <h4 className="text-xs font-medium text-muted-foreground">
-                                      Attributes
-                                    </h4>
-                                    <div className="flex flex-wrap gap-2">
-                                      {span.attributes.map((attr, attrIndex) => (
-                                        <div
-                                          key={attrIndex}
-                                          className="inline-flex items-center gap-1.5 text-xs"
-                                        >
-                                          <code className="rounded bg-muted px-1.5 py-0.5">
-                                            {attr.name}
-                                          </code>
-                                          <span className="text-muted-foreground">
-                                            ({attr.type})
-                                          </span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  </div>
-                                )}
+                                ))}
                               </div>
-                            </DetailCard>
-                          ))}
-                        </div>
-                      </div>
-                    )}
+                            </div>
+                          </DetailCard>
+                        )}
+                    </div>
                   </div>
-                ))}
+                )}
               </div>
-            ) : (
-              <div className="flex min-h-[300px] items-center justify-center">
-                <div className="text-center">
-                  <Activity
-                    className="mx-auto h-12 w-12 text-muted-foreground/50"
-                    aria-hidden="true"
-                  />
-                  <p className="mt-4 text-sm text-muted-foreground">
-                    No telemetry information available.
-                  </p>
+            </TabsContent>
+
+            <TabsContent value="telemetry" className="p-6">
+              {instrumentation.telemetry && instrumentation.telemetry.length > 0 ? (
+                <TelemetrySection telemetry={instrumentation.telemetry} />
+              ) : (
+                <div className="flex min-h-[300px] items-center justify-center">
+                  <div className="text-center">
+                    <Activity
+                      className="mx-auto h-12 w-12 text-muted-foreground/50"
+                      aria-hidden="true"
+                    />
+                    <p className="mt-4 text-sm text-muted-foreground">
+                      No telemetry information available.
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
-          </TabsContent>
-
-          <TabsContent value="configuration">
-            {instrumentation.configurations && instrumentation.configurations.length > 0 ? (
-              <div className="grid gap-4 md:grid-cols-2">
-                {instrumentation.configurations.map((config) => (
-                  <DetailCard key={config.name} withHoverEffect>
-                    <div className="space-y-3">
-                      <div className="flex items-start justify-between gap-3">
-                        <code className="flex-1 break-all text-sm font-mono text-primary">
-                          {config.name}
-                        </code>
-                        <GlowBadge variant="info" withGlow>
-                          {config.type}
-                        </GlowBadge>
-                      </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="configuration" className="p-6">
+              {instrumentation.configurations && instrumentation.configurations.length > 0 ? (
+                <div className="grid gap-4 md:grid-cols-2">
+                  {instrumentation.configurations.map((config) => (
+                    <DetailCard key={config.name} withHoverEffect>
+                      <div className="space-y-3">
+                        <div className="flex items-start justify-between gap-3">
+                          <code className="flex-1 break-all text-sm font-mono text-primary">
+                            {config.name}
+                          </code>
+                          <GlowBadge variant="info" withGlow>
+                            {config.type}
+                          </GlowBadge>
+                        </div>
 
-                      <p className="text-sm leading-relaxed text-muted-foreground">
-                        {config.description}
-                      </p>
+                        <p className="text-sm leading-relaxed text-muted-foreground">
+                          {config.description}
+                        </p>
 
-                      <div className="flex items-start gap-2 rounded-lg border border-border/30 bg-muted/30 p-3">
-                        <span className="text-xs font-medium text-muted-foreground">Default:</span>
-                        <code className="flex-1 break-all text-xs">
-                          {typeof config.default === "boolean"
-                            ? config.default.toString()
-                            : config.default}
-                        </code>
+                        <div className="flex items-start gap-2 rounded-lg border border-border/30 bg-muted/30 p-3">
+                          <span className="text-xs font-medium text-muted-foreground">
+                            Default:
+                          </span>
+                          <code className="flex-1 break-all text-xs">
+                            {typeof config.default === "boolean"
+                              ? config.default.toString()
+                              : config.default}
+                          </code>
+                        </div>
                       </div>
-                    </div>
-                  </DetailCard>
-                ))}
-              </div>
-            ) : (
-              <div className="flex min-h-[300px] items-center justify-center">
-                <div className="text-center">
-                  <Settings
-                    className="mx-auto h-12 w-12 text-muted-foreground/50"
-                    aria-hidden="true"
-                  />
-                  <p className="mt-4 text-sm text-muted-foreground">
-                    No configuration options available.
-                  </p>
+                    </DetailCard>
+                  ))}
                 </div>
-              </div>
-            )}
-          </TabsContent>
-        </Tabs>
+              ) : (
+                <div className="flex min-h-[300px] items-center justify-center">
+                  <div className="text-center">
+                    <Settings
+                      className="mx-auto h-12 w-12 text-muted-foreground/50"
+                      aria-hidden="true"
+                    />
+                    <p className="mt-4 text-sm text-muted-foreground">
+                      No configuration options available.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
       </div>
     </div>
   );
diff --git a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
index f7ff459..e48a315 100644
--- a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
+++ b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
@@ -131,7 +131,7 @@ export function JavaInstrumentationListPage() {
         {/* Header Section */}
         <div className="space-y-3">
           <h1 className="text-3xl font-bold md:text-4xl">
-            <span className="bg-gradient-to-r from-[hsl(var(--color-secondary))] to-[hsl(var(--color-primary))] bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[hsl(var(--secondary-hsl))] to-[hsl(var(--primary-hsl))] bg-clip-text text-transparent">
               OpenTelemetry Java Agent
             </span>
           </h1>
diff --git a/ecosystem-explorer/src/index.css b/ecosystem-explorer/src/index.css
index 6b6ffa9..16b8da5 100644
--- a/ecosystem-explorer/src/index.css
+++ b/ecosystem-explorer/src/index.css
@@ -3,39 +3,41 @@
 /**
  * Theme System
  *
- * 1. Default HSL triplet values (fallback before ThemeProvider loads)
+ * 1. HSL triplet values stored with -hsl suffix (e.g., --primary-hsl)
  * 2. ThemeProvider dynamically overwrites these from themes.ts
- * 3. @theme block wraps triplets in hsl() for Tailwind v4
+ * 3. @theme block wraps triplets in hsl() to create Tailwind utility classes
  *
  * Source of truth: src/themes.ts
  */
 
 @layer theme {
   :root {
-    --color-primary: 185 85% 70%;
-    --color-secondary: 185 85% 50%;
-    --color-background: 0 0% 4%;
-    --color-foreground: 0 0% 98%;
-    --color-card: 0 0% 8%;
-    --color-card-secondary: 0 0% 12%;
-    --color-muted-foreground: 0 0% 55%;
-    --color-border: 0 0% 20%;
+    --primary-hsl: 185 85% 70%;
+    --secondary-hsl: 185 85% 50%;
+    --background-hsl: 0 0% 4%;
+    --foreground-hsl: 0 0% 98%;
+    --card-hsl: 0 0% 8%;
+    --card-secondary-hsl: 0 0% 12%;
+    --muted-hsl: 0 0% 6%;
+    --muted-foreground-hsl: 0 0% 55%;
+    --border-hsl: 0 0% 20%;
   }
 }
 
 @theme {
-  --color-primary: hsl(var(--color-primary));
-  --color-secondary: hsl(var(--color-secondary));
-  --color-background: hsl(var(--color-background));
-  --color-foreground: hsl(var(--color-foreground));
-  --color-card: hsl(var(--color-card));
-  --color-card-secondary: hsl(var(--color-card-secondary));
-  --color-muted-foreground: hsl(var(--color-muted-foreground));
-  --color-border: hsl(var(--color-border));
+  --color-primary: hsl(var(--primary-hsl));
+  --color-secondary: hsl(var(--secondary-hsl));
+  --color-background: hsl(var(--background-hsl));
+  --color-foreground: hsl(var(--foreground-hsl));
+  --color-card: hsl(var(--card-hsl));
+  --color-card-secondary: hsl(var(--card-secondary-hsl));
+  --color-muted: hsl(var(--muted-hsl));
+  --color-muted-foreground: hsl(var(--muted-foreground-hsl));
+  --color-border: hsl(var(--border-hsl));
 }
 
 * {
-  border-color: hsl(var(--color-border));
+  border-color: hsl(var(--border-hsl));
 }
 
 body {
@@ -45,8 +47,8 @@ body {
     system-ui,
     -apple-system,
     sans-serif;
-  background-color: hsl(var(--color-background));
-  color: hsl(var(--color-foreground));
+  background-color: hsl(var(--background-hsl));
+  color: hsl(var(--foreground-hsl));
 }
 
 #root {
@@ -59,5 +61,5 @@ body {
 }
 
 [role="tab"][data-state="active"] {
-  border-top-color: hsl(var(--color-primary)) !important;
+  border-top-color: hsl(var(--primary-hsl)) !important;
 }
diff --git a/ecosystem-explorer/src/theme-context.test.tsx b/ecosystem-explorer/src/theme-context.test.tsx
index c31d74f..aa95185 100644
--- a/ecosystem-explorer/src/theme-context.test.tsx
+++ b/ecosystem-explorer/src/theme-context.test.tsx
@@ -34,14 +34,15 @@ describe("ThemeProvider", () => {
     const theme = themes[DEFAULT_THEME];
     const root = document.documentElement;
 
-    expect(root.style.getPropertyValue("--color-primary")).toBe(theme.colors.primary);
-    expect(root.style.getPropertyValue("--color-secondary")).toBe(theme.colors.secondary);
-    expect(root.style.getPropertyValue("--color-background")).toBe(theme.colors.background);
-    expect(root.style.getPropertyValue("--color-foreground")).toBe(theme.colors.foreground);
-    expect(root.style.getPropertyValue("--color-card")).toBe(theme.colors.card);
-    expect(root.style.getPropertyValue("--color-card-secondary")).toBe(theme.colors.cardSecondary);
-    expect(root.style.getPropertyValue("--color-border")).toBe(theme.colors.border);
-    expect(root.style.getPropertyValue("--color-muted-foreground")).toBe(
+    expect(root.style.getPropertyValue("--primary-hsl")).toBe(theme.colors.primary);
+    expect(root.style.getPropertyValue("--secondary-hsl")).toBe(theme.colors.secondary);
+    expect(root.style.getPropertyValue("--background-hsl")).toBe(theme.colors.background);
+    expect(root.style.getPropertyValue("--foreground-hsl")).toBe(theme.colors.foreground);
+    expect(root.style.getPropertyValue("--card-hsl")).toBe(theme.colors.card);
+    expect(root.style.getPropertyValue("--card-secondary-hsl")).toBe(theme.colors.cardSecondary);
+    expect(root.style.getPropertyValue("--border-hsl")).toBe(theme.colors.border);
+    expect(root.style.getPropertyValue("--muted-hsl")).toBe(theme.colors.muted);
+    expect(root.style.getPropertyValue("--muted-foreground-hsl")).toBe(
       theme.colors.mutedForeground
     );
   });
diff --git a/ecosystem-explorer/src/theme-context.tsx b/ecosystem-explorer/src/theme-context.tsx
index d7c609f..84210ad 100644
--- a/ecosystem-explorer/src/theme-context.tsx
+++ b/ecosystem-explorer/src/theme-context.tsx
@@ -30,15 +30,16 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     const theme = themes[themeId];
     const root = document.documentElement;
 
-    // Apply theme colors to CSS variables
-    root.style.setProperty("--color-primary", theme.colors.primary);
-    root.style.setProperty("--color-secondary", theme.colors.secondary);
-    root.style.setProperty("--color-background", theme.colors.background);
-    root.style.setProperty("--color-foreground", theme.colors.foreground);
-    root.style.setProperty("--color-card", theme.colors.card);
-    root.style.setProperty("--color-card-secondary", theme.colors.cardSecondary);
-    root.style.setProperty("--color-muted-foreground", theme.colors.mutedForeground);
-    root.style.setProperty("--color-border", theme.colors.border);
+    // Apply theme colors to CSS variables (HSL triplets)
+    root.style.setProperty("--primary-hsl", theme.colors.primary);
+    root.style.setProperty("--secondary-hsl", theme.colors.secondary);
+    root.style.setProperty("--background-hsl", theme.colors.background);
+    root.style.setProperty("--foreground-hsl", theme.colors.foreground);
+    root.style.setProperty("--card-hsl", theme.colors.card);
+    root.style.setProperty("--card-secondary-hsl", theme.colors.cardSecondary);
+    root.style.setProperty("--muted-hsl", theme.colors.muted);
+    root.style.setProperty("--muted-foreground-hsl", theme.colors.mutedForeground);
+    root.style.setProperty("--border-hsl", theme.colors.border);
 
     root.setAttribute("data-theme", themeId);
   }, [themeId]);
diff --git a/ecosystem-explorer/src/themes.ts b/ecosystem-explorer/src/themes.ts
index f8968d6..9692e59 100644
--- a/ecosystem-explorer/src/themes.ts
+++ b/ecosystem-explorer/src/themes.ts
@@ -27,6 +27,7 @@ export interface Theme {
     foreground: string;
     card: string;
     cardSecondary: string;
+    muted: string;
     mutedForeground: string;
     border: string;
   };
@@ -44,6 +45,7 @@ export const themes: Record<ThemeId, Theme> = {
       foreground: "210 45% 99%", // Bright white with blue hint
       card: "232 35% 19%", // Card background
       cardSecondary: "232 32% 23%", // Hover state
+      muted: "232 30% 17%", // Darker background for code/badges
       mutedForeground: "220 22% 65%", // Muted text
       border: "232 28% 26%", // Borders
     },