diff --git a/src/components/FajSelector.tsx b/src/components/FajSelector.tsx
index 00bc4e5..ac7da52 100644
--- a/src/components/FajSelector.tsx
+++ b/src/components/FajSelector.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
-import {UseFormRegisterReturn} from "react-hook-form";
 
-function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) {
-    const {register, currentFaj} = props
+function FajSelector(props: { faj: Faj, changeFaj: (val: Faj) => void }) {
+    const {faj, changeFaj} = props
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
-            <select className='col form-select' defaultValue={Faj.Ember} {...register()}>
+            <select className='col form-select' defaultValue={Faj.Ember} value={faj} onChange={e => changeFaj(e.target.value as Faj)}>
                 <option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
                 <optgroup label='más emberi népek'>
                     <option key={Faj.Amazon} value={Faj.Amazon}>{FajLabel(Faj.Amazon)}</option>
@@ -31,10 +30,10 @@ function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj:
             <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>
                 <p className='row pt-2'>
-                    {FajDescription(currentFaj())}
+                    {FajDescription(faj)}
                 </p>
                 <ul>
-                    {FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))}
+                    {FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
                 </ul>
             </div>
         </div>
diff --git a/src/components/KarakterKepzettsegek.tsx b/src/components/KarakterKepzettsegek.tsx
index 5d95b2d..4e5322f 100644
--- a/src/components/KarakterKepzettsegek.tsx
+++ b/src/components/KarakterKepzettsegek.tsx
@@ -1,34 +1,32 @@
 import React from "react";
 import KepzettsegSelector from "./KepzettsegSelector";
 import {Osztaly} from "../domain-models/osztaly";
-import {UseFormRegisterReturn} from "react-hook-form";
 import {
     AvailableKezpettsegList,
     Kepzettseg,
     Kepzettsegek,
     KepzettsegId,
-    KepzettsegLista
 } from "../domain-models/kepzettsegek";
 import {Modifier} from "../domain-models/tulajdonsag";
 import {Faj} from "../domain-models/faj";
 
 
-function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], register: (n: number) => UseFormRegisterReturn, availableKepzettsegList: Kepzettseg[], getKepzettsegN: (n: number) => Kepzettseg}) {
-    const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props
+function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
+    const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
 
     const klist = Array.from(new Array(numberOfKepzettseg).keys())
 
     const preCalculated: {
         kepzettsegek: Kepzettseg[],
-        registration: UseFormRegisterReturn,
+        changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
         selected: Kepzettseg,
     }[] = [];
 
     for (let i = 0; i < numberOfKepzettseg; i++) {
         preCalculated.push({
             kepzettsegek: getKepzettsegListaN(i),
-            registration: register(i),
-            selected: getKepzettsegN(i)
+            selected: Kepzettsegek[kepzettsegek[i]],
+            changeKepzettseg: (newKepzettseg: KepzettsegId) => { changeKepzettsegek([...kepzettsegek.slice(0, i), newKepzettseg, ...kepzettsegek.slice(i+1)]) }
         })
     }
 
@@ -44,8 +42,8 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
                     <KepzettsegSelector
                         key={title+idx}
                         kepzettsegek={preCalculated[idx].kepzettsegek}
-                        fieldRegistration={preCalculated[idx].registration}
                         selected={preCalculated[idx].selected}
+                        changeKepzettseg={preCalculated[idx].changeKepzettseg}
                     />)
                 }
             </div>
