diff --git a/.changeset/pretty-planets-attend.md b/.changeset/pretty-planets-attend.md
new file mode 100644
index 000000000..621495e4c
--- /dev/null
+++ b/.changeset/pretty-planets-attend.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/react": minor
+---
+
+Improve typings for serializable KPI token and oracle states
diff --git a/.changeset/young-lobsters-shout.md b/.changeset/young-lobsters-shout.md
new file mode 100644
index 000000000..c17b33031
--- /dev/null
+++ b/.changeset/young-lobsters-shout.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": minor
+---
+
+Integrate new React library KPI token and oracle state typings
diff --git a/packages/frontend/src/pages/create-with-template-id/index.tsx b/packages/frontend/src/pages/create-with-template-id/index.tsx
index 938966682..8447bf5c5 100644
--- a/packages/frontend/src/pages/create-with-template-id/index.tsx
+++ b/packages/frontend/src/pages/create-with-template-id/index.tsx
@@ -3,6 +3,7 @@ import {
     KPITokenCreationForm,
     useIPFSGatewayURL,
     usePreferDecentralization,
+    type SerializableObject,
 } from "@carrot-kpi/react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -16,9 +17,8 @@ import { useInvalidateLatestKPITokens } from "../../hooks/useInvalidateLatestKPI
 import { Layout } from "../../components/layout";
 import { Permissioned } from "../../components/permissioned";
 import { useIsCreatorAllowed } from "../../hooks/useIsCreatorAllowed";
-import type { Serializable } from "@carrot-kpi/react";
 
