diff --git a/app/src/pages/BarSelectorModule.tsx b/app/src/pages/BarSelectorModule.tsx
index cc0ebb5..111f433 100644
--- a/app/src/pages/BarSelectorModule.tsx
+++ b/app/src/pages/BarSelectorModule.tsx
@@ -156,7 +156,7 @@ const BarSelectorModule: React.FC = () => {
       {/* Coluna Central: 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">α = {alpha}°</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">α = {alpha}°</Badge>
         </div>
         <div className="absolute top-4 right-4 z-10">
           <EducationalManual type="bar" params={{ barType, section, alpha }} />
diff --git a/app/src/pages/BridgeModule.tsx b/app/src/pages/BridgeModule.tsx
index 984fa06..fab1a61 100644
--- a/app/src/pages/BridgeModule.tsx
+++ b/app/src/pages/BridgeModule.tsx
@@ -145,7 +145,7 @@ const BridgeModule: React.FC = () => {
       {/* Coluna Central: 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">Pₛₑ = {classification.pse.toFixed(3)}</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">Pₛₑ = {classification.pse.toFixed(3)}</Badge>
           <Badge variant="outline" className={`bg-background/80 ${classColors[classification.bridgeClass]}`}>
             Classe {classification.bridgeClass}
           </Badge>
diff --git a/app/src/pages/CylinderModule.tsx b/app/src/pages/CylinderModule.tsx
index a068e7e..34d7d72 100644
--- a/app/src/pages/CylinderModule.tsx
+++ b/app/src/pages/CylinderModule.tsx
@@ -137,7 +137,7 @@ const CylinderModule: React.FC = () => {
       {/* Coluna Central: 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">
             h/d = {result.hOverD.toFixed(2)}
           </Badge>
           <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
diff --git a/app/src/pages/DomeModule.tsx b/app/src/pages/DomeModule.tsx
index ed3f136..5d78b61 100644
--- a/app/src/pages/DomeModule.tsx
+++ b/app/src/pages/DomeModule.tsx
@@ -117,7 +117,7 @@ const DomeModule: React.FC = () => {
       {/* Coluna Central: 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">f/d = {result.fOverD.toFixed(2)}</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">f/d = {result.fOverD.toFixed(2)}</Badge>
           <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
             Cpi = {cpi.toFixed(2)}
           </Badge>
diff --git a/app/src/pages/TowerModule.tsx b/app/src/pages/TowerModule.tsx
index 38ebde0..a7226a0 100644
--- a/app/src/pages/TowerModule.tsx
+++ b/app/src/pages/TowerModule.tsx
@@ -139,8 +139,8 @@ const TowerModule: React.FC = () => {
       {/* Coluna Central: 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">{section === 'square' ? 'Quadrada' : 'Triangular'}</Badge>
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">α = {alphaWind}°</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">{section === 'square' ? 'Quadrada' : 'Triangular'}</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">α = {alphaWind}°</Badge>
         </div>
         <div className="absolute top-4 right-4 z-10">
           <EducationalManual type="tower" params={{ section, alphaWind }} />
diff --git a/app/src/pages/VaultModule.tsx b/app/src/pages/VaultModule.tsx
index 1bea225..7950a09 100644
--- a/app/src/pages/VaultModule.tsx
+++ b/app/src/pages/VaultModule.tsx
@@ -125,7 +125,7 @@ const VaultModule: React.FC = () => {
       {/* Coluna Central: Viewer 3D */}
       <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
         <div className="absolute top-4 left-4 z-10 flex gap-2">
-          <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">f/ℓ = {(rise / span).toFixed(2)}</Badge>
+          <Badge variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm">f/ℓ = {(rise / span).toFixed(2)}</Badge>
           <Badge variant="outline" className={localCpi > 0 ? 'bg-destructive/10 text-destructive border-destructive/20 backdrop-blur-sm' : 'bg-background/80 backdrop-blur-sm'}>
             Cpi = {localCpi > 0 ? `+${localCpi.toFixed(2)}` : localCpi.toFixed(2)}
           </Badge>
diff --git a/fix_badges.js b/fix_badges.js
new file mode 100644
index 0000000..935c56c
--- /dev/null
+++ b/fix_badges.js
@@ -0,0 +1,32 @@
+const fs = require('fs');
+const path = require('path');
+
+const dir = path.join(__dirname, 'app/src/pages');
+const filesToUpdate = [
+  'CylinderModule.tsx',
+  'DomeModule.tsx',
+  'VaultModule.tsx',
+  'BridgeModule.tsx',
+  'BarSelectorModule.tsx',
+  'TowerModule.tsx'
+];
+
+let updated = 0;
+for (const file of filesToUpdate) {
+  const filePath = path.join(dir, file);
+  if (!fs.existsSync(filePath)) continue;
+  
+  let content = fs.readFileSync(filePath, 'utf8');
+  
+  const target = 'variant="secondary" className="bg-background/80 backdrop-blur-sm"';
+  const replacement = 'variant="secondary" className="bg-background/80 text-foreground border border-border/50 backdrop-blur-sm shadow-sm"';
+  
+  if (content.includes(target)) {
+    content = content.split(target).join(replacement);
+    fs.writeFileSync(filePath, content);
+    console.log(`Updated ${file}`);
+    updated++;
+  }
+}
+
+console.log(`Total updated: ${updated}`);