diff --git a/src/App.tsx b/src/App.tsx
index 0bf69dd..2ed3f6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,8 @@ import MusicButton from './components/MusicButton';
 import BackgroundMusic from './components/BackgroundMusic';
 import EndAnimation from './components/EndAnimation';
 import { useState, useEffect } from 'react';
+import Navbar from './components/Navbar';
+
 
 import './styles/main.scss';
 
@@ -74,15 +76,10 @@ function App() {
 
   return (
     <div className="App">
-      <nav className="navbar">
-        <div className="navbar-left">
-          <LanguageSwitcher className="navbar-button" />
-          <MusicButton className="navbar-button" isPlaying={isPlaying} toggleMusic={() => setIsPlaying(!isPlaying)} />
-        </div>
-        <div className="navbar-right">
-          <InfoPopup className="navbar-button" />
-        </div>
-      </nav>
+      <Navbar 
+        isPlaying={isPlaying} 
+        toggleMusic={() => setIsPlaying(!isPlaying)} 
+      />
 
       <BackgroundMusic src={musicSrc} playing={isPlaying} /> {/* Füge die BackgroundMusic-Komponente hinzu */}
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..eaae857
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import LanguageSwitcher from './LanguageSwitcher';
+import InfoPopup from './InfoPopup';
+import MusicButton from './MusicButton';
+
+interface NavbarProps {
+  isPlaying: boolean;
+  toggleMusic: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ isPlaying, toggleMusic }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkWidth = () => {
+      setIsMobile(window.innerWidth <= 991);
+    };
+
+    checkWidth();
+    window.addEventListener('resize', checkWidth);
+    return () => window.removeEventListener('resize', checkWidth);
+  }, []);
+
+  const toggleNavbar = () => {
+    setIsExpanded(!isExpanded);
+    document.body.style.overflow = !isExpanded ? 'hidden' : '';
+  };
+
+  return (
+    <>
+      <nav className={`navbar ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''}`}>
+        {isMobile && (
+          <button 
+            className="navbar-toggle"
+            onClick={toggleNavbar}
+            aria-label="Toggle navigation"
+          >
+            {isExpanded ? '✕' : '☰'}
+          </button>
+        )}
+        <div className="navbar-left">
+          <LanguageSwitcher className="navbar-button" />
+          <MusicButton 
+            className="navbar-button" 
+            isPlaying={isPlaying} 
+            toggleMusic={toggleMusic} 
+          />
+          {/* Info Button in die linke Gruppe verschoben */}
+          <InfoPopup className="navbar-button" />
+        </div>
+        {/* Rechte Gruppe entfernt, da alle Buttons jetzt in der linken Gruppe sind */}
+      </nav>
+      <div 
+        className="navbar-overlay" 
+        onClick={() => isExpanded && toggleNavbar()}
+        aria-hidden="true"
+      />
+    </>
+  );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 5ee38e8..aa95944 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,7 +1,7 @@
 // Allgemeines Styling
 .App {
   text-align: center;
-  padding: 20px;
+  padding: 0px;
   background-color: $primary-color;
   color: $text-color;
   min-height: 100vh;
diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
index 655d8d0..3d6c31b 100644
--- a/src/styles/components/_card.scss
+++ b/src/styles/components/_card.scss
@@ -1,12 +1,11 @@
-// Karten Styling
 .battlefield {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 40px;
   padding-top: 60px;
-  overflow: hidden; // Verhindert das Ausdehnen des Containers durch die Kartenanimation
-  position: relative; // Stellt sicher, dass der Container der Bezugspunkt für die Animationen bleibt
+  overflow: hidden;
+  position: relative;
 }
 
 .card-container {
@@ -196,117 +195,6 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 }
 
-@media (max-width: 1100px) {
-  .card-description {
-    font-size: 0.9em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-
-  .card-front img {
-    width: 100%; // Verkleinert das Bild auf der Vorderseite
-    margin: 0 auto; // Zentriert das Bild auf der Vorderseite
-  }
-}
-
-@media (max-width: 950px) {
-  .card-properties-list li {
-    line-height: 0.5;
-    font-size: 0.9em;
-    margin: 5px 0; // Verringerter Abstand zwischen den Listenelementen für kleinere Bildschirme
-  }
-  .card-header {
-    font-size: 0.75em;
-  }
-}
-
-@media (max-width: 900px) {
-  .card-description {
-    font-size: 0.7em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.7em;
-  }
-  .card-header {
-    font-size: 0.65em;
-  }
-
-  // Deaktiviere Klick- und Fokus-Effekte für Bildschirme mit einer Breite von maximal 900px
-  .property-label,
-  .property-value {
-    pointer-events: none; // Deaktiviert alle Mausereignisse
-  }
-}
-
-@media (max-width: 850px) {
-  .card-description {
-    font-size: 0.7em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.7em;
-  }
-  .card-header {
-    font-size: 0.65em;
-  }
-}
-
-@media (max-width: 750px) {
-  .card-description {
-    font-size: 0.6em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.6em;
-  }
-  .card-header {
-    font-size: 0.65em;
-  }
-  .card-front {
-    padding: 8px;
-    border: 0.4em solid #444444;
-  }
-}
-@media (max-width: 700px) {
-  .card-description {
-    font-size: 0.55em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.55em;
-  }
-  .card-header {
-    font-size: 0.65em;
-  }
-  .rating-scale {
-    height: 8px;
-  }
-}
-@media (max-width: 650px) {
-  .card-description {
-    font-size: 0.45em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.45em;
-  }
-  .card-header {
-    font-size: 0.55em;
-  }
-  .rating-scale {
-    height: 6px;
-  }
-}
-@media (max-width: 600px) {
-  .card-description {
-    font-size: 0.35em; // Kleinere Schriftgröße für die Kartenbeschreibung
-  }
-  .card-properties-list li {
-    font-size: 0.35em;
-  }
-  .rating-scale {
-    height: 5px;
-  }
-  .card-front {
-    padding: 4px;
-    border: 0.4em solid #444444;
-  }
-}
-
 // Bestehende Styles beibehalten und neue Styles hinzufügen
 
 .description-button {
@@ -378,32 +266,140 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 }
 
-@media (max-width: 900px) {
-  .description-popup {
-    width: 95%;
+@media (max-width: 1200px) {
+  .card-container {
+    max-width: 500px;
+  }
+
+  .card-description {
+    font-size: 0.95em;
+  }
+
+  .card-properties-list li {
+    margin: 8px 0;
+  }
+
+  .card-header {
+    font-size: 0.9em;
+  }
+}
+
+// Medium (Tablet): 768px - 991px
+@media (max-width: 991px) {
+  .battlefield {
+    padding-top: 0px;
+  }
+  .card-container {
+    max-width: 450px;
+    font-size: 0.7em;
+  }
+  .card-spieler, .card-computer{
+    width: 60%;
+  }
+
+  .card-description {
+    font-size: 0.85em;
+  }
+
+  .card-properties-list li {
+    font-size: 0.85em;
+    margin: 6px 0;
+  }
+
+  .card-header {
+    font-size: 0.8em;
+  }
+ƒ
+  .rating-scale {
+    height: 8px;
+  }
+
+  .card-front {
     padding: 15px;
-    
-    h3 {
-      font-size: 1.1em;
-    }
+    border: 0.6em solid $secondary-color;
+  }
+}
+
+// Small (Tablet Portrait): 576px - 767px
+@media (max-width: 767px) {
+  .card-container {
+    max-width: 400px;
+  }
+
+  .card-description {
+    font-size: 0.75em;
+  }
+
+  .card-properties-list li {
+    font-size: 0.75em;
+    margin: 5px 0;
+  }
+
+  .card-header {
+    font-size: 0.7em;
+  }
+
+  .rating-scale {
+    height: 6px;
+  }
+
+  .card-front {
+    padding: 12px;
+    border: 0.5em solid $secondary-color;
+  }
+
+  // Deaktiviere Hover-Effekte für Touch-Geräte
+  .property-label,
+  .property-value {
+    pointer-events: none;
   }
 }
 
-@media (max-width: 600px) {
+// Extra Small (Mobile Landscape): < 576px
+@media (max-width: 575px) {
+  .card-container {
+    max-width: 350px;
+  }
+
+  .card-description {
+    font-size: 0.65em;
+  }
+
+  .card-properties-list li {
+    font-size: 0.65em;
+    margin: 4px 0;
+  }
+
+  .card-header {
+    font-size: 0.6em;
+  }
+
+  .rating-scale {
+    height: 5px;
+  }
+
+  .card-front {
+    padding: 8px;
+    border: 0.4em solid $secondary-color;
+  }
+
+  // Optimierungen für sehr kleine Bildschirme
   .description-button {
-    font-size: 0.9em;
-    padding: 8px 15px;
+    font-size: 0.8em;
+    padding: 6px 12px;
   }
 
   .description-popup {
+    width: 95%;
     padding: 10px;
     
     h3 {
-      font-size: 1em;
+      font-size: 0.9em;
+      margin-bottom: 10px;
     }
     
     p {
-      font-size: 0.9em;
+      font-size: 0.8em;
     }
   }
 }
\ No newline at end of file
diff --git a/src/styles/components/_infoPopup.scss b/src/styles/components/_infoPopup.scss
index 63820ce..461d065 100644
--- a/src/styles/components/_infoPopup.scss
+++ b/src/styles/components/_infoPopup.scss
@@ -1,3 +1,5 @@
+// src/styles/components/_infoPopup.scss
+
 /* Popup-Overlay */
 .popup-overlay {
   position: fixed;
@@ -7,75 +9,82 @@
   bottom: 0;
   display: flex;
   justify-content: center;
-  align-items: start; /* Ändert die vertikale Ausrichtung, damit das Popup oben beginnt */
-  padding-top: 10vh; /* Fügt oben einen Abstand ein, für bessere Sichtbarkeit */
-  background-color: rgba(0, 0, 0, 0.8); /* Halbtransparentes Schwarz */
+  align-items: start;
+  padding-top: 5vh; // Reduzierter oberer Abstand
+  background-color: rgba(0, 0, 0, 0.8);
   z-index: 101;
 }
 
 /* Popup-Content */
 .popup-content {
   background-color: $primary-color;
-  padding: 20px;
+  padding: 30px;
   border-radius: 5px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 80%; /* Setzt die Breite auf 80% des Viewports */
-  max-width: 600px; /* Setzt eine maximale Breite */
-  max-height: 80vh; /* Maximale Höhe des Popups, um sicherzustellen, dass es scrollbar ist */
-  overflow-y: auto; /* Ermöglicht das Scrollen nach unten, falls der Inhalt die maximale Höhe überschreitet */
+  width: 90%; // Erhöhte Breite
+  max-width: 1200px; // Erhöhte maximale Breite
+  max-height: 90vh;
+  overflow-y: auto;
   color: $text-color;
+  
+  @media (max-width: 991px) {
+    width: 95%;
+    padding: 20px;
+  }
 }
 
 /* About Me */
 .about-me {
   color: $text-color;
   margin-top: 20px;
-}
-
-.about-me h2 {
-  font-size: 2em;
-}
-
-.about-me a {
-  color: $text-color;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
+  
+  h2 {
+    font-size: 2em;
+    margin-bottom: 1em;
+  }
+  
+  p {
+    font-size: 1.1em;
+    line-height: 1.6;
+    margin-bottom: 1.5em;
   }
-}
 
-.about-me img,
-.about-me svg {
-  vertical-align: middle;
+  a {
+    color: $text-color;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
 }
 
 /* Schließen-Button */
 .schliesen-button {
   margin-top: 2em;
-  margin-bottom: 2em;
+  margin-bottom: 1em;
   display: flex;
   justify-content: center;
-}
 
-.schliesen-button .button {
-  background-color: $primary-dark-color;
-  color: $text-color;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  &:hover {
-    background-color: $primary-light-color;
-    color: $secondary-color;
+  .button {
+    background-color: $primary-dark-color;
+    color: $text-color;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-size: 1.1em;
+
+    &:hover {
+      background-color: $primary-light-color;
+      color: $secondary-color;
+    }
   }
-}
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index 20130af..b7a29e4 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -1,4 +1,18 @@
-// src/styles/components/navbar.scss
+// Blur Overlay
+.navbar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
 
 .navbar {
   position: fixed;
@@ -9,17 +23,19 @@
   padding: 10px 20px;
   background-color: transparent;
   z-index: 1000;
+  transition: all 0.3s ease;
 
   .navbar-left {
     display: flex;
-    gap: 10px; /* Abstand zwischen den Buttons */
+    gap: 10px;
+    margin-top: 0px;
   }
 
   .navbar-right {
     display: flex;
-    gap: 10px; /* Abstand zwischen den Buttons */
+    gap: 10px;
     position: absolute;
-    right: 100px; /* Abstand vom rechten Rand des Bildschirms */
+    right: 100px;
   }
 
   .navbar-button {
@@ -30,11 +46,87 @@
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
-    z-index: 100; /* Stelle sicher, dass der Button über anderen Elementen liegt */
+    z-index: 100;
 
     &:hover {
       background-color: $primary-dark-color;
       color: $text-color;
     }
   }
+
+  // Toggle Button für Mobile
+  .navbar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: $text-color;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 5px;
+    margin: 0;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 50px; // Neue Position
+    z-index: 1001;
+  }
+}
+
+// Mobile Styles (< 992px)
+@media (max-width: 991px) {
+  .navbar {
+    &.mobile {
+      width: 60px;
+      height: 100vh;
+      flex-direction: column;
+      background-color: transparent;
+      padding: 20px 10px;
+      align-items: center;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .navbar-toggle {
+        display: block;
+      }
+
+      .navbar-left,
+      .navbar-right {
+        flex-direction: column;
+        align-items: center;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        margin-top: 100px; // Abstand nach dem Burger-Menü
+      }
+
+      // Neuanordnung der Buttons
+      .navbar-right {
+        position: static;
+        margin-top: 10px; // Geringerer Abstand zwischen den Button-Gruppen
+      }
+
+      &.expanded {
+        width: 80%;
+        background-color: transparent; // Transparenter Hintergrund
+
+        .navbar-left,
+        .navbar-right {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        & + .navbar-overlay {
+          display: block;
+          opacity: 1;
+        }
+
+        // Verbesserte Button-Anordnung im expandierten Zustand
+        .navbar-button {
+          width: 80%; // Breitere Buttons für bessere Klickbarkeit
+          text-align: center;
+          margin: 5px 0;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file