diff --git a/Cargo.lock b/Cargo.lock
index b6a1375..0288bbc 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -250,6 +250,7 @@ dependencies = [
  "async-stream",
  "async-trait",
  "base64 0.22.1",
+ "bigdecimal",
  "bytes",
  "chrono",
  "fast_chemail",
@@ -273,6 +274,7 @@ dependencies = [
  "static_assertions_next",
  "tempfile",
  "thiserror 1.0.69",
+ "time",
 ]
 
 [[package]]
diff --git a/apps/proxy/.whistle/rules/files/0.konobangu b/apps/proxy/.whistle/rules/files/0.konobangu
index 12852f7..b6e688e 100644
--- a/apps/proxy/.whistle/rules/files/0.konobangu
+++ b/apps/proxy/.whistle/rules/files/0.konobangu
@@ -5,6 +5,7 @@
 }
 ```
 
-^https://konobangu.com/api*** reqHeaders://{x-forwarded.json} http://127.0.0.1:5001/api$1
+#^https://konobangu.com/api*** statusCode://500
+^https://konobangu.com/api*** reqHeaders://{x-forwarded.json} http://127.0.0.1:5001/api$1 
 ^https://konobangu.com/*** reqHeaders://{x-forwarded.json} http://127.0.0.1:5000/$1 excludeFilter://^https://konobangu.com/api***
 ^wss://konobangu.com/*** reqHeaders://{x-forwarded.json} ws://127.0.0.1:5000/$1 excludeFilter://^wss://konobangu.com/api
\ No newline at end of file
diff --git a/apps/recorder/Cargo.toml b/apps/recorder/Cargo.toml
index a78c0b4..df59072 100644
--- a/apps/recorder/Cargo.toml
+++ b/apps/recorder/Cargo.toml
@@ -72,7 +72,15 @@ jwt-authorizer = "0.15.0"
 log = "0.4"
 async-graphql = { version = "7", features = [] }
 async-graphql-axum = "7"
-seaography = { version = "1.1" }
+seaography = { version = "1.1", features = [
+    "with-json",
+    "with-chrono",
+    "with-time",
+    "with-uuid",
+    "with-decimal",
+    "with-bigdecimal",
+    "with-postgres-array",
+] }
 base64 = "0.22.1"
 tower = "0.5.2"
 tower-http = { version = "0.6", features = [
diff --git a/apps/recorder/src/auth/oidc.rs b/apps/recorder/src/auth/oidc.rs
index 37e28d7..0820967 100644
--- a/apps/recorder/src/auth/oidc.rs
+++ b/apps/recorder/src/auth/oidc.rs
@@ -366,7 +366,10 @@ impl AuthServiceTrait for OidcAuthService {
             }) => crate::models::auth::Model::create_from_oidc(ctx, sub.to_string()).await,
             r => r,
         }
-        .map_err(|_| AuthError::FindAuthRecordError)?;
+        .map_err(|e| {
+            tracing::error!("Error finding auth record: {:?}", e);
+            AuthError::FindAuthRecordError
+        })?;
 
         Ok(AuthUserInfo {
             subscriber_auth,
diff --git a/apps/recorder/src/migrations/defs.rs b/apps/recorder/src/migrations/defs.rs
index f91bd6b..00381c6 100644
--- a/apps/recorder/src/migrations/defs.rs
+++ b/apps/recorder/src/migrations/defs.rs
@@ -2,7 +2,10 @@ use std::collections::HashSet;
 
 use async_trait::async_trait;
 use sea_orm::{DeriveIden, Statement};
-use sea_orm_migration::prelude::{extension::postgres::IntoTypeRef, *};
+use sea_orm_migration::{
+    prelude::{extension::postgres::IntoTypeRef, *},
+    schema::timestamp_with_time_zone,
+};
 
 use crate::migrations::extension::postgres::Type;
 
@@ -144,6 +147,17 @@ macro_rules! create_postgres_enum_for_active_enum {
     };
 }
 
+pub fn timestamps_z(t: TableCreateStatement) -> TableCreateStatement {
+    let mut t = t;
+    t.col(timestamp_with_time_zone(GeneralIds::CreatedAt).default(Expr::current_timestamp()))
+        .col(timestamp_with_time_zone(GeneralIds::UpdatedAt).default(Expr::current_timestamp()))
+        .take()
+}
+
+pub fn table_auto_z<T: IntoIden + 'static>(name: T) -> TableCreateStatement {
+    timestamps_z(Table::create().table(name).if_not_exists().take())
+}
+
 #[async_trait]
 pub trait CustomSchemaManagerExt {
     async fn create_postgres_auto_update_ts_fn(&self, col_name: &str) -> Result<(), DbErr>;
diff --git a/apps/recorder/src/migrations/m20220101_000001_init.rs b/apps/recorder/src/migrations/m20220101_000001_init.rs
index 67ab2e5..3062833 100644
--- a/apps/recorder/src/migrations/m20220101_000001_init.rs
+++ b/apps/recorder/src/migrations/m20220101_000001_init.rs
@@ -3,7 +3,7 @@ use sea_orm_migration::{prelude::*, schema::*};
 
 use super::defs::{
     Bangumi, CustomSchemaManagerExt, Episodes, GeneralIds, Subscribers, SubscriptionBangumi,
-    SubscriptionEpisode, Subscriptions,
+    SubscriptionEpisode, Subscriptions, table_auto_z,
 };
 use crate::models::{
     subscribers::SEED_SUBSCRIBER,
@@ -22,7 +22,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Subscribers::Table)
+                table_auto_z(Subscribers::Table)
                     .col(pk_auto(Subscribers::Id))
                     .col(string(Subscribers::DisplayName))
                     .col(json_binary_null(Subscribers::BangumiConf))
@@ -57,7 +57,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Subscriptions::Table)
+                table_auto_z(Subscriptions::Table)
                     .col(pk_auto(Subscriptions::Id))
                     .col(string(Subscriptions::DisplayName))
                     .col(integer(Subscriptions::SubscriberId))
@@ -89,7 +89,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Bangumi::Table)
+                table_auto_z(Bangumi::Table)
                     .col(pk_auto(Bangumi::Id))
                     .col(text_null(Bangumi::MikanBangumiId))
                     .col(integer(Bangumi::SubscriberId))
@@ -156,7 +156,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(SubscriptionBangumi::Table)
+                table_auto_z(SubscriptionBangumi::Table)
                     .col(pk_auto(SubscriptionBangumi::Id))
                     .col(integer(SubscriptionBangumi::SubscriberId))
                     .col(integer(SubscriptionBangumi::SubscriptionId))
@@ -206,7 +206,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Episodes::Table)
+                table_auto_z(Episodes::Table)
                     .col(pk_auto(Episodes::Id))
                     .col(text_null(Episodes::MikanEpisodeId))
                     .col(text(Episodes::RawName))
@@ -275,7 +275,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(SubscriptionEpisode::Table)
+                table_auto_z(SubscriptionEpisode::Table)
                     .col(pk_auto(SubscriptionEpisode::Id))
                     .col(integer(SubscriptionEpisode::SubscriptionId))
                     .col(integer(SubscriptionEpisode::EpisodeId))
diff --git a/apps/recorder/src/migrations/m20240224_082543_add_downloads.rs b/apps/recorder/src/migrations/m20240224_082543_add_downloads.rs
index 89e3cc9..fb3994d 100644
--- a/apps/recorder/src/migrations/m20240224_082543_add_downloads.rs
+++ b/apps/recorder/src/migrations/m20240224_082543_add_downloads.rs
@@ -23,7 +23,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Downloaders::Table)
+                table_auto_z(Downloaders::Table)
                     .col(pk_auto(Downloaders::Id))
                     .col(text(Downloaders::Endpoint))
                     .col(string_null(Downloaders::Username))
@@ -78,7 +78,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Downloads::Table)
+                table_auto_z(Downloads::Table)
                     .col(pk_auto(Downloads::Id))
                     .col(string(Downloads::RawName))
                     .col(string(Downloads::DisplayName))
diff --git a/apps/recorder/src/migrations/m20240225_060853_subscriber_add_downloader.rs b/apps/recorder/src/migrations/m20240225_060853_subscriber_add_downloader.rs
index 6866bde..fa41e4a 100644
--- a/apps/recorder/src/migrations/m20240225_060853_subscriber_add_downloader.rs
+++ b/apps/recorder/src/migrations/m20240225_060853_subscriber_add_downloader.rs
@@ -1,5 +1,6 @@
 use sea_orm_migration::{prelude::*, schema::*};
 
+use super::defs::table_auto_z;
 use crate::{
     migrations::defs::{CustomSchemaManagerExt, Downloaders, GeneralIds, Subscribers},
     models::downloaders::{DownloaderCategory, DownloaderCategoryEnum},
@@ -20,7 +21,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Downloaders::Table)
+                table_auto_z(Downloaders::Table)
                     .col(pk_auto(Downloaders::Id))
                     .col(text(Downloaders::Endpoint))
                     .col(string_null(Downloaders::Username))
diff --git a/apps/recorder/src/migrations/m20241231_000001_auth.rs b/apps/recorder/src/migrations/m20241231_000001_auth.rs
index 5319172..1d8eb2b 100644
--- a/apps/recorder/src/migrations/m20241231_000001_auth.rs
+++ b/apps/recorder/src/migrations/m20241231_000001_auth.rs
@@ -1,7 +1,7 @@
 use async_trait::async_trait;
 use sea_orm_migration::{prelude::*, schema::*};
 
-use super::defs::Auth;
+use super::defs::{Auth, table_auto_z};
 use crate::{
     migrations::defs::{CustomSchemaManagerExt, GeneralIds, Subscribers},
     models::{
@@ -26,7 +26,7 @@ impl MigrationTrait for Migration {
 
         manager
             .create_table(
-                table_auto(Auth::Table)
+                table_auto_z(Auth::Table)
                     .col(pk_auto(Auth::Id))
                     .col(text(Auth::Pid))
                     .col(enumeration(
diff --git a/apps/recorder/src/models/auth.rs b/apps/recorder/src/models/auth.rs
index 6c63b6a..04d90da 100644
--- a/apps/recorder/src/models/auth.rs
+++ b/apps/recorder/src/models/auth.rs
@@ -24,9 +24,9 @@ pub enum AuthType {
 #[sea_orm(table_name = "auth")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     #[sea_orm(unique)]
diff --git a/apps/recorder/src/models/bangumi.rs b/apps/recorder/src/models/bangumi.rs
index 4eb4a7b..7fdee2c 100644
--- a/apps/recorder/src/models/bangumi.rs
+++ b/apps/recorder/src/models/bangumi.rs
@@ -30,9 +30,9 @@ pub struct BangumiExtra {
 #[sea_orm(table_name = "bangumi")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     pub mikan_bangumi_id: Option<String>,
diff --git a/apps/recorder/src/models/downloaders.rs b/apps/recorder/src/models/downloaders.rs
index d51f971..f125dd2 100644
--- a/apps/recorder/src/models/downloaders.rs
+++ b/apps/recorder/src/models/downloaders.rs
@@ -23,9 +23,9 @@ pub enum DownloaderCategory {
 #[sea_orm(table_name = "downloaders")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     pub category: DownloaderCategory,
diff --git a/apps/recorder/src/models/downloads.rs b/apps/recorder/src/models/downloads.rs
index d3d5416..9138508 100644
--- a/apps/recorder/src/models/downloads.rs
+++ b/apps/recorder/src/models/downloads.rs
@@ -39,9 +39,9 @@ pub enum DownloadMime {
 #[sea_orm(table_name = "downloads")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     pub raw_name: String,
diff --git a/apps/recorder/src/models/episodes.rs b/apps/recorder/src/models/episodes.rs
index 97ca2ff..d9e4325 100644
--- a/apps/recorder/src/models/episodes.rs
+++ b/apps/recorder/src/models/episodes.rs
@@ -28,9 +28,9 @@ pub struct EpisodeExtra {
 #[sea_orm(table_name = "episodes")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     #[sea_orm(indexed)]
diff --git a/apps/recorder/src/models/subscribers.rs b/apps/recorder/src/models/subscribers.rs
index 90ca205..f916674 100644
--- a/apps/recorder/src/models/subscribers.rs
+++ b/apps/recorder/src/models/subscribers.rs
@@ -5,7 +5,7 @@ use serde::{Deserialize, Serialize};
 
 use crate::{
     app::AppContextTrait,
-    errors::app_error::{RecorderResult, RecorderError},
+    errors::app_error::{RecorderError, RecorderResult},
 };
 
 pub const SEED_SUBSCRIBER: &str = "konobangu";
@@ -21,9 +21,9 @@ pub struct SubscriberBangumiConfig {
 #[sea_orm(table_name = "subscribers")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     pub display_name: String,
diff --git a/apps/recorder/src/models/subscriptions.rs b/apps/recorder/src/models/subscriptions.rs
index 7c58a51..8f89275 100644
--- a/apps/recorder/src/models/subscriptions.rs
+++ b/apps/recorder/src/models/subscriptions.rs
@@ -44,9 +44,9 @@ pub enum SubscriptionCategory {
 #[sea_orm(table_name = "subscriptions")]
 pub struct Model {
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub created_at: DateTime,
+    pub created_at: DateTimeUtc,
     #[sea_orm(default_expr = "Expr::current_timestamp()")]
-    pub updated_at: DateTime,
+    pub updated_at: DateTimeUtc,
     #[sea_orm(primary_key)]
     pub id: i32,
     pub display_name: String,
diff --git a/apps/webui/components.json b/apps/webui/components.json
index 834db9e..19232a9 100644
--- a/apps/webui/components.json
+++ b/apps/webui/components.json
@@ -10,11 +10,11 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "@/views/components",
-    "utils": "@/views/utils",
-    "ui": "@/views/components/ui",
-    "lib": "@/views/lib",
-    "hooks": "@/views/hooks"
+    "components": "@/components",
+    "utils": "@/presentation/utils",
+    "ui": "@/components/ui",
+    "lib": "@/presentation/lib",
+    "hooks": "@/presentation/hooks"
   },
   "iconLibrary": "lucide"
 }
diff --git a/apps/webui/package.json b/apps/webui/package.json
index 8679bb9..7ff6a35 100644
--- a/apps/webui/package.json
+++ b/apps/webui/package.json
@@ -49,6 +49,7 @@
     "@rsbuild/plugin-react": "^1.2.0",
     "@tanstack/react-query": "^5.75.6",
     "@tanstack/react-router": "^1.112.13",
+    "@tanstack/react-table": "^8.21.3",
     "@tanstack/router-devtools": "^1.112.13",
     "arktype": "^2.1.6",
     "chart.js": "^4.4.8",
@@ -84,6 +85,7 @@
     "@graphql-codegen/client-preset": "^4.8.1",
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@parcel/watcher": "^2.5.1",
     "@rsbuild/core": "^1.2.15",
     "@tailwindcss/postcss": "^4.0.9",
     "@tanstack/react-router": "^1.112.0",
diff --git a/apps/webui/src/views/components/layout/app-icon.tsx b/apps/webui/src/components/layout/app-icon.tsx
similarity index 91%
rename from apps/webui/src/views/components/layout/app-icon.tsx
rename to apps/webui/src/components/layout/app-icon.tsx
index 1412256..9526392 100644
--- a/apps/webui/src/views/components/layout/app-icon.tsx
+++ b/apps/webui/src/components/layout/app-icon.tsx
@@ -2,9 +2,9 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/views/components/ui/sidebar';
+} from '@/components/ui/sidebar';
 
-import { Image } from '@/views/components/ui/image';
+import { Image } from '@/components/ui/image';
 
 export function AppIcon() {
   return (
diff --git a/apps/webui/src/views/components/layout/app-layout.tsx b/apps/webui/src/components/layout/app-layout.tsx
similarity index 94%
rename from apps/webui/src/views/components/layout/app-layout.tsx
rename to apps/webui/src/components/layout/app-layout.tsx
index c16bdb7..501df77 100644
--- a/apps/webui/src/views/components/layout/app-layout.tsx
+++ b/apps/webui/src/components/layout/app-layout.tsx
@@ -1,6 +1,4 @@
-import type { RouteStateDataOption } from '@/infra/routes/traits';
-import type { RouteBreadcrumbItem } from '@/infra/routes/traits';
-import { AppSidebar } from '@/views/components/layout/app-sidebar';
+import { AppSidebar } from '@/components/layout/app-sidebar';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,14 +6,16 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/views/components/ui/breadcrumb';
-import { Separator } from '@/views/components/ui/separator';
+} from '@/components/ui/breadcrumb';
+import { Separator } from '@/components/ui/separator';
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/views/components/ui/sidebar';
-import { cn } from '@/views/utils';
+} from '@/components/ui/sidebar';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import type { RouteBreadcrumbItem } from '@/infra/routes/traits';
+import { cn } from '@/presentation/utils';
 import { useMatches } from '@tanstack/react-router';
 import {
   type DetailedHTMLProps,
diff --git a/apps/webui/src/views/components/layout/app-not-found.tsx b/apps/webui/src/components/layout/app-not-found.tsx
similarity index 100%
rename from apps/webui/src/views/components/layout/app-not-found.tsx
rename to apps/webui/src/components/layout/app-not-found.tsx
diff --git a/apps/webui/src/views/components/layout/app-sidebar.tsx b/apps/webui/src/components/layout/app-sidebar.tsx
similarity index 95%
rename from apps/webui/src/views/components/layout/app-sidebar.tsx
rename to apps/webui/src/components/layout/app-sidebar.tsx
index f303f10..4d23a44 100644
--- a/apps/webui/src/views/components/layout/app-sidebar.tsx
+++ b/apps/webui/src/components/layout/app-sidebar.tsx
@@ -1,11 +1,11 @@
-import { AppNavMainData } from '@/infra/routes/nav';
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
-} from '@/views/components/ui/sidebar';
+} from '@/components/ui/sidebar';
+import { AppNavMainData } from '@/infra/routes/nav';
 import type { ComponentPropsWithoutRef } from 'react';
 import { AppIcon } from './app-icon';
 import { NavMain } from './nav-main';
diff --git a/apps/webui/src/views/components/layout/app-skeleton.tsx b/apps/webui/src/components/layout/app-skeleton.tsx
similarity index 100%
rename from apps/webui/src/views/components/layout/app-skeleton.tsx
rename to apps/webui/src/components/layout/app-skeleton.tsx
diff --git a/apps/webui/src/views/components/layout/nav-main.tsx b/apps/webui/src/components/layout/nav-main.tsx
similarity index 97%
rename from apps/webui/src/views/components/layout/nav-main.tsx
rename to apps/webui/src/components/layout/nav-main.tsx
index b6bdb53..45209b0 100644
--- a/apps/webui/src/views/components/layout/nav-main.tsx
+++ b/apps/webui/src/components/layout/nav-main.tsx
@@ -6,7 +6,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/views/components/ui/collapsible';
+} from '@/components/ui/collapsible';
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -16,7 +16,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/views/components/ui/sidebar';
+} from '@/components/ui/sidebar';
 import { useMatches } from '@tanstack/react-router';
 import { ProLink, type ProLinkProps } from '../ui/pro-link';
 
diff --git a/apps/webui/src/views/components/layout/nav-projects.tsx b/apps/webui/src/components/layout/nav-projects.tsx
similarity index 96%
rename from apps/webui/src/views/components/layout/nav-projects.tsx
rename to apps/webui/src/components/layout/nav-projects.tsx
index 2aff406..0d7d745 100644
--- a/apps/webui/src/views/components/layout/nav-projects.tsx
+++ b/apps/webui/src/components/layout/nav-projects.tsx
@@ -16,7 +16,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/views/components/ui/dropdown-menu';
+} from '@/components/ui/dropdown-menu';
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -25,7 +25,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/views/components/ui/sidebar';
+} from '@/components/ui/sidebar';
 import type { ComponentProps } from 'react';
 
 export function NavProjects({
diff --git a/apps/webui/src/views/components/layout/nav-user.tsx b/apps/webui/src/components/layout/nav-user.tsx
similarity index 94%
rename from apps/webui/src/views/components/layout/nav-user.tsx
rename to apps/webui/src/components/layout/nav-user.tsx
index 5c2c452..f138ae2 100644
--- a/apps/webui/src/views/components/layout/nav-user.tsx
+++ b/apps/webui/src/components/layout/nav-user.tsx
@@ -9,11 +9,7 @@ import {
   Sparkles,
 } from 'lucide-react';
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@/views/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,13 +18,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/views/components/ui/dropdown-menu';
+} from '@/components/ui/dropdown-menu';
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/views/components/ui/sidebar';
+} from '@/components/ui/sidebar';
 
 export function NavUser({
   user,
diff --git a/apps/webui/src/views/components/ui/accordion.tsx b/apps/webui/src/components/ui/accordion.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/accordion.tsx
rename to apps/webui/src/components/ui/accordion.tsx
index e228043..64947a0 100644
--- a/apps/webui/src/views/components/ui/accordion.tsx
+++ b/apps/webui/src/components/ui/accordion.tsx
@@ -2,7 +2,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Accordion({
   ...props
diff --git a/apps/webui/src/views/components/ui/alert-dialog.tsx b/apps/webui/src/components/ui/alert-dialog.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/alert-dialog.tsx
rename to apps/webui/src/components/ui/alert-dialog.tsx
index 03fddb0..b1ccb80 100644
--- a/apps/webui/src/views/components/ui/alert-dialog.tsx
+++ b/apps/webui/src/components/ui/alert-dialog.tsx
@@ -3,8 +3,8 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from "@/views/components/ui/button";
-import { cn } from "@/views/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/presentation/utils";
 
 function AlertDialog({
   ...props
diff --git a/apps/webui/src/views/components/ui/alert.tsx b/apps/webui/src/components/ui/alert.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/alert.tsx
rename to apps/webui/src/components/ui/alert.tsx
index 6bc97f7..6ddb6ed 100644
--- a/apps/webui/src/views/components/ui/alert.tsx
+++ b/apps/webui/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
diff --git a/apps/webui/src/views/components/ui/aspect-ratio.tsx b/apps/webui/src/components/ui/aspect-ratio.tsx
similarity index 100%
rename from apps/webui/src/views/components/ui/aspect-ratio.tsx
rename to apps/webui/src/components/ui/aspect-ratio.tsx
diff --git a/apps/webui/src/views/components/ui/avatar.tsx b/apps/webui/src/components/ui/avatar.tsx
similarity index 96%
rename from apps/webui/src/views/components/ui/avatar.tsx
rename to apps/webui/src/components/ui/avatar.tsx
index 3fab008..684c5ab 100644
--- a/apps/webui/src/views/components/ui/avatar.tsx
+++ b/apps/webui/src/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Avatar({
   className,
diff --git a/apps/webui/src/views/components/ui/badge.tsx b/apps/webui/src/components/ui/badge.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/badge.tsx
rename to apps/webui/src/components/ui/badge.tsx
index 68fc6bf..5b1b0a2 100644
--- a/apps/webui/src/views/components/ui/badge.tsx
+++ b/apps/webui/src/components/ui/badge.tsx
@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
diff --git a/apps/webui/src/views/components/ui/breadcrumb.tsx b/apps/webui/src/components/ui/breadcrumb.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/breadcrumb.tsx
rename to apps/webui/src/components/ui/breadcrumb.tsx
index 5d6339d..2a99cb2 100644
--- a/apps/webui/src/views/components/ui/breadcrumb.tsx
+++ b/apps/webui/src/components/ui/breadcrumb.tsx
@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
diff --git a/apps/webui/src/views/components/ui/button.tsx b/apps/webui/src/components/ui/button.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/button.tsx
rename to apps/webui/src/components/ui/button.tsx
index 16be8b8..741e9b5 100644
--- a/apps/webui/src/views/components/ui/button.tsx
+++ b/apps/webui/src/components/ui/button.tsx
@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
diff --git a/apps/webui/src/views/components/ui/calendar.tsx b/apps/webui/src/components/ui/calendar.tsx
similarity index 96%
rename from apps/webui/src/views/components/ui/calendar.tsx
rename to apps/webui/src/components/ui/calendar.tsx
index 10aa4cd..aab34c3 100644
--- a/apps/webui/src/views/components/ui/calendar.tsx
+++ b/apps/webui/src/components/ui/calendar.tsx
@@ -2,8 +2,8 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { buttonVariants } from "@/views/components/ui/button";
-import { cn } from "@/views/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/presentation/utils";
 
 function Calendar({
   className,
diff --git a/apps/webui/src/views/components/ui/card.tsx b/apps/webui/src/components/ui/card.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/card.tsx
rename to apps/webui/src/components/ui/card.tsx
index ba01d45..a808987 100644
--- a/apps/webui/src/views/components/ui/card.tsx
+++ b/apps/webui/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/webui/src/views/components/ui/carousel.tsx b/apps/webui/src/components/ui/carousel.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/carousel.tsx
rename to apps/webui/src/components/ui/carousel.tsx
index f6a3b52..0d44ac0 100644
--- a/apps/webui/src/views/components/ui/carousel.tsx
+++ b/apps/webui/src/components/ui/carousel.tsx
@@ -6,8 +6,8 @@ import useEmblaCarousel, {
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import * as React from "react";
 
-import { Button } from "@/views/components/ui/button";
-import { cn } from "@/views/utils";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/presentation/utils";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
diff --git a/apps/webui/src/views/components/ui/chart.tsx b/apps/webui/src/components/ui/chart.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/chart.tsx
rename to apps/webui/src/components/ui/chart.tsx
index c5763bb..fbaea84 100644
--- a/apps/webui/src/views/components/ui/chart.tsx
+++ b/apps/webui/src/components/ui/chart.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
diff --git a/apps/webui/src/views/components/ui/checkbox.tsx b/apps/webui/src/components/ui/checkbox.tsx
similarity index 96%
rename from apps/webui/src/views/components/ui/checkbox.tsx
rename to apps/webui/src/components/ui/checkbox.tsx
index 1dae9a1..eb6cb71 100644
--- a/apps/webui/src/views/components/ui/checkbox.tsx
+++ b/apps/webui/src/components/ui/checkbox.tsx
@@ -4,7 +4,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Checkbox({
   className,
diff --git a/apps/webui/src/views/components/ui/collapsible.tsx b/apps/webui/src/components/ui/collapsible.tsx
similarity index 100%
rename from apps/webui/src/views/components/ui/collapsible.tsx
rename to apps/webui/src/components/ui/collapsible.tsx
diff --git a/apps/webui/src/views/components/ui/command.tsx b/apps/webui/src/components/ui/command.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/command.tsx
rename to apps/webui/src/components/ui/command.tsx
index 52a6a0c..7f3e5fa 100644
--- a/apps/webui/src/views/components/ui/command.tsx
+++ b/apps/webui/src/components/ui/command.tsx
@@ -10,8 +10,8 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/views/components/ui/dialog";
-import { cn } from "@/views/utils";
+} from "@/components/ui/dialog";
+import { cn } from "@/presentation/utils";
 
 function Command({
   className,
diff --git a/apps/webui/src/views/components/ui/context-menu.tsx b/apps/webui/src/components/ui/context-menu.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/context-menu.tsx
rename to apps/webui/src/components/ui/context-menu.tsx
index 57a9b47..e230fb1 100644
--- a/apps/webui/src/views/components/ui/context-menu.tsx
+++ b/apps/webui/src/components/ui/context-menu.tsx
@@ -4,7 +4,7 @@ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function ContextMenu({
   ...props
diff --git a/apps/webui/src/components/ui/data-table-column-header.tsx b/apps/webui/src/components/ui/data-table-column-header.tsx
new file mode 100644
index 0000000..8e94280
--- /dev/null
+++ b/apps/webui/src/components/ui/data-table-column-header.tsx
@@ -0,0 +1,67 @@
+import { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/presentation/utils";
+import { HTMLAttributes } from "react";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/webui/src/components/ui/data-table-pagination.tsx b/apps/webui/src/components/ui/data-table-pagination.tsx
new file mode 100644
index 0000000..9659b46
--- /dev/null
+++ b/apps/webui/src/components/ui/data-table-pagination.tsx
@@ -0,0 +1,109 @@
+import { Table } from "@tanstack/react-table";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useMemo } from "react";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  showSelectedRowCount?: boolean;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  showSelectedRowCount = false,
+}: DataTablePaginationProps<TData>) {
+  const renderRowsPerPage = () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <p className="text-sm font-medium">Rows per page</p>
+        <Select
+          value={`${table.getState().pagination.pageSize}`}
+          onValueChange={(value) => {
+            table.setPageSize(Number(value));
+          }}
+        >
+          <SelectTrigger className="h-8 w-[70px]">
+            <SelectValue placeholder={table.getState().pagination.pageSize} />
+          </SelectTrigger>
+          <SelectContent side="top">
+            {[10, 20, 30, 40, 50].map((pageSize) => (
+              <SelectItem key={pageSize} value={`${pageSize}`}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  };
+  return (
+    <div className="flex items-center justify-between px-2">
+      {showSelectedRowCount ? (
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+      ) : (
+        <div className="flex-1 text-sm items-center">{renderRowsPerPage()}</div>
+      )}
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        {showSelectedRowCount && renderRowsPerPage()}
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webui/src/components/ui/data-table-row-actions.tsx b/apps/webui/src/components/ui/data-table-row-actions.tsx
new file mode 100644
index 0000000..a4c499b
--- /dev/null
+++ b/apps/webui/src/components/ui/data-table-row-actions.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import type { Row } from '@tanstack/react-table';
+import { MoreHorizontal } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+import { useMemo } from 'react';
+
+interface DataTableRowActionsProps<DataView, Id> {
+  row: Row<DataView>;
+  getId: (row: Row<DataView>) => Id;
+  showDetail?: boolean;
+  showEdit?: boolean;
+  showDelete?: boolean;
+  onDetail?: (id: Id) => void;
+  onDelete?: (id: Id) => void;
+  onEdit?: (id: Id) => void;
+}
+
+export function DataTableRowActions<DataView, Id>({
+  row,
+  getId,
+  showDetail,
+  showDelete,
+  showEdit,
+  onDetail,
+  onDelete,
+  onEdit,
+}: DataTableRowActionsProps<DataView, Id>) {
+  const id = useMemo(() => getId(row), [getId, row]);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[160px]">
+        {showDetail && (
+          <DropdownMenuItem onClick={() => onDetail?.(id)}>
+            Detail
+          </DropdownMenuItem>
+        )}
+        {showEdit && (
+          <DropdownMenuItem onClick={() => onEdit?.(id)}>Edit</DropdownMenuItem>
+        )}
+        {(showDetail || showEdit) && showDelete && <DropdownMenuSeparator />}
+        {showDelete && (
+          <DropdownMenuItem onClick={() => onDelete?.(id)}>
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/webui/src/components/ui/data-table-view-options.tsx b/apps/webui/src/components/ui/data-table-view-options.tsx
new file mode 100644
index 0000000..719fbbb
--- /dev/null
+++ b/apps/webui/src/components/ui/data-table-view-options.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+import { Settings2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <Settings2 />
+          Columns
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/webui/src/views/components/ui/dialog.tsx b/apps/webui/src/components/ui/dialog.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/dialog.tsx
rename to apps/webui/src/components/ui/dialog.tsx
index d65e9a3..a2f03ff 100644
--- a/apps/webui/src/views/components/ui/dialog.tsx
+++ b/apps/webui/src/components/ui/dialog.tsx
@@ -2,7 +2,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Dialog({
   ...props
diff --git a/apps/webui/src/views/components/ui/drawer.tsx b/apps/webui/src/components/ui/drawer.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/drawer.tsx
rename to apps/webui/src/components/ui/drawer.tsx
index b95309e..66904e1 100644
--- a/apps/webui/src/views/components/ui/drawer.tsx
+++ b/apps/webui/src/components/ui/drawer.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Drawer({
   ...props
diff --git a/apps/webui/src/views/components/ui/dropdown-menu.tsx b/apps/webui/src/components/ui/dropdown-menu.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/dropdown-menu.tsx
rename to apps/webui/src/components/ui/dropdown-menu.tsx
index 28bee18..353e521 100644
--- a/apps/webui/src/views/components/ui/dropdown-menu.tsx
+++ b/apps/webui/src/components/ui/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function DropdownMenu({
   ...props
diff --git a/apps/webui/src/views/components/ui/form.tsx b/apps/webui/src/components/ui/form.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/form.tsx
rename to apps/webui/src/components/ui/form.tsx
index d508da2..0205944 100644
--- a/apps/webui/src/views/components/ui/form.tsx
+++ b/apps/webui/src/components/ui/form.tsx
@@ -11,8 +11,8 @@ import {
   useFormState,
 } from "react-hook-form";
 
-import { Label } from "@/views/components/ui/label";
-import { cn } from "@/views/utils";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/presentation/utils";
 
 const Form = FormProvider;
 
diff --git a/apps/webui/src/views/components/ui/hover-card.tsx b/apps/webui/src/components/ui/hover-card.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/hover-card.tsx
rename to apps/webui/src/components/ui/hover-card.tsx
index 642404e..00bfda9 100644
--- a/apps/webui/src/views/components/ui/hover-card.tsx
+++ b/apps/webui/src/components/ui/hover-card.tsx
@@ -1,7 +1,7 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function HoverCard({
   ...props
diff --git a/apps/webui/src/views/components/ui/image.tsx b/apps/webui/src/components/ui/image.tsx
similarity index 100%
rename from apps/webui/src/views/components/ui/image.tsx
rename to apps/webui/src/components/ui/image.tsx
diff --git a/apps/webui/src/views/components/ui/input-otp.tsx b/apps/webui/src/components/ui/input-otp.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/input-otp.tsx
rename to apps/webui/src/components/ui/input-otp.tsx
index a3d8d3a..b77cbb9 100644
--- a/apps/webui/src/views/components/ui/input-otp.tsx
+++ b/apps/webui/src/components/ui/input-otp.tsx
@@ -4,7 +4,7 @@ import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function InputOTP({
   className,
diff --git a/apps/webui/src/views/components/ui/input.tsx b/apps/webui/src/components/ui/input.tsx
similarity index 95%
rename from apps/webui/src/views/components/ui/input.tsx
rename to apps/webui/src/components/ui/input.tsx
index 6d4222b..0bbc313 100644
--- a/apps/webui/src/views/components/ui/input.tsx
+++ b/apps/webui/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
diff --git a/apps/webui/src/views/components/ui/label.tsx b/apps/webui/src/components/ui/label.tsx
similarity index 93%
rename from apps/webui/src/views/components/ui/label.tsx
rename to apps/webui/src/components/ui/label.tsx
index 84e6962..a1ce58f 100644
--- a/apps/webui/src/views/components/ui/label.tsx
+++ b/apps/webui/src/components/ui/label.tsx
@@ -3,7 +3,7 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Label({
   className,
diff --git a/apps/webui/src/views/components/ui/menubar.tsx b/apps/webui/src/components/ui/menubar.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/menubar.tsx
rename to apps/webui/src/components/ui/menubar.tsx
index 4305fe0..85da237 100644
--- a/apps/webui/src/views/components/ui/menubar.tsx
+++ b/apps/webui/src/components/ui/menubar.tsx
@@ -2,7 +2,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Menubar({
   className,
diff --git a/apps/webui/src/views/components/ui/navigation-menu.tsx b/apps/webui/src/components/ui/navigation-menu.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/navigation-menu.tsx
rename to apps/webui/src/components/ui/navigation-menu.tsx
index c7536da..2ede0eb 100644
--- a/apps/webui/src/views/components/ui/navigation-menu.tsx
+++ b/apps/webui/src/components/ui/navigation-menu.tsx
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function NavigationMenu({
   className,
diff --git a/apps/webui/src/views/components/ui/pagination.tsx b/apps/webui/src/components/ui/pagination.tsx
similarity index 96%
rename from apps/webui/src/views/components/ui/pagination.tsx
rename to apps/webui/src/components/ui/pagination.tsx
index be0fb7b..19f2e2a 100644
--- a/apps/webui/src/views/components/ui/pagination.tsx
+++ b/apps/webui/src/components/ui/pagination.tsx
@@ -5,8 +5,8 @@ import {
 } from "lucide-react";
 import * as React from "react";
 
-import { Button, buttonVariants } from "@/views/components/ui/button";
-import { cn } from "@/views/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/presentation/utils";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
diff --git a/apps/webui/src/views/components/ui/popover.tsx b/apps/webui/src/components/ui/popover.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/popover.tsx
rename to apps/webui/src/components/ui/popover.tsx
index 6b30a60..86fcdd3 100644
--- a/apps/webui/src/views/components/ui/popover.tsx
+++ b/apps/webui/src/components/ui/popover.tsx
@@ -3,7 +3,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Popover({
   ...props
diff --git a/apps/webui/src/views/components/ui/pro-link.tsx b/apps/webui/src/components/ui/pro-link.tsx
similarity index 100%
rename from apps/webui/src/views/components/ui/pro-link.tsx
rename to apps/webui/src/components/ui/pro-link.tsx
diff --git a/apps/webui/src/views/components/ui/progress-circle.tsx b/apps/webui/src/components/ui/progress-circle.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/progress-circle.tsx
rename to apps/webui/src/components/ui/progress-circle.tsx
index aee9cd2..16abae0 100644
--- a/apps/webui/src/views/components/ui/progress-circle.tsx
+++ b/apps/webui/src/components/ui/progress-circle.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 import type { FC, HTMLAttributes } from "react";
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
diff --git a/apps/webui/src/views/components/ui/progress.tsx b/apps/webui/src/components/ui/progress.tsx
similarity index 94%
rename from apps/webui/src/views/components/ui/progress.tsx
rename to apps/webui/src/components/ui/progress.tsx
index 87926c7..b48eded 100644
--- a/apps/webui/src/views/components/ui/progress.tsx
+++ b/apps/webui/src/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Progress({
   className,
diff --git a/apps/webui/src/components/ui/query-error-view.tsx b/apps/webui/src/components/ui/query-error-view.tsx
new file mode 100644
index 0000000..1a4b0c2
--- /dev/null
+++ b/apps/webui/src/components/ui/query-error-view.tsx
@@ -0,0 +1,34 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from "lucide-react";
+
+export interface QueryErrorViewProps {
+  title?: string;
+  message: string;
+  onRetry?: () => void;
+}
+
+export function QueryErrorView({
+  title = "Error",
+  message,
+  onRetry,
+}: QueryErrorViewProps) {
+  return (
+    <div className="container mx-auto flex h-[50vh] items-center justify-center">
+      <div className="w-full max-w-md">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>{title}</AlertTitle>
+          <AlertDescription>{message}</AlertDescription>
+          {onRetry && (
+            <div className="mt-4">
+              <Button variant="outline" onClick={() => onRetry()}>
+                Retry
+              </Button>
+            </div>
+          )}
+        </Alert>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webui/src/views/components/ui/radio-group.tsx b/apps/webui/src/components/ui/radio-group.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/radio-group.tsx
rename to apps/webui/src/components/ui/radio-group.tsx
index 76cc73a..239782c 100644
--- a/apps/webui/src/views/components/ui/radio-group.tsx
+++ b/apps/webui/src/components/ui/radio-group.tsx
@@ -4,7 +4,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function RadioGroup({
   className,
diff --git a/apps/webui/src/views/components/ui/resizable.tsx b/apps/webui/src/components/ui/resizable.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/resizable.tsx
rename to apps/webui/src/components/ui/resizable.tsx
index 930a615..ebb2369 100644
--- a/apps/webui/src/views/components/ui/resizable.tsx
+++ b/apps/webui/src/components/ui/resizable.tsx
@@ -2,7 +2,7 @@ import { GripVerticalIcon } from "lucide-react";
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function ResizablePanelGroup({
   className,
diff --git a/apps/webui/src/views/components/ui/scroll-area.tsx b/apps/webui/src/components/ui/scroll-area.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/scroll-area.tsx
rename to apps/webui/src/components/ui/scroll-area.tsx
index 634aefb..21852b3 100644
--- a/apps/webui/src/views/components/ui/scroll-area.tsx
+++ b/apps/webui/src/components/ui/scroll-area.tsx
@@ -3,7 +3,7 @@
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function ScrollArea({
   className,
diff --git a/apps/webui/src/views/components/ui/select.tsx b/apps/webui/src/components/ui/select.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/select.tsx
rename to apps/webui/src/components/ui/select.tsx
index 3d8c7a1..8a81480 100644
--- a/apps/webui/src/views/components/ui/select.tsx
+++ b/apps/webui/src/components/ui/select.tsx
@@ -2,7 +2,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Select({
   ...props
diff --git a/apps/webui/src/views/components/ui/separator.tsx b/apps/webui/src/components/ui/separator.tsx
similarity index 94%
rename from apps/webui/src/views/components/ui/separator.tsx
rename to apps/webui/src/components/ui/separator.tsx
index 3684e1f..e19c696 100644
--- a/apps/webui/src/views/components/ui/separator.tsx
+++ b/apps/webui/src/components/ui/separator.tsx
@@ -3,7 +3,7 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Separator({
   className,
diff --git a/apps/webui/src/views/components/ui/sheet.tsx b/apps/webui/src/components/ui/sheet.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/sheet.tsx
rename to apps/webui/src/components/ui/sheet.tsx
index 022eaca..406e88c 100644
--- a/apps/webui/src/views/components/ui/sheet.tsx
+++ b/apps/webui/src/components/ui/sheet.tsx
@@ -2,7 +2,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
diff --git a/apps/webui/src/views/components/ui/sidebar.tsx b/apps/webui/src/components/ui/sidebar.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/sidebar.tsx
rename to apps/webui/src/components/ui/sidebar.tsx
index b2bd0e6..12dbc5c 100644
--- a/apps/webui/src/views/components/ui/sidebar.tsx
+++ b/apps/webui/src/components/ui/sidebar.tsx
@@ -5,25 +5,25 @@ import { VariantProps, cva } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import * as React from "react";
 
-import { Button } from "@/views/components/ui/button";
-import { Input } from "@/views/components/ui/input";
-import { Separator } from "@/views/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/views/components/ui/sheet";
-import { Skeleton } from "@/views/components/ui/skeleton";
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/views/components/ui/tooltip";
-import { useIsMobile } from "@/views/hooks/use-mobile";
-import { cn } from "@/views/utils";
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/presentation/hooks/use-mobile";
+import { cn } from "@/presentation/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
diff --git a/apps/webui/src/views/components/ui/skeleton.tsx b/apps/webui/src/components/ui/skeleton.tsx
similarity index 86%
rename from apps/webui/src/views/components/ui/skeleton.tsx
rename to apps/webui/src/components/ui/skeleton.tsx
index ed8d786..e1eb9a0 100644
--- a/apps/webui/src/views/components/ui/skeleton.tsx
+++ b/apps/webui/src/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 import { ComponentProps } from "react";
 
 function Skeleton({ className, ...props }: ComponentProps<"div">) {
diff --git a/apps/webui/src/views/components/ui/slider.tsx b/apps/webui/src/components/ui/slider.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/slider.tsx
rename to apps/webui/src/components/ui/slider.tsx
index 4dd813a..15f6cbc 100644
--- a/apps/webui/src/views/components/ui/slider.tsx
+++ b/apps/webui/src/components/ui/slider.tsx
@@ -3,7 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Slider({
   className,
diff --git a/apps/webui/src/views/components/ui/sonner.tsx b/apps/webui/src/components/ui/sonner.tsx
similarity index 100%
rename from apps/webui/src/views/components/ui/sonner.tsx
rename to apps/webui/src/components/ui/sonner.tsx
diff --git a/apps/webui/src/views/components/ui/spinner.tsx b/apps/webui/src/components/ui/spinner.tsx
similarity index 99%
rename from apps/webui/src/views/components/ui/spinner.tsx
rename to apps/webui/src/components/ui/spinner.tsx
index 4789333..25abb22 100644
--- a/apps/webui/src/views/components/ui/spinner.tsx
+++ b/apps/webui/src/components/ui/spinner.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 import {
   Loader,
   LoaderCircle,
diff --git a/apps/webui/src/views/components/ui/switch.tsx b/apps/webui/src/components/ui/switch.tsx
similarity index 96%
rename from apps/webui/src/views/components/ui/switch.tsx
rename to apps/webui/src/components/ui/switch.tsx
index f6e1c8c..4e176a3 100644
--- a/apps/webui/src/views/components/ui/switch.tsx
+++ b/apps/webui/src/components/ui/switch.tsx
@@ -3,7 +3,7 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Switch({
   className,
diff --git a/apps/webui/src/views/components/ui/table.tsx b/apps/webui/src/components/ui/table.tsx
similarity index 98%
rename from apps/webui/src/views/components/ui/table.tsx
rename to apps/webui/src/components/ui/table.tsx
index d501abb..ca07efb 100644
--- a/apps/webui/src/views/components/ui/table.tsx
+++ b/apps/webui/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
diff --git a/apps/webui/src/views/components/ui/tabs.tsx b/apps/webui/src/components/ui/tabs.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/tabs.tsx
rename to apps/webui/src/components/ui/tabs.tsx
index c374f0e..360f79f 100644
--- a/apps/webui/src/views/components/ui/tabs.tsx
+++ b/apps/webui/src/components/ui/tabs.tsx
@@ -3,7 +3,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Tabs({
   className,
diff --git a/apps/webui/src/views/components/ui/textarea.tsx b/apps/webui/src/components/ui/textarea.tsx
similarity index 94%
rename from apps/webui/src/views/components/ui/textarea.tsx
rename to apps/webui/src/components/ui/textarea.tsx
index 029bd0a..f6ea479 100644
--- a/apps/webui/src/views/components/ui/textarea.tsx
+++ b/apps/webui/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
diff --git a/apps/webui/src/views/components/ui/toggle-group.tsx b/apps/webui/src/components/ui/toggle-group.tsx
similarity index 94%
rename from apps/webui/src/views/components/ui/toggle-group.tsx
rename to apps/webui/src/components/ui/toggle-group.tsx
index 088230c..de7354e 100644
--- a/apps/webui/src/views/components/ui/toggle-group.tsx
+++ b/apps/webui/src/components/ui/toggle-group.tsx
@@ -4,8 +4,8 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { toggleVariants } from "@/views/components/ui/toggle";
-import { cn } from "@/views/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/presentation/utils";
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
diff --git a/apps/webui/src/views/components/ui/toggle.tsx b/apps/webui/src/components/ui/toggle.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/toggle.tsx
rename to apps/webui/src/components/ui/toggle.tsx
index 3b19c71..ce68d8c 100644
--- a/apps/webui/src/views/components/ui/toggle.tsx
+++ b/apps/webui/src/components/ui/toggle.tsx
@@ -2,7 +2,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
diff --git a/apps/webui/src/views/components/ui/tooltip.tsx b/apps/webui/src/components/ui/tooltip.tsx
similarity index 97%
rename from apps/webui/src/views/components/ui/tooltip.tsx
rename to apps/webui/src/components/ui/tooltip.tsx
index 5897ebc..357ca24 100644
--- a/apps/webui/src/views/components/ui/tooltip.tsx
+++ b/apps/webui/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { cn } from "@/views/utils";
+import { cn } from "@/presentation/utils";
 
 function TooltipProvider({
   delayDuration = 0,
diff --git a/apps/webui/src/infra/graphql/gql/fragment-masking.ts b/apps/webui/src/infra/graphql/gql/fragment-masking.ts
index 16e441b..aca71b1 100644
--- a/apps/webui/src/infra/graphql/gql/fragment-masking.ts
+++ b/apps/webui/src/infra/graphql/gql/fragment-masking.ts
@@ -1,15 +1,13 @@
 /* eslint-disable */
-import type {
-  DocumentTypeDecoration,
-  ResultOf,
-  TypedDocumentNode,
-} from '@graphql-typed-document-node/core';
-import type { FragmentDefinitionNode } from 'graphql';
-import type { Incremental } from './graphql';
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
 
-export type FragmentType<
-  TDocumentType extends DocumentTypeDecoration<any, any>,
-> = TDocumentType extends DocumentTypeDecoration<infer TType, any>
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
   ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
     ? TKey extends string
       ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
@@ -35,10 +33,7 @@ export function useFragment<TType>(
 // return nullable if `fragmentType` is nullable or undefined
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType:
-    | FragmentType<DocumentTypeDecoration<TType, any>>
-    | null
-    | undefined
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
@@ -48,10 +43,7 @@ export function useFragment<TType>(
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType:
-    | Array<FragmentType<DocumentTypeDecoration<TType, any>>>
-    | null
-    | undefined
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): Array<TType> | null | undefined;
 // return readonly array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
@@ -61,50 +53,35 @@ export function useFragment<TType>(
 // return readonly array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType:
-    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
-    | null
-    | undefined
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType:
-    | FragmentType<DocumentTypeDecoration<TType, any>>
-    | Array<FragmentType<DocumentTypeDecoration<TType, any>>>
-    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
-    | null
-    | undefined
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 
+
 export function makeFragmentData<
   F extends DocumentTypeDecoration<any, any>,
-  FT extends ResultOf<F>,
+  FT extends ResultOf<F>
 >(data: FT, _fragment: F): FragmentType<F> {
   return data as FragmentType<F>;
 }
 export function isFragmentReady<TQuery, TFrag>(
   queryNode: DocumentTypeDecoration<TQuery, any>,
   fragmentNode: TypedDocumentNode<TFrag>,
-  data:
-    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
-    | null
-    | undefined
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (
-    queryNode as {
-      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
-    }
-  ).__meta__?.deferredFields;
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
 
   if (!deferredFields) return true;
 
-  const fragDef = fragmentNode.definitions[0] as
-    | FragmentDefinitionNode
-    | undefined;
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
   const fragName = fragDef?.name?.value;
 
   const fields = (fragName && deferredFields[fragName]) || [];
-  return fields.length > 0 && fields.every((field) => data && field in data);
+  return fields.length > 0 && fields.every(field => data && field in data);
 }
diff --git a/apps/webui/src/infra/graphql/gql/gql.ts b/apps/webui/src/infra/graphql/gql/gql.ts
index a9291bb..28f6fe2 100644
--- a/apps/webui/src/infra/graphql/gql/gql.ts
+++ b/apps/webui/src/infra/graphql/gql/gql.ts
@@ -1,6 +1,6 @@
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 /* eslint-disable */
 import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 /**
  * Map of all GraphQL operations in the project.
@@ -14,14 +14,18 @@ import * as types from './graphql';
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 type Documents = {
-  '\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n            subscriberId\n        }\n    }\n': typeof types.CreateSubscriptionDocument;
-  '\n  query GetSubscriptions($page: Int!, $pageSize: Int!) {\n    subscriptions(\n      pagination: {\n        page: {\n          page: $page,\n          limit: $pageSize\n        }\n      }\n    ) {\n      nodes {\n        id\n        displayName\n        category\n        enabled\n        bangumi {\n          nodes {\n            id\n            displayName\n            posterLink\n            season\n            fansub\n            homepage\n          }\n        }\n      }\n    }\n  }\n': typeof types.GetSubscriptionsDocument;
+    "\n  query GetSubscriptions(\n  $page: PageInput!,\n  $filters: SubscriptionsFilterInput!,\n  $orderBy: SubscriptionsOrderInput!\n) {\n    subscriptions(\n      pagination: {\n        page: $page\n      }\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": typeof types.GetSubscriptionsDocument,
+    "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": typeof types.UpdateSubscriptionsDocument,
+    "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": typeof types.DeleteSubscriptionsDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          deleted\n          homepage\n        }\n      }\n    }\n  }\n}\n": typeof types.GetSubscriptionDetailDocument,
+    "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n": typeof types.CreateSubscriptionDocument,
 };
 const documents: Documents = {
-  '\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n            subscriberId\n        }\n    }\n':
-    types.CreateSubscriptionDocument,
-  '\n  query GetSubscriptions($page: Int!, $pageSize: Int!) {\n    subscriptions(\n      pagination: {\n        page: {\n          page: $page,\n          limit: $pageSize\n        }\n      }\n    ) {\n      nodes {\n        id\n        displayName\n        category\n        enabled\n        bangumi {\n          nodes {\n            id\n            displayName\n            posterLink\n            season\n            fansub\n            homepage\n          }\n        }\n      }\n    }\n  }\n':
-    types.GetSubscriptionsDocument,
+    "\n  query GetSubscriptions(\n  $page: PageInput!,\n  $filters: SubscriptionsFilterInput!,\n  $orderBy: SubscriptionsOrderInput!\n) {\n    subscriptions(\n      pagination: {\n        page: $page\n      }\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetSubscriptionsDocument,
+    "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": types.UpdateSubscriptionsDocument,
+    "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": types.DeleteSubscriptionsDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          deleted\n          homepage\n        }\n      }\n    }\n  }\n}\n": types.GetSubscriptionDetailDocument,
+    "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n": types.CreateSubscriptionDocument,
 };
 
 /**
@@ -41,19 +45,26 @@ export function gql(source: string): unknown;
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(
-  source: '\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n            subscriberId\n        }\n    }\n'
-): (typeof documents)['\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n            subscriberId\n        }\n    }\n'];
+export function gql(source: "\n  query GetSubscriptions(\n  $page: PageInput!,\n  $filters: SubscriptionsFilterInput!,\n  $orderBy: SubscriptionsOrderInput!\n) {\n    subscriptions(\n      pagination: {\n        page: $page\n      }\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetSubscriptions(\n  $page: PageInput!,\n  $filters: SubscriptionsFilterInput!,\n  $orderBy: SubscriptionsOrderInput!\n) {\n    subscriptions(\n      pagination: {\n        page: $page\n      }\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(
-  source: '\n  query GetSubscriptions($page: Int!, $pageSize: Int!) {\n    subscriptions(\n      pagination: {\n        page: {\n          page: $page,\n          limit: $pageSize\n        }\n      }\n    ) {\n      nodes {\n        id\n        displayName\n        category\n        enabled\n        bangumi {\n          nodes {\n            id\n            displayName\n            posterLink\n            season\n            fansub\n            homepage\n          }\n        }\n      }\n    }\n  }\n'
-): (typeof documents)['\n  query GetSubscriptions($page: Int!, $pageSize: Int!) {\n    subscriptions(\n      pagination: {\n        page: {\n          page: $page,\n          limit: $pageSize\n        }\n      }\n    ) {\n      nodes {\n        id\n        displayName\n        category\n        enabled\n        bangumi {\n          nodes {\n            id\n            displayName\n            posterLink\n            season\n            fansub\n            homepage\n          }\n        }\n      }\n    }\n  }\n'];
+export function gql(source: "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n"): (typeof documents)["\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n"): (typeof documents)["\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          deleted\n          homepage\n        }\n      }\n    }\n  }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          deleted\n          homepage\n        }\n      }\n    }\n  }\n}\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n"): (typeof documents)["\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n"];
 
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
 }
 
-export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
-  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;
\ No newline at end of file
diff --git a/apps/webui/src/infra/graphql/gql/graphql.ts b/apps/webui/src/infra/graphql/gql/graphql.ts
index c3e83b8..05ed1d9 100644
--- a/apps/webui/src/infra/graphql/gql/graphql.ts
+++ b/apps/webui/src/infra/graphql/gql/graphql.ts
@@ -1,32 +1,19 @@
 /* eslint-disable */
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
-export type Exact<T extends { [key: string]: unknown }> = {
-  [K in keyof T]: T[K];
-};
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]?: Maybe<T[SubKey]>;
-};
-export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]: Maybe<T[SubKey]>;
-};
-export type MakeEmpty<
-  T extends { [key: string]: unknown },
-  K extends keyof T,
-> = { [_ in K]?: never };
-export type Incremental<T> =
-  | T
-  | {
-      [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
-    };
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never };
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: { input: string; output: string };
-  String: { input: string; output: string };
-  Boolean: { input: boolean; output: boolean };
-  Int: { input: number; output: number };
-  Float: { input: number; output: number };
+  ID: { input: string; output: string; }
+  String: { input: string; output: string; }
+  Boolean: { input: boolean; output: boolean; }
+  Int: { input: number; output: number; }
+  Float: { input: number; output: number; }
 };
 
 export type Bangumi = {
@@ -53,18 +40,21 @@ export type Bangumi = {
   updatedAt: Scalars['String']['output'];
 };
 
+
 export type BangumiEpisodeArgs = {
   filters?: InputMaybe<EpisodesFilterInput>;
   orderBy?: InputMaybe<EpisodesOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type BangumiSubscriptionArgs = {
   filters?: InputMaybe<SubscriptionsFilterInput>;
   orderBy?: InputMaybe<SubscriptionsOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type BangumiSubscriptionBangumiArgs = {
   filters?: InputMaybe<SubscriptionBangumiFilterInput>;
   orderBy?: InputMaybe<SubscriptionBangumiOrderInput>;
@@ -203,7 +193,7 @@ export type CursorInput = {
 
 export enum DownloadMimeEnum {
   Applicationoctetstream = 'applicationoctetstream',
-  Applicationxbittorrent = 'applicationxbittorrent',
+  Applicationxbittorrent = 'applicationxbittorrent'
 }
 
 export type DownloadMimeEnumFilterInput = {
@@ -225,7 +215,7 @@ export enum DownloadStatusEnum {
   Downloading = 'downloading',
   Failed = 'failed',
   Paused = 'paused',
-  Pending = 'pending',
+  Pending = 'pending'
 }
 
 export type DownloadStatusEnumFilterInput = {
@@ -243,7 +233,7 @@ export type DownloadStatusEnumFilterInput = {
 
 export enum DownloaderCategoryEnum {
   Dandanplay = 'dandanplay',
-  Qbittorrent = 'qbittorrent',
+  Qbittorrent = 'qbittorrent'
 }
 
 export type DownloaderCategoryEnumFilterInput = {
@@ -274,6 +264,7 @@ export type Downloaders = {
   username: Scalars['String']['output'];
 };
 
+
 export type DownloadersDownloadArgs = {
   filters?: InputMaybe<DownloadsFilterInput>;
   orderBy?: InputMaybe<DownloadsOrderInput>;
@@ -510,18 +501,21 @@ export type Episodes = {
   updatedAt: Scalars['String']['output'];
 };
 
+
 export type EpisodesDownloadArgs = {
   filters?: InputMaybe<SubscriptionsFilterInput>;
   orderBy?: InputMaybe<SubscriptionsOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type EpisodesSubscriptionArgs = {
   filters?: InputMaybe<DownloadsFilterInput>;
   orderBy?: InputMaybe<DownloadsOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type EpisodesSubscriptionEpisodeArgs = {
   filters?: InputMaybe<SubscriptionEpisodeFilterInput>;
   orderBy?: InputMaybe<SubscriptionEpisodeOrderInput>;
@@ -702,120 +696,148 @@ export type Mutation = {
   subscriptionsUpdate: Array<SubscriptionsBasic>;
 };
 
+
 export type MutationBangumiCreateBatchArgs = {
   data: Array<BangumiInsertInput>;
 };
 
+
 export type MutationBangumiCreateOneArgs = {
   data: BangumiInsertInput;
 };
 
+
 export type MutationBangumiDeleteArgs = {
   filter?: InputMaybe<BangumiFilterInput>;
 };
 
+
 export type MutationBangumiUpdateArgs = {
   data: BangumiUpdateInput;
   filter?: InputMaybe<BangumiFilterInput>;
 };
 
+
 export type MutationDownloadersCreateBatchArgs = {
   data: Array<DownloadersInsertInput>;
 };
 
+
 export type MutationDownloadersCreateOneArgs = {
   data: DownloadersInsertInput;
 };
 
+
 export type MutationDownloadersDeleteArgs = {
   filter?: InputMaybe<DownloadersFilterInput>;
 };
 
+
 export type MutationDownloadersUpdateArgs = {
   data: DownloadersUpdateInput;
   filter?: InputMaybe<DownloadersFilterInput>;
 };
 
+
 export type MutationDownloadsCreateBatchArgs = {
   data: Array<DownloadsInsertInput>;
 };
 
+
 export type MutationDownloadsCreateOneArgs = {
   data: DownloadsInsertInput;
 };
 
+
 export type MutationDownloadsDeleteArgs = {
   filter?: InputMaybe<DownloadsFilterInput>;
 };
 
+
 export type MutationDownloadsUpdateArgs = {
   data: DownloadsUpdateInput;
   filter?: InputMaybe<DownloadsFilterInput>;
 };
 
+
 export type MutationEpisodesCreateBatchArgs = {
   data: Array<EpisodesInsertInput>;
 };
 
+
 export type MutationEpisodesCreateOneArgs = {
   data: EpisodesInsertInput;
 };
 
+
 export type MutationEpisodesDeleteArgs = {
   filter?: InputMaybe<EpisodesFilterInput>;
 };
 
+
 export type MutationEpisodesUpdateArgs = {
   data: EpisodesUpdateInput;
   filter?: InputMaybe<EpisodesFilterInput>;
 };
 
+
 export type MutationSubscriptionBangumiCreateBatchArgs = {
   data: Array<SubscriptionBangumiInsertInput>;
 };
 
+
 export type MutationSubscriptionBangumiCreateOneArgs = {
   data: SubscriptionBangumiInsertInput;
 };
 
+
 export type MutationSubscriptionBangumiDeleteArgs = {
   filter?: InputMaybe<SubscriptionBangumiFilterInput>;
 };
 
+
 export type MutationSubscriptionBangumiUpdateArgs = {
   data: SubscriptionBangumiUpdateInput;
   filter?: InputMaybe<SubscriptionBangumiFilterInput>;
 };
 
+
 export type MutationSubscriptionEpisodeCreateBatchArgs = {
   data: Array<SubscriptionEpisodeInsertInput>;
 };
 
+
 export type MutationSubscriptionEpisodeCreateOneArgs = {
   data: SubscriptionEpisodeInsertInput;
 };
 
+
 export type MutationSubscriptionEpisodeDeleteArgs = {
   filter?: InputMaybe<SubscriptionEpisodeFilterInput>;
 };
 
+
 export type MutationSubscriptionEpisodeUpdateArgs = {
   data: SubscriptionEpisodeUpdateInput;
   filter?: InputMaybe<SubscriptionEpisodeFilterInput>;
 };
 
+
 export type MutationSubscriptionsCreateBatchArgs = {
   data: Array<SubscriptionsInsertInput>;
 };
 
+
 export type MutationSubscriptionsCreateOneArgs = {
   data: SubscriptionsInsertInput;
 };
 
+
 export type MutationSubscriptionsDeleteArgs = {
   filter?: InputMaybe<SubscriptionsFilterInput>;
 };
 
+
 export type MutationSubscriptionsUpdateArgs = {
   data: SubscriptionsUpdateInput;
   filter?: InputMaybe<SubscriptionsFilterInput>;
@@ -828,7 +850,7 @@ export type OffsetInput = {
 
 export enum OrderByEnum {
   Asc = 'ASC',
-  Desc = 'DESC',
+  Desc = 'DESC'
 }
 
 export type PageInfo = {
@@ -871,52 +893,61 @@ export type Query = {
   subscriptions: SubscriptionsConnection;
 };
 
+
 export type Query_Sea_Orm_Entity_MetadataArgs = {
   table_name: Scalars['String']['input'];
 };
 
+
 export type QueryBangumiArgs = {
   filters?: InputMaybe<BangumiFilterInput>;
   orderBy?: InputMaybe<BangumiOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QueryDownloadersArgs = {
   filters?: InputMaybe<DownloadersFilterInput>;
   orderBy?: InputMaybe<DownloadersOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QueryDownloadsArgs = {
   filters?: InputMaybe<DownloadsFilterInput>;
   orderBy?: InputMaybe<DownloadsOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QueryEpisodesArgs = {
   filters?: InputMaybe<EpisodesFilterInput>;
   orderBy?: InputMaybe<EpisodesOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QuerySubscribersArgs = {
   filters?: InputMaybe<SubscribersFilterInput>;
   orderBy?: InputMaybe<SubscribersOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QuerySubscriptionBangumiArgs = {
   filters?: InputMaybe<SubscriptionBangumiFilterInput>;
   orderBy?: InputMaybe<SubscriptionBangumiOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QuerySubscriptionEpisodeArgs = {
   filters?: InputMaybe<SubscriptionEpisodeFilterInput>;
   orderBy?: InputMaybe<SubscriptionEpisodeOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type QuerySubscriptionsArgs = {
   filters?: InputMaybe<SubscriptionsFilterInput>;
   orderBy?: InputMaybe<SubscriptionsOrderInput>;
@@ -959,24 +990,28 @@ export type Subscribers = {
   updatedAt: Scalars['String']['output'];
 };
 
+
 export type SubscribersBangumiArgs = {
   filters?: InputMaybe<BangumiFilterInput>;
   orderBy?: InputMaybe<BangumiOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscribersDownloaderArgs = {
   filters?: InputMaybe<DownloadersFilterInput>;
   orderBy?: InputMaybe<DownloadersOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscribersEpisodeArgs = {
   filters?: InputMaybe<EpisodesFilterInput>;
   orderBy?: InputMaybe<EpisodesOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscribersSubscriptionArgs = {
   filters?: InputMaybe<SubscriptionsFilterInput>;
   orderBy?: InputMaybe<SubscriptionsOrderInput>;
@@ -1073,7 +1108,7 @@ export type SubscriptionBangumiUpdateInput = {
 
 export enum SubscriptionCategoryEnum {
   Manual = 'manual',
-  Mikan = 'mikan',
+  Mikan = 'mikan'
 }
 
 export type SubscriptionCategoryEnumFilterInput = {
@@ -1166,24 +1201,28 @@ export type Subscriptions = {
   updatedAt: Scalars['String']['output'];
 };
 
+
 export type SubscriptionsBangumiArgs = {
   filters?: InputMaybe<BangumiFilterInput>;
   orderBy?: InputMaybe<BangumiOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscriptionsEpisodeArgs = {
   filters?: InputMaybe<EpisodesFilterInput>;
   orderBy?: InputMaybe<EpisodesOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscriptionsSubscriptionBangumiArgs = {
   filters?: InputMaybe<SubscriptionBangumiFilterInput>;
   orderBy?: InputMaybe<SubscriptionBangumiOrderInput>;
   pagination?: InputMaybe<PaginationInput>;
 };
 
+
 export type SubscriptionsSubscriptionEpisodeArgs = {
   filters?: InputMaybe<SubscriptionEpisodeFilterInput>;
   orderBy?: InputMaybe<SubscriptionEpisodeOrderInput>;
@@ -1275,264 +1314,47 @@ export type TextFilterInput = {
   not_between?: InputMaybe<Array<Scalars['String']['input']>>;
 };
 
+export type GetSubscriptionsQueryVariables = Exact<{
+  page: PageInput;
+  filters: SubscriptionsFilterInput;
+  orderBy: SubscriptionsOrderInput;
+}>;
+
+
+export type GetSubscriptionsQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, createdAt: string, updatedAt: string, displayName: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean }>, paginationInfo?: { __typename?: 'PaginationInfo', total: number, pages: number } | null } };
+
+export type UpdateSubscriptionsMutationVariables = Exact<{
+  data: SubscriptionsUpdateInput;
+  filters: SubscriptionsFilterInput;
+}>;
+
+
+export type UpdateSubscriptionsMutation = { __typename?: 'Mutation', subscriptionsUpdate: Array<{ __typename?: 'SubscriptionsBasic', id: number, createdAt: string, updatedAt: string, displayName: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean }> };
+
+export type DeleteSubscriptionsMutationVariables = Exact<{
+  filters?: InputMaybe<SubscriptionsFilterInput>;
+}>;
+
+
+export type DeleteSubscriptionsMutation = { __typename?: 'Mutation', subscriptionsDelete: number };
+
+export type GetSubscriptionDetailQueryVariables = Exact<{
+  id: Scalars['Int']['input'];
+}>;
+
+
+export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, deleted: boolean, homepage?: string | null }> } }> } };
+
 export type CreateSubscriptionMutationVariables = Exact<{
   input: SubscriptionsInsertInput;
 }>;
 
-export type CreateSubscriptionMutation = {
-  __typename?: 'Mutation';
-  subscriptionsCreateOne: {
-    __typename?: 'SubscriptionsBasic';
-    id: number;
-    displayName: string;
-    sourceUrl: string;
-    enabled: boolean;
-    category: SubscriptionCategoryEnum;
-    subscriberId: number;
-  };
-};
 
-export type GetSubscriptionsQueryVariables = Exact<{
-  page: Scalars['Int']['input'];
-  pageSize: Scalars['Int']['input'];
-}>;
+export type CreateSubscriptionMutation = { __typename?: 'Mutation', subscriptionsCreateOne: { __typename?: 'SubscriptionsBasic', id: number, displayName: string, sourceUrl: string, enabled: boolean, category: SubscriptionCategoryEnum } };
 
-export type GetSubscriptionsQuery = {
-  __typename?: 'Query';
-  subscriptions: {
-    __typename?: 'SubscriptionsConnection';
-    nodes: Array<{
-      __typename?: 'Subscriptions';
-      id: number;
-      displayName: string;
-      category: SubscriptionCategoryEnum;
-      enabled: boolean;
-      bangumi: {
-        __typename?: 'BangumiConnection';
-        nodes: Array<{
-          __typename?: 'Bangumi';
-          id: number;
-          displayName: string;
-          posterLink?: string | null;
-          season: number;
-          fansub?: string | null;
-          homepage?: string | null;
-        }>;
-      };
-    }>;
-  };
-};
 
-export const CreateSubscriptionDocument = {
-  kind: 'Document',
-  definitions: [
-    {
-      kind: 'OperationDefinition',
-      operation: 'mutation',
-      name: { kind: 'Name', value: 'CreateSubscription' },
-      variableDefinitions: [
-        {
-          kind: 'VariableDefinition',
-          variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'input' },
-          },
-          type: {
-            kind: 'NonNullType',
-            type: {
-              kind: 'NamedType',
-              name: { kind: 'Name', value: 'SubscriptionsInsertInput' },
-            },
-          },
-        },
-      ],
-      selectionSet: {
-        kind: 'SelectionSet',
-        selections: [
-          {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'subscriptionsCreateOne' },
-            arguments: [
-              {
-                kind: 'Argument',
-                name: { kind: 'Name', value: 'data' },
-                value: {
-                  kind: 'Variable',
-                  name: { kind: 'Name', value: 'input' },
-                },
-              },
-            ],
-            selectionSet: {
-              kind: 'SelectionSet',
-              selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'displayName' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'sourceUrl' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'enabled' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'category' } },
-                {
-                  kind: 'Field',
-                  name: { kind: 'Name', value: 'subscriberId' },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<
-  CreateSubscriptionMutation,
-  CreateSubscriptionMutationVariables
->;
-export const GetSubscriptionsDocument = {
-  kind: 'Document',
-  definitions: [
-    {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'GetSubscriptions' },
-      variableDefinitions: [
-        {
-          kind: 'VariableDefinition',
-          variable: { kind: 'Variable', name: { kind: 'Name', value: 'page' } },
-          type: {
-            kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
-          },
-        },
-        {
-          kind: 'VariableDefinition',
-          variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'pageSize' },
-          },
-          type: {
-            kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
-          },
-        },
-      ],
-      selectionSet: {
-        kind: 'SelectionSet',
-        selections: [
-          {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'subscriptions' },
-            arguments: [
-              {
-                kind: 'Argument',
-                name: { kind: 'Name', value: 'pagination' },
-                value: {
-                  kind: 'ObjectValue',
-                  fields: [
-                    {
-                      kind: 'ObjectField',
-                      name: { kind: 'Name', value: 'page' },
-                      value: {
-                        kind: 'ObjectValue',
-                        fields: [
-                          {
-                            kind: 'ObjectField',
-                            name: { kind: 'Name', value: 'page' },
-                            value: {
-                              kind: 'Variable',
-                              name: { kind: 'Name', value: 'page' },
-                            },
-                          },
-                          {
-                            kind: 'ObjectField',
-                            name: { kind: 'Name', value: 'limit' },
-                            value: {
-                              kind: 'Variable',
-                              name: { kind: 'Name', value: 'pageSize' },
-                            },
-                          },
-                        ],
-                      },
-                    },
-                  ],
-                },
-              },
-            ],
-            selectionSet: {
-              kind: 'SelectionSet',
-              selections: [
-                {
-                  kind: 'Field',
-                  name: { kind: 'Name', value: 'nodes' },
-                  selectionSet: {
-                    kind: 'SelectionSet',
-                    selections: [
-                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                      {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'displayName' },
-                      },
-                      {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'category' },
-                      },
-                      {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'enabled' },
-                      },
-                      {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'bangumi' },
-                        selectionSet: {
-                          kind: 'SelectionSet',
-                          selections: [
-                            {
-                              kind: 'Field',
-                              name: { kind: 'Name', value: 'nodes' },
-                              selectionSet: {
-                                kind: 'SelectionSet',
-                                selections: [
-                                  {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'id' },
-                                  },
-                                  {
-                                    kind: 'Field',
-                                    name: {
-                                      kind: 'Name',
-                                      value: 'displayName',
-                                    },
-                                  },
-                                  {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'posterLink' },
-                                  },
-                                  {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'season' },
-                                  },
-                                  {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'fansub' },
-                                  },
-                                  {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'homepage' },
-                                  },
-                                ],
-                              },
-                            },
-                          ],
-                        },
-                      },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<
-  GetSubscriptionsQuery,
-  GetSubscriptionsQueryVariables
->;
+export const GetSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"page"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PageInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsOrderInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"page"},"value":{"kind":"Variable","name":{"kind":"Name","value":"page"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionsQuery, GetSubscriptionsQueryVariables>;
+export const UpdateSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<UpdateSubscriptionsMutation, UpdateSubscriptionsMutationVariables>;
+export const DeleteSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteSubscriptionsMutation, DeleteSubscriptionsMutationVariables>;
+export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"deleted"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;
+export const CreateSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"category"}}]}}]}}]} as unknown as DocumentNode<CreateSubscriptionMutation, CreateSubscriptionMutationVariables>;
\ No newline at end of file
diff --git a/apps/webui/src/infra/graphql/gql/index.ts b/apps/webui/src/infra/graphql/gql/index.ts
index c682b1e..f515991 100644
--- a/apps/webui/src/infra/graphql/gql/index.ts
+++ b/apps/webui/src/infra/graphql/gql/index.ts
@@ -1,2 +1,2 @@
-export * from './fragment-masking';
-export * from './gql';
+export * from "./fragment-masking";
+export * from "./gql";
\ No newline at end of file
diff --git a/apps/webui/src/infra/intl/context.ts b/apps/webui/src/infra/intl/context.ts
new file mode 100644
index 0000000..6ab5caf
--- /dev/null
+++ b/apps/webui/src/infra/intl/context.ts
@@ -0,0 +1,10 @@
+import type { Injector } from '@outposts/injection-js';
+import { IntlService } from './intl.service';
+
+export function intlContextFromInjector(injector: Injector) {
+  const intlService = injector.get(IntlService);
+
+  return {
+    intlService,
+  };
+}
diff --git a/apps/webui/src/infra/intl/hooks.ts b/apps/webui/src/infra/intl/hooks.ts
new file mode 100644
index 0000000..1ec5676
--- /dev/null
+++ b/apps/webui/src/infra/intl/hooks.ts
@@ -0,0 +1,9 @@
+import { useInjector } from 'oidc-client-rx/adapters/react';
+import { useMemo } from 'react';
+import { intlContextFromInjector } from './context';
+
+export function useIntl() {
+  const injector = useInjector();
+
+  return useMemo(() => intlContextFromInjector(injector), [injector]);
+}
diff --git a/apps/webui/src/infra/intl/intl.service.ts b/apps/webui/src/infra/intl/intl.service.ts
new file mode 100644
index 0000000..3770dab
--- /dev/null
+++ b/apps/webui/src/infra/intl/intl.service.ts
@@ -0,0 +1,27 @@
+import { inject } from '@outposts/injection-js';
+import { DOCUMENT } from '../platform/injection';
+
+export class IntlService {
+  document = inject(DOCUMENT);
+
+  formatTimestamp(timestamp: number, options?: Intl.DateTimeFormatOptions) {
+    const defaultOptions: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+      ...options,
+    };
+
+    return new Intl.DateTimeFormat(
+      this.document.defaultView?.navigator.language,
+      {
+        ...defaultOptions,
+        ...options,
+      }
+    ).format(new Date(timestamp));
+  }
+}
diff --git a/apps/webui/src/infra/routes/traits.ts b/apps/webui/src/infra/routes/traits.ts
index ff4da3d..a927de6 100644
--- a/apps/webui/src/infra/routes/traits.ts
+++ b/apps/webui/src/infra/routes/traits.ts
@@ -1,4 +1,4 @@
-import type { ProLinkProps } from '@/views/components/ui/pro-link';
+import type { ProLinkProps } from '@/components/ui/pro-link';
 import type { Injector } from '@outposts/injection-js';
 import type { LucideIcon } from 'lucide-react';
 
diff --git a/apps/webui/src/infra/routes/utils.ts b/apps/webui/src/infra/routes/utils.ts
index d30e613..af6a758 100644
--- a/apps/webui/src/infra/routes/utils.ts
+++ b/apps/webui/src/infra/routes/utils.ts
@@ -1,5 +1,5 @@
+import { guardRouteIndexAsNotFound } from '@/components/layout/app-not-found';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
-import { guardRouteIndexAsNotFound } from '@/views/components/layout/app-not-found';
 import { Outlet } from '@tanstack/react-router';
 
 export interface BuildVirtualBranchRouteOptions {
diff --git a/apps/webui/src/main.tsx b/apps/webui/src/main.tsx
index 565f97b..1276132 100644
--- a/apps/webui/src/main.tsx
+++ b/apps/webui/src/main.tsx
@@ -1,10 +1,10 @@
 import '@abraham/reflection';
 import { provideAuth, setupAuthContext } from '@/app/auth/context';
+import { AppNotFoundComponent } from '@/components/layout/app-not-found';
 import { providePlatform } from '@/infra/platform/context';
 import { provideStorages } from '@/infra/storage/context';
 import { provideStyles } from '@/infra/styles/context';
-import { AppNotFoundComponent } from '@/views/components/layout/app-not-found';
-import { routeTree } from '@/views/routeTree.gen';
+import { routeTree } from '@/presentation/routeTree.gen';
 import { type Injector, ReflectiveInjector } from '@outposts/injection-js';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import {
diff --git a/apps/webui/src/presentation/hooks/use-debounded-skeleton.ts b/apps/webui/src/presentation/hooks/use-debounded-skeleton.ts
new file mode 100644
index 0000000..0563727
--- /dev/null
+++ b/apps/webui/src/presentation/hooks/use-debounded-skeleton.ts
@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useStateRef } from './use-state-ref.ts';
+export interface UseDebouncedSkeletonProps {
+  minSkeletonDuration?: number;
+  loading?: boolean;
+}
+
+export function useDebouncedSkeleton({
+  minSkeletonDuration = 100,
+  loading,
+}: UseDebouncedSkeletonProps) {
+  const [showSkeleton, setShowSkeleton, showSkeletonRef] = useStateRef(loading);
+
+  useEffect(() => {
+    if (loading && !showSkeleton) {
+      setShowSkeleton(true);
+    }
+    if (!loading && showSkeleton) {
+      const timeout = setTimeout(() => {
+        if (showSkeletonRef.current) {
+          setShowSkeleton(false);
+        }
+      }, minSkeletonDuration);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [
+    loading,
+    showSkeleton,
+    setShowSkeleton,
+    minSkeletonDuration,
+    showSkeletonRef,
+  ]);
+
+  return {
+    showSkeleton,
+  };
+}
diff --git a/apps/webui/src/presentation/hooks/use-event.ts b/apps/webui/src/presentation/hooks/use-event.ts
new file mode 100644
index 0000000..5eb9b88
--- /dev/null
+++ b/apps/webui/src/presentation/hooks/use-event.ts
@@ -0,0 +1,18 @@
+import { useCallback, useInsertionEffect, useRef } from 'react';
+
+export function useEvent<
+  const T extends (
+    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any[]
+  ) => void,
+>(fn: T): T {
+  const ref = useRef<T | null>(fn);
+  useInsertionEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return useCallback((...args: any) => {
+    const latestFn = ref.current!;
+    return latestFn(...args);
+  }, []) as unknown as T;
+}
diff --git a/apps/webui/src/views/hooks/use-mobile.ts b/apps/webui/src/presentation/hooks/use-mobile.ts
similarity index 100%
rename from apps/webui/src/views/hooks/use-mobile.ts
rename to apps/webui/src/presentation/hooks/use-mobile.ts
diff --git a/apps/webui/src/presentation/hooks/use-state-ref.ts b/apps/webui/src/presentation/hooks/use-state-ref.ts
new file mode 100644
index 0000000..c9c014d
--- /dev/null
+++ b/apps/webui/src/presentation/hooks/use-state-ref.ts
@@ -0,0 +1,28 @@
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+
+export function useStateRef<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>, RefObject<T>] {
+  const [state, _setState] = useState(initialValue);
+  const ref = useRef(initialValue);
+
+  const setState = useCallback((value: T | ((prev: T) => T)) => {
+    let nextValue: T;
+    if (typeof value === 'function') {
+      nextValue = (value as (prev: T) => T)(ref.current);
+    } else {
+      nextValue = value;
+    }
+    ref.current = nextValue;
+    _setState(nextValue);
+  }, []);
+
+  return [state, setState, ref] as const;
+}
diff --git a/apps/webui/src/presentation/routeTree.gen.ts b/apps/webui/src/presentation/routeTree.gen.ts
new file mode 100644
index 0000000..9e58b79
--- /dev/null
+++ b/apps/webui/src/presentation/routeTree.gen.ts
@@ -0,0 +1,663 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as R404Import } from './routes/404.tsx';
+import { Route as rootRoute } from './routes/__root.tsx';
+import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore.tsx';
+import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed.tsx';
+import { Route as AppBangumiManageImport } from './routes/_app/bangumi/manage.tsx';
+import { Route as AppBangumiRouteImport } from './routes/_app/bangumi/route.tsx';
+import { Route as AppPlaygroundGraphqlApiImport } from './routes/_app/playground/graphql-api.tsx';
+import { Route as AppPlaygroundRouteImport } from './routes/_app/playground/route.tsx';
+import { Route as AppRouteImport } from './routes/_app/route.tsx';
+import { Route as AppSettingsDownloaderImport } from './routes/_app/settings/downloader.tsx';
+import { Route as AppSettingsRouteImport } from './routes/_app/settings/route.tsx';
+import { Route as AppSubscriptionsCreateImport } from './routes/_app/subscriptions/create.tsx';
+import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId.tsx';
+import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscriptionId.tsx';
+import { Route as AppSubscriptionsManageImport } from './routes/_app/subscriptions/manage.tsx';
+import { Route as AppSubscriptionsRouteImport } from './routes/_app/subscriptions/route.tsx';
+import { Route as AboutImport } from './routes/about.tsx';
+import { Route as AuthOidcCallbackImport } from './routes/auth/oidc/callback.tsx';
+import { Route as AuthSignInImport } from './routes/auth/sign-in.tsx';
+import { Route as AuthSignUpImport } from './routes/auth/sign-up.tsx';
+import { Route as IndexImport } from './routes/index.tsx';
+
+// Create/Update Routes
+
+const AboutRoute = AboutImport.update({
+  id: '/about',
+  path: '/about',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const R404Route = R404Import.update({
+  id: '/404',
+  path: '/404',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AppRouteRoute = AppRouteImport.update({
+  id: '/_app',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AuthSignUpRoute = AuthSignUpImport.update({
+  id: '/auth/sign-up',
+  path: '/auth/sign-up',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AuthSignInRoute = AuthSignInImport.update({
+  id: '/auth/sign-in',
+  path: '/auth/sign-in',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AppSubscriptionsRouteRoute = AppSubscriptionsRouteImport.update({
+  id: '/subscriptions',
+  path: '/subscriptions',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AppSettingsRouteRoute = AppSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AppPlaygroundRouteRoute = AppPlaygroundRouteImport.update({
+  id: '/playground',
+  path: '/playground',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AppBangumiRouteRoute = AppBangumiRouteImport.update({
+  id: '/bangumi',
+  path: '/bangumi',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AuthOidcCallbackRoute = AuthOidcCallbackImport.update({
+  id: '/auth/oidc/callback',
+  path: '/auth/oidc/callback',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AppSubscriptionsManageRoute = AppSubscriptionsManageImport.update({
+  id: '/manage',
+  path: '/manage',
+  getParentRoute: () => AppSubscriptionsRouteRoute,
+} as any);
+
+const AppSubscriptionsCreateRoute = AppSubscriptionsCreateImport.update({
+  id: '/create',
+  path: '/create',
+  getParentRoute: () => AppSubscriptionsRouteRoute,
+} as any);
+
+const AppSettingsDownloaderRoute = AppSettingsDownloaderImport.update({
+  id: '/downloader',
+  path: '/downloader',
+  getParentRoute: () => AppSettingsRouteRoute,
+} as any);
+
+const AppPlaygroundGraphqlApiRoute = AppPlaygroundGraphqlApiImport.update({
+  id: '/graphql-api',
+  path: '/graphql-api',
+  getParentRoute: () => AppPlaygroundRouteRoute,
+} as any).lazy(() =>
+  import('./routes/_app/playground/graphql-api.lazy.tsx').then((d) => d.Route)
+);
+
+const AppBangumiManageRoute = AppBangumiManageImport.update({
+  id: '/manage',
+  path: '/manage',
+  getParentRoute: () => AppBangumiRouteRoute,
+} as any);
+
+const AppExploreFeedRoute = AppExploreFeedImport.update({
+  id: '/_explore/feed',
+  path: '/feed',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AppExploreExploreRoute = AppExploreExploreImport.update({
+  id: '/_explore/explore',
+  path: '/explore',
+  getParentRoute: () => AppRouteRoute,
+} as any);
+
+const AppSubscriptionsEditSubscriptionIdRoute =
+  AppSubscriptionsEditSubscriptionIdImport.update({
+    id: '/edit/$subscriptionId',
+    path: '/edit/$subscriptionId',
+    getParentRoute: () => AppSubscriptionsRouteRoute,
+  } as any);
+
+const AppSubscriptionsDetailSubscriptionIdRoute =
+  AppSubscriptionsDetailSubscriptionIdImport.update({
+    id: '/detail/$subscriptionId',
+    path: '/detail/$subscriptionId',
+    getParentRoute: () => AppSubscriptionsRouteRoute,
+  } as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/_app': {
+      id: '/_app';
+      path: '';
+      fullPath: '';
+      preLoaderRoute: typeof AppRouteImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/404': {
+      id: '/404';
+      path: '/404';
+      fullPath: '/404';
+      preLoaderRoute: typeof R404Import;
+      parentRoute: typeof rootRoute;
+    };
+    '/about': {
+      id: '/about';
+      path: '/about';
+      fullPath: '/about';
+      preLoaderRoute: typeof AboutImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/_app/bangumi': {
+      id: '/_app/bangumi';
+      path: '/bangumi';
+      fullPath: '/bangumi';
+      preLoaderRoute: typeof AppBangumiRouteImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/_app/playground': {
+      id: '/_app/playground';
+      path: '/playground';
+      fullPath: '/playground';
+      preLoaderRoute: typeof AppPlaygroundRouteImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/_app/settings': {
+      id: '/_app/settings';
+      path: '/settings';
+      fullPath: '/settings';
+      preLoaderRoute: typeof AppSettingsRouteImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/_app/subscriptions': {
+      id: '/_app/subscriptions';
+      path: '/subscriptions';
+      fullPath: '/subscriptions';
+      preLoaderRoute: typeof AppSubscriptionsRouteImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/auth/sign-in': {
+      id: '/auth/sign-in';
+      path: '/auth/sign-in';
+      fullPath: '/auth/sign-in';
+      preLoaderRoute: typeof AuthSignInImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/auth/sign-up': {
+      id: '/auth/sign-up';
+      path: '/auth/sign-up';
+      fullPath: '/auth/sign-up';
+      preLoaderRoute: typeof AuthSignUpImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/_app/_explore/explore': {
+      id: '/_app/_explore/explore';
+      path: '/explore';
+      fullPath: '/explore';
+      preLoaderRoute: typeof AppExploreExploreImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/_app/_explore/feed': {
+      id: '/_app/_explore/feed';
+      path: '/feed';
+      fullPath: '/feed';
+      preLoaderRoute: typeof AppExploreFeedImport;
+      parentRoute: typeof AppRouteImport;
+    };
+    '/_app/bangumi/manage': {
+      id: '/_app/bangumi/manage';
+      path: '/manage';
+      fullPath: '/bangumi/manage';
+      preLoaderRoute: typeof AppBangumiManageImport;
+      parentRoute: typeof AppBangumiRouteImport;
+    };
+    '/_app/playground/graphql-api': {
+      id: '/_app/playground/graphql-api';
+      path: '/graphql-api';
+      fullPath: '/playground/graphql-api';
+      preLoaderRoute: typeof AppPlaygroundGraphqlApiImport;
+      parentRoute: typeof AppPlaygroundRouteImport;
+    };
+    '/_app/settings/downloader': {
+      id: '/_app/settings/downloader';
+      path: '/downloader';
+      fullPath: '/settings/downloader';
+      preLoaderRoute: typeof AppSettingsDownloaderImport;
+      parentRoute: typeof AppSettingsRouteImport;
+    };
+    '/_app/subscriptions/create': {
+      id: '/_app/subscriptions/create';
+      path: '/create';
+      fullPath: '/subscriptions/create';
+      preLoaderRoute: typeof AppSubscriptionsCreateImport;
+      parentRoute: typeof AppSubscriptionsRouteImport;
+    };
+    '/_app/subscriptions/manage': {
+      id: '/_app/subscriptions/manage';
+      path: '/manage';
+      fullPath: '/subscriptions/manage';
+      preLoaderRoute: typeof AppSubscriptionsManageImport;
+      parentRoute: typeof AppSubscriptionsRouteImport;
+    };
+    '/auth/oidc/callback': {
+      id: '/auth/oidc/callback';
+      path: '/auth/oidc/callback';
+      fullPath: '/auth/oidc/callback';
+      preLoaderRoute: typeof AuthOidcCallbackImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/_app/subscriptions/detail/$subscriptionId': {
+      id: '/_app/subscriptions/detail/$subscriptionId';
+      path: '/detail/$subscriptionId';
+      fullPath: '/subscriptions/detail/$subscriptionId';
+      preLoaderRoute: typeof AppSubscriptionsDetailSubscriptionIdImport;
+      parentRoute: typeof AppSubscriptionsRouteImport;
+    };
+    '/_app/subscriptions/edit/$subscriptionId': {
+      id: '/_app/subscriptions/edit/$subscriptionId';
+      path: '/edit/$subscriptionId';
+      fullPath: '/subscriptions/edit/$subscriptionId';
+      preLoaderRoute: typeof AppSubscriptionsEditSubscriptionIdImport;
+      parentRoute: typeof AppSubscriptionsRouteImport;
+    };
+  }
+}
+
+// Create and export the route tree
+
+interface AppBangumiRouteRouteChildren {
+  AppBangumiManageRoute: typeof AppBangumiManageRoute;
+}
+
+const AppBangumiRouteRouteChildren: AppBangumiRouteRouteChildren = {
+  AppBangumiManageRoute: AppBangumiManageRoute,
+};
+
+const AppBangumiRouteRouteWithChildren = AppBangumiRouteRoute._addFileChildren(
+  AppBangumiRouteRouteChildren
+);
+
+interface AppPlaygroundRouteRouteChildren {
+  AppPlaygroundGraphqlApiRoute: typeof AppPlaygroundGraphqlApiRoute;
+}
+
+const AppPlaygroundRouteRouteChildren: AppPlaygroundRouteRouteChildren = {
+  AppPlaygroundGraphqlApiRoute: AppPlaygroundGraphqlApiRoute,
+};
+
+const AppPlaygroundRouteRouteWithChildren =
+  AppPlaygroundRouteRoute._addFileChildren(AppPlaygroundRouteRouteChildren);
+
+interface AppSettingsRouteRouteChildren {
+  AppSettingsDownloaderRoute: typeof AppSettingsDownloaderRoute;
+}
+
+const AppSettingsRouteRouteChildren: AppSettingsRouteRouteChildren = {
+  AppSettingsDownloaderRoute: AppSettingsDownloaderRoute,
+};
+
+const AppSettingsRouteRouteWithChildren =
+  AppSettingsRouteRoute._addFileChildren(AppSettingsRouteRouteChildren);
+
+interface AppSubscriptionsRouteRouteChildren {
+  AppSubscriptionsCreateRoute: typeof AppSubscriptionsCreateRoute;
+  AppSubscriptionsManageRoute: typeof AppSubscriptionsManageRoute;
+  AppSubscriptionsDetailSubscriptionIdRoute: typeof AppSubscriptionsDetailSubscriptionIdRoute;
+  AppSubscriptionsEditSubscriptionIdRoute: typeof AppSubscriptionsEditSubscriptionIdRoute;
+}
+
+const AppSubscriptionsRouteRouteChildren: AppSubscriptionsRouteRouteChildren = {
+  AppSubscriptionsCreateRoute: AppSubscriptionsCreateRoute,
+  AppSubscriptionsManageRoute: AppSubscriptionsManageRoute,
+  AppSubscriptionsDetailSubscriptionIdRoute:
+    AppSubscriptionsDetailSubscriptionIdRoute,
+  AppSubscriptionsEditSubscriptionIdRoute:
+    AppSubscriptionsEditSubscriptionIdRoute,
+};
+
+const AppSubscriptionsRouteRouteWithChildren =
+  AppSubscriptionsRouteRoute._addFileChildren(
+    AppSubscriptionsRouteRouteChildren
+  );
+
+interface AppRouteRouteChildren {
+  AppBangumiRouteRoute: typeof AppBangumiRouteRouteWithChildren;
+  AppPlaygroundRouteRoute: typeof AppPlaygroundRouteRouteWithChildren;
+  AppSettingsRouteRoute: typeof AppSettingsRouteRouteWithChildren;
+  AppSubscriptionsRouteRoute: typeof AppSubscriptionsRouteRouteWithChildren;
+  AppExploreExploreRoute: typeof AppExploreExploreRoute;
+  AppExploreFeedRoute: typeof AppExploreFeedRoute;
+}
+
+const AppRouteRouteChildren: AppRouteRouteChildren = {
+  AppBangumiRouteRoute: AppBangumiRouteRouteWithChildren,
+  AppPlaygroundRouteRoute: AppPlaygroundRouteRouteWithChildren,
+  AppSettingsRouteRoute: AppSettingsRouteRouteWithChildren,
+  AppSubscriptionsRouteRoute: AppSubscriptionsRouteRouteWithChildren,
+  AppExploreExploreRoute: AppExploreExploreRoute,
+  AppExploreFeedRoute: AppExploreFeedRoute,
+};
+
+const AppRouteRouteWithChildren = AppRouteRoute._addFileChildren(
+  AppRouteRouteChildren
+);
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute;
+  '': typeof AppRouteRouteWithChildren;
+  '/404': typeof R404Route;
+  '/about': typeof AboutRoute;
+  '/bangumi': typeof AppBangumiRouteRouteWithChildren;
+  '/playground': typeof AppPlaygroundRouteRouteWithChildren;
+  '/settings': typeof AppSettingsRouteRouteWithChildren;
+  '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren;
+  '/auth/sign-in': typeof AuthSignInRoute;
+  '/auth/sign-up': typeof AuthSignUpRoute;
+  '/explore': typeof AppExploreExploreRoute;
+  '/feed': typeof AppExploreFeedRoute;
+  '/bangumi/manage': typeof AppBangumiManageRoute;
+  '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute;
+  '/settings/downloader': typeof AppSettingsDownloaderRoute;
+  '/subscriptions/create': typeof AppSubscriptionsCreateRoute;
+  '/subscriptions/manage': typeof AppSubscriptionsManageRoute;
+  '/auth/oidc/callback': typeof AuthOidcCallbackRoute;
+  '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute;
+  '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute;
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute;
+  '': typeof AppRouteRouteWithChildren;
+  '/404': typeof R404Route;
+  '/about': typeof AboutRoute;
+  '/bangumi': typeof AppBangumiRouteRouteWithChildren;
+  '/playground': typeof AppPlaygroundRouteRouteWithChildren;
+  '/settings': typeof AppSettingsRouteRouteWithChildren;
+  '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren;
+  '/auth/sign-in': typeof AuthSignInRoute;
+  '/auth/sign-up': typeof AuthSignUpRoute;
+  '/explore': typeof AppExploreExploreRoute;
+  '/feed': typeof AppExploreFeedRoute;
+  '/bangumi/manage': typeof AppBangumiManageRoute;
+  '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute;
+  '/settings/downloader': typeof AppSettingsDownloaderRoute;
+  '/subscriptions/create': typeof AppSubscriptionsCreateRoute;
+  '/subscriptions/manage': typeof AppSubscriptionsManageRoute;
+  '/auth/oidc/callback': typeof AuthOidcCallbackRoute;
+  '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute;
+  '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute;
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute;
+  '/': typeof IndexRoute;
+  '/_app': typeof AppRouteRouteWithChildren;
+  '/404': typeof R404Route;
+  '/about': typeof AboutRoute;
+  '/_app/bangumi': typeof AppBangumiRouteRouteWithChildren;
+  '/_app/playground': typeof AppPlaygroundRouteRouteWithChildren;
+  '/_app/settings': typeof AppSettingsRouteRouteWithChildren;
+  '/_app/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren;
+  '/auth/sign-in': typeof AuthSignInRoute;
+  '/auth/sign-up': typeof AuthSignUpRoute;
+  '/_app/_explore/explore': typeof AppExploreExploreRoute;
+  '/_app/_explore/feed': typeof AppExploreFeedRoute;
+  '/_app/bangumi/manage': typeof AppBangumiManageRoute;
+  '/_app/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute;
+  '/_app/settings/downloader': typeof AppSettingsDownloaderRoute;
+  '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute;
+  '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute;
+  '/auth/oidc/callback': typeof AuthOidcCallbackRoute;
+  '/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute;
+  '/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute;
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths:
+    | '/'
+    | ''
+    | '/404'
+    | '/about'
+    | '/bangumi'
+    | '/playground'
+    | '/settings'
+    | '/subscriptions'
+    | '/auth/sign-in'
+    | '/auth/sign-up'
+    | '/explore'
+    | '/feed'
+    | '/bangumi/manage'
+    | '/playground/graphql-api'
+    | '/settings/downloader'
+    | '/subscriptions/create'
+    | '/subscriptions/manage'
+    | '/auth/oidc/callback'
+    | '/subscriptions/detail/$subscriptionId'
+    | '/subscriptions/edit/$subscriptionId';
+  fileRoutesByTo: FileRoutesByTo;
+  to:
+    | '/'
+    | ''
+    | '/404'
+    | '/about'
+    | '/bangumi'
+    | '/playground'
+    | '/settings'
+    | '/subscriptions'
+    | '/auth/sign-in'
+    | '/auth/sign-up'
+    | '/explore'
+    | '/feed'
+    | '/bangumi/manage'
+    | '/playground/graphql-api'
+    | '/settings/downloader'
+    | '/subscriptions/create'
+    | '/subscriptions/manage'
+    | '/auth/oidc/callback'
+    | '/subscriptions/detail/$subscriptionId'
+    | '/subscriptions/edit/$subscriptionId';
+  id:
+    | '__root__'
+    | '/'
+    | '/_app'
+    | '/404'
+    | '/about'
+    | '/_app/bangumi'
+    | '/_app/playground'
+    | '/_app/settings'
+    | '/_app/subscriptions'
+    | '/auth/sign-in'
+    | '/auth/sign-up'
+    | '/_app/_explore/explore'
+    | '/_app/_explore/feed'
+    | '/_app/bangumi/manage'
+    | '/_app/playground/graphql-api'
+    | '/_app/settings/downloader'
+    | '/_app/subscriptions/create'
+    | '/_app/subscriptions/manage'
+    | '/auth/oidc/callback'
+    | '/_app/subscriptions/detail/$subscriptionId'
+    | '/_app/subscriptions/edit/$subscriptionId';
+  fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+  AppRouteRoute: typeof AppRouteRouteWithChildren;
+  R404Route: typeof R404Route;
+  AboutRoute: typeof AboutRoute;
+  AuthSignInRoute: typeof AuthSignInRoute;
+  AuthSignUpRoute: typeof AuthSignUpRoute;
+  AuthOidcCallbackRoute: typeof AuthOidcCallbackRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AppRouteRoute: AppRouteRouteWithChildren,
+  R404Route: R404Route,
+  AboutRoute: AboutRoute,
+  AuthSignInRoute: AuthSignInRoute,
+  AuthSignUpRoute: AuthSignUpRoute,
+  AuthOidcCallbackRoute: AuthOidcCallbackRoute,
+};
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/_app",
+        "/404",
+        "/about",
+        "/auth/sign-in",
+        "/auth/sign-up",
+        "/auth/oidc/callback"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/_app": {
+      "filePath": "_app/route.tsx",
+      "children": [
+        "/_app/bangumi",
+        "/_app/playground",
+        "/_app/settings",
+        "/_app/subscriptions",
+        "/_app/_explore/explore",
+        "/_app/_explore/feed"
+      ]
+    },
+    "/404": {
+      "filePath": "404.tsx"
+    },
+    "/about": {
+      "filePath": "about.tsx"
+    },
+    "/_app/bangumi": {
+      "filePath": "_app/bangumi/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/bangumi/manage"
+      ]
+    },
+    "/_app/playground": {
+      "filePath": "_app/playground/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/playground/graphql-api"
+      ]
+    },
+    "/_app/settings": {
+      "filePath": "_app/settings/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/settings/downloader"
+      ]
+    },
+    "/_app/subscriptions": {
+      "filePath": "_app/subscriptions/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/subscriptions/create",
+        "/_app/subscriptions/manage",
+        "/_app/subscriptions/detail/$subscriptionId",
+        "/_app/subscriptions/edit/$subscriptionId"
+      ]
+    },
+    "/auth/sign-in": {
+      "filePath": "auth/sign-in.tsx"
+    },
+    "/auth/sign-up": {
+      "filePath": "auth/sign-up.tsx"
+    },
+    "/_app/_explore/explore": {
+      "filePath": "_app/_explore/explore.tsx",
+      "parent": "/_app"
+    },
+    "/_app/_explore/feed": {
+      "filePath": "_app/_explore/feed.tsx",
+      "parent": "/_app"
+    },
+    "/_app/bangumi/manage": {
+      "filePath": "_app/bangumi/manage.tsx",
+      "parent": "/_app/bangumi"
+    },
+    "/_app/playground/graphql-api": {
+      "filePath": "_app/playground/graphql-api.tsx",
+      "parent": "/_app/playground"
+    },
+    "/_app/settings/downloader": {
+      "filePath": "_app/settings/downloader.tsx",
+      "parent": "/_app/settings"
+    },
+    "/_app/subscriptions/create": {
+      "filePath": "_app/subscriptions/create.tsx",
+      "parent": "/_app/subscriptions"
+    },
+    "/_app/subscriptions/manage": {
+      "filePath": "_app/subscriptions/manage.tsx",
+      "parent": "/_app/subscriptions"
+    },
+    "/auth/oidc/callback": {
+      "filePath": "auth/oidc/callback.tsx"
+    },
+    "/_app/subscriptions/detail/$subscriptionId": {
+      "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
+      "parent": "/_app/subscriptions"
+    },
+    "/_app/subscriptions/edit/$subscriptionId": {
+      "filePath": "_app/subscriptions/edit.$subscriptionId.tsx",
+      "parent": "/_app/subscriptions"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
diff --git a/apps/webui/src/views/routes/404.tsx b/apps/webui/src/presentation/routes/404.tsx
similarity index 64%
rename from apps/webui/src/views/routes/404.tsx
rename to apps/webui/src/presentation/routes/404.tsx
index 02c0c10..358686d 100644
--- a/apps/webui/src/views/routes/404.tsx
+++ b/apps/webui/src/presentation/routes/404.tsx
@@ -1,4 +1,4 @@
-import { AppNotFoundComponent } from '@/views/components/layout/app-not-found';
+import { AppNotFoundComponent } from '@/components/layout/app-not-found';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/404')({
diff --git a/apps/webui/src/views/routes/__root.tsx b/apps/webui/src/presentation/routes/__root.tsx
similarity index 60%
rename from apps/webui/src/views/routes/__root.tsx
rename to apps/webui/src/presentation/routes/__root.tsx
index dd2b55d..af0cc6f 100644
--- a/apps/webui/src/views/routes/__root.tsx
+++ b/apps/webui/src/presentation/routes/__root.tsx
@@ -4,9 +4,20 @@ import type {
 } from '@/infra/routes/traits';
 import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
 import { Home } from 'lucide-react';
+import { memo } from 'react';
+import { Toaster } from 'sonner';
+
+export const RootRouteComponent = memo(() => {
+  return (
+    <>
+      <Outlet />
+      <Toaster position="top-right" />
+    </>
+  );
+});
 
 export const Route = createRootRouteWithContext<RouterContext>()({
-  component: Outlet,
+  component: RootRouteComponent,
   staticData: {
     breadcrumb: {
       icon: Home,
diff --git a/apps/webui/src/views/routes/_app/_explore/explore.tsx b/apps/webui/src/presentation/routes/_app/_explore/explore.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/_explore/explore.tsx
rename to apps/webui/src/presentation/routes/_app/_explore/explore.tsx
diff --git a/apps/webui/src/views/routes/_app/_explore/feed.tsx b/apps/webui/src/presentation/routes/_app/_explore/feed.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/_explore/feed.tsx
rename to apps/webui/src/presentation/routes/_app/_explore/feed.tsx
diff --git a/apps/webui/src/presentation/routes/_app/bangumi/-defs.ts b/apps/webui/src/presentation/routes/_app/bangumi/-defs.ts
new file mode 100644
index 0000000..e69de29
diff --git a/apps/webui/src/presentation/routes/_app/bangumi/manage.tsx b/apps/webui/src/presentation/routes/_app/bangumi/manage.tsx
new file mode 100644
index 0000000..2781942
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/bangumi/manage.tsx
@@ -0,0 +1,13 @@
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/bangumi/manage')({
+  component: BangumiManageRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Manage' },
+  } satisfies RouteStateDataOption,
+});
+
+function BangumiManageRouteComponent() {
+  return <div>Hello "/_app/bangumi/manage"!</div>;
+}
diff --git a/apps/webui/src/presentation/routes/_app/bangumi/route.tsx b/apps/webui/src/presentation/routes/_app/bangumi/route.tsx
new file mode 100644
index 0000000..e221711
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/bangumi/route.tsx
@@ -0,0 +1,8 @@
+import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/bangumi')(
+  buildVirtualBranchRouteOptions({
+    title: 'Bangumi',
+  })
+);
diff --git a/apps/webui/src/views/routes/_app/playground/graphql-api.lazy.tsx b/apps/webui/src/presentation/routes/_app/playground/graphql-api.lazy.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/playground/graphql-api.lazy.tsx
rename to apps/webui/src/presentation/routes/_app/playground/graphql-api.lazy.tsx
diff --git a/apps/webui/src/views/routes/_app/playground/graphql-api.tsx b/apps/webui/src/presentation/routes/_app/playground/graphql-api.tsx
similarity index 80%
rename from apps/webui/src/views/routes/_app/playground/graphql-api.tsx
rename to apps/webui/src/presentation/routes/_app/playground/graphql-api.tsx
index 8f1ae06..7c86d46 100644
--- a/apps/webui/src/views/routes/_app/playground/graphql-api.tsx
+++ b/apps/webui/src/presentation/routes/_app/playground/graphql-api.tsx
@@ -1,5 +1,5 @@
+import { AppSkeleton } from '@/components/layout/app-skeleton';
 import { buildLeafRouteStaticData } from '@/infra/routes/utils';
-import { AppSkeleton } from '@/views/components/layout/app-skeleton';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/playground/graphql-api')({
diff --git a/apps/webui/src/views/routes/_app/playground/route.tsx b/apps/webui/src/presentation/routes/_app/playground/route.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/playground/route.tsx
rename to apps/webui/src/presentation/routes/_app/playground/route.tsx
diff --git a/apps/webui/src/views/routes/_app/route.tsx b/apps/webui/src/presentation/routes/_app/route.tsx
similarity index 84%
rename from apps/webui/src/views/routes/_app/route.tsx
rename to apps/webui/src/presentation/routes/_app/route.tsx
index 79586c3..b2fca2f 100644
--- a/apps/webui/src/views/routes/_app/route.tsx
+++ b/apps/webui/src/presentation/routes/_app/route.tsx
@@ -1,5 +1,5 @@
 import { beforeLoadGuard } from '@/app/auth/guard';
-import { AppAside } from '@/views/components/layout/app-layout';
+import { AppAside } from '@/components/layout/app-layout';
 import { Outlet, createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app')({
diff --git a/apps/webui/src/views/routes/_app/settings/downloader.tsx b/apps/webui/src/presentation/routes/_app/settings/downloader.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/settings/downloader.tsx
rename to apps/webui/src/presentation/routes/_app/settings/downloader.tsx
diff --git a/apps/webui/src/views/routes/_app/settings/route.tsx b/apps/webui/src/presentation/routes/_app/settings/route.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/settings/route.tsx
rename to apps/webui/src/presentation/routes/_app/settings/route.tsx
diff --git a/apps/webui/src/presentation/routes/_app/subscriptions/-defs.ts b/apps/webui/src/presentation/routes/_app/subscriptions/-defs.ts
new file mode 100644
index 0000000..028981e
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/subscriptions/-defs.ts
@@ -0,0 +1,108 @@
+import { gql } from '@apollo/client';
+
+import type {
+  GetSubscriptionDetailQuery,
+  GetSubscriptionsQuery,
+} from '@/infra/graphql/gql/graphql';
+
+export const GET_SUBSCRIPTIONS = gql`
+  query GetSubscriptions(
+  $page: PageInput!,
+  $filters: SubscriptionsFilterInput!,
+  $orderBy: SubscriptionsOrderInput!
+) {
+    subscriptions(
+      pagination: {
+        page: $page
+      }
+      filters: $filters
+      orderBy: $orderBy
+    ) {
+      nodes {
+        id
+        createdAt
+        updatedAt
+        displayName
+        category
+        sourceUrl
+        enabled
+      }
+      paginationInfo {
+        total
+        pages
+      }
+    }
+  }
+`;
+
+export type SubscriptionDto =
+  GetSubscriptionsQuery['subscriptions']['nodes'][number];
+
+export const UPDATE_SUBSCRIPTIONS = gql`
+    mutation UpdateSubscriptions(
+    $data: SubscriptionsUpdateInput!,
+    $filters: SubscriptionsFilterInput!,
+    ) {
+    subscriptionsUpdate (
+        data: $data
+        filter: $filters
+    ) {
+        id
+        createdAt
+        updatedAt
+        displayName
+        category
+        sourceUrl
+        enabled
+    }
+}
+`;
+
+export const DELETE_SUBSCRIPTIONS = gql`
+    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {
+        subscriptionsDelete(filter: $filters)
+    }
+`;
+
+export const GET_SUBSCRIPTION_DETAIL = gql`
+query GetSubscriptionDetail ($id: Int!) {
+  subscriptions(filters: { id: {
+    eq: $id
+  } }) {
+    nodes {
+      id
+      displayName
+      createdAt
+      updatedAt
+      category
+      sourceUrl
+      enabled
+      bangumi {
+        nodes {
+          createdAt
+          updatedAt
+          id
+          mikanBangumiId
+          displayName
+          rawName
+          season
+          seasonRaw
+          fansub
+          mikanFansubId
+          rssLink
+          posterLink
+          savePath
+          deleted
+          homepage
+        }
+      }
+    }
+  }
+}
+`;
+
+export type SubscriptionDetailDto =
+  GetSubscriptionDetailQuery['subscriptions']['nodes'][number];
+
+export type SubscriptionDetailBangumiDto =
+  SubscriptionDetailDto['bangumi']['nodes'][number];
diff --git a/apps/webui/src/views/routes/_app/subscriptions/create.tsx b/apps/webui/src/presentation/routes/_app/subscriptions/create.tsx
similarity index 96%
rename from apps/webui/src/views/routes/_app/subscriptions/create.tsx
rename to apps/webui/src/presentation/routes/_app/subscriptions/create.tsx
index 07c0d31..5adb42e 100644
--- a/apps/webui/src/views/routes/_app/subscriptions/create.tsx
+++ b/apps/webui/src/presentation/routes/_app/subscriptions/create.tsx
@@ -1,6 +1,5 @@
 import { useAuth } from '@/app/auth/hooks';
-import type { RouteStateDataOption } from '@/infra/routes/traits';
-import { Button } from '@/views/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -8,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/views/components/ui/card';
+} from '@/components/ui/card';
 import {
   Form,
   FormControl,
@@ -17,16 +16,17 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/views/components/ui/form';
-import { Input } from '@/views/components/ui/input';
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/views/components/ui/select';
-import { Switch } from '@/views/components/ui/switch';
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { gql, useMutation } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 import { useNavigate } from '@tanstack/react-router';
diff --git a/apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx b/apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx
new file mode 100644
index 0000000..ca3968c
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx
@@ -0,0 +1,38 @@
+import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
+import { useQuery } from '@apollo/client';
+import { createFileRoute } from '@tanstack/react-router';
+import { GET_SUBSCRIPTION_DETAIL } from './-defs.ts';
+
+export const Route = createFileRoute(
+  '/_app/subscriptions/detail/$subscriptionId'
+)({
+  component: DetailRouteComponent,
+});
+
+function DetailRouteComponent() {
+  const { subscriptionId } = Route.useParams();
+  const { data, loading, error } = useQuery<GetSubscriptionDetailQuery>(
+    GET_SUBSCRIPTION_DETAIL,
+    {
+      variables: {
+        id: Number.parseInt(subscriptionId),
+      },
+    }
+  );
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const detail = data?.subscriptions?.nodes?.[0];
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(detail, null, 2) }}
+    />
+  );
+}
diff --git a/apps/webui/src/views/routes/_app/subscriptions/edit.$subscription-id.tsx b/apps/webui/src/presentation/routes/_app/subscriptions/edit.$subscriptionId.tsx
similarity index 89%
rename from apps/webui/src/views/routes/_app/subscriptions/edit.$subscription-id.tsx
rename to apps/webui/src/presentation/routes/_app/subscriptions/edit.$subscriptionId.tsx
index 94a0d03..b9f5377 100644
--- a/apps/webui/src/views/routes/_app/subscriptions/edit.$subscription-id.tsx
+++ b/apps/webui/src/presentation/routes/_app/subscriptions/edit.$subscriptionId.tsx
@@ -2,7 +2,7 @@ import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/subscriptions/edit/$subscription-id'
+  '/_app/subscriptions/edit/$subscriptionId'
 )({
   component: RouteComponent,
   staticData: {
diff --git a/apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx b/apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx
new file mode 100644
index 0000000..131f0ab
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx
@@ -0,0 +1,289 @@
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
+import { QueryErrorView } from '@/components/ui/query-error-view.tsx';
+import { Skeleton } from '@/components/ui/skeleton.tsx';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type {
+  GetSubscriptionsQuery,
+  SubscriptionsUpdateInput,
+} from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton.ts';
+import { useEvent } from '@/presentation/hooks/use-event.ts';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
+import {
+  type ColumnDef,
+  type PaginationState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { DataTableRowActions } from '../../../../components/ui/data-table-row-actions.tsx';
+import {
+  DELETE_SUBSCRIPTIONS,
+  GET_SUBSCRIPTIONS,
+  type SubscriptionDto,
+  UPDATE_SUBSCRIPTIONS,
+} from './-defs.ts';
+
+export const Route = createFileRoute('/_app/subscriptions/manage')({
+  component: SubscriptionManageRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Manage' },
+  } satisfies RouteStateDataOption,
+});
+
+function SubscriptionManageRouteComponent() {
+  const navigate = useNavigate();
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const { loading, error, data, refetch } = useQuery<GetSubscriptionsQuery>(
+    GET_SUBSCRIPTIONS,
+    {
+      variables: {
+        page: {
+          page: pagination.pageIndex,
+          limit: pagination.pageSize,
+        },
+        filters: {},
+        orderBy: {},
+      },
+      refetchWritePolicy: 'overwrite',
+      nextFetchPolicy: 'network-only',
+    }
+  );
+  const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS);
+  const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS);
+  const { showSkeleton } = useDebouncedSkeleton({ loading });
+
+  const subscriptions = data?.subscriptions;
+
+  const handleUpdateRecord = useEvent(
+    (row: Row<SubscriptionDto>) => async (data: SubscriptionsUpdateInput) => {
+      const result = await updateSubscription({
+        variables: {
+          data,
+          filters: {
+            id: {
+              eq: row.original.id,
+            },
+          },
+        },
+      });
+      if (result.errors) {
+        toast.error(result.errors[0].message);
+        return;
+      }
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription updated');
+    }
+  );
+
+  const handleDeleteRecord = useEvent(
+    (row: Row<SubscriptionDto>) => async () => {
+      const result = await deleteSubscription({
+        variables: { filters: { id: { eq: row.original.id } } },
+      });
+      if (result.errors) {
+        toast.error(result.errors[0].message);
+        return;
+      }
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription deleted');
+    }
+  );
+
+  const columns = useMemo(() => {
+    const cs: ColumnDef<SubscriptionDto>[] = [
+      {
+        header: 'Enabled',
+        accessorKey: 'enabled',
+        cell: ({ row }) => {
+          const enabled = row.original.enabled;
+          return (
+            <div className="px-1">
+              <Switch
+                checked={enabled}
+                onCheckedChange={(enabled) =>
+                  handleUpdateRecord(row)({ enabled: enabled })
+                }
+              />
+            </div>
+          );
+        },
+        enableResizing: true,
+      },
+      {
+        header: 'Name',
+        accessorKey: 'displayName',
+        cell: ({ row }) => {
+          const displayName = row.original.displayName;
+          return (
+            <div className="whitespace-normal break-words">{displayName}</div>
+          );
+        },
+      },
+      {
+        header: 'Category',
+        accessorKey: 'category',
+      },
+      {
+        header: 'Source URL',
+        accessorKey: 'sourceUrl',
+        cell: ({ row }) => {
+          const sourceUrl = row.original.sourceUrl;
+          return (
+            <div className="whitespace-normal break-words">{sourceUrl}</div>
+          );
+        },
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          <DataTableRowActions
+            row={row}
+            getId={(row) => row.original.id}
+            showDetail
+            showEdit
+            showDelete
+            onDetail={() => {
+              navigate({
+                to: '/subscriptions/detail/$subscriptionId',
+                params: { subscriptionId: `${row.original.id}` },
+              });
+            }}
+            onEdit={() => {
+              navigate({
+                to: '/subscriptions/edit/$subscriptionId',
+                params: { subscriptionId: `${row.original.id}` },
+              });
+            }}
+            onDelete={handleDeleteRecord(row)}
+          />
+        ),
+      },
+    ];
+    return cs;
+  }, [handleUpdateRecord, handleDeleteRecord, navigate]);
+
+  const table = useReactTable({
+    data: data?.subscriptions?.nodes ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    pageCount: subscriptions?.paginationInfo?.pages,
+    rowCount: subscriptions?.paginationInfo?.total,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+    },
+  });
+
+  if (error) {
+    return <QueryErrorView message={error.message} onRetry={refetch} />;
+  }
+
+  return (
+    <div className="container mx-auto space-y-4 rounded-md">
+      <div className="flex items-center py-4">
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {showSkeleton &&
+              Array.from(new Array(pagination.pageSize)).map((_, index) => (
+                <TableRow key={index}>
+                  {table.getVisibleLeafColumns().map((column) => (
+                    <TableCell key={column.id}>
+                      <Skeleton className="h-8" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {!showSkeleton &&
+              (table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} showSelectedRowCount={false} />
+    </div>
+  );
+}
diff --git a/apps/webui/src/views/routes/_app/subscriptions/route.tsx b/apps/webui/src/presentation/routes/_app/subscriptions/route.tsx
similarity index 100%
rename from apps/webui/src/views/routes/_app/subscriptions/route.tsx
rename to apps/webui/src/presentation/routes/_app/subscriptions/route.tsx
diff --git a/apps/webui/src/views/routes/about.tsx b/apps/webui/src/presentation/routes/about.tsx
similarity index 100%
rename from apps/webui/src/views/routes/about.tsx
rename to apps/webui/src/presentation/routes/about.tsx
diff --git a/apps/webui/src/views/routes/auth/oidc/callback.tsx b/apps/webui/src/presentation/routes/auth/oidc/callback.tsx
similarity index 96%
rename from apps/webui/src/views/routes/auth/oidc/callback.tsx
rename to apps/webui/src/presentation/routes/auth/oidc/callback.tsx
index ab6fbbe..54c70cd 100644
--- a/apps/webui/src/views/routes/auth/oidc/callback.tsx
+++ b/apps/webui/src/presentation/routes/auth/oidc/callback.tsx
@@ -1,8 +1,8 @@
 import { authContextFromInjector } from '@/app/auth/context';
 import { useAuth } from '@/app/auth/hooks';
+import { ProLink } from '@/components/ui/pro-link';
+import { Spinner } from '@/components/ui/spinner';
 import { AUTH_METHOD } from '@/infra/auth/defs';
-import { ProLink } from '@/views/components/ui/pro-link';
-import { Spinner } from '@/views/components/ui/spinner';
 import { createFileRoute, redirect } from '@tanstack/react-router';
 import { useAtom } from 'jotai/react';
 import { atomWithObservable } from 'jotai/utils';
diff --git a/apps/webui/src/views/routes/auth/sign-in.tsx b/apps/webui/src/presentation/routes/auth/sign-in.tsx
similarity index 100%
rename from apps/webui/src/views/routes/auth/sign-in.tsx
rename to apps/webui/src/presentation/routes/auth/sign-in.tsx
diff --git a/apps/webui/src/views/routes/auth/sign-up.tsx b/apps/webui/src/presentation/routes/auth/sign-up.tsx
similarity index 100%
rename from apps/webui/src/views/routes/auth/sign-up.tsx
rename to apps/webui/src/presentation/routes/auth/sign-up.tsx
diff --git a/apps/webui/src/views/routes/index.tsx b/apps/webui/src/presentation/routes/index.tsx
similarity index 66%
rename from apps/webui/src/views/routes/index.tsx
rename to apps/webui/src/presentation/routes/index.tsx
index aa7c242..8041bb9 100644
--- a/apps/webui/src/views/routes/index.tsx
+++ b/apps/webui/src/presentation/routes/index.tsx
@@ -1,5 +1,5 @@
-import { AppAside } from '@/views/components/layout/app-layout';
-import { AppSkeleton } from '@/views/components/layout/app-skeleton';
+import { AppAside } from '@/components/layout/app-layout';
+import { AppSkeleton } from '@/components/layout/app-skeleton';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/')({
diff --git a/apps/webui/src/views/routeTree.gen.ts b/apps/webui/src/presentation/routes/routeTree.gen.ts
similarity index 70%
rename from apps/webui/src/views/routeTree.gen.ts
rename to apps/webui/src/presentation/routes/routeTree.gen.ts
index 3ce3993..71bfb82 100644
--- a/apps/webui/src/views/routeTree.gen.ts
+++ b/apps/webui/src/presentation/routes/routeTree.gen.ts
@@ -10,24 +10,28 @@
 
 // Import Routes
 
-import { Route as rootRoute } from './routes/__root'
-import { Route as AboutImport } from './routes/about'
-import { Route as R404Import } from './routes/404'
-import { Route as AppRouteImport } from './routes/_app/route'
-import { Route as IndexImport } from './routes/index'
-import { Route as AuthSignUpImport } from './routes/auth/sign-up'
-import { Route as AuthSignInImport } from './routes/auth/sign-in'
-import { Route as AppSubscriptionsRouteImport } from './routes/_app/subscriptions/route'
-import { Route as AppSettingsRouteImport } from './routes/_app/settings/route'
-import { Route as AppPlaygroundRouteImport } from './routes/_app/playground/route'
-import { Route as AuthOidcCallbackImport } from './routes/auth/oidc/callback'
-import { Route as AppSubscriptionsManageImport } from './routes/_app/subscriptions/manage'
-import { Route as AppSubscriptionsCreateImport } from './routes/_app/subscriptions/create'
-import { Route as AppSettingsDownloaderImport } from './routes/_app/settings/downloader'
-import { Route as AppPlaygroundGraphqlApiImport } from './routes/_app/playground/graphql-api'
-import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
-import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
-import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscription-id'
+import { Route as rootRoute } from './__root'
+import { Route as AboutImport } from './about'
+import { Route as R404Import } from './404'
+import { Route as AppRouteImport } from './_app/route'
+import { Route as IndexImport } from './index'
+import { Route as RouteTreeGenImport } from './routeTree.gen'
+import { Route as AuthSignUpImport } from './auth/sign-up'
+import { Route as AuthSignInImport } from './auth/sign-in'
+import { Route as AppSubscriptionsRouteImport } from './_app/subscriptions/route'
+import { Route as AppSettingsRouteImport } from './_app/settings/route'
+import { Route as AppPlaygroundRouteImport } from './_app/playground/route'
+import { Route as AppBangumiRouteImport } from './_app/bangumi/route'
+import { Route as AuthOidcCallbackImport } from './auth/oidc/callback'
+import { Route as AppSubscriptionsManageImport } from './_app/subscriptions/manage'
+import { Route as AppSubscriptionsCreateImport } from './_app/subscriptions/create'
+import { Route as AppSettingsDownloaderImport } from './_app/settings/downloader'
+import { Route as AppPlaygroundGraphqlApiImport } from './_app/playground/graphql-api'
+import { Route as AppBangumiManageImport } from './_app/bangumi/manage'
+import { Route as AppExploreFeedImport } from './_app/_explore/feed'
+import { Route as AppExploreExploreImport } from './_app/_explore/explore'
+import { Route as AppSubscriptionsEditSubscriptionIdImport } from './_app/subscriptions/edit.$subscriptionId'
+import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './_app/subscriptions/detail.$subscriptionId'
 
 // Create/Update Routes
 
@@ -54,6 +58,12 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const RouteTreeGenRoute = RouteTreeGenImport.update({
+  id: '/routeTree/gen',
+  path: '/routeTree/gen',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const AuthSignUpRoute = AuthSignUpImport.update({
   id: '/auth/sign-up',
   path: '/auth/sign-up',
@@ -84,6 +94,12 @@ const AppPlaygroundRouteRoute = AppPlaygroundRouteImport.update({
   getParentRoute: () => AppRouteRoute,
 } as any)
 
+const AppBangumiRouteRoute = AppBangumiRouteImport.update({
+  id: '/bangumi',
+  path: '/bangumi',
+  getParentRoute: () => AppRouteRoute,
+} as any)
+
 const AuthOidcCallbackRoute = AuthOidcCallbackImport.update({
   id: '/auth/oidc/callback',
   path: '/auth/oidc/callback',
@@ -113,9 +129,15 @@ const AppPlaygroundGraphqlApiRoute = AppPlaygroundGraphqlApiImport.update({
   path: '/graphql-api',
   getParentRoute: () => AppPlaygroundRouteRoute,
 } as any).lazy(() =>
-  import('./routes/_app/playground/graphql-api.lazy').then((d) => d.Route),
+  import('./_app/playground/graphql-api.lazy').then((d) => d.Route),
 )
 
+const AppBangumiManageRoute = AppBangumiManageImport.update({
+  id: '/manage',
+  path: '/manage',
+  getParentRoute: () => AppBangumiRouteRoute,
+} as any)
+
 const AppExploreFeedRoute = AppExploreFeedImport.update({
   id: '/_explore/feed',
   path: '/feed',
@@ -130,8 +152,15 @@ const AppExploreExploreRoute = AppExploreExploreImport.update({
 
 const AppSubscriptionsEditSubscriptionIdRoute =
   AppSubscriptionsEditSubscriptionIdImport.update({
-    id: '/edit/$subscription-id',
-    path: '/edit/$subscription-id',
+    id: '/edit/$subscriptionId',
+    path: '/edit/$subscriptionId',
+    getParentRoute: () => AppSubscriptionsRouteRoute,
+  } as any)
+
+const AppSubscriptionsDetailSubscriptionIdRoute =
+  AppSubscriptionsDetailSubscriptionIdImport.update({
+    id: '/detail/$subscriptionId',
+    path: '/detail/$subscriptionId',
     getParentRoute: () => AppSubscriptionsRouteRoute,
   } as any)
 
@@ -167,6 +196,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AboutImport
       parentRoute: typeof rootRoute
     }
+    '/_app/bangumi': {
+      id: '/_app/bangumi'
+      path: '/bangumi'
+      fullPath: '/bangumi'
+      preLoaderRoute: typeof AppBangumiRouteImport
+      parentRoute: typeof AppRouteImport
+    }
     '/_app/playground': {
       id: '/_app/playground'
       path: '/playground'
@@ -202,6 +238,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthSignUpImport
       parentRoute: typeof rootRoute
     }
+    '/routeTree/gen': {
+      id: '/routeTree/gen'
+      path: '/routeTree/gen'
+      fullPath: '/routeTree/gen'
+      preLoaderRoute: typeof RouteTreeGenImport
+      parentRoute: typeof rootRoute
+    }
     '/_app/_explore/explore': {
       id: '/_app/_explore/explore'
       path: '/explore'
@@ -216,6 +259,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppExploreFeedImport
       parentRoute: typeof AppRouteImport
     }
+    '/_app/bangumi/manage': {
+      id: '/_app/bangumi/manage'
+      path: '/manage'
+      fullPath: '/bangumi/manage'
+      preLoaderRoute: typeof AppBangumiManageImport
+      parentRoute: typeof AppBangumiRouteImport
+    }
     '/_app/playground/graphql-api': {
       id: '/_app/playground/graphql-api'
       path: '/graphql-api'
@@ -251,10 +301,17 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthOidcCallbackImport
       parentRoute: typeof rootRoute
     }
-    '/_app/subscriptions/edit/$subscription-id': {
-      id: '/_app/subscriptions/edit/$subscription-id'
-      path: '/edit/$subscription-id'
-      fullPath: '/subscriptions/edit/$subscription-id'
+    '/_app/subscriptions/detail/$subscriptionId': {
+      id: '/_app/subscriptions/detail/$subscriptionId'
+      path: '/detail/$subscriptionId'
+      fullPath: '/subscriptions/detail/$subscriptionId'
+      preLoaderRoute: typeof AppSubscriptionsDetailSubscriptionIdImport
+      parentRoute: typeof AppSubscriptionsRouteImport
+    }
+    '/_app/subscriptions/edit/$subscriptionId': {
+      id: '/_app/subscriptions/edit/$subscriptionId'
+      path: '/edit/$subscriptionId'
+      fullPath: '/subscriptions/edit/$subscriptionId'
       preLoaderRoute: typeof AppSubscriptionsEditSubscriptionIdImport
       parentRoute: typeof AppSubscriptionsRouteImport
     }
@@ -263,6 +320,18 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
+interface AppBangumiRouteRouteChildren {
+  AppBangumiManageRoute: typeof AppBangumiManageRoute
+}
+
+const AppBangumiRouteRouteChildren: AppBangumiRouteRouteChildren = {
+  AppBangumiManageRoute: AppBangumiManageRoute,
+}
+
+const AppBangumiRouteRouteWithChildren = AppBangumiRouteRoute._addFileChildren(
+  AppBangumiRouteRouteChildren,
+)
+
 interface AppPlaygroundRouteRouteChildren {
   AppPlaygroundGraphqlApiRoute: typeof AppPlaygroundGraphqlApiRoute
 }
@@ -288,12 +357,15 @@ const AppSettingsRouteRouteWithChildren =
 interface AppSubscriptionsRouteRouteChildren {
   AppSubscriptionsCreateRoute: typeof AppSubscriptionsCreateRoute
   AppSubscriptionsManageRoute: typeof AppSubscriptionsManageRoute
+  AppSubscriptionsDetailSubscriptionIdRoute: typeof AppSubscriptionsDetailSubscriptionIdRoute
   AppSubscriptionsEditSubscriptionIdRoute: typeof AppSubscriptionsEditSubscriptionIdRoute
 }
 
 const AppSubscriptionsRouteRouteChildren: AppSubscriptionsRouteRouteChildren = {
   AppSubscriptionsCreateRoute: AppSubscriptionsCreateRoute,
   AppSubscriptionsManageRoute: AppSubscriptionsManageRoute,
+  AppSubscriptionsDetailSubscriptionIdRoute:
+    AppSubscriptionsDetailSubscriptionIdRoute,
   AppSubscriptionsEditSubscriptionIdRoute:
     AppSubscriptionsEditSubscriptionIdRoute,
 }
@@ -304,6 +376,7 @@ const AppSubscriptionsRouteRouteWithChildren =
   )
 
 interface AppRouteRouteChildren {
+  AppBangumiRouteRoute: typeof AppBangumiRouteRouteWithChildren
   AppPlaygroundRouteRoute: typeof AppPlaygroundRouteRouteWithChildren
   AppSettingsRouteRoute: typeof AppSettingsRouteRouteWithChildren
   AppSubscriptionsRouteRoute: typeof AppSubscriptionsRouteRouteWithChildren
@@ -312,6 +385,7 @@ interface AppRouteRouteChildren {
 }
 
 const AppRouteRouteChildren: AppRouteRouteChildren = {
+  AppBangumiRouteRoute: AppBangumiRouteRouteWithChildren,
   AppPlaygroundRouteRoute: AppPlaygroundRouteRouteWithChildren,
   AppSettingsRouteRoute: AppSettingsRouteRouteWithChildren,
   AppSubscriptionsRouteRoute: AppSubscriptionsRouteRouteWithChildren,
@@ -328,19 +402,23 @@ export interface FileRoutesByFullPath {
   '': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
   '/about': typeof AboutRoute
+  '/bangumi': typeof AppBangumiRouteRouteWithChildren
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/routeTree/gen': typeof RouteTreeGenRoute
   '/explore': typeof AppExploreExploreRoute
   '/feed': typeof AppExploreFeedRoute
+  '/bangumi/manage': typeof AppBangumiManageRoute
   '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
   '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
-  '/subscriptions/edit/$subscription-id': typeof AppSubscriptionsEditSubscriptionIdRoute
+  '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
+  '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
 
 export interface FileRoutesByTo {
@@ -348,19 +426,23 @@ export interface FileRoutesByTo {
   '': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
   '/about': typeof AboutRoute
+  '/bangumi': typeof AppBangumiRouteRouteWithChildren
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/routeTree/gen': typeof RouteTreeGenRoute
   '/explore': typeof AppExploreExploreRoute
   '/feed': typeof AppExploreFeedRoute
+  '/bangumi/manage': typeof AppBangumiManageRoute
   '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
   '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
-  '/subscriptions/edit/$subscription-id': typeof AppSubscriptionsEditSubscriptionIdRoute
+  '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
+  '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
 
 export interface FileRoutesById {
@@ -369,19 +451,23 @@ export interface FileRoutesById {
   '/_app': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
   '/about': typeof AboutRoute
+  '/_app/bangumi': typeof AppBangumiRouteRouteWithChildren
   '/_app/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/_app/settings': typeof AppSettingsRouteRouteWithChildren
   '/_app/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/routeTree/gen': typeof RouteTreeGenRoute
   '/_app/_explore/explore': typeof AppExploreExploreRoute
   '/_app/_explore/feed': typeof AppExploreFeedRoute
+  '/_app/bangumi/manage': typeof AppBangumiManageRoute
   '/_app/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
   '/_app/settings/downloader': typeof AppSettingsDownloaderRoute
   '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
-  '/_app/subscriptions/edit/$subscription-id': typeof AppSubscriptionsEditSubscriptionIdRoute
+  '/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
+  '/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
 
 export interface FileRouteTypes {
@@ -391,57 +477,69 @@ export interface FileRouteTypes {
     | ''
     | '/404'
     | '/about'
+    | '/bangumi'
     | '/playground'
     | '/settings'
     | '/subscriptions'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/routeTree/gen'
     | '/explore'
     | '/feed'
+    | '/bangumi/manage'
     | '/playground/graphql-api'
     | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
-    | '/subscriptions/edit/$subscription-id'
+    | '/subscriptions/detail/$subscriptionId'
+    | '/subscriptions/edit/$subscriptionId'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | ''
     | '/404'
     | '/about'
+    | '/bangumi'
     | '/playground'
     | '/settings'
     | '/subscriptions'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/routeTree/gen'
     | '/explore'
     | '/feed'
+    | '/bangumi/manage'
     | '/playground/graphql-api'
     | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
-    | '/subscriptions/edit/$subscription-id'
+    | '/subscriptions/detail/$subscriptionId'
+    | '/subscriptions/edit/$subscriptionId'
   id:
     | '__root__'
     | '/'
     | '/_app'
     | '/404'
     | '/about'
+    | '/_app/bangumi'
     | '/_app/playground'
     | '/_app/settings'
     | '/_app/subscriptions'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/routeTree/gen'
     | '/_app/_explore/explore'
     | '/_app/_explore/feed'
+    | '/_app/bangumi/manage'
     | '/_app/playground/graphql-api'
     | '/_app/settings/downloader'
     | '/_app/subscriptions/create'
     | '/_app/subscriptions/manage'
     | '/auth/oidc/callback'
-    | '/_app/subscriptions/edit/$subscription-id'
+    | '/_app/subscriptions/detail/$subscriptionId'
+    | '/_app/subscriptions/edit/$subscriptionId'
   fileRoutesById: FileRoutesById
 }
 
@@ -452,6 +550,7 @@ export interface RootRouteChildren {
   AboutRoute: typeof AboutRoute
   AuthSignInRoute: typeof AuthSignInRoute
   AuthSignUpRoute: typeof AuthSignUpRoute
+  RouteTreeGenRoute: typeof RouteTreeGenRoute
   AuthOidcCallbackRoute: typeof AuthOidcCallbackRoute
 }
 
@@ -462,6 +561,7 @@ const rootRouteChildren: RootRouteChildren = {
   AboutRoute: AboutRoute,
   AuthSignInRoute: AuthSignInRoute,
   AuthSignUpRoute: AuthSignUpRoute,
+  RouteTreeGenRoute: RouteTreeGenRoute,
   AuthOidcCallbackRoute: AuthOidcCallbackRoute,
 }
 
@@ -481,6 +581,7 @@ export const routeTree = rootRoute
         "/about",
         "/auth/sign-in",
         "/auth/sign-up",
+        "/routeTree/gen",
         "/auth/oidc/callback"
       ]
     },
@@ -490,6 +591,7 @@ export const routeTree = rootRoute
     "/_app": {
       "filePath": "_app/route.tsx",
       "children": [
+        "/_app/bangumi",
         "/_app/playground",
         "/_app/settings",
         "/_app/subscriptions",
@@ -503,6 +605,13 @@ export const routeTree = rootRoute
     "/about": {
       "filePath": "about.tsx"
     },
+    "/_app/bangumi": {
+      "filePath": "_app/bangumi/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/bangumi/manage"
+      ]
+    },
     "/_app/playground": {
       "filePath": "_app/playground/route.tsx",
       "parent": "/_app",
@@ -523,7 +632,8 @@ export const routeTree = rootRoute
       "children": [
         "/_app/subscriptions/create",
         "/_app/subscriptions/manage",
-        "/_app/subscriptions/edit/$subscription-id"
+        "/_app/subscriptions/detail/$subscriptionId",
+        "/_app/subscriptions/edit/$subscriptionId"
       ]
     },
     "/auth/sign-in": {
@@ -532,6 +642,9 @@ export const routeTree = rootRoute
     "/auth/sign-up": {
       "filePath": "auth/sign-up.tsx"
     },
+    "/routeTree/gen": {
+      "filePath": "routeTree.gen.ts"
+    },
     "/_app/_explore/explore": {
       "filePath": "_app/_explore/explore.tsx",
       "parent": "/_app"
@@ -540,6 +653,10 @@ export const routeTree = rootRoute
       "filePath": "_app/_explore/feed.tsx",
       "parent": "/_app"
     },
+    "/_app/bangumi/manage": {
+      "filePath": "_app/bangumi/manage.tsx",
+      "parent": "/_app/bangumi"
+    },
     "/_app/playground/graphql-api": {
       "filePath": "_app/playground/graphql-api.tsx",
       "parent": "/_app/playground"
@@ -559,8 +676,12 @@ export const routeTree = rootRoute
     "/auth/oidc/callback": {
       "filePath": "auth/oidc/callback.tsx"
     },
-    "/_app/subscriptions/edit/$subscription-id": {
-      "filePath": "_app/subscriptions/edit.$subscription-id.tsx",
+    "/_app/subscriptions/detail/$subscriptionId": {
+      "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
+      "parent": "/_app/subscriptions"
+    },
+    "/_app/subscriptions/edit/$subscriptionId": {
+      "filePath": "_app/subscriptions/edit.$subscriptionId.tsx",
       "parent": "/_app/subscriptions"
     }
   }
diff --git a/apps/webui/src/views/utils/index.ts b/apps/webui/src/presentation/utils/index.ts
similarity index 100%
rename from apps/webui/src/views/utils/index.ts
rename to apps/webui/src/presentation/utils/index.ts
diff --git a/apps/webui/src/views/routes/_app/subscriptions/manage.tsx b/apps/webui/src/views/routes/_app/subscriptions/manage.tsx
deleted file mode 100644
index 2fe6912..0000000
--- a/apps/webui/src/views/routes/_app/subscriptions/manage.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import type { GetSubscriptionsQuery } from '@/infra/graphql/gql/graphql';
-import type { RouteStateDataOption } from '@/infra/routes/traits';
-import { Badge } from '@/views/components/ui/badge';
-import { Button } from '@/views/components/ui/button';
-import {
-  Card,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/views/components/ui/card';
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/views/components/ui/hover-card';
-import { Image } from '@/views/components/ui/image';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/views/components/ui/select';
-import { useQuery } from '@apollo/client';
-import { gql } from '@apollo/client';
-import { createFileRoute } from '@tanstack/react-router';
-import { useNavigate } from '@tanstack/react-router';
-import { useState } from 'react';
-
-export const Route = createFileRoute('/_app/subscriptions/manage')({
-  component: SubscriptionManageRouteComponent,
-  staticData: {
-    breadcrumb: { label: 'Manage' },
-  } satisfies RouteStateDataOption,
-});
-
-// GraphQL query
-const GET_SUBSCRIPTIONS = gql`
-  query GetSubscriptions($page: Int!, $pageSize: Int!) {
-    subscriptions(
-      pagination: {
-        page: {
-          page: $page,
-          limit: $pageSize
-        }
-      }
-    ) {
-      nodes {
-        id
-        displayName
-        category
-        enabled
-        bangumi {
-          nodes {
-            id
-            displayName
-            posterLink
-            season
-            fansub
-            homepage
-          }
-        }
-      }
-    }
-  }
-`;
-
-function SubscriptionManageRouteComponent() {
-  const navigate = useNavigate();
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [sortBy, setSortBy] = useState('createdAt');
-  const [sortOrder, setSortOrder] = useState('desc');
-
-  const { loading, error, data } = useQuery<GetSubscriptionsQuery>(
-    GET_SUBSCRIPTIONS,
-    {
-      variables: {
-        page,
-        pageSize,
-        sortBy,
-        sortOrder,
-      },
-    }
-  );
-
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-  if (error) {
-    return <div>Error: {error.message}</div>;
-  }
-
-  const { nodes: items } = data?.subscriptions ?? {};
-  const totalPages = Math.ceil(total / pageSize);
-
-  return (
-    <div className="container mx-auto space-y-4 p-4">
-      {/* Filters and sorting controls */}
-      <div className="flex items-center gap-4">
-        <Select
-          value={pageSize.toString()}
-          onValueChange={(value) => setPageSize(Number(value))}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Items per page" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="12">12 items/page</SelectItem>
-            <SelectItem value="24">24 items/page</SelectItem>
-            <SelectItem value="48">48 items/page</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select value={sortBy} onValueChange={setSortBy}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Sort by" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="createdAt">Created At</SelectItem>
-            <SelectItem value="displayName">Name</SelectItem>
-            <SelectItem value="season">Season</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select value={sortOrder} onValueChange={setSortOrder}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Sort order" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="asc">Ascending</SelectItem>
-            <SelectItem value="desc">Descending</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Subscription list */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {items.map((subscription) => (
-          <Card key={subscription.id} className="overflow-hidden">
-            <HoverCard>
-              <HoverCardTrigger>
-                <div className="relative aspect-[2/3] w-full">
-                  <Image
-                    src={subscription.bangumi.posterLink || '/placeholder.png'}
-                    alt={subscription.bangumi.displayName}
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-              </HoverCardTrigger>
-              <HoverCardContent className="w-80">
-                <Image
-                  src={subscription.bangumi.posterLink || '/placeholder.png'}
-                  alt={subscription.bangumi.displayName}
-                  className="h-auto w-full"
-                />
-              </HoverCardContent>
-            </HoverCard>
-
-            <CardHeader>
-              <CardTitle className="line-clamp-2">
-                {subscription.bangumi.extra?.nameZh ||
-                  subscription.bangumi.displayName}
-              </CardTitle>
-              <div className="flex gap-2">
-                <Badge variant={subscription.enabled ? 'default' : 'secondary'}>
-                  {subscription.enabled ? 'Enabled' : 'Disabled'}
-                </Badge>
-                <Badge variant="outline">
-                  {subscription.bangumi.fansub || 'Unknown Group'}
-                </Badge>
-              </div>
-            </CardHeader>
-
-            <CardFooter className="flex justify-between">
-              <Button
-                variant="outline"
-                onClick={() =>
-                  navigate({ to: `/subscriptions/${subscription.id}` })
-                }
-              >
-                View Details
-              </Button>
-              <Button
-                onClick={() =>
-                  navigate({ to: `/subscriptions/${subscription.id}/edit` })
-                }
-              >
-                Edit
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-
-      {/* Pagination controls */}
-      <div className="flex justify-center gap-2">
-        <Button
-          variant="outline"
-          onClick={() => setPage(page - 1)}
-          disabled={page === 1}
-        >
-          Previous
-        </Button>
-        <span className="py-2">
-          Page {page} of {totalPages}
-        </span>
-        <Button
-          variant="outline"
-          onClick={() => setPage(page + 1)}
-          disabled={page === totalPages}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/webui/tsr.config.json b/apps/webui/tsr.config.json
index bc1776f..0a96574 100644
--- a/apps/webui/tsr.config.json
+++ b/apps/webui/tsr.config.json
@@ -1,4 +1,4 @@
 {
-  "routesDirectory": "./src/views/routes",
-  "generatedRouteTree": "./src/views/routeTree.gen.ts"
+  "routesDirectory": "./src/presentation/routes",
+  "generatedRouteTree": "./src/presentation/routes/routeTree.gen.ts"
 }
diff --git a/biome.json b/biome.json
index 24d6b90..381be21 100644
--- a/biome.json
+++ b/biome.json
@@ -6,6 +6,9 @@
   },
   "linter": {
     "rules": {
+      "nursery": {
+        "noEnum": "off"
+      },
       "style": {
         "noParameterProperties": "off",
         "noNonNullAssertion": "off"
@@ -35,7 +38,19 @@
   },
   "overrides": [
     {
-      "include": ["apps/webui/src/views/components/ui/**/*"],
+      "include": ["apps/webui/src/infra/graphql/gql/**/*"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useShorthandArrayType": "off",
+            "useConsistentArrayType": "off",
+            "useImportType": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["apps/webui/src/components/ui/**/*"],
       "javascript": {
         "formatter": {
           "quoteStyle": "double"
diff --git a/dev.kdl b/dev.kdl
index 13235e0..6fb685a 100644
--- a/dev.kdl
+++ b/dev.kdl
@@ -31,8 +31,8 @@ layout {
         }
     }
     tab name="Recorder" {
-        pane command="watchexec" {
-            args "-r" "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
+        pane command="just" {
+            args "dev-recorder"
         }
     }
     tab name="Deps" {
@@ -40,4 +40,9 @@ layout {
             args "compose" "-f" "devdeps.compose.yaml" "up"
         }
     }
+    tab name="Codegen" {
+        pane command="just" {
+            args "dev-codegen-wait"
+        }
+    }
 }
\ No newline at end of file
diff --git a/justfile b/justfile
index 591d146..b7588f9 100644
--- a/justfile
+++ b/justfile
@@ -11,7 +11,6 @@ dev-webui:
 dev-proxy:
     pnpm run --filter=proxy dev
 
-# crash on windows
 dev-recorder:
     watchexec -r -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
 
@@ -25,4 +24,9 @@ dev-codegen:
     pnpm run --filter=webui codegen
 
 dev-all:
-    zellij --layout dev.kdl
\ No newline at end of file
+    zellij --layout dev.kdl
+
+dev-codegen-wait:
+    @until nc -z localhost 5001; do echo "Waiting for Recorder..."; sleep 1; done
+    pnpm run --filter=webui codegen-watch
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32fb997..2eaa23f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -173,6 +173,9 @@ importers:
       '@tanstack/react-router':
         specifier: ^1.112.13
         version: 1.120.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tanstack/router-devtools':
         specifier: ^1.112.13
         version: 1.120.2(@tanstack/react-router@1.120.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@tanstack/router-core@1.119.0)(csstype@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tiny-invariant@1.3.3)
@@ -263,7 +266,7 @@ importers:
     devDependencies:
       '@graphql-codegen/cli':
         specifier: ^5.0.6
-        version: 5.0.6(@types/node@22.15.16)(bufferutil@4.0.9)(encoding@0.1.13)(enquirer@2.4.1)(graphql@16.11.0)(typescript@5.8.3)(utf-8-validate@6.0.5)
+        version: 5.0.6(@parcel/watcher@2.5.1)(@types/node@22.15.16)(bufferutil@4.0.9)(encoding@0.1.13)(enquirer@2.4.1)(graphql@16.11.0)(typescript@5.8.3)(utf-8-validate@6.0.5)
       '@graphql-codegen/client-preset':
         specifier: ^4.8.1
         version: 4.8.1(encoding@0.1.13)(graphql@16.11.0)
@@ -273,6 +276,9 @@ importers:
       '@graphql-typed-document-node/core':
         specifier: ^3.2.0
         version: 3.2.0(graphql@16.11.0)
+      '@parcel/watcher':
+        specifier: ^2.5.1
+        version: 2.5.1
       '@rsbuild/core':
         specifier: ^1.2.15
         version: 1.3.17
@@ -2006,6 +2012,88 @@ packages:
   '@outposts/injection-js@2.5.1':
     resolution: {integrity: sha512-f2HCfEM9k7WqLw5Bs2Sh2rWrwuuQFE3c5yKueQfO4WAnJBvlC6tU0JWSG1j8A7NsEfcdUtMVmIzGIRIHo7ALPw==}
 
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -3215,6 +3303,13 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@tanstack/react-virtual@3.13.6':
     resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
     peerDependencies:
@@ -3301,6 +3396,10 @@ packages:
   '@tanstack/store@0.7.0':
     resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.13.6':
     resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
 
@@ -4234,6 +4333,11 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
@@ -5499,6 +5603,9 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
@@ -8049,7 +8156,7 @@ snapshots:
       graphql: 16.11.0
       tslib: 2.6.3
 
-  '@graphql-codegen/cli@5.0.6(@types/node@22.15.16)(bufferutil@4.0.9)(encoding@0.1.13)(enquirer@2.4.1)(graphql@16.11.0)(typescript@5.8.3)(utf-8-validate@6.0.5)':
+  '@graphql-codegen/cli@5.0.6(@parcel/watcher@2.5.1)(@types/node@22.15.16)(bufferutil@4.0.9)(encoding@0.1.13)(enquirer@2.4.1)(graphql@16.11.0)(typescript@5.8.3)(utf-8-validate@6.0.5)':
     dependencies:
       '@babel/generator': 7.27.1
       '@babel/template': 7.27.2
@@ -8087,6 +8194,8 @@ snapshots:
       tslib: 2.8.1
       yaml: 2.7.1
       yargs: 17.7.2
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
     transitivePeerDependencies:
       - '@fastify/websocket'
       - '@types/node'
@@ -8904,6 +9013,66 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher@2.5.1':
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -10127,6 +10296,12 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       use-sync-external-store: 1.4.0(react@19.1.0)
 
+  '@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@tanstack/react-virtual@3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/virtual-core': 3.13.6
@@ -10234,6 +10409,8 @@ snapshots:
 
   '@tanstack/store@0.7.0': {}
 
+  '@tanstack/table-core@8.21.3': {}
+
   '@tanstack/virtual-core@3.13.6': {}
 
   '@tanstack/virtual-file-routes@1.115.0': {}
@@ -11260,6 +11437,8 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
+  detect-libc@1.0.3: {}
+
   detect-libc@2.0.3:
     optional: true
 
@@ -12712,6 +12891,8 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
+  node-addon-api@7.1.1: {}
+
   node-domexception@1.0.0: {}
 
   node-fetch@2.6.7(encoding@0.1.13):