diff --git a/docker-compose.yaml b/docker-compose.yaml
index e9dea94..636d58a 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -8,7 +8,7 @@ services:
       POSTGRES_PASSWORD: "kemkas-dev42"
 
   backend:
-    image: registry.digitalocean.com/kemkas/kemkas-be:e0a2e489
+    image: ghcr.io/morbalint/kemkas-backend:b8565f8e
     ports:
       - "8080:8080"
     environment:
diff --git a/frontend/src/second-edition/components/Varazslatok.tsx b/frontend/src/second-edition/components/Varazslatok.tsx
new file mode 100644
index 0000000..b614518
--- /dev/null
+++ b/frontend/src/second-edition/components/Varazslatok.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import {KarakterVarazslat, Varazslat} from "../domain-models/varazslat";
+import {getClassLevels} from "../domain-models/szintlepes";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {addVarazslat, characterSelector, setVarazslatok} from "../domain-models/characterSlice";
+import {Osztaly2E} from "../domain-models/osztaly2E";
+import spells from "../data/spells.json";
+import VarazslatSelector from "../display-components/VarazslatSelector";
+import {arraySetN} from "../../util";
+//
+// 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, varazsloSzint: number, varazslatok: KarakterVarazslat[] }) {
+    const {osztaly, varazsloSzint, 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 = firstLevel.filter(v => varazslatok.some(x => x.id === v.id))
+    const firstLevelAvailable = firstLevel.filter(v => varazslatok.every(x => x.id !== v.id))
+
+    const createOnChange = (idx: number, allSelected: string[]) => (selected: string) => {
+        const nextVarazslatok: KarakterVarazslat[] = arraySetN(allSelected, idx, selected).map(x => ({
+            id: x,
+            bekeszitve: false,
+        }))
+        dispatch(setVarazslatok(nextVarazslatok))
+    }
+
+    return <>
+        <h3>Varazsloi Varazskonyv</h3>
+        <h5>1. Szintu varazslatok</h5>
+        {firstLevelSelected.map((v, i) => (
+            <VarazslatSelector
+                selected={v.id}
+                available={[v, ...firstLevelAvailable]}
+                dataTestId={`varazskonyv_varazslo_1_${v.id}`}
+                onChange={createOnChange(i, varazslatok.map(x => x.id))}
+            />)) }
+        {firstLevelSelected.length < varazsloSzint &&
+            <button className='btn btn-outline-dark' onClick={() => dispatch(addVarazslat({id: firstLevelAvailable[0].id, bekeszitve: false}))} >Uj varazslat hozzadasa</button>}
+    </>;
+}
+
+function Varazslatok() {
+    const karakter = useSelector.withTypes<RootState>()(characterSelector)
+    const classLevels = getClassLevels(karakter.szintlepesek)
+
+
+    return <>
+        {classLevels[Osztaly2E.Varazslo] > 0 && <Varazskonyv osztaly={Osztaly2E.Varazslo} varazsloSzint={classLevels[Osztaly2E.Varazslo]} varazslatok={karakter.varazslatok} />}
+    </>
+}
+
+export default Varazslatok;
\ No newline at end of file
diff --git a/frontend/src/second-edition/display-components/VarazslatSelector.tsx b/frontend/src/second-edition/display-components/VarazslatSelector.tsx
new file mode 100644
index 0000000..f028f12
--- /dev/null
+++ b/frontend/src/second-edition/display-components/VarazslatSelector.tsx
@@ -0,0 +1,23 @@
+import React from "react"
+import {Varazslat} from "../domain-models/varazslat";
+
+function VarazslatSelector(props: {
+    selected: string,
+    available: Varazslat[],
+    onChange: (selected: string) => void,
+    dataTestId: string,
+}) {
+    const {selected, available, onChange, dataTestId} = props
+
+    return <>
+        <select className='col form-select'
+                value={selected}
+                onChange={e => onChange(e.target.value)}
+                data-testid={dataTestId}
+        >
+            {available.map(v => (<option key={v.id} value={v.id}> {v.nev} </option>))}
+        </select>
+    </>
+}
+
+export default VarazslatSelector;
diff --git a/frontend/src/second-edition/domain-models/characterSlice.ts b/frontend/src/second-edition/domain-models/characterSlice.ts
index e98aea1..b7a96f3 100644
--- a/frontend/src/second-edition/domain-models/characterSlice.ts
+++ b/frontend/src/second-edition/domain-models/characterSlice.ts
@@ -14,6 +14,7 @@ import {
 } from  "./kepzettsegek2E.data"
 import {BaseHP} from "./masodlagos_ertekek";
 import {KarakterFelszereles} from "./felszereles";
+import {KarakterVarazslat} from "./varazslat";
 
 export const characterSlice = createSlice({
     name: "character2E",
@@ -95,7 +96,13 @@ export const characterSlice = createSlice({
         },
         setFelszereles: (state, action: {payload: KarakterFelszereles}) => {
             state.felszereles = action.payload;
-        }
+        },
+        setVarazslatok: (state, action: {payload: KarakterVarazslat[]}) => {
+            state.varazslatok = action.payload;
+        },
+        addVarazslat: (state, action: {payload: KarakterVarazslat}) => {
+            state.varazslatok = [...state.varazslatok, action.payload];
+        },
     }
 })
 
@@ -150,6 +157,8 @@ export const {
     setKepzettsegek,
     setTolvajKepzettsegek,
     setFelszereles,
+    setVarazslatok,
+    addVarazslat,
 } = characterSlice.actions
 
 export const characterSelector = characterSlice.selectSlice
diff --git a/frontend/src/second-edition/pages/CreateCharacter2E.tsx b/frontend/src/second-edition/pages/CreateCharacter2E.tsx
index e72ca78..242ee27 100644
--- a/frontend/src/second-edition/pages/CreateCharacter2E.tsx
+++ b/frontend/src/second-edition/pages/CreateCharacter2E.tsx
@@ -22,6 +22,7 @@ import {userSelector} from "../../shared/domain-models/userSlice";
 import {SaveModal} from "../../shared/components/SaveModal";
 import {characterSelector, setCharacter} from "../domain-models/characterSlice";
 import Szarmazas from "../components/Szarmazas";
+import Varazslatok from "../components/Varazslatok";
 
 function CreateCharacter2E(props: {
     faro?: Faro
@@ -129,6 +130,8 @@ function CreateCharacter2E(props: {
                 <hr/>
                 <Felszereles />
 
+                <Varazslatok />
+
                 <hr/>
                 <div className='row'>
                     <h5 className='col align-self-center'>Véglegesítés</h5>