From 4bcb93d357fc653ef5eafeb580b99bb445602d53 Mon Sep 17 00:00:00 2001
From: mategery <mategergely33@gmail.com>
Date: Tue, 18 Nov 2025 15:37:29 +0100
Subject: [PATCH] telefonos nezet

---
 .../src/components/DeckCreator/CardEditor.jsx |  49 +++---
 .../src/components/DeckCreator/DeckHeader.jsx |  89 ++++++-----
 .../components/DeckCreator/DeckManager.jsx    |  46 +++---
 .../src/components/Navbar/Navbar.jsx          | 144 ++++++++++--------
 SerpentRace_Frontend/src/index.css            |  30 ++++
 .../src/pages/About/About.jsx                 | 100 ++++++------
 .../src/pages/Auth/AuthCard.jsx               |   8 +-
 .../src/pages/Auth/LoginForm.jsx              |  18 +--
 .../src/pages/Auth/RegisterForm.jsx           |   6 +-
 .../src/pages/Contacts/Contacts.jsx           |  72 ++++-----
 .../src/pages/DeckCreator/DeckCreator.jsx     |   6 +-
 .../src/pages/Decks/Card_display.jsx          |  56 +++----
 .../src/pages/Game/ChooseDeck.jsx             |  50 +++---
 SerpentRace_Frontend/src/pages/Game/Lobby.jsx |  60 ++++----
 14 files changed, 388 insertions(+), 346 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
index 9ca7797e..da8dfdec 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
@@ -189,20 +189,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
 
   // Ha nincs kiválasztott kártya vagy új kártya létrehozás
   if (!cardData) {
-    return (
-      <div className="flex-1 flex items-center justify-center bg-[color:var(--color-background)]">
-        <div className="text-center">
-          <div className="text-6xl mb-4">🃏</div>
-          <div className="text-[color:var(--color-text)] text-xl font-semibold mb-2">
-            Válassz ki egy kártyát
-          </div>
-          <div className="text-[color:var(--color-text-muted)]">
-            Klikkelj egy kártyára a bal oldalon a szerkesztéshez,<br />
-            vagy hozz létre egy újat.
-          </div>
-        </div>
-      </div>
-    )
+    return null
   }
 
   return (
@@ -231,22 +218,22 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       )}
 
       {/* Header */}
-      <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
-        <div className="flex items-center justify-between">
+      <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
           <div className="flex items-center gap-3">
-            <div className="text-2xl">
+            <div className="text-xl sm:text-2xl">
               {cardData.type === 'QUESTION' && '📋'}
               {cardData.type === 'JOKER' && '🃏'}
               {cardData.type === 'LUCK' && '🎲'}
             </div>
             <div>
