diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx
index 91ced460..6b5928d9 100644
--- a/front/packages/ui/src/player/components/hover.tsx
+++ b/front/packages/ui/src/player/components/hover.tsx
@@ -33,7 +33,7 @@ import {
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
-import { Chapter, Font, Track, WatchItem } from "@kyoo/models";
+import { Chapter, Subtitle, WatchItem } from "@kyoo/models";
 import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { Platform, Pressable, View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
@@ -69,8 +69,8 @@ export const Hover = ({
 	poster?: string | null;
 	chapters?: Chapter[];
 	qualities?: WatchItem["link"]
-	subtitles?: Track[];
-	fonts?: Font[];
+	subtitles?: Subtitle[];
+	fonts?: string[];
 	previousSlug?: string | null;
 	nextSlug?: string | null;
 	onMenuOpen: () => void;
diff --git a/front/packages/ui/src/player/keyboard.tsx b/front/packages/ui/src/player/keyboard.tsx
index 464c2018..28937daa 100644
--- a/front/packages/ui/src/player/keyboard.tsx
+++ b/front/packages/ui/src/player/keyboard.tsx
@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Font, Track } from "@kyoo/models";
+import { Subtitle } from "@kyoo/models";
 import { atom, useSetAtom } from "jotai";
 import { useRouter } from "solito/router";
 import { useEffect } from "react";
@@ -41,7 +41,7 @@ type Action =
 	| { type: "seekTo"; value: number }
 	| { type: "seekPercent"; value: number }
 	| { type: "volume"; value: number }
-	| { type: "subtitle"; subtitles: Track[]; fonts: Font[] };
+	| { type: "subtitle"; subtitles: Subtitle[]; fonts: string[] };
 
 export const reducerAtom = atom(null, (get, set, action: Action) => {
 	const duration = get(durationAtom);
@@ -70,7 +70,7 @@ export const reducerAtom = atom(null, (get, set, action: Action) => {
 			break;
 		case "subtitle":
 			const subtitle = get(subtitleAtom);
-			const index = subtitle ? action.subtitles.findIndex((x) => x.id === subtitle.id) : -1;
+			const index = subtitle ? action.subtitles.findIndex((x) => x.index === subtitle.index) : -1;
 			set(
 				subtitleAtom,
 				index === -1 ? null : action.subtitles[(index + 1) % action.subtitles.length],
@@ -80,8 +80,8 @@ export const reducerAtom = atom(null, (get, set, action: Action) => {
 });
 
 export const useVideoKeyboard = (
-	subtitles?: Track[],
-	fonts?: Font[],
+	subtitles?: Subtitle[],
+	fonts?: string[],
 	previousEpisode?: string,
 	nextEpisode?: string,
 ) => {
diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx
index 21584032..d47a76bf 100644
--- a/front/packages/ui/src/player/state.tsx
+++ b/front/packages/ui/src/player/state.tsx
@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Track, WatchItem, Font } from "@kyoo/models";
+import { Subtitle, WatchItem } from "@kyoo/models";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react";
 import NativeVideo, { VideoProperties as VideoProps } from "./video";
@@ -72,7 +72,7 @@ export const fullscreenAtom = atom(
 );
 const privateFullscreen = atom(false);
 
-export const subtitleAtom = atom<Track | null>(null);
+export const subtitleAtom = atom<Subtitle | null>(null);
 
 export const Video = memo(function _Video({
 	links,
@@ -82,9 +82,9 @@ export const Video = memo(function _Video({
 	...props
 }: {
 	links?: WatchItem["link"];
-	subtitles?: WatchItem["subtitles"];
+	subtitles?: Subtitle[];
 	setError: (error: string | undefined) => void;
-	fonts?: Font[];
+	fonts?: string[];
 } & Partial<VideoProps>) {
 	const ref = useRef<ElementRef<typeof NativeVideo> | null>(null);
 	const [isPlaying, setPlay] = useAtom(playAtom);
diff --git a/front/packages/ui/src/player/video.tsx b/front/packages/ui/src/player/video.tsx
index 0213734f..0c9a8cb5 100644
--- a/front/packages/ui/src/player/video.tsx
+++ b/front/packages/ui/src/player/video.tsx
@@ -20,19 +20,19 @@
 
 declare module "react-native-video" {
 	interface VideoProperties {
-		fonts?: Font[];
+		fonts?: string[];
+		subtitles?: Subtitle[]
 		onPlayPause: (isPlaying: boolean) => void;
 		onMediaUnsupported?: () => void;
 	}
 	export type VideoProps = Omit<VideoProperties, "source"> & {
 		source: { uri: string; hls: string };
-		subtitles?: WatchItem["subtitles"];
 	};
 }
 
 export * from "react-native-video";
 
-import { Font, getToken, WatchItem } from "@kyoo/models";
+import { Subtitle, getToken } from "@kyoo/models";
 import { IconButton, Menu } from "@kyoo/primitives";
 import { ComponentProps, forwardRef, useEffect, useRef } from "react";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";