diff --git a/SerpentRace_Frontend/src/api/deckApi.js b/SerpentRace_Frontend/src/api/deckApi.js
index b322caab..f67cd22f 100644
--- a/SerpentRace_Frontend/src/api/deckApi.js
+++ b/SerpentRace_Frontend/src/api/deckApi.js
@@ -10,6 +10,16 @@ export const createDeck = async (deck) => {
   }
 }
 
+// Get paginated decks (authenticated)
+export const getDecksPage = async (from = 0, to = 49) => {
+  try {
+    const response = await apiClient.get(`/decks/page/${from}/${to}`)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
 export default {
   createDeck
 }
diff --git a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx
index 0961de73..835a925f 100644
--- a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx
+++ b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
@@ -20,19 +20,7 @@ const deckTypes = [
   { label: "Fun", color: "var(--color-fun)" },
 ]
 
-const mockDecks = [
-  // Just for visual mockup
-  { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" },
-  { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" },
-  { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" },
-  { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" },
-  { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" },
-  { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" },
-  { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" },
-  { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" },
-  { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" },
-  { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" },
-]
+// initial state will be fetched from backend
 
 const origins = ["Mind", "Vállalati", "Saját"]
 
@@ -82,9 +70,39 @@ const DeckManager = () => {
   const [search, setSearch] = useState("")
   const [showSortHelp, setShowSortHelp] = useState(false)
   const [selectedDeck, setSelectedDeck] = useState(null)
+  const [decks, setDecks] = useState([])
+  const [loading, setLoading] = useState(false)
 
-  // Filter logic (mock)
-  let filteredDecks = mockDecks.filter((deck) => {
+  useEffect(() => {
+    let mounted = true
+    const load = async () => {
+      setLoading(true)
+      try {
+        const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 49))
+        if (!mounted) return
+        // map backend deck shape to UI shape
+        const mapped = result.decks.map(d => ({
+          id: d.id,
+          name: d.name,
+          type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck',
+          created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '',
+          origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját',
+          raw: d
+        }))
+        setDecks(mapped)
+      } catch (err) {
+        console.error('Failed to load decks', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+    return () => { mounted = false }
+  }, [])
+
+  // Filter logic
+  const sourceDecks = decks
+  let filteredDecks = sourceDecks.filter((deck) => {
     const typeMatch = selectedType === "All" || deck.type === selectedType
     const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
     const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
@@ -255,8 +273,14 @@ const DeckManager = () => {
             <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>
           </div>
-          {/* Existing Decks (Mockup) */}
-          {filteredDecks.map((deck) => {
+          {/* Existing Decks (from backend) */}
+          {loading && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Betöltés...</div>
+          )}
+          {!loading && filteredDecks.length === 0 && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Nincsenek mentett paklik.</div>
+          )}
+          {!loading && filteredDecks.map((deck) => {
             const deckType = deckTypes.find((t) => t.label === deck.type)
             const borderColor = deckType ? deckType.color : "var(--color-success)"
             return (
diff --git a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
index 1b895407..9d5ed97f 100644
--- a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
+++ b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
@@ -14,6 +14,10 @@ import {
 export default function DeckInfoPopUp({ deck, onClose }) {
   if (!deck) return null
 
+  // Debug: Log the deck structure to see what we're working with
+  console.log('Deck in popup:', deck)
+  console.log('Cards:', deck.cards)
+
   // Scroll blokkolás amikor a popup nyitva van
   useEffect(() => {
     // Scroll letiltása
@@ -33,13 +37,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
 
-  // Mock data - ezeket majd a backend adatokra cseréljük
+  // Use real deck data with safe fallbacks
+  const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
+  const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
+
+  // Get data from raw if available
+  const rawData = deck.raw || deck
+  
+  // Use played number from raw data for answers count
+  const questionsCount = rawData.cardCount || 0
+  const answersCount = rawData.playedNumber || 0
+
+  console.log('Calculated counts:', { questionsCount, answersCount, rawData })
+
   const mockData = {
-    creator: "John Doe",
-    privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", 
-    questionsCount: Math.floor(Math.random() * 50) + 10,
-    answersCount: Math.floor(Math.random() * 200) + 50,
-    ...deck
+    ...deck,
+    creator,
+    privacy,
+    questionsCount,
+    answersCount
   }
 
   const formatDate = (dateString) => {