diff --git a/frontend/src/second-edition/components/Varazslatok.tsx b/frontend/src/second-edition/components/Varazslatok.tsx
index ee35006..e79b934 100644
--- a/frontend/src/second-edition/components/Varazslatok.tsx
+++ b/frontend/src/second-edition/components/Varazslatok.tsx
@@ -1,96 +1,55 @@
 import React from "react";
-import {KarakterVarazslat, Varazslat} from "../domain-models/varazslat";
+import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
 import {getClassLevels} from "../domain-models/szintlepes";
 import {useDispatch, useSelector} from "react-redux";
 import {AppDispatch, RootState} from "../../store";
 import {addVarazslat, characterSelector, setVarazslat} from "../domain-models/characterSlice";
 import {Osztaly2E} from "../domain-models/osztaly2E";
-import spells from "../data/spells.json";
 import VarazslatSelector from "../display-components/VarazslatSelector";
 
-//
-// function VarazslatSzint(props: {
-//     szint: number,
-//     osztaly: Osztaly2E,
-//     selected: string[]
-// }) {
-//     const {szint, osztaly, selected} = props
-//
-//     let classSpells: Varazslat[] = []
-//
-//     switch (osztaly) {
-//         case Osztaly2E.Vandor:
-//         case Osztaly2E.Varazslo:
-//             classSpells = (spells.varazslo.tomor as Varazslat[])
-//             break;
-//         case Osztaly2E.Illuzionista:
-//             classSpells = (spells.illuzionista.tomor as Varazslat[])
-//             break;
-//         case Osztaly2E.Dalnok:
-//             classSpells = (spells.dalnok.tomor as Varazslat[])
-//             break;
-//         case Osztaly2E.Druida:
-//             classSpells = (spells.druida.tomor as Varazslat[])
-//             break;
-//         case Osztaly2E.Pap:
-//             classSpells = (spells.pap.tomor as Varazslat[])
-//             break;
-//     }
-//
-//
-//     classSpells = classSpells.filter(v => v.szint === szint)
-//
-//     const selectedSpells = classSpells.filter(v => selected.includes(v.id))
-//
-// }
-
-function Varazskonyv(props: {osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
-    const {osztaly, varazslatok } = props;
-
+function VarazskonyvSzint(props: {osztaly: Osztaly2E, level: number, varazslatok: KarakterVarazslat[]}) {
+    const {level, osztaly, varazslatok} = props;
     const dispatch = useDispatch.withTypes<AppDispatch>()()
 
-    let classSpells: Varazslat[] = []
-
-    switch (osztaly) {
-        case Osztaly2E.Vandor:
-        case Osztaly2E.Varazslo:
-            classSpells = (spells.varazslo.tomor as Varazslat[])
-            break;
-        case Osztaly2E.Illuzionista:
-            classSpells = (spells.illuzionista.tomor as Varazslat[])
-            break;
-        case Osztaly2E.Dalnok:
-            classSpells = (spells.dalnok.tomor as Varazslat[])
-            break;
-        case Osztaly2E.Druida:
-            classSpells = (spells.druida.tomor as Varazslat[])
-            break;
-        case Osztaly2E.Pap:
-            classSpells = (spells.pap.tomor as Varazslat[])
-            break;
-    }
-
-    const firstLevel = classSpells.filter(v => v.szint === 1)
-    const firstLevelSelected = varazslatok.map(v => {
-        return firstLevel.find(x => x.id === v.id)
+    const classSpells = ClassSpells(osztaly)
+    const leveledSpells = classSpells.filter(v => v.szint === level)
+    const selectedSpells = varazslatok.map(v => {
+        return leveledSpells.find(x => x.id === v.id)
     }).filter(x => !!x)
-    const firstLevelAvailable = firstLevel.filter(v => varazslatok.every(x => x.id !== v.id))
+    const availableSpells = leveledSpells.filter(v => varazslatok.every(x => x.id !== v.id))
 
     return <>
-        <h3>Varázslói Varázskönyv</h3>
-        <h5>1. Szintű varázslatok</h5>
-        {firstLevelSelected.map((v, i) => (
+        <h5>{level}. Szintű varázslatok</h5>
+        {selectedSpells.map((v, i) => (
             <VarazslatSelector
                 key={`${i}VarazslatSelector`}
                 selected={v.id}
-                available={[v, ...firstLevelAvailable]}
+                available={[v, ...availableSpells]}
                 dataTestId={`varazskonyv_varazslo_1_${v.id}`}
                 onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
             />))}
-        <button className='btn btn-outline-dark'
-                onClick={() => dispatch(addVarazslat(firstLevelAvailable[0].id))}>
+        {availableSpells.length > 0 && <button className='btn btn-outline-dark'
+                onClick={() => dispatch(addVarazslat(availableSpells[0].id))}>
             Új varázslat hozzáadása
-        </button>
+        </button>}
+    </>;
+
+}
+
+function Varazskonyv(props: {osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
+    const {osztaly, varazslatok } = props;
+
+    const classSpells = ClassSpells(osztaly)
+    const spells = varazslatok.map(v => classSpells.find(x => x.id === v.id)).filter(x => !!x)
+
+    return <>
+        <h3>Varázslói Varázskönyv</h3>
+        <VarazskonyvSzint osztaly={osztaly} level={0} varazslatok={varazslatok} />
+        {spells.some(v => v.szint === 0) && <VarazskonyvSzint osztaly={osztaly} level={1} varazslatok={varazslatok} />}
+        {spells.some(v => v.szint === 1) && <VarazskonyvSzint osztaly={osztaly} level={2} varazslatok={varazslatok} />}
+        {spells.some(v => v.szint === 2) && <VarazskonyvSzint osztaly={osztaly} level={3} varazslatok={varazslatok} />}
+        {spells.some(v => v.szint === 3) && <VarazskonyvSzint osztaly={osztaly} level={4} varazslatok={varazslatok} />}
+        {spells.some(v => v.szint === 4) && <VarazskonyvSzint osztaly={osztaly} level={5} varazslatok={varazslatok} />}
     </>;
 }
 
diff --git a/frontend/src/second-edition/domain-models/varazslat.ts b/frontend/src/second-edition/domain-models/varazslat.ts
index 8dd547c..252cf4c 100644
--- a/frontend/src/second-edition/domain-models/varazslat.ts
+++ b/frontend/src/second-edition/domain-models/varazslat.ts
@@ -74,4 +74,22 @@ export function GetLeveledSpells(osztaly: Osztaly2E): MagasabbSzintuVarazslat[]
         default:
             return []
     }
+}
+
+export function ClassSpells(osztaly: Osztaly2E): Varazslat[] {
+    switch (osztaly) {
+        case Osztaly2E.Vandor:
+        case Osztaly2E.Varazslo:
+            return spells.varazslo.tomor as Varazslat[]
+        case Osztaly2E.Illuzionista:
+            return spells.illuzionista.tomor as Varazslat[]
+        case Osztaly2E.Dalnok:
+            return spells.dalnok.tomor as Varazslat[]
+        case Osztaly2E.Druida:
+            return spells.druida.tomor as Varazslat[]
+        case Osztaly2E.Pap:
+            return spells.pap.tomor as Varazslat[]
+        default:
+            return [];
+    }
 }
\ No newline at end of file