-export const CreateWithTemplateId = () => {
+export function CreateWithTemplateId<S extends SerializableObject<S>>() {
     const { i18n, t } = useTranslation();
     const { state } = useLocation();
     const navigate = useNavigate();
@@ -39,10 +39,10 @@ export const CreateWithTemplateId = () => {
     const [formKey, setFormKey] = useState(0);
     const [draftState, setDraftState] = useState<{
         templateId?: number;
-        state: Serializable;
+        state: S;
     }>({
         templateId: undefined,
-        state: {},
+        state: {} as S,
     });
 
     const { allowed: creatorAllowed, loading: loadingPermission } =
@@ -133,7 +133,7 @@ export const CreateWithTemplateId = () => {
         templateId,
     ]);
 
-    const handleChange = useCallback((state: Serializable) => {
+    const handleChange = useCallback((state: S) => {
         setDraftState((prevState) => ({
             templateId: prevState.templateId,
             state,
@@ -209,4 +209,4 @@ export const CreateWithTemplateId = () => {
             </div>
         </Layout>
     );
-};
+}
diff --git a/packages/react/src/components/kpi-token-creation-form.tsx b/packages/react/src/components/kpi-token-creation-form.tsx
index 95eee9b8f..b2036aa5e 100644
--- a/packages/react/src/components/kpi-token-creation-form.tsx
+++ b/packages/react/src/components/kpi-token-creation-form.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { ReactElement } from "react";
 import type {
     KPITokenCreationFormProps,
-    Serializable,
+    SerializableObject,
 } from "../types/templates";
 import { TemplateComponent } from "./template-component";
 
-export function KPITokenCreationForm<S extends Serializable = Serializable>({
+export function KPITokenCreationForm<S extends SerializableObject<S>>({
     template,
     fallback,
     error,
diff --git a/packages/react/src/components/oracle-creation-form.tsx b/packages/react/src/components/oracle-creation-form.tsx
index 879a70a22..6162b240f 100644
--- a/packages/react/src/components/oracle-creation-form.tsx
+++ b/packages/react/src/components/oracle-creation-form.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 import type { ReactElement } from "react";
-import type { OracleCreationFormProps, Serializable } from "../types/templates";
+import type {
+    OracleCreationFormProps,
+    SerializableObject,
+} from "../types/templates";
 import { TemplateComponent } from "./template-component";
 
-export function OracleCreationForm<S extends Serializable = Serializable>({
+export function OracleCreationForm<S extends SerializableObject<S>>({
     template,
     fallback,
     error,
diff --git a/packages/react/src/hooks/useTemplateModule.ts b/packages/react/src/hooks/useTemplateModule.ts
index 0cdcc043f..b8a90a320 100644
--- a/packages/react/src/hooks/useTemplateModule.ts
+++ b/packages/react/src/hooks/useTemplateModule.ts
@@ -14,6 +14,7 @@ import { useStagingMode } from "./useStagingMode";
 import { useNetwork } from "wagmi";
 import type {
     RemoteComponentProps,
+    SerializableObject,
     TemplateEntity,
     TemplateType,
 } from "../types/templates";
@@ -21,10 +22,15 @@ import type {
 type ComponentType<
     E extends TemplateEntity,
     T extends TemplateType,
-> = FunctionComponent<RemoteComponentProps<E, T>>;
+    S extends SerializableObject<S>,
+> = FunctionComponent<RemoteComponentProps<E, T, S>>;
 
-interface CachedModule<E extends TemplateEntity, T extends TemplateType> {
-    Component: ComponentType<E, T>;
+interface CachedModule<
+    E extends TemplateEntity,
+    T extends TemplateType,
+    S extends SerializableObject<S>,
+> {
+    Component: ComponentType<E, T, S>;
     bundle: TemplateBundle;
 }
 
@@ -38,15 +44,16 @@ interface TemplateModuleParams<E, T> {
 export const useTemplateModule = <
     E extends TemplateEntity,
     T extends TemplateType,
+    S extends SerializableObject<S>,
 >(
     params: TemplateModuleParams<E, T>,
 ): {
     loading: boolean;
-    Component: ComponentType<E, T> | null;
+    Component: ComponentType<E, T, S> | null;
     bundle: TemplateBundle | null;
 } => {
     const { entity, type, entry, template } = params;
-    const MODULE_CACHE = useRef<Record<string, CachedModule<E, T>>>({});
+    const MODULE_CACHE = useRef<Record<string, CachedModule<E, T, S>>>({});
 
     const customBaseURL = useSelector<
         State,
@@ -75,7 +82,7 @@ export const useTemplateModule = <
 
     const [loadingExport, setLoadingExport] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [Component, setComponent] = useState<ComponentType<E, T> | null>(
+    const [Component, setComponent] = useState<ComponentType<E, T, S> | null>(
         entry && MODULE_CACHE.current[entry]
             ? () => MODULE_CACHE.current[entry].Component
             : null,
diff --git a/packages/react/src/types/templates.ts b/packages/react/src/types/templates.ts
index 2af87ef67..fe26a20e5 100644
--- a/packages/react/src/types/templates.ts
+++ b/packages/react/src/types/templates.ts
@@ -11,13 +11,22 @@ import { ResolvedTemplate } from "@carrot-kpi/sdk";
 import type { ReactElement, ReactNode } from "react";
 import type { Hex } from "viem";
 
-export type Serializable =
-    | null
+export type Serializable<T> = T extends
     | string
     | number
     | boolean
-    | { [key: string | symbol | number]: Serializable }
-    | Serializable[];
+    | null
+    | undefined
+    ? T
+    : T extends object
+    ? { [K in keyof T]: Serializable<T[K]> }
+    : T extends Array<infer U>
+    ? Array<Serializable<U>>
+    : never;
+
+export type SerializableObject<T extends object> = {
+    [K in keyof T]: Serializable<T[K]>;
+};
 
 export type TemplateEntity = "kpiToken" | "oracle";
 
@@ -54,49 +63,47 @@ export interface OracleInitializationBundle {
 export type OracleInitializationBundleGetter =
     () => Promise<OracleInitializationBundle>;
 
-export type OracleChangeCallback<S extends Serializable = Serializable> = (
+export type OracleChangeCallback<S extends SerializableObject<S>> = (
     internalState: S,
     initializationBundleGetter?: OracleInitializationBundleGetter,
 ) => void;
 
-export interface AdditionalRemoteOracleCreationFormProps<
-    S extends Serializable = Serializable,
-> {
+export type AdditionalRemoteOracleCreationFormProps<
+    S extends SerializableObject<S>,
+> = {
     state: S;
     kpiToken?: Partial<KPIToken>;
     onChange: OracleChangeCallback<S>;
     navigate: NavigateFunction;
     onTx: <T extends TxType>(tx: Tx<T>) => void;
-}
+};
 
-export type OracleRemoteCreationFormProps<
-    S extends Serializable = Serializable,
-> = BaseRemoteTemplateComponentProps &
-    AdditionalRemoteOracleCreationFormProps<S>;
+export type OracleRemoteCreationFormProps<S extends SerializableObject<S>> =
+    BaseRemoteTemplateComponentProps &
+        AdditionalRemoteOracleCreationFormProps<S>;
 
-export type KPITokenChangeCallback<S extends Serializable = Serializable> = (
+export type KPITokenChangeCallback<S extends SerializableObject<S>> = (
     state: S,
 ) => void;
 
-export type OracleCreationFormProps<S extends Serializable = Serializable> =
+export type OracleCreationFormProps<S extends SerializableObject<S>> =
     TemplateComponentProps & AdditionalRemoteOracleCreationFormProps<S>;
 
-export interface AdditionalRemoteKPITokenCreationFormProps<
-    S extends Serializable = Serializable,
-> {
+export type AdditionalRemoteKPITokenCreationFormProps<
+    S extends SerializableObject<S>,
+> = {
     state: S;
     onChange: KPITokenChangeCallback<S>;
     onCreate: () => void;
     navigate: NavigateFunction;
     onTx: <T extends TxType>(tx: Tx<T>) => void;
-}
+};
 
-export type KPITokenRemoteCreationFormProps<
-    S extends Serializable = Serializable,
-> = BaseRemoteTemplateComponentProps &
-    AdditionalRemoteKPITokenCreationFormProps<S>;
+export type KPITokenRemoteCreationFormProps<S extends SerializableObject<S>> =
+    BaseRemoteTemplateComponentProps &
+        AdditionalRemoteKPITokenCreationFormProps<S>;
 
-export type KPITokenCreationFormProps<S extends Serializable = Serializable> =
+export type KPITokenCreationFormProps<S extends SerializableObject<S>> =
     TemplateComponentProps & AdditionalRemoteKPITokenCreationFormProps<S>;
 
 export interface AdditionalRemoteOraclePageProps {
@@ -125,7 +132,7 @@ export type KPITokenPageProps = TemplateComponentProps &
 export type RemoteComponentProps<
     E extends TemplateEntity,
     T extends TemplateType,
-    S extends Serializable = Serializable,
+    S extends SerializableObject<S>,
 > = E extends "kpiToken"
     ? T extends "creationForm"
         ? KPITokenRemoteCreationFormProps<S>