diff --git a/app/openapi/generated/index.ts b/app/openapi/generated/index.ts
index 0bea2a0..9a370a6 100644
--- a/app/openapi/generated/index.ts
+++ b/app/openapi/generated/index.ts
@@ -1,4 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export { getSearch, type Options } from './sdk.gen';
-export type { ClientOptions, GetSearchData, GetSearchResponse, GetSearchResponses, SearchEntryDto, SearchResponseDto } from './types.gen';
+export { getDetail, getListKodik, getSearchKodik, type Options } from './sdk.gen';
+export type { CharacterDto, ClientOptions, ContentDetailEntry, ContentSearchEntry, GetDetailData, GetDetailResponse, GetDetailResponses, GetListKodikData, GetListKodikResponse, GetListKodikResponses, GetSearchKodikData, GetSearchKodikResponse, GetSearchKodikResponses, RelatedDto, SearchEntries, TranslationDto, Uuid } from './types.gen';
diff --git a/app/openapi/generated/sdk.gen.ts b/app/openapi/generated/sdk.gen.ts
index a7734ba..754287b 100644
--- a/app/openapi/generated/sdk.gen.ts
+++ b/app/openapi/generated/sdk.gen.ts
@@ -2,7 +2,7 @@
 
 import type { Client, Composable, Options as Options2, TDataShape } from './client';
 import { client } from './client.gen';
