diff --git a/src/App.tsx b/src/App.tsx
index fa249d9..7979729 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,7 @@ const LogoText = styled(Typography)(({ theme }) => ({
         ? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
         : 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
     WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : '#1a1a2e',
+    WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
     letterSpacing: '-0.5px',
     cursor: 'pointer',
     '&:hover': {
@@ -94,7 +94,7 @@ function AppBarContent() {
                                 </LogoText>
                             </Box>
                             <ThemeToggleLight onClick={toggleTheme} size="large">
-                                <DarkModeIcon />
+                                <DarkModeIcon sx={{ color: '#000000' }} />
                             </ThemeToggleLight>
                         </Toolbar>
                     </Container>
diff --git a/src/classes/Ability.tsx b/src/classes/Ability.tsx
index 231dddf..d17ebe0 100644
--- a/src/classes/Ability.tsx
+++ b/src/classes/Ability.tsx
@@ -1,6 +1,7 @@
 import {AccordionDetails, AccordionSummary} from "@mui/material";
 import {ExpandMore} from "@mui/icons-material";
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IAbilityShort} from "../types/IAbility";
 import {getIcon} from "./ModifiersProvideTable";
 import {IMod} from "../types/Imod";
@@ -15,23 +16,26 @@ interface IAbilityProps {
 }
 
 function Ability(props: IAbilityProps){
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const ability = props.ability
 
     return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
         <AccordionSummary
-            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
-            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+            sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: textColor}}/>}
             aria-controls="panel1-content"
         >
-                <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
+                <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 {ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.gif"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
                     &nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
                     <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}>  ({ability.activationType})</i>
                 </span>
 
         </AccordionSummary>
-        <AccordionDetails sx={{color: '#dee2e6'}}>
+        <AccordionDetails sx={{color: textColor}}>
             <AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
         </AccordionDetails>
     </StyledAccordion></div>
diff --git a/src/classes/AbilityFull.tsx b/src/classes/AbilityFull.tsx
index e37eee0..66b4f5c 100644
--- a/src/classes/AbilityFull.tsx
+++ b/src/classes/AbilityFull.tsx
@@ -1,21 +1,19 @@
 import React, {useEffect, useState} from "react";
+import {useTheme} from "@mui/material/styles";
 import {AbilityUrl, AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
 import {IWeapon} from "../types/IUnit";
 import ArmorTypeNames from "../types/ArmorTypeValues";
 import {
     AccordionDetails,
     Grid2,
-    styled,
     Table,
     TableBody,
     TableCell,
-    tableCellClasses,
     TableContainer, TableHead,
     TableRow, ToggleButton, ToggleButtonGroup
 } from "@mui/material";
 import ArmorType from "./ArmorType";
 import Required from "./Required";
-import {renderAffectedResearches} from "./building/Research";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
 import {IRaceUnits} from "../types/IUnitShort";
@@ -28,36 +26,22 @@ import AbilitySpawnedObject from "./AbilitySpawnedObject";
 import DpsTable from "./DpsTable";
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {StyledPaper} from "../commons/StyledPaper";
+import {StyledTableCell} from "../commons/StyledTableCell";
 
 interface IAbilityFullState {
     ability?: IAbilityFill;
 }
 
 export default function AbilityFull(props: { abilityId?: number, mod: IMod, race: Irace, isChild?: boolean, abilityFull?: IAbilityFill }) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const [abilityFull, setAbilityFull] = useState<IAbilityFullState>({
         ability: undefined,
     });
 
 
-    const StyledTableCell = styled(TableCell)(({theme}) => ({
-        [`&.${tableCellClasses.head}`]: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
-            fontWeight: 700,
-            marginRight: 'auto',
-            marginLeft: 'auto',
-            paddingLeft: 10,
-            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
-        },
-        [`&.${tableCellClasses.body}`]: {
-            fontSize: 12,
-            textAlign: 'center',
-            color: '#dee2e6',
-            paddingRight: 18,
-            paddingLeft: 10,
-        },
-    }));
-
     useEffect(() => {
 
         if(props.abilityFull !== undefined){
@@ -94,11 +78,11 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
         const showTargetTable = !showDpsTable && ability.abilityEnvironment == null && (ability.targetFilter.length > 0 || ability.radius !== 0)
 
         return (
-            <div style={{color: '#dee2e6'}}>
+            <div style={{color: textColor}}>
                 <Grid2 container spacing={2}>
                     <Grid2 size={{xs: 12}}>
                         {ability.initialDelayTime !== undefined  && props.isChild === true &&
-                            <b><br/><center style={{color: '#dee2e6'}}>&nbsp;After  {ability.initialDelayTime.toFixed(1)}s&nbsp;
+                            <b><br/><center style={{color: textColor}}>&nbsp;After  {ability.initialDelayTime.toFixed(1)}s&nbsp;
                                 <img style={{verticalAlign: "top"}}
                                      src="/images/Time_icon.webp"/></center></b>}
                     </Grid2>
@@ -201,7 +185,7 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
                     </Grid2>
                     {showDpsTable ?
                         <Grid2 size={12}>
-                            {(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: '#dee2e6'}}>Every <b style={{color: '#dee2e6'}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
+                            {(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: textColor}}>Every <b style={{color: textColor}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
                             <DpsTable mod={props.mod} minDamageValue={ability.minDamageValue} minDamage={ability.minDamage} maxDamage={ability.maxDamage} piercings={ability.piercings} targetFilter={ability.targetFilter} moraleDamage={ability.moraleDamage}
                                       />
                         </Grid2> : showTargetTable ?
diff --git a/src/classes/AbilitySpawnedObject.tsx b/src/classes/AbilitySpawnedObject.tsx
index 46eb817..6747b8a 100644
--- a/src/classes/AbilitySpawnedObject.tsx
+++ b/src/classes/AbilitySpawnedObject.tsx
@@ -4,13 +4,14 @@ import {
     AccordionSummary, Grid2,
     Table,
     TableBody,
-    TableCell, TableContainer,
+    TableContainer,
     TableRow,
     Tooltip,
     Typography
 } from "@mui/material";
 import {ExpandMore} from "@mui/icons-material";
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IAbilityShort} from "../types/IAbility";
 import {getIcon} from "./ModifiersProvideTable";
 import {IMod} from "../types/Imod";
@@ -25,6 +26,7 @@ import DeathExplosion from "./DeathExplosion";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {StyledPaper} from "../commons/StyledPaper";
+import {StyledTableCell} from "../commons/StyledTableCell";
 
 const SectionTitle = styled(Typography)(({ theme }) => ({
     fontWeight: 700,
@@ -40,10 +42,13 @@ interface AbilityEnvironmentProps {
 }
 
 function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const abilityEnvironment = props.abilityEnvironment
 
-    return <div style={{color: '#dee2e6'}}>
+    return <div style={{color: textColor}}>
         <SectionTitle>
             {props.abilityEnvironment.name ?? props.abilityEnvironment.filename.charAt(0).toUpperCase() + props.abilityEnvironment.filename.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
             <i style={{fontSize: 11, color: 'rgba(255,255,255,0.5)'}}> (Spawned object)</i>
@@ -57,23 +62,23 @@ function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
                                 <TableRow
                                     sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                 >
-                                    <TableCell component="th" scope="row" >Armor type</TableCell>
-                                    <TableCell>
+                                    <StyledTableCell component="th" scope="row" >Armor type</StyledTableCell>
+                                    <StyledTableCell>
                                         {abilityEnvironment.armorType2 == null ?
                                             <ArmorType name={abilityEnvironment.armorType.name} compact={false}/> :
                                             <Tooltip
                                                 title={"upgrade/debuff can turns to " + abilityEnvironment.armorType2.name}><span><ArmorType
                                                 name={abilityEnvironment.armorType.name}
                                                 compact={false}/></span></Tooltip>}
-                                    </TableCell>
+                                    </StyledTableCell>
                                 </TableRow>
                             }
                             {abilityEnvironment.health !== null &&
                                 <TableRow
                                     sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                 >
-                                    <TableCell component="th" scope="row" >Health</TableCell>
-                                    <TableCell>
+                                    <StyledTableCell component="th" scope="row" >Health</StyledTableCell>
+                                    <StyledTableCell>
                                         <img style={{verticalAlign: "top"}}
                                              src="/images/Health_icon.webp"/>&nbsp;
                                         {abilityEnvironment.health} {abilityEnvironment.healthRegeneration != null && abilityEnvironment.healthRegeneration > 0 &&
@@ -81,36 +86,36 @@ function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
                                         {abilityEnvironment.armour !== undefined && abilityEnvironment.armour !== 0 &&
                                             <span><img style={{height: 20, verticalAlign: "top"}}
                                                        src="/images/defence.png"/>{abilityEnvironment.armour} </span>}
-                                    </TableCell>
+                                    </StyledTableCell>
                                 </TableRow>
                             }
                             {abilityEnvironment.moveSpeed != null &&
                                 <TableRow
                                     sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                 >
-                                    <TableCell component="th" scope="row" >Move speed</TableCell>
-                                    <TableCell>{abilityEnvironment.moveSpeed}</TableCell>
+                                    <StyledTableCell component="th" scope="row" >Move speed</StyledTableCell>
+                                    <StyledTableCell>{abilityEnvironment.moveSpeed}</StyledTableCell>
                                 </TableRow>
                             }
                             {abilityEnvironment.sightRadius != null &&
                                 <TableRow
                                     sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                 >
-                                    <TableCell component="th" scope="row" >Vision</TableCell>
-                                    <TableCell>
+                                    <StyledTableCell component="th" scope="row" >Vision</StyledTableCell>
+                                    <StyledTableCell>
                                         <Vision sight={abilityEnvironment.sightRadius ?? 0}
                                                 detect={abilityEnvironment.detectRadius ?? 0}/>
-                                    </TableCell>
+                                    </StyledTableCell>
                                 </TableRow>
                             }
                             {abilityEnvironment.lifetime != null &&
                                 <TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
-                                    <TableCell component="th" scope="row" >Lifetime</TableCell>
-                                    <TableCell>
+                                    <StyledTableCell component="th" scope="row" >Lifetime</StyledTableCell>
+                                    <StyledTableCell>
                                         <img style={{verticalAlign: "top"}}
                                              src="/images/Time_icon.webp"/>&nbsp;
                                         {abilityEnvironment.lifetime.toFixed(0)}s&nbsp;
-                                    </TableCell>
+                                    </StyledTableCell>
                                 </TableRow>
                             }
                         </TableBody>
diff --git a/src/classes/ArmorType.tsx b/src/classes/ArmorType.tsx
index 9f87dbe..e8bca0e 100644
--- a/src/classes/ArmorType.tsx
+++ b/src/classes/ArmorType.tsx
@@ -53,6 +53,8 @@ class ArmorType extends React.Component<IArmorType, any> {
                 return '/images/ARM_Dmn_Hi.webp';
             case 'Titan':
                 return '/images/ARM_titan.webp';
+            case 'Morale damage':
+                return '/images/ARM_Morale.webp';
             default:
                 return armorTypeId;
         }
diff --git a/src/classes/DeathExplosion.tsx b/src/classes/DeathExplosion.tsx
index 69a29ea..21cde68 100644
--- a/src/classes/DeathExplosion.tsx
+++ b/src/classes/DeathExplosion.tsx
@@ -3,12 +3,13 @@ import {
     AccordionSummary, Grid2,
     Table,
     TableBody,
-    TableCell, TableContainer, TableHead,
+    TableContainer, TableHead,
     TableRow,
     Tooltip
 } from "@mui/material";
 import {ExpandMore} from "@mui/icons-material";
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IAbilityShort} from "../types/IAbility";
 import {getIcon, ModifiersProvidesTable} from "./ModifiersProvideTable";
 import {IMod} from "../types/Imod";
@@ -26,6 +27,7 @@ import DpsTable from "./DpsTable";
 import {StyledAccordion} from "../commons/StyledAccordion";
 import {StyledPaper} from "../commons/StyledPaper";
 import {styled} from "@mui/material/styles";
+import {StyledTableCell} from "../commons/StyledTableCell";
 
 
 interface DeathExpProps {
@@ -34,6 +36,9 @@ interface DeathExpProps {
 }
 
 function DeathExplosion(props: DeathExpProps) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const deathExplosion = props.deathExplosion
     const chanceTotalNotZero = deathExplosion.globalChance * deathExplosion.chance != 0
@@ -41,15 +46,15 @@ function DeathExplosion(props: DeathExpProps) {
     return chanceTotalNotZero ?
             <div className='addon-research-accordion' id='death-explosion'><StyledAccordion>
                 <AccordionSummary
-                    sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
-                    expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+                    sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+                    expandIcon={<ExpandMore sx={{color: textColor}}/>}
                     aria-controls="panel1-content"
                 >
-            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
+            <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 Death Explosion
             </span>
                 </AccordionSummary>
-                <AccordionDetails sx={{color: '#dee2e6'}}>
+                <AccordionDetails sx={{color: textColor}}>
                     <Grid2 container spacing={2}>
                         <Grid2 size={{xs: 12, md: 4}}>
                             <TableContainer component={StyledPaper} elevation={0}>
@@ -58,18 +63,18 @@ function DeathExplosion(props: DeathExpProps) {
                                         <TableRow
                                             sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                         >
-                                            <TableCell component="th" scope="row" >Chance</TableCell>
-                                            <TableCell>{deathExplosion.globalChance * deathExplosion.chance}%</TableCell>
+                                            <StyledTableCell component="th" scope="row" >Chance</StyledTableCell>
+                                            <StyledTableCell>{deathExplosion.globalChance * deathExplosion.chance}%</StyledTableCell>
                                         </TableRow>
                                         <TableRow
                                             sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                         >
-                                            <TableCell component="th" scope="row" >Damage radius</TableCell>
-                                            <TableCell>{deathExplosion.damageRadius}</TableCell>
+                                            <StyledTableCell component="th" scope="row" >Damage radius</StyledTableCell>
+                                            <StyledTableCell>{deathExplosion.damageRadius}</StyledTableCell>
                                         </TableRow>
                                         <TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
-                                            <TableCell component="th" scope="row" >Throw force</TableCell>
-                                            <TableCell>{deathExplosion.throwForceMin} - {deathExplosion.throwForceMax}</TableCell>
+                                            <StyledTableCell component="th" scope="row" >Throw force</StyledTableCell>
+                                            <StyledTableCell>{deathExplosion.throwForceMin} - {deathExplosion.throwForceMax}</StyledTableCell>
                                         </TableRow>
                                     </TableBody>
                                 </Table>
diff --git a/src/classes/DpsTable.tsx b/src/classes/DpsTable.tsx
index 275844a..d5d520b 100644
--- a/src/classes/DpsTable.tsx
+++ b/src/classes/DpsTable.tsx
@@ -1,11 +1,8 @@
 import React from "react";
 import ArmorTypeNames from "../types/ArmorTypeValues";
 import {
-    styled,
     Table,
     TableBody,
-    TableCell,
-    tableCellClasses,
     TableContainer,
     TableHead,
     TableRow
@@ -14,27 +11,10 @@ import ArmorType from "./ArmorType";
 import {IMod} from "../types/Imod";
 import {IPiercing} from "../types/IPiercing";
 import {IArmorType} from "../types/IArmorType";
+import {StyledTableCell} from "../commons/StyledTableCell";
 
 export default function DpsTable(props: { mod: IMod, minDamageValue?: number, minDamage?: number, maxDamage?: number, piercings: IPiercing[], targetFilter: IArmorType[], moraleDamage?: number }) {
 
-    const StyledTableCell = styled(TableCell)(({theme}) => ({
-        [`&.${tableCellClasses.head}`]: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
-            fontWeight: 700,
-            marginRight: 'auto',
-            marginLeft: 'auto',
-            paddingLeft: 10,
-            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
-        },
-        [`&.${tableCellClasses.body}`]: {
-            fontSize: 12,
-            textAlign: 'center',
-            color: '#dee2e6',
-            paddingRight: 18,
-            paddingLeft: 10,
-        },
-    }));
-
         function getPiercingK(armorType: string): number|null {
             if(props.targetFilter.length > 0 && props.targetFilter.find(tf => tf.name == armorType) === undefined) return null
             const piercing = props.piercings.find((p) => p.armorType.name === armorType)
@@ -153,10 +133,8 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
                                     name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
                                 <StyledTableCell><ArmorType
                                     name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
-                                <StyledTableCell><img style={{verticalAlign: "top"}}
-                                                      src="/images/ARM_Morale.webp"/>
-                                    <div style={{width: 20, fontSize: 12, height: 50}}>
-                                        <i>Morale</i></div>
+                                <StyledTableCell><ArmorType
+                                    name='Morale damage'/>
                                 </StyledTableCell>
                             </TableRow>
                         </TableHead>
@@ -207,10 +185,9 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
                                     name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
                                 <StyledTableCell><ArmorType
                                     name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
-                                <StyledTableCell><img style={{verticalAlign: "top"}}
-                                                      src="/images/ARM_Morale.webp"/>
-                                    <div style={{width: 20, fontSize: 12, height: 50}}>
-                                        <i>Morale</i></div>
+                                <StyledTableCell>
+                                    <ArmorType
+                                        name='Morale damage'/>
                                 </StyledTableCell>
                             </TableRow>
                         </TableHead>
diff --git a/src/classes/ModifiersProvideTable.tsx b/src/classes/ModifiersProvideTable.tsx
index 374c859..21c6819 100644
--- a/src/classes/ModifiersProvideTable.tsx
+++ b/src/classes/ModifiersProvideTable.tsx
@@ -1,5 +1,6 @@
 import {Paper, Table, TableCell, TableContainer, TableRow} from "@mui/material";
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IModifier} from "../types/IModifier";
 import {IconUrl} from "../core/api";
 import {Irace} from "../types/Irace";
@@ -142,6 +143,9 @@ function getChangeDescription(ref: String, v: number) {
 }
 
 export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     let noWeaponMods = props.modifiers.filter(m => !m.reference.includes("default_weapon_modifier_hardpoint"))
 
@@ -152,8 +156,8 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
                     <TableRow
                         sx={{'&:last-child td, &:last-child th': {border: 0}}}
                     >
-                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModName(m.reference)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: textColor}}>{getModName(m.reference)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: textColor}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
                     </TableRow>
                 )}
             </Table>
@@ -162,6 +166,9 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
 }
 
 export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     let mods = props.modifiers
 
@@ -237,9 +244,9 @@ export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
                     <TableRow
                         sx={{'&:last-child td, &:last-child th': {border: 0}}}
                     >
-                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getTarget(m.target)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: '#dee2e6', minWidth: 120}}>{getModName(m.reference)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
+                        <TableCell component="th" scope="row" sx={{color: textColor}}>{getTarget(m.target)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: textColor, minWidth: 120}}>{getModName(m.reference)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: textColor}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
                             {m.maxLifeTime !== undefined && m.maxLifeTime > 0 &&
                                 <span><img style={{verticalAlign: "top"}} src='/images/Time_icon.webp'/>{m.maxLifeTime}s
                         </span>}
diff --git a/src/classes/Required.tsx b/src/classes/Required.tsx
index 0a0663e..09453bc 100644
--- a/src/classes/Required.tsx
+++ b/src/classes/Required.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IBuildingShort} from "../types/IBuildingShort";
 import {IBuildingAddonShort} from "../types/IBuilding";
 import {IconUrl} from "../core/api";
@@ -14,6 +15,9 @@ interface IRequiredProps{
 }
 
 function Required (props: IRequiredProps) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     function renderRequirementGlobalAddons(rgas: IBuildingAddonShort[],) {
 
@@ -115,20 +119,20 @@ function Required (props: IRequiredProps) {
 
 
     return (
-        <div style={{color: '#dee2e6'}}>
-            <h4 style={{color: '#dee2e6', fontWeight: 700}}>Required: </h4>
+        <div style={{color: textColor}}>
+            <h4 style={{color: textColor, fontWeight: 700}}>Required: </h4>
             {requirement.requiredTotalPop !== undefined && requirement.requiredTotalPop !== null &&
-                <div style={{color: '#dee2e6'}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: textColor}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
                                              src="/images/Resource_orksquadcap.gif"/>&nbsp;
                     {requirement.requiredTotalPop}</div>
             }
             {requirement.mobBonus !== null && requirement.mobBonus !== undefined &&
-                <div style={{color: '#dee2e6'}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: textColor}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
                                              src="/images/Mob_bonus.gif"/>&nbsp;
                     {requirement.mobBonus.mobvalueRequired} in radius {requirement.mobBonus.proximityRequired}</div>
             }
             {requirement.requireAddon !== null &&
-                <div style={{color: '#dee2e6'}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: textColor}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
                                         src={IconUrl + requirement.requireAddon.icon.replaceAll('\\', '/')}/>&nbsp;
                     <StyledLink href={`/mod/${props.modId}/race/${props.raceId}/building/${requirement.requireAddon.buildingId}#addon-${requirement.requireAddon.id}`}>
                         {requirement.requireAddon.name}
@@ -137,26 +141,26 @@ function Required (props: IRequiredProps) {
                 </div>
             }
             {requirement.requirementAddonExclusive != null &&
-                <div style={{color: '#dee2e6'}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
+                <div style={{color: textColor}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
             {requirement.requirementBuildings.map(b =>
-                <div key={b.id} style={{color: '#dee2e6'}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
+                <div key={b.id} style={{color: textColor}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
                                            src={IconUrl + b.icon.replaceAll('\\', '/')}/>&nbsp;
                     <StyledLink href= {'/mod/'+ props.modId +'/race/'+ props.raceId +'/building/' + b.id + "/"}>{b.name}</StyledLink></div>)
             }
             {requirement.requirementResearches.length !== 0 &&
-                <div style={{color: '#dee2e6'}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
+                <div style={{color: textColor}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
             {requirement.requirementSquads.length !== 0 &&
-                <div style={{color: '#dee2e6'}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
+                <div style={{color: textColor}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
             {requirement.requirementResearchesEither.length !== 0 &&
-                <div style={{color: '#dee2e6'}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
+                <div style={{color: textColor}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
             {requirement.requirementBuildingsEither.length !== 0 &&
-                <div style={{color: '#dee2e6'}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
+                <div style={{color: textColor}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
             {requirement.requirementStructureExclusive != null &&
-                <div style={{color: '#dee2e6'}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
-            {requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: '#dee2e6'}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
+                <div style={{color: textColor}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
+            {requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: textColor}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
             {requirement.requirementsGlobalAddons.length !== 0 &&
-                <div style={{color: '#dee2e6'}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
-            <div style={{color: '#dee2e6'}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
+                <div style={{color: textColor}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
+            <div style={{color: textColor}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
         </div>
     )
 }
diff --git a/src/classes/Sergeant.tsx b/src/classes/Sergeant.tsx
index f9a221b..1ef52c1 100644
--- a/src/classes/Sergeant.tsx
+++ b/src/classes/Sergeant.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {ISergeant, IShortWeapon} from "../types/IUnit";
 import {Grid2, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
@@ -6,7 +7,7 @@ import ArmorType from "./ArmorType";
 import WeaponSlot from "./WeaponSlot";
 import Vision from "./Vision";
 import {IMod} from "../types/Imod";
-import {renderAffectedResearches} from "./building/Research";
+import {AffectedResearches} from "./building/Research";
 import {Irace} from "../types/Irace";
 import Required from "./Required";
 import {ModifiersProvidesTable} from "./ModifiersProvideTable";
@@ -30,6 +31,9 @@ export interface SergeantProps {
 }
 
 const Sergeant = (props: SergeantProps) => {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const sergeant = props.sergeant
 
@@ -47,7 +51,7 @@ const Sergeant = (props: SergeantProps) => {
     })
 
     return (
-        <div style={{color: '#dee2e6'}}>
+        <div style={{color: textColor}}>
             <Grid2 container spacing={2}>
                 <Grid2 size= {{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>
@@ -189,7 +193,7 @@ const Sergeant = (props: SergeantProps) => {
                     </Grid2>
                 }
                 <Grid2 size={12}>
-                    {renderAffectedResearches(sergeant.affectedResearches, props.mod.id, props.race.id)}
+                    <AffectedResearches researches={sergeant.affectedResearches} modId={props.mod.id} raceId={props.race.id} />
                 </Grid2>
             </Grid2>
             <b className="hotkey" >Hotkey: {sergeant.hotkey}</b>
diff --git a/src/classes/UnitsTable.tsx b/src/classes/UnitsTable.tsx
index 74af101..4e21e69 100644
--- a/src/classes/UnitsTable.tsx
+++ b/src/classes/UnitsTable.tsx
@@ -9,10 +9,10 @@ import {StyledPaper} from "../commons/StyledPaper";
 
 const StyledTable = styled(Table)(({ theme }) => ({
     '& .MuiTableCell-head': {
-        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
         fontWeight: 700,
         fontSize: '1rem',
-        borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
+        borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.2)'}`,
     },
     '& .MuiTableCell-body': {
         color: theme.palette.text.primary,
@@ -20,7 +20,7 @@ const StyledTable = styled(Table)(({ theme }) => ({
         fontSize: '0.9rem',
     },
     '& .MuiTableRow-hover:hover': {
-        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(233, 69, 96, 0.08)',
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)',
     },
 }));
 
@@ -28,7 +28,7 @@ const StyledHeaderLink = styled(StyledLink)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '1.1rem',
     '&:hover': {
-        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
     },
 }));
 
@@ -95,11 +95,11 @@ export default function UnitsTable(prop: {modId: number}) {
                 return 3;
             case 'Demon Medium':
                 return 4;
-            case 'Infantry Heavy Medium':
+            case 'Infantry H.Med.':
                 return 5;
-            case 'Infantry Heavy High':
+            case 'Infantry H.High':
                 return 6;
-            case 'Commander':
+            case 'Infantry Com.':
                 return 7;
             case 'Vehicle Low':
                 return 8;
@@ -109,7 +109,7 @@ export default function UnitsTable(prop: {modId: number}) {
                 return 10;
             case 'Demon High':
                 return 11;
-            case 'Air':
+            case 'Vehicle Air':
                 return 12;
             case 'Building Low':
                 return 13;
@@ -131,7 +131,7 @@ export default function UnitsTable(prop: {modId: number}) {
     }
 
     function generateRaceUnitTable(racesUnitsPart: IRaceUnits[], racesBuildings: IRaceBuildings[]){
-        return (<StyledPaper elevation={0}>
+        return (<StyledPaper elevation={0} sx={{borderRadius: 0}}>
             {<StyledTable sx={{minWidth: 650}} size="small" aria-label="a dense table">
                 <TableHead>
                     <TableRow>
diff --git a/src/classes/Weapon.tsx b/src/classes/Weapon.tsx
index b1bef73..5877390 100644
--- a/src/classes/Weapon.tsx
+++ b/src/classes/Weapon.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {IShortWeapon, IWeapon} from "../types/IUnit";
 import {AccordionDetails, AccordionSummary} from "@mui/material";
+import {withTheme} from "../core/api";
 import {IconUrl} from "../core/api";
 import {ExpandMore} from "@mui/icons-material";
 import {IMod} from "../types/Imod";
@@ -31,18 +32,21 @@ class Weapon extends React.Component<IWeaponProps, any> {
 
 
     render() {
+        const theme = (this.props as any).theme;
+        const isDark = theme.palette.mode === 'dark';
+        const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
         const weapon = this.props.weapon
 
         return (
             <div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
                 <AccordionSummary
-                    expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+                    expandIcon={<ExpandMore sx={{color: textColor}}/>}
                     aria-controls="panel1-content"
                     id="panel1-header"
-                    sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+                    sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
                 >
-                    <span style={{fontSize: 18, color: '#dee2e6', display: 'flex', alignItems: 'center'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
+                    <span style={{fontSize: 18, color: textColor, display: 'flex', alignItems: 'center'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
                         <img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
                             weapon.isMeleeWeapon ?
                                 <img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
@@ -51,7 +55,7 @@ class Weapon extends React.Component<IWeaponProps, any> {
                         {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
                     </span>
                 </AccordionSummary>
-                <AccordionDetails sx={{color: '#dee2e6'}}>
+                <AccordionDetails sx={{color: textColor}}>
                     <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
                 </AccordionDetails>
             </StyledAccordion></div>
@@ -59,4 +63,4 @@ class Weapon extends React.Component<IWeaponProps, any> {
     }
 }
 
-export default Weapon;
\ No newline at end of file
+export default withTheme(Weapon);
diff --git a/src/classes/WeaponFull.tsx b/src/classes/WeaponFull.tsx
index 25d3243..d5a2100 100644
--- a/src/classes/WeaponFull.tsx
+++ b/src/classes/WeaponFull.tsx
@@ -1,21 +1,20 @@
 import React, {useEffect, useState} from "react";
+import {useTheme} from "@mui/material/styles";
 import {AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
 import {IWeapon} from "../types/IUnit";
 import ArmorTypeNames from "../types/ArmorTypeValues";
 import {
     AccordionDetails,
     Grid2,
-    styled,
     Table,
     TableBody,
     TableCell,
-    tableCellClasses,
     TableContainer, TableHead,
     TableRow, ToggleButton, ToggleButtonGroup
 } from "@mui/material";
 import ArmorType from "./ArmorType";
 import Required from "./Required";
-import {renderAffectedResearches} from "./building/Research";
+import {AffectedResearches} from "./building/Research";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
 import {IRaceUnits} from "../types/IUnitShort";
@@ -23,6 +22,7 @@ import {IRaceBuildings} from "../types/IBuildingShort";
 import {ModifiersProvidesTable} from "./ModifiersProvideTable";
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {StyledPaper} from "../commons/StyledPaper";
+import {StyledTableCell} from "../commons/StyledTableCell";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
 
 interface IWeaponFull {
@@ -31,29 +31,15 @@ interface IWeaponFull {
 }
 
 export default function WeaponFull(props: {weaponId: number, isDefault: Boolean, mod: IMod, race: Irace, haveReinforceMenu: Boolean}) {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const [weaoponFull, setWeaponFull] = useState<IWeaponFull>({
         currentTable: "dps",
         weapon: undefined,
     });
 
-    const StyledTableCell = styled(TableCell)(({theme}) => ({
-        [`&.${tableCellClasses.head}`]: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
-            marginRight: 'auto',
-            marginLeft: 'auto',
-            paddingLeft: 10,
-            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
-        },
-        [`&.${tableCellClasses.body}`]: {
-            fontSize: 12,
-            textAlign: 'center',
-            color: '#dee2e6',
-            paddingRight: 18,
-            paddingLeft: 10,
-        },
-    }));
-
     useEffect(() => {
 
         fetch(WeaponUrl + "/" + props.mod.id + "/" + props.weaponId)
@@ -137,7 +123,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
 
 
         return (
-            <div style={{color: '#dee2e6'}}>
+            <div style={{color: textColor}}>
                 <Grid2 container spacing={2}>
                     {!props.isDefault && <Grid2 size={12}>
                          <DescriptionBox>
@@ -248,8 +234,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                             onChange={handleChange}
                             sx={{ mb: 2 }}
                         >
-                                                        <ToggleButton size="small" value="dps" sx={{ color: '#dee2e6', '&.Mui-selected': { borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' }  }}>Dps</ToggleButton>
-                            <ToggleButton size="small" value="one hit" sx={{ color: '#dee2e6', '&.Mui-selected': {borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' } }}>One hit average damage</ToggleButton>
+                                                        <ToggleButton size="small" value="dps" sx={{ color: textColor, '&.Mui-selected': { borderColor: textColor, color: textColor, backgroundColor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)' }  }}>Dps</ToggleButton>
+                            <ToggleButton size="small" value="one hit" sx={{ color: textColor, '&.Mui-selected': {borderColor: textColor, color: textColor, backgroundColor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)' } }}>One hit average damage</ToggleButton>
                         </ToggleButtonGroup>
                         <TableContainer>
                             { props.mod !== undefined && props.mod.technicalName === 'UltimateApocalypse' ?
@@ -313,7 +299,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                                                 name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
                                             <StyledTableCell><img style={{verticalAlign: "top"}}
                                                                   src="/images/ARM_Morale.webp"/>
-                                                <div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
+                                                <div style={{width: 20, fontSize: 12, height: 50, color: textColor}}>
                                                     <i>Morale</i></div>
                                             </StyledTableCell>
                                         </TableRow>
@@ -365,10 +351,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                                                 name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
                                             <StyledTableCell><ArmorType
                                                 name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
-                                            <StyledTableCell><img style={{verticalAlign: "top"}}
-                                                                  src="/images/ARM_Morale.webp"/>
-                                                <div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
-                                                    <i>Morale</i></div>
+                                            <StyledTableCell><ArmorType
+                                                name='Morale damage'/>
                                             </StyledTableCell>
                                         </TableRow>
                                     </TableHead>
@@ -399,7 +383,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
 
                     </Grid2>
                     {weapon.modifiers.length > 0  && <Grid2 size={12}>
-                        <h3 style={{color: '#dee2e6', fontWeight: 700}}>Modifiers</h3>
+                        <h3 style={{color: textColor, fontWeight: 700}}>Modifiers</h3>
                         <ModifiersProvidesTable modifiers={weapon.modifiers} modId={props.mod.id} race={props.race} affectedData={null}/>
                     </Grid2>}
                     {weapon.requirements !== null && !props.isDefault && props.haveReinforceMenu &&
@@ -407,7 +391,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                             <Required requirement={weapon.requirements} modId={props.mod.id} raceId={props.race.id}/>
                         </Grid2>}
                     <Grid2 size={12}>
-                        {renderAffectedResearches(weapon.affectedResearches, props.mod.id, props.race.id)}
+                        <AffectedResearches researches={weapon.affectedResearches} modId={props.mod.id} raceId={props.race.id} />
                     </Grid2>
                 </Grid2>
                 {!props.isDefault && props.haveReinforceMenu && <b className="hotkey" >Hotkey: {weapon.hotkey}</b>}
diff --git a/src/classes/building/BuildingAddon.tsx b/src/classes/building/BuildingAddon.tsx
index 09f0edb..84e6756 100644
--- a/src/classes/building/BuildingAddon.tsx
+++ b/src/classes/building/BuildingAddon.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {
     AccordionDetails,
     AccordionSummary,
@@ -29,6 +30,9 @@ interface IBuildingAddonProps {
 }
 
 function BuildingAddon(props: IBuildingAddonProps){
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const addon = props.addon
     const building = props.building
@@ -37,16 +41,16 @@ function BuildingAddon(props: IBuildingAddonProps){
 
     return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
         <AccordionSummary
-            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
-            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+            sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: textColor}}/>}
             aria-controls="panel1-content"
         >
-            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
+            <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                     &nbsp; {addon.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: '#dee2e6'}}>
+        <AccordionDetails sx={{color: textColor}}>
             <Grid2 container spacing={2}>
                 <Grid2 size={{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>
diff --git a/src/classes/building/Research.tsx b/src/classes/building/Research.tsx
index 761e151..671d5cd 100644
--- a/src/classes/building/Research.tsx
+++ b/src/classes/building/Research.tsx
@@ -13,24 +13,13 @@ import {
 } from "@mui/material";
 import {ExpandMore} from "@mui/icons-material";
 import {getIcon, ModifiersProvidesTable} from "../ModifiersProvideTable";
-import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
-import Required from "../Required";
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {IBuilding} from "../../types/IBuilding";
 import {IResearchShort} from "../../types/IResearchShort";
 import ResearchFull from "./ResearchFull";
 import {StyledAccordion} from "../../commons/StyledAccordion";
-import {styled} from "@mui/material/styles";
-
-const StyledLink = styled('a')(({ theme }) => ({
-    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
-    textDecoration: 'none',
-    '&:hover': {
-        color: theme.palette.mode === 'dark' ? '#cccccc' : '#ff6b6b',
-        textDecoration: 'underline',
-    },
-}));
-
+import {StyledLink} from "../../commons/StyledLink";
 
 interface IResearchProps {
     research: IResearchShort,
@@ -39,29 +28,36 @@ interface IResearchProps {
 }
 
 function Research(props: IResearchProps){
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const research = props.research
     const building = props.building
 
     return <div className='addon-research-accordion' id={"research-" + research.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
         <AccordionSummary
-            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
-            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+            sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: textColor}}/>}
             aria-controls="panel1-content"
         >
-                <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
+                <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(research.icon)}/>
                     &nbsp; {research.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: '#dee2e6'}}>
+        <AccordionDetails sx={{color: textColor}}>
             <ResearchFull id={research.id} building={building}/>
         </AccordionDetails>
     </StyledAccordion></div>
 
 }
 
-export function renderAffectedResearches(researches: IResearchShort[], modId: number, raceId: string) {
+export function AffectedResearches(props: { researches: IResearchShort[], modId: number, raceId: string }) {
+    const { researches, modId, raceId } = props;
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     function researchLink(rs: IResearchShort) {
         return <span><img style={{verticalAlign: "top", height: 25}}
@@ -71,7 +67,7 @@ export function renderAffectedResearches(researches: IResearchShort[], modId: nu
                 </StyledLink></span>
     }
 
-    return <div style={{color: '#dee2e6'}}> {researches.map(rs =>
+    return <div style={{color: textColor}}> {researches.map(rs =>
         rs.buildingId == null ? <span key={rs.id}></span> :
             <span key={rs.id}>Research affect: {researchLink(rs)}<br/></span>
     )}</div>
diff --git a/src/commons/BackButton.tsx b/src/commons/BackButton.tsx
index c09cb11..05434f8 100644
--- a/src/commons/BackButton.tsx
+++ b/src/commons/BackButton.tsx
@@ -1,14 +1,17 @@
 import {Button, Link} from "@mui/material";
 import {styled} from '@mui/material/styles';
 
-export const BackButton = styled(Button)(({ theme }) => ({
-    marginBottom: theme.spacing(3),
-    color: '#FFD700',
-    borderColor: 'rgba(255, 215, 0, 0.5)',
-    textTransform: 'none',
-    fontWeight: 600,
-    '&:hover': {
-        borderColor: '#FFD700',
-        backgroundColor: 'rgba(255, 215, 0, 0.1)',
-    },
-}));
\ No newline at end of file
+export const BackButton = styled(Button)(({ theme }) => {
+    const isDark = theme.palette.mode === 'dark';
+    return {
+        marginBottom: theme.spacing(3),
+        color: isDark ? '#FFD700' : '#1976d2',
+        borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
+        textTransform: 'none',
+        fontWeight: 600,
+        '&:hover': {
+            borderColor: isDark ? '#FFD700' : '#1976d2',
+            backgroundColor: isDark ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
+        },
+    };
+});
diff --git a/src/commons/StyledLink.tsx b/src/commons/StyledLink.tsx
index 68da5c3..a79b218 100644
--- a/src/commons/StyledLink.tsx
+++ b/src/commons/StyledLink.tsx
@@ -2,11 +2,11 @@ import {Link} from "@mui/material";
 import {styled} from '@mui/material/styles';
 
 export const StyledLink = styled(Link)(({ theme }) => ({
-    color: theme.palette.mode === 'dark' ? '#abc3ff' : '#e94560BB',
+    color: theme.palette.mode === 'dark' ? '#abc3ff' : '#1976d2',
     textDecoration: 'none',
     transition: 'all 0.2s ease',
     '&:hover': {
-        color: theme.palette.mode === 'dark' ? '#ffffff' : '#ff6b6bBB',
+        color: theme.palette.mode === 'dark' ? '#ffffff' : '#1565c0',
         textDecoration: 'underline',
     },
 }));
diff --git a/src/commons/StyledPaper.tsx b/src/commons/StyledPaper.tsx
index a593891..587729b 100644
--- a/src/commons/StyledPaper.tsx
+++ b/src/commons/StyledPaper.tsx
@@ -12,7 +12,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
         color: theme.palette.text.primary,
     },
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
         fontWeight: 600,
     },
 }));
diff --git a/src/commons/StyledTableCell.tsx b/src/commons/StyledTableCell.tsx
new file mode 100644
index 0000000..8bc387d
--- /dev/null
+++ b/src/commons/StyledTableCell.tsx
@@ -0,0 +1,22 @@
+import {styled, TableCell, tableCellClasses} from "@mui/material";
+
+export const StyledTableCell = styled(TableCell)(({theme}) => {
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
+    return {
+        [`&.${tableCellClasses.head}`]: {
+            backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
+            marginRight: 'auto',
+            marginLeft: 'auto',
+            paddingLeft: 10,
+            borderBottom: `2px solid ${isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.2)'}`,
+        },
+        [`&.${tableCellClasses.body}`]: {
+            fontSize: 12,
+            textAlign: 'center',
+            color: textColor,
+            paddingRight: 18,
+            paddingLeft: 10,
+        },
+    };
+});
diff --git a/src/pages/BuildingPage.tsx b/src/pages/BuildingPage.tsx
index a18bfbf..0ef205c 100644
--- a/src/pages/BuildingPage.tsx
+++ b/src/pages/BuildingPage.tsx
@@ -28,7 +28,7 @@ import {IBuilding} from "../types/IBuilding";
 import Vision from "../classes/Vision";
 import BuildingAddon from "../classes/building/BuildingAddon";
 import {IUnitShort} from "../types/IUnitShort";
-import Research, {renderAffectedResearches} from "../classes/building/Research";
+import Research, {AffectedResearches} from "../classes/building/Research";
 import Required from "../classes/Required";
 import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
 import Ability from "../classes/Ability";
@@ -57,7 +57,7 @@ const StatsPaper = styled(Paper)(({ theme }) => ({
         color: theme.palette.text.primary,
     },
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
         fontWeight: 600,
     },
 }));
@@ -83,7 +83,7 @@ const BuildingSubtitle = styled(Typography)(({ theme }) => ({
 const UnitLink = styled(Link)(({ theme }) => ({
     color: theme.palette.text.primary,
     textDecoration: 'none',
-    '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' },
+    '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' },
 }));
 
 const UnitListItem = styled(ListItem)(({ theme }) => ({
@@ -288,7 +288,7 @@ function Building(building: IBuilding, mod: IMod, theme: Theme) {
                     }).map(h => <WeaponSlot race={building.race} mod={mod} unitWeapons={mapBuildingWeapons.get(h)} hardpoint={h}/>)}
                 </Grid2>
                 <Grid2 size={12}>
-                    {renderAffectedResearches(building.affectedResearches, mod.id, building.race.id)}
+                    <AffectedResearches researches={building.affectedResearches} modId={mod.id} raceId={building.race.id} />
                 </Grid2>
                 <b className="hotkey" >Hotkey: {building.hotkey}</b>
             </Grid2>
diff --git a/src/pages/ModPage.tsx b/src/pages/ModPage.tsx
index 3b96c43..524d9e7 100644
--- a/src/pages/ModPage.tsx
+++ b/src/pages/ModPage.tsx
@@ -84,15 +84,13 @@ class ModPage extends React.Component<any, ModPageState> {
                         mb: 1,
                         WebkitBackgroundClip: isDark ? 'text' : 'initial',
                         WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
-                        color: isDark ? '#dee2e6' : '#000000',
+                        color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
                     }}>
-                        {this.state.mod.name}
-                    </Typography>
-                    <Typography variant="h6" sx={{
-                        color: this.props.theme.palette.text.secondary,
-                        fontWeight: 500,
-                    }}>
-                        ({this.state.mod.version})
+                        {this.state.mod.name} <Box component="span" sx={{
+                            fontSize: '0.5em',
+                            color: this.props.theme.palette.text.secondary,
+                            fontWeight: 500,
+                        }}>({this.state.mod.version})</Box>
                     </Typography>
 
                     <Box>
diff --git a/src/pages/ModsPage.tsx b/src/pages/ModsPage.tsx
index 47fd8e7..949f070 100644
--- a/src/pages/ModsPage.tsx
+++ b/src/pages/ModsPage.tsx
@@ -62,13 +62,13 @@ const ModCard = styled(Card)(({ theme }) => ({
         height: '3px',
         background: theme.palette.mode === 'dark'
             ? 'linear-gradient(90deg, #dee2e6 0%, #cccccc 100%)'
-            : 'linear-gradient(90deg, #e94560 0%, #ff6b6b 100%)',
+            : 'linear-gradient(90deg, #000000 0%, #333333 100%)',
         transform: 'scaleX(0)',
         transition: 'transform 0.3s ease',
     },
     '&:hover': {
-        boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(233, 69, 96, 0.2)',
-        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
+        boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
         '&::before': {
             transform: 'scaleX(1)',
         },
@@ -87,8 +87,8 @@ const VersionLink = styled(NavLink)(({ theme }) => ({
     transition: 'all 0.2s ease',
     border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     '&:hover': {
-        background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
-        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
+        background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
     },
 }));
 
@@ -97,10 +97,10 @@ const ModTitle = styled(Typography)(({ theme }) => ({
     mb: 1,
     background: theme.palette.mode === 'dark'
         ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
-        : 'linear-gradient(135deg, #000000 0%, #333333 100%)',
+        : 'none',
     WebkitBackgroundClip: theme.palette.mode === 'dark' ? 'text' : 'initial',
     WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'initial',
-    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#000000',
+    color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
 }));
 
 const ModDescription = styled(Typography)(({ theme }) => ({
@@ -109,8 +109,8 @@ const ModDescription = styled(Typography)(({ theme }) => ({
 }));
 
 const VersionsChip = styled(Chip)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(233, 69, 96, 0.2)',
-    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#ff6b6b',
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
+    color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
     fontWeight: 600,
 }));
 
@@ -140,21 +140,24 @@ const BetaVersionsLabel = styled(Typography)(({ theme }) => ({
     mb: 1,
 }));
 
-const OpenLatestButton = styled(Button)(({ theme }) => ({
-    width: '100%',
-    color: '#FFD700',
-    borderColor: 'rgba(255, 215, 0, 0.5)',
-    fontWeight: 600,
-    borderRadius: '10px',
-    textTransform: 'none',
-    fontSize: '1rem',
-    py: 1.5,
-    '&:hover': {
-        borderColor: '#FFD700',
-        backgroundColor: 'rgba(255, 215, 0, 0.1)',
-        boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
-    },
-}));
+const OpenLatestButton = styled(Button)(({ theme }) => {
+    const isDark = theme.palette.mode === 'dark';
+    return {
+        width: '100%',
+        color: isDark ? '#FFD700' : '#1976d2',
+        borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
+        fontWeight: 600,
+        borderRadius: '10px',
+        textTransform: 'none',
+        fontSize: '1rem',
+        py: 1.5,
+        '&:hover': {
+            borderColor: isDark ? '#FFD700' : '#1976d2',
+            backgroundColor: isDark ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
+            boxShadow: isDark ? '0 8px 20px rgba(255, 215, 0, 0.2)' : '0 8px 20px rgba(25, 118, 210, 0.2)',
+        },
+    };
+});
 
 interface ModsProps {
     mods: IMod[];
@@ -254,17 +257,17 @@ function Mods({ mods }: ModsProps) {
                         state={latest?.id}
                         sx={{
                             width: '100%',
-                            color: '#FFD700',
-                            borderColor: 'rgba(255, 215, 0, 0.5)',
+                            color: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
+                            borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
                             fontWeight: 600,
                             borderRadius: '10px',
                             textTransform: 'none',
                             fontSize: '1rem',
                             py: 1.5,
                             '&:hover': {
-                                borderColor: '#FFD700',
-                                backgroundColor: 'rgba(255, 215, 0, 0.1)',
-                                boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
+                                borderColor: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
+                                backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
+                                boxShadow: theme.palette.mode === 'dark' ? '0 8px 20px rgba(255, 215, 0, 0.2)' : '0 8px 20px rgba(25, 118, 210, 0.2)',
                             },
                         }}
                     >
diff --git a/src/pages/RacePageFast.tsx b/src/pages/RacePageFast.tsx
index c422fd8..f54557f 100644
--- a/src/pages/RacePageFast.tsx
+++ b/src/pages/RacePageFast.tsx
@@ -35,24 +35,27 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const UnitCard = styled(Paper)(({ theme }) => ({
-    background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)',
-    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`,
-    borderRadius: '10px',
-    padding: theme.spacing(1.5, 2),
-    transition: 'all 0.2s ease',
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+    borderRadius: '16px',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     '&:hover': {
-        background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.1)',
-        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
+        boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
     },
 }));
 
-const BuildingCard = styled(UnitCard)(({ theme }) => ({}));
+const BuildingCard = styled(UnitCard)(({ theme }) => ({
+    padding: theme.spacing(1),
+}));
 
 const UnitLink = styled(Link)(({ theme }) => ({
     color: theme.palette.text.primary,
     textDecoration: 'none',
     display: 'block',
-    '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' }
+            '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' }
 }));
 
 const LoadingText = styled(Typography)(({ theme }) => ({
@@ -75,12 +78,18 @@ function Unit(unit: IUnitShort, modId: number, raceId: String, theme: Theme) {
         <UnitLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
             <ListItem sx={{
                 color: theme.palette.text.primary,
-                padding: '6px 12px',
-                background: bgColor,
-                borderRadius: '8px',
-                border: `1px solid ${borderColor}`,
-                transition: 'all 0.2s ease',
-                '&:hover': { background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(233, 69, 96, 0.1)', borderColor: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(233, 69, 96, 0.3)' }
+                padding: '1.5rem 2rem',
+                marginBottom: '0.5rem',
+                background: isDark
+                    ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+                    : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+                borderRadius: '16px',
+                border: `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                '&:hover': {
+                    boxShadow: isDark ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
+                    borderColor: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
+                }
             }}>
                 {unit.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
                 {unit.name}
@@ -95,14 +104,14 @@ function UnitSmall(unit: IUnitShort, modId: number, raceId: String) {
 
     var unitName = ""
     if (unit.name.length > 21) {
-        unitName = unit.name.substring(0, 20) + "...";
+        unitName = unit.name.substring(0, 19) + "...";
     } else {
         unitName = unit.name;
     }
 
     return (<StyledLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} >
         {unit.icon && <img className="unitIconSmall" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
-        <span style={{fontSize: 14}}>{unitName}</span>
+        &nbsp;<span style={{fontSize: 14}}>{unitName}</span>
         {unit.canDetect && <span>&nbsp;<img
             src="/images/DETECT_YES.webp"/></span>}<br/></StyledLink>)
 }
@@ -114,14 +123,12 @@ function Building(building: IBuildingShort, modId: number, raceId: String, theme
         <Link href={"/mod/" + modId + "/race/" + raceId + "/building/" + building.id} sx={{
             textDecoration: 'none',
             display: 'block',
-            '&:hover': { color: isDark ? '#dee2e6' : '#e94560' }
+            '&:hover': { color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' }
         }}>
             <BuildingCard elevation={0}>
-                <ListItem sx={{
-                    padding: '8px 12px',
-                }}>
+                <ListItem sx={{}}>
                     {building.icon && <img className="unitIcon" src={IconUrl + building.icon.replaceAll('\\', '/')}/>}
-                    <StyledLink>{building.name}</StyledLink>
+                    &nbsp;<StyledLink>{building.name}</StyledLink>
                     {building.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/DETECT_YES.webp"/></span>}
                 </ListItem>
@@ -208,27 +215,27 @@ class Units extends React.Component<UnitsProps & { theme: Theme }, UnitsState> {
                         <Box sx={{ mt: 3 }}>
                             <Accordion sx={accordionSx}>
                                 <AccordionSummary
-                                    expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : '#000000'}}/>}
+                                    expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)'}}/>}
                                     aria-controls="units-accordion"
                                     id="units-accordion"
-                                    sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+                                    sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
                                 >
                                     <SectionTitle sx={{ mb: 0, display: 'flex', alignItems: 'center' }}>All units</SectionTitle>
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <Grid2 container spacing={2}>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Infantry</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Infantry</Typography>
                                             {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                         </Grid2>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Tech</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Tech</Typography>
                                             <List>
                                                 {this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                             </List>
                                         </Grid2>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Support</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Support</Typography>
                                             <List>
                                                 {this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                             </List>
@@ -263,6 +270,8 @@ class RacePageFast extends React.Component<any, RacePageState> {
             mod: modData
         });
 
+        document.title = `${modData.name} (${modData.version})`;
+
         const response = await fetch(AvailableRacesPart + "/" + this.props.match.params.raceId);
         const racesData: Irace = await response.json();
 
@@ -294,10 +303,10 @@ class RacePageFast extends React.Component<any, RacePageState> {
                             mb: 1,
                             background: isDark
                                 ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
-                                : 'linear-gradient(135deg, #000000 0%, #333333 100%)',
+                                : 'none',
                             WebkitBackgroundClip: isDark ? 'text' : 'initial',
                             WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
-                            color: isDark ? '#dee2e6' : '#000000',
+                            color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
                         }}>
                             {this.state.race.name}
                         </Typography>
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx
index 077b00d..ae2016a 100644
--- a/src/pages/UnitPage.tsx
+++ b/src/pages/UnitPage.tsx
@@ -29,7 +29,7 @@ import UnitsTable from "../classes/UnitsTable";
 import {IMod} from "../types/Imod";
 import Vision from "../classes/Vision";
 import Required from "../classes/Required";
-import {renderAffectedResearches} from "../classes/building/Research";
+import {AffectedResearches} from "../classes/building/Research";
 import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
 import Ability from "../classes/Ability";
 import DeathExplosion from "../classes/DeathExplosion";
@@ -55,7 +55,7 @@ const StatsPaper = styled(Paper)(({ theme }) => ({
         '&:last-child td, &:last-child th': { border: 0 },
     },
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
         fontWeight: 600,
     },
 }));
@@ -132,7 +132,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
     const SergeantShort = (props: sergeantProps) => {
 
         return (
-            <span style={{fontSize: 20, color: isDark ? '#dee2e6' : '#000000', display: 'flex', alignItems: 'center'}}>
+            <span style={{fontSize: 20, color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', display: 'flex', alignItems: 'center'}}>
                 {props.icon && <img className="sergeantIcon" src={IconUrl + props.icon.replaceAll('\\', '/')}/> }
                 &nbsp; {props.name}
                 {props.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
@@ -324,7 +324,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
                     {unit.sergeants.map(s =>
                         <SergeantAccordion key={s.id}>
                             <AccordionSummary
-                                sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
+                                sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
                                 <SergeantShort name={s.name} icon={s.icon} canDetect={s.detectRadius > 0}/>
                             </AccordionSummary>
                             <AccordionDetails sx={{color: theme.palette.text.primary}}>
@@ -366,7 +366,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
                     </Grid2>
                 }
                 <Grid2 size={12}>
-                    {renderAffectedResearches(unit.affectedResearches, mod.id, unit.race.id)}
+                    <AffectedResearches researches={unit.affectedResearches} modId={mod.id} raceId={unit.race.id} />
                 </Grid2>
             </Grid2>