diff --git a/frontend/src/components/BottomNav.module.css b/frontend/src/components/BottomNav.module.css
index 82a13e3..a150198 100644
--- a/frontend/src/components/BottomNav.module.css
+++ b/frontend/src/components/BottomNav.module.css
@@ -35,11 +35,6 @@
   color: var(--text-secondary);
 }
 
-.emojiIcon {
-  font-size: 20px;
-  line-height: 1;
-}
-
 @media (min-width: 768px) {
   .bottomNav {
     display: none;
diff --git a/frontend/src/components/BottomNav.tsx b/frontend/src/components/BottomNav.tsx
index c867909..4b83c02 100644
--- a/frontend/src/components/BottomNav.tsx
+++ b/frontend/src/components/BottomNav.tsx
@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom';
-import { Home, Trophy, User } from 'lucide-react';
+import { Home, Trophy, User, Swords } from 'lucide-react';
 import styles from './BottomNav.module.css';
 
 export default function BottomNav() {
@@ -13,7 +13,7 @@ export default function BottomNav() {
         <span>Home</span>
       </NavLink>
       <NavLink to="/spiele" className={linkClass}>
-        <span className={styles.emojiIcon}>⚽</span>
+        <Swords size={20} />
         <span>Spiele</span>
       </NavLink>
       <NavLink to="/rangliste" className={linkClass}>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9ed1226..ea17b9b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -50,8 +50,8 @@
   --text-muted:     rgba(13,21,38,0.35);
   --success:        #1AAB72;
   --error:          #D93025;
-  --shadow-card:    0 4px 16px rgba(0,0,0,0.10);
-  --card-shine:     rgba(255,255,255,0.7);
+  --shadow-card:    0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
+  --card-shine:     rgba(255,255,255,0.85);
   --scrollbar-bg:   var(--surface-high);
   --primary-rgb:    26, 143, 227;
 }