-import type { GetSearchData, GetSearchResponse } from './types.gen';
+import type { GetDetailData, GetDetailResponse, GetListKodikData, GetListKodikResponse, GetSearchKodikData, GetSearchKodikResponse } from './types.gen';
 
 export type Options<TComposable extends Composable = '$fetch', TData extends TDataShape = TDataShape, ResT = unknown, DefaultT = undefined> = Options2<TComposable, TData, ResT, DefaultT> & {
     /**
@@ -19,6 +19,16 @@ export type Options<TComposable extends Composable = '$fetch', TData extends TDa
 };
 
 /**
- * Search
+ * Detail
  */
-export const getSearch = <TComposable extends Composable = '$fetch', DefaultT extends GetSearchResponse = GetSearchResponse>(options: Options<TComposable, GetSearchData, GetSearchResponse, DefaultT>) => (options.client ?? client).get<TComposable, GetSearchResponse | DefaultT, unknown, DefaultT>({ url: '/search', ...options });
+export const getDetail = <TComposable extends Composable = '$fetch', DefaultT extends GetDetailResponse = GetDetailResponse>(options: Options<TComposable, GetDetailData, GetDetailResponse, DefaultT>) => (options.client ?? client).get<TComposable, GetDetailResponse | DefaultT, unknown, DefaultT>({ url: '/detail', ...options });
+
+/**
+ * List
+ */
+export const getListKodik = <TComposable extends Composable = '$fetch', DefaultT extends GetListKodikResponse = GetListKodikResponse>(options: Options<TComposable, GetListKodikData, GetListKodikResponse, DefaultT>) => (options.client ?? client).get<TComposable, GetListKodikResponse | DefaultT, unknown, DefaultT>({ url: '/list/kodik', ...options });
+
+/**
+ * Search Kodik
+ */
+export const getSearchKodik = <TComposable extends Composable = '$fetch', DefaultT extends GetSearchKodikResponse = GetSearchKodikResponse>(options: Options<TComposable, GetSearchKodikData, GetSearchKodikResponse, DefaultT>) => (options.client ?? client).get<TComposable, GetSearchKodikResponse | DefaultT, unknown, DefaultT>({ url: '/search/kodik', ...options });
diff --git a/app/openapi/generated/types.gen.ts b/app/openapi/generated/types.gen.ts
index 4cc12b9..7a226df 100644
--- a/app/openapi/generated/types.gen.ts
+++ b/app/openapi/generated/types.gen.ts
@@ -4,7 +4,34 @@ export type ClientOptions = {
     baseURL: 'http://localhost:8080' | (string & {});
 };
 
-export type SearchEntryDto = {
+export type CharacterDto = {
+    id?: string;
+    type?: string;
+    name?: string;
+    posterUrl?: string;
+};
+
+export type ContentDetailEntry = {
+    title?: string;
+    posterUrl?: string;
+    description?: string;
+    kind?: string;
+    episodes?: number;
+    duration?: number;
+    status?: string;
+    releasedOn?: string;
+    translations?: Array<TranslationDto>;
+    genres?: Array<string>;
+    origin?: string;
+    rating?: string;
+    producers?: Array<string>;
+    related?: Array<RelatedDto>;
+    characters?: Array<CharacterDto>;
+    studios?: Array<string>;
+    directors?: Array<string>;
+};
+
+export type ContentSearchEntry = {
     id?: string;
     posterURLs?: Array<string>;
     title?: string;
@@ -17,24 +44,73 @@ export type SearchEntryDto = {
     durationMin?: number;
 };
 
-export type SearchResponseDto = {
-    result?: Array<SearchEntryDto>;
+export type RelatedDto = {
+    id?: string;
+    type?: string;
+    name?: string;
+    posterUrl?: string;
 };
 
-export type GetSearchData = {
+export type SearchEntries = {
+    result?: Array<ContentSearchEntry>;
+};
+
+export type TranslationDto = {
+    id?: number;
+    title?: string;
+    type?: string;
+};
+
+export type Uuid = string;
+
+export type GetDetailData = {
+    body?: never;
+    path?: never;
+    query?: {
+        id?: Uuid;
+    };
+    url: '/detail';
+};
+
+export type GetDetailResponses = {
+    /**
+     * OK
+     */
+    200: ContentDetailEntry;
+};
+
+export type GetDetailResponse = GetDetailResponses[keyof GetDetailResponses];
+
+export type GetListKodikData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/list/kodik';
+};
+
+export type GetListKodikResponses = {
+    /**
+     * OK
+     */
+    200: SearchEntries;
+};
+
+export type GetListKodikResponse = GetListKodikResponses[keyof GetListKodikResponses];
+
+export type GetSearchKodikData = {
     body?: never;
     path?: never;
     query?: {
         title?: string;
     };
-    url: '/search';
+    url: '/search/kodik';
 };
 
-export type GetSearchResponses = {
+export type GetSearchKodikResponses = {
     /**
      * OK
      */
-    200: SearchResponseDto;
+    200: SearchEntries;
 };
 
-export type GetSearchResponse = GetSearchResponses[keyof GetSearchResponses];
+export type GetSearchKodikResponse = GetSearchKodikResponses[keyof GetSearchKodikResponses];
diff --git a/app/pages/anime/[id].vue b/app/pages/anime/[id].vue
index 2d474bf..20dbde1 100644
--- a/app/pages/anime/[id].vue
+++ b/app/pages/anime/[id].vue
@@ -5,222 +5,146 @@ import Tabs from '~/components/ui/tabs/Tabs.vue';
 import TabsContent from '~/components/ui/tabs/TabsContent.vue';
 import TabsList from '~/components/ui/tabs/TabsList.vue';
 import TabsTrigger from '~/components/ui/tabs/TabsTrigger.vue';
+import { getDetail } from '~/openapi/generated';
 
-const data = {
-    title: " .hack//G.U. Trilogy",
-    poster: "example/hackguposter.jpg",
-    description: `Based on the CyberConnect2 HIT GAME, now will be released in a CG Movie!
-
-The Movie will be placed in the storyline of each .hack//G.U. games trilogy. The story follows Haseo, a player in the online MMORPG called The World:R2 at first depicted as a PKK (Player Killer Killer) known as the "Terror of Death", a former member of the disbanded Twilight Brigade guild. Haseo encounters Azure Kite (believing him to be Tri-Edge and blaming him for what happened to Shino) but is hopelessly outmatched. Azure Kite easily defeats Haseo and Data Drains him, reducing his level from 133 to 1 and leaving him without any items, weapons, or member addresses. He is left with a mystery on his hands as to the nature of the Data Drain and why Azure Kite is in possession of such a skill.
-
-Eventually Haseo gains the "Avatar" of Skeith. Acquiring the ability to call Skeith and wield his abilities, such as Data Drain. With Skeith as his strength, Haseo begins the quest for a way to save Shino.
-
-He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims supposedly are unable to return to The World after he PKs them. Haseo's friend, Shino, was attacked six months prior to the events of the game by Tri-Edge, and the player herself, Shino Nanao, was left in a coma.
-
-(Source: AniDB)
-`,
-    format: "Movie",
-    episodes: 1,
-    duration: "1 hour, 33 mins",
-    status: "Finished",
-    release: "Mar 25, 2008",
-    season: "Spring 2008",
-    translations: ["Anilibria", "Soviet Romantica", "AniDUB", "AniStar"],
-    genres: ["Action", "Fantasy", "Sci-Fi"],
-    average: 67,
-    mean: 67,
-    popularity: 5481,
-    favorites: 36,
-    producers: ["Bandai Visual", "CyberConnect2", "Hanabee Entartainment", "Funimation"],
-    source: "Video Game",
-    romaji: ".hack//G.U. Trilogy",
-    native: ".hack//G.U. Trilogy",
-    relations: [
-        {
-            url: "/example/relation1.png",
-            type: "Prequel",
-            name: ".hack//Roots"
-        },
-        {
-            url: "/example/relation2.jpg",
-            type: "Sequel",
-            name: ".hack//G.U. Returner"
-        },
-        {
-            url: "/example/relation3.jpg",
-            type: "Alternative",
-            name: ".hack//G.U."
-        },
-        {
-            url: "/example/relation4.jpg",
-            type: "Alternative",
-            name: ".hack//G.U.+"
-        },
-        {
-            url: "/example/relation5.jpg",
-            type: "Side Story",
-            name: ".hack//G.U. Returner Trilogy"
-        },
-        {
-            url: "/example/relation6.jpg",
-            type: "Summary",
-            name: "Daitai 3-pun de Wakaru .hack History "
-        },
-    ]
-}
+const { data, status, error } = await getDetail({
+    composable: 'useFetch',
+    query: {
+        id: 'ba9c5699-a720-412a-958e-3d5555d97b8f'
+    }
+})
 </script>
 <template>
-    <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-5/6">
-        <div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:min-w-72 xl:min-w-96 ">
-            <div class="max-w-xs lg:max-w-sm xl:max-w-md">
-                <NuxtImg :src="data.poster" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"
-                    sizes="sm:100vw md:50vw lg:448px xl:512px" />
+    <div v-if="data">
+        <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-5/6">
+            <div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:min-w-72 xl:min-w-96 ">
+                <div class="max-w-xs lg:max-w-sm xl:max-w-md">
+                    <NuxtImg :src="data.posterUrl" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"
+                        sizes="sm:100vw md:50vw lg:448px xl:512px" />
+                </div>
+
+                <div class="grid grid-cols-1 lg:grid-cols-1 gap-2 w-full">
+                    <Button class="w-full">
+                        Watch Now
+                    </Button>
+                </div>
             </div>
 
-            <div class="grid grid-cols-1 lg:grid-cols-1 gap-2 w-full">
-                <Button class="w-full">
-                    Watch Now
-                </Button>
-            </div>
-        </div>
-
-        <div class="flex-1">
-            <div class="space-y-4 xl:h-full">
-                <h3 class="text-xl md:text-2xl xl:text-3xl font-bold tracking-tight">
-                    {{ data.title }}
-                </h3>
-                <div class="xl:h-full overflow-scroll">
-                    <p
-                        class="text-base lg:text-lg text-muted-foreground leading-relaxed md:leading-loose whitespace-pre-line transition-colors hover:text-foreground">
-                        {{ data.description }}
-                    </p>
+            <div class="flex-1">
+                <div class="space-y-4 xl:h-full">
+                    <h3 class="text-xl md:text-2xl xl:text-3xl font-bold tracking-tight">
+                        {{ data.title }}
+                    </h3>
+                    <div class="xl:h-full overflow-scroll">
+                        <p
+                            class="text-base lg:text-lg text-muted-foreground leading-relaxed md:leading-loose whitespace-pre-line transition-colors hover:text-foreground">
+                            {{ data.description }}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 p-4 sm:p-6 md:p-8 lg:p-12">
-        <div class="bg-muted text-muted-foreground text-xl space-y-4 min-w-96 p-8">
-            <div>
-                <p class="font-bold">Format</p>
-                {{ data.format }}
+        <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 p-4 sm:p-6 md:p-8 lg:p-12">
+            <div class="bg-muted text-muted-foreground text-xl space-y-4 min-w-96 p-8">
+                <div>
+                    <p class="font-bold">Format</p>
+                    {{ data.kind }}
+                </div>
+                <div>
+                    <p class="font-bold">Episodes</p>
+                    {{ data.episodes }}
+                </div>
+                <div>
+                    <p class="font-bold">Duration</p>
+                    {{ data.duration }}
+                </div>
+                <div>
+                    <p class="font-bold">Status</p>
+                    <Badge>{{ data.status }}</Badge>
+                </div>
+                <div>
+                    <p class="font-bold">Release</p>
+                    {{ data.releasedOn }}
+                </div>
+                <div>
+                    <p class="font-bold">Translations</p>
+                    <Badge v-for="translation in data.translations" class="mx-2">{{ translation.title }}
+                    </Badge>
+                </div>
+                <div>
+                    <p class="font-bold">Genres</p>
+                    <Badge variant="secondary" v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
+                </div>
+                <div>
+                    <p class="font-bold">Rating</p>
+                    {{ data.rating }}
+                </div>
+                <div>
+                    <p class="font-bold">Producers</p>
+                    <p v-for="producer in data.producers">{{ producer }}</p>
+                </div>
+                <div>
+                    <p class="font-bold">Source</p>
+                    {{ data.origin }}
+                </div>
             </div>
-            <div>
-                <p class="font-bold">Episodes</p>
-                {{ data.episodes }}
-            </div>
-            <div>
-                <p class="font-bold">Duration</p>
-                {{ data.duration }}
-            </div>
-            <div>
-                <p class="font-bold">Status</p>
-                <Badge>{{ data.status }}</Badge>
-            </div>
-            <div>
-                <p class="font-bold">Release</p>
-                {{ data.release }}
-            </div>
-            <div>
-                <p class="font-bold">Season</p>
-                {{ data.season }}
-            </div>
-            <div>
-                <p class="font-bold">Translations</p>
-                <Badge v-for="translation in data.translations" class="mx-2">{{ translation }}
-                </Badge>
-            </div>
-            <div>
-                <p class="font-bold">Genres</p>
-                <Badge variant="secondary" v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
-            </div>
-            <div>
-                <p class="font-bold">Average Score</p>
-                {{ data.average }}%
-            </div>
-            <div>
-                <p class="font-bold">Mean Score</p>
-                {{ data.mean }}%
-            </div>
-            <div>
-                <p class="font-bold">Popularity</p>
-                {{ data.popularity }}
-            </div>
-            <div>
-                <p class="font-bold">Favorites</p>
-                {{ data.favorites }}
-            </div>
-            <div>
-                <p class="font-bold">Producers</p>
-                <p v-for="producer in data.producers">{{ producer }}</p>
-            </div>
-            <div>
-                <p class="font-bold">Source</p>
-                {{ data.source }}
-            </div>
-            <div>
-                <p class="font-bold">Romaji</p>
-                {{ data.romaji }}
-            </div>
-            <div>
-                <p class="font-bold">Native</p>
-                {{ data.native }}
-            </div>
-        </div>
-        <Tabs default-value="overview" class="w-full h-fit">
-            <TabsList class="w-full flex-1 mb-4">
-                <TabsTrigger value="overview">
-                    Overview
-                </TabsTrigger>
-                <TabsTrigger value="characters">
-                    Characters
-                </TabsTrigger>
-                <TabsTrigger value="staff">
-                    Staff
-                </TabsTrigger>
-            </TabsList>
-            <TabsContent value="overview">
-                <span class="text-xl font-semibold">Relations</span>
-                <div class="flex flex-wrap gap-4 w-full">
-                    <HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
-                        :title="relation.type" size="xsm" variant="default">
-                        <TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
-                            :includeArrow="false">
-                            <div class="space-y-2">
-                                <h4 class="font-semibold text-xl">
-                                    {{ relation.name }}
-                                </h4>
+            <Tabs default-value="overview" class="w-full h-fit">
+                <TabsList class="w-full flex-1 mb-4">
+                    <TabsTrigger value="overview">
+                        Overview
+                    </TabsTrigger>
+                    <TabsTrigger value="characters">
+                        Characters
+                    </TabsTrigger>
+                    <TabsTrigger value="staff">
+                        Staff
+                    </TabsTrigger>
+                </TabsList>
+                <TabsContent value="overview">
+                    <span class="text-xl font-semibold">Relations</span>
+                    <div class="flex flex-wrap gap-4 w-full">
+                        <HoverableImage v-for="relation in data.related" :src="relation.posterUrl!" :alt="relation.name"
+                            :title="relation.type" size="xsm" variant="default">
+                            <TooltipContent side="right" align="center" :side-offset="8" class="z-50"
+                                tooltipColor="muted" :includeArrow="false">
+                                <div class="space-y-2">
+                                    <h4 class="font-semibold text-xl">
+                                        {{ relation.name }}
+                                    </h4>
 
-                                <div class="text-lg text-muted-foreground">
-                                    <p>{{ relation.type }}</p>
+                                    <div class="text-lg text-muted-foreground">
+                                        <p>{{ relation.type }}</p>
+                                    </div>
                                 </div>
-                            </div>
-                        </TooltipContent>
-                    </HoverableImage>
-                </div>
-                <span class="text-xl font-semibold">Characters</span>
-                <div class="flex flex-wrap gap-4 w-full">
-                    <HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
-                        :title="relation.type" size="xsm" variant="default">
-                        <TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
-                            :includeArrow="false">
-                            <div class="space-y-2">
-                                <h4 class="font-semibold text-xl">
-                                    {{ relation.name }}
-                                </h4>
+                            </TooltipContent>
+                        </HoverableImage>
+                    </div>
+                    <span class="text-xl font-semibold">Characters</span>
+                    <div class="flex flex-wrap gap-4 w-full">
+                        <HoverableImage v-for="character in data.characters" :width="200" :height="300"
+                            :src="character.posterUrl!" :alt="character.type" :title="character.name" size="xsm"
+                            variant="default">
+                            <TooltipContent side="right" align="center" :side-offset="8" class="z-50"
+                                tooltipColor="muted" :includeArrow="false">
+                                <div class="space-y-2">
+                                    <h4 class="font-semibold text-xl">
+                                        {{ character.name }}
+                                    </h4>
 
-                                <div class="text-lg text-muted-foreground">
-                                    <p>{{ relation.type }}</p>
+                                    <div class="text-lg text-muted-foreground">
+                                        <p>{{ character.type }}</p>
+                                    </div>
                                 </div>
-                            </div>
-                        </TooltipContent>
-                    </HoverableImage>
-                </div>
-            </TabsContent>
-            <TabsContent value="characters">
+                            </TooltipContent>
+                        </HoverableImage>
+                    </div>
+                </TabsContent>
+                <TabsContent value="characters">
 
-            </TabsContent>
-            <TabsContent value="staff">
-            </TabsContent>
-        </Tabs>
+                </TabsContent>
+                <TabsContent value="staff">
+                </TabsContent>
+            </Tabs>
+        </div>
     </div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6b6dc04..5500e1a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import HeroSection from '@/components/ui/internal/HeroSection.vue';
+import { refDebounced } from '@vueuse/core';
 import { Search, SlidersHorizontal } from 'lucide-vue-next';
 import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
 import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
-import { refDebounced } from '@vueuse/core'
-import { getSearch } from '~/openapi/generated';
+import { getListKodik } from '~/openapi/generated';
 
 const tooltipCollisionBoundary = ref<Element | undefined>(undefined);
 
 const searchTitle = ref('')
 const debouncedSearchTitle = refDebounced(searchTitle, 1000);
 
-const { data: trendingAnimeData, status, error } = await getSearch({
+const { data: trendingAnimeData, status, error } = await getListKodik({
     composable: 'useFetch',
-    query: {
-        title: debouncedSearchTitle
-    }
 })
 </script>
 
@@ -48,6 +45,9 @@ const { data: trendingAnimeData, status, error } = await getSearch({
                     <template v-if="status === 'pending'">
                         <SkeletonMediaImageCard v-for="index in 10" :key="index" />
                     </template>
+                    <template v-else-if="error">
+                        {{ error }}
+                    </template>
                     <template v-else-if="status === 'success'">
                         <MediaImageCard v-for="anime in trendingAnimeData?.result || []" :key="anime.title"
                             :id="anime.id!" :image_url="anime?.posterURLs?.[0] || 'TODO'" :title="anime.title || 'TODO'"
diff --git a/app/pages/watch/[id].vue b/app/pages/watch/[id].vue
new file mode 100644
index 0000000..1ea6f57
--- /dev/null
+++ b/app/pages/watch/[id].vue
@@ -0,0 +1,4 @@
+<script>
+</script>
+<template>
+</template>