diff --git a/web/app/components-v2/createdialog/DialogField.ts b/web/app/components-v2/createdialog/DialogField.ts
index b96c0749ef..24977da896 100644
--- a/web/app/components-v2/createdialog/DialogField.ts
+++ b/web/app/components-v2/createdialog/DialogField.ts
@@ -9,7 +9,7 @@ export type DialogField<T> = {
 
 export const useDialogField = <T>(
   isVisible: boolean,
-  defaultValue?: () => T
+  defaultValue?: () => T | undefined
 ): DialogField<T> => {
   const [value, set] = useState<T | undefined>(defaultValue)
   const [visible, setVisible] = useState<boolean>(false)
diff --git a/web/app/ib/IBPaatasonSuoritusTiedot.tsx b/web/app/ib/IBPaatasonSuoritusTiedot.tsx
index 63002beb77..c6a5ba54b2 100644
--- a/web/app/ib/IBPaatasonSuoritusTiedot.tsx
+++ b/web/app/ib/IBPaatasonSuoritusTiedot.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import {
   ActivePäätasonSuoritus,
   hasPäätasonsuoritusOf
@@ -7,31 +7,42 @@ import {
   KeyValueRow,
   KeyValueTable
 } from '../components-v2/containers/KeyValueTable'
+import {
+  LocalizedTextEdit,
+  LocalizedTextView
+} from '../components-v2/controls/LocalizedTestField'
+import { Select, useKoodistoOptions } from '../components-v2/controls/Select'
+import { FormField } from '../components-v2/forms/FormField'
 import { FormModel } from '../components-v2/forms/FormModel'
-import { t } from '../i18n/i18n'
-import { IBOpiskeluoikeus } from '../types/fi/oph/koski/schema/IBOpiskeluoikeus'
 import {
   KoodistoEdit,
   KoodistoView
 } from '../components-v2/opiskeluoikeus/KoodistoField'
-import { FormField } from '../components-v2/forms/FormField'
+import { KoodistoSelect } from '../components-v2/opiskeluoikeus/KoodistoSelect'
 import {
   OrganisaatioEdit,
   OrganisaatioView
 } from '../components-v2/opiskeluoikeus/OrganisaatioField'
-import { TextEdit, TextView } from '../components-v2/controls/TextField'
-import {
-  LocalizedTextEdit,
-  LocalizedTextView
-} from '../components-v2/controls/LocalizedTestField'
+import { t } from '../i18n/i18n'
+import { IBOpiskeluoikeus } from '../types/fi/oph/koski/schema/IBOpiskeluoikeus'
 import {
   IBTutkinnonSuoritus,
   isIBTutkinnonSuoritus
 } from '../types/fi/oph/koski/schema/IBTutkinnonSuoritus'
 import { Koodistokoodiviite } from '../types/fi/oph/koski/schema/Koodistokoodiviite'
+import { parasArviointi, viimeisinArviointi } from '../util/arvioinnit'
+import { koodiviiteId } from '../util/koodisto'
+import { isKoodiarvoOf } from '../util/types'
+import { DialogSelect } from '../uusiopiskeluoikeus/components/DialogSelect'
 import { createIBCASSuoritus } from './oppiaineet/ibTutkintoOppiaine'
-import { isKoodiarvoOf, isKoodistoOf } from '../util/types'
-import { KoodistoSelect } from '../components-v2/opiskeluoikeus/KoodistoSelect'
+import { useExtendedEssayState } from './state/extendedEssay'
+import {
+  useAineryhmäOptions,
+  useKielivalikoimaOptions,
+  useOppiaineTasoOptions
+} from './state/options'
+import { Checkbox } from '../components-v2/controls/Checkbox'
+import { useTheoryOfKnowledgeState } from './state/theoryOfKnowledge'
 
 export type IBTutkintTiedotProps = {
   form: FormModel<IBOpiskeluoikeus>
@@ -101,6 +112,7 @@ const IBTutkinnonTiedotRows: React.FC<IBTutkinnonTiedotRowsProps> = ({
 
   return (
     <>
+      <ExtendedEssayFieldRows form={form} päätasonSuoritus={päätasonSuoritus} />
       <KeyValueRow localizableLabel="Creativity action service">
         <CreativityActionServiceField
           form={form}
@@ -120,6 +132,153 @@ const IBTutkinnonTiedotRows: React.FC<IBTutkinnonTiedotRowsProps> = ({
   )
 }
 
+const TheoryOfKnowledgeRows: React.FC<IBTutkinnonTiedotRowsProps> = ({
+  form,
+  päätasonSuoritus
+}) => {
+  const state = useTheoryOfKnowledgeState(form, päätasonSuoritus)
+  const osasuoritukset = päätasonSuoritus.suoritus.osasuoritukset || []
+
+  return form.editMode ? (
+    <>
+      <KeyValueRow localizableLabel="Theory of knowledge">
+        <KeyValueTable>
+          {osasuoritukset.map((os, index) => (
+            <KeyValueRow localizableLabel="Osasuoritus" innerKeyValueTable>
+              TODO
+            </KeyValueRow>
+          ))}
+          {state.pakollinen.visible && (
+            <KeyValueRow innerKeyValueTable>
+              <Checkbox
+                label={t('Pakollinen')}
+                checked={!!state.pakollinen.value}
+                onChange={state.pakollinen.set}
+                testId="pakollinen"
+              />
+            </KeyValueRow>
+          )}
+        </KeyValueTable>
+        {state.arvosana.visible && (
+          <KeyValueRow localizableLabel="Arvosana" innerKeyValueTable>
+            <KoodistoSelect
+              koodistoUri="arviointiasteikkocorerequirementsib"
+              value={state.arvosana.value?.koodiarvo}
+              onSelect={state.arvosana.set}
+              testId="arvosana"
+            />
+          </KeyValueRow>
+        )}
+      </KeyValueRow>
+    </>
+  ) : (
+    <KeyValueRow localizableLabel="Theory of knowledge">
+      {
+        parasArviointi(päätasonSuoritus.suoritus.extendedEssay?.arviointi)
+          ?.arvosana.koodiarvo
+      }
+    </KeyValueRow>
+  )
+}
+
+const ExtendedEssayFieldRows: React.FC<IBTutkinnonTiedotRowsProps> = ({
+  form,
+  päätasonSuoritus
+}) => {
+  const state = useExtendedEssayState(form, päätasonSuoritus)
+  const tunnisteet = useKoodistoOptions('oppiaineetib')
+  const kielet = useKielivalikoimaOptions(true)
+  const ryhmät = useAineryhmäOptions(true)
+  const tasot = useOppiaineTasoOptions(true)
+
+  return form.editMode ? (
+    <>
+      <KeyValueRow localizableLabel="Extended essay">
+        <KeyValueTable>
+          {state.tunniste.visible && tunnisteet && (
+            <KeyValueRow localizableLabel="Tunniste" innerKeyValueTable>
+              <Select
+                inlineOptions
+                options={tunnisteet}
+                value={
+                  state.tunniste.value && koodiviiteId(state.tunniste.value)
+                }
+                onChange={(opt) => state.tunniste.set(opt?.value)}
+                testId="tunniste"
+              />
+            </KeyValueRow>
+          )}
+          {state.kieli.visible && kielet && (
+            <KeyValueRow localizableLabel="Kieli" innerKeyValueTable>
+              <DialogSelect
+                options={kielet}
+                value={state.kieli.value && koodiviiteId(state.kieli.value)}
+                onChange={(o) => state.kieli.set(o?.value)}
+                testId="kieli"
+              />
+            </KeyValueRow>
+          )}
+          {state.taso.visible && tasot && (
+            <KeyValueRow localizableLabel="Taso" innerKeyValueTable>
+              <DialogSelect
+                options={tasot}
+                value={state.taso.value && koodiviiteId(state.taso.value)}
+                onChange={(o) => state.taso.set(o?.value)}
+                testId="taso"
+              />
+            </KeyValueRow>
+          )}
+          {state.ryhmä.visible && ryhmät && (
+            <KeyValueRow localizableLabel="Aineryhmä" innerKeyValueTable>
+              <DialogSelect
+                options={ryhmät}
+                value={state.ryhmä.value && koodiviiteId(state.ryhmä.value)}
+                onChange={(o) => state.ryhmä.set(o?.value)}
+                testId="ryhmä"
+              />
+            </KeyValueRow>
+          )}
+          {state.pakollinen.visible && (
+            <KeyValueRow innerKeyValueTable>
+              <Checkbox
+                label={t('Pakollinen')}
+                checked={!!state.pakollinen.value}
+                onChange={state.pakollinen.set}
+                testId="pakollinen"
+              />
+            </KeyValueRow>
+          )}
+        </KeyValueTable>
+        {state.aihe.visible && (
+          <KeyValueRow localizableLabel="Aihe" innerKeyValueTable>
+            <LocalizedTextEdit
+              value={state.aihe.value}
+              onChange={state.aihe.set}
+            />
+          </KeyValueRow>
+        )}
+        {state.arvosana.visible && (
+          <KeyValueRow localizableLabel="Arvosana" innerKeyValueTable>
+            <KoodistoSelect
+              koodistoUri="arviointiasteikkocorerequirementsib"
+              value={state.arvosana.value?.koodiarvo}
+              onSelect={state.arvosana.set}
+              testId="arvosana"
+            />
+          </KeyValueRow>
+        )}
+      </KeyValueRow>
+    </>
+  ) : (
+    <KeyValueRow localizableLabel="Extended essay">
+      {
+        parasArviointi(päätasonSuoritus.suoritus.extendedEssay?.arviointi)
+          ?.arvosana.koodiarvo
+      }
+    </KeyValueRow>
+  )
+}
+
 const CreativityActionServiceField: React.FC<IBTutkinnonTiedotRowsProps> = ({
   form,
   päätasonSuoritus
diff --git a/web/app/ib/dialogs/UusiIBTutkintoOppiaineDialog.tsx b/web/app/ib/dialogs/UusiIBTutkintoOppiaineDialog.tsx
index 60b70fcfad..7e168ad015 100644
--- a/web/app/ib/dialogs/UusiIBTutkintoOppiaineDialog.tsx
+++ b/web/app/ib/dialogs/UusiIBTutkintoOppiaineDialog.tsx
@@ -5,6 +5,7 @@ import {
   ModalFooter,
   ModalTitle
 } from '../../components-v2/containers/Modal'
+import { Checkbox } from '../../components-v2/controls/Checkbox'
 import { FlatButton } from '../../components-v2/controls/FlatButton'
 import { RaisedButton } from '../../components-v2/controls/RaisedButton'
 import {
@@ -12,10 +13,6 @@ import {
   SelectOption,
   useKoodistoOptions
 } from '../../components-v2/controls/Select'
-import {
-  paikallinenKoulutus,
-  PaikallinenKoulutusFields
-} from '../../components-v2/opiskeluoikeus/PaikallinenKoulutusFields'
 import { t } from '../../i18n/i18n'
 import { IBOpiskeluoikeus } from '../../types/fi/oph/koski/schema/IBOpiskeluoikeus'
 import { IBOppiaineenSuoritus } from '../../types/fi/oph/koski/schema/IBOppiaineenSuoritus'
@@ -23,14 +20,12 @@ import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokood
 import { koodiviiteId } from '../../util/koodisto'
 import { PäätasonSuoritusOf } from '../../util/opiskeluoikeus'
 import { DialogSelect } from '../../uusiopiskeluoikeus/components/DialogSelect'
-import { useUusiIBTutkintoOppiaineState } from '../state/ibTutkintoOppiaine'
+import { useIBTutkintoOppiaineState } from '../state/ibTutkintoOppiaine'
 import {
   useAineryhmäOptions,
   useKielivalikoimaOptions,
-  useOppiaineTasoOptions,
-  UusiPaikallinenOppiaineKey
+  useOppiaineTasoOptions
 } from '../state/options'
-import { Checkbox } from '../../components-v2/controls/Checkbox'
 
 export type UusiIBTutkintoOppiaineDialogProps = {
   organisaatioOid: string
@@ -42,7 +37,7 @@ export type UusiIBTutkintoOppiaineDialogProps = {
 export const UusiIBTutkintoOppiaineDialog: React.FC<
   UusiIBTutkintoOppiaineDialogProps
 > = (props) => {
-  const state = useUusiIBTutkintoOppiaineState()
+  const state = useIBTutkintoOppiaineState()
   const tunnisteet = useKoodistoOptions('oppiaineetib')
   const kielet = useKielivalikoimaOptions(true)
   const ryhmät = useAineryhmäOptions(true)
diff --git a/web/app/ib/oppiaineet/ibTutkintoOppiaine.ts b/web/app/ib/oppiaineet/ibTutkintoOppiaine.ts
index bd04c758d8..60808dd055 100644
--- a/web/app/ib/oppiaineet/ibTutkintoOppiaine.ts
+++ b/web/app/ib/oppiaineet/ibTutkintoOppiaine.ts
@@ -1,11 +1,17 @@
 import { IBAineRyhmäOppiaine } from '../../types/fi/oph/koski/schema/IBAineRyhmaOppiaine'
 import { IBCASOppiaineenArviointi } from '../../types/fi/oph/koski/schema/IBCASOppiaineenArviointi'
 import { IBCASSuoritus } from '../../types/fi/oph/koski/schema/IBCASSuoritus'
+import { IBCoreRequirementsArviointi } from '../../types/fi/oph/koski/schema/IBCoreRequirementsArviointi'
+import { IBExtendedEssaySuoritus } from '../../types/fi/oph/koski/schema/IBExtendedEssaySuoritus'
 import { IBOppiaineCAS } from '../../types/fi/oph/koski/schema/IBOppiaineCAS'
 import { IBOppiaineenSuoritus } from '../../types/fi/oph/koski/schema/IBOppiaineenSuoritus'
+import { IBOppiaineExtendedEssay } from '../../types/fi/oph/koski/schema/IBOppiaineExtendedEssay'
 import { IBOppiaineLanguage } from '../../types/fi/oph/koski/schema/IBOppiaineLanguage'
 import { IBOppiaineMuu } from '../../types/fi/oph/koski/schema/IBOppiaineMuu'
+import { IBOppiaineTheoryOfKnowledge } from '../../types/fi/oph/koski/schema/IBOppiaineTheoryOfKnowledge'
+import { IBTheoryOfKnowledgeSuoritus } from '../../types/fi/oph/koski/schema/IBTheoryOfKnowledgeSuoritus'
 import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
+import { LocalizedString } from '../../types/fi/oph/koski/schema/LocalizedString'
 import {
   isIBOppiaineLanguageTunniste,
   isIBOppiaineMuuTunniste
@@ -72,3 +78,64 @@ export const createIBCASSuoritus = (
     }),
     arviointi: [IBCASOppiaineenArviointi({ arvosana })]
   })
+
+export type IBExtendedEssaySuoritusProps = {
+  tunniste?: Koodistokoodiviite<'oppiaineetib'>
+  kieli?: Koodistokoodiviite<'kielivalikoima'>
+  ryhmä?: Koodistokoodiviite<'aineryhmaib'>
+  taso?: Koodistokoodiviite<'oppiaineentasoib'>
+  aihe?: LocalizedString
+  pakollinen?: boolean
+  arvosana?: Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+}
+
+export const createIBExtendedEssaySuoritus = (
+  props: IBExtendedEssaySuoritusProps
+): IBExtendedEssaySuoritus | null => {
+  const koulutusmoduuli = createIBOppiaineExtendedEssay(props)
+  const arviointi = createIBCoreRequirementsArviointi(props)
+  return (
+    koulutusmoduuli &&
+    arviointi &&
+    IBExtendedEssaySuoritus({ koulutusmoduuli, arviointi: [arviointi] })
+  )
+}
+
+const createIBOppiaineExtendedEssay = (
+  props: IBExtendedEssaySuoritusProps
+): IBOppiaineExtendedEssay | null => {
+  const aine = createIBAineRyhmäOppiaine(props)
+  return aine && props.aihe
+    ? IBOppiaineExtendedEssay({
+        aine,
+        aihe: props.aihe,
+        pakollinen: !!props.pakollinen
+      })
+    : null
+}
+
+const createIBCoreRequirementsArviointi = ({
+  arvosana
+}: IBExtendedEssaySuoritusProps): IBCoreRequirementsArviointi | null =>
+  arvosana ? IBCoreRequirementsArviointi({ arvosana }) : null
+
+export type IBCoreRequirementsArviointiProps = {
+  pakollinen?: boolean
+  arvosana?: Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+}
+
+export const createIBTheoryOfKnowledgeSuoritus = (
+  props: IBCoreRequirementsArviointiProps
+): IBTheoryOfKnowledgeSuoritus | null => {
+  const koulutusmoduuli = createIBOppiaineTheoryOfKnowledge(props)
+  const arviointi = createIBCoreRequirementsArviointi(props)
+  return koulutusmoduuli && arviointi
+    ? IBTheoryOfKnowledgeSuoritus({ koulutusmoduuli, arviointi: [arviointi] })
+    : null
+}
+
+const createIBOppiaineTheoryOfKnowledge = ({
+  pakollinen
+}: IBCoreRequirementsArviointiProps): IBOppiaineTheoryOfKnowledge => {
+  return IBOppiaineTheoryOfKnowledge({ pakollinen: !!pakollinen })
+}
diff --git a/web/app/ib/state/extendedEssay.ts b/web/app/ib/state/extendedEssay.ts
new file mode 100644
index 0000000000..eb6601779e
--- /dev/null
+++ b/web/app/ib/state/extendedEssay.ts
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { ActivePäätasonSuoritus } from '../../components-v2/containers/EditorContainer'
+import {
+  DialogField,
+  useDialogField
+} from '../../components-v2/createdialog/DialogField'
+import { FormModel } from '../../components-v2/forms/FormModel'
+import { IBExtendedEssaySuoritus } from '../../types/fi/oph/koski/schema/IBExtendedEssaySuoritus'
+import { IBOpiskeluoikeus } from '../../types/fi/oph/koski/schema/IBOpiskeluoikeus'
+import { IBTutkinnonSuoritus } from '../../types/fi/oph/koski/schema/IBTutkinnonSuoritus'
+import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
+import { LocalizedString } from '../../types/fi/oph/koski/schema/LocalizedString'
+import { createIBExtendedEssaySuoritus } from '../oppiaineet/ibTutkintoOppiaine'
+import { useIBTutkintoOppiaineState } from './ibTutkintoOppiaine'
+import { parasArviointi } from '../../util/arvioinnit'
+
+export type ExtendedEssayState = {
+  arvosana: DialogField<
+    Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+  >
+  tunniste: DialogField<Koodistokoodiviite<'oppiaineetib'>>
+  kieli: DialogField<Koodistokoodiviite<'kielivalikoima'>>
+  ryhmä: DialogField<Koodistokoodiviite<'aineryhmaib'>>
+  taso: DialogField<Koodistokoodiviite<'oppiaineentasoib'>>
+  pakollinen: DialogField<boolean>
+  aihe: DialogField<LocalizedString>
+}
+
+export const useExtendedEssayState = (
+  form: FormModel<IBOpiskeluoikeus>,
+  päätasonSuoritus: ActivePäätasonSuoritus<
+    IBOpiskeluoikeus,
+    IBTutkinnonSuoritus
+  >
+): ExtendedEssayState => {
+  const initial = päätasonSuoritus.suoritus.extendedEssay
+
+  const arvosana = useDialogField<
+    Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+  >(true, () => parasArviointi(initial?.arviointi)?.arvosana)
+  const arvosanaSelected = !!arvosana.value
+
+  const aine = useIBTutkintoOppiaineState(initial?.koulutusmoduuli.aine)
+  const tunniste: DialogField<Koodistokoodiviite<'oppiaineetib'>> = useMemo(
+    () => ({
+      value: aine.tunniste.value || initial?.koulutusmoduuli.tunniste,
+      set: aine.tunniste.set,
+      visible: aine.tunniste.visible && arvosanaSelected,
+      setVisible: aine.tunniste.setVisible
+    }),
+    [
+      aine.tunniste.set,
+      aine.tunniste.setVisible,
+      aine.tunniste.value,
+      aine.tunniste.visible,
+      arvosanaSelected,
+      initial?.koulutusmoduuli.tunniste
+    ]
+  )
+  const aihe = useDialogField<LocalizedString>(
+    arvosanaSelected,
+    () => initial?.koulutusmoduuli.aihe
+  )
+
+  const setSuoritus = useCallback(
+    (suoritus?: IBExtendedEssaySuoritus) => {
+      form.updateAt(päätasonSuoritus.path.prop('extendedEssay'), () => suoritus)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  useEffect(() => {
+    const suoritus =
+      createIBExtendedEssaySuoritus({
+        tunniste: aine.tunniste.value,
+        kieli: aine.kieli.value,
+        ryhmä: aine.ryhmä.value,
+        taso: aine.taso.value,
+        aihe: aihe.value,
+        pakollinen: aine.pakollinen.value,
+        arvosana: arvosana.value
+      }) || undefined
+
+    setSuoritus(suoritus)
+  }, [
+    aihe.value,
+    aine.kieli.value,
+    aine.pakollinen.value,
+    aine.ryhmä.value,
+    aine.taso.value,
+    aine.tunniste.value,
+    arvosana.value,
+    setSuoritus
+  ])
+
+  return useMemo(
+    () => ({
+      arvosana,
+      tunniste,
+      kieli: aine.kieli,
+      ryhmä: aine.ryhmä,
+      taso: aine.taso,
+      pakollinen: aine.pakollinen,
+      aihe
+    }),
+    [
+      aihe,
+      aine.kieli,
+      aine.pakollinen,
+      aine.ryhmä,
+      aine.taso,
+      arvosana,
+      tunniste
+    ]
+  )
+}
diff --git a/web/app/ib/state/ibTutkintoKurssi.ts b/web/app/ib/state/ibTutkintoKurssi.ts
index cb71e39036..188818aab5 100644
--- a/web/app/ib/state/ibTutkintoKurssi.ts
+++ b/web/app/ib/state/ibTutkintoKurssi.ts
@@ -7,10 +7,7 @@ import { IBKurssinSuoritus } from '../../types/fi/oph/koski/schema/IBKurssinSuor
 import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
 import { LaajuusKursseissa } from '../../types/fi/oph/koski/schema/LaajuusKursseissa'
 import { LocalizedString } from '../../types/fi/oph/koski/schema/LocalizedString'
-import {
-  isPaikallinenKoodi,
-  PaikallinenKoodi
-} from '../../types/fi/oph/koski/schema/PaikallinenKoodi'
+import { PaikallinenKoodi } from '../../types/fi/oph/koski/schema/PaikallinenKoodi'
 import { createIBKurssinSuoritus } from '../oppiaineet/ibTutkintoKurssi'
 import { uusiPaikallinenKey } from './options'
 
diff --git a/web/app/ib/state/ibTutkintoOppiaine.ts b/web/app/ib/state/ibTutkintoOppiaine.ts
index 1810b43bdc..391d394441 100644
--- a/web/app/ib/state/ibTutkintoOppiaine.ts
+++ b/web/app/ib/state/ibTutkintoOppiaine.ts
@@ -7,6 +7,10 @@ import { IBOppiaineenSuoritus } from '../../types/fi/oph/koski/schema/IBOppiaine
 import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
 import { createIBOppiaineenSuoritus } from '../oppiaineet/ibTutkintoOppiaine'
 import { isIBOppiaineLanguageTunniste } from '../oppiaineet/tunnisteet'
+import { init } from 'ramda'
+import { isIBOppiaineLanguage } from '../../types/fi/oph/koski/schema/IBOppiaineLanguage'
+import { IBExtendedEssaySuoritus } from '../../types/fi/oph/koski/schema/IBExtendedEssaySuoritus'
+import { IBAineRyhmäOppiaine } from '../../types/fi/oph/koski/schema/IBAineRyhmaOppiaine'
 
 export type UusiIBTutkintoOppiaineState = {
   tunniste: DialogField<Koodistokoodiviite<'oppiaineetib'>>
@@ -17,41 +21,53 @@ export type UusiIBTutkintoOppiaineState = {
   result: IBOppiaineenSuoritus | null
 }
 
-export const useUusiIBTutkintoOppiaineState =
-  (): UusiIBTutkintoOppiaineState => {
-    const tunniste = useDialogField<Koodistokoodiviite<'oppiaineetib'>>(true)
-    const tunnisteSelected = !!tunniste.value
-
-    const kieli = useDialogField<Koodistokoodiviite<'kielivalikoima'>>(
-      isIBOppiaineLanguageTunniste(tunniste.value)
-    )
-
-    const ryhmä =
-      useDialogField<Koodistokoodiviite<'aineryhmaib'>>(tunnisteSelected)
-
-    const taso =
-      useDialogField<Koodistokoodiviite<'oppiaineentasoib'>>(tunnisteSelected)
-
-    const pakollinen = useDialogField<boolean>(tunnisteSelected)
-
-    const result = useMemo(
-      () =>
-        createIBOppiaineenSuoritus({
-          tunniste: tunniste.value,
-          kieli: kieli.value,
-          ryhmä: ryhmä.value,
-          taso: taso.value,
-          pakollinen: pakollinen.value
-        }),
-      [kieli.value, pakollinen.value, ryhmä.value, taso.value, tunniste.value]
-    )
-
-    return {
-      tunniste,
-      kieli,
-      ryhmä,
-      taso,
-      pakollinen,
-      result
-    }
+export const useIBTutkintoOppiaineState = (
+  initial?: IBAineRyhmäOppiaine
+): UusiIBTutkintoOppiaineState => {
+  const tunniste = useDialogField<Koodistokoodiviite<'oppiaineetib'>>(
+    true,
+    () => initial?.tunniste
+  )
+  const tunnisteSelected = !!tunniste.value
+
+  const kieli = useDialogField<Koodistokoodiviite<'kielivalikoima'>>(
+    isIBOppiaineLanguageTunniste(tunniste.value),
+    () => (isIBOppiaineLanguage(initial) ? initial.kieli : undefined)
+  )
+
+  const ryhmä = useDialogField<Koodistokoodiviite<'aineryhmaib'>>(
+    tunnisteSelected,
+    () => initial?.ryhmä
+  )
+
+  const taso = useDialogField<Koodistokoodiviite<'oppiaineentasoib'>>(
+    tunnisteSelected,
+    () => initial?.taso
+  )
+
+  const pakollinen = useDialogField<boolean>(
+    tunnisteSelected,
+    () => initial?.pakollinen
+  )
+
+  const result = useMemo(
+    () =>
+      createIBOppiaineenSuoritus({
+        tunniste: tunniste.value,
+        kieli: kieli.value,
+        ryhmä: ryhmä.value,
+        taso: taso.value,
+        pakollinen: pakollinen.value
+      }),
+    [kieli.value, pakollinen.value, ryhmä.value, taso.value, tunniste.value]
+  )
+
+  return {
+    tunniste,
+    kieli,
+    ryhmä,
+    taso,
+    pakollinen,
+    result
   }
+}
diff --git a/web/app/ib/state/theoryOfKnowledge.ts b/web/app/ib/state/theoryOfKnowledge.ts
new file mode 100644
index 0000000000..dc3b6c6d1a
--- /dev/null
+++ b/web/app/ib/state/theoryOfKnowledge.ts
@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { ActivePäätasonSuoritus } from '../../components-v2/containers/EditorContainer'
+import {
+  DialogField,
+  useDialogField
+} from '../../components-v2/createdialog/DialogField'
+import { FormModel } from '../../components-v2/forms/FormModel'
+import { IBOpiskeluoikeus } from '../../types/fi/oph/koski/schema/IBOpiskeluoikeus'
+import { IBTheoryOfKnowledgeSuoritus } from '../../types/fi/oph/koski/schema/IBTheoryOfKnowledgeSuoritus'
+import { IBTutkinnonSuoritus } from '../../types/fi/oph/koski/schema/IBTutkinnonSuoritus'
+import { Koodistokoodiviite } from '../../types/fi/oph/koski/schema/Koodistokoodiviite'
+import { createIBTheoryOfKnowledgeSuoritus } from '../oppiaineet/ibTutkintoOppiaine'
+import { parasArviointi } from '../../util/arviointi'
+
+export type TheoryOfKnowledgeState = {
+  arvosana: DialogField<
+    Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+  >
+  pakollinen: DialogField<boolean>
+}
+
+export const useTheoryOfKnowledgeState = (
+  form: FormModel<IBOpiskeluoikeus>,
+  päätasonSuoritus: ActivePäätasonSuoritus<
+    IBOpiskeluoikeus,
+    IBTutkinnonSuoritus
+  >
+): TheoryOfKnowledgeState => {
+  const initial = päätasonSuoritus.suoritus.theoryOfKnowledge
+
+  const arvosana = useDialogField<
+    Koodistokoodiviite<'arviointiasteikkocorerequirementsib'>
+  >(true, () => parasArviointi(initial?.arviointi))
+  const arvosanaSelected = !!arvosana.value
+
+  const pakollinen = useDialogField<boolean>(
+    arvosanaSelected,
+    () => initial?.koulutusmoduuli.pakollinen
+  )
+
+  const setSuoritus = useCallback(
+    (suoritus?: IBTheoryOfKnowledgeSuoritus) => {
+      form.updateAt(
+        päätasonSuoritus.path.prop('theoryOfKnowledge'),
+        () => suoritus
+      )
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  useEffect(() => {
+    const suoritus =
+      createIBTheoryOfKnowledgeSuoritus({
+        pakollinen: pakollinen.value,
+        arvosana: arvosana.value
+      }) || undefined
+
+    setSuoritus(suoritus)
+  }, [arvosana.value, pakollinen.value, setSuoritus])
+
+  return useMemo(
+    () => ({
+      arvosana,
+      pakollinen
+    }),
+    [arvosana, pakollinen]
+  )
+}
diff --git a/web/app/util/arvioinnit.ts b/web/app/util/arvioinnit.ts
index ffc27dabd6..f22d1f3a3e 100644
--- a/web/app/util/arvioinnit.ts
+++ b/web/app/util/arvioinnit.ts
@@ -67,9 +67,9 @@ const ConsolidatedArviointiOrd = Ord.fromCompare<ConsolidatedArviointi>(
 export const ArviointiOrd = contramapArviointi(ConsolidatedArviointiOrd)
 
 export const parasArviointi = <T extends Arviointi>(
-  arvioinnit: T[]
+  arvioinnit?: T[]
 ): T | undefined =>
-  pipe(arvioinnit, A.sort(ArviointiOrd), A.last, O.toUndefined)
+  pipe(arvioinnit || [], A.sort(ArviointiOrd), A.last, O.toUndefined)
 
 export const parasArviointiIndex = <T extends Arviointi>(
   arvioinnit: T[]
@@ -81,5 +81,5 @@ export const parasArviointiIndex = <T extends Arviointi>(
   )
 
 export const viimeisinArviointi = <T extends Arviointi>(
-  arvioinnit: T[]
-): T | undefined => pipe(arvioinnit, A.last, O.toUndefined)
+  arvioinnit?: T[]
+): T | undefined => pipe(arvioinnit || [], A.last, O.toUndefined)