@@ -58,10 +56,10 @@ function KarakterKepzettsegek (props: {
     faj: Faj
     osztaly: Osztaly,
     t_int: number,
-    register: (fieldName: string) => UseFormRegisterReturn,
-    watch: (fieldName: string, defaultValue: KepzettsegId) => string
+    kepzettsegek: KepzettsegId[],
+    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
 }) {
-    const { faj, osztaly, t_int, register, watch } = props
+    const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props
 
     const availableKepzettsegList = AvailableKezpettsegList(osztaly)
 
@@ -76,33 +74,10 @@ function KarakterKepzettsegek (props: {
     }
     console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
 
-    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId]
-
     const getKepzettsegListaN = (n: number) => {
         let response = availableKepzettsegList;
         for (let i = 0; i < numberOfKepzettseg; i++) {
-            response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id)
-        }
-        if (osztaly === Osztaly.Tolvaj) {
-            for (let i = 0; i < 4; i++) {
-                response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
-            }
-        }
-        return response
-    }
-
-    const tolvajKepzettsegek =  KepzettsegLista.filter(k => k.Osztalyok != null && k.Osztalyok.includes(Osztaly.Tolvaj))
-    const getTolvajKepzettsegN = (n: number) => Kepzettsegek[watch('tolvaj_kepzettseg.'+n, tolvajKepzettsegek[n].Id) as KepzettsegId]
-
-    const getTolvajKepzettsegListaN = (n: number) => {
-        let response = tolvajKepzettsegek;
-        // filter out selected kepzettsegek
-        for (let i = 0; i < numberOfKepzettseg; i++) {
-            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
-        }
-        // filter out selected tolvaj kepzettsegek
-        for (let i = 0; i < 4; i++) {
-            response = response.filter(x => i === n || x.Id !== getTolvajKepzettsegN(i).Id)
+            response = response.filter(x => i === n || x.Id !== kepzettsegek[i])
         }
         return response
     }