-              <h2 className="text-xl font-bold text-[color:var(--color-text)]">
+              <h2 className="text-lg sm:text-xl font-bold text-[color:var(--color-text)]">
                 {isCreating ? 'Új' : 'Szerkesztés'} {' '}
                 {(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
                 {(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
                 {(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
               </h2>
-              <div className="text-[color:var(--color-text-muted)] text-sm">
+              <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm">
                 {cardData.type === 'QUESTION' && cardData.subType && (
                   <>
                     {cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
@@ -259,19 +246,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </div>
           </div>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 sm:gap-3 flex-wrap w-full sm:w-auto">
             <button
               onClick={() => setShowPreview(!showPreview)}
               className={`
-                flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
+                flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl font-medium transition-all duration-200 text-sm
                 ${showPreview
                   ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
                   : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
                 }
               `}
             >
-              <FaEye />
-              Előnézet
+              <FaEye className="text-sm" />
+              <span className="hidden sm:inline">Előnézet</span>
             </button>
             
             <button
@@ -279,17 +266,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     notifyWarning('Kártya készítés megszakítva')
     onCancel()
   }}
-  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+  className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
 >
-  <FaTimes />
-  Mégse
+  <FaTimes className="text-sm" />
+  <span className="hidden sm:inline">Mégse</span>
 </button>
             
             <button
               onClick={handleSave}
-              className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
+              className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm"
             >
-              <FaSave />
+              <FaSave className="text-sm" />
               Mentés
             </button>
           </div>
@@ -297,13 +284,13 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-y-auto">
         {showPreview ? (
-          <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
+          <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-4 sm:p-6">
             <CardPreview card={cardData} />
           </div>
         ) : (
-          <div className="h-full overflow-y-auto p-6">
+          <div className="p-4 sm:p-6">
             {cardData.type === 'QUESTION' && (
               <TaskCardEditor 
                 card={cardData} 
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 83f7dbd4..ad1f32ff 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -2,7 +2,7 @@
 // Deck alapadatok szerkesztése és mentés
 
 import React, { useState, useRef, useEffect } from "react"
-import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash } from "react-icons/fa"
+import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash, FaChevronDown, FaChevronUp } from "react-icons/fa"
 
 const deckTypes = [
   { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -18,6 +18,7 @@ const privacyOptions = [
 export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) {
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
   const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
+  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
   const typeDropdownRef = useRef(null);
   const privacyDropdownRef = useRef(null);
   
@@ -47,68 +48,78 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
   // Remove unused card count variables
 
   return (
-    <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
+    <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
       {/* Top Row - Title and Actions */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-4">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-3 sm:mb-4">
+        <div className="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
           <button
             onClick={onBack}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+            className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
           >
-            <FaArrowLeft />
-            Vissza
+            <FaArrowLeft className="text-sm" />
+            <span className="hidden sm:inline">Vissza</span>
           </button>
           
-          <h1 className="text-2xl font-bold text-[color:var(--color-text)]">
+          <h1 className="text-lg sm:text-xl lg:text-2xl font-bold text-[color:var(--color-text)]">
             📝 Pakli Szerkesztés
           </h1>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
           {deck.id && (
             <button
               onClick={onDelete}
-              className="flex items-center gap-2 px-6 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
+              className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm flex-1 sm:flex-none"
             >
-              <FaTrash />
-              Törlés
+              <FaTrash className="text-sm" />
+              <span className="hidden sm:inline">Törlés</span>
             </button>
           )}
           
           <button
             onClick={onSave}
-            className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
+            className="flex items-center justify-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm flex-1 sm:flex-none"
           >
-            <FaSave />
+            <FaSave className="text-sm" />
             Mentés
           </button>
         </div>
       </div>
 
-      {/* Main Content Row */}
-      <div className="space-y-4">
-        {/* Two Column Layout */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {/* Deck Name - Takes up 2 columns */}
-          <div className="md:col-span-2">
-            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              📦 Pakli neve
-            </label>
-            <input
-              type="text"
-              value={deck.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
-              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              placeholder="Add meg a pakli nevét..."
-            />
-          </div>
-          
-          {/* Empty space for visual balance */}
-          <div className="hidden md:block"></div>
-        </div>
+      {/* Collapsible Details Section */}
+      <div className="border-t border-[color:var(--color-surface-selected)] mt-3 sm:mt-4">
+        <button
+          onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}
+          className="w-full flex items-center justify-between px-2 py-2 text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-colors rounded-lg"
+        >
+          <span className="text-sm font-medium">Pakli részletek</span>
+          {isDetailsExpanded ? <FaChevronUp className="text-sm" /> : <FaChevronDown className="text-sm" />}
+        </button>
+        
+        {isDetailsExpanded && (
+          <div className="space-y-4 px-2 pb-3 pt-2">
+            {/* Two Column Layout */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Deck Name - Takes up 2 columns */}
+              <div className="md:col-span-2">
+                <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                  📦 Pakli neve
+                </label>
+                <input
+                  type="text"
+                  value={deck.name}
+                  onChange={(e) => handleInputChange('name', e.target.value)}
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                  placeholder="Add meg a pakli nevét..."
+                />
+              </div>
+              
+              {/* Empty space for visual balance */}
+              <div className="hidden md:block"></div>
+            </div>
 
-        {/* Type, Privacy and Description Row */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Type, Privacy and Description Row */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {/* Deck Type */}
           <div>
             <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
@@ -226,7 +237,9 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
               placeholder="Rövid leírás..."
             />
           </div>
-        </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
index d1085097..4f1efb16 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
@@ -147,10 +147,10 @@ const DeckManager = () => {
 
   return (
     <div className="w-full flex flex-col bg-[color:var(--color-background)]">
-      <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
+      <div className="w-full max-w-[1200px] mx-auto px-4 py-10 pb-32">
         {/* Filters */}
-        <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
-          <div className="flex gap-2 items-center w-full md:w-auto">
+        <div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
+          <div className="flex gap-2 items-center w-full flex-wrap">
             <SearchBox
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -158,10 +158,10 @@ const DeckManager = () => {
               placeholder="Keresés..."
               className="mr-4"
             />
-            <FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
-            <span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
+            <FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
+            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
             <button
-              className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${
+              className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
                 selectedType === "All"
                   ? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
                   : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -173,7 +173,7 @@ const DeckManager = () => {
             {deckTypes.map((type) => (
               <button
                 key={type.label}
-                className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${
+                className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
                   selectedType === type.label
                     ? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
                     : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -190,10 +190,9 @@ const DeckManager = () => {
                   : type.label}
               </button>
             ))}
-            <span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span>
+            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
             <select
-              className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
-              style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
+              className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
               value={selectedOrigin}
               onChange={(e) => setSelectedOrigin(e.target.value)}
             >
@@ -201,7 +200,7 @@ const DeckManager = () => {
                 <option
                   key={origin}
                   value={origin}
-                  style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+                  className="bg-zinc-800 text-white"
                 >
                   {origin === "Mind"
                     ? "Mind"
@@ -213,7 +212,7 @@ const DeckManager = () => {
                 </option>
               ))}
             </select>
-            <span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
+            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
               Rendezés:
               <button
                 type="button"
@@ -226,33 +225,32 @@ const DeckManager = () => {
               </button>
             </span>
             <select
-              className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center"
-              style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
+              className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center text-xs sm:text-sm"
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value)}
               aria-label="Rendezés"
             >
               <option
                 value="date-asc"
-                style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+                className="bg-zinc-800 text-white"
               >
                 📅↑
               </option>
               <option
                 value="date-desc"
-                style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+                className="bg-zinc-800 text-white"
               >
                 📅↓
               </option>
               <option
                 value="abc-asc"
-                style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+                className="bg-zinc-800 text-white"
               >
                 A→Z
               </option>
               <option
                 value="abc-desc"
-                style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+                className="bg-zinc-800 text-white"
               >
                 Z→A
               </option>
@@ -316,14 +314,14 @@ const DeckManager = () => {
         </div>
 
         {/* Decks Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
           {/* Create New Deck (Mockup) */}
           <div
             onClick={() => goDeckCreator()}
-            className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
+            className="flex flex-col items-center justify-center h-40 sm:h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-xl sm:rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
           >
-            <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
-            <span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
+            <FaPlus style={{ color: "var(--color-success)" }} className="text-4xl sm:text-5xl mb-2" />
+            <span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base">Új pakli létrehozása</span>
           </div>
           {/* Existing Decks (from backend) */}
           {loading && (
@@ -338,13 +336,13 @@ const DeckManager = () => {
             return (
               <div
                 key={deck.id}
-                className="flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer"
+                className="flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer"
                 style={{ borderTopColor: borderColor }}
                 onClick={() => setSelectedDeck(deck)}
               >
                 <div>
                   <span
-                    className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2"
+                    className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
                     style={{
                       background: deckType?.color,
                       color: "var(--color-text-inverse)",
diff --git a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
index 3ca01408..1d58cbf5 100644
--- a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+++ b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
@@ -47,7 +47,7 @@ const Navbar = () => {
           </div>
 
           {/* Desktop Menu */}
-          <div className="hidden md:flex items-center space-x-6">
+          <div className="hidden lg:flex items-center space-x-6">
             {/* Bal oldali linkek */}
             <button onClick={goAbout} className={navLinkClass}>
               Rólunk
@@ -140,7 +140,7 @@ const Navbar = () => {
           </div>
 
           {/* Mobile Hamburger */}
-          <div className="md:hidden flex items-center">
+          <div className="lg:hidden flex items-center">
             <button
               onClick={() => setMenuOpen(!menuOpen)}
               className="text-white focus:outline-none"
@@ -171,81 +171,91 @@ const Navbar = () => {
 
       {/* Mobile Menu */}
       {menuOpen && (
-        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <button
-            onClick={() => {
-              goAbout()
-              setMenuOpen(false)
-            }}
-            className={navLinkClass}
-          >
-            Rólunk
-          </button>
-          <button
-            onClick={() => {
-              goContacts()
-              setMenuOpen(false)
-            }}
-            className={navLinkClass}
-          >
-            Kapcsolat
-          </button>
-
-          {isLoggedIn && (
-            <>
-              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
-                Paklik
-              </Link>
-            </>
-          )}
-
-          <button
-            onClick={() => {
-              goHome()
-              setMenuOpen(false)
-            }}
-            className={navLinkClassPlay}
-          >
-            Játék
-          </button>
-
-          {!isLoggedIn ? (
-            <div className="flex flex-col space-y-2">
+        <>
+          {/* Overlay when menu is open */}
+          <div 
+            className="lg:hidden fixed inset-0 bg-black/50 z-40 top-16"
+            onClick={() => setMenuOpen(false)}
+          />
+          
+          {/* Side Menu */}
+          <div className="lg:hidden fixed top-16 right-0 w-64 bg-emerald-600 shadow-2xl z-50 animate-slide-down rounded-bl-2xl">
+            <div className="px-4 py-4 space-y-2 flex flex-col">
               <button
                 onClick={() => {
-                  goLogin()
+                  goAbout()
                   setMenuOpen(false)
                 }}
-                className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
+                className={navLinkClass}
               >
-                Bejelentkezés
+                Rólunk
+              </button>
+              <button
+                onClick={() => {
+                  goContacts()
+                  setMenuOpen(false)
+                }}
+                className={navLinkClass}
+              >
+                Kapcsolat
               </button>
 
-              {/* Elválasztó vonal mobilon */}
-              <div className="w-full h-px bg-white/30"></div>
+              {isLoggedIn && (
+                <Link to="/decks" onClick={() => setMenuOpen(false)} className="px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10 block text-center">
+                  Paklik
+                </Link>
+              )}
 
-              <Link
-                to="/register"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
+              <button
+                onClick={() => {
+                  goHome()
+                  setMenuOpen(false)
+                }}
+                className={navLinkClassPlay}
               >
-                Regisztráció
-              </Link>
+                Játék
+              </button>
+
+              {!isLoggedIn ? (
+                <>
+                  <div className="w-full h-px bg-white/30 my-2"></div>
+                  <button
+                    onClick={() => {
+                      goLogin()
+                      setMenuOpen(false)
+                    }}
+                    className="px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
+                  >
+                    Bejelentkezés
+                  </button>
+
+                  <Link
+                    to="/register"
+                    onClick={() => setMenuOpen(false)}
+                    className="px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all text-center"
+                  >
+                    Regisztráció
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <div className="w-full h-px bg-white/30 my-2"></div>
+                  <button
+                    onClick={() => {
+                      handleLogout()
+                      setMenuOpen(false)
+                    }}
+                    className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition-all"
+                    title="Kijelentkezés"
+                  >
+                    <FaSignOutAlt className="h-4 w-4" />
+                    <span>Kijelentkezés</span>
+                  </button>
+                </>
+              )}
             </div>
-          ) : (
-            <button
-              onClick={() => {
-                handleLogout()
-                setMenuOpen(false)
-              }}
-              className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition-all"
-              title="Kijelentkezés"
-            >
-              <FaSignOutAlt className="h-4 w-4" />
-              <span>Kijelentkezés</span>
-            </button>
-          )}
-        </div>
+          </div>
+        </>
       )}
     </nav>
   )
diff --git a/SerpentRace_Frontend/src/index.css b/SerpentRace_Frontend/src/index.css
index e6db465c..6d70214e 100644
--- a/SerpentRace_Frontend/src/index.css
+++ b/SerpentRace_Frontend/src/index.css
@@ -50,3 +50,33 @@
   --color-warning: #e6c04f;
   --color-error: #e15b64;
 }
+
+@keyframes slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(0);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out forwards;
+}
+
+.animate-slide-down {
+  animation: slide-down 0.3s ease-out forwards;
+}
diff --git a/SerpentRace_Frontend/src/pages/About/About.jsx b/SerpentRace_Frontend/src/pages/About/About.jsx
index ee94dafd..e64f58a7 100644
--- a/SerpentRace_Frontend/src/pages/About/About.jsx
+++ b/SerpentRace_Frontend/src/pages/About/About.jsx
@@ -18,7 +18,7 @@ import { motion } from "framer-motion"
 const baseMotion = {
   initial: { opacity: 0, y: 20 },
   whileInView: { opacity: 1, y: 0 },
-  viewport: { once: true, amount: 0.2 },
+  viewport: { once: true, amount: 0.05 },
   transition: { duration: 0.8 },
 }
 
@@ -135,7 +135,7 @@ const About = () => {
       </div>
 
       {/* Tartalom */}
-      <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20">
+      <main className="flex-grow text-white px-4 sm:px-6 pt-16 mt-0 mb-20">
         {/* Vissza gomb */}
         <div className="fixed top-4 left-4 z-50 group">
           <div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg">
@@ -147,7 +147,7 @@ const About = () => {
         <motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}>
           {/* Rólunk cím */}
           <motion.h1
-            className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg"
+            className="mt-24 text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-6 sm:mb-10 text-center tracking-wide drop-shadow-lg"
             {...getMotionProps({ transition: { duration: 0.8, delay: 0.1 } })}
           >
             <span className="inline-block animate-pulse mr-2"></span> Rólunk
@@ -155,7 +155,7 @@ const About = () => {
 
           {/* Leírás */}
           <motion.p
-            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
+            className="text-base sm:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
             {...getMotionProps({ transition: { duration: 0.8, delay: 0.2 } })}
           >
             Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és
@@ -165,57 +165,57 @@ const About = () => {
 
           {/* Küldetésünk — most szülő variánssal, hogy a kártyák ne triggereljenek külön és ne ugorjanak */}
           <motion.div
-            className="mt-12"
+            className="mt-8 sm:mt-12"
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true, amount: 0.2 }}
+            viewport={{ once: true, amount: 0.05 }}
             variants={{
               hidden: {},
               visible: { transition: { staggerChildren: 0.08, delayChildren: 0.12 } },
             }}
           >
-            <h2 className="text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
+            <h2 className="text-xl sm:text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
 
             {/* Új: stilizált kártyák (egyenként animálva a szülőből) */}
-            <div className="grid gap-6 md:grid-cols-3">
+            <div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-3">
               <motion.div
-                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
                 variants={itemVariant}
               >
-                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-4">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-3 sm:mb-4">
                   {/* ICON: Lightbulb */}
-                  <FaLightbulb className="w-8 h-8 text-black" />
+                  <FaLightbulb className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
                 </div>
-                <h3 className="text-lg font-semibold text-center mb-2">Innováció</h3>
-                <p className="text-zinc-300 text-center">
+                <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Innováció</h3>
+                <p className="text-sm sm:text-base text-zinc-300 text-center">
                   Modern megoldásokkal gyorsítjuk a fejlődést — moduláris, skálázható rendszereket építünk.
                 </p>
               </motion.div>
 
               <motion.div
-                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
                 variants={itemVariant}
               >
-                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-4">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-3 sm:mb-4">
                   {/* ICON: Users */}
-                  <FaUsers className="w-8 h-8 text-black" />
+                  <FaUsers className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
                 </div>
-                <h3 className="text-lg font-semibold text-center mb-2">Közösség</h3>
-                <p className="text-zinc-300 text-center">
+                <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Közösség</h3>
+                <p className="text-sm sm:text-base text-zinc-300 text-center">
                   Közösségépítés és együttműködés—eszközök, amik bevonják és motiválják a felhasználókat.
                 </p>
               </motion.div>
 
               <motion.div
-                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
                 variants={itemVariant}
               >
-                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-4">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-3 sm:mb-4">
                   {/* ICON: Shield/Quality */}
-                  <FaShieldAlt className="w-8 h-8 text-black" />
+                  <FaShieldAlt className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
                 </div>
-                <h3 className="text-lg font-semibold text-center mb-2">Minőség</h3>
-                <p className="text-zinc-300 text-center">
+                <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Minőség</h3>
+                <p className="text-sm sm:text-base text-zinc-300 text-center">
                   Biztonság, megbízhatóság és gondosan tervezett UX — minden részlet számít.
                 </p>
               </motion.div>
@@ -224,17 +224,17 @@ const About = () => {
 
           {/* Csapat — a szülő kezeli a gyermekek animációját (stagger), így nincs külön "belülről" trigger */}
           <motion.div
-            className="mt-16"
+            className="mt-12 sm:mt-16"
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true, amount: 0.2 }}
+            viewport={{ once: true, amount: 0.05 }}
             variants={{
               hidden: {},
               visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
             }}
           >
-            <h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2>
-            <div className="grid md:grid-cols-3 gap-8">
+            <h2 className="text-xl sm:text-2xl font-bold text-green-300 mb-4 sm:mb-6">Csapatunk</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
               {teamMembers.map((member, i) => {
                 const isLast = i === teamMembers.length - 1
                 const itemsInLastRow = teamMembers.length % 3
@@ -242,18 +242,18 @@ const About = () => {
                 return (
                   <motion.div
                     key={i}
-                    className={`flex flex-col items-center text-center bg-zinc-800 p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
-                      shouldCenter ? "md:col-start-2" : ""
+                    className={`flex flex-col items-center text-center bg-zinc-800 p-4 sm:p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
+                      shouldCenter ? "sm:col-start-2" : ""
                     }`}
                     variants={itemVariant}
                   >
                     <img
                       src={member.photo}
                       alt={member.name}
-                      className="w-24 h-24 rounded-full object-cover mb-4 border-4 border-green-400"
+                      className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 sm:mb-4 border-4 border-green-400"
                     />
-                    <h4 className="text-lg font-bold">{member.name}</h4>
-                    <p className="text-zinc-400">{member.role}</p>
+                    <h4 className="text-base sm:text-lg font-bold">{member.name}</h4>
+                    <p className="text-sm sm:text-base text-zinc-400">{member.role}</p>
                   </motion.div>
                 )
               })}
@@ -263,42 +263,42 @@ const About = () => {
           {/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */}
           <motion.section
             id="contact"
-            className="mt-16 bg-transparent"
+            className="mt-12 sm:mt-16 bg-transparent"
             {...getMotionProps({ transition: { duration: 0.8, delay: 0.25 } })}
           >
-            <div className="max-w-5xl mx-auto bg-white/5 rounded-2xl border border-gray-700 p-8 shadow-lg">
-              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+            <div className="max-w-5xl mx-auto bg-white/5 rounded-xl sm:rounded-2xl border border-gray-700 p-4 sm:p-8 shadow-lg">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
                 Kapcsolat
               </h2>
 
-              <div className="grid md:grid-cols-2 gap-8">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
                 {/* Bal: elérhetőségek */}
-                <div className="flex flex-col justify-center gap-6">
-                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
-                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">✉️</div>
+                <div className="flex flex-col justify-center gap-4 sm:gap-6">
+                  <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">✉️</div>
                     <div>
-                      <div className="font-semibold">Email</div>
-                      <div className="text-zinc-300">hello@serpentrace.hu</div>
+                      <div className="font-semibold text-sm sm:text-base">Email</div>
+                      <div className="text-zinc-300 text-sm sm:text-base">hello@serpentrace.hu</div>
                     </div>
                   </div>
 
-                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
-                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📞</div>
+                  <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📞</div>
                     <div>
-                      <div className="font-semibold">Telefon</div>
-                      <div className="text-zinc-300">+36 20 123 4567</div>
+                      <div className="font-semibold text-sm sm:text-base">Telefon</div>
+                      <div className="text-zinc-300 text-sm sm:text-base">+36 20 123 4567</div>
                     </div>
                   </div>
 
-                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
-                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📍</div>
+                  <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📍</div>
                     <div>
-                      <div className="font-semibold">Iroda</div>
-                      <div className="text-zinc-300">Budapest, Magyarország</div>
+                      <div className="font-semibold text-sm sm:text-base">Iroda</div>
+                      <div className="text-zinc-300 text-sm sm:text-base">Budapest, Magyarország</div>
                     </div>
                   </div>
 
-                  <p className="text-zinc-400 mt-2 text-sm">
+                  <p className="text-zinc-400 mt-2 text-xs sm:text-sm">
                     Általános megkeresésekre 48 órán belül válaszolunk. Ha céges együttműködésről van szó,
                     kérjük, írj részletesen a projektedről.
                   </p>
diff --git a/SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx b/SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx
index 43278921..5254ffb1 100644
--- a/SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx
+++ b/SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx
@@ -15,16 +15,16 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
       transition={{ duration: 0.5, ease: "easeInOut" }}
       className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
     >
-      {/* Bal oldali kép és szöveg */}
+      {/* Bal oldali kép és szöveg - csak desktop */}
       <div
-        className={`transition-all duration-500 ${
+        className={`hidden md:flex transition-all duration-500 ${
           isRegistering ? "w-0 p-0" : "w-2/5 p-8"
-        } flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
+        } flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
       >
         <Logo size={100} />
         <div className="h-6" />
         <Animation sizePercentage={30} />
-        <p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
+        <p className="hidden md:block text-lg mt-0 text-center font-light overflow-hidden">
           Lépj be és légy a legjobb!
         </p>
       </div>
diff --git a/SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx b/SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx
index 786c509e..fb726d13 100644
--- a/SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx
+++ b/SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx
@@ -124,23 +124,23 @@ export default function LoginForm() {
         </span>
       </div>
 
-      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
+      <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-4 sm:mb-6 text-gray-800 tracking-wide">
         Bejelentkezés
       </h2>
 
       {showSuccess && (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
           {successMessage || "Sikeres művelet!"}
         </div>
       )}
 
       {showErrorPopup && error && (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
           {error}
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="space-y-4 w-full">
+      <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4 w-full">
         <InputBox
           type="email"
           placeholder="Email cím"
@@ -169,14 +169,14 @@ export default function LoginForm() {
 
       {/* Forgot Password Modal */}
       {showForgotPasswordModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowForgotPasswordModal(false)}>
-          <div className="bg-white rounded-xl shadow-2xl p-8 w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
-            <h3 className="text-2xl font-bold text-gray-800 mb-4">Jelszó visszaállítás</h3>
-            <p className="text-gray-600 mb-6 text-sm">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setShowForgotPasswordModal(false)}>
+          <div className="bg-white rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
+            <h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-3 sm:mb-4">Jelszó visszaállítás</h3>
+            <p className="text-gray-600 mb-4 sm:mb-6 text-xs sm:text-sm">
               Add meg az email címed és küldünk egy jelszó visszaállító linket.
             </p>
             
-            <form onSubmit={handleForgotPassword} className="space-y-4">
+            <form onSubmit={handleForgotPassword} className="space-y-3 sm:space-y-4">
               <InputBox
                 type="email"
                 placeholder="Email cím"
diff --git a/SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx b/SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx
index ce175dd1..9d1c83e7 100644
--- a/SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx
+++ b/SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx
@@ -93,17 +93,17 @@ export default function RegisterForm() {
         </span>
       </div>
 
-      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
+      <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-4 sm:mb-6 text-gray-800 tracking-wide">
         Regisztráció
       </h2>
 
       {showErrorPopup && error && (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
           {error}
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
         <InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} />
         <InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
         <InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} />
diff --git a/SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx b/SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx
index c6ef8dc7..486cfd40 100644
--- a/SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx
+++ b/SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx
@@ -30,11 +30,11 @@ const Card = ({ icon, label, description, targetId, className }) => {
   return (
     <div
       onClick={handleClick}
-      className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-2xl p-8 w-72 text-center animate-fadeInUp ${className}`}
+      className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 w-full sm:w-72 text-center animate-fadeInUp ${className}`}
     >
-      <div className="text-5xl mb-4 flex justify-center">{icon}</div>
-      <h3 className="text-2xl font-bold mb-2">{label}</h3>
-      <p className="text-white/90 text-sm">{description}</p>
+      <div className="text-3xl sm:text-4xl lg:text-5xl mb-3 sm:mb-4 flex justify-center">{icon}</div>
+      <h3 className="text-xl sm:text-2xl font-bold mb-2">{label}</h3>
+      <p className="text-white/90 text-xs sm:text-sm">{description}</p>
     </div>
   )
 }
@@ -43,10 +43,10 @@ const SectionContainer = ({ id, title, children }) => {
   return (
     <section
       id={id}
-      className="mt-20 mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
+      className="mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg:mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
     >
-      <div className="text-center mb-12">
-        <h2 className="text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
+      <div className="text-center mb-8 sm:mb-10 lg:mb-12">
+        <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
           {title}
         </h2>
       </div>
@@ -80,14 +80,14 @@ const CompanyHub = () => {
       <div className="relative z-10 flex flex-col min-h-screen">
         <Navbar />
 
-        <main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
+        <main className="flex-grow relative px-4 py-6 sm:py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
           <section
           ref={sectionRef}
           className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
           }`}
         >
-          <div className="flex justify-center gap-6 mt-8 flex-wrap">
+          <div className="flex flex-col sm:flex-row justify-center gap-4 sm:gap-6 mt-6 sm:mt-8">
             <Card
               icon={<FaBuilding />}
               label="Mit nyújtunk"
@@ -113,16 +113,16 @@ const CompanyHub = () => {
 
           {/* Mit nyújtunk */}
           <SectionContainer id="intro" title="Mit nyújtunk cégeknek">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
               {/* Egyénre szabás */}
-              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
-                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
-                  <FaPalette className="text-4xl" />
+              <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
+                <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
+                  <FaPalette className="text-3xl sm:text-4xl" />
                   Egyénre szabás
                 </h3>
-                <ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
-                  <li className="flex items-center gap-4">
-                    <FaUserCheck className="text-green-400 text-2xl" />
+                <ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
+                  <li className="flex items-center gap-3 sm:gap-4">
+                    <FaUserCheck className="text-green-400 text-xl sm:text-2xl" />
                     Testreszabható design és színek
                   </li>
                   <li className="flex items-center gap-4">
@@ -137,12 +137,12 @@ const CompanyHub = () => {
               </div>
 
               {/* Árazás */}
-              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
-                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
-                  <FaDollarSign className="text-4xl" />
+              <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
+                <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
+                  <FaDollarSign className="text-3xl sm:text-4xl" />
                   Árazás
                 </h3>
-                <ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
+                <ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
                   <li className="flex items-center gap-4">
                     <FaUsers className="text-purple-400 text-2xl" />
                     Kedvezményes csomagok KKV-knak
@@ -159,9 +159,9 @@ const CompanyHub = () => {
               </div>
 
               {/* Demó videó */}
-              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
-                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
-                  <FaVideo className="text-4xl" />
+              <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
+                <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
+                  <FaVideo className="text-3xl sm:text-4xl" />
                   Csapatunk videó
                 </h3>
                 <video controls className="w-full rounded-xl shadow-xl">
@@ -173,34 +173,34 @@ const CompanyHub = () => {
           </SectionContainer>
 
             {/* Contact + Join Section */}
-            <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
+            <section className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10 max-w-6xl mx-auto mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg:mb-28 px-4 md:px-0">
               {/* Contact */}
               <div
                 id="contact"
-                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+                className="bg-white/10 p-6 sm:p-8 rounded-xl border border-gray-500 shadow-lg"
               >
-                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
                   Kapcsolatfelvétel cégeknek
                 </h2>
-                <form className="grid gap-6 md:grid-cols-2">
+                <form className="grid gap-4 sm:gap-6 md:grid-cols-2">
                   <input
                     type="text"
                     placeholder="Cég neve"
-                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                    className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
                   />
                   <input
                     type="email"
                     placeholder="Email"
-                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
+                    className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1 text-sm sm:text-base"
                   />
                   <textarea
                     placeholder="Üzenet"
                     rows="6"
-                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                    className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
                   />
                   <button
                     type="submit"
-                    className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
+                    className="bg-emerald-500 hover:bg-emerald-400 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition text-sm sm:text-base"
                   >
                     Küldés
                   </button>
@@ -210,14 +210,14 @@ const CompanyHub = () => {
               {/* Join */}
               <div
                 id="join"
-                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+                className="bg-white/10 p-6 sm:p-8 rounded-xl border border-gray-500 shadow-lg"
               >
-                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
                   Csatlakozz partnerként
                 </h2>
-                <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
-                  <li className="flex gap-3 items-center">
-                    <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
+                <ul className="list-disc space-y-3 sm:space-y-4 ml-6 sm:ml-8 text-sm sm:text-base text-white/90">
+                  <li className="flex gap-2 sm:gap-3 items-center">
+                    <FaHandsHelping className="text-green-400 text-lg sm:text-xl flex-shrink-0" />
                     Gamification a vállalati kultúrában
                   </li>
                   <li className="flex gap-3 items-center">
diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
index cf173d5e..becb7ada 100644
--- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+++ b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
@@ -387,9 +387,9 @@ export default function DeckCreator() {
           />
 
           {/* Main Content */}
-          <div className="flex-1 flex">
+          <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
           {/* Left Panel - Cards List */}
-          <div className="w-80 bg-[color:var(--color-surface)] border-r border-[color:var(--color-surface-selected)] flex flex-col">
+          <div className="w-full lg:w-80 bg-[color:var(--color-surface)] border-b lg:border-b-0 lg:border-r border-[color:var(--color-surface-selected)] flex flex-col max-h-64 lg:max-h-none overflow-y-auto">
             <CardsList
               cards={deck.cards}
               selectedCard={selectedCard}
@@ -403,7 +403,7 @@ export default function DeckCreator() {
           </div>
 
           {/* Right Panel - Card Editor */}
-          <div className="flex-1 bg-[color:var(--color-background)] flex flex-col">
+          <div className="flex-1 flex flex-col overflow-y-auto">
             <CardEditor
               card={selectedCard}
               isCreating={isCreatingCard}
diff --git a/SerpentRace_Frontend/src/pages/Decks/Card_display.jsx b/SerpentRace_Frontend/src/pages/Decks/Card_display.jsx
index 89561fcf..601ecd4f 100644
--- a/SerpentRace_Frontend/src/pages/Decks/Card_display.jsx
+++ b/SerpentRace_Frontend/src/pages/Decks/Card_display.jsx
@@ -183,19 +183,20 @@ const Card_display = () => {
     <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
       <Navbar />
       
-      <main className="flex-1 w-full max-w-[1200px] mx-auto px-4 py-10">
+      <main className="flex-1 w-full max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-10">
         {/* Header with back button */}
-        <div className="flex items-center gap-4 mb-6">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 mb-6">
           <button
             onClick={() => goDecks()}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow"
+            className="flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow text-sm"
           >
             <FaArrowLeft />
-            Vissza a paklikhoz
+            <span className="hidden sm:inline">Vissza a paklikhoz</span>
+            <span className="sm:hidden">Vissza</span>
           </button>
           {deck && (
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+              <h1 className="text-xl sm:text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
               {currentDeckType && (
                 <span
                   className="inline-block px-3 py-1 rounded-full text-sm font-bold"
@@ -226,16 +227,17 @@ const Card_display = () => {
         {/* Filters and controls */}
         {!loading && !error && (
           <>
-            <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-6 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
-              <div className="flex gap-2 items-center w-full md:w-auto">
+            <div className="flex flex-col gap-3 mb-6 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
+              <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center w-full">
                 <SearchBox
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   width={300}
-                  placeholder="Keresés kérdésben vagy válaszokban..."
-                  className="mr-4"
+                  placeholder="Keresés..."
+                  className="w-full sm:w-auto"
                 />
-                <span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
+                <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base flex items-center gap-1">
                   Rendezés:
                   <button
                     type="button"
@@ -248,7 +250,7 @@ const Card_display = () => {
                   </button>
                 </span>
                 <select
-                  className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
+                  className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm flex-1 sm:flex-none"
                   style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
                   value={sortBy}
                   onChange={(e) => setSortBy(e.target.value)}
@@ -285,6 +287,7 @@ const Card_display = () => {
                     Válaszok száma ↓
                   </option>
                 </select>
+                </div>
               </div>
             </div>
 
@@ -318,15 +321,15 @@ const Card_display = () => {
             )}
 
             {/* Items per page selector and pagination info */}
-            <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-6 py-3 shadow">
-              <div className="flex items-center gap-3">
-                <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
-                  Elemek oldalanként:
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-4 sm:px-6 py-3 shadow">
+              <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-between sm:justify-start">
+                <span className="text-[color:var(--color-text-muted)] text-xs sm:text-sm font-medium">
+                  Oldalanként:
                 </span>
                 <select
                   value={itemsPerPage}
                   onChange={(e) => setItemsPerPage(Number(e.target.value))}
-                  className="px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200"
+                  className="px-2 sm:px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200 text-sm"
                 >
                   <option value={10}>10</option>
                   <option value={20}>20</option>
@@ -335,10 +338,11 @@ const Card_display = () => {
                 </select>
               </div>
 
-              <div className="text-[color:var(--color-text-muted)] text-sm">
+              <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm text-center sm:text-left">
                 {totalCards > 0 ? (
                   <>
-                    {startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya
+                    <span className="hidden sm:inline">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya</span>
+                    <span className="sm:hidden">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards}</span>
                   </>
                 ) : (
                   <>0 kártya</>
@@ -347,7 +351,7 @@ const Card_display = () => {
             </div>
 
             {/* Cards Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 pb-20">
               {totalCards === 0 && (
                 <div className="col-span-full text-center text-[color:var(--color-text-muted)] py-10">
                   Nincsenek kártyák ebben a pakliban.
@@ -739,21 +743,21 @@ const Card_display = () => {
 
             {/* Pagination Controls */}
             {totalPages > 1 && (
-              <div className="flex justify-center items-center gap-2 mt-8">
+              <div className="flex flex-wrap justify-center items-center gap-2 mt-8">
                 <button
                   onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                   disabled={currentPage === 1}
-                  className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2 ${
+                  className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-1 sm:gap-2 text-sm ${
                     currentPage === 1
                       ? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed'
                       : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
                   }`}
                 >
                   <FaChevronLeft />
-                  Előző
+                  <span className="hidden sm:inline">Előző</span>
                 </button>
 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 sm:gap-2">
                   {[...Array(totalPages)].map((_, index) => {
                     const pageNum = index + 1
                     if (
@@ -765,7 +769,7 @@ const Card_display = () => {
                         <button
                           key={pageNum}
                           onClick={() => setCurrentPage(pageNum)}
-                          className={`w-10 h-10 rounded-lg font-medium transition-all duration-200 ${
+                          className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg font-medium transition-all duration-200 text-sm ${
                             currentPage === pageNum
                               ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] scale-110 shadow-lg'
                               : 'bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
@@ -797,7 +801,7 @@ const Card_display = () => {
                       : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
                   }`}
                 >
-                  Következő
+                  <span className="hidden sm:inline">Következő</span>
                   <FaChevronRight />
                 </button>
               </div>
diff --git a/SerpentRace_Frontend/src/pages/Game/ChooseDeck.jsx b/SerpentRace_Frontend/src/pages/Game/ChooseDeck.jsx
index a7f40396..2738cbaf 100644
--- a/SerpentRace_Frontend/src/pages/Game/ChooseDeck.jsx
+++ b/SerpentRace_Frontend/src/pages/Game/ChooseDeck.jsx
@@ -144,7 +144,7 @@ const ChooseDeck = () => {
         <Navbar />
       </div>
 
-      <main className="flex-grow text-white px-6 pt-24 pb-20">
+      <main className="flex-grow text-white px-4 sm:px-6 pt-20 sm:pt-24 pb-16 sm:pb-20">
         <motion.section
           className="max-w-6xl mx-auto"
           initial={{ opacity: 0, y: 20 }}
@@ -153,7 +153,7 @@ const ChooseDeck = () => {
         >
           {/* Title */}
           <motion.h1
-            className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
+            className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-4 sm:mb-6 text-center tracking-wide drop-shadow-lg"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.1 }}
@@ -162,7 +162,7 @@ const ChooseDeck = () => {
           </motion.h1>
 
           <motion.p
-            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
+            className="text-sm sm:text-base lg:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.2 }}
@@ -172,8 +172,8 @@ const ChooseDeck = () => {
           </motion.p>
 
           {/* Filters */}
-          <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
-            <div className="flex gap-2 items-center w-full md:w-auto flex-wrap">
+          <div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
+            <div className="flex gap-2 items-center w-full flex-wrap">
               <SearchBox
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
@@ -181,10 +181,10 @@ const ChooseDeck = () => {
                 placeholder="Keresés..."
                 className="mr-4"
               />
-              <FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
-              <span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
+              <FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
+              <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
               <button
-                className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${
+                className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
                   selectedType === "All"
                     ? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
                     : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -196,7 +196,7 @@ const ChooseDeck = () => {
               {deckTypes.map((type) => (
                 <button
                   key={type.label}
-                  className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${
+                  className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
                     selectedType === type.label
                       ? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
                       : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -207,9 +207,9 @@ const ChooseDeck = () => {
                   {type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"}
                 </button>
               ))}
-              <span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span>
+              <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
               <select
-                className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
+                className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
                 value={selectedOrigin}
                 onChange={(e) => setSelectedOrigin(e.target.value)}
               >
@@ -223,7 +223,7 @@ const ChooseDeck = () => {
                   </option>
                 ))}
               </select>
-              <span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
+              <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
                 Rendezés:
                 <button
                   type="button"
@@ -236,7 +236,7 @@ const ChooseDeck = () => {
                 </button>
               </span>
               <select
-                className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
+                className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value)}
               >
@@ -280,14 +280,14 @@ const ChooseDeck = () => {
           )}
 
           {/* Selection Info */}
-          <div className="mb-6 text-center">
-            <span className="text-[color:var(--color-text)] text-lg font-semibold">
+          <div className="mb-4 sm:mb-6 text-center">
+            <span className="text-[color:var(--color-text)] text-base sm:text-lg font-semibold">
               Kiválasztva: {selectedDeckIds.length} pakli
             </span>
           </div>
 
           {/* Decks Grid */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
             {loading && (
               <div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div>
             )}
@@ -305,24 +305,24 @@ const ChooseDeck = () => {
                 return (
                   <div
                     key={deck.id}
-                    className={`relative flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
-                      isSelected ? "ring-4 ring-[color:var(--color-success)]" : ""
+                    className={`relative flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
+                      isSelected ? "ring-2 sm:ring-4 ring-[color:var(--color-success)]" : ""
                     }`}
                     style={{ borderTopColor: borderColor }}
                     onClick={() => toggleDeckSelection(deck.id)}
                   >
                     {/* Selection Indicator */}
-                    <div className="absolute top-3 right-3">
+                    <div className="absolute top-2 sm:top-3 right-2 sm:right-3">
                       {isSelected ? (
-                        <FaCheckCircle className="text-3xl text-[color:var(--color-success)]" />
+                        <FaCheckCircle className="text-2xl sm:text-3xl text-[color:var(--color-success)]" />
                       ) : (
-                        <FaCircle className="text-3xl text-[color:var(--color-text-muted)] opacity-30" />
+                        <FaCircle className="text-2xl sm:text-3xl text-[color:var(--color-text-muted)] opacity-30" />
                       )}
                     </div>
 
                     <div>
                       <span
-                        className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2"
+                        className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
                         style={{
                           background: deckType?.color,
                           color: "var(--color-text-inverse)",
@@ -330,11 +330,11 @@ const ChooseDeck = () => {
                       >
                         {deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"}
                       </span>
-                      <h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
+                      <h2 className="text-base sm:text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
                         {deck.name}
                       </h2>
                     </div>
-                    <div className="text-[color:var(--color-text-muted)] text-sm mt-2">
+                    <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm mt-2">
                       Létrehozva: {deck.created}
                     </div>
                   </div>
@@ -343,7 +343,7 @@ const ChooseDeck = () => {
           </div>
 
           {/* Continue Button */}
-          <div className="flex justify-center mt-12">
+          <div className="flex justify-center mt-8 sm:mt-12">
             <ButtonGreen
               text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`}
               onClick={handleContinue}
diff --git a/SerpentRace_Frontend/src/pages/Game/Lobby.jsx b/SerpentRace_Frontend/src/pages/Game/Lobby.jsx
index 68f94c39..84478f90 100644
--- a/SerpentRace_Frontend/src/pages/Game/Lobby.jsx
+++ b/SerpentRace_Frontend/src/pages/Game/Lobby.jsx
@@ -189,25 +189,25 @@ const Lobby = () => {
 
       {/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */}
       {!isGamemaster && approvalStatus === "pending" && (
-        <div className="flex-1 flex items-center justify-center px-4 py-24">
-          <div className="bg-zinc-900/95 backdrop-blur-sm rounded-3xl p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
+        <div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
+          <div className="bg-zinc-900/95 backdrop-blur-sm rounded-2xl sm:rounded-3xl p-6 sm:p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
             <div className="text-center">
-              <div className="mb-6">
-                <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse">
-                  <span className="text-4xl">⏳</span>
+              <div className="mb-4 sm:mb-6">
+                <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse">
+                  <span className="text-3xl sm:text-4xl">⏳</span>
                 </div>
               </div>
-              <h2 className="text-3xl font-bold text-yellow-300 mb-4">Várakozás jóváhagyásra</h2>
-              <p className="text-zinc-300 text-lg mb-6">
+              <h2 className="text-2xl sm:text-3xl font-bold text-yellow-300 mb-3 sm:mb-4">Várakozás jóváhagyásra</h2>
+              <p className="text-zinc-300 text-base sm:text-lg mb-4 sm:mb-6">
                 A gamemaster még nem hagyta jóvá a csatlakozásodat.
               </p>
               <p className="text-zinc-400 text-sm mb-8">
                 Kérjük, várj türelemmel, amíg a gamemaster elfogadja a kérelmedet.
               </p>
-              <div className="flex flex-col gap-3">
-                <div className="bg-zinc-800 rounded-lg p-4 border border-zinc-700">
+              <div className="flex flex-col gap-2 sm:gap-3">
+                <div className="bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-700">
                   <p className="text-zinc-400 text-xs mb-1">Játék kód:</p>
-                  <p className="text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
+                  <p className="text-xl sm:text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
                 </div>
                 <button
                   onClick={handleExit}
@@ -223,28 +223,28 @@ const Lobby = () => {
 
       {/* Normal Lobby View (Gamemaster or approved players) */}
       {(isGamemaster || approvalStatus !== "pending") && (
-        <div className="flex-1 flex items-center justify-center px-4 py-24">
+        <div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
           <section
             ref={sectionRef}
-            className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
+            className={`w-full max-w-3xl rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
               visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
             }`}
             style={{ background: "rgba(0,0,0,0.25)" }}
           >
-            <h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-green-300 mb-3 sm:mb-4 text-center tracking-wide drop-shadow-lg">
               Játék Lobby
             </h1>
 
             {/* Game Code Display */}
-            <div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-xl p-6 mb-6 border-2 border-green-400/50">
-              <p className="text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
-              <div className="flex items-center justify-center gap-3">
-                <p className="text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
+            <div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-lg sm:rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 border-2 border-green-400/50">
+              <p className="text-base sm:text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
+                <p className="text-3xl sm:text-4xl lg:text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
                   {gameCode}
                 </p>
                 <button
                   onClick={copyGameCode}
-                  className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105"
+                  className="bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 text-sm sm:text-base w-full sm:w-auto"
                   title="Másolás vágólapra"
                 >
                   📋 Másolás
@@ -268,33 +268,33 @@ const Lobby = () => {
               </span>
             </div>
 
-            <p className="text-lg text-zinc-300 mb-6 text-center">Játékosok ({currentPlayers.length}):</p>
+            <p className="text-base sm:text-lg text-zinc-300 mb-4 sm:mb-6 text-center">Játékosok ({currentPlayers.length}):</p>
 
             {/* Pending Players Section (Gamemaster only, PRIVATE games) */}
             {isGamemaster && pendingPlayers && pendingPlayers.length > 0 && (
-              <div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-xl shadow-lg p-6 mb-6">
-                <h3 className="text-xl font-bold text-yellow-300 mb-4 flex items-center gap-2">
+              <div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-4 sm:mb-6">
+                <h3 className="text-lg sm:text-xl font-bold text-yellow-300 mb-3 sm:mb-4 flex items-center gap-2">
                   <span>⏳</span>
                   Jóváhagyásra váró játékosok ({pendingPlayers.length})
                 </h3>
                 <ul className="flex flex-col gap-3">
                   {pendingPlayers.map((player, index) => (
-                    <li key={index} className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center gap-4">
-                      <div className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
+                    <li key={index} className="bg-zinc-700 py-2 sm:py-3 px-3 sm:px-4 rounded-lg sm:rounded-xl flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
+                      <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
                         {getInitials(player.playerName)}
                       </div>
-                      <div className="flex-1">
-                        <span className="text-white text-lg font-semibold">{player.playerName}</span>
+                      <div className="flex-1 min-w-0">
+                        <span className="text-white text-base sm:text-lg font-semibold truncate block">{player.playerName}</span>
                         {player.isAuthenticated && (
                           <span className="ml-2 text-xs bg-green-600/30 text-green-300 px-2 py-0.5 rounded-full border border-green-500/50">
                             ✓ Bejelentkezve
                           </span>
                         )}
                       </div>
-                      <div className="flex gap-2">
+                      <div className="flex gap-2 w-full sm:w-auto">
                         <button
                           onClick={() => handleApprovePlayer(player.playerName)}
-                          className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center gap-1"
+                          className="flex-1 sm:flex-none bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center justify-center gap-1 text-sm"
                           title="Jóváhagyás"
                         >
                           <span>✓</span>
@@ -315,8 +315,8 @@ const Lobby = () => {
               </div>
             )}
 
-            <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
-              <ul className="flex flex-col gap-4">
+            <div className="bg-zinc-800/90 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-6 sm:mb-8">
+              <ul className="flex flex-col gap-3 sm:gap-4">
                 {currentPlayers.length === 0 ? (
                   <li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li>
                 ) : (
@@ -359,7 +359,7 @@ const Lobby = () => {
               )}
             </div>
 
-            <div className="flex justify-center gap-4">
+            <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
               {isGamemaster ? (
                 /* Gamemaster view - can start game */
                 <button
-- 
2.52.0