@@ -111,18 +86,9 @@ function KarakterKepzettsegek (props: {
         <InternalKepzettsegekSelector
             title="Képzettségek"
             numberOfKepzettseg={numberOfKepzettseg}
-            availableKepzettsegList={availableKepzettsegList}
             getKepzettsegListaN={getKepzettsegListaN}
-            register={(n: number) => register('kepzettseg.' + n)}
-            getKepzettsegN={getKepzettsegN} />
-        {osztaly === Osztaly.Tolvaj &&
-            <InternalKepzettsegekSelector
-                title="Tolvaj Képzettségek"
-                numberOfKepzettseg={4}
-                availableKepzettsegList={tolvajKepzettsegek}
-                getKepzettsegListaN={getTolvajKepzettsegListaN}
-                register={(n: number) => register('tolvaj_kepzettseg.' + n)}
-                getKepzettsegN={getTolvajKepzettsegN} />}
+            changeKepzettsegek={changeKepzettsegek}
+            kepzettsegek={kepzettsegek} />
     </>
 }
 
diff --git a/src/components/KepzettsegSelector.tsx b/src/components/KepzettsegSelector.tsx
index e71355d..98aa9b8 100644
--- a/src/components/KepzettsegSelector.tsx
+++ b/src/components/KepzettsegSelector.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import {Kepzettseg} from "../domain-models/kepzettsegek";
+import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek";
 import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
-import {UseFormRegisterReturn} from "react-hook-form";
 import {OsztalyLabel} from "../domain-models/osztaly";
 
 function kepzettsegOptionText(k: Kepzettseg) {
@@ -9,14 +8,14 @@ function kepzettsegOptionText(k: Kepzettseg) {
     return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
 }
 
-function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
+function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], changeKepzettseg: (newKepzettseg: KepzettsegId) => void, selected : Kepzettseg}) {
 
-    const { kepzettsegek, fieldRegistration, selected } = props
+    const { kepzettsegek, changeKepzettseg, selected } = props
 
     return <>
         <div className='row'>
             <select className='form-control'
-                    value={selected.Id} {...fieldRegistration}>
+                    value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
                 {kepzettsegek.map(k =>(
                     <option key={k.Id} value={k.Id}>
                         {kepzettsegOptionText(k)}
diff --git a/src/components/MasodlagosErtekek.tsx b/src/components/MasodlagosErtekek.tsx
index 3d8363a..f00846d 100644
--- a/src/components/MasodlagosErtekek.tsx
+++ b/src/components/MasodlagosErtekek.tsx
@@ -103,7 +103,7 @@ function AkarateroMento(osztaly: Osztaly) : number {
     }
 }
 
-function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: () => KarakterTulajdonsagok}) {
+function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok}) {
 
     const { osztaly, tulajdonsagok } = props;
 
@@ -125,33 +125,33 @@ function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: () => Karakt
                                 <span>(HP)</span>
                             </OverlayTrigger>
                         </label>
-                    <p className='col'>{HP(osztaly, tulajdonsagok().t_egs)}</p>
+                    <p className='col'>{HP(osztaly, tulajdonsagok.t_egs)}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Védekezési Osztály (VO)</label>
-                    <p className='col'>{10+Modifier(tulajdonsagok().t_ugy)}</p>
+                    <p className='col'>{10+Modifier(tulajdonsagok.t_ugy)}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Közelharci támadás</label>
-                    <p className='col'>{SignedNumberToText(KozelharciTB(osztaly, tulajdonsagok()))}</p>
+                    <p className='col'>{SignedNumberToText(KozelharciTB(osztaly, tulajdonsagok))}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Célzó támadás</label>
-                    <p className='col'>{SignedNumberToText(TamadasBonusz(osztaly) + Modifier(tulajdonsagok().t_ugy))}</p>
+                    <p className='col'>{SignedNumberToText(TamadasBonusz(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
                 </div>
             </div>
             <div className='col-lg-6'>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Kitartás mentő</label>
-                    <p className='col'>{SignedNumberToText(KitartasMento(osztaly) + Modifier(tulajdonsagok().t_egs))}</p>
+                    <p className='col'>{SignedNumberToText(KitartasMento(osztaly) + Modifier(tulajdonsagok.t_egs))}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label>
-                    <p className='col'>{SignedNumberToText(ReflexMento(osztaly) + Modifier(tulajdonsagok().t_ugy))}</p>
+                    <p className='col'>{SignedNumberToText(ReflexMento(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label>
-                    <p className='col'>{SignedNumberToText(AkarateroMento(osztaly) + Modifier(tulajdonsagok().t_bol))}</p>
+                    <p className='col'>{SignedNumberToText(AkarateroMento(osztaly) + Modifier(tulajdonsagok.t_bol))}</p>
                 </div>
             </div>
         </div>
diff --git a/src/components/OsztalySelector.tsx b/src/components/OsztalySelector.tsx
index b070572..cc6c09f 100644
--- a/src/components/OsztalySelector.tsx
+++ b/src/components/OsztalySelector.tsx
@@ -7,26 +7,25 @@ import {
     OsztalySpecialSkills
 } from "../domain-models/osztaly";
 import {Faj} from "../domain-models/faj";
-import {UseFormRegisterReturn} from "react-hook-form";
 
-function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Osztaly, register: () => UseFormRegisterReturn}) {
-    const {currentFaj, currentOsztaly, register} = props;
+function OsztalySelector(props: {currentFaj: Faj, currentOsztaly: Osztaly, changeOsztaly: (newOsztaly: Osztaly) => void}) {
+    const {currentFaj, currentOsztaly, changeOsztaly} = props;
 
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Osztály</label>
-            <select className="col form-select" defaultValue={Osztaly.Harcos} {...register()}>
+            <select className="col form-select" defaultValue={Osztaly.Harcos} value={currentOsztaly} onChange={(e) => changeOsztaly(e.target.value as Osztaly)} >
                 <optgroup label='Harcos'>
                     <option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
-                    {currentFaj() === Faj.Amazon && (
+                    {currentFaj === Faj.Amazon && (
                         <option value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
                     <option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
                     <option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
                     <option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
                 </optgroup>
                 <option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
-                {currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
-                {![Faj.Osember, Faj.Amazon].includes(currentFaj()) && (
+                {currentFaj !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
+                {![Faj.Osember, Faj.Amazon].includes(currentFaj) && (
                     <optgroup label='Varázsló'>
                         <option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
                         <option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
@@ -38,13 +37,13 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
             <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col' >
                 <p className='row pt-2'>
-                    {OsztalyDescription(currentOsztaly())}
+                    {OsztalyDescription(currentOsztaly)}
                 </p>
                 <ul>
-                    {OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
+                    {OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
                 </ul>
                 <div className='col'>
-                    {OsztalySpecialSkills(currentOsztaly()).map(skill =>
+                    {OsztalySpecialSkills(currentOsztaly).map(skill =>
                         <p key={skill.Id} >
                             <strong className='d-inline'>
                                 {skill.Name}
@@ -60,28 +59,6 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
                         </p>
                     )}
                 </div>
-                {/*<p className='d-inline-flex gap-1'>*/}
-                {/*    {OsztalySpecialSkills(currentOsztaly()).map(skill => (*/}
-                {/*        <button*/}
-                {/*            key={'btn' + skill.Id}*/}
-                {/*            className='btn btn-outline-dark'*/}
-                {/*            type='button'*/}
-                {/*            data-bs-toggle="collapse"*/}
-                {/*            data-bs-target={"#collapse-"+skill.Id}*/}
-                {/*            aria-expanded="false"*/}
-                {/*            aria-controls="collapseExample"*/}
-                {/*        >*/}
-                {/*            {skill.Name}*/}
-                {/*        </button>*/}
-                {/*    ))}*/}
-                {/*</p>*/}
-                {/*{OsztalySpecialSkills(currentOsztaly()).map(skill => (*/}
-                {/*    <div key={'collapse'+skill.Id} className="collapse" id={'collapse-' + skill.Id}>*/}
-                {/*        <div className="card card-body">*/}
-                {/*            {skill.Description}*/}
-                {/*        </div>*/}
-                {/*    </div>*/}
-                {/*))}*/}
             </div>
         </div>
     </>
diff --git a/src/components/TulajdonsagInput.tsx b/src/components/TulajdonsagInput.tsx
index b169767..7898dea 100644
--- a/src/components/TulajdonsagInput.tsx
+++ b/src/components/TulajdonsagInput.tsx
@@ -12,18 +12,18 @@ function fajiModositoText(faj: Faj, szamolas: (f: Faj) => number) : string {
 
 function TulajdonsagInput(props: {
     tulajdonsag: string,
-    currentFaj : () => Faj,
+    currentFaj : Faj,
     fajiModosito: (faj: Faj) => number,
-    register: () => any,
-    getCurrentValue: () => number
+    changeValue: (val: number) => void
+    currentValue: number
     tooLowError: string,
     tooHighError: string
 }) {
     const {
         tulajdonsag,
-        register,
+        changeValue,
         currentFaj,
-        getCurrentValue,
+        currentValue,
         fajiModosito,
         tooLowError,
         tooHighError,
@@ -31,20 +31,20 @@ function TulajdonsagInput(props: {
     return (<div className='row m-2'>
         <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
         <div className='col-lg-1 col-sm-2 m-2'>
-            <input className='form-control' maxLength={2} defaultValue={10} type='number' {...register()} />
+            <input className='form-control' maxLength={2} defaultValue={10} type='number' value={currentValue} onChange={e => changeValue(Number(e.target.value))} />
         </div>
         <span className='col-sm-2 m-2'>
-                            {fajiModositoText(currentFaj(), fajiModosito)}
+                            {fajiModositoText(currentFaj, fajiModosito)}
                         </span>
         <span className='col-sm-2 m-2'>
-                            Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() }
+                            Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() }
                         </span>
         <span className='col-sm-2 m-2'>
-                            Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) }
+                            Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) }
                         </span>
-        {getCurrentValue() < 3 && (
+        {currentValue < 3 && (
             <span className='form-field-error'>{tooLowError}</span>)}
-        {getCurrentValue() > 18 && (
+        {currentValue > 18 && (
             <span className='form-field-error'>{tooHighError}</span>)}
     </div>)
 }
diff --git a/src/components/Tulajdonsagok.tsx b/src/components/Tulajdonsagok.tsx
index de5bce8..197d4c6 100644
--- a/src/components/Tulajdonsagok.tsx
+++ b/src/components/Tulajdonsagok.tsx
@@ -1,82 +1,79 @@
 import React from "react";
-import {RollAllAbilities, Tulajdonsag, TulajdonsagModositokFajokra} from "../domain-models/tulajdonsag";
+import {
+    KarakterTulajdonsagok,
+    RollAllAbilities,
+    Tulajdonsag,
+    TulajdonsagModositokFajokra
+} from "../domain-models/tulajdonsag";
 import TulajdonsagInput from "./TulajdonsagInput";
 import {Faj} from "../domain-models/faj";
-import {FieldValues, UseFormRegister} from "react-hook-form";
-
-const tulajdonsagDefaultOptions = {
-    required: true,
-    min: 3,
-    max: 18,
-};
 
 function Tulajdonsagok(props: {
-    currentFaj: () => Faj,
-    watch: (name: string, defaultValue: any) => any
-    setValue: (name: string, value: any) => void
-    register:  UseFormRegister<FieldValues>
+    currentFaj: Faj,
+    tulajdonsagok: KarakterTulajdonsagok
+    changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void
 }) {
-    const {currentFaj, watch, setValue, register} = props
+    const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props
     return <>
         <div className='row'>
             <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
             <div className='col-sm-2 m-2'>
                 <button className='btn btn-dark' type='button'
-                        onClick={() => RollAllAbilities((name: string, value: number) => setValue('tul.'+name, value))}>Dobás
+                        onClick={() => RollAllAbilities(changeTulajdonsagok)}>Dobás
                 </button>
             </div>
         </div>
         <TulajdonsagInput
             tulajdonsag='Erő'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ero, 10))}
+            currentValue={tulajdonsagok.t_ero}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)}
-            register={() => register('tul.'+Tulajdonsag.Ero, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ero: val})}
             tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
             tooHighError='Szét szakadtak az izmaid!'
         />
         <TulajdonsagInput
             tulajdonsag='Ügyesség'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ugyesseg, 10))}
+            currentValue={tulajdonsagok.t_ugy}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
-            register={() => register('tul.'+Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
             tooLowError='Orrabuktál jelentkezés helyett!'
             tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
         />
         <TulajdonsagInput
             tulajdonsag='Egészség'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Egeszseg, 10))}
+            currentValue={tulajdonsagok.t_egs}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)}
-            register={() => register('tul.'+Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_egs: val})}
             tooLowError='Túl beteg vagy ahhoz, hogy kalandozni menj!'
             tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
         />
         <TulajdonsagInput
             tulajdonsag='Intelligencia'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Intelligencia, 10))}
+            currentValue={tulajdonsagok.t_int}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)}
-            register={() => register('tul.'+Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_int: val})}
             tooLowError='Elfelejtetted, hogy mikor is kéne kalandozni indulni!'
             tooHighError='Ilyen tudás és logika birtokában mi szükséged van új információkra? Mindent le tudsz vezetni a már meglévő ismereteidből, és ezt azonnal beláttad.'
         />
         <TulajdonsagInput
             tulajdonsag='Bölcsesség'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Bolcsesseg, 10))}
+            currentValue={tulajdonsagok.t_bol}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)}
-            register={() => register('tul.'+Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_bol: val})}
             tooLowError='Nem bírtál ellenállni a kíváncsiságodnak, hogy közelebbről is megvizsgáld a tőr hegyét. Nagyon közelről.'
             tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
         />
         <TulajdonsagInput
             tulajdonsag='Karizma'
-            getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Karizma, 10))}
+            currentValue={tulajdonsagok.t_kar}
             currentFaj={currentFaj}
             fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)}
-            register={() => register('tul.'+Tulajdonsag.Karizma, tulajdonsagDefaultOptions)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_kar: val})}
             tooLowError='Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.'
             tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.'
         />
diff --git a/src/domain-models/tulajdonsag.ts b/src/domain-models/tulajdonsag.ts
index 09a3b05..facc07c 100644
--- a/src/domain-models/tulajdonsag.ts
+++ b/src/domain-models/tulajdonsag.ts
@@ -40,13 +40,15 @@ function rollAbility() {
     return result;
 }
 
-export function RollAllAbilities(setValue: (ability: string, value: number) => void) {
-    setValue(Tulajdonsag.Ero, rollAbility())
-    setValue(Tulajdonsag.Ugyesseg, rollAbility())
-    setValue(Tulajdonsag.Egeszseg, rollAbility())
-    setValue(Tulajdonsag.Intelligencia, rollAbility())
-    setValue(Tulajdonsag.Bolcsesseg, rollAbility())
-    setValue(Tulajdonsag.Karizma, rollAbility())
+export function RollAllAbilities(setValue: (newValue: KarakterTulajdonsagok) => void) {
+    setValue({
+        t_ero: rollAbility(),
+        t_ugy: rollAbility(),
+        t_egs: rollAbility(),
+        t_int: rollAbility(),
+        t_bol: rollAbility(),
+        t_kar: rollAbility(),
+    })
 }
 
 export const Modifier = (val : number) => Math.floor(val / 3) - 3
diff --git a/src/pages/CreateCharacter.tsx b/src/pages/CreateCharacter.tsx
index ee8b1fa..1af3b53 100644
--- a/src/pages/CreateCharacter.tsx
+++ b/src/pages/CreateCharacter.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './CreateCharacter.css'
-import {useForm} from "react-hook-form";
 import {Faj} from "../domain-models/faj";
 import {Osztaly} from "../domain-models/osztaly"
 import FajSelector from "../components/FajSelector";
@@ -9,9 +8,7 @@ import OsztalySelector from "../components/OsztalySelector";
 import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
 import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
-
-const FAJ_FIELD_NAME = 'faj'
-const OSZTALY_FIELD_NAME = 'osztaly'
+import {KepzettsegId} from "../domain-models/kepzettsegek";
 
 const tulajdonsagDefaults: KarakterTulajdonsagok = {
     t_ero: 10,
@@ -23,18 +20,12 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = {
 }
 
 function CreateCharacterPage() {
-    const {
-        register,
-        handleSubmit,
-        setValue,
-        watch,
-        formState: {errors}
-    } = useForm()
-    const sendForm = (data: any) => console.log(data)
 
-    const currentFaj = () => watch(FAJ_FIELD_NAME, Faj.Ember)
-
-    const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos)
+    let [name, changeName] = useState<string>("Névtelen kanadozó")
+    let [faj, changeFaj] = useState(Faj.Ember)
+    let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
+    let [currentOsztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
+    let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
 
     return (
         <div>
@@ -42,46 +33,46 @@ function CreateCharacterPage() {
                 <h1>Karakter létrehozása</h1>
             </div>
             <div className='p-3'>
-                <form onSubmit={handleSubmit(sendForm)}>
+                <form>
                     <div className='row'>
                         <h5 className='col align-self-center'>Származás</h5>
                     </div>
                     <div className='row m-2'>
                         <label className='col-md-2 col-sm-3 col-form-label' >Név</label>
                         <input className='col form-control'
-                               defaultValue='Névtelen Kalandozó' {...register('nev', {required: true})} />
-                        {errors.nev && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
+                               value={name}
+                               onChange={(e) => changeName(e.target.value)}/>
+                        {!name && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
                     </div>
                     <FajSelector
-                        register={() => register(FAJ_FIELD_NAME, {required: true})}
-                        currentFaj={currentFaj}
+                        changeFaj={changeFaj}
+                        faj={faj}
                     />
                     <hr/>
                     <Tulajdonsagok
-                        currentFaj={currentFaj}
-                        watch={watch}
-                        setValue={setValue}
-                        register={register}
+                        currentFaj={faj}
+                        tulajdonsagok={tulajdonsagok}
+                        changeTulajdonsagok={changeTulajdonsagok}
                     />
                     <hr />
                     <div className='row'>
                         <h5 className='col align-self-center'>Tanult</h5>
                     </div>
                     <OsztalySelector
-                        currentFaj={currentFaj}
+                        currentFaj={faj}
                         currentOsztaly={currentOsztaly}
-                        register={() => register(OSZTALY_FIELD_NAME, {required: true})}
+                        changeOsztaly={changeOsztaly}
                     />
                     <KarakterKepzettsegek
-                        faj={currentFaj()}
-                        osztaly={currentOsztaly()}
-                        t_int={watch('tul', tulajdonsagDefaults).t_int}
-                        register={(fieldName: string) => register(fieldName, {required: true})}
-                        watch={watch}
+                        faj={faj}
+                        osztaly={currentOsztaly}
+                        t_int={tulajdonsagok.t_int}
+                        kepzettsegek={kepzettsegek}
+                        changeKepzettsegek={changeKepzettsegek}
                     />
 
                     <hr />
-                    <MasodlagosErtekek osztaly={currentOsztaly()} tulajdonsagok={() => watch('tul', tulajdonsagDefaults)} />
+                    <MasodlagosErtekek osztaly={currentOsztaly} tulajdonsagok={tulajdonsagok} />
 
                     <div className='d-grid gap-2 m-5'>
                